perf: resolve cleanup targets by primary key

Dockerfile

@@ -1,7 +1,7 @@
 FROM node:26-slim AS base
 LABEL org.opencontainers.image.source="https://github.com/docmost/docmost"
 
-RUN npm install -g pnpm@11.23.0
+RUN npm install -g pnpm@11.25.0
 
 FROM base AS builder
 

apps/client/package.json

@@ -21,6 +21,7 @@
     "@docmost/base-formula": "workspace:*",
     "@docmost/editor-ext": "workspace:*",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
+    "@fontsource-variable/inter": "5.3.0",
     "@mantine/core": "9.3.2",
     "@mantine/dates": "9.3.2",
     "@mantine/form": "9.3.2",

apps/client/public/locales/en-US/translation.json

@@ -793,6 +793,10 @@
   "Removed page restriction": "Removed page restriction",
   "Added page permission": "Added page permission",
   "Removed page permission": "Removed page permission",
+  "Changed page permission": "Changed page permission",
+  "Requested password reset": "Requested password reset",
+  "Created template": "Created template",
+  "Deleted template": "Deleted template",
   "day": "day",
   "days": "days",
   "week": "week",
@@ -880,6 +884,9 @@
   "<bold>{{name}}</bold> returned a page for revision": "<bold>{{name}}</bold> returned a page for revision",
   "Page verification expires soon": "Page verification expires soon",
   "Page verification has expired": "Page verification has expired",
+  "SIEM destination <bold>{{name}}</bold> is failing": "SIEM destination <bold>{{name}}</bold> is failing",
+  "SIEM destination <bold>{{name}}</bold> was disabled after 24 hours of failures": "SIEM destination <bold>{{name}}</bold> was disabled after 24 hours of failures",
+  "SIEM destination <bold>{{name}}</bold> recovered": "SIEM destination <bold>{{name}}</bold> recovered",
   "Verifying your email": "Verifying your email",
   "Please wait...": "Please wait...",
   "Verification failed. The link may have expired.": "Verification failed. The link may have expired.",
@@ -1337,5 +1344,137 @@
   "AI Chat can search and read workspace content, but cannot create or edit pages.": "AI Chat can search and read workspace content, but cannot create or edit pages.",
   "Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode",
   "Title only": "Title only",
-  "you": "you"
+  "you": "you",
+  "Allow public spaces": "Allow public spaces",
+  "Space admins can publish their spaces to the web.": "Space admins can publish their spaces to the web.",
+  "Toggle allow public spaces": "Toggle allow public spaces",
+  "Publish space to the web": "Publish space to the web",
+  "Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?": "Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?",
+  "Make this space publicly readable by anyone on the internet.": "Make this space publicly readable by anyone on the internet.",
+  "Toggle publish space to the web": "Toggle publish space to the web",
+  "Allow search engines to index": "Allow search engines to index",
+  "Let public pages in this space appear in search engine results.": "Let public pages in this space appear in search engine results.",
+  "Toggle search engine indexing": "Toggle search engine indexing",
+  "Public space link": "Public space link",
+  "Copy public space link": "Copy public space link",
+  "Renaming the space slug will break public links.": "Renaming the space slug will break public links.",
+  "Failed to update space": "Failed to update space",
+  "This space is public": "This space is public",
+  "Anyone on the internet can read the pages in this space, except restricted pages.": "Anyone on the internet can read the pages in this space, except restricted pages.",
+  "Open public site": "Open public site",
+  "Public": "Public",
+  "This space has no public pages yet.": "This space has no public pages yet.",
+  "On this page": "On this page",
+  "Previous": "Previous",
+  "Next": "Next",
+  "Show hidden pages": "Show hidden pages",
+  "Page navigation": "Page navigation",
+  "Toggle sidebar": "Toggle sidebar",
+  "Toggle table of contents": "Toggle table of contents",
+  "Appearance": "Appearance",
+  "Forest": "Forest",
+  "Violet": "Violet",
+  "Light mode color": "Light mode color",
+  "Dark mode color": "Dark mode color",
+  "Choose the primary color of the public docs site.": "Choose the primary color of the public docs site.",
+  "Show page author": "Show page author",
+  "Display the page creator's name on public pages.": "Display the page creator's name on public pages.",
+  "Toggle show page author": "Toggle show page author",
+  "Show last updated": "Show last updated",
+  "Display when each page was last updated.": "Display when each page was last updated.",
+  "Toggle show last updated": "Toggle show last updated",
+  "Open public page": "Open public page",
+  "Toggle color scheme": "Toggle color scheme",
+  "Ember": "Ember",
+  "Rose": "Rose",
+  "Documentation": "Documentation",
+  "All published spaces.": "All published spaces.",
+  "No public spaces yet.": "No public spaces yet.",
+  "Show public directory": "Show public directory",
+  "List published spaces at /docs for anyone to browse.": "List published spaces at /docs for anyone to browse.",
+  "Toggle show public directory": "Toggle show public directory",
+  "Show in public directory": "Show in public directory",
+  "List this space in the public directory at /docs.": "List this space in the public directory at /docs.",
+  "Toggle show in public directory": "Toggle show in public directory",
+  "Open public space link": "Open public space link",
+  "Disable public spaces": "Disable public spaces",
+  "Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?": "Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?",
+  "This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?": "This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?",
+  "Allow": "Allow",
+  "Shared pages": "Shared pages",
+  "Published spaces": "Published spaces",
+  "Spaces published to the web will appear here": "Spaces published to the web will appear here",
+  "No published spaces": "No published spaces",
+  "Published by": "Published by",
+  "Published at": "Published at",
+  "Open space": "Open space",
+  "Unpublish": "Unpublish",
+  "Unpublish space": "Unpublish space",
+  "This space will no longer be publicly accessible. Are you sure?": "This space will no longer be publicly accessible. Are you sure?",
+  "More options for {{name}}": "More options for {{name}}",
+  "Edit page": "Edit page",
+  "Sign in": "Sign in",
+  "Open app": "Open app",
+  "No spaces match your search.": "No spaces match your search.",
+  "Welcome to our documentation": "Welcome to our documentation",
+  "Guides, references and answers across all our published spaces.": "Guides, references and answers across all our published spaces.",
+  "Guides, references and answers across all our spaces.": "Guides, references and answers across all our spaces.",
+  "Search documentation...": "Search documentation...",
+  "1 published space": "1 published space",
+  "{{count}} published spaces": "{{count}} published spaces",
+  "Actions": "Actions",
+  "Add destination": "Add destination",
+  "Are you sure you want to delete the destination": "Are you sure you want to delete the destination",
+  "Audit logs": "Audit logs",
+  "Audit logs & SIEM": "Audit logs & SIEM",
+  "Auth header name": "Auth header name",
+  "Auth header prefix": "Auth header prefix",
+  "Body format": "Body format",
+  "Created SIEM destination": "Created SIEM destination",
+  "Datadog site": "Datadog site",
+  "Defaults to this instance's hostname": "Defaults to this instance's hostname",
+  "Delete destination": "Delete destination",
+  "Deleted SIEM destination": "Deleted SIEM destination",
+  "Destination created": "Destination created",
+  "Destination deleted": "Destination deleted",
+  "Destination updated": "Destination updated",
+  "Disabled": "Disabled",
+  "Edit destination": "Edit destination",
+  "Endpoint URL": "Endpoint URL",
+  "Failing": "Failing",
+  "Failing since {{time}}": "Failing since {{time}}",
+  "HEC token": "HEC token",
+  "HEC URL": "HEC URL",
+  "Healthy": "Healthy",
+  "Hide advanced options": "Hide advanced options",
+  "Host": "Host",
+  "Index": "Index",
+  "Insecure: connections can be intercepted.": "Insecure: connections can be intercepted.",
+  "JSON array": "JSON array",
+  "Last delivered": "Last delivered",
+  "Last error": "Last error",
+  "Leave empty to use the token's default index": "Leave empty to use the token's default index",
+  "Maximum of {{limit}} destinations reached": "Maximum of {{limit}} destinations reached",
+  "Could not load SIEM destinations: {{message}}": "Could not load SIEM destinations: {{message}}",
+  "No destinations yet": "No destinations yet",
+  "Preset": "Preset",
+  "Retry now": "Retry now",
+  "Retry scheduled": "Retry scheduled",
+  "Send test event": "Send test event",
+  "Sent in the auth header below. Leave empty if your receiver does not need one.": "Sent in the auth header below. Leave empty if your receiver does not need one.",
+  "Service": "Service",
+  "Show advanced options": "Show advanced options",
+  "SIEM": "SIEM",
+  "SIEM streaming": "SIEM streaming",
+  "SIEM streaming requires an Enterprise license.": "SIEM streaming requires an Enterprise license.",
+  "Source": "Source",
+  "Sourcetype": "Sourcetype",
+  "Tags": "Tags",
+  "Test connection": "Test connection",
+  "Test event delivered successfully.": "Test event delivered successfully.",
+  "Test the connection before saving.": "Test the connection before saving.",
+  "Test event delivered to {{name}}": "Test event delivered to {{name}}",
+  "Updated SIEM destination": "Updated SIEM destination",
+  "Verify TLS certificate": "Verify TLS certificate",
+  "e.g. Splunk prod": "e.g. Splunk prod"
 }

apps/client/src/App.tsx

@@ -44,6 +44,15 @@ const ShareLayout = lazy(
   () => import("@/features/share/components/share-layout.tsx"),
 );
 const ShareRedirect = lazy(() => import("@/pages/share/share-redirect.tsx"));
+const PublicSpacePage = lazy(
+  () => import("@/pages/public-space/public-space-page.tsx"),
+);
+const PublicSpaceLayout = lazy(
+  () => import("@/features/public-space/components/public-space-layout.tsx"),
+);
+const PublicSpaceDirectoryPage = lazy(
+  () => import("@/pages/public-space/public-space-directory-page.tsx"),
+);
 const SpacesPage = lazy(() => import("@/pages/spaces/spaces.tsx"));
 const MfaChallengePage = lazy(() =>
   import("@/ee/mfa/pages/mfa-challenge-page").then((m) => ({
@@ -119,6 +128,15 @@ export default function App() {
           <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
         </Route>
 
+        <Route path={"/docs"} element={<PublicSpaceDirectoryPage />} />
+        <Route element={<PublicSpaceLayout />}>
+          <Route path={"/docs/:spaceSlug"} element={<PublicSpacePage />} />
+          <Route
+            path={"/docs/:spaceSlug/:pageSlug"}
+            element={<PublicSpacePage />}
+          />
+        </Route>
+
         <Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
         <Route path={"/share/:shareId"} element={<ShareRedirect />} />
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
@@ -166,6 +184,11 @@ export default function App() {
             <Route path={"ai"} element={<AiSettings />} />
             <Route path={"ai/mcp"} element={<AiSettings />} />
             <Route path={"audit"} element={<AuditLogs />} />
+            <Route path={"audit/siem"} element={<AuditLogs />} />
+            <Route
+              path={"siem"}
+              element={<Navigate to="/settings/audit/siem" replace />}
+            />
             <Route path={"verifications"} element={<VerifiedPages />} />
             {!isCloud() && <Route path={"license"} element={<License />} />}
             {isCloud() && <Route path={"billing"} element={<Billing />} />}

apps/client/src/components/settings/settings-sidebar.tsx

@@ -118,7 +118,7 @@ const groupedData: DataGroup[] = [
         role: "admin",
       },
       {
-        label: "Audit log",
+        label: "Audit logs & SIEM",
         icon: IconHistory,
         path: "/settings/audit",
         feature: Feature.AUDIT_LOGS,
@@ -219,7 +219,7 @@ export default function SettingsSidebar() {
             case "API management":
               prefetchHandler = prefetchApiKeyManagement;
               break;
-            case "Audit log":
+            case "Audit logs & SIEM":
               prefetchHandler = prefetchAuditLogs;
               break;
             case "Verified pages":

apps/client/src/ee/audit/lib/audit-event-labels.ts

@@ -22,6 +22,7 @@ export const auditEventLabels: Record<string, string> = {
   "user.role_changed": "Changed user role",
   "user.password_changed": "Changed password",
   "user.password_reset": "Reset password",
+  "user.password_reset_requested": "Requested password reset",
   "user.updated": "Updated user",
   "user.deactivated": "Deactivated user",
   "user.activated": "Activated user",
@@ -62,6 +63,7 @@ export const auditEventLabels: Record<string, string> = {
   "page.restriction_removed": "Removed page restriction",
   "page.permission_added": "Added page permission",
   "page.permission_removed": "Removed page permission",
+  "page.permission_role_changed": "Changed page permission",
   "page.verification_created": "Created page verification",
   "page.verification_updated": "Updated page verification",
   "page.verification_removed": "Removed page verification",
@@ -79,6 +81,13 @@ export const auditEventLabels: Record<string, string> = {
 
   "license.activated": "Activated license",
   "license.removed": "Removed license",
+
+  "siem_destination.created": "Created SIEM destination",
+  "siem_destination.updated": "Updated SIEM destination",
+  "siem_destination.deleted": "Deleted SIEM destination",
+
+  "template.created": "Created template",
+  "template.deleted": "Deleted template",
 };
 
 export function getEventLabel(event: string): string {
@@ -105,6 +114,10 @@ export const eventFilterOptions: EventGroup[] = [
       { value: "user.activated", label: "Activated user" },
       { value: "user.role_changed", label: "Changed user role" },
       { value: "user.password_changed", label: "Changed password" },
+      {
+        value: "user.password_reset_requested",
+        label: "Requested password reset",
+      },
       { value: "user.mfa_enabled", label: "Enabled MFA" },
       { value: "user.mfa_disabled", label: "Disabled MFA" },
     ],
@@ -147,6 +160,10 @@ export const eventFilterOptions: EventGroup[] = [
       { value: "page.restriction_removed", label: "Removed page restriction" },
       { value: "page.permission_added", label: "Added page permission" },
       { value: "page.permission_removed", label: "Removed page permission" },
+      {
+        value: "page.permission_role_changed",
+        label: "Changed page permission",
+      },
       { value: "page.verification_created", label: "Created page verification" },
       { value: "page.verification_updated", label: "Updated page verification" },
       { value: "page.verification_removed", label: "Removed page verification" },
@@ -193,4 +210,19 @@ export const eventFilterOptions: EventGroup[] = [
       { value: "license.removed", label: "Removed license" },
     ],
   },
+  {
+    group: "SIEM",
+    items: [
+      { value: "siem_destination.created", label: "Created SIEM destination" },
+      { value: "siem_destination.updated", label: "Updated SIEM destination" },
+      { value: "siem_destination.deleted", label: "Deleted SIEM destination" },
+    ],
+  },
+  {
+    group: "Template",
+    items: [
+      { value: "template.created", label: "Created template" },
+      { value: "template.deleted", label: "Deleted template" },
+    ],
+  },
 ];

apps/client/src/ee/audit/pages/audit-logs.tsx

@@ -7,10 +7,12 @@ import {
   Popover,
   Select,
   Space,
+  Tabs,
   Text,
   Tooltip,
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
 import { IconSettings } from "@tabler/icons-react";
 import SettingsTitle from "@/components/settings/settings-title";
 import Paginate from "@/components/common/paginate";
@@ -23,6 +25,7 @@ import {
 import { IAuditLogParams } from "@/ee/audit/types/audit.types";
 import { eventFilterOptions } from "@/ee/audit/lib/audit-event-labels";
 import AuditLogsTable from "@/ee/audit/components/audit-logs-table";
+import SiemStreamingPanel from "@/ee/siem/components/siem-streaming-panel";
 import useUserRole from "@/hooks/use-user-role";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
 
@@ -48,6 +51,8 @@ export default function AuditLogs() {
   const { t } = useTranslation();
   const { isOwner } = useUserRole();
   const { cursor, goNext, goPrev, resetCursor } = useCursorPaginate();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const [eventFilter, setEventFilter] = useState<string | null>(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -85,6 +90,8 @@ export default function AuditLogs() {
 
   const { data, isLoading } = useAuditLogsQuery(params);
 
+  const activeTab = location.pathname.endsWith("/siem") ? "siem" : "audit";
+
   if (!isOwner) {
     return null;
   }
@@ -94,125 +101,150 @@ export default function AuditLogs() {
     resetCursor();
   };
 
+  const handleTabChange = (value: string | null) => {
+    if (value === "siem") {
+      navigate("/settings/audit/siem");
+    } else {
+      navigate("/settings/audit");
+    }
+  };
+
   return (
     <>
-      <DocumentTitle title={t("Audit log")} />
+      <DocumentTitle title={t("Audit logs & SIEM")} />
 
-      <SettingsTitle title={t("Audit log")} />
+      <SettingsTitle title={t("Audit logs & SIEM")} />
 
-      <Group mb="md" gap="sm">
-        <Select
-          placeholder={t("Filter by event")}
-          data={eventFilterOptions.map((group) => ({
-            group: t(group.group),
-            items: group.items.map((item) => ({
-              value: item.value,
-              label: t(item.label),
-            })),
-          }))}
-          value={eventFilter}
-          onChange={handleEventChange}
-          clearable
-          searchable
-          w={220}
-          size="sm"
-        />
+      <Tabs color="dark" value={activeTab} onChange={handleTabChange}>
+        <Tabs.List>
+          <Tabs.Tab fw={500} value="audit">
+            {t("Audit logs")}
+          </Tabs.Tab>
+          <Tabs.Tab fw={500} value="siem">
+            {t("SIEM")}
+          </Tabs.Tab>
+        </Tabs.List>
 
-        <Popover
-          position="bottom-end"
-          shadow="md"
-          width={260}
-          withArrow
-          opened={settingsOpen}
-          onChange={(opened) => {
-            if (!opened) resetRetentionForm();
-            setSettingsOpen(opened);
-          }}
-        >
-          <Popover.Target>
-            <Tooltip label={t("Audit settings")}>
-              <ActionIcon variant="default" size="input-sm" ml="auto" onClick={() => setSettingsOpen((o) => !o)}>
-                <IconSettings size={16} />
-              </ActionIcon>
-            </Tooltip>
-          </Popover.Target>
-          <Popover.Dropdown>
-            <Text fz="sm" fw={500} mb={4}>
-              {t("Retention")}
-            </Text>
-            <Text fz="xs" c="dimmed" mb="sm">
-              {t("Logs older than this period are automatically deleted.")}
-            </Text>
-            <Group gap="xs" wrap="nowrap" mb="sm">
-              <NumberInput
-                value={retentionAmount}
-                onChange={(val) => setRetentionAmount(val)}
-                min={1}
-                hideControls
-                size="sm"
-                w={60}
-              />
-              <Select
-                data={[
-                  { value: "days", label: t("days") },
-                  { value: "months", label: t("months") },
-                  { value: "years", label: t("years") },
-                ]}
-                value={retentionUnit}
-                onChange={(value) => {
-                  if (value === "days" || value === "months" || value === "years") {
-                    setRetentionUnit(value);
-                  }
-                }}
-                size="sm"
-                style={{ flex: 1 }}
-                comboboxProps={{ withinPortal: false }}
-              />
-            </Group>
-            <Group gap="xs" grow>
-              <Button
-                size="xs"
-                variant="default"
-                onClick={() => {
-                  resetRetentionForm();
-                  setSettingsOpen(false);
-                }}
-              >
-                {t("Cancel")}
-              </Button>
-              <Button
-                size="xs"
-                onClick={() => {
-                  const num = typeof retentionAmount === "number" ? retentionAmount : 1;
-                  const clamped = Math.max(1, num);
-                  setRetentionAmount(clamped);
-                  const days = retentionToDays(clamped, retentionUnit);
-                  if (days !== currentDays) {
-                    updateRetention.mutate({ auditRetentionDays: days });
-                  }
-                  setSettingsOpen(false);
-                }}
-                loading={updateRetention.isPending}
-              >
-                {t("Save")}
-              </Button>
-            </Group>
-          </Popover.Dropdown>
-        </Popover>
-      </Group>
+        <Tabs.Panel value="audit" pt="md">
+          <Group mb="md" gap="sm">
+            <Select
+              placeholder={t("Filter by event")}
+              data={eventFilterOptions.map((group) => ({
+                group: t(group.group),
+                items: group.items.map((item) => ({
+                  value: item.value,
+                  label: t(item.label),
+                })),
+              }))}
+              value={eventFilter}
+              onChange={handleEventChange}
+              clearable
+              searchable
+              w={220}
+              size="sm"
+            />
 
-      <AuditLogsTable items={data?.items} isLoading={isLoading} />
+            <Popover
+              position="bottom-end"
+              shadow="md"
+              width={260}
+              withArrow
+              opened={settingsOpen}
+              onChange={(opened) => {
+                if (!opened) resetRetentionForm();
+                setSettingsOpen(opened);
+              }}
+            >
+              <Popover.Target>
+                <Tooltip label={t("Audit settings")}>
+                  <ActionIcon variant="default" size="input-sm" ml="auto" onClick={() => setSettingsOpen((o) => !o)}>
+                    <IconSettings size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <Text fz="sm" fw={500} mb={4}>
+                  {t("Retention")}
+                </Text>
+                <Text fz="xs" c="dimmed" mb="sm">
+                  {t("Logs older than this period are automatically deleted.")}
+                </Text>
+                <Group gap="xs" wrap="nowrap" mb="sm">
+                  <NumberInput
+                    value={retentionAmount}
+                    onChange={(val) => setRetentionAmount(val)}
+                    min={1}
+                    hideControls
+                    size="sm"
+                    w={60}
+                  />
+                  <Select
+                    data={[
+                      { value: "days", label: t("days") },
+                      { value: "months", label: t("months") },
+                      { value: "years", label: t("years") },
+                    ]}
+                    value={retentionUnit}
+                    onChange={(value) => {
+                      if (value === "days" || value === "months" || value === "years") {
+                        setRetentionUnit(value);
+                      }
+                    }}
+                    size="sm"
+                    style={{ flex: 1 }}
+                    comboboxProps={{ withinPortal: false }}
+                  />
+                </Group>
+                <Group gap="xs" grow>
+                  <Button
+                    size="xs"
+                    variant="default"
+                    onClick={() => {
+                      resetRetentionForm();
+                      setSettingsOpen(false);
+                    }}
+                  >
+                    {t("Cancel")}
+                  </Button>
+                  <Button
+                    size="xs"
+                    onClick={() => {
+                      const num = typeof retentionAmount === "number" ? retentionAmount : 1;
+                      const clamped = Math.max(1, num);
+                      setRetentionAmount(clamped);
+                      const days = retentionToDays(clamped, retentionUnit);
+                      if (days !== currentDays) {
+                        updateRetention.mutate({ auditRetentionDays: days });
+                      }
+                      setSettingsOpen(false);
+                    }}
+                    loading={updateRetention.isPending}
+                  >
+                    {t("Save")}
+                  </Button>
+                </Group>
+              </Popover.Dropdown>
+            </Popover>
+          </Group>
 
-      <Space h="md" />
+          <AuditLogsTable items={data?.items} isLoading={isLoading} />
 
-      {data?.items && data.items.length > 0 && (
-        <Paginate
-          hasPrevPage={data?.meta?.hasPrevPage}
-          hasNextPage={data?.meta?.hasNextPage}
-          onNext={() => goNext(data?.meta?.nextCursor)}
-          onPrev={goPrev}
-        />
-      )}
+          <Space h="md" />
+
+          {data?.items && data.items.length > 0 && (
+            <Paginate
+              hasPrevPage={data?.meta?.hasPrevPage}
+              hasNextPage={data?.meta?.hasNextPage}
+              onNext={() => goNext(data?.meta?.nextCursor)}
+              onPrev={goPrev}
+            />
+          )}
+        </Tabs.Panel>
+
+        <Tabs.Panel value="siem" pt="md">
+          <SiemStreamingPanel />
+        </Tabs.Panel>
+      </Tabs>
     </>
   );
 }

apps/client/src/ee/features.ts

@@ -25,4 +25,6 @@ export const Feature = {
   OAUTH: 'oauth',
   AI_CONTROLS: 'ai:controls',
   MCP_CONTROLS: 'mcp:controls',
+  PUBLIC_SPACE_APPEARANCE: 'public-space:appearance',
+  SIEM: 'siem',
 } as const;

apps/client/src/ee/security/components/space-public-sharing-toggle.tsx

@@ -82,6 +82,7 @@ export default function SpacePublicSharingToggle({
           checked={checked}
           onChange={handleChange}
           disabled={isDisabled}
+          size={"xs"}
           aria-label={t("Toggle space public sharing")}
         />
       </Tooltip>

apps/client/src/ee/security/components/space-viewer-comments-toggle.tsx

@@ -53,6 +53,7 @@ export default function SpaceViewerCommentsToggle({
           checked={checked}
           onChange={handleChange}
           disabled={isDisabled}
+          size={"xs"}
           aria-label={t("Toggle viewer comments")}
         />
       </Tooltip>

apps/client/src/ee/siem/components/delete-destination-modal.tsx

@@ -0,0 +1,44 @@
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ISiemDestination } from "@/ee/siem/types/siem.types";
+import { useDeleteSiemDestinationMutation } from "@/ee/siem/queries/siem-query";
+
+interface DeleteDestinationModalProps {
+  opened: boolean;
+  onClose: () => void;
+  destination: ISiemDestination | null;
+}
+
+export function DeleteDestinationModal({ opened, onClose, destination }: DeleteDestinationModalProps) {
+  const { t } = useTranslation();
+  const deleteMutation = useDeleteSiemDestinationMutation();
+
+  const handleDelete = async () => {
+    if (!destination) return;
+    await deleteMutation.mutateAsync({ destinationId: destination.id });
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("Delete destination")}
+      size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
+    >
+      <Stack gap="md">
+        <Text>
+          {t("Are you sure you want to delete the destination")}{" "}
+          <strong>{destination?.name}</strong>?
+        </Text>
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>{t("Cancel")}</Button>
+          <Button color="red" onClick={handleDelete} loading={deleteMutation.isPending}>
+            {t("Delete")}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/client/src/ee/siem/components/destination-form-modal.tsx

@@ -0,0 +1,300 @@
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Collapse,
+  Group,
+  Modal,
+  PasswordInput,
+  Select,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { IconAlertCircle, IconCheck } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { isCloud } from "@/lib/config.ts";
+import { DATADOG_SITES, ISiemDestination, ISiemTestResult } from "@/ee/siem/types/siem.types";
+import {
+  useCreateSiemDestinationMutation,
+  useTestSiemDestinationMutation,
+  useUpdateSiemDestinationMutation,
+} from "@/ee/siem/queries/siem-query";
+import {
+  DestinationFormValues,
+  initialValues,
+  toPayload,
+  validateForm,
+} from "@/ee/siem/lib/destination-form";
+import { DESTINATION_TYPE_LABELS } from "./destination-table";
+
+interface DestinationFormModalProps {
+  opened: boolean;
+  onClose: () => void;
+  destination?: ISiemDestination | null;
+}
+
+function connectionKey(values: DestinationFormValues): string {
+  const { type, config, secrets } = toPayload(values);
+  return JSON.stringify({ type, config, secrets });
+}
+
+export function DestinationFormModal({ opened, onClose, destination }: DestinationFormModalProps) {
+  const { t } = useTranslation();
+  const isEdit = Boolean(destination);
+  const hasSecrets = destination?.hasSecrets ?? {};
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [testState, setTestState] = useState<{ result: ISiemTestResult | null; testedPayloadKey: string | null }>({
+    result: null,
+    testedPayloadKey: null,
+  });
+  const createMutation = useCreateSiemDestinationMutation();
+  const updateMutation = useUpdateSiemDestinationMutation();
+  const testMutation = useTestSiemDestinationMutation();
+
+  const form = useForm<DestinationFormValues>({
+    initialValues: initialValues(destination),
+    validate: (values) => validateForm(values, hasSecrets),
+  });
+
+  useEffect(() => {
+    if (opened) {
+      form.setValues(initialValues(destination));
+      form.resetDirty();
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTestState({ result: null, testedPayloadKey: null });
+      setAdvancedOpen(false);
+    }
+  }, [opened, destination?.id]);
+
+  const handleSubmit = async (values: DestinationFormValues) => {
+    const payload = toPayload(values);
+    try {
+      if (destination) {
+        await updateMutation.mutateAsync({
+          destinationId: destination.id,
+          name: payload.name,
+          config: payload.config,
+          secrets: payload.secrets,
+          enabled: payload.enabled,
+        });
+      } else {
+        await createMutation.mutateAsync(payload);
+      }
+      onClose();
+    } catch {}
+  };
+
+  const handleTest = async () => {
+    if (form.validate().hasErrors) return;
+    const payload = toPayload(form.values);
+    const testedPayloadKey = connectionKey(form.values);
+    setTestState((prev) => ({ ...prev, testedPayloadKey }));
+    try {
+      const result = await testMutation.mutateAsync({
+        type: payload.type,
+        config: payload.config,
+        secrets: payload.secrets,
+        destinationId: destination?.id,
+      });
+      setTestState({ result, testedPayloadKey });
+    } catch {
+      setTestState({ result: null, testedPayloadKey });
+    }
+  };
+
+  const type = form.values.type;
+  const showTls = type !== "datadog";
+  const currentPayloadKey = connectionKey(form.values);
+  const showTestResult = testState.result !== null && testState.testedPayloadKey === currentPayloadKey;
+  const connectionChanged = currentPayloadKey !== connectionKey(initialValues(destination));
+  const testPassed = showTestResult && testState.result.delivered;
+  const requiresTest = (!isEdit || connectionChanged) && !testPassed;
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={isEdit ? t("Edit destination") : t("Add destination")}
+      size="lg"
+      closeButtonProps={{ "aria-label": t("Close") }}
+    >
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <Stack gap="md">
+          <Select
+            label={t("Preset")}
+            data={[
+              { value: "splunk_hec", label: DESTINATION_TYPE_LABELS.splunk_hec },
+              { value: "datadog", label: DESTINATION_TYPE_LABELS.datadog },
+              { value: "http", label: DESTINATION_TYPE_LABELS.http },
+            ]}
+            allowDeselect={false}
+            disabled={isEdit}
+            {...form.getInputProps("type")}
+          />
+
+          <TextInput
+            label={t("Name")}
+            placeholder={t("e.g. Splunk prod")}
+            required
+            data-autofocus
+            {...form.getInputProps("name")}
+          />
+
+          {type === "splunk_hec" && (
+            <>
+              <TextInput
+                label={t("HEC URL")}
+                placeholder="https://splunk.example.com:8088"
+                required
+                {...form.getInputProps("url")}
+              />
+              <PasswordInput
+                label={t("HEC token")}
+                required={!hasSecrets.token}
+                {...form.getInputProps("token")}
+              />
+            </>
+          )}
+
+          {type === "datadog" && (
+            <>
+              <Select
+                label={t("Datadog site")}
+                data={DATADOG_SITES.map((site) => ({ value: site, label: site }))}
+                allowDeselect={false}
+                {...form.getInputProps("site")}
+              />
+              <PasswordInput
+                label={t("API key")}
+                required={!hasSecrets.apiKey}
+                {...form.getInputProps("apiKey")}
+              />
+            </>
+          )}
+
+          {type === "http" && (
+            <>
+              <TextInput
+                label={t("Endpoint URL")}
+                placeholder="https://collector.example.com/docmost"
+                required
+                {...form.getInputProps("url")}
+              />
+              <PasswordInput
+                label={t("Token")}
+                description={t("Sent in the auth header below. Leave empty if your receiver does not need one.")}
+                {...form.getInputProps("token")}
+              />
+            </>
+          )}
+
+          <Button
+            variant="subtle"
+            size="compact-sm"
+            onClick={() => setAdvancedOpen((open) => !open)}
+            style={{ alignSelf: "flex-start" }}
+          >
+            {advancedOpen ? t("Hide advanced options") : t("Show advanced options")}
+          </Button>
+
+          <Collapse expanded={advancedOpen}>
+            <Stack gap="md">
+              {type === "splunk_hec" && (
+                <>
+                  <TextInput
+                    label={t("Index")}
+                    description={t("Leave empty to use the token's default index")}
+                    {...form.getInputProps("index")}
+                  />
+                  <Group grow>
+                    <TextInput label={t("Source")} {...form.getInputProps("source")} />
+                    <TextInput label={t("Sourcetype")} {...form.getInputProps("sourcetype")} />
+                  </Group>
+                  <TextInput
+                    label={t("Host")}
+                    description={t("Defaults to this instance's hostname")}
+                    {...form.getInputProps("host")}
+                  />
+                </>
+              )}
+
+              {type === "datadog" && (
+                <>
+                  <TextInput label={t("Service")} {...form.getInputProps("service")} />
+                  <TextInput label={t("Tags")} placeholder="env:prod,team:security" {...form.getInputProps("tags")} />
+                </>
+              )}
+
+              {type === "http" && (
+                <>
+                  <Group grow>
+                    <TextInput label={t("Auth header name")} {...form.getInputProps("authHeaderName")} />
+                    <TextInput label={t("Auth header prefix")} {...form.getInputProps("authHeaderPrefix")} />
+                  </Group>
+                  <Select
+                    label={t("Body format")}
+                    data={[
+                      { value: "json", label: t("JSON array") },
+                      { value: "ndjson", label: "NDJSON" },
+                    ]}
+                    allowDeselect={false}
+                    {...form.getInputProps("format")}
+                  />
+                </>
+              )}
+
+              {showTls && (
+                <>
+                  {!isCloud() && (
+                    <Switch
+                      label={t("Verify TLS certificate")}
+                      description={
+                        form.values.rejectUnauthorized
+                          ? undefined
+                          : t("Insecure: connections can be intercepted.")
+                      }
+                      {...form.getInputProps("rejectUnauthorized", { type: "checkbox" })}
+                    />
+                  )}
+                </>
+              )}
+
+              <Switch label={t("Enabled")} {...form.getInputProps("enabled", { type: "checkbox" })} />
+            </Stack>
+          </Collapse>
+
+          {showTestResult && (
+            <Alert
+              color={testState.result.delivered ? "green" : "red"}
+              icon={testState.result.delivered ? <IconCheck size={16} /> : <IconAlertCircle size={16} />}
+            >
+              {testState.result.delivered ? t("Test event delivered successfully.") : testState.result.error}
+            </Alert>
+          )}
+
+          <Group justify="space-between" mt="md">
+            <Group gap="sm">
+              <Button variant="default" onClick={handleTest} loading={testMutation.isPending}>
+                {t("Test connection")}
+              </Button>
+              {requiresTest && (
+                <Text size="xs" c="dimmed">
+                  {t("Test the connection before saving.")}
+                </Text>
+              )}
+            </Group>
+            <Group>
+              <Button variant="default" onClick={onClose}>{t("Cancel")}</Button>
+              <Button type="submit" disabled={requiresTest} loading={createMutation.isPending || updateMutation.isPending}>
+                {isEdit ? t("Save") : t("Create")}
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}

apps/client/src/ee/siem/components/destination-status-badge.tsx

@@ -0,0 +1,15 @@
+import { Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ISiemDestination } from "@/ee/siem/types/siem.types";
+
+export function DestinationStatusBadge({ destination }: { destination: ISiemDestination }) {
+  const { t } = useTranslation();
+
+  if (!destination.enabled) {
+    return <Badge color="gray" variant="light">{t("Disabled")}</Badge>;
+  }
+  if (destination.status === "failing") {
+    return <Badge color="red" variant="light">{t("Failing")}</Badge>;
+  }
+  return <Badge color="green" variant="light">{t("Healthy")}</Badge>;
+}

apps/client/src/ee/siem/components/destination-table.tsx

@@ -0,0 +1,155 @@
+import { ActionIcon, Menu, Switch, Table, Text, Tooltip } from "@mantine/core";
+import {
+  IconDots,
+  IconEdit,
+  IconPlugConnected,
+  IconRefresh,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { ISiemDestination, SiemDestinationType } from "@/ee/siem/types/siem.types";
+import { DestinationStatusBadge } from "./destination-status-badge";
+
+export const DESTINATION_TYPE_LABELS: Record<SiemDestinationType, string> = {
+  splunk_hec: "Splunk HEC",
+  datadog: "Datadog",
+  http: "Generic HTTP",
+};
+
+interface DestinationTableProps {
+  destinations?: ISiemDestination[];
+  isLoading?: boolean;
+  onEdit: (destination: ISiemDestination) => void;
+  onTest: (destination: ISiemDestination) => void;
+  onRetry: (destination: ISiemDestination) => void;
+  onDelete: (destination: ISiemDestination) => void;
+  onToggle: (destination: ISiemDestination, enabled: boolean) => void;
+}
+
+export function DestinationTable({
+  destinations,
+  isLoading,
+  onEdit,
+  onTest,
+  onRetry,
+  onDelete,
+  onToggle,
+}: DestinationTableProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Table.ScrollContainer minWidth={760}>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Name")}</Table.Th>
+            <Table.Th>{t("Type")}</Table.Th>
+            <Table.Th>{t("Enabled")}</Table.Th>
+            <Table.Th>{t("Status")}</Table.Th>
+            <Table.Th>{t("Last delivered")}</Table.Th>
+            <Table.Th>{t("Last error")}</Table.Th>
+            <Table.Th aria-label={t("Actions")} />
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {destinations && destinations.length > 0 ? (
+            destinations.map((destination) => (
+              <Table.Tr key={destination.id}>
+                <Table.Td>
+                  <Text fz="sm" fw={500}>{destination.name}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text fz="sm">{DESTINATION_TYPE_LABELS[destination.type]}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Switch
+                    size="sm"
+                    checked={destination.enabled}
+                    onChange={(event) => onToggle(destination, event.currentTarget.checked)}
+                    aria-label={t("Enabled")}
+                  />
+                </Table.Td>
+                <Table.Td>
+                  <DestinationStatusBadge destination={destination} />
+                  {destination.failingSince &&
+                    (destination.status === "failing" ||
+                      !destination.enabled) && (
+                      <Text
+                        fz="xs"
+                        c="dimmed"
+                        mt={4}
+                        style={{ whiteSpace: "nowrap" }}
+                      >
+                        {t("Failing since {{time}}", {
+                          time: formattedDate(
+                            new Date(destination.failingSince),
+                          ),
+                        })}
+                      </Text>
+                    )}
+                </Table.Td>
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {destination.lastDeliveredAt
+                      ? timeAgo(new Date(destination.lastDeliveredAt))
+                      : t("Never")}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  {destination.lastError ? (
+                    <Tooltip label={destination.lastError} multiline w={320}>
+                      <Text fz="xs" c="red" lineClamp={2} style={{ maxWidth: 260 }}>
+                        {destination.lastError}
+                      </Text>
+                    </Tooltip>
+                  ) : (
+                    <Text fz="xs" c="dimmed">—</Text>
+                  )}
+                </Table.Td>
+                <Table.Td>
+                  <Menu shadow="md" width={200}>
+                    <Menu.Target>
+                      <ActionIcon variant="subtle" color="gray" aria-label={t("Actions")}>
+                        <IconDots size={18} />
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item leftSection={<IconEdit size={16} />} onClick={() => onEdit(destination)}>
+                        {t("Edit")}
+                      </Menu.Item>
+                      <Menu.Item leftSection={<IconPlugConnected size={16} />} onClick={() => onTest(destination)}>
+                        {t("Send test event")}
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={<IconRefresh size={16} />}
+                        onClick={() => onRetry(destination)}
+                        disabled={!destination.nextAttemptAt}
+                      >
+                        {t("Retry now")}
+                      </Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item color="red" leftSection={<IconTrash size={16} />} onClick={() => onDelete(destination)}>
+                        {t("Delete")}
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                </Table.Td>
+              </Table.Tr>
+            ))
+          ) : (
+            !isLoading && (
+              <Table.Tr>
+                <Table.Td colSpan={7}>
+                  <Text fz="sm" c="dimmed" ta="center" py="md">
+                    {t("No destinations yet")}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )
+          )}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}

apps/client/src/ee/siem/components/siem-streaming-panel.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { Alert, Button, Group, Tooltip } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertCircle, IconInfoCircle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import useUserRole from "@/hooks/use-user-role";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import {
+  ISiemDestination,
+  SIEM_MAX_DESTINATIONS_PER_WORKSPACE,
+} from "@/ee/siem/types/siem.types";
+import {
+  useRetrySiemDestinationMutation,
+  useSiemDestinationsQuery,
+  extractErrorMessage,
+  useTestSiemDestinationMutation,
+  useUpdateSiemDestinationMutation,
+} from "@/ee/siem/queries/siem-query";
+import { DestinationTable } from "@/ee/siem/components/destination-table";
+import { DestinationFormModal } from "@/ee/siem/components/destination-form-modal";
+import { DeleteDestinationModal } from "@/ee/siem/components/delete-destination-modal";
+
+export default function SiemStreamingPanel() {
+  const { t } = useTranslation();
+  const { isOwner } = useUserRole();
+  const hasFeature = useHasFeature(Feature.SIEM);
+  const { data, isLoading, isError, error } = useSiemDestinationsQuery(hasFeature);
+  const updateMutation = useUpdateSiemDestinationMutation();
+  const retryMutation = useRetrySiemDestinationMutation();
+  const testMutation = useTestSiemDestinationMutation();
+  const [formOpened, setFormOpened] = useState(false);
+  const [deleteOpened, setDeleteOpened] = useState(false);
+  const [selected, setSelected] = useState<ISiemDestination | null>(null);
+
+  if (!isOwner) {
+    return null;
+  }
+
+  const atDestinationLimit =
+    (data?.length ?? 0) >= SIEM_MAX_DESTINATIONS_PER_WORKSPACE;
+
+  const handleTest = async (destination: ISiemDestination) => {
+    const result = await testMutation
+      .mutateAsync({
+        type: destination.type,
+        config: destination.config as unknown as Record<string, unknown>,
+        destinationId: destination.id,
+      })
+      .catch(() => null);
+    if (!result) return;
+    notifications.show({
+      message: result.delivered
+        ? t("Test event delivered to {{name}}", { name: destination.name })
+        : result.error,
+      color: result.delivered ? "green" : "red",
+    });
+  };
+
+  return (
+    <>
+      {!hasFeature && (
+        <Alert icon={<IconInfoCircle size={16} />} color="yellow" mb="md">
+          {t("SIEM streaming requires an Enterprise license.")}
+        </Alert>
+      )}
+
+      <Group justify="flex-end" mb="md">
+        <Tooltip
+          label={t("Maximum of {{limit}} destinations reached", {
+            limit: SIEM_MAX_DESTINATIONS_PER_WORKSPACE,
+          })}
+          disabled={!atDestinationLimit}
+        >
+          <span>
+            <Button
+              onClick={() => {
+                setSelected(null);
+                setFormOpened(true);
+              }}
+              disabled={!hasFeature || atDestinationLimit}
+            >
+              {t("Add destination")}
+            </Button>
+          </span>
+        </Tooltip>
+      </Group>
+
+      {isError && (
+        <Alert icon={<IconAlertCircle size={16} />} color="red" mb="md">
+          {t("Could not load SIEM destinations: {{message}}", {
+            message: extractErrorMessage(error),
+          })}
+        </Alert>
+      )}
+
+      {hasFeature && !isError && (
+      <DestinationTable
+        destinations={data}
+        isLoading={isLoading}
+        onEdit={(destination) => {
+          setSelected(destination);
+          setFormOpened(true);
+        }}
+        onTest={handleTest}
+        onRetry={(destination) => retryMutation.mutate({ destinationId: destination.id })}
+        onDelete={(destination) => {
+          setSelected(destination);
+          setDeleteOpened(true);
+        }}
+        onToggle={(destination, enabled) =>
+          updateMutation.mutate({ destinationId: destination.id, enabled })
+        }
+      />
+      )}
+
+      <DestinationFormModal
+        opened={formOpened}
+        onClose={() => setFormOpened(false)}
+        destination={selected}
+      />
+      <DeleteDestinationModal
+        opened={deleteOpened}
+        onClose={() => setDeleteOpened(false)}
+        destination={selected}
+      />
+    </>
+  );
+}

apps/client/src/ee/siem/lib/destination-form.ts

@@ -0,0 +1,179 @@
+import {
+  DATADOG_SITES,
+  ISiemDestination,
+  ISiemDestinationInput,
+  SiemDestinationType,
+} from "@/ee/siem/types/siem.types";
+
+export type DestinationFormValues = {
+  name: string;
+  type: SiemDestinationType;
+  url: string;
+  token: string;
+  apiKey: string;
+  authHeaderName: string;
+  authHeaderPrefix: string;
+  format: "json" | "ndjson";
+  index: string;
+  source: string;
+  sourcetype: string;
+  host: string;
+  site: string;
+  service: string;
+  tags: string;
+  rejectUnauthorized: boolean;
+  enabled: boolean;
+};
+
+export const DEFAULT_FORM_VALUES: DestinationFormValues = {
+  name: "",
+  type: "splunk_hec",
+  url: "",
+  token: "",
+  apiKey: "",
+  authHeaderName: "Authorization",
+  authHeaderPrefix: "Bearer ",
+  format: "json",
+  index: "",
+  source: "docmost",
+  sourcetype: "docmost:audit",
+  host: "",
+  site: DATADOG_SITES[0],
+  service: "docmost",
+  tags: "",
+  rejectUnauthorized: true,
+  enabled: true,
+};
+
+const HEADER_NAME_RE = /^[A-Za-z0-9-]+$/;
+export const SECRET_MASK = "********";
+
+export function initialValues(
+  destination?: ISiemDestination | null,
+): DestinationFormValues {
+  if (!destination) return { ...DEFAULT_FORM_VALUES };
+  const config = destination.config as Record<string, any>;
+  const tls = config.tls ?? {};
+  return {
+    ...DEFAULT_FORM_VALUES,
+    name: destination.name,
+    type: destination.type,
+    enabled: destination.enabled,
+    token: destination.hasSecrets?.token ? SECRET_MASK : "",
+    apiKey: destination.hasSecrets?.apiKey ? SECRET_MASK : "",
+    url: config.url ?? "",
+    authHeaderName: config.authHeaderName ?? DEFAULT_FORM_VALUES.authHeaderName,
+    authHeaderPrefix: config.authHeaderPrefix ?? DEFAULT_FORM_VALUES.authHeaderPrefix,
+    format: config.format ?? "json",
+    index: config.index ?? "",
+    source: config.source ?? DEFAULT_FORM_VALUES.source,
+    sourcetype: config.sourcetype ?? DEFAULT_FORM_VALUES.sourcetype,
+    host: config.host ?? "",
+    site: config.site ?? DEFAULT_FORM_VALUES.site,
+    service: config.service ?? DEFAULT_FORM_VALUES.service,
+    tags: config.tags ?? "",
+    rejectUnauthorized: tls.rejectUnauthorized ?? true,
+  };
+}
+
+function isValidUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export function validateForm(
+  values: DestinationFormValues,
+  hasSecrets: Record<string, boolean> = {},
+): Partial<Record<keyof DestinationFormValues, string>> {
+  const errors: Partial<Record<keyof DestinationFormValues, string>> = {};
+
+  if (!values.name.trim()) errors.name = "Name is required";
+
+  if (values.type !== "datadog" && !isValidUrl(values.url.trim())) {
+    errors.url = "Enter a valid http(s) URL";
+  }
+
+  if (values.type === "splunk_hec") {
+    if (!values.token && !hasSecrets.token) {
+      errors.token = "HEC token is required";
+    }
+    try {
+      const url = new URL(values.url.trim());
+      const path = url.pathname.replace(/\/+$/, "");
+      if (path !== "" && path !== "/services/collector" && path !== "/services/collector/event") {
+        errors.url = "Enter the HEC base URL or the /services/collector/event endpoint";
+      }
+    } catch {}
+  }
+
+  if (values.type === "datadog") {
+    if (!(DATADOG_SITES as readonly string[]).includes(values.site)) {
+      errors.site = "Select a Datadog site";
+    }
+    if (!values.apiKey && !hasSecrets.apiKey) errors.apiKey = "API key is required";
+  }
+
+  if (values.type === "http") {
+    if (!HEADER_NAME_RE.test(values.authHeaderName.trim())) {
+      errors.authHeaderName = "Use letters, digits and hyphens only";
+    }
+  }
+
+
+  return errors;
+}
+
+function enteredSecret(key: string, value: string): Record<string, string> {
+  const trimmed = value.trim();
+  return trimmed && trimmed !== SECRET_MASK ? { [key]: trimmed } : {};
+}
+
+export function toPayload(values: DestinationFormValues): ISiemDestinationInput {
+  const tls = { rejectUnauthorized: values.rejectUnauthorized };
+
+  let config: Record<string, unknown>;
+  let secrets: Record<string, string>;
+
+  switch (values.type) {
+    case "splunk_hec":
+      config = {
+        url: values.url.trim(),
+        index: values.index.trim(),
+        source: values.source.trim() || "docmost",
+        sourcetype: values.sourcetype.trim() || "docmost:audit",
+        host: values.host.trim(),
+        tls,
+      };
+      secrets = enteredSecret("token", values.token);
+      break;
+    case "datadog":
+      config = {
+        site: values.site,
+        service: values.service.trim() || "docmost",
+        tags: values.tags.trim(),
+      };
+      secrets = enteredSecret("apiKey", values.apiKey);
+      break;
+    default:
+      config = {
+        url: values.url.trim(),
+        authHeaderName: values.authHeaderName.trim(),
+        authHeaderPrefix: values.authHeaderPrefix,
+        format: values.format,
+        tls,
+      };
+      secrets = enteredSecret("token", values.token);
+  }
+
+  return {
+    name: values.name.trim(),
+    type: values.type,
+    config,
+    secrets: Object.fromEntries(Object.entries(secrets).filter(([, v]) => v !== "")),
+    enabled: values.enabled,
+  };
+}

apps/client/src/ee/siem/queries/siem-query.ts

@@ -0,0 +1,115 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import {
+  createSiemDestination,
+  deleteSiemDestination,
+  getSiemDestinations,
+  retrySiemDestination,
+  testSiemDestination,
+  updateSiemDestination,
+} from "@/ee/siem/services/siem-service";
+import {
+  ISiemDestination,
+  ISiemDestinationInput,
+  ISiemTestResult,
+  ITestSiemDestinationInput,
+  IUpdateSiemDestinationInput,
+} from "@/ee/siem/types/siem.types";
+
+export const SIEM_DESTINATIONS_KEY = ["siem-destinations"];
+
+export function extractErrorMessage(error: Error): string {
+  const data = (error as any)?.response?.data;
+  const message = data?.message ?? error.message;
+  return Array.isArray(message) ? message.join(", ") : String(message);
+}
+
+function showError(error: Error) {
+  notifications.show({ message: extractErrorMessage(error), color: "red" });
+}
+
+function isForbidden(error: unknown): boolean {
+  return (error as { response?: { status?: number } })?.response?.status === 403;
+}
+
+export function useSiemDestinationsQuery(
+  enabled = true,
+): UseQueryResult<ISiemDestination[], Error> {
+  return useQuery({
+    queryKey: SIEM_DESTINATIONS_KEY,
+    queryFn: getSiemDestinations,
+    enabled,
+    retry: (failureCount, error) => !isForbidden(error) && failureCount < 2,
+    refetchInterval: (query) => (query.state.status === "error" ? false : 15_000),
+  });
+}
+
+function useInvalidateDestinations() {
+  const queryClient = useQueryClient();
+  return () => queryClient.invalidateQueries({ queryKey: SIEM_DESTINATIONS_KEY });
+}
+
+export function useCreateSiemDestinationMutation() {
+  const { t } = useTranslation();
+  const invalidate = useInvalidateDestinations();
+  return useMutation<ISiemDestination, Error, ISiemDestinationInput>({
+    mutationFn: createSiemDestination,
+    onSuccess: () => {
+      notifications.show({ message: t("Destination created") });
+      invalidate();
+    },
+    onError: showError,
+  });
+}
+
+export function useUpdateSiemDestinationMutation() {
+  const { t } = useTranslation();
+  const invalidate = useInvalidateDestinations();
+  return useMutation<ISiemDestination, Error, IUpdateSiemDestinationInput>({
+    mutationFn: updateSiemDestination,
+    onSuccess: () => {
+      notifications.show({ message: t("Destination updated") });
+      invalidate();
+    },
+    onError: showError,
+  });
+}
+
+export function useDeleteSiemDestinationMutation() {
+  const { t } = useTranslation();
+  const invalidate = useInvalidateDestinations();
+  return useMutation<void, Error, { destinationId: string }>({
+    mutationFn: deleteSiemDestination,
+    onSuccess: () => {
+      notifications.show({ message: t("Destination deleted") });
+      invalidate();
+    },
+    onError: showError,
+  });
+}
+
+export function useRetrySiemDestinationMutation() {
+  const { t } = useTranslation();
+  const invalidate = useInvalidateDestinations();
+  return useMutation<void, Error, { destinationId: string }>({
+    mutationFn: retrySiemDestination,
+    onSuccess: () => {
+      notifications.show({ message: t("Retry scheduled") });
+      invalidate();
+    },
+    onError: showError,
+  });
+}
+
+export function useTestSiemDestinationMutation() {
+  return useMutation<ISiemTestResult, Error, ITestSiemDestinationInput>({
+    mutationFn: testSiemDestination,
+    onError: showError,
+  });
+}

apps/client/src/ee/siem/services/siem-service.ts

@@ -0,0 +1,46 @@
+import api from "@/lib/api-client";
+import {
+  ISiemDestination,
+  ISiemDestinationInput,
+  ISiemTestResult,
+  ITestSiemDestinationInput,
+  IUpdateSiemDestinationInput,
+} from "@/ee/siem/types/siem.types";
+
+export async function getSiemDestinations(): Promise<ISiemDestination[]> {
+  const req = await api.post<ISiemDestination[]>("/siem/destinations");
+  return req.data;
+}
+
+export async function createSiemDestination(
+  data: ISiemDestinationInput,
+): Promise<ISiemDestination> {
+  const req = await api.post<ISiemDestination>("/siem/destinations/create", data);
+  return req.data;
+}
+
+export async function updateSiemDestination(
+  data: IUpdateSiemDestinationInput,
+): Promise<ISiemDestination> {
+  const req = await api.post<ISiemDestination>("/siem/destinations/update", data);
+  return req.data;
+}
+
+export async function deleteSiemDestination(data: {
+  destinationId: string;
+}): Promise<void> {
+  await api.post("/siem/destinations/delete", data);
+}
+
+export async function testSiemDestination(
+  data: ITestSiemDestinationInput,
+): Promise<ISiemTestResult> {
+  const req = await api.post<ISiemTestResult>("/siem/destinations/test", data);
+  return req.data;
+}
+
+export async function retrySiemDestination(data: {
+  destinationId: string;
+}): Promise<void> {
+  await api.post("/siem/destinations/retry", data);
+}

apps/client/src/ee/siem/types/siem.types.ts

@@ -0,0 +1,91 @@
+export const SIEM_MAX_DESTINATIONS_PER_WORKSPACE = 2;
+
+export type SiemDestinationType = "http" | "splunk_hec" | "datadog";
+export type SiemDestinationStatus = "healthy" | "failing";
+
+export const DATADOG_SITES = [
+  "datadoghq.com",
+  "datadoghq.eu",
+  "us3.datadoghq.com",
+  "us5.datadoghq.com",
+  "ap1.datadoghq.com",
+  "ddog-gov.com",
+] as const;
+
+export interface ITlsOptions {
+  rejectUnauthorized: boolean;
+}
+
+export interface IHttpConfig {
+  url: string;
+  authHeaderName: string;
+  authHeaderPrefix: string;
+  format: "json" | "ndjson";
+  tls?: ITlsOptions;
+}
+
+export interface ISplunkHecConfig {
+  url: string;
+  index?: string;
+  source: string;
+  sourcetype: string;
+  host?: string;
+  channelId: string;
+  tls?: ITlsOptions;
+}
+
+export interface IDatadogConfig {
+  site: string;
+  service: string;
+  tags?: string;
+}
+
+export type ISiemConfig = IHttpConfig | ISplunkHecConfig | IDatadogConfig;
+
+export interface ISiemDestination {
+  id: string;
+  name: string;
+  type: SiemDestinationType;
+  enabled: boolean;
+  status: SiemDestinationStatus;
+  config: ISiemConfig;
+  hasSecrets: Record<string, boolean>;
+  cursorCreatedAt: string;
+  lastDeliveredAt: string | null;
+  lastError: string | null;
+  lastErrorAt: string | null;
+  consecutiveFailures: number;
+  nextAttemptAt: string | null;
+  failingSince: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ISiemDestinationInput {
+  name: string;
+  type: SiemDestinationType;
+  config: Record<string, unknown>;
+  secrets?: Record<string, string>;
+  enabled?: boolean;
+}
+
+export interface IUpdateSiemDestinationInput {
+  destinationId: string;
+  name?: string;
+  config?: Record<string, unknown>;
+  secrets?: Record<string, string>;
+  enabled?: boolean;
+}
+
+export interface ITestSiemDestinationInput {
+  type: SiemDestinationType;
+  config: Record<string, unknown>;
+  secrets?: Record<string, string>;
+  destinationId?: string;
+}
+
+export interface ISiemTestResult {
+  delivered: boolean;
+  error?: string;
+  statusCode?: number;
+}

apps/client/src/features/editor/components/audio/audio-menu.tsx

@@ -85,6 +85,9 @@ export function AudioMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey={`audio-menu`}
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{

apps/client/src/features/editor/components/callout/callout-menu.tsx

@@ -121,12 +121,14 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey={`callout-menu`}
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{
         placement: "bottom",
         // offset: 233, //      //         offset: [0, 10],
-        // zIndex: 99,
         flip: false,
       }}
       shouldShow={shouldShow}

apps/client/src/features/editor/components/columns/columns-menu.tsx

@@ -257,6 +257,9 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey="columns-menu"
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{

apps/client/src/features/editor/components/drawio/drawio-menu.tsx

@@ -273,6 +273,9 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
       <BaseBubbleMenu
         editor={editor}
         pluginKey={`drawio-menu`}
+        ref={(element) => {
+          if (element) element.style.zIndex = "99";
+        }}
         updateDelay={0}
         getReferencedVirtualElement={getReferencedVirtualElement}
         options={{

apps/client/src/features/editor/components/image/image-menu.tsx

@@ -156,6 +156,9 @@ export function ImageMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey={`image-menu`}
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{

apps/client/src/features/editor/components/link/link-view.tsx

@@ -26,7 +26,12 @@ import { INTERNAL_LINK_REGEX } from "@/lib/constants";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
-import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
+import {
+  buildPageUrl,
+  buildPublicSpaceUrl,
+  buildSharedPageUrl,
+} from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
 import { sanitizeUrl, copyToClipboard, isEditorReady } from "@docmost/editor-ext";
 import { normalizeUrl } from "@/lib/utils";
@@ -60,9 +65,10 @@ export default function LinkView(props: MarkViewProps) {
   const href = mark.attrs.href as string;
   const navigate = useNavigate();
   const location = useLocation();
-  const { shareId, pageSlug } = useParams();
+  const { shareId, spaceSlug, pageSlug } = useParams();
   const { t } = useTranslation();
   const isShareRoute = location.pathname.startsWith("/share");
+  const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
 
   const [popoverState, setPopoverState] = useState<
     "closed" | "preview" | "edit"
@@ -84,16 +90,33 @@ export default function LinkView(props: MarkViewProps) {
   const activeView = isPopoverVisible ? popoverState : lastOpenState.current;
 
   const { data: linkedPage } = usePageQuery({
-    pageId: isPopoverVisible && slugId && !isShareRoute ? slugId : null,
+    pageId:
+      isPopoverVisible && slugId && !isShareRoute && !isPublicSpaceRoute
+        ? slugId
+        : null,
   });
 
   const { data: sharedPageData } = useSharePageQuery({
     pageId: isPopoverVisible && slugId && isShareRoute ? slugId : null,
   });
 
-  const pageTitle = isShareRoute
-    ? sharedPageData?.page?.title
-    : linkedPage?.title;
+  // Resolved eagerly (not gated on the popover): an unresolvable target must
+  // render as inert text rather than a link that dead-ends at /login.
+  const { data: publicSpacePageData } = usePublicSpacePageQuery({
+    spaceSlug: isPublicSpaceRoute && slugId ? spaceSlug : undefined,
+    pageSlugId: slugId,
+    contentless: true,
+  });
+
+  const isUnresolvedPublicLink =
+    isPublicSpaceRoute && isInternal && !publicSpacePageData?.page && !slugId;
+
+  let pageTitle = linkedPage?.title;
+  if (isShareRoute) {
+    pageTitle = sharedPageData?.page?.title;
+  } else if (isPublicSpaceRoute) {
+    pageTitle = publicSpacePageData?.page?.title;
+  }
 
   const pendingTitleRef = useRef<string | null>(null);
   const titleInputRef = useRef<HTMLInputElement>(null);
@@ -260,6 +283,27 @@ export default function LinkView(props: MarkViewProps) {
           anchorId: anchor || undefined,
         });
         navigate(sharedUrl);
+      } else if (isPublicSpaceRoute) {
+        if (slugId && publicSpacePageData?.page) {
+          navigate(
+            buildPublicSpaceUrl({
+              // cross-space targets resolve to their own space's public URL
+              spaceSlug: publicSpacePageData.space?.slug ?? spaceSlug,
+              pageSlugId: slugId,
+              pageTitle: pageTitle,
+              anchorId: anchor || undefined,
+            }),
+          );
+        } else if (slugId) {
+          // no public URL: the /p/ resolver redirects members straight to the
+          // page and funnels anonymous visitors through login first; a new tab
+          // keeps the docs tab's history intact through that redirect chain
+          window.open(
+            buildPageUrl(undefined, slugId, pageTitle, anchor || undefined),
+            "_blank",
+            "noopener,noreferrer",
+          );
+        }
       } else {
         navigate(anchor ? `${targetPath}#${anchor}` : targetPath);
       }
@@ -276,8 +320,11 @@ export default function LinkView(props: MarkViewProps) {
     location.pathname,
     isInternal,
     isShareRoute,
+    isPublicSpaceRoute,
     slugId,
     shareId,
+    spaceSlug,
+    publicSpacePageData,
     pageTitle,
     pageSlug,
   ]);
@@ -319,12 +366,18 @@ export default function LinkView(props: MarkViewProps) {
     setPopoverState("closed");
   }, [editor]);
 
+  const internalHref = () => {
+    if (isShareRoute && slugId) {
+      return buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle });
+    }
+    if (isPublicSpaceRoute && slugId && publicSpacePageData?.page) {
+      return buildPublicSpaceUrl({ spaceSlug, pageSlugId: slugId, pageTitle });
+    }
+    return href;
+  };
+
   const displayHref = sanitizeUrl(
-    isInternal
-      ? isShareRoute && slugId
-        ? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
-        : href
-      : normalizeUrl(href),
+    isInternal ? internalHref() : normalizeUrl(href),
   );
 
   const linkTitleInput = (
@@ -374,6 +427,16 @@ export default function LinkView(props: MarkViewProps) {
     </>
   );
 
+  // Targets outside the published space have no public URL, so the label is
+  // rendered as inert text instead of a link that dead-ends at /login.
+  if (isUnresolvedPublicLink) {
+    return (
+      <span ref={wrapperRef} className={classes.linkWrapper}>
+        <MarkViewContent />
+      </span>
+    );
+  }
+
   return (
     <Popover
       opened={isPopoverVisible}

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -4,8 +4,10 @@ import { IconFileDescription } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
+import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
 import {
   buildPageUrl,
+  buildPublicSpaceUrl,
   buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
@@ -21,17 +23,30 @@ export default function MentionView(props: NodeViewProps) {
 
   const location = useLocation();
   const isShareRoute = location.pathname.startsWith("/share");
+  const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
 
   const {
     data: page,
     isLoading,
     isError,
-  } = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
+  } = usePageQuery({
+    pageId:
+      isPageMention && !isShareRoute && !isPublicSpaceRoute ? slugId : null,
+  });
 
   const { data: sharedPage } = useSharePageQuery({
     pageId: isPageMention && isShareRoute ? slugId : undefined,
   });
 
+  // Without the slugId guard the request resolves to the space home, which
+  // would render a mention pointing at the wrong page.
+  const { data: publicPageData } = usePublicSpacePageQuery({
+    spaceSlug:
+      isPageMention && isPublicSpaceRoute && slugId ? spaceSlug : undefined,
+    pageSlugId: slugId,
+    contentless: true,
+  });
+
   const currentPageSlugId = extractPageSlugId(pageSlug);
   const isSamePage = currentPageSlugId === slugId;
 
@@ -87,7 +102,61 @@ export default function MentionView(props: NodeViewProps) {
         </Anchor>
       )}
 
-      {isPageMention && !isShareRoute && isError && (
+      {isPageMention && isPublicSpaceRoute && publicPageData?.page && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPublicSpaceUrl({
+            spaceSlug: publicPageData.space?.slug ?? spaceSlug,
+            pageSlugId: slugId,
+            pageTitle: publicPageData.page.title || label,
+            anchorId,
+          })}
+          onClick={handleClick}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>
+            {publicPageData.page.title || label}
+          </span>
+        </Anchor>
+      )}
+
+      {/* No public URL: the /p/ resolver redirects members to the page and
+          funnels anonymous visitors through login first. New tab, so the
+          redirect chain never rewrites the docs tab's history. */}
+      {isPageMention && isPublicSpaceRoute && !publicPageData?.page && (
+        <Anchor
+          fw={500}
+          href={buildPageUrl(undefined, slugId, label, anchorId)}
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>{label}</span>
+        </Anchor>
+      )}
+
+      {isPageMention && !isShareRoute && !isPublicSpaceRoute && isError && (
         <Anchor
           component={Link}
           fw={500}
@@ -111,7 +180,7 @@ export default function MentionView(props: NodeViewProps) {
         </Anchor>
       )}
 
-      {isPageMention && !isShareRoute && !isError && (
+      {isPageMention && !isShareRoute && !isPublicSpaceRoute && !isError && (
         <Anchor
           component={Link}
           fw={500}

apps/client/src/features/editor/components/pdf/pdf-menu.tsx

@@ -106,6 +106,9 @@ export function PdfMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey={`pdf-menu`}
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{

apps/client/src/features/editor/components/subpages/subpages-menu.tsx

@@ -61,6 +61,9 @@ export const SubpagesMenu = React.memo(
       <BaseBubbleMenu
         editor={editor}
         pluginKey={`subpages-menu`}
+        ref={(element) => {
+          if (element) element.style.zIndex = "99";
+        }}
         updateDelay={0}
         shouldShow={shouldShow}
       >

apps/client/src/features/editor/components/subpages/subpages-view.tsx

@@ -3,22 +3,30 @@ import { Stack, Text, Anchor, ActionIcon } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { useGetSidebarPagesQuery } from "@/features/page/queries/page-query";
 import { useMemo } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import classes from "./subpages.module.css";
 import styles from "../mention/mention.module.css";
 import {
   buildPageUrl,
+  buildPublicSpaceUrl,
   buildSharedPageUrl,
 } from "@/features/page/page.utils.ts";
 import { useTranslation } from "react-i18next";
 import { sortPositionKeys } from "@/features/page/tree/utils/utils";
 import { useSharedPageSubpages } from "@/features/share/hooks/use-shared-page-subpages";
+import { useAtomValue } from "jotai";
+import { publicSpaceTreeDataAtom } from "@/features/public-space/atoms/public-space-atoms.ts";
+import { findSubpagesInTree } from "@/features/share/utils";
 import { extractPageSlugId } from "@/lib";
 
 export default function SubpagesView(props: NodeViewProps) {
   const { editor } = props;
   const { spaceSlug, shareId, pageSlug } = useParams();
   const { t } = useTranslation();
+  const location = useLocation();
+  const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
+
+  const publicSpaceTreeData = useAtomValue(publicSpaceTreeDataAtom);
 
   // @ts-ignore
   const storagePageId = editor.storage.pageId;
@@ -29,11 +37,25 @@ export default function SubpagesView(props: NodeViewProps) {
     currentPageId = routePageId;
   }
 
+  // Public docs must resolve the page from the route, not editor storage:
+  // storage.pageId is set after this view's first render and is not reactive,
+  // which froze the list at "No subpages" until something re-rendered it. The
+  // space home renders at the bare URL, so it falls back to the first root.
+  if (isPublicSpaceRoute) {
+    currentPageId = routePageId ?? publicSpaceTreeData?.[0]?.slugId;
+  }
+
   // Get subpages from shared tree if we're in a shared context
   const sharedSubpages = useSharedPageSubpages(currentPageId);
+  const publicSpaceSubpages = useMemo(
+    () => findSubpagesInTree(publicSpaceTreeData, currentPageId),
+    [publicSpaceTreeData, currentPageId],
+  );
+
+  const isPublicView = Boolean(shareId) || isPublicSpaceRoute;
 
   const { data, isLoading, error } = useGetSidebarPagesQuery(
-    shareId ? null : { pageId: currentPageId },
+    isPublicView ? null : { pageId: currentPageId },
   );
 
   const subpages = useMemo(() => {
@@ -48,17 +70,33 @@ export default function SubpagesView(props: NodeViewProps) {
       }));
     }
 
+    if (isPublicSpaceRoute) {
+      return publicSpaceSubpages.map((node) => ({
+        id: node.value,
+        slugId: node.slugId,
+        title: node.name,
+        icon: node.icon,
+        position: node.position,
+      }));
+    }
+
     // Otherwise use the API data
     if (!data?.pages) return [];
     const allPages = data.pages.flatMap((page) => page.items);
     return sortPositionKeys(allPages);
-  }, [data, shareId, sharedSubpages]);
+  }, [
+    data,
+    shareId,
+    sharedSubpages,
+    isPublicSpaceRoute,
+    publicSpaceSubpages,
+  ]);
 
-  if (isLoading && !shareId) {
+  if (isLoading && !isPublicView) {
     return null;
   }
 
-  if (error && !shareId) {
+  if (error && !isPublicView) {
     return (
       <NodeViewWrapper data-drag-handle>
         <Text c="dimmed" size="md" py="md">
@@ -96,7 +134,13 @@ export default function SubpagesView(props: NodeViewProps) {
                       pageSlugId: page.slugId,
                       pageTitle: page.title,
                     })
-                  : buildPageUrl(spaceSlug, page.slugId, page.title)
+                  : isPublicSpaceRoute
+                    ? buildPublicSpaceUrl({
+                        spaceSlug,
+                        pageSlugId: page.slugId,
+                        pageTitle: page.title,
+                      })
+                    : buildPageUrl(spaceSlug, page.slugId, page.title)
               }
               underline="never"
               className={styles.pageMentionLink}

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -18,7 +18,7 @@ export type HeadingLink = {
   position: number;
 };
 
-const recalculateLinks = (nodePos: NodePos[]) => {
+export const recalculateLinks = (nodePos: NodePos[]) => {
   const nodes: HTMLElement[] = [];
 
   const links: HeadingLink[] = Array.from(nodePos).reduce<HeadingLink[]>(

apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import {
   lookupTransclusion,
+  lookupTransclusionForPublicSpace,
   lookupTransclusionForShare,
 } from "@/features/transclusion/services/transclusion-api";
 import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types";
@@ -38,6 +39,7 @@ const TransclusionLookupContext = createContext<ContextValue | null>(null);
 export function TransclusionLookupProvider({
   children,
   shareId,
+  spaceSlug,
 }: {
   children: React.ReactNode;
   /**
@@ -47,6 +49,11 @@ export function TransclusionLookupProvider({
    * app, where personal permissions gate access.
    */
   shareId?: string;
+  /**
+   * When set, lookups go through the public-space endpoint and are gated by
+   * the published space. Used by the public docs viewer.
+   */
+  spaceSlug?: string;
 }) {
   const subscribersRef = useRef(new Map<LookupKey, Subscriber[]>());
   const queueRef = useRef(new Set<LookupKey>());
@@ -55,6 +62,8 @@ export function TransclusionLookupProvider({
   // memoized callbacks (and thus doesn't re-render every consumer).
   const shareIdRef = useRef<string | undefined>(shareId);
   shareIdRef.current = shareId;
+  const spaceSlugRef = useRef<string | undefined>(spaceSlug);
+  spaceSlugRef.current = spaceSlug;
   // Last looked-up value for each key. Re-subscribers (e.g. when the editor
   // remounts after switching from static to live) get this immediately
   // instead of triggering a duplicate fetch.
@@ -91,12 +100,18 @@ export function TransclusionLookupProvider({
 
     try {
       const activeShareId = shareIdRef.current;
+      const activeSpaceSlug = spaceSlugRef.current;
       const { items } = activeShareId
         ? await lookupTransclusionForShare({
             shareId: activeShareId,
             references,
           })
-        : await lookupTransclusion({ references });
+        : activeSpaceSlug
+          ? await lookupTransclusionForPublicSpace({
+              spaceSlug: activeSpaceSlug,
+              references,
+            })
+          : await lookupTransclusion({ references });
       for (const r of items) {
         const key = `${r.sourcePageId}::${r.transclusionId}`;
         resultCacheRef.current.set(key, r);

apps/client/src/features/editor/components/video/video-menu.tsx

@@ -132,6 +132,9 @@ export function VideoMenu({ editor }: EditorMenuProps) {
     <BaseBubbleMenu
       editor={editor}
       pluginKey={`video-menu`}
+      ref={(element) => {
+        if (element) element.style.zIndex = "99";
+      }}
       updateDelay={0}
       getReferencedVirtualElement={getReferencedVirtualElement}
       options={{

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -35,6 +35,16 @@ interface PageEditorProps {
    * that isn't itself shared.
    */
   shareId?: string;
+  /**
+   * When rendering inside a public space, pass the space slug. Transclusion
+   * lookups then resolve against the published space instead of the viewer's
+   * personal permissions.
+   */
+  spaceSlug?: string;
+  /** Rendered between the title and the content. */
+  byline?: React.ReactNode;
+  /** Set false when the consumer renders its own end matter (e.g. prev/next). */
+  trailingSpace?: boolean;
 }
 
 export default function ReadonlyPageEditor({
@@ -43,12 +53,16 @@ export default function ReadonlyPageEditor({
   pageId,
   printMode = false,
   shareId,
+  spaceSlug,
+  byline,
+  trailingSpace = true,
 }: PageEditorProps) {
   const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
   const [lightboxRequest, setLightboxRequest] = useAtom(lightboxRequestAtom);
   const [contentEditor, setContentEditor] = useState<Editor | null>(null);
   const isComponentMounted = useRef(false);
   const editorCreated = useRef(false);
+  const isPublicView = Boolean(shareId || spaceSlug);
 
   const canScroll = useCallback(
     () => isComponentMounted.current && editorCreated.current,
@@ -64,9 +78,9 @@ export default function ReadonlyPageEditor({
   }, []);
 
   useEffect(() => {
-    if (!shareId) return;
+    if (!isPublicView) return;
     setLightboxRequest(null);
-  }, [pageId, shareId]);
+  }, [pageId, isPublicView]);
 
   const extensions = useMemo(() => {
     const excludedExtensions = new Set([
@@ -99,7 +113,7 @@ export default function ReadonlyPageEditor({
   ];
 
   return (
-    <TransclusionLookupProvider shareId={shareId}>
+    <TransclusionLookupProvider shareId={shareId} spaceSlug={spaceSlug}>
       <div className="page-title">
         <EditorProvider
           editable={false}
@@ -110,6 +124,8 @@ export default function ReadonlyPageEditor({
         ></EditorProvider>
       </div>
 
+      {byline}
+
       <EditorProvider
         editable={false}
         immediatelyRender={true}
@@ -117,7 +133,7 @@ export default function ReadonlyPageEditor({
         extensions={extensions}
         content={content}
         editorProps={
-          shareId
+          isPublicView
             ? {
                 handleClickOn: (_view, _pos, node) => {
                   const request = getLightboxClickRequest(node);
@@ -144,7 +160,7 @@ export default function ReadonlyPageEditor({
           }
         }}
       ></EditorProvider>
-      {shareId && contentEditor && (
+      {isPublicView && contentEditor && (
         <LightboxView
           editor={contentEditor}
           open={!!lightboxRequest}
@@ -153,7 +169,7 @@ export default function ReadonlyPageEditor({
           onClose={() => setLightboxRequest(null)}
         />
       )}
-      <div style={{ paddingBottom: "20vh" }}></div>
+      {trailingSpace && <div style={{ paddingBottom: "20vh" }}></div>}
     </TransclusionLookupProvider>
   );
 }

apps/client/src/features/notification/components/notification-item.tsx

@@ -63,6 +63,12 @@ export function NotificationItem({
         return "Page verification expires soon";
       case "page.verification_expired":
         return "Page verification has expired";
+      case "siem_destination.failing":
+        return "SIEM destination <bold>{{name}}</bold> is failing";
+      case "siem_destination.disabled":
+        return "SIEM destination <bold>{{name}}</bold> was disabled after 24 hours of failures";
+      case "siem_destination.recovered":
+        return "SIEM destination <bold>{{name}}</bold> recovered";
       default:
         return "";
     }
@@ -77,6 +83,19 @@ export function NotificationItem({
         )
       : undefined;
 
+  const isSiemDestination = notification.type.startsWith("siem_destination.");
+  const destinationName =
+    typeof notification.data?.destinationName === "string"
+      ? notification.data.destinationName
+      : "";
+  const lastError =
+    (notification.type === "siem_destination.failing" ||
+      notification.type === "siem_destination.disabled") &&
+    typeof notification.data?.lastError === "string"
+      ? notification.data.lastError
+      : null;
+  const linkUrl = isSiemDestination ? "/settings/audit/siem" : pageUrl;
+
   const markReadIfNeeded = () => {
     if (isUnread) {
       markRead.mutate([notification.id]);
@@ -97,7 +116,7 @@ export function NotificationItem({
   return (
     <UnstyledButton
       component={Link}
-      to={pageUrl ?? ""}
+      to={linkUrl ?? ""}
       onClick={handleClick}
       // auxclick fires for all non-primary buttons; guard to middle-click only (button 1)
       // so that right-click (button 2, context menu) does not mark as read
@@ -124,11 +143,21 @@ export function NotificationItem({
           <Text size="sm" lineClamp={2}>
             <Trans
               i18nKey={getNotificationMessageKey()}
-              values={{ name: notification.actor?.name }}
+              values={{
+                name: isSiemDestination
+                  ? destinationName
+                  : notification.actor?.name,
+              }}
               components={{ bold: <Text span fw={600} /> }}
             />
           </Text>
 
+          {lastError && (
+            <Text size="xs" c="dimmed" lineClamp={1} mt={2}>
+              {lastError}
+            </Text>
+          )}
+
           {notification.page && (
             <Group gap={4} mt={2} wrap="nowrap">
               {notification.page.icon ? (

apps/client/src/features/notification/types/notification.types.ts

@@ -9,7 +9,10 @@ export type NotificationType =
   | "page.verification_expired"
   | "page.verified"
   | "page.approval_requested"
-  | "page.approval_rejected";
+  | "page.approval_rejected"
+  | "siem_destination.failing"
+  | "siem_destination.disabled"
+  | "siem_destination.recovered";
 
 export type INotification = {
   id: string;

apps/client/src/features/page/components/header/page-header.tsx

@@ -1,16 +1,63 @@
 import classes from "./page-header.module.css";
 import PageHeaderMenu from "@/features/page/components/header/page-header-menu.tsx";
-import { Group } from "@mantine/core";
+import { Badge, Group, Tooltip } from "@mantine/core";
+import { IconExternalLink, IconWorld } from "@tabler/icons-react";
 import Breadcrumb from "@/features/page/components/breadcrumbs/breadcrumb.tsx";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { extractPageSlugId } from "@/lib";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { isBetaPublicSpaces } from "@/lib/config.ts";
 
 interface Props {
   readOnly?: boolean;
 }
 export default function PageHeader({ readOnly }: Props) {
+  const { t } = useTranslation();
+  const { spaceSlug, pageSlug } = useParams();
+  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
+  const { data: page } = usePageQuery({
+    pageId: extractPageSlugId(pageSlug),
+  });
+
+  // Restricted pages are never publicly reachable, so the chip only shows on
+  // pages the public site actually serves.
+  const showPublicBadge =
+    isBetaPublicSpaces() &&
+    space?.isPublished &&
+    page &&
+    page.permissions?.hasRestriction !== true;
+
   return (
     <div className={classes.header} data-page-header="true">
       <Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
-        <Breadcrumb />
+        <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
+          <Breadcrumb />
+
+          {showPublicBadge && (
+            <Tooltip label={t("Open public page")} openDelay={250} withArrow>
+              <Badge
+                component="a"
+                href={buildPublicSpaceUrl({
+                  spaceSlug: space.slug,
+                  pageSlugId: page.slugId,
+                  pageTitle: page.title,
+                })}
+                target="_blank"
+                rel="noopener"
+                size="sm"
+                variant="light"
+                leftSection={<IconWorld size={12} />}
+                rightSection={<IconExternalLink size={11} />}
+                style={{ flexShrink: 0, cursor: "pointer" }}
+              >
+                {t("Public")}
+              </Badge>
+            </Tooltip>
+          )}
+        </Group>
 
         <Group justify="flex-end" h="100%" px="md" wrap="nowrap" gap="var(--mantine-spacing-xs)">
           <PageHeaderMenu readOnly={readOnly} />

apps/client/src/features/page/page.utils.ts

@@ -55,3 +55,16 @@ export const buildSharedPageUrl = (opts: {
   }
   return anchorId ? `${url}#${anchorId}` : url;
 };
+
+export const buildPublicSpaceUrl = (opts: {
+  spaceSlug: string;
+  pageSlugId?: string;
+  pageTitle?: string;
+  anchorId?: string;
+}): string => {
+  const { spaceSlug, pageSlugId, pageTitle, anchorId } = opts;
+  const url = pageSlugId
+    ? `/docs/${spaceSlug}/${buildPageSlug(pageSlugId, pageTitle)}`
+    : `/docs/${spaceSlug}`;
+  return anchorId ? `${url}#${anchorId}` : url;
+};

apps/client/src/features/page/tree/components/doc-tree-row.tsx

@@ -41,6 +41,7 @@ type Props<T extends object> = {
   activeId?: string;
   renderRow: (props: RenderRowProps<T>) => ReactNode;
   indentPerLevel: number;
+  rowClassName?: string;
   onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
   onToggle: (id: string, isOpen: boolean) => void;
   readOnly: boolean;
@@ -68,6 +69,7 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
     activeId,
     renderRow,
     indentPerLevel,
+    rowClassName,
     onMove,
     onToggle,
     readOnly,
@@ -323,7 +325,7 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
       style={{ paddingLeft: level * indentPerLevel }}
     >
       <div
-        className={styles.node}
+        className={rowClassName ? `${styles.node} ${rowClassName}` : styles.node}
         data-dragging={isDragging || undefined}
         data-selected={isSelected || undefined}
         data-receiving-drop={
@@ -376,6 +378,7 @@ function arePropsEqual<T extends object>(
   if (prev.readOnly !== next.readOnly) return false;
   if (prev.contextId !== next.contextId) return false;
   if (prev.indentPerLevel !== next.indentPerLevel) return false;
+  if (prev.rowClassName !== next.rowClassName) return false;
   if (prev.renderRow !== next.renderRow) return false;
   if (prev.onMove !== next.onMove) return false;
   if (prev.onToggle !== next.onToggle) return false;

apps/client/src/features/page/tree/components/doc-tree.tsx

@@ -56,6 +56,18 @@ export type DocTreeProps<T extends object> = {
   indentPerLevel?: number;
   rowHeight?: number;
   emptyState?: ReactNode;
+  // Extra class for the engine's row wrapper (the div carrying data-selected /
+  // data-dragging), letting consumers restyle hover/selected states.
+  rowClassName?: string;
+  // Extra vertical space above a row (e.g. to separate top-level groups).
+  // Added to the row's virtualized slot and applied as padding above it.
+  rowGap?: (node: TreeNode<T>, level: number, index: number) => number;
+  // Measure real row heights so rows may wrap to multiple lines; rowHeight
+  // then only seeds the estimate. Off by default (fixed-slot fast path).
+  dynamicRowHeight?: boolean;
+  // Rendered inside the scroll container after the last row, so it flows
+  // with the tree content instead of pinning to the container edge.
+  footer?: ReactNode;
 
   onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
   onToggle: (id: string, isOpen: boolean) => void;
@@ -123,6 +135,9 @@ function DocTreeInner<T extends object>(
     renderRow,
     indentPerLevel = 16,
     rowHeight = 32,
+    rowClassName,
+    rowGap,
+    dynamicRowHeight = false,
     onMove,
     onToggle,
     onSelect,
@@ -132,6 +147,7 @@ function DocTreeInner<T extends object>(
     getDragLabel,
     uniqueContextId,
     emptyState,
+    footer,
     'aria-label': ariaLabel,
   } = props;
 
@@ -197,10 +213,20 @@ function DocTreeInner<T extends object>(
     return flat[0]?.node.id;
   }, [activeId, selectedId, flatIds, flat]);
 
+  // Keyed by node id so measured sizes follow their rows across
+  // expand/collapse instead of sticking to positions. Never reset the
+  // measurement cache wholesale: ResizeObserver only re-reports elements
+  // whose size changed, so unchanged mounted rows would be left positioned
+  // by the estimate and overlap their neighbors.
   const virtualizer = useVirtualizer({
     count: flat.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => rowHeight,
+    getItemKey: (index) => flat[index].node.id,
+    estimateSize: (index) => {
+      const row = flat[index];
+      const gap = row && rowGap ? rowGap(row.node, row.level, index) : 0;
+      return rowHeight + gap;
+    },
     overscan: 10,
   });
 
@@ -471,7 +497,12 @@ function DocTreeInner<T extends object>(
   );
 
   if (data.length === 0 && emptyState) {
-    return <div className={styles.treeContainer}>{emptyState}</div>;
+    return (
+      <div className={styles.treeContainer}>
+        {emptyState}
+        {footer}
+      </div>
+    );
   }
 
   const virtualItems = virtualizer.getVirtualItems();
@@ -494,6 +525,9 @@ function DocTreeInner<T extends object>(
       >
         {virtualItems.map((virtualItem) => {
           const row = flat[virtualItem.index];
+          const gap = rowGap
+            ? rowGap(row.node, row.level, virtualItem.index)
+            : 0;
           return (
             <li
               key={row.node.id}
@@ -501,12 +535,15 @@ function DocTreeInner<T extends object>(
               // (the row's <a>), so screen readers announce "treeitem" on
               // navigation. The <li> is just layout glue.
               role="none"
+              ref={dynamicRowHeight ? virtualizer.measureElement : undefined}
+              data-index={dynamicRowHeight ? virtualItem.index : undefined}
               style={{
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 width: '100%',
                 transform: `translateY(${virtualItem.start}px)`,
+                ...(gap > 0 ? { paddingTop: gap } : {}),
               }}
             >
               <DocTreeRow
@@ -518,6 +555,7 @@ function DocTreeInner<T extends object>(
                 activeId={effectiveActiveId}
                 renderRow={renderRow}
                 indentPerLevel={indentPerLevel}
+                rowClassName={rowClassName}
                 onMove={onMove}
                 onToggle={onToggle}
                 readOnly={readOnly}
@@ -532,6 +570,7 @@ function DocTreeInner<T extends object>(
           );
         })}
       </ul>
+      {footer}
     </div>
   );
 }

apps/client/src/features/public-space/atoms/public-space-atoms.ts

@@ -0,0 +1,17 @@
+import { atom } from "jotai";
+import { IPublicSpaceTree } from "@/features/public-space/types/public-space.types.ts";
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+
+export const publicSpaceTreeAtom = atom<IPublicSpaceTree | null>(
+  null as IPublicSpaceTree | null,
+);
+
+export const publicSpaceTreeDataAtom = atom<SharedPageTreeNode[] | null>(
+  null as SharedPageTreeNode[] | null,
+);
+
+export const openPublicSpaceTreeNodesAtom = atom<Record<string, boolean>>({});
+
+export const docsMobileSidebarAtom = atom<boolean>(false);
+
+export const docsMobileTocAtom = atom<boolean>(false);

apps/client/src/features/public-space/components/appearance-settings.module.css

@@ -0,0 +1,51 @@
+.presetRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: rem(8px);
+}
+
+.presetCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: rem(6px);
+  min-width: rem(72px);
+  padding: rem(10px) rem(12px);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: rem(8px);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--mantine-color-default-hover);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 1px;
+  }
+}
+
+.presetCard[data-selected="true"] {
+  border-color: var(--mantine-primary-color-filled);
+  background-color: var(--mantine-primary-color-light);
+}
+
+.presetSwatch {
+  width: rem(22px);
+  height: rem(22px);
+  border-radius: 50%;
+  border: 1px solid var(--mantine-color-default-border);
+  flex-shrink: 0;
+}
+
+.customSwatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: rem(22px);
+  height: rem(22px);
+  border-radius: 50%;
+  border: 1px dashed var(--mantine-color-default-border);
+  color: var(--mantine-color-dimmed);
+}

apps/client/src/features/public-space/components/appearance-settings.tsx

@@ -0,0 +1,165 @@
+import {
+  ColorInput,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconColorPicker } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DEFAULT_DOCS_PRESET,
+  DOCS_THEME_PRESETS,
+  isValidDocsColor,
+  matchDocsPreset,
+} from "@/features/public-space/theme/docs-theme.ts";
+import { IPublicSpaceAppearance } from "@/features/public-space/types/public-space.types.ts";
+import { usePublishSpaceMutation } from "@/features/public-space/queries/public-space-query.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
+import { Feature } from "@/ee/features.ts";
+import classes from "./appearance-settings.module.css";
+
+type AppearanceSettingsProps = {
+  spaceId: string;
+  appearance?: IPublicSpaceAppearance;
+};
+
+export default function AppearanceSettings({
+  spaceId,
+  appearance,
+}: AppearanceSettingsProps) {
+  const { t } = useTranslation();
+  const publishMutation = usePublishSpaceMutation();
+  const hasAppearance = useHasFeature(Feature.PUBLIC_SPACE_APPEARANCE);
+  const upgradeLabel = useUpgradeLabel();
+
+  const matchedPreset = matchDocsPreset(appearance);
+  const [customOpen, setCustomOpen] = useState(matchedPreset === null);
+  const [customLight, setCustomLight] = useState(
+    appearance?.primaryColorLight ?? DEFAULT_DOCS_PRESET.light,
+  );
+  const [customDark, setCustomDark] = useState(
+    appearance?.primaryColorDark ?? DEFAULT_DOCS_PRESET.dark,
+  );
+
+  useEffect(() => {
+    setCustomOpen(matchDocsPreset(appearance) === null);
+    setCustomLight(appearance?.primaryColorLight ?? DEFAULT_DOCS_PRESET.light);
+    setCustomDark(appearance?.primaryColorDark ?? DEFAULT_DOCS_PRESET.dark);
+  }, [appearance?.primaryColorLight, appearance?.primaryColorDark]);
+
+  const saveAppearance = (payload: {
+    primaryColorLight: string | null;
+    primaryColorDark: string | null;
+  }) => {
+    if (!hasAppearance) return;
+    publishMutation.mutate({ spaceId, enabled: true, appearance: payload });
+  };
+
+  const selectPreset = (presetId: string) => {
+    setCustomOpen(false);
+    const preset = DOCS_THEME_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    if (preset.id === DEFAULT_DOCS_PRESET.id) {
+      saveAppearance({ primaryColorLight: null, primaryColorDark: null });
+      return;
+    }
+    saveAppearance({
+      primaryColorLight: preset.light,
+      primaryColorDark: preset.dark,
+    });
+  };
+
+  const commitCustom = (light: string, dark: string) => {
+    if (!isValidDocsColor(light) || !isValidDocsColor(dark)) return;
+    saveAppearance({ primaryColorLight: light, primaryColorDark: dark });
+  };
+
+  const swatches = DOCS_THEME_PRESETS.flatMap((preset) => [
+    preset.light,
+    preset.dark,
+  ]);
+
+  return (
+    <div>
+      <Text size="md" mt="md">
+        {t("Appearance")}
+      </Text>
+      <Text size="sm" c="dimmed">
+        {t("Choose the primary color of the public docs site.")}
+      </Text>
+
+      <Tooltip
+        label={upgradeLabel}
+        disabled={hasAppearance}
+        position="top-start"
+      >
+        <div className={classes.presetRow} style={{ marginTop: 10 }}>
+          {DOCS_THEME_PRESETS.map((preset) => {
+            const selected = !customOpen && matchedPreset?.id === preset.id;
+            return (
+              <UnstyledButton
+                key={preset.id}
+                className={classes.presetCard}
+                data-selected={selected || undefined}
+                aria-pressed={selected}
+                disabled={!hasAppearance}
+                onClick={() => selectPreset(preset.id)}
+              >
+                <span
+                  className={classes.presetSwatch}
+                  style={{
+                    background: `linear-gradient(135deg, ${preset.light} 50%, ${preset.dark} 50%)`,
+                  }}
+                />
+                <Text size="xs">{t(preset.nameKey)}</Text>
+              </UnstyledButton>
+            );
+          })}
+
+          <UnstyledButton
+            className={classes.presetCard}
+            data-selected={customOpen || undefined}
+            aria-pressed={customOpen}
+            disabled={!hasAppearance}
+            onClick={() => setCustomOpen(true)}
+          >
+            <span className={classes.customSwatch}>
+              <IconColorPicker size={13} stroke={2} aria-hidden />
+            </span>
+            <Text size="xs">{t("Custom")}</Text>
+          </UnstyledButton>
+        </div>
+      </Tooltip>
+
+      {customOpen && hasAppearance && (
+        <Group grow mt="sm" align="flex-start">
+          <ColorInput
+            label={t("Light mode color")}
+            format="hex"
+            value={customLight}
+            swatches={swatches}
+            onChange={setCustomLight}
+            onChangeEnd={(value) => {
+              setCustomLight(value);
+              commitCustom(value, customDark);
+            }}
+          />
+          <ColorInput
+            label={t("Dark mode color")}
+            format="hex"
+            value={customDark}
+            swatches={swatches}
+            onChange={setCustomDark}
+            onChangeEnd={(value) => {
+              setCustomDark(value);
+              commitCustom(customLight, value);
+            }}
+          />
+        </Group>
+      )}
+    </div>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-breadcrumbs.tsx

@@ -0,0 +1,114 @@
+import { Menu } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { Link, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Fragment, useMemo, type ReactNode } from "react";
+import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { findAncestorTrail } from "@/features/public-space/utils/docs-tree.ts";
+import { extractPageSlugId } from "@/lib";
+import styles from "./docs.module.css";
+
+type Crumb = {
+  key: string;
+  name: string;
+  url: string;
+};
+
+export default function DocsBreadcrumbs() {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const { treeData, siteName, homeUrl, getNodeUrl } = useDocsSurface();
+  const isMobile = useMediaQuery("(max-width: 48em)");
+
+  const crumbs = useMemo<Crumb[] | null>(() => {
+    if (!treeData?.length) return null;
+
+    const currentSlugId = pageSlug
+      ? extractPageSlugId(pageSlug)
+      : treeData[0]?.slugId;
+    if (!currentSlugId) return null;
+
+    const trail = findAncestorTrail(treeData, currentSlugId);
+    if (trail === null) return null;
+
+    const siteCrumbs: Crumb[] =
+      siteName && homeUrl
+        ? [{ key: "site", name: siteName, url: homeUrl }]
+        : [];
+
+    const list = [
+      ...siteCrumbs,
+      ...trail.map((node) => ({
+        key: node.slugId,
+        name: node.name || t("untitled"),
+        url: getNodeUrl(node),
+      })),
+    ];
+    return list.length ? list : null;
+  }, [treeData, siteName, homeUrl, getNodeUrl, pageSlug, t]);
+
+  if (!crumbs) return null;
+
+  // Mobile keeps a single line (menu + last crumb, like the app header's
+  // breadcrumb); desktop collapses the middle beyond 4 crumbs.
+  const collapsed = crumbs.length > (isMobile ? 1 : 4);
+  const hidden = !collapsed
+    ? []
+    : isMobile
+      ? crumbs.slice(0, crumbs.length - 1)
+      : crumbs.slice(1, crumbs.length - 1);
+
+  const items: ReactNode[] = [];
+  if (collapsed && !isMobile) {
+    items.push(
+      <Link key={crumbs[0].key} to={crumbs[0].url} className={styles.crumbLink}>
+        {crumbs[0].name}
+      </Link>,
+    );
+  }
+  if (collapsed) {
+    items.push(
+      <Menu shadow="md" position="bottom-start" key="hidden">
+        <Menu.Target>
+          <button
+            type="button"
+            className={styles.crumbEllipsis}
+            aria-label={t("Show hidden pages")}
+          >
+            …
+          </button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {hidden.map((item) => (
+            <Menu.Item key={item.key} component={Link} to={item.url}>
+              {item.name}
+            </Menu.Item>
+          ))}
+        </Menu.Dropdown>
+      </Menu>,
+    );
+  }
+  const trailing = collapsed ? [crumbs[crumbs.length - 1]] : crumbs;
+  for (const crumb of trailing) {
+    items.push(
+      <Link key={crumb.key} to={crumb.url} className={styles.crumbLink}>
+        {crumb.name}
+      </Link>,
+    );
+  }
+
+  return (
+    <nav className={styles.breadcrumbs} aria-label={t("Breadcrumb")}>
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {index > 0 && (
+            <span className={styles.crumbSeparator} aria-hidden>
+              /
+            </span>
+          )}
+          {item}
+        </Fragment>
+      ))}
+    </nav>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-copy-page.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@mantine/core";
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { htmlToMarkdown } from "@docmost/editor-ext";
+import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useDocsCurrentPage } from "@/features/public-space/hooks/use-docs-current-page.ts";
+import { useClipboard } from "@/hooks/use-clipboard";
+import styles from "./docs.module.css";
+
+export default function DocsCopyPage() {
+  const { t } = useTranslation();
+  const editor = useAtomValue(readOnlyEditorAtom);
+  const page = useDocsCurrentPage();
+  const clipboard = useClipboard();
+
+  if (!editor) {
+    return null;
+  }
+
+  const handleCopy = () => {
+    if (editor.isDestroyed) return;
+    const markdown = htmlToMarkdown(editor.getHTML());
+    const title = page?.name ? `# ${page.name}\n\n` : "";
+    clipboard.copy(`${title}${markdown}`);
+  };
+
+  return (
+    <Button
+      variant="default"
+      size="compact-sm"
+      className={styles.copyPageButton}
+      onClick={handleCopy}
+      leftSection={
+        clipboard.copied ? (
+          <IconCheck size={14} stroke={1.8} />
+        ) : (
+          <IconCopy size={14} stroke={1.8} />
+        )
+      }
+    >
+      {clipboard.copied ? t("Copied") : t("Copy page")}
+    </Button>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-edit-page.tsx

@@ -0,0 +1,31 @@
+import { Link, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { IconPencil } from "@tabler/icons-react";
+import { useAuthenticatedUser } from "@/features/public-space/hooks/use-authenticated-user.ts";
+import { useDocsCurrentPage } from "@/features/public-space/hooks/use-docs-current-page.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import styles from "./docs.module.css";
+
+export default function DocsEditPage() {
+  const { t } = useTranslation();
+  const { spaceSlug } = useParams();
+  const page = useDocsCurrentPage();
+
+  const { data: currentUser } = useAuthenticatedUser();
+
+  if (!currentUser?.user || !page) {
+    return null;
+  }
+
+  return (
+    <Link
+      className={styles.editPageLink}
+      to={buildPageUrl(spaceSlug, page.slugId, page.name)}
+      target="_blank"
+      rel="noopener"
+    >
+      <IconPencil size={14} stroke={1.8} aria-hidden />
+      {t("Edit page")}
+    </Link>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-footer-branding.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import styles from "./docs.module.css";
+
+export default function DocsFooterBranding({
+  className,
+  refSource = "public-space",
+}: {
+  className?: string;
+  refSource?: string;
+}) {
+  return (
+    <footer className={clsx(styles.footer, className)}>
+      <a
+        className={styles.footerBranding}
+        href={`https://docmost.com?ref=${refSource}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Powered by Docmost
+      </a>
+    </footer>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-hub.module.css

@@ -0,0 +1,485 @@
+/* Design tokens for the public docs hub, transcribed from the "1a solid brand
+ * band" direction of the Directory design spec (a fixed light look). Declared
+ * on :root like --docs-* so cover/brand customization can override them at
+ * runtime. */
+:root {
+  --docs-hub-max: 80rem;
+  --docs-hub-bg: #ffffff;
+  --docs-hub-fg: #111827;
+  --docs-hub-muted: #5b6270;
+  --docs-hub-nav-fg: #4b5563;
+  --docs-hub-footer-fg: #6b7280;
+  --docs-hub-border: #eceef2;
+  --docs-hub-brand: #12275c;
+  --docs-hub-brand-fg: #ffffff;
+  --docs-hub-hero-bg: var(--docs-hub-brand);
+  --docs-hub-hero-fg: #ffffff;
+  --docs-hub-hero-muted: rgba(255, 255, 255, 0.78);
+  --docs-hub-search-bg: #ffffff;
+  --docs-hub-search-fg: #111827;
+  --docs-hub-search-placeholder: #8a919e;
+  --docs-hub-search-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  --docs-hub-card-bg: #ffffff;
+  --docs-hub-card-border: #e6e7ea;
+  --docs-hub-card-radius: 14px;
+  --docs-hub-card-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
+  --docs-hub-card-border-hover: #c4c8d0;
+  --docs-hub-card-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.14);
+  --docs-hub-tile-fg: #ffffff;
+}
+
+.root {
+  min-height: 100dvh;
+  background-color: var(--docs-hub-bg);
+  color: var(--docs-hub-fg);
+}
+
+.container {
+  max-width: var(--docs-hub-max);
+  margin-inline: auto;
+}
+
+/* ---------- Top bar ---------- */
+
+.topBar {
+  border-bottom: 1px solid var(--docs-hub-border);
+  padding: 0 rem(48px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding: 0 rem(20px);
+  }
+}
+
+.topBarInner {
+  height: rem(64px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    height: rem(56px);
+  }
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: rem(10px);
+  min-width: 0;
+  color: var(--docs-hub-fg);
+  text-decoration: none;
+  font-size: rem(16px);
+  font-weight: 600;
+  border-radius: rem(8px);
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-hub-brand);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: rem(8px);
+    font-size: rem(15px);
+  }
+}
+
+.brandTile {
+  width: rem(28px);
+  height: rem(28px);
+  border-radius: rem(8px);
+  background-color: var(--docs-hub-brand);
+  color: var(--docs-hub-brand-fg);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  font-weight: 700;
+  font-size: rem(13px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    width: rem(26px);
+    height: rem(26px);
+    border-radius: rem(7px);
+    font-size: rem(12px);
+  }
+}
+
+.topActions {
+  display: flex;
+  align-items: center;
+  gap: rem(24px);
+  font-size: rem(14px);
+  color: var(--docs-hub-nav-fg);
+}
+
+.signIn {
+  display: inline-block;
+  padding: rem(8px) rem(14px);
+  border-radius: rem(8px);
+  background-color: var(--docs-hub-brand);
+  color: var(--docs-hub-brand-fg);
+  text-decoration: none;
+  font-weight: 500;
+  white-space: nowrap;
+
+  @media (hover: hover) {
+    &:hover {
+      filter: brightness(1.15);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-hub-brand);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding: rem(8px) rem(12px);
+    font-size: rem(13px);
+  }
+}
+
+/* ---------- Hero band ---------- */
+
+.hero {
+  background-color: var(--docs-hub-hero-bg);
+  color: var(--docs-hub-hero-fg);
+  padding: rem(72px) rem(48px) rem(80px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding: rem(40px) rem(20px) rem(44px);
+  }
+}
+
+.heroInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: rem(16px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: rem(10px);
+  }
+}
+
+.heading {
+  margin: 0;
+  color: var(--docs-hub-hero-fg);
+  font-size: rem(48px);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(30px);
+  }
+}
+
+.subtitle {
+  margin: 0;
+  color: var(--docs-hub-hero-muted);
+  font-size: rem(18px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(15px);
+    line-height: 1.45;
+  }
+}
+
+.search {
+  margin-top: rem(16px);
+  width: rem(640px);
+  max-width: 100%;
+  height: rem(56px);
+  display: flex;
+  align-items: center;
+  padding: 0 rem(6px) 0 rem(22px);
+  border-radius: 999px;
+  background-color: var(--docs-hub-search-bg);
+  box-shadow: var(--docs-hub-search-shadow);
+
+  &:focus-within {
+    outline: 2px solid var(--docs-hub-hero-fg);
+    outline-offset: 3px;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: rem(10px);
+    width: 100%;
+    height: rem(48px);
+    padding: 0 rem(5px) 0 rem(18px);
+    box-shadow: none;
+  }
+}
+
+.searchInput {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: rem(16px);
+  color: var(--docs-hub-search-fg);
+  text-align: left;
+  outline: none;
+
+  &::placeholder {
+    color: var(--docs-hub-search-placeholder);
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(15px);
+  }
+}
+
+.searchButton {
+  width: rem(44px);
+  height: rem(44px);
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 999px;
+  background-color: var(--docs-hub-brand);
+  color: var(--docs-hub-brand-fg);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-hub-search-fg);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    width: rem(38px);
+    height: rem(38px);
+  }
+}
+
+/* ---------- Spaces ---------- */
+
+.main {
+  padding: rem(48px) rem(48px) rem(56px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding: rem(24px) rem(20px) rem(28px);
+  }
+}
+
+.mainInner {
+  display: flex;
+  flex-direction: column;
+  gap: rem(24px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: rem(16px);
+  }
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: rem(16px);
+  border-bottom: 1px solid var(--docs-hub-border);
+  padding-bottom: rem(14px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding-bottom: rem(10px);
+  }
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: rem(13px);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--docs-hub-fg);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(12px);
+  }
+}
+
+.sectionCount {
+  font-size: rem(14px);
+  color: var(--docs-hub-footer-fg);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(13px);
+  }
+}
+
+/* Phones flow one card per row; wider viewports fit two, then 3/4 columns. */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(rem(220px), 1fr));
+  gap: rem(12px);
+
+  @media (min-width: $mantine-breakpoint-sm) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: rem(20px);
+  }
+
+  @media (min-width: 64em) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: rem(14px);
+  padding: rem(24px) rem(24px) rem(26px);
+  background-color: var(--docs-hub-card-bg);
+  border: 1px solid var(--docs-hub-card-border);
+  border-radius: var(--docs-hub-card-radius);
+  box-shadow: var(--docs-hub-card-shadow);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 160ms ease;
+
+  @media (hover: hover) {
+    &:hover {
+      border-color: var(--docs-hub-card-border-hover);
+      box-shadow: var(--docs-hub-card-shadow-hover);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-hub-brand);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: rem(12px);
+    padding: rem(18px) rem(18px) rem(20px);
+  }
+}
+
+/* Tile and title share a row so titles get the card's full width. */
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: rem(14px);
+  min-width: 0;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: rem(12px);
+  }
+}
+
+.cardTile {
+  width: rem(40px);
+  height: rem(40px);
+  flex-shrink: 0;
+  border-radius: rem(10px);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  color: var(--docs-hub-tile-fg);
+  font-weight: 700;
+  font-size: rem(15px);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    width: rem(36px);
+    height: rem(36px);
+    border-radius: rem(9px);
+    font-size: rem(14px);
+  }
+}
+
+.cardName {
+  min-width: 0;
+  font-size: rem(18px);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--docs-hub-fg);
+  text-wrap: balance;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(16px);
+  }
+}
+
+.cardDescription {
+  font-size: rem(15px);
+  line-height: 1.5;
+  color: var(--docs-hub-muted);
+  text-wrap: pretty;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(14px);
+  }
+}
+
+.empty {
+  margin: 0;
+  padding: rem(48px) 0;
+  text-align: center;
+  color: var(--docs-hub-muted);
+}
+
+/* ---------- Footer ---------- */
+
+.footer {
+  border-top: 1px solid var(--docs-hub-border);
+  padding: rem(24px) rem(48px);
+  font-size: rem(14px);
+  color: var(--docs-hub-footer-fg);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding: rem(20px);
+    font-size: rem(13px);
+  }
+}
+
+.footerInner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: rem(12px);
+  }
+}
+
+.footerBranding {
+  color: var(--docs-hub-fg);
+  font-weight: 600;
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-hub-brand);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-hub-brand);
+    outline-offset: 2px;
+    border-radius: rem(2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}

apps/client/src/features/public-space/components/docs/docs-page-nav.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from "react";
+import { Link, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { flattenTreePreorder } from "@/features/public-space/utils/docs-tree.ts";
+import { extractPageSlugId } from "@/lib";
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+import styles from "./docs.module.css";
+
+export default function DocsPageNav() {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const { treeData, getNodeUrl } = useDocsSurface();
+
+  const { prev, next } = useMemo(() => {
+    if (!treeData?.length) {
+      return {
+        prev: null as SharedPageTreeNode | null,
+        next: null as SharedPageTreeNode | null,
+      };
+    }
+    const flat = flattenTreePreorder(treeData);
+    const currentSlugId = pageSlug
+      ? extractPageSlugId(pageSlug)
+      : treeData[0]?.slugId;
+    const index = flat.findIndex((node) => node.slugId === currentSlugId);
+    return {
+      prev: index > 0 ? flat[index - 1] : null,
+      next: index >= 0 && index < flat.length - 1 ? flat[index + 1] : null,
+    };
+  }, [treeData, pageSlug]);
+
+  if (!prev && !next) return null;
+
+  return (
+    <nav className={styles.pageNav} aria-label={t("Page navigation")}>
+      {prev && (
+        <Link
+          to={getNodeUrl(prev)}
+          className={styles.pageNavCard}
+          data-direction="prev"
+        >
+          <span className={styles.pageNavLabel}>
+            <IconArrowLeft size={13} stroke={2} aria-hidden />
+            {t("Previous")}
+          </span>
+          <span className={styles.pageNavTitle}>
+            {prev.name || t("untitled")}
+          </span>
+        </Link>
+      )}
+      {next && (
+        <Link
+          to={getNodeUrl(next)}
+          className={styles.pageNavCard}
+          data-direction="next"
+        >
+          <span className={styles.pageNavLabel}>
+            {t("Next")}
+            <IconArrowRight size={13} stroke={2} aria-hidden />
+          </span>
+          <span className={styles.pageNavTitle}>
+            {next.name || t("untitled")}
+          </span>
+        </Link>
+      )}
+    </nav>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-search-button.tsx

@@ -0,0 +1,22 @@
+import { IconSearch } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { platformModifierLabel } from "@/lib";
+import styles from "./docs.module.css";
+
+type DocsSearchButtonProps = {
+  onClick: () => void;
+};
+
+export default function DocsSearchButton({ onClick }: DocsSearchButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <button type="button" className={styles.searchButton} onClick={onClick}>
+      <IconSearch size={15} stroke={2} aria-hidden />
+      <span className={styles.searchLabel}>{t("Search")}</span>
+      <span className={styles.searchKbd} aria-hidden>
+        {platformModifierLabel} K
+      </span>
+    </button>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-shell.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { ActionIcon, Drawer, Tooltip } from "@mantine/core";
+import { Link } from "react-router-dom";
+import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+import { IconList, IconMenu2 } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  docsMobileSidebarAtom,
+  docsMobileTocAtom,
+} from "@/features/public-space/atoms/public-space-atoms.ts";
+import {
+  DocsSurface,
+  DocsSurfaceProvider,
+} from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import DocsSidebarTree from "@/features/public-space/components/docs/docs-sidebar-tree.tsx";
+import DocsToc from "@/features/public-space/components/docs/docs-toc.tsx";
+import DocsEditPage from "@/features/public-space/components/docs/docs-edit-page.tsx";
+import DocsCopyPage from "@/features/public-space/components/docs/docs-copy-page.tsx";
+import DocsSearchButton from "@/features/public-space/components/docs/docs-search-button.tsx";
+import DocsThemeToggle from "@/features/public-space/components/docs/docs-theme-toggle.tsx";
+import DocsFooterBranding from "@/features/public-space/components/docs/docs-footer-branding.tsx";
+import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
+import { SearchMobileControl } from "@/features/search/components/search-control.tsx";
+import styles from "./docs.module.css";
+
+const MemoizedDocsSidebarTree = React.memo(DocsSidebarTree);
+
+type DocsShellProps = {
+  surface: DocsSurface;
+  onSearchOpen?: () => void;
+  searchSpotlight?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export default function DocsShell({
+  surface,
+  onSearchOpen,
+  searchSpotlight,
+  children,
+}: DocsShellProps) {
+  const { t } = useTranslation();
+  const { hasSidebar, siteName, homeUrl, showBranding, showEditPage } = surface;
+
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useAtom(
+    docsMobileSidebarAtom,
+  );
+  const [mobileTocOpen, setMobileTocOpen] = useAtom(docsMobileTocAtom);
+
+  return (
+    <DocsSurfaceProvider value={surface}>
+      <div className={clsx(styles.root, "public-typography")}>
+        <SkipToMain />
+
+        <header className={styles.header}>
+          <div className={styles.headerInner}>
+            <div className={styles.headerLeft}>
+              {hasSidebar && (
+                <Tooltip label={t("Toggle sidebar")}>
+                  <ActionIcon
+                    variant="subtle"
+                    className={clsx(styles.headerAction, styles.sidebarToggle)}
+                    size="md"
+                    onClick={() => setMobileSidebarOpen((value) => !value)}
+                    aria-label={t("Toggle sidebar")}
+                    aria-expanded={mobileSidebarOpen}
+                  >
+                    <IconMenu2 size={18} stroke={2} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+
+              {!hasSidebar && siteName && homeUrl && (
+                <Link to={homeUrl} className={styles.headerSpaceName}>
+                  {siteName}
+                </Link>
+              )}
+            </div>
+
+            <div className={styles.headerCenter}>
+              {onSearchOpen && (
+                <div className={styles.searchSlot}>
+                  <DocsSearchButton onClick={onSearchOpen} />
+                </div>
+              )}
+            </div>
+
+            <div className={styles.headerRight}>
+              {onSearchOpen && (
+                <span className={styles.mobileOnly}>
+                  <SearchMobileControl onSearch={onSearchOpen} />
+                </span>
+              )}
+
+              <DocsThemeToggle />
+            </div>
+          </div>
+        </header>
+
+        <div className={styles.body}>
+          <nav
+            className={styles.sidebar}
+            data-hidden={!hasSidebar || undefined}
+            aria-label={t("Pages")}
+            aria-hidden={!hasSidebar || undefined}
+          >
+            {hasSidebar && (
+              <>
+                {siteName && homeUrl && (
+                  <>
+                    <Link to={homeUrl} className={styles.sidebarTitle}>
+                      {siteName}
+                    </Link>
+                    <div className={styles.sidebarDivider} aria-hidden />
+                  </>
+                )}
+                <div className={styles.sidebarScroll}>
+                  <MemoizedDocsSidebarTree />
+                </div>
+              </>
+            )}
+          </nav>
+
+          <main className={styles.main} id={MAIN_CONTENT_ID} tabIndex={-1}>
+            <div className={styles.article}>
+              <div className={styles.articleActions}>
+                <DocsCopyPage />
+                <span className={styles.tocOverlayControl}>
+                  <Tooltip label={t("Table of contents")} withArrow>
+                    <ActionIcon
+                      variant="subtle"
+                      className={styles.headerAction}
+                      onClick={() => setMobileTocOpen(true)}
+                      size="md"
+                      aria-label={t("Table of contents")}
+                    >
+                      <IconList size={18} stroke={2} />
+                    </ActionIcon>
+                  </Tooltip>
+                </span>
+              </div>
+              {children}
+              {showBranding && (
+                <DocsFooterBranding refSource={surface.brandingRef} />
+              )}
+            </div>
+          </main>
+
+          <aside className={styles.toc} aria-label={t("On this page")}>
+            <DocsToc />
+            {showEditPage && <DocsEditPage />}
+          </aside>
+        </div>
+
+        <Drawer
+          opened={mobileSidebarOpen}
+          onClose={() => setMobileSidebarOpen(false)}
+          title={siteName}
+          size={300}
+          padding="sm"
+        >
+          <div className={styles.drawerTree}>
+            {hasSidebar && <MemoizedDocsSidebarTree />}
+          </div>
+        </Drawer>
+
+        <Drawer
+          opened={mobileTocOpen}
+          onClose={() => setMobileTocOpen(false)}
+          position="right"
+          size={300}
+          padding="md"
+        >
+          <DocsToc />
+          {showEditPage && <DocsEditPage />}
+        </Drawer>
+
+        {searchSpotlight}
+      </div>
+    </DocsSurfaceProvider>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-sidebar-tree.tsx

@@ -0,0 +1,198 @@
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { Link, useParams } from "react-router-dom";
+import { useAtom, useSetAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+import { IconChevronRight } from "@tabler/icons-react";
+import { ActionIcon } from "@mantine/core";
+import { extractPageSlugId } from "@/lib";
+import {
+  DocTree,
+  type DocTreeApi,
+  type RenderRowProps,
+} from "@/features/page/tree/components/doc-tree";
+import {
+  docsMobileSidebarAtom,
+  openPublicSpaceTreeNodesAtom,
+} from "@/features/public-space/atoms/public-space-atoms.ts";
+import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { findAncestorTrail } from "@/features/public-space/utils/docs-tree.ts";
+import styles from "./docs.module.css";
+
+export default function DocsSidebarTree() {
+  const { t } = useTranslation();
+  const treeRef = useRef<DocTreeApi | null>(null);
+  const { pageSlug } = useParams();
+  const { treeData, getNodeUrl } = useDocsSurface();
+  const [openTreeNodes, setOpenTreeNodes] = useAtom(
+    openPublicSpaceTreeNodesAtom,
+  );
+
+  // The first root page is the surface home, served at the bare URL.
+  const firstRootSlugId = treeData?.[0]?.slugId;
+
+  const currentNodeId = pageSlug ? extractPageSlugId(pageSlug) : firstRootSlugId;
+
+  const openIds = useMemo(
+    () => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
+    [openTreeNodes],
+  );
+
+  useEffect(() => {
+    // Auto-open the first level of the tree on initial load.
+    const root = treeData?.[0];
+    if (!root) return;
+    setOpenTreeNodes((prev) => {
+      if (prev[root.slugId]) return prev;
+      const next = { ...prev, [root.slugId]: true };
+      for (const child of root.children ?? []) {
+        next[child.slugId] = true;
+      }
+      return next;
+    });
+  }, [treeData, setOpenTreeNodes]);
+
+  // Reveal the current page: expand its ancestor trail (deep links land with
+  // everything collapsed otherwise) and the page itself when it has children.
+  useEffect(() => {
+    if (!currentNodeId || !treeData?.length) return;
+    const trail = findAncestorTrail(treeData, currentNodeId);
+    if (trail === null) return;
+    setOpenTreeNodes((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const node of [...trail.map((n) => n.slugId), currentNodeId]) {
+        if (!next[node]) {
+          next[node] = true;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [currentNodeId, treeData, setOpenTreeNodes]);
+
+  useEffect(() => {
+    if (currentNodeId) {
+      treeRef.current?.select(currentNodeId, { scrollIntoView: true });
+    }
+  }, [currentNodeId, treeData]);
+
+  const handleToggle = useCallback(
+    (id: string, isOpen: boolean) =>
+      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
+    [setOpenTreeNodes],
+  );
+  const getDragLabel = useCallback(
+    (n: SharedPageTreeNode) => n.name || "untitled",
+    [],
+  );
+
+  const renderRow = useCallback(
+    (props: RenderRowProps<SharedPageTreeNode>) => (
+      <DocsTreeRow {...props} getNodeUrl={getNodeUrl} />
+    ),
+    [getNodeUrl],
+  );
+
+  if (!treeData?.length) {
+    return null;
+  }
+
+  return (
+    <DocTree<SharedPageTreeNode>
+      readOnly
+      ref={treeRef}
+      data={treeData}
+      openIds={openIds}
+      selectedId={currentNodeId}
+      renderRow={renderRow}
+      indentPerLevel={INDENT_PER_LEVEL}
+      rowHeight={36}
+      dynamicRowHeight
+      rowClassName={styles.treeNodeChrome}
+      onMove={noopMove}
+      onToggle={handleToggle}
+      getDragLabel={getDragLabel}
+      aria-label={t("Pages")}
+    />
+  );
+}
+
+// Module-scope noop so it's a stable reference across renders.
+const noopMove = () => {};
+
+const INDENT_PER_LEVEL = 16;
+
+
+type DocsTreeRowProps = RenderRowProps<SharedPageTreeNode> & {
+  getNodeUrl: (node: Pick<SharedPageTreeNode, "slugId" | "name">) => string;
+};
+
+function DocsTreeRow({
+  node,
+  level,
+  isOpen,
+  hasChildren,
+  isSelected,
+  rowRef,
+  tabIndex,
+  treeItemProps,
+  toggleOpen,
+  getNodeUrl,
+}: DocsTreeRowProps) {
+  const { t } = useTranslation();
+  const setMobileSidebarOpen = useSetAtom(docsMobileSidebarAtom);
+
+  return (
+    <Link
+      ref={rowRef as React.Ref<HTMLAnchorElement>}
+      tabIndex={tabIndex}
+      {...treeItemProps}
+      data-selected={isSelected || undefined}
+      data-open-parent={(level === 0 && isOpen && hasChildren) || undefined}
+      className={styles.treeRow}
+      to={getNodeUrl(node)}
+      onClick={() => {
+        setMobileSidebarOpen(false);
+      }}
+    >
+      {/* One segment per ancestor level; contiguous rows join into a rail. */}
+      {Array.from({ length: level }, (_, ancestor) => (
+        <span
+          key={ancestor}
+          className={styles.treeGuide}
+          style={{ left: -((level - ancestor) * INDENT_PER_LEVEL - 6) }}
+          aria-hidden
+        />
+      ))}
+      {node.icon && (
+        <span className={styles.treeIcon} aria-hidden>
+          {node.icon}
+        </span>
+      )}
+      <span className={styles.treeText}>{node.name || t("untitled")}</span>
+      {hasChildren && (
+        <ActionIcon
+          component="span"
+          variant="subtle"
+          color="gray"
+          size={20}
+          tabIndex={-1}
+          aria-hidden
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleOpen();
+          }}
+        >
+          <IconChevronRight
+            className={styles.treeChevron}
+            data-open={isOpen || undefined}
+            stroke={2}
+            size={14}
+          />
+        </ActionIcon>
+      )}
+    </Link>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-surface-context.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext } from "react";
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+
+// What varies between the public surfaces (/docs and /share) rendered by the
+// docs shell; every shell component reads this contract instead of a feature.
+export type DocsSurface = {
+  treeData: SharedPageTreeNode[] | null;
+  hasSidebar: boolean;
+  siteName?: string;
+  homeUrl?: string;
+  getNodeUrl: (node: Pick<SharedPageTreeNode, "slugId" | "name">) => string;
+  showBranding: boolean;
+  showEditPage: boolean;
+  brandingRef?: string;
+};
+
+const DocsSurfaceContext = createContext<DocsSurface | null>(null);
+
+export const DocsSurfaceProvider = DocsSurfaceContext.Provider;
+
+export function useDocsSurface(): DocsSurface {
+  const surface = useContext(DocsSurfaceContext);
+  if (!surface) {
+    throw new Error("useDocsSurface must be used within DocsShell");
+  }
+  return surface;
+}

apps/client/src/features/public-space/components/docs/docs-theme-toggle.tsx

@@ -0,0 +1,35 @@
+import {
+  ActionIcon,
+  Tooltip,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import styles from "./docs.module.css";
+
+export default function DocsThemeToggle() {
+  const { t } = useTranslation();
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+
+  return (
+    <Tooltip label={t("Toggle color scheme")} withArrow>
+      <ActionIcon
+        variant="subtle"
+        className={styles.headerAction}
+        size="md"
+        onClick={() =>
+          setColorScheme(computedColorScheme === "light" ? "dark" : "light")
+        }
+        aria-label={t("Toggle color scheme")}
+      >
+        {computedColorScheme === "light" ? (
+          <IconMoon size={18} stroke={1.75} />
+        ) : (
+          <IconSun size={18} stroke={1.75} />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+}

apps/client/src/features/public-space/components/docs/docs-toc.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useState } from "react";
+import { TextSelection } from "@tiptap/pm/state";
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import {
+  HeadingLink,
+  recalculateLinks,
+} from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
+import styles from "./docs.module.css";
+
+function getHeaderOffset(): number {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(
+    "--docs-header-h",
+  );
+  const parsed = parseInt(raw, 10);
+  return Number.isNaN(parsed) ? 56 : parsed;
+}
+
+export default function DocsToc() {
+  const { t } = useTranslation();
+  const editor = useAtomValue(readOnlyEditorAtom);
+  const [links, setLinks] = useState<HeadingLink[]>([]);
+  const [headingDOMNodes, setHeadingDOMNodes] = useState<HTMLElement[]>([]);
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null);
+
+  const handleUpdate = useCallback(() => {
+    if (!editor || editor.isDestroyed) return;
+    const result = recalculateLinks(editor.$nodes("heading"));
+    setLinks(result.links);
+    setHeadingDOMNodes(result.nodes);
+  }, [editor]);
+
+  useEffect(() => {
+    // "create" repopulates once the editor view mounts after this component.
+    editor?.on("create", handleUpdate);
+    editor?.on("update", handleUpdate);
+    handleUpdate();
+
+    return () => {
+      editor?.off("create", handleUpdate);
+      editor?.off("update", handleUpdate);
+    };
+  }, [editor, handleUpdate]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveElement(entry.target as HTMLElement);
+          }
+        });
+      },
+      {
+        rootMargin: `-${getHeaderOffset()}px 0px -85% 0px`,
+        threshold: 0,
+        root: null,
+      },
+    );
+
+    headingDOMNodes.forEach((heading) => observer.observe(heading));
+    return () => {
+      headingDOMNodes.forEach((heading) => observer.unobserve(heading));
+    };
+  }, [headingDOMNodes]);
+
+  const handleScrollToHeading = (position: number) => {
+    if (!editor || editor.isDestroyed) return;
+    const { view } = editor;
+
+    const { node } = view.domAtPos(position);
+    const element = node as HTMLElement;
+    const scrollPosition =
+      element.getBoundingClientRect().top +
+      window.scrollY -
+      getHeaderOffset() -
+      16;
+
+    window.scrollTo({ top: scrollPosition, behavior: "smooth" });
+
+    const tr = view.state.tr;
+    tr.setSelection(new TextSelection(tr.doc.resolve(position)));
+    view.dispatch(tr);
+    view.focus();
+  };
+
+  if (!links.length) {
+    return null;
+  }
+
+  const minLevel = Math.min(...links.map((link) => link.level));
+  const effectiveActive = activeElement ?? links[0]?.element;
+
+  return (
+    <div>
+      <span className={styles.tocLabel}>{t("On this page")}</span>
+      <div className={styles.tocList}>
+        {links.map((item, idx) => (
+          <button
+            type="button"
+            key={idx}
+            className={styles.tocLink}
+            data-active={item.element === effectiveActive || undefined}
+            style={{
+              paddingLeft: `${(item.level - minLevel) * 12 + 11}px`,
+            }}
+            onClick={() => handleScrollToHeading(item.position)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/client/src/features/public-space/components/docs/docs.module.css

@@ -0,0 +1,902 @@
+/* Design tokens for the public docs surface. Declared on :root (not .root)
+ * because mobile drawers and the spotlight render in portals outside the shell
+ * subtree. The accent pair is overridden at runtime by docs-theme.ts. */
+/* light-dark() cannot live in a bare :root block (the transform emits a
+ * descendant selector that never matches :root), so dark values get their own
+ * attribute-qualified block; flipping semantics ride Mantine's own vars. */
+:root {
+  --docs-header-h: 56px;
+  --docs-sidebar-w: 280px;
+  --docs-toc-w: 240px;
+  --docs-site-max: 96rem;
+  --docs-content-max: 54rem;
+  --docs-radius: 6px;
+
+  --docs-accent: #2b7af1;
+  --docs-accent-soft: color-mix(in srgb, var(--docs-accent) 10%, transparent);
+
+  /* Cloudflare-style single-ink model: one foreground for headings, bold, and
+   * body on a just-off-white page; neither end of the scale is pure. */
+  --docs-bg: oklch(99% 0 0);
+  --docs-fg: oklch(21% 0 0);
+  --docs-content-fg: var(--docs-fg);
+  --docs-nav-fg: oklch(47% 0 0);
+  --docs-muted: var(--mantine-color-dimmed);
+  --docs-hover: var(--mantine-color-default-hover);
+  --docs-faint: var(--mantine-color-gray-6);
+  --docs-border: var(--mantine-color-gray-2);
+  --docs-header-bg: color-mix(in srgb, var(--docs-bg) 78%, transparent);
+}
+
+:root[data-mantine-color-scheme="dark"] {
+  --docs-bg: var(--mantine-color-body);
+  --docs-fg: oklch(90% 0 0);
+  --docs-nav-fg: oklch(72% 0 0);
+  --docs-faint: var(--mantine-color-dark-2);
+  --docs-border: var(--mantine-color-dark-5);
+}
+
+.root {
+  min-height: 100dvh;
+  background-color: var(--docs-bg);
+  color: var(--docs-fg);
+}
+
+/* ---------- Header ---------- */
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 90;
+  height: var(--docs-header-h);
+  padding-inline: rem(20px);
+  background-color: var(--docs-header-bg);
+  backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  border-bottom: 1px solid var(--docs-border);
+}
+
+.headerInner {
+  max-width: var(--docs-site-max);
+  margin-inline: auto;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: rem(16px);
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: rem(10px);
+  min-width: 0;
+}
+
+.headerCenter {
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: rem(4px);
+}
+
+.searchSlot {
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: none;
+  }
+}
+
+.mobileOnly {
+  display: inline-flex;
+
+  @media (min-width: $mantine-breakpoint-sm) {
+    display: none;
+  }
+}
+
+/* Plain space name in the header, used only when there is no sidebar to
+ * carry it. The brand slot is reserved for future org logo/name support. */
+.headerSpaceName {
+  font-size: rem(14.5px);
+  font-weight: 600;
+  letter-spacing: -0.011em;
+  color: var(--docs-fg);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: var(--docs-radius);
+  padding: rem(4px) rem(6px);
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 1px;
+  }
+}
+
+/* Burger appears only once the sidebar column is collapsed. */
+@media (min-width: 64em) {
+  .sidebarToggle {
+    display: none !important;
+  }
+}
+
+.headerAction {
+  color: var(--docs-faint);
+  border-radius: var(--docs-radius);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-fg);
+      background-color: var(--docs-hover);
+    }
+  }
+}
+
+/* ---------- Search ---------- */
+
+.searchButton {
+  display: flex;
+  align-items: center;
+  gap: rem(8px);
+  width: rem(320px);
+  height: rem(34px);
+  padding-inline: rem(10px);
+  border: 1px solid var(--docs-border);
+  border-radius: rem(8px);
+  background-color: var(--docs-bg);
+  color: var(--docs-muted);
+  font-size: rem(13px);
+  cursor: pointer;
+  transition: border-color 120ms ease;
+
+  @media (hover: hover) {
+    &:hover {
+      border-color: light-dark(
+        var(--mantine-color-gray-4),
+        var(--mantine-color-dark-3)
+      );
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 1px;
+  }
+
+  @media (max-width: 62em) {
+    width: rem(220px);
+  }
+}
+
+.searchLabel {
+  flex: 1;
+  text-align: left;
+}
+
+.searchKbd {
+  font-size: rem(11px);
+  font-weight: 500;
+  color: var(--docs-faint);
+  border: 1px solid var(--docs-border);
+  border-radius: rem(4px);
+  padding: rem(1px) rem(5px);
+  line-height: 1.4;
+}
+
+/* Quiet bordered chip in the docs palette instead of Mantine's full-ink default. */
+.copyPageButton {
+  color: var(--docs-muted);
+  border-color: var(--docs-border);
+  background-color: transparent;
+  font-size: rem(13px);
+  font-weight: 500;
+  border-radius: var(--docs-radius);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-fg);
+      background-color: var(--docs-hover);
+    }
+  }
+}
+
+/* Page actions pinned to the article's top-right corner; on small viewports
+ * they drop into flow above the content so breadcrumbs never run under them. */
+.articleActions {
+  position: absolute;
+  top: rem(30px);
+  right: rem(24px);
+  display: inline-flex;
+  align-items: center;
+  gap: rem(6px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    position: static;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: rem(4px);
+  }
+}
+
+/* Below the rail breakpoint the toc opens as a drawer overlay instead. */
+.tocOverlayControl {
+  display: inline-flex;
+
+  @media (min-width: 75em) {
+    display: none;
+  }
+}
+
+/* ---------- Body grid ---------- */
+
+/* Contained site layout: rails anchor the edges of a centered max-width
+ * container, the article centers itself in the fixed middle track. Hiding a
+ * rail keeps its track, so toggling never moves the content column. */
+.body {
+  max-width: var(--docs-site-max);
+  margin-inline: auto;
+  display: grid;
+  grid-template-columns:
+    var(--docs-sidebar-w)
+    minmax(0, 1fr)
+    var(--docs-toc-w);
+  align-items: start;
+}
+
+.sidebar {
+  grid-column: 1;
+  width: var(--docs-sidebar-w);
+  position: sticky;
+  top: var(--docs-header-h);
+  height: calc(100dvh - var(--docs-header-h));
+  display: flex;
+  flex-direction: column;
+  padding: rem(20px) rem(10px) rem(16px) rem(20px);
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.sidebar[data-hidden="true"] {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateX(rem(-8px));
+}
+
+.sidebarTitle {
+  display: block;
+  font-size: rem(14px);
+  font-weight: 600;
+  letter-spacing: -0.011em;
+  color: var(--docs-fg);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: var(--docs-radius);
+  padding: rem(5px) rem(8px);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-accent);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: -2px;
+  }
+}
+
+.sidebarDivider {
+  height: 1px;
+  background-color: var(--docs-border);
+  margin: rem(10px) 0 rem(14px);
+  flex-shrink: 0;
+}
+
+.sidebarScroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.main {
+  grid-column: 2;
+  min-width: 0;
+}
+
+.article {
+  max-width: var(--docs-content-max);
+  margin-inline: auto;
+  padding: rem(36px) rem(32px) rem(72px);
+  position: relative;
+}
+
+.toc {
+  grid-column: 3;
+  width: var(--docs-toc-w);
+  position: sticky;
+  top: var(--docs-header-h);
+  max-height: calc(100dvh - var(--docs-header-h));
+  overflow-y: auto;
+  scrollbar-width: thin;
+  padding: rem(36px) rem(16px) rem(24px) rem(4px);
+}
+
+@media (max-width: 75em) {
+  .body {
+    grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
+  }
+
+  .toc {
+    display: none;
+  }
+}
+
+/* Below 64em the sidebar collapses into the burger drawer. */
+@media (max-width: 64em) {
+  .body {
+    display: block;
+  }
+
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .article {
+    padding: rem(24px) rem(20px) rem(56px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .body,
+  .sidebar,
+  .toc,
+  .searchButton {
+    transition: none;
+  }
+}
+
+/* ---------- Sidebar tree ---------- */
+
+/* Applied through DocTree's rowClassName onto the engine wrapper that carries
+ * data-selected. Class doubled to outrank the engine's own module styles. */
+.treeNodeChrome.treeNodeChrome {
+  border-radius: var(--docs-radius);
+  color: var(--docs-nav-fg);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--docs-hover);
+      color: var(--docs-fg);
+    }
+  }
+}
+
+.treeNodeChrome.treeNodeChrome[data-selected="true"] {
+  background-color: var(--docs-accent-soft);
+}
+
+.treeRow {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: rem(8px);
+  width: 100%;
+  min-width: 0;
+  min-height: rem(32px);
+  padding: rem(6px) rem(4px) rem(6px) rem(8px);
+  text-decoration: none;
+  color: inherit;
+  font-size: rem(14px);
+  font-weight: 400;
+  line-height: 1.45;
+  border-radius: var(--docs-radius);
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: -2px;
+  }
+}
+
+/* Expanded parents read as section headers, Cloudflare-style. */
+.treeRow[data-open-parent="true"] {
+  color: var(--docs-fg);
+  font-weight: 500;
+}
+
+.treeRow[data-selected="true"] {
+  color: var(--docs-accent);
+  font-weight: 500;
+}
+
+.treeIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: rem(18px);
+  font-size: rem(14px);
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: rem(2px);
+}
+
+/* Names wrap instead of truncating: the sidebar has a fixed width, so an
+ * ellipsis would permanently hide the tail of long titles. */
+.treeText {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Nesting rail: each row draws its ancestors' segments in the indent gutter;
+ * the -2px bleed covers the engine's row padding so segments connect. */
+.treeGuide {
+  position: absolute;
+  top: 0;
+  bottom: rem(-2px);
+  width: 1px;
+  background-color: var(--docs-border);
+  pointer-events: none;
+}
+
+.treeChevron {
+  flex-shrink: 0;
+  color: var(--docs-faint);
+  transition: transform 140ms ease;
+}
+
+.treeChevron[data-open="true"] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .treeChevron {
+    transition: none;
+  }
+}
+
+/* ---------- Table of contents ---------- */
+
+.tocLabel {
+  display: block;
+  font-size: rem(11px);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--docs-muted);
+  margin-bottom: rem(10px);
+}
+
+.tocList {
+  border-left: 1px solid var(--docs-border);
+}
+
+.tocLink {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-left: 2px solid transparent;
+  margin-left: -1px;
+  padding: rem(4px) rem(8px) rem(4px) rem(11px);
+  font-size: rem(13px);
+  line-height: 1.45;
+  color: var(--docs-muted);
+  cursor: pointer;
+  overflow-wrap: break-word;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-fg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: -2px;
+    border-radius: rem(2px);
+  }
+}
+
+.tocLink[data-active="true"] {
+  color: var(--docs-accent);
+  border-left-color: var(--docs-accent);
+  font-weight: 500;
+}
+
+/* ---------- Edit page (signed-in visitors) ---------- */
+
+.editPageLink {
+  display: flex;
+  align-items: center;
+  gap: rem(6px);
+  margin-top: rem(16px);
+  padding-top: rem(14px);
+  border-top: 1px solid var(--docs-border);
+  font-size: rem(13px);
+  color: var(--docs-muted);
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-fg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 2px;
+    border-radius: rem(2px);
+  }
+}
+
+/* ---------- Sidebar branding experiments (GitBook card / ReadMe line) ---------- */
+
+/* ---------- Footer branding ---------- */
+
+.footer {
+  margin-top: rem(40px);
+  padding-top: rem(16px);
+  border-top: 1px solid var(--docs-border);
+}
+
+.footerBranding {
+  font-size: rem(14px);
+  color: var(--docs-muted);
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-fg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 2px;
+    border-radius: rem(2px);
+  }
+}
+
+/* ---------- Breadcrumbs ---------- */
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: rem(4px);
+  font-size: rem(13px);
+  color: var(--docs-muted);
+  margin-bottom: rem(6px);
+  /* keep long trails clear of the pinned page actions */
+  padding-right: rem(160px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding-right: 0;
+  }
+}
+
+.crumbLink {
+  color: var(--docs-muted);
+  text-decoration: none;
+  border-radius: rem(4px);
+  padding: rem(1px) rem(3px);
+  max-width: rem(220px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-accent);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 0;
+  }
+}
+
+.crumbSeparator {
+  color: light-dark(
+    var(--mantine-color-gray-4),
+    var(--mantine-color-dark-3)
+  );
+  user-select: none;
+}
+
+.crumbEllipsis {
+  color: var(--docs-muted);
+  border: 0;
+  background: none;
+  cursor: pointer;
+  border-radius: rem(4px);
+  padding: rem(1px) rem(4px);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--docs-accent);
+      background-color: var(--docs-hover);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 0;
+  }
+}
+
+/* ---------- Byline ---------- */
+
+/* Pulled up into the title's own bottom margin so it reads as one block. */
+.byline {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: rem(8px);
+  margin-top: rem(-16px);
+  margin-bottom: rem(28px);
+  font-size: rem(13px);
+  color: var(--docs-muted);
+}
+
+.bylineAuthor {
+  display: inline-flex;
+  align-items: center;
+  gap: rem(6px);
+}
+
+.bylineDot {
+  color: var(--docs-faint);
+  user-select: none;
+}
+
+/* ---------- Prev / next ---------- */
+
+.pageNav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: rem(12px);
+  margin-top: rem(48px);
+}
+
+.pageNavCard {
+  display: flex;
+  flex-direction: column;
+  gap: rem(4px);
+  padding: rem(12px) rem(16px);
+  border: 1px solid var(--docs-border);
+  border-radius: rem(10px);
+  text-decoration: none;
+  min-width: 0;
+  transition: border-color 120ms ease;
+
+  @media (hover: hover) {
+    &:hover {
+      border-color: var(--docs-accent);
+    }
+
+    &:hover .pageNavTitle {
+      color: var(--docs-accent);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--docs-accent);
+    outline-offset: 1px;
+  }
+}
+
+.pageNavCard[data-direction="next"] {
+  grid-column: 2;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.pageNavLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: rem(4px);
+  font-size: rem(12px);
+  color: var(--docs-muted);
+}
+
+.pageNavTitle {
+  font-size: rem(14px);
+  font-weight: 500;
+  color: var(--docs-fg);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 120ms ease;
+}
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .pageNav {
+    grid-template-columns: 1fr;
+  }
+
+  .pageNavCard[data-direction="next"] {
+    grid-column: auto;
+  }
+}
+
+/* ---------- Content ---------- */
+
+/* Reading typography: body copy softens to a blue-gray with relaxed leading
+ * while headings and bold keep full contrast. Class doubled to outrank the
+ * shared .public-typography metrics regardless of stylesheet order. */
+.root.root :global(.ProseMirror) {
+  color: var(--docs-content-fg);
+  line-height: 1.75;
+  letter-spacing: normal;
+  /* The article owns horizontal spacing here; the editor's 3rem gutter would
+   * misalign content with the breadcrumb, and its own background bands
+   * against the off-white page. */
+  padding-left: 0;
+  padding-right: 0;
+  background-color: transparent;
+}
+
+/* Wide columns bleed into the editor gutter that no longer exists here. */
+.root.root :global(div[data-type="columns"][data-width-mode="wide"]) {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+/* One ink by inheritance: Mantine's baseline gives headings an explicit
+ * color, which forks them from the body. Neutralize instead of re-declaring,
+ * so changing the single content foreground repaints all text. */
+.root.root :global(.ProseMirror) h1,
+.root.root :global(.ProseMirror) h2,
+.root.root :global(.ProseMirror) h3,
+.root.root :global(.ProseMirror) h4,
+.root.root :global(.ProseMirror) h5,
+.root.root :global(.ProseMirror) h6,
+.root.root :global(.ProseMirror) strong {
+  color: inherit;
+}
+
+/* Modest semibold heading scale (Cloudflare-style); class doubled to outrank
+ * the shared editor and .public-typography rules. */
+.root.root :global(.ProseMirror) h1 {
+  font-size: 2.1875rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+}
+
+.root.root :global(.ProseMirror) h2 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.4;
+}
+
+.root.root :global(.ProseMirror) h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.45;
+}
+
+.root.root :global(.ProseMirror) h4,
+.root.root :global(.ProseMirror) h5,
+.root.root :global(.ProseMirror) h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.root.root :global(.ProseMirror) strong {
+  font-weight: 600;
+}
+
+.root.root :global(.page-title .ProseMirror) h1 {
+  font-size: 2.1875rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+}
+
+.root :global(.ProseMirror) a {
+  color: var(--docs-accent);
+}
+
+/* Internal page links (mentions, subpages lists) follow the accent like any
+ * other link; the app skin pins them to ink with !important, hence the
+ * counter-!important, and the underline tint softens to match. */
+.root :global(.ProseMirror) a[class*="pageMentionLink"] {
+  color: var(--docs-accent) !important;
+}
+
+.root :global(.ProseMirror) [class*="pageMentionText"] {
+  border-bottom-color: color-mix(in srgb, var(--docs-accent) 40%, transparent);
+}
+
+.root :global(.ProseMirror) h1,
+.root :global(.ProseMirror) h2,
+.root :global(.ProseMirror) h3,
+.root :global(.ProseMirror) h4 {
+  scroll-margin-top: calc(var(--docs-header-h) + rem(16px));
+}
+
+/* ---------- Content tables ---------- */
+
+/* The wrapper carries the rounded outer border so border-collapse never
+ * fights border-radius; its overflow-x clips the corners. */
+.root.root :global(.ProseMirror .tableWrapper) {
+  border: 1px solid var(--docs-border);
+  border-radius: rem(10px);
+}
+
+.root.root :global(.ProseMirror table td),
+.root.root :global(.ProseMirror table th) {
+  border: 0;
+  border-bottom: 1px solid var(--docs-border);
+  border-right: 1px solid var(--docs-border);
+  padding: rem(10px) rem(14px);
+}
+
+.root.root :global(.ProseMirror table :is(td, th):last-child) {
+  border-right: 0;
+}
+
+.root.root :global(.ProseMirror table tr:last-child td),
+.root.root :global(.ProseMirror table tr:last-child th) {
+  border-bottom: 0;
+}
+
+.root.root :global(.ProseMirror table th) {
+  background-color: var(--docs-hover);
+  color: var(--docs-fg);
+  font-weight: 600;
+}
+
+/* Round the corner cells too for the no-overflow (pinned header) variant,
+ * where the wrapper does not clip. */
+.root.root :global(.ProseMirror table tr:first-child :is(th, td):first-child) {
+  border-top-left-radius: rem(9px);
+}
+
+.root.root :global(.ProseMirror table tr:first-child :is(th, td):last-child) {
+  border-top-right-radius: rem(9px);
+}
+
+.root.root :global(.ProseMirror table tr:last-child :is(th, td):first-child) {
+  border-bottom-left-radius: rem(9px);
+}
+
+.root.root :global(.ProseMirror table tr:last-child :is(th, td):last-child) {
+  border-bottom-right-radius: rem(9px);
+}
+
+.emptyState {
+  padding-top: rem(96px);
+  text-align: center;
+  color: var(--docs-muted);
+}
+
+/* ---------- Mobile drawers ---------- */
+
+.drawerTree {
+  height: calc(100dvh - rem(60px));
+  display: flex;
+  flex-direction: column;
+}

apps/client/src/features/public-space/components/public-space-layout.tsx

@@ -0,0 +1,69 @@
+import "@fontsource-variable/inter";
+import "@/styles/public-typography.css";
+import { useEffect, useMemo } from "react";
+import { Outlet, useParams } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { usePublicSpaceTreeQuery } from "@/features/public-space/queries/public-space-query.ts";
+import { buildSharedPageTree } from "@/features/share/utils.ts";
+import {
+  publicSpaceTreeAtom,
+  publicSpaceTreeDataAtom,
+} from "@/features/public-space/atoms/public-space-atoms.ts";
+import { useDocsAccent } from "@/features/public-space/theme/docs-theme.ts";
+import DocsShell from "@/features/public-space/components/docs/docs-shell.tsx";
+import { DocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { PublicSpaceSearchSpotlight } from "@/features/search/components/public-space-search-spotlight.tsx";
+import { publicSpaceSearchSpotlight } from "@/features/search/constants";
+
+export default function PublicSpaceLayout() {
+  const { spaceSlug } = useParams();
+  const { data } = usePublicSpaceTreeQuery(spaceSlug);
+
+  useDocsAccent(data?.appearance);
+
+  const setPublicSpaceTree = useSetAtom(publicSpaceTreeAtom);
+  const setPublicSpaceTreeData = useSetAtom(publicSpaceTreeDataAtom);
+
+  const treeData = useMemo(() => {
+    if (!data?.pageTree) return null;
+    return buildSharedPageTree(data.pageTree);
+  }, [data?.pageTree]);
+
+  useEffect(() => {
+    setPublicSpaceTree(data || null);
+    setPublicSpaceTreeData(treeData);
+  }, [data, treeData, setPublicSpaceTree, setPublicSpaceTreeData]);
+
+  const surface = useMemo<DocsSurface>(() => {
+    const homeUrl = buildPublicSpaceUrl({ spaceSlug });
+    // The first root page is the space home, served at the bare space URL.
+    const firstRootSlugId = treeData?.[0]?.slugId;
+    return {
+      treeData,
+      hasSidebar: (data?.pageTree?.length ?? 0) > 1,
+      siteName: data?.space?.name,
+      homeUrl,
+      getNodeUrl: (node) =>
+        node.slugId === firstRootSlugId
+          ? homeUrl
+          : buildPublicSpaceUrl({
+              spaceSlug,
+              pageSlugId: node.slugId,
+              pageTitle: node.name,
+            }),
+      showBranding: Boolean(data),
+      showEditPage: true,
+    };
+  }, [data, treeData, spaceSlug]);
+
+  return (
+    <DocsShell
+      surface={surface}
+      onSearchOpen={publicSpaceSearchSpotlight.open}
+      searchSpotlight={<PublicSpaceSearchSpotlight spaceSlug={spaceSlug} />}
+    >
+      <Outlet />
+    </DocsShell>
+  );
+}

apps/client/src/features/public-space/components/publish-space-settings.tsx

@@ -0,0 +1,283 @@
+import { ActionIcon, Group, Text, Switch, TextInput } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useAtom } from "jotai";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IconExternalLink, IconWorld } from "@tabler/icons-react";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { IPublicSpace } from "@/features/public-space/types/public-space.types.ts";
+import {
+  usePublicSpaceForSpaceQuery,
+  usePublishSpaceMutation,
+} from "@/features/public-space/queries/public-space-query.ts";
+import { getAppUrl } from "@/lib/config.ts";
+import CopyTextButton from "@/components/common/copy.tsx";
+import AppearanceSettings from "@/features/public-space/components/appearance-settings.tsx";
+import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
+
+type PublishSpaceSettingsProps = {
+  space: ISpace;
+};
+
+export default function PublishSpaceSettings({
+  space,
+}: PublishSpaceSettingsProps) {
+  const { t } = useTranslation();
+  const [workspace] = useAtom(workspaceAtom);
+
+  const allowPublicSpaces = isPublicSpacesAllowed(workspace);
+
+  const { data: publicSpace } = usePublicSpaceForSpaceQuery(
+    allowPublicSpaces ? space?.id : undefined,
+  );
+  const publishMutation = usePublishSpaceMutation();
+
+  const [published, setPublished] = useState(false);
+  const [searchIndexing, setSearchIndexing] = useState(false);
+  const [bylineAuthor, setBylineAuthor] = useState(false);
+  const [bylineUpdatedAt, setBylineUpdatedAt] = useState(true);
+  const [directoryListed, setDirectoryListed] = useState(false);
+
+  const workspaceDirectoryEnabled =
+    workspace?.settings?.publicSpaces?.directory === true;
+
+  const syncFromPublicSpace = (state?: IPublicSpace | null) => {
+    const byline = state?.settings?.byline;
+    setPublished(state?.enabled === true);
+    setSearchIndexing(state?.searchIndexing === true);
+    setBylineAuthor(byline?.author === true);
+    setBylineUpdatedAt(byline?.updatedAt !== false);
+    setDirectoryListed(state?.settings?.directory === true);
+  };
+
+  useEffect(() => {
+    syncFromPublicSpace(publicSpace);
+  }, [publicSpace]);
+
+  if (!allowPublicSpaces || !space) {
+    return null;
+  }
+
+  const publicUrl = `${getAppUrl()}/docs/${space.slug}`;
+
+  const applyPublish = async (enabled: boolean) => {
+    try {
+      const result = await publishMutation.mutateAsync({
+        spaceId: space.id,
+        enabled,
+      });
+      syncFromPublicSpace(result);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const handlePublishChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    if (!value) {
+      applyPublish(false);
+      return;
+    }
+
+    modals.openConfirmModal({
+      title: t("Publish space to the web"),
+      children: (
+        <Text size="sm">
+          {t(
+            "Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?",
+          )}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Publish"), cancel: t("Cancel") },
+      onConfirm: () => applyPublish(true),
+    });
+  };
+
+  const handleIndexingChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    try {
+      await publishMutation.mutateAsync({
+        spaceId: space.id,
+        enabled: true,
+        searchIndexing: value,
+      });
+      setSearchIndexing(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const handleBylineAuthorChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    try {
+      await publishMutation.mutateAsync({
+        spaceId: space.id,
+        enabled: true,
+        bylineAuthor: value,
+      });
+      setBylineAuthor(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const handleBylineUpdatedAtChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    try {
+      await publishMutation.mutateAsync({
+        spaceId: space.id,
+        enabled: true,
+        bylineUpdatedAt: value,
+      });
+      setBylineUpdatedAt(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const handleDirectoryChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    try {
+      await publishMutation.mutateAsync({
+        spaceId: space.id,
+        enabled: true,
+        directory: value,
+      });
+      setDirectoryListed(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  return (
+    <div>
+      <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+        <div>
+          <Text size="md">{t("Publish space to the web")}</Text>
+          <Text size="sm" c="dimmed">
+            {t("Make this space publicly readable by anyone on the internet.")}
+          </Text>
+        </div>
+        <Switch
+          checked={published}
+          onChange={handlePublishChange}
+          size={"xs"}
+          aria-label={t("Toggle publish space to the web")}
+        />
+      </Group>
+
+      {published && (
+        <>
+          <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+            <div>
+              <Text size="md">{t("Allow search engines to index")}</Text>
+              <Text size="sm" c="dimmed">
+                {t(
+                  "Let public pages in this space appear in search engine results.",
+                )}
+              </Text>
+            </div>
+            <Switch
+              checked={searchIndexing}
+              onChange={handleIndexingChange}
+              size={"xs"}
+              aria-label={t("Toggle search engine indexing")}
+            />
+          </Group>
+
+          <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+            <div>
+              <Text size="md">{t("Show page author")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("Display the page creator's name on public pages.")}
+              </Text>
+            </div>
+            <Switch
+              checked={bylineAuthor}
+              onChange={handleBylineAuthorChange}
+              size={"xs"}
+              aria-label={t("Toggle show page author")}
+            />
+          </Group>
+
+          <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+            <div>
+              <Text size="md">{t("Show last updated")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("Display when each page was last updated.")}
+              </Text>
+            </div>
+            <Switch
+              checked={bylineUpdatedAt}
+              onChange={handleBylineUpdatedAtChange}
+              size={"xs"}
+              aria-label={t("Toggle show last updated")}
+            />
+          </Group>
+
+          {workspaceDirectoryEnabled && (
+            <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+              <div>
+                <Text size="md">{t("Show in public directory")}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("List this space in the public directory at /docs.")}
+                </Text>
+              </div>
+              <Switch
+                checked={directoryListed}
+                onChange={handleDirectoryChange}
+                size={"xs"}
+                aria-label={t("Toggle show in public directory")}
+              />
+            </Group>
+          )}
+
+          <Group mt="md" gap={4} wrap="nowrap">
+            <TextInput
+              value={publicUrl}
+              readOnly
+              style={{ width: "100%" }}
+              leftSection={<IconWorld size={16} />}
+              aria-label={t("Public space link")}
+              rightSection={
+                <CopyTextButton
+                  text={publicUrl}
+                  label={t("Copy public space link")}
+                />
+              }
+            />
+            <ActionIcon
+              component="a"
+              variant="default"
+              size="input-sm"
+              target="_blank"
+              href={publicUrl}
+              aria-label={t("Open public space link")}
+            >
+              <IconExternalLink size={16} />
+            </ActionIcon>
+          </Group>
+
+          <Text size="sm" c="dimmed" mt="xs">
+            {t("Renaming the space slug will break public links.")}
+          </Text>
+
+          <AppearanceSettings
+            spaceId={space.id}
+            appearance={publicSpace?.settings?.appearance}
+          />
+        </>
+      )}
+    </div>
+  );
+}

apps/client/src/features/public-space/components/published-spaces-list.tsx

@@ -0,0 +1,210 @@
+import { Table, Group, Text, Anchor, Menu, ActionIcon } from "@mantine/core";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { modals } from "@mantine/modals";
+import { notifications } from "@mantine/notifications";
+import {
+  IconCopy,
+  IconDots,
+  IconExternalLink,
+  IconWorld,
+  IconWorldOff,
+} from "@tabler/icons-react";
+import Paginate from "@/components/common/paginate.tsx";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
+import {
+  usePublishedSpacesQuery,
+  usePublishSpaceMutation,
+} from "@/features/public-space/queries/public-space-query.ts";
+import { IPublishedSpaceItem } from "@/features/public-space/types/public-space.types.ts";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { getAppUrl, getSpaceUrl } from "@/lib/config.ts";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
+
+export default function PublishedSpacesList() {
+  const { t } = useTranslation();
+  const { cursor, goNext, goPrev } = useCursorPaginate();
+  const { data, isLoading } = usePublishedSpacesQuery({ cursor });
+  const locale = useDateFnsLocale();
+
+  if (!isLoading && data?.items.length === 0) {
+    return <EmptyState icon={IconWorld} title={t("No published spaces")} />;
+  }
+
+  return (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table verticalSpacing="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t("Space")}</Table.Th>
+              <Table.Th>{t("Published by")}</Table.Th>
+              <Table.Th>{t("Published at")}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+
+          <Table.Tbody>
+            {data?.items.map((item: IPublishedSpaceItem) => (
+              <Table.Tr key={item.id} className={rowClasses.row}>
+                <Table.Td>
+                  <Anchor
+                    size="sm"
+                    underline="never"
+                    style={{
+                      cursor: "pointer",
+                      color: "var(--mantine-color-text)",
+                    }}
+                    className={rowClasses.link}
+                    href={buildPublicSpaceUrl({ spaceSlug: item.space.slug })}
+                    target="_blank"
+                  >
+                    <Group gap="8" wrap="nowrap">
+                      <CustomAvatar
+                        name={item.space.name}
+                        avatarUrl={item.space.logo}
+                        type={AvatarIconType.SPACE_ICON}
+                        color="initials"
+                        variant="filled"
+                        size={20}
+                        radius="sm"
+                      />
+                      <Text fz="sm" fw={500} lineClamp={1}>
+                        {item.space.name}
+                      </Text>
+                    </Group>
+                  </Anchor>
+                </Table.Td>
+                <Table.Td>
+                  <Group gap="4" wrap="nowrap">
+                    <CustomAvatar
+                      avatarUrl={item.creator?.avatarUrl}
+                      name={item.creator?.name}
+                      size="sm"
+                    />
+                    <Text fz="sm" lineClamp={1}>
+                      {item.creator?.name}
+                    </Text>
+                  </Group>
+                </Table.Td>
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatLocalized(
+                      item.createdAt,
+                      "MMM dd, yyyy",
+                      "PP",
+                      locale,
+                    )}
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <PublishedSpaceActionMenu item={item} />
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+
+      {data?.items.length > 0 && (
+        <Paginate
+          hasPrevPage={data?.meta?.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
+          onPrev={goPrev}
+        />
+      )}
+    </>
+  );
+}
+
+function PublishedSpaceActionMenu({ item }: { item: IPublishedSpaceItem }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const clipboard = useClipboard();
+  const publishMutation = usePublishSpaceMutation();
+
+  const publicPath = buildPublicSpaceUrl({ spaceSlug: item.space.slug });
+
+  const copyLink = () => {
+    clipboard.copy(`${getAppUrl()}${publicPath}`);
+    notifications.show({ message: t("Link copied") });
+  };
+
+  const onUnpublish = async () => {
+    try {
+      await publishMutation.mutateAsync({
+        spaceId: item.spaceId,
+        enabled: false,
+      });
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const openUnpublishModal = () =>
+    modals.openConfirmModal({
+      title: t("Unpublish space"),
+      children: (
+        <Text size="sm">
+          {t(
+            "This space will no longer be publicly accessible. Are you sure?",
+          )}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Unpublish"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: onUnpublish,
+    });
+
+  return (
+    <Menu
+      shadow="xl"
+      position="bottom-end"
+      offset={20}
+      width={200}
+      withArrow
+      arrowPosition="center"
+    >
+      <Menu.Target>
+        <ActionIcon
+          variant="subtle"
+          c="gray"
+          aria-label={t("More options for {{name}}", {
+            name: item.space.name,
+          })}
+        >
+          <IconDots size={20} stroke={2} />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Item onClick={copyLink} leftSection={<IconCopy size={16} />}>
+          {t("Copy link")}
+        </Menu.Item>
+
+        <Menu.Item
+          onClick={() => navigate(getSpaceUrl(item.space.slug))}
+          leftSection={<IconExternalLink size={16} />}
+        >
+          {t("Open space")}
+        </Menu.Item>
+
+        <Menu.Item
+          c="red"
+          onClick={openUnpublishModal}
+          leftSection={<IconWorldOff size={16} />}
+          disabled={item.space?.userRole !== "admin"}
+        >
+          {t("Unpublish")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

apps/client/src/features/public-space/components/space-public-notice.tsx

@@ -0,0 +1,47 @@
+import { Alert, Anchor, Group, Text } from "@mantine/core";
+import { IconExternalLink, IconWorld } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { isBetaPublicSpaces } from "@/lib/config.ts";
+
+type SpacePublicNoticeProps = {
+  space: ISpace;
+};
+
+export default function SpacePublicNotice({ space }: SpacePublicNoticeProps) {
+  const { t } = useTranslation();
+
+  if (!isBetaPublicSpaces() || !space?.isPublished) {
+    return null;
+  }
+
+  return (
+    <Alert
+      variant="light"
+      color="blue"
+      icon={<IconWorld size={18} />}
+      title={t("This space is public")}
+      mb="lg"
+    >
+      <Group justify="space-between" gap="xs">
+        <Text size="sm">
+          {t(
+            "Anyone on the internet can read the pages in this space, except restricted pages.",
+          )}
+        </Text>
+        <Anchor
+          size="sm"
+          fw={500}
+          href={buildPublicSpaceUrl({ spaceSlug: space.slug })}
+          target="_blank"
+          rel="noopener"
+          style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
+        >
+          {t("Open public site")}
+          <IconExternalLink size={14} />
+        </Anchor>
+      </Group>
+    </Alert>
+  );
+}

apps/client/src/features/public-space/hooks/use-authenticated-user.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMyInfo } from "@/features/user/services/user-service";
+import { ICurrentUser } from "@/features/user/types/user.types";
+
+/** Probes login state from public surfaces; the /docs 401 exemption keeps anonymous visitors off the login redirect. */
+export function useAuthenticatedUser(enabled = true) {
+  return useQuery<ICurrentUser>({
+    queryKey: ["currentUser"],
+    queryFn: getMyInfo,
+    retry: false,
+    staleTime: 5 * 60 * 1000,
+    enabled,
+  });
+}

apps/client/src/features/public-space/hooks/use-docs-current-page.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { flattenTreePreorder } from "@/features/public-space/utils/docs-tree.ts";
+import { extractPageSlugId } from "@/lib";
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+
+export function useDocsCurrentPage(): SharedPageTreeNode | null {
+  const { pageSlug } = useParams();
+  const { treeData } = useDocsSurface();
+
+  return useMemo(() => {
+    if (!treeData?.length) return null;
+    const currentSlugId = pageSlug
+      ? extractPageSlugId(pageSlug)
+      : treeData[0]?.slugId;
+    return (
+      flattenTreePreorder(treeData).find(
+        (node) => node.slugId === currentSlugId,
+      ) ?? null
+    );
+  }, [treeData, pageSlug]);
+}

apps/client/src/features/public-space/queries/public-space-query.ts

@@ -0,0 +1,109 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import {
+  getPublicSpaceDirectory,
+  getPublicSpaceForSpace,
+  getPublicSpacePage,
+  getPublicSpaceTree,
+  getPublishedSpaces,
+  publishSpace,
+} from "@/features/public-space/services/public-space-service.ts";
+import {
+  IPublicSpace,
+  IPublicSpaceDirectory,
+  IPublicSpacePage,
+  IPublicSpaceTree,
+  IPublishedSpaceItem,
+  IPublishSpace,
+} from "@/features/public-space/types/public-space.types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+
+export function usePublicSpaceTreeQuery(
+  spaceSlug: string,
+): UseQueryResult<IPublicSpaceTree, Error> {
+  return useQuery({
+    queryKey: ["public-space-tree", spaceSlug],
+    queryFn: () => getPublicSpaceTree(spaceSlug),
+    enabled: !!spaceSlug,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 60 * 1000,
+  });
+}
+
+export function usePublicSpacePageQuery(params: {
+  spaceSlug: string;
+  pageSlugId?: string;
+  contentless?: boolean;
+}): UseQueryResult<IPublicSpacePage, Error> {
+  return useQuery({
+    queryKey: ["public-space-page", params],
+    queryFn: () => getPublicSpacePage(params),
+    enabled: !!params.spaceSlug,
+  });
+}
+
+export function usePublicSpaceDirectoryQuery(): UseQueryResult<
+  IPublicSpaceDirectory,
+  Error
+> {
+  return useQuery({
+    queryKey: ["public-space-directory"],
+    queryFn: () => getPublicSpaceDirectory(),
+  });
+}
+
+export function usePublicSpaceForSpaceQuery(
+  spaceId: string,
+): UseQueryResult<IPublicSpace | null, Error> {
+  return useQuery({
+    queryKey: ["public-space-for-space", spaceId],
+    queryFn: () => getPublicSpaceForSpace(spaceId),
+    enabled: !!spaceId,
+    staleTime: 60 * 1000,
+    retry: false,
+  });
+}
+
+export function usePublishedSpacesQuery(
+  params?: QueryParams,
+): UseQueryResult<IPagination<IPublishedSpaceItem>, Error> {
+  return useQuery({
+    queryKey: ["published-spaces", params],
+    queryFn: () => getPublishedSpaces(params),
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function usePublishSpaceMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<IPublicSpace, Error, IPublishSpace>({
+    mutationFn: (data) => publishSpace(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          [
+            "public-space-for-space",
+            "published-spaces",
+            "space",
+            "spaces",
+          ].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      notifications.show({
+        message:
+          error?.["response"]?.data?.message || t("Failed to update space"),
+        color: "red",
+      });
+    },
+  });
+}

apps/client/src/features/public-space/services/public-space-service.ts

@@ -0,0 +1,73 @@
+import api from "@/lib/api-client";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import {
+  IPublicSpace,
+  IPublicSpaceDirectory,
+  IPublicSpaceInfo,
+  IPublicSpacePage,
+  IPublicSpaceTree,
+  IPublishedSpaceItem,
+  IPublishSpace,
+} from "@/features/public-space/types/public-space.types.ts";
+
+export async function getPublishedSpaces(
+  params?: QueryParams,
+): Promise<IPagination<IPublishedSpaceItem>> {
+  const req = await api.post<IPagination<IPublishedSpaceItem>>(
+    "/public-spaces",
+    params,
+  );
+  return req.data;
+}
+
+export async function getPublicSpaceInfo(
+  spaceSlug: string,
+): Promise<IPublicSpaceInfo> {
+  const req = await api.post<IPublicSpaceInfo>("/public-spaces/info", {
+    spaceSlug,
+  });
+  return req.data;
+}
+
+export async function getPublicSpaceTree(
+  spaceSlug: string,
+): Promise<IPublicSpaceTree> {
+  const req = await api.post<IPublicSpaceTree>("/public-spaces/tree", {
+    spaceSlug,
+  });
+  return req.data;
+}
+
+export async function getPublicSpacePage(params: {
+  spaceSlug: string;
+  pageSlugId?: string;
+  contentless?: boolean;
+}): Promise<IPublicSpacePage> {
+  const req = await api.post<IPublicSpacePage>(
+    "/public-spaces/page-info",
+    params,
+  );
+  return req.data;
+}
+
+export async function getPublicSpaceDirectory(): Promise<IPublicSpaceDirectory> {
+  const req = await api.post<IPublicSpaceDirectory>(
+    "/public-spaces/directory",
+    {},
+  );
+  return req.data;
+}
+
+export async function getPublicSpaceForSpace(
+  spaceId: string,
+): Promise<IPublicSpace | null> {
+  const req = await api.post<IPublicSpace | null>("/public-spaces/for-space", {
+    spaceId,
+  });
+  return req.data;
+}
+
+export async function publishSpace(data: IPublishSpace): Promise<IPublicSpace> {
+  const req = await api.post<IPublicSpace>("/public-spaces/publish", data);
+  return req.data;
+}

apps/client/src/features/public-space/theme/docs-theme.ts

@@ -0,0 +1,91 @@
+import { useEffect } from "react";
+import { useComputedColorScheme } from "@mantine/core";
+import { IPublicSpaceAppearance } from "@/features/public-space/types/public-space.types.ts";
+
+export type DocsThemePreset = {
+  id: string;
+  nameKey: string;
+  light: string;
+  dark: string;
+};
+
+export const DOCS_THEME_PRESETS: DocsThemePreset[] = [
+  { id: "default", nameKey: "Default", light: "#2b7af1", dark: "#6ea6f6" },
+  { id: "forest", nameKey: "Forest", light: "#0f766e", dark: "#2dd4bf" },
+  { id: "violet", nameKey: "Violet", light: "#6d28d9", dark: "#a78bfa" },
+  { id: "ember", nameKey: "Ember", light: "#c2410c", dark: "#fb923c" },
+  { id: "rose", nameKey: "Rose", light: "#be123c", dark: "#fb7185" },
+];
+
+export const DEFAULT_DOCS_PRESET = DOCS_THEME_PRESETS[0];
+
+const HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
+
+export function isValidDocsColor(value: unknown): value is string {
+  return typeof value === "string" && HEX_COLOR_REGEX.test(value);
+}
+
+export function resolveDocsAccent(
+  appearance: IPublicSpaceAppearance | undefined,
+  scheme: "light" | "dark",
+): string {
+  const custom =
+    scheme === "dark"
+      ? appearance?.primaryColorDark
+      : appearance?.primaryColorLight;
+  if (isValidDocsColor(custom)) return custom;
+  return scheme === "dark"
+    ? DEFAULT_DOCS_PRESET.dark
+    : DEFAULT_DOCS_PRESET.light;
+}
+
+export function matchDocsPreset(
+  appearance: IPublicSpaceAppearance | undefined,
+): DocsThemePreset | null {
+  const light = appearance?.primaryColorLight;
+  const dark = appearance?.primaryColorDark;
+  if (!light && !dark) return DEFAULT_DOCS_PRESET;
+  return (
+    DOCS_THEME_PRESETS.find(
+      (preset) =>
+        preset.light.toLowerCase() === light?.toLowerCase() &&
+        preset.dark.toLowerCase() === dark?.toLowerCase(),
+    ) ?? null
+  );
+}
+
+// Set on documentElement (not the shell root) so portaled Mantine surfaces on
+// /docs routes (spotlight, drawers) follow the space accent too.
+const ACCENT_VARIABLES = (accent: string): Record<string, string> => ({
+  "--docs-accent": accent,
+  "--docs-accent-soft": `color-mix(in srgb, ${accent} 10%, transparent)`,
+  "--mantine-primary-color-filled": accent,
+  "--mantine-primary-color-filled-hover": `color-mix(in srgb, ${accent} 85%, black)`,
+  "--mantine-primary-color-light": `color-mix(in srgb, ${accent} 10%, transparent)`,
+  "--mantine-primary-color-light-hover": `color-mix(in srgb, ${accent} 15%, transparent)`,
+  "--mantine-primary-color-light-color": accent,
+  "--mantine-color-anchor": accent,
+});
+
+export function useDocsAccent(appearance: IPublicSpaceAppearance | undefined) {
+  const scheme = useComputedColorScheme("light");
+  const light = appearance?.primaryColorLight;
+  const dark = appearance?.primaryColorDark;
+
+  useEffect(() => {
+    const accent = resolveDocsAccent(
+      { primaryColorLight: light, primaryColorDark: dark },
+      scheme,
+    );
+    const root = document.documentElement;
+    const variables = ACCENT_VARIABLES(accent);
+    for (const [name, value] of Object.entries(variables)) {
+      root.style.setProperty(name, value);
+    }
+    return () => {
+      for (const name of Object.keys(variables)) {
+        root.style.removeProperty(name);
+      }
+    };
+  }, [light, dark, scheme]);
+}

apps/client/src/features/public-space/types/public-space.types.ts

@@ -0,0 +1,105 @@
+import { IPage } from "@/features/page/types/page.types.ts";
+
+export interface IPublicSpaceSummary {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string;
+  logo?: string;
+}
+
+export interface IPublicSpaceAppearance {
+  primaryColorLight?: string;
+  primaryColorDark?: string;
+}
+
+export interface IPublicSpaceByline {
+  author: boolean;
+  updatedAt: boolean;
+}
+
+export interface IPublicSpaceInfo {
+  space: IPublicSpaceSummary;
+  searchIndexing: boolean;
+  appearance?: IPublicSpaceAppearance;
+  features?: string[];
+}
+
+export interface IPublicSpaceTree {
+  space: IPublicSpaceSummary;
+  pageTree: Partial<IPage[]>;
+  appearance?: IPublicSpaceAppearance;
+  features?: string[];
+}
+
+export interface IPublicSpacePage {
+  page: IPage | null;
+  space: IPublicSpaceSummary;
+  searchIndexing: boolean;
+  appearance?: IPublicSpaceAppearance;
+  byline?: IPublicSpaceByline;
+  features?: string[];
+}
+
+export interface IPublicSpace {
+  id: string;
+  spaceId: string;
+  workspaceId: string;
+  enabled: boolean;
+  searchIndexing: boolean;
+  settings?: {
+    appearance?: IPublicSpaceAppearance;
+    byline?: Partial<IPublicSpaceByline>;
+    directory?: boolean;
+  } | null;
+  creatorId?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface IPublishedSpaceItem {
+  id: string;
+  spaceId: string;
+  workspaceId: string;
+  searchIndexing: boolean;
+  settings?: IPublicSpace["settings"];
+  createdAt: string;
+  updatedAt: string;
+  space: {
+    id: string;
+    name: string;
+    slug: string;
+    logo?: string;
+    userRole: string;
+  };
+  creator: {
+    id: string;
+    name: string;
+    avatarUrl: string | null;
+  };
+}
+
+export interface IPublishSpace {
+  spaceId: string;
+  enabled: boolean;
+  searchIndexing?: boolean;
+  appearance?: {
+    primaryColorLight?: string | null;
+    primaryColorDark?: string | null;
+  };
+  bylineAuthor?: boolean;
+  bylineUpdatedAt?: boolean;
+  directory?: boolean;
+}
+
+export interface IPublicSpaceDirectoryEntry {
+  name: string;
+  slug: string;
+  description?: string;
+  logo?: string;
+}
+
+export interface IPublicSpaceDirectory {
+  spaces: IPublicSpaceDirectoryEntry[];
+  features?: string[];
+}

apps/client/src/features/public-space/utils/docs-tree.ts

@@ -0,0 +1,39 @@
+import { SharedPageTreeNode } from "@/features/share/utils.ts";
+
+// Preorder walk of the whole tree, matching the sidebar's visual order. Drives
+// prev/next navigation independently of which nodes are expanded.
+export function flattenTreePreorder(
+  nodes: SharedPageTreeNode[],
+): SharedPageTreeNode[] {
+  const out: SharedPageTreeNode[] = [];
+  const walk = (list: SharedPageTreeNode[]) => {
+    for (const node of list) {
+      out.push(node);
+      if (node.children?.length) walk(node.children);
+    }
+  };
+  walk(nodes);
+  return out;
+}
+
+// Ancestors of the node with the given slugId, root-first, excluding the node
+// itself. Null when the slugId is not in the tree.
+export function findAncestorTrail(
+  nodes: SharedPageTreeNode[],
+  slugId: string,
+): SharedPageTreeNode[] | null {
+  const walk = (
+    list: SharedPageTreeNode[],
+    trail: SharedPageTreeNode[],
+  ): SharedPageTreeNode[] | null => {
+    for (const node of list) {
+      if (node.slugId === slugId) return trail;
+      if (node.children?.length) {
+        const found = walk(node.children, [...trail, node]);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return walk(nodes, []);
+}

apps/client/src/features/public-space/utils/public-space-access.ts

@@ -0,0 +1,8 @@
+import { isBetaPublicSpaces } from "@/lib/config.ts";
+import { IWorkspace } from "@/features/workspace/types/workspace.types.ts";
+
+export function isPublicSpacesAllowed(workspace?: IWorkspace): boolean {
+  return (
+    isBetaPublicSpaces() && workspace?.settings?.publicSpaces?.enabled === true
+  );
+}

apps/client/src/features/search/components/public-space-search-spotlight.tsx

@@ -0,0 +1,112 @@
+import { Group, Center, Text, Button } from "@mantine/core";
+import { Spotlight } from "@mantine/spotlight";
+import { IconLetterCase, IconSearch } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useDebouncedValue } from "@mantine/hooks";
+import { usePublicSpaceSearchQuery } from "@/features/search/queries/search-query";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { getPageIcon } from "@/lib";
+import { useTranslation } from "react-i18next";
+import { publicSpaceSearchSpotlightStore } from "@/features/search/constants.ts";
+import DOMPurify from "dompurify";
+
+interface PublicSpaceSearchSpotlightProps {
+  spaceSlug: string;
+}
+export function PublicSpaceSearchSpotlight({
+  spaceSlug,
+}: PublicSpaceSearchSpotlightProps) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const [titleOnly, setTitleOnly] = useState(false);
+  const [debouncedSearchQuery] = useDebouncedValue(query, 300);
+
+  const { data: searchResults } = usePublicSpaceSearchQuery({
+    query: debouncedSearchQuery,
+    spaceSlug,
+    ...(titleOnly && { titleOnly: true }),
+  });
+
+  const pages = (
+    searchResults && searchResults.length > 0 ? searchResults : []
+  ).map((page) => (
+    <Spotlight.Action
+      key={page.id}
+      component={Link}
+      //@ts-ignore
+      to={buildPublicSpaceUrl({
+        spaceSlug: spaceSlug,
+        pageTitle: page.title,
+        pageSlugId: page.slugId,
+      })}
+      style={{ userSelect: "none" }}
+    >
+      <Group wrap="nowrap" w="100%">
+        <Center>{getPageIcon(page?.icon)}</Center>
+
+        <div style={{ flex: 1 }}>
+          <Text>{page.title}</Text>
+
+          {page?.highlight && (
+            <Text
+              opacity={0.6}
+              size="xs"
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(page.highlight, {
+                  ALLOWED_TAGS: ["mark", "em", "strong", "b"],
+                  ALLOWED_ATTR: [],
+                }),
+              }}
+            />
+          )}
+        </div>
+      </Group>
+    </Spotlight.Action>
+  ));
+
+  return (
+    <>
+      <Spotlight.Root
+        store={publicSpaceSearchSpotlightStore}
+        query={query}
+        onQueryChange={setQuery}
+        scrollable
+        overlayProps={{
+          backgroundOpacity: 0.55,
+        }}
+      >
+        <Spotlight.Search
+          placeholder={t("Search...")}
+          aria-label={t("Search")}
+          leftSection={<IconSearch size={20} stroke={1.5} />}
+        />
+        <Group px="sm" py={6}>
+          <Button
+            variant={titleOnly ? "light" : "subtle"}
+            color={titleOnly ? undefined : "gray"}
+            size="compact-sm"
+            radius="xl"
+            fw={500}
+            leftSection={<IconLetterCase size={15} />}
+            aria-pressed={titleOnly}
+            onClick={() => setTitleOnly((value) => !value)}
+          >
+            {t("Title only")}
+          </Button>
+        </Group>
+        <Spotlight.ActionsList>
+          {query.length === 0 && pages.length === 0 && (
+            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
+          )}
+
+          {query.length > 0 && pages.length === 0 && (
+            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
+          )}
+
+          {pages.length > 0 && pages}
+        </Spotlight.ActionsList>
+      </Spotlight.Root>
+    </>
+  );
+}

apps/client/src/features/search/constants.ts

@@ -5,3 +5,6 @@ export const [searchSpotlightStore, searchSpotlight] = createSpotlight();
 export const [shareSearchSpotlightStore, shareSearchSpotlight] =
   createSpotlight();
 
+export const [publicSpaceSearchSpotlightStore, publicSpaceSearchSpotlight] =
+  createSpotlight();
+

apps/client/src/features/search/queries/search-query.ts

@@ -2,6 +2,7 @@ import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-quer
 import {
   searchAttachments,
   searchPage,
+  searchPublicSpace,
   searchShare,
   searchSuggestions,
 } from '@/features/search/services/search-service';
@@ -55,3 +56,13 @@ export function useAttachmentSearchQuery(
     enabled: !!params.query,
   });
 }
+
+export function usePublicSpaceSearchQuery(
+  params: IPageSearchParams & { spaceSlug: string },
+): UseQueryResult<IPageSearch[], Error> {
+  return useQuery({
+    queryKey: ["public-space-search", params],
+    queryFn: () => searchPublicSpace(params),
+    enabled: !!params.query && !!params.spaceSlug,
+  });
+}

apps/client/src/features/search/services/search-service.ts

@@ -28,6 +28,16 @@ export async function searchShare(
   return req.data.items;
 }
 
+export async function searchPublicSpace(
+  params: IPageSearchParams & { spaceSlug: string },
+): Promise<IPageSearch[]> {
+  const req = await api.post<{ items: IPageSearch[] }>(
+    "/search/public-space-search",
+    params,
+  );
+  return req.data.items;
+}
+
 export async function searchAttachments(
   params: IPageSearchParams,
 ): Promise<IAttachmentSearch[]> {

apps/client/src/features/share/atoms/open-shared-tree-nodes-atom.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const openSharedTreeNodesAtom = atom<Record<string, boolean>>({});

apps/client/src/features/share/atoms/shared-page-atom.ts

@@ -1,11 +1,10 @@
 import { atom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { ISharedPageTree } from "@/features/share/types/share.types";
 import { SharedPageTreeNode } from "@/features/share/utils";
 
-export const sharedPageTreeAtom = atom<ISharedPageTree | null>(null);
-export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
-export const sharedPageFullWidthAtom = atomWithStorage<boolean>(
-  "sharedPageFullWidth",
-  false,
-);
+export const sharedPageTreeAtom = atom<ISharedPageTree | null>(
+  null as ISharedPageTree | null,
+);
+export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(
+  null as SharedPageTreeNode[] | null,
+);

apps/client/src/features/share/atoms/sidebar-atom.ts

@@ -1,9 +0,0 @@
-import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
-import { atom } from 'jotai';
-
-export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
-  "showTOC",
-  true,
-);
-
-export const mobileTableOfContentAsideAtom = atom<boolean>(false);

apps/client/src/features/share/components/share-branding.tsx

@@ -1,16 +0,0 @@
-import { Affix, Button } from "@mantine/core";
-
-export default function ShareBranding() {
-  return (
-    <Affix position={{ bottom: 20, right: 20 }}>
-      <Button
-        variant="default"
-        component="a"
-        target="_blank"
-        href="https://docmost.com?ref=public-share"
-      >
-        Powered by Docmost
-      </Button>
-    </Affix>
-  );
-}

apps/client/src/features/share/components/share-layout.tsx

@@ -1,10 +1,67 @@
-import { Outlet } from "react-router-dom";
-import ShareShell from "@/features/share/components/share-shell.tsx";
+import "@fontsource-variable/inter";
+import "@/styles/public-typography.css";
+import { useEffect, useMemo } from "react";
+import { Outlet, useParams } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
+import { buildSharedPageTree } from "@/features/share/utils.ts";
+import {
+  sharedPageTreeAtom,
+  sharedTreeDataAtom,
+} from "@/features/share/atoms/shared-page-atom.ts";
+import DocsShell from "@/features/public-space/components/docs/docs-shell.tsx";
+import { DocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
+import { useDocsAccent } from "@/features/public-space/theme/docs-theme.ts";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
+import { shareSearchSpotlight } from "@/features/search/constants";
 
 export default function ShareLayout() {
+  const { shareId } = useParams();
+  const { data } = useGetSharedPageTreeQuery(shareId);
+
+  // Shares have no appearance settings; apply the default docs accent.
+  useDocsAccent(undefined);
+
+  const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
+  const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
+
+  const treeData = useMemo(() => {
+    if (!data?.pageTree) return null;
+    return buildSharedPageTree(data.pageTree);
+  }, [data?.pageTree]);
+
+  useEffect(() => {
+    setSharedPageTree(data || null);
+    setSharedTreeData(treeData);
+  }, [data, treeData, setSharedPageTree, setSharedTreeData]);
+
+  const surface = useMemo<DocsSurface>(
+    () => ({
+      treeData,
+      hasSidebar: (data?.pageTree?.length ?? 0) > 1,
+      getNodeUrl: (node) =>
+        buildSharedPageUrl({
+          shareId,
+          pageSlugId: node.slugId,
+          pageTitle: node.name,
+        }),
+      showBranding: Boolean(data),
+      showEditPage: true,
+      brandingRef: "public-share",
+    }),
+    [data, treeData, shareId],
+  );
+
   return (
-    <ShareShell>
+    <DocsShell
+      surface={surface}
+      onSearchOpen={shareId ? shareSearchSpotlight.open : undefined}
+      searchSpotlight={
+        shareId ? <ShareSearchSpotlight shareId={shareId} /> : undefined
+      }
+    >
       <Outlet />
-    </ShareShell>
+    </DocsShell>
   );
 }

apps/client/src/features/share/components/share-shell.tsx

@@ -1,272 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  ActionIcon,
-  AppShell,
-  Group,
-  ScrollArea,
-  Tooltip,
-} from "@mantine/core";
-import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
-import { useParams } from "react-router-dom";
-import SharedTree from "@/features/share/components/shared-tree.tsx";
-import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
-import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
-import { ThemeToggle } from "@/components/theme-toggle.tsx";
-import { useAtomValue, useSetAtom } from "jotai";
-import { useAtom } from "jotai";
-import {
-  sharedPageFullWidthAtom,
-  sharedPageTreeAtom,
-  sharedTreeDataAtom,
-} from "@/features/share/atoms/shared-page-atom";
-import { buildSharedPageTree } from "@/features/share/utils";
-import {
-  desktopSidebarAtom,
-  mobileSidebarAtom,
-  sidebarWidthAtom,
-} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
-import { useTranslation } from "react-i18next";
-import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
-import {
-  mobileTableOfContentAsideAtom,
-  tableOfContentAsideAtom,
-} from "@/features/share/atoms/sidebar-atom.ts";
-import { IconArrowsHorizontal, IconList } from "@tabler/icons-react";
-import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
-import classes from "./share.module.css";
-import {
-  SearchControl,
-  SearchMobileControl,
-} from "@/features/search/components/search-control.tsx";
-import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
-import { shareSearchSpotlight } from "@/features/search/constants";
-import ShareBranding from '@/features/share/components/share-branding.tsx';
-import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
-
-const MemoizedSharedTree = React.memo(SharedTree);
-
-export default function ShareShell({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { t } = useTranslation();
-  const [mobileOpened] = useAtom(mobileSidebarAtom);
-  const [desktopOpened] = useAtom(desktopSidebarAtom);
-  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
-  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
-
-  const [tocOpened] = useAtom(tableOfContentAsideAtom);
-  const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
-  const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
-  const toggleToc = useToggleToc(tableOfContentAsideAtom);
-  const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
-  const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
-  const [isResizing, setIsResizing] = useState(false);
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  const startResizing = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsResizing(true);
-  }, []);
-
-  const stopResizing = useCallback(() => {
-    setIsResizing(false);
-  }, []);
-
-  const resize = useCallback(
-    (e: MouseEvent) => {
-      if (!isResizing || !sidebarRef.current) return;
-      const newWidth =
-        e.clientX - sidebarRef.current.getBoundingClientRect().left;
-      if (newWidth < 220) {
-        setSidebarWidth(220);
-        return;
-      }
-      if (newWidth > 600) {
-        setSidebarWidth(600);
-        return;
-      }
-      setSidebarWidth(newWidth);
-    },
-    [isResizing, setSidebarWidth],
-  );
-
-  useEffect(() => {
-    window.addEventListener("mousemove", resize);
-    window.addEventListener("mouseup", stopResizing);
-    return () => {
-      window.removeEventListener("mousemove", resize);
-      window.removeEventListener("mouseup", stopResizing);
-    };
-  }, [resize, stopResizing]);
-
-  const { shareId } = useParams();
-  const { data } = useGetSharedPageTreeQuery(shareId);
-  const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
-
-  // @ts-ignore
-  const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
-  // @ts-ignore
-  const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
-
-  // Build and set the tree data when it changes
-  const treeData = useMemo(() => {
-    if (!data?.pageTree) return null;
-    return buildSharedPageTree(data.pageTree);
-  }, [data?.pageTree]);
-
-  useEffect(() => {
-    setSharedPageTree(data || null);
-    setSharedTreeData(treeData);
-  }, [data, treeData, setSharedPageTree, setSharedTreeData]);
-
-  return (
-    <>
-      <SkipToMain />
-      <AppShell
-      header={{ height: 50 }}
-      {...(data?.pageTree?.length > 1 && {
-        navbar: {
-          width: sidebarWidth,
-          breakpoint: "sm",
-          collapsed: {
-            mobile: !mobileOpened,
-            desktop: !desktopOpened,
-          },
-        },
-      })}
-      aside={{
-        width: 300,
-        breakpoint: "sm",
-        collapsed: {
-          mobile: !mobileTocOpened,
-          desktop: !tocOpened,
-        },
-      }}
-      padding="md"
-    >
-      <AppShell.Header>
-        <Group wrap="nowrap" justify="space-between" py="sm" px="xl">
-          <Group wrap="nowrap">
-            {data?.pageTree?.length > 1 && (
-              <>
-                <Tooltip label={t("Sidebar toggle")}>
-                  <SidebarToggle
-                    aria-label={t("Sidebar toggle")}
-                    opened={mobileOpened}
-                    onClick={toggleMobile}
-                    hiddenFrom="sm"
-                    size="sm"
-                  />
-                </Tooltip>
-
-                <Tooltip label={t("Sidebar toggle")}>
-                  <SidebarToggle
-                    aria-label={t("Sidebar toggle")}
-                    opened={desktopOpened}
-                    onClick={toggleDesktop}
-                    visibleFrom="sm"
-                    size="sm"
-                  />
-                </Tooltip>
-              </>
-            )}
-          </Group>
-
-          {shareId && (
-            <Group visibleFrom="sm">
-              <SearchControl onClick={shareSearchSpotlight.open} />
-            </Group>
-          )}
-
-          <Group>
-            <>
-              {shareId && (
-                <Group hiddenFrom="sm">
-                  <SearchMobileControl onSearch={shareSearchSpotlight.open} />
-                </Group>
-              )}
-
-              <Tooltip label={t("Table of contents")} withArrow>
-                <ActionIcon
-                  variant="default"
-                  style={{ border: "none" }}
-                  onClick={toggleTocMobile}
-                  hiddenFrom="sm"
-                  size="sm"
-                  aria-label={t("Table of contents")}
-                >
-                  <IconList size={20} stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-
-              <Tooltip label={t("Table of contents")} withArrow>
-                <ActionIcon
-                  variant="default"
-                  style={{ border: "none" }}
-                  aria-label={t("Table of contents")}
-                  onClick={toggleToc}
-                  visibleFrom="sm"
-                  size="sm"
-                >
-                  <IconList size={20} stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-
-              <Tooltip label={t("Full width")} withArrow>
-                <ActionIcon
-                  variant={fullWidth ? "light" : "default"}
-                  style={fullWidth ? undefined : { border: "none" }}
-                  aria-label={t("Full width")}
-                  aria-pressed={fullWidth}
-                  onClick={() => setFullWidth((v) => !v)}
-                  visibleFrom="sm"
-                  size="sm"
-                >
-                  <IconArrowsHorizontal size={20} stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            </>
-
-            <ThemeToggle />
-          </Group>
-        </Group>
-      </AppShell.Header>
-
-      {data?.pageTree?.length > 1 && (
-        <AppShell.Navbar p="md" className={classes.navbar} ref={sidebarRef}>
-          <div
-            className={classes.resizeHandle}
-            onMouseDown={startResizing}
-          />
-          <MemoizedSharedTree sharedPageTree={data} />
-        </AppShell.Navbar>
-      )}
-
-      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
-        {children}
-
-        {data && shareId && !(data.features?.length > 0) && <ShareBranding />}
-      </AppShell.Main>
-
-      <AppShell.Aside
-        p="md"
-        withBorder={mobileTocOpened}
-        className={classes.aside}
-      >
-        <ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
-          <div style={{ paddingBottom: "50px" }}>
-            {readOnlyEditor && (
-              <TableOfContents isShare={true} editor={readOnlyEditor} />
-            )}
-          </div>
-        </ScrollArea>
-      </AppShell.Aside>
-
-      <ShareSearchSpotlight shareId={shareId} />
-    </AppShell>
-    </>
-  );
-}

apps/client/src/features/share/components/share.module.css

@@ -6,39 +6,3 @@
     border-bottom: 0.05em solid var(--mantine-color-dark-2);
   }
 }
-
-.treeNode {
-  text-decoration: none;
-  user-select: none;
-  padding-bottom: 0;
-}
-
-.navbar,
-.aside {
-  @media (max-width: $mantine-breakpoint-sm) {
-    width: 350px;
-  }
-}
-
-.resizeHandle {
-  width: 3px;
-  cursor: col-resize;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-
-  &:hover,
-  &:active {
-    width: 5px;
-    background: light-dark(
-      var(--mantine-color-gray-4),
-      var(--mantine-color-dark-5)
-    );
-  }
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    display: none;
-  }
-}

apps/client/src/features/share/components/shared-tree.tsx

@@ -1,220 +0,0 @@
-import { ISharedPageTree } from "@/features/share/types/share.types.ts";
-import {
-  buildSharedPageTree,
-  SharedPageTreeNode,
-} from "@/features/share/utils.ts";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { Link, useParams } from "react-router-dom";
-import { useAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
-import clsx from "clsx";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFileDescription,
-  IconPointFilled,
-} from "@tabler/icons-react";
-import { ActionIcon, Box } from "@mantine/core";
-import { extractPageSlugId } from "@/lib";
-import classes from "@/features/page/tree/styles/tree.module.css";
-import styles from "./share.module.css";
-import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import {
-  DocTree,
-  type DocTreeApi,
-  type RenderRowProps,
-} from "@/features/page/tree/components/doc-tree";
-import { openSharedTreeNodesAtom } from "@/features/share/atoms/open-shared-tree-nodes-atom";
-
-interface SharedTreeProps {
-  sharedPageTree: ISharedPageTree;
-}
-
-export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
-  const { t } = useTranslation();
-  const treeRef = useRef<DocTreeApi | null>(null);
-  const { pageSlug } = useParams();
-  const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);
-
-  const currentNodeId = extractPageSlugId(pageSlug);
-
-  const treeData: SharedPageTreeNode[] = useMemo(() => {
-    if (!sharedPageTree?.pageTree) return [] as SharedPageTreeNode[];
-    return buildSharedPageTree(sharedPageTree.pageTree);
-  }, [sharedPageTree?.pageTree]);
-
-  const openIds = useMemo(
-    () =>
-      new Set(
-        Object.keys(openTreeNodes).filter((k) => openTreeNodes[k]),
-      ),
-    [openTreeNodes],
-  );
-
-  useEffect(() => {
-    // Auto-open the first level of the shared tree on initial load.
-    const root = treeData?.[0];
-    if (!root) return;
-    setOpenTreeNodes((prev) => {
-      if (prev[root.slugId]) return prev;
-      const next = { ...prev, [root.slugId]: true };
-      for (const child of root.children ?? []) {
-        next[child.slugId] = true;
-      }
-      return next;
-    });
-  }, [treeData, setOpenTreeNodes]);
-
-  useEffect(() => {
-    if (currentNodeId) {
-      treeRef.current?.select(currentNodeId, { scrollIntoView: true });
-    }
-  }, [currentNodeId, treeData]);
-
-  // Stable callbacks so memo(DocTreeRow) actually saves work — see I2 in the
-  // post-implementation code review.
-  const handleToggle = useCallback(
-    (id: string, isOpen: boolean) =>
-      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
-    [setOpenTreeNodes],
-  );
-  const getDragLabel = useCallback(
-    (n: SharedPageTreeNode) => n.name || "untitled",
-    [],
-  );
-
-  if (!sharedPageTree || !sharedPageTree?.pageTree) {
-    return null;
-  }
-
-  return (
-    <div className={classes.treeContainer}>
-      <DocTree<SharedPageTreeNode>
-        readOnly
-        ref={treeRef}
-        data={treeData}
-        openIds={openIds}
-        selectedId={currentNodeId}
-        renderRow={SharedTreeRow}
-        onMove={noopMove}
-        onToggle={handleToggle}
-        getDragLabel={getDragLabel}
-        aria-label={t("Pages")}
-      />
-    </div>
-  );
-}
-
-// Module-scope noop so it's a stable reference across renders.
-const noopMove = () => {};
-
-function SharedTreeRow({
-  node,
-  isOpen,
-  hasChildren,
-  isSelected,
-  rowRef,
-  tabIndex,
-  treeItemProps,
-  toggleOpen,
-}: RenderRowProps<SharedPageTreeNode>) {
-  const { shareId } = useParams();
-  const { t } = useTranslation();
-  const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
-
-  const pageUrl = buildSharedPageUrl({
-    shareId: shareId,
-    pageSlugId: node.slugId,
-    pageTitle: node.name,
-  });
-
-  return (
-    <Box
-      ref={rowRef as React.Ref<HTMLAnchorElement>}
-      tabIndex={tabIndex}
-      {...treeItemProps}
-      data-selected={isSelected || undefined}
-      className={clsx(classes.node, styles.treeNode)}
-      component={Link}
-      to={pageUrl}
-      onClick={() => {
-        setMobileSidebarState(false);
-      }}
-    >
-      <SharedPageArrow
-        isOpen={isOpen}
-        hasChildren={hasChildren}
-        onToggle={toggleOpen}
-      />
-      <div style={{ marginRight: "4px" }}>
-        <EmojiPicker
-          onEmojiSelect={() => {}}
-          icon={
-            node.icon ? (
-              node.icon
-            ) : (
-              <IconFileDescription size="18" />
-            )
-          }
-          readOnly={true}
-          removeEmojiAction={() => {}}
-          actionIconProps={{ tabIndex: -1 }}
-        />
-      </div>
-      <span className={classes.text}>{node.name || t("untitled")}</span>
-    </Box>
-  );
-}
-
-interface SharedPageArrowProps {
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
-}
-
-function SharedPageArrow({
-  isOpen,
-  hasChildren,
-  onToggle,
-}: SharedPageArrowProps) {
-  if (!hasChildren) {
-    return (
-      <span
-        aria-hidden
-        style={{
-          width: 20,
-          height: 20,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
-          flexShrink: 0,
-        }}
-      >
-        <IconPointFilled size={4} />
-      </span>
-    );
-  }
-
-  return (
-    <ActionIcon
-      size={20}
-      variant="subtle"
-      c="gray"
-      tabIndex={-1}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onToggle();
-      }}
-    >
-      {isOpen ? (
-        <IconChevronDown stroke={2} size={16} />
-      ) : (
-        <IconChevronRight stroke={2} size={16} />
-      )}
-    </ActionIcon>
-  );
-}

apps/client/src/features/share/hooks/use-shared-page-subpages.ts

@@ -1,29 +1,13 @@
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
 import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
-import { SharedPageTreeNode } from "@/features/share/utils";
+import { findSubpagesInTree } from "@/features/share/utils";
 
 export function useSharedPageSubpages(pageId: string | undefined) {
   const treeData = useAtomValue(sharedTreeDataAtom);
 
-  return useMemo(() => {
-    if (!treeData || !pageId) return [];
-
-    function findSubpages(nodes: SharedPageTreeNode[]): SharedPageTreeNode[] {
-      for (const node of nodes) {
-        if (node.value === pageId || node.slugId === pageId) {
-          return node.children || [];
-        }
-        if (node.children && node.children.length > 0) {
-          const subpages = findSubpages(node.children);
-          if (subpages.length > 0) {
-            return subpages;
-          }
-        }
-      }
-      return [];
-    }
-
-    return findSubpages(treeData);
-  }, [treeData, pageId]);
+  return useMemo(
+    () => findSubpagesInTree(treeData, pageId),
+    [treeData, pageId],
+  );
 }

apps/client/src/features/share/hooks/use-toggle-toc.ts

@@ -1,8 +0,0 @@
-import { useAtom } from "jotai";
-
-export function useToggleToc(tocAtom: any) {
-  const [tocState, setTocState] = useAtom(tocAtom);
-  return () => {
-    setTocState(!tocState);
-  }
-}

apps/client/src/features/share/utils.ts

@@ -68,6 +68,27 @@ export function buildSharedPageTree(
 }
 
 
+// Returns the children of the node matching the page id or slugId.
+export function findSubpagesInTree(
+  tree: SharedPageTreeNode[] | null | undefined,
+  pageId: string | undefined,
+): SharedPageTreeNode[] {
+  if (!tree || !pageId) return [];
+
+  for (const node of tree) {
+    if (node.value === pageId || node.slugId === pageId) {
+      return node.children || [];
+    }
+    if (node.children && node.children.length > 0) {
+      const subpages = findSubpagesInTree(node.children, pageId);
+      if (subpages.length > 0) {
+        return subpages;
+      }
+    }
+  }
+  return [];
+}
+
 // Recursively checks if a page exists in the shared page tree.
 export function isPageInTree(
   tree: SharedPageTreeNode[],

apps/client/src/features/space/components/settings-modal.tsx

@@ -4,6 +4,8 @@ import AddSpaceMembersModal from "@/features/space/components/add-space-members-
 import React from "react";
 import SpaceDetails from "@/features/space/components/space-details.tsx";
 import SpaceSecuritySettings from "@/features/space/components/space-security-settings.tsx";
+import PublishSpaceSettings from "@/features/public-space/components/publish-space-settings.tsx";
+import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
@@ -11,6 +13,8 @@ import {
   SpaceCaslSubject,
 } from "@/features/space/permissions/permissions.type.ts";
 import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
 interface SpaceSettingsModalProps {
   spaceId: string;
@@ -29,6 +33,13 @@ export default function SpaceSettingsModal({
   const spaceRules = space?.membership?.permissions;
   const spaceAbility = useSpaceAbility(spaceRules);
 
+  const [workspace] = useAtom(workspaceAtom);
+  const allowPublicSpaces = isPublicSpacesAllowed(workspace);
+  const canManageSettings = spaceAbility.can(
+    SpaceCaslAction.Manage,
+    SpaceCaslSubject.Settings,
+  );
+
   return (
     <>
       <Modal.Root
@@ -60,10 +71,12 @@ export default function SpaceSettingsModal({
                   <Tabs.Tab fw={500} value="members">
                     {t("Members")}
                   </Tabs.Tab>
-                  {spaceAbility.can(
-                    SpaceCaslAction.Manage,
-                    SpaceCaslSubject.Settings,
-                  ) && (
+                  {canManageSettings && allowPublicSpaces && (
+                    <Tabs.Tab fw={500} value="publish">
+                      {t("Publish")}
+                    </Tabs.Tab>
+                  )}
+                  {canManageSettings && (
                     <Tabs.Tab fw={500} value="security">
                       {t("Security")}
                     </Tabs.Tab>
@@ -114,6 +127,16 @@ export default function SpaceSettingsModal({
                     </div>
                   </ScrollArea>
                 </Tabs.Panel>
+
+                <Tabs.Panel value="publish">
+                  <ScrollArea h={580} scrollbarSize={5} pr={8}>
+                    <div style={{ paddingBottom: "100px" }}>
+                      {canManageSettings && allowPublicSpaces && (
+                        <PublishSpaceSettings space={space} />
+                      )}
+                    </div>
+                  </ScrollArea>
+                </Tabs.Panel>
               </Tabs>
             </div>
           </Modal.Body>

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -35,7 +35,7 @@ import clsx from "clsx";
 import { useDisclosure } from "@mantine/hooks";
 import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { getSpaceUrl } from "@/lib/config.ts";
+import { getSpaceUrl, isBetaPublicSpaces } from "@/lib/config.ts";
 import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
 import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
@@ -106,6 +106,7 @@ export function SpaceSidebar() {
               spaceName={space?.name}
               spaceSlug={space?.slug}
               spaceIcon={space?.logo}
+              isPublished={isBetaPublicSpaces() && space?.isPublished}
             />
           </Group>
         </div>

apps/client/src/features/space/components/sidebar/switch-space.tsx

@@ -2,24 +2,32 @@ import classes from "./switch-space.module.css";
 import { useNavigate } from "react-router-dom";
 import { SpaceSelect } from "./space-select";
 import { getSpaceUrl } from "@/lib/config";
-import { Button, Popover, Text } from "@mantine/core";
-import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { Button, Popover, Text, Tooltip } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconWorld,
+} from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 interface SwitchSpaceProps {
   spaceName: string;
   spaceSlug: string;
   spaceIcon?: string;
+  isPublished?: boolean;
 }
 
 export function SwitchSpace({
   spaceName,
   spaceSlug,
   spaceIcon,
+  isPublished,
 }: SwitchSpaceProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const [opened, { close, toggle }] = useDisclosure(false);
 
@@ -61,6 +69,16 @@ export function SwitchSpace({
           <Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
             {spaceName}
           </Text>
+
+          {isPublished && (
+            <Tooltip label={t("This space is public")}>
+              <IconWorld
+                size={14}
+                aria-label={t("This space is public")}
+                style={{ flexShrink: 0 }}
+              />
+            </Tooltip>
+          )}
         </Button>
       </Popover.Target>
       <Popover.Dropdown>

apps/client/src/features/space/types/space.types.ts

@@ -30,6 +30,7 @@ export interface ISpace {
   createdAt: Date;
   updatedAt: Date;
   memberCount?: number;
+  isPublished?: boolean;
   spaceId?: string;
   membership?: IMembership;
   settings?: ISpaceSettings;

apps/client/src/features/transclusion/services/transclusion-api.ts

@@ -19,6 +19,14 @@ export async function lookupTransclusionForShare(params: {
   return r.data;
 }
 
+export async function lookupTransclusionForPublicSpace(params: {
+  spaceSlug: string;
+  references: Array<{ sourcePageId: string; transclusionId: string }>;
+}): Promise<{ items: TransclusionLookup[] }> {
+  const r = await api.post("/public-spaces/transclusion/lookup", params);
+  return r.data;
+}
+
 export async function listReferences(params: {
   sourcePageId: string;
   transclusionId: string;

apps/client/src/features/workspace/components/settings/components/allow-public-spaces.tsx

@@ -0,0 +1,129 @@
+import { Group, Text, Switch } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+
+export default function AllowPublicSpaces() {
+  const { t } = useTranslation();
+  const [workspace] = useAtom(workspaceAtom);
+
+  return (
+    <>
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="md">{t("Allow public spaces")}</Text>
+          <Text size="sm" c="dimmed">
+            {t("Space admins can publish their spaces to the web.")}
+          </Text>
+        </div>
+
+        <AllowPublicSpacesToggle />
+      </Group>
+
+      {workspace?.settings?.publicSpaces?.enabled === true && (
+        <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+          <div>
+            <Text size="md">{t("Show public directory")}</Text>
+            <Text size="sm" c="dimmed">
+              {t("List published spaces at /docs for anyone to browse.")}
+            </Text>
+          </div>
+
+          <PublicSpacesDirectoryToggle />
+        </Group>
+      )}
+    </>
+  );
+}
+
+function PublicSpacesDirectoryToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(
+    workspace?.settings?.publicSpaces?.directory === true,
+  );
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        publicSpacesDirectory: value,
+      });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Switch
+      checked={checked}
+      onChange={handleChange}
+      aria-label={t("Toggle show public directory")}
+    />
+  );
+}
+
+function AllowPublicSpacesToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(
+    workspace?.settings?.publicSpaces?.enabled === true,
+  );
+
+  const applyChange = async (value: boolean) => {
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        allowPublicSpaces: value,
+      });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    modals.openConfirmModal({
+      title: value ? t("Allow public spaces") : t("Disable public spaces"),
+      children: (
+        <Text size="sm">
+          {value
+            ? t(
+                "Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?",
+              )
+            : t(
+                "This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?",
+              )}
+        </Text>
+      ),
+      centered: true,
+      labels: {
+        confirm: value ? t("Allow") : t("Disable"),
+        cancel: t("Cancel"),
+      },
+      confirmProps: value ? undefined : { color: "red" },
+      onConfirm: () => applyChange(value),
+    });
+  };
+
+  return (
+    <Switch
+      checked={checked}
+      onChange={handleChange}
+      aria-label={t("Toggle allow public spaces")}
+    />
+  );
+}

apps/client/src/features/workspace/types/workspace.types.ts

@@ -24,6 +24,8 @@ export interface IWorkspace {
   aiSearch?: boolean;
   generativeAi?: boolean;
   disablePublicSharing?: boolean;
+  allowPublicSpaces?: boolean;
+  publicSpacesDirectory?: boolean;
   mcpEnabled?: boolean;
   aiChatReadOnly?: boolean;
   aiChatWorkspaceKnowledgeOnly?: boolean;
@@ -42,6 +44,7 @@ export interface IWorkspaceSettings {
   api?: IWorkspaceApiSettings;
   templates?: IWorkspaceTemplateSettings;
   spaces?: IWorkspaceSpaceSettings;
+  publicSpaces?: IWorkspacePublicSpacesSettings;
   defaultPageEditMode?: string;
 }
 
@@ -71,6 +74,11 @@ export interface IWorkspaceSpaceSettings {
   allowPersonal?: boolean;
 }
 
+export interface IWorkspacePublicSpacesSettings {
+  enabled?: boolean;
+  directory?: boolean;
+}
+
 export interface ICreateInvite {
   role: string;
   emails: string[];

apps/client/src/lib/api-client.ts

@@ -32,6 +32,13 @@ api.interceptors.response.use(
           const url = new URL(error.request.responseURL)?.pathname;
           if (url === "/api/auth/collab-token") return;
           if (window.location.pathname.startsWith("/share/")) return;
+          // public docs probe authed endpoints; reject without the login redirect
+          if (
+            window.location.pathname === "/docs" ||
+            window.location.pathname.startsWith("/docs/")
+          ) {
+            break;
+          }
 
           // Handle unauthorized error
           redirectToLogin();

apps/client/src/lib/config.ts

@@ -43,6 +43,10 @@ export function isCloud(): boolean {
   return castToBoolean(getConfigValue("CLOUD"));
 }
 
+export function isBetaPublicSpaces(): boolean {
+  return castToBoolean(getConfigValue("BETA_PUBLIC_SPACES"));
+}
+
 export function getAiVectorDriver(): string {
   return getConfigValue("AI_VECTOR_DRIVER");
 }

apps/client/src/pages/public-space/public-space-directory-page.tsx

@@ -0,0 +1,235 @@
+import "@fontsource-variable/inter";
+import "@/styles/public-typography.css";
+import { useMemo, useState } from "react";
+import { Skeleton } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import clsx from "clsx";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { IconSearch } from "@tabler/icons-react";
+import { usePublicSpaceDirectoryQuery } from "@/features/public-space/queries/public-space-query.ts";
+import { useAuthenticatedUser } from "@/features/public-space/hooks/use-authenticated-user.ts";
+import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
+import { getAvatarUrl } from "@/lib/config.ts";
+import { Error404 } from "@/components/ui/error-404.tsx";
+import { DocumentTitle } from "@/components/ui/document-title.tsx";
+import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import styles from "@/features/public-space/components/docs/docs-hub.module.css";
+
+const TILE_COLORS = [
+  "#1f9d55",
+  "#2b4bd6",
+  "#7c3aed",
+  "#0e7490",
+  "#d9480f",
+  "#b42318",
+  "#a16207",
+  "#475569",
+  "#be185d",
+  "#0f766e",
+  "#4338ca",
+  "#65a30d",
+];
+
+function getInitials(name: string) {
+  return name
+    .split(/[\s&]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+}
+
+export default function PublicSpaceDirectoryPage() {
+  const { t } = useTranslation();
+  const { data, isLoading, isError, error } = usePublicSpaceDirectoryQuery();
+  const { data: currentUser } = useAuthenticatedUser();
+  const isMobile = useMediaQuery("(max-width: 48em)");
+  const [query, setQuery] = useState("");
+
+  const spaces = useMemo(() => {
+    const all = (data?.spaces ?? []).map((space, index) => ({
+      ...space,
+      color: TILE_COLORS[index % TILE_COLORS.length],
+      initials: getInitials(space.name),
+    }));
+    const needle = query.trim().toLowerCase();
+    if (!needle) return all;
+    return all.filter(
+      (space) =>
+        space.name.toLowerCase().includes(needle) ||
+        space.description?.toLowerCase().includes(needle),
+    );
+  }, [data?.spaces, query]);
+
+  if (isError) {
+    if ([401, 403, 404].includes(error?.["response"]?.status)) {
+      return <Error404 />;
+    }
+    return <div>{t("Error fetching page data.")}</div>;
+  }
+
+  const total = data?.spaces.length ?? 0;
+  const title = t("Documentation");
+  const searchLabel = isMobile ? t("Search...") : t("Search documentation...");
+
+  return (
+    <div className={clsx(styles.root, "public-typography")}>
+      <SkipToMain />
+
+      <DocumentTitle title={title} withAppName={false} />
+
+      <div className={styles.topBar}>
+        <div className={clsx(styles.container, styles.topBarInner)}>
+          <Link to="/docs" className={styles.brand}>
+            <span className={styles.brandTile} aria-hidden>
+              {title.charAt(0).toUpperCase()}
+            </span>
+            <span>{title}</span>
+          </Link>
+
+          <div className={styles.topActions}>
+            {currentUser?.user ? (
+              <Link to="/home" className={styles.signIn}>
+                {t("Open app")}
+              </Link>
+            ) : (
+              <Link to="/login" className={styles.signIn}>
+                {t("Sign in")}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <header className={styles.hero}>
+        <div className={clsx(styles.container, styles.heroInner)}>
+          <h1 className={styles.heading}>
+            {t("Welcome to our documentation")}
+          </h1>
+          <p className={styles.subtitle}>
+            {isMobile
+              ? t("Guides, references and answers across all our spaces.")
+              : t(
+                  "Guides, references and answers across all our published spaces.",
+                )}
+          </p>
+
+          <form
+            className={styles.search}
+            role="search"
+            onSubmit={(event) => event.preventDefault()}
+          >
+            <input
+              type="search"
+              className={styles.searchInput}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={searchLabel}
+              aria-label={searchLabel}
+            />
+            <button
+              type="submit"
+              className={styles.searchButton}
+              aria-label={t("Search")}
+            >
+              <IconSearch size={isMobile ? 16 : 18} stroke={2.4} aria-hidden />
+            </button>
+          </form>
+        </div>
+      </header>
+
+      <main id={MAIN_CONTENT_ID} tabIndex={-1} className={styles.main}>
+        <div className={clsx(styles.container, styles.mainInner)}>
+          <div className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>{t("Spaces")}</h2>
+            {!isLoading && (
+              <span className={styles.sectionCount}>
+                {total === 1
+                  ? t("1 published space")
+                  : t("{{count}} published spaces", { count: total })}
+              </span>
+            )}
+          </div>
+
+          {isLoading && (
+            <div className={styles.grid} aria-hidden>
+              <Skeleton height={220} radius={14} />
+              <Skeleton height={220} radius={14} />
+              <Skeleton height={220} radius={14} />
+              <Skeleton height={220} radius={14} />
+            </div>
+          )}
+
+          {!isLoading && total === 0 && (
+            <p className={styles.empty}>{t("No public spaces yet.")}</p>
+          )}
+
+          {!isLoading && total > 0 && spaces.length === 0 && (
+            <p className={styles.empty}>
+              {t("No spaces match your search.")}
+            </p>
+          )}
+
+          {spaces.length > 0 && (
+            <div className={styles.grid}>
+              {spaces.map((space) => {
+                const logoUrl = getAvatarUrl(
+                  space.logo,
+                  AvatarIconType.SPACE_ICON,
+                );
+                return (
+                  <Link
+                    key={space.slug}
+                    to={buildPublicSpaceUrl({ spaceSlug: space.slug })}
+                    className={styles.card}
+                  >
+                    <span className={styles.cardHeader}>
+                      <span
+                        className={styles.cardTile}
+                        style={{ backgroundColor: space.color }}
+                        aria-hidden
+                      >
+                        {logoUrl ? (
+                          <img src={logoUrl} alt="" />
+                        ) : (
+                          space.initials
+                        )}
+                      </span>
+                      <span className={styles.cardName}>{space.name}</span>
+                    </span>
+                    {space.description && (
+                      <span className={styles.cardDescription}>
+                        {space.description}
+                      </span>
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </main>
+
+      {data && (
+        <footer className={styles.footer}>
+          <div className={clsx(styles.container, styles.footerInner)}>
+            <div>
+              Powered by{" "}
+              <a
+                className={styles.footerBranding}
+                href="https://docmost.com?ref=public-space"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Docmost
+              </a>
+            </div>
+          </div>
+        </footer>
+      )}
+    </div>
+  );
+}

apps/client/src/pages/public-space/public-space-page.tsx

@@ -0,0 +1,125 @@
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Skeleton, Stack, Text } from "@mantine/core";
+import React from "react";
+import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
+import { extractPageSlugId } from "@/lib";
+import { Error404 } from "@/components/ui/error-404.tsx";
+import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
+import { DocumentTitle } from "@/components/ui/document-title.tsx";
+import DocsBreadcrumbs from "@/features/public-space/components/docs/docs-breadcrumbs.tsx";
+import DocsPageNav from "@/features/public-space/components/docs/docs-page-nav.tsx";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { timeAgo } from "@/lib/time.ts";
+import styles from "@/features/public-space/components/docs/docs.module.css";
+
+export default function PublicSpacePage() {
+  const { t } = useTranslation();
+  const { spaceSlug, pageSlug } = useParams();
+
+  const { data, isLoading, isError, error } = usePublicSpacePageQuery({
+    spaceSlug,
+    pageSlugId: pageSlug ? extractPageSlugId(pageSlug) : undefined,
+  });
+
+  if (isLoading) {
+    return (
+      <Stack gap="md" pt={4} aria-hidden>
+        <Skeleton height={13} width={180} radius="sm" />
+        <Skeleton height={34} width="55%" radius="sm" mt={10} />
+        <Skeleton height={12} width="90%" radius="sm" mt={18} />
+        <Skeleton height={12} width="97%" radius="sm" />
+        <Skeleton height={12} width="85%" radius="sm" />
+        <Skeleton height={12} width="60%" radius="sm" />
+      </Stack>
+    );
+  }
+
+  if (isError || !data) {
+    if ([401, 403, 404].includes(error?.["status"])) {
+      return <Error404 />;
+    }
+    return <div>{t("Error fetching page data.")}</div>;
+  }
+
+  if (data.page === null) {
+    return (
+      <div className={styles.emptyState}>
+        <Text c="dimmed">{t("This space has no public pages yet.")}</Text>
+      </div>
+    );
+  }
+
+  const showAuthor =
+    data.byline?.author === true && Boolean(data.page.creator?.name);
+  const showUpdatedAt =
+    data.byline?.updatedAt === true && Boolean(data.page.updatedAt);
+
+  return (
+    <div>
+      <DocumentTitle
+        title={data.page.title || data.space.name || t("untitled")}
+        withAppName={false}
+      >
+        {!data.searchIndexing && <meta name="robots" content="noindex" />}
+      </DocumentTitle>
+
+      <DocsBreadcrumbs />
+
+      <ReadonlyPageEditor
+        key={data.page.id}
+        title={data.page.title}
+        content={data.page.content}
+        pageId={data.page.id}
+        spaceSlug={spaceSlug}
+        byline={
+          <DocsByline
+            creator={showAuthor ? data.page.creator : undefined}
+            updatedAt={showUpdatedAt ? data.page.updatedAt : undefined}
+          />
+        }
+        trailingSpace={false}
+      />
+
+      <DocsPageNav />
+    </div>
+  );
+}
+
+type DocsBylineProps = {
+  creator?: { name: string; avatarUrl: string };
+  updatedAt?: Date | string;
+};
+
+function DocsByline({ creator, updatedAt }: DocsBylineProps) {
+  const { t } = useTranslation();
+
+  if (!creator && !updatedAt) return null;
+
+  return (
+    <div className={styles.byline}>
+      {creator && (
+        <span className={styles.bylineAuthor}>
+          <CustomAvatar
+            avatarUrl={creator.avatarUrl}
+            name={creator.name}
+            size={20}
+          />
+          {t("By {{name}}", { name: creator.name })}
+        </span>
+      )}
+
+      {creator && updatedAt && (
+        <span className={styles.bylineDot} aria-hidden>
+          •
+        </span>
+      )}
+
+      {updatedAt && (
+        <span>
+          {t("Updated {{date}}", { date: timeAgo(new Date(updatedAt)) })}
+        </span>
+      )}
+    </div>
+  );
+}

apps/client/src/pages/settings/shares/shares.tsx

@@ -1,19 +1,23 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
 import ShareList from "@/features/share/components/share-list.tsx";
-import { Alert, Text } from "@mantine/core";
+import PublishedSpacesList from "@/features/public-space/components/published-spaces-list.tsx";
+import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { Alert, Tabs } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
 import React from "react";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
 
 export default function Shares() {
   const { t } = useTranslation();
+  const [workspace] = useAtom(workspaceAtom);
 
-  return (
+  const allowPublicSpaces = isPublicSpacesAllowed(workspace);
+
+  const sharedPages = (
     <>
-      <DocumentTitle title={t("Public sharing")} />
-      <SettingsTitle title={t("Public sharing")} />
-
       <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
         {t(
           "Publicly shared pages from spaces you are a member of will appear here",
@@ -23,4 +27,38 @@ export default function Shares() {
       <ShareList />
     </>
   );
+
+  return (
+    <>
+      <DocumentTitle title={t("Public sharing")} />
+      <SettingsTitle title={t("Public sharing")} />
+
+      {allowPublicSpaces ? (
+        <Tabs color="dark" defaultValue="pages">
+          <Tabs.List>
+            <Tabs.Tab fw={500} value="pages">
+              {t("Shared pages")}
+            </Tabs.Tab>
+            <Tabs.Tab fw={500} value="spaces">
+              {t("Published spaces")}
+            </Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="pages" pt="md">
+            {sharedPages}
+          </Tabs.Panel>
+
+          <Tabs.Panel value="spaces" pt="md">
+            <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
+              {t("Spaces published to the web will appear here")}
+            </Alert>
+
+            <PublishedSpacesList />
+          </Tabs.Panel>
+        </Tabs>
+      ) : (
+        sharedPages
+      )}
+    </>
+  );
 }

apps/client/src/pages/settings/workspace/workspace-settings.tsx

@@ -2,12 +2,13 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
 import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
 import WorkspaceIcon from "@/features/workspace/components/settings/components/workspace-icon.tsx";
 import { useTranslation } from "react-i18next";
-import { isCloud } from "@/lib/config.ts";
+import { isBetaPublicSpaces, isCloud } from "@/lib/config.ts";
 import ManageHostname from "@/ee/components/manage-hostname.tsx";
 import { Divider } from "@mantine/core";
 import AllowMemberTemplates from "@/ee/security/components/allow-member-templates.tsx";
 import WorkspaceDefaultPageEditMode from "@/features/workspace/components/settings/components/workspace-default-page-edit-mode.tsx";
 import PersonalSpacesSetting from "@/ee/personal-space/components/personal-spaces-setting.tsx";
+import AllowPublicSpaces from "@/features/workspace/components/settings/components/allow-public-spaces.tsx";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
 
 export default function WorkspaceSettings() {
@@ -25,6 +26,13 @@ export default function WorkspaceSettings() {
       <Divider my="md" />
       <PersonalSpacesSetting />
 
+      {isBetaPublicSpaces() && (
+        <>
+          <Divider my="md" />
+          <AllowPublicSpaces />
+        </>
+      )}
+
       {isCloud() && (
         <>
           <Divider my="md" />

apps/client/src/pages/share/shared-page.tsx

@@ -1,19 +1,18 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
-import { Container } from "@mantine/core";
+import { Skeleton, Stack } from "@mantine/core";
 import React, { useEffect } from "react";
 import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
 import { extractPageSlugId } from "@/lib";
 import { Error404 } from "@/components/ui/error-404.tsx";
-import ShareBranding from "@/features/share/components/share-branding.tsx";
 import { useAtomValue } from "jotai";
-import {
-  sharedPageFullWidthAtom,
-  sharedTreeDataAtom,
-} from "@/features/share/atoms/shared-page-atom.ts";
+import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
 import { isPageInTree } from "@/features/share/utils.ts";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
+import DocsBreadcrumbs from "@/features/public-space/components/docs/docs-breadcrumbs.tsx";
+import DocsPageNav from "@/features/public-space/components/docs/docs-page-nav.tsx";
+import DocsFooterBranding from "@/features/public-space/components/docs/docs-footer-branding.tsx";
 
 export default function SharedPage() {
   const { t } = useTranslation();
@@ -26,7 +25,6 @@ export default function SharedPage() {
   });
 
   const sharedTreeData = useAtomValue(sharedTreeDataAtom);
-  const fullWidth = useAtomValue(sharedPageFullWidthAtom);
 
   useEffect(() => {
     if (shareId && data) {
@@ -44,7 +42,16 @@ export default function SharedPage() {
   }, [shareId, data, sharedTreeData]);
 
   if (isLoading) {
-    return <></>;
+    return (
+      <Stack gap="md" pt={4} aria-hidden>
+        <Skeleton height={13} width={180} radius="sm" />
+        <Skeleton height={34} width="55%" radius="sm" mt={10} />
+        <Skeleton height={12} width="90%" radius="sm" mt={18} />
+        <Skeleton height={12} width="97%" radius="sm" />
+        <Skeleton height={12} width="85%" radius="sm" />
+        <Skeleton height={12} width="60%" radius="sm" />
+      </Stack>
+    );
   }
 
   if (isError || !data) {
@@ -65,17 +72,21 @@ export default function SharedPage() {
         )}
       </DocumentTitle>
 
-      <Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
-        <ReadonlyPageEditor
-          key={data.page.id}
-          title={data.page.title}
-          content={data.page.content}
-          pageId={data.page.id}
-          shareId={data.share.id}
-        />
-      </Container>
+      <DocsBreadcrumbs />
 
-      {data && !shareId && !(data.features?.length > 0) && <ShareBranding />}
+      <ReadonlyPageEditor
+        key={data.page.id}
+        title={data.page.title}
+        content={data.page.content}
+        pageId={data.page.id}
+        shareId={data.share.id}
+        trailingSpace={false}
+      />
+
+      <DocsPageNav />
+
+      {/* No tree query without a shareId, so the shell can't own branding here. */}
+      {!shareId && <DocsFooterBranding refSource="public-share" />}
     </div>
   );
 }

apps/client/src/pages/space/space-home.tsx

@@ -1,5 +1,6 @@
 import {Container} from "@mantine/core";
 import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
+import SpacePublicNotice from "@/features/public-space/components/space-public-notice.tsx";
 import {useParams} from "react-router-dom";
 import {useGetSpaceBySlugQuery} from "@/features/space/queries/space-query.ts";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
@@ -12,6 +13,7 @@ export default function SpaceHome() {
         <>
             <DocumentTitle title={space?.name || 'Overview'} />
             <Container size={"900"} pt="xl">
+                {space && <SpacePublicNotice space={space} />}
                 {space && <SpaceHomeTabs/>}
             </Container>
         </>

apps/client/src/styles/a11y-overrides.css

@@ -61,3 +61,13 @@
     var(--mantine-color-dark-5)
   );
 }
+
+/* The skip-link target main is tabindex="-1", so clicks in readonly content
+ * focus it and overlays (e.g. the lightbox) return focus to it on close,
+ * ringing the whole content region. The skip link's purpose is reading
+ * position, not a visible ring around everything, so suppress the outline.
+ */
+#main-content:focus,
+#main-content:focus-visible {
+  outline: none;
+}

apps/client/src/styles/public-typography.css

@@ -0,0 +1,39 @@
+/* Reading typography for the public surfaces (public spaces and share links).
+ * Scoped to the .public-typography root so the authenticated app keeps the
+ * system font stack. Loaded only from the lazy public layouts. */
+
+.public-typography {
+  font-family: "Inter Variable", var(--mantine-font-family);
+  letter-spacing: -0.011em;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Code keeps its own mono family; only undo the inherited tracking. */
+.public-typography code,
+.public-typography pre {
+  letter-spacing: normal;
+}
+
+/* Pins the reading metrics that core.css otherwise takes from the Mantine
+ * type scale. rem, not px, so browser font-size preferences still apply. */
+.public-typography .ProseMirror {
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.public-typography .ProseMirror h1 {
+  letter-spacing: -0.021em;
+}
+
+.public-typography .ProseMirror h2 {
+  letter-spacing: -0.017em;
+}
+
+.public-typography .ProseMirror h3,
+.public-typography .ProseMirror h4 {
+  letter-spacing: -0.014em;
+}
+
+.public-typography .page-title .ProseMirror h1 {
+  letter-spacing: -0.022em;
+}

apps/client/vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
     POSTHOG_HOST,
     POSTHOG_KEY,
     AI_VECTOR_DRIVER,
+    BETA_PUBLIC_SPACES,
   } = loadEnv(mode, envPath, "");
 
   return {
@@ -33,6 +34,7 @@ export default defineConfig(({ mode }) => {
         POSTHOG_HOST,
         POSTHOG_KEY,
         AI_VECTOR_DRIVER,
+        BETA_PUBLIC_SPACES,
       },
       APP_VERSION: JSON.stringify(process.env.npm_package_version),
     },