fix color

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.25.0
+RUN npm install -g pnpm@11.23.0
 
 FROM base AS builder
 

apps/client/package.json

@@ -21,7 +21,6 @@
     "@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

@@ -1345,83 +1345,6 @@
   "Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode",
   "Title only": "Title only",
   "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",

apps/client/src/App.tsx

@@ -44,15 +44,6 @@ 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) => ({
@@ -128,15 +119,6 @@ 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 />} />

apps/client/src/ee/features.ts

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

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

@@ -85,9 +85,6 @@ 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,14 +121,12 @@ 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,9 +257,6 @@ 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,9 +273,6 @@ 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,9 +156,6 @@ 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,12 +26,7 @@ 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 { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
-import {
-  buildPageUrl,
-  buildPublicSpaceUrl,
-  buildSharedPageUrl,
-} from "@/features/page/page.utils.ts";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
 import { sanitizeUrl, copyToClipboard, isEditorReady } from "@docmost/editor-ext";
 import { normalizeUrl } from "@/lib/utils";
@@ -65,10 +60,9 @@ export default function LinkView(props: MarkViewProps) {
   const href = mark.attrs.href as string;
   const navigate = useNavigate();
   const location = useLocation();
-  const { shareId, spaceSlug, pageSlug } = useParams();
+  const { shareId, pageSlug } = useParams();
   const { t } = useTranslation();
   const isShareRoute = location.pathname.startsWith("/share");
-  const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
 
   const [popoverState, setPopoverState] = useState<
     "closed" | "preview" | "edit"
@@ -90,33 +84,16 @@ export default function LinkView(props: MarkViewProps) {
   const activeView = isPopoverVisible ? popoverState : lastOpenState.current;
 
   const { data: linkedPage } = usePageQuery({
-    pageId:
-      isPopoverVisible && slugId && !isShareRoute && !isPublicSpaceRoute
-        ? slugId
-        : null,
+    pageId: isPopoverVisible && slugId && !isShareRoute ? slugId : null,
   });
 
   const { data: sharedPageData } = useSharePageQuery({
     pageId: isPopoverVisible && slugId && isShareRoute ? slugId : null,
   });
 
-  // 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 pageTitle = isShareRoute
+    ? sharedPageData?.page?.title
+    : linkedPage?.title;
 
   const pendingTitleRef = useRef<string | null>(null);
   const titleInputRef = useRef<HTMLInputElement>(null);
@@ -283,27 +260,6 @@ 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);
       }
@@ -320,11 +276,8 @@ export default function LinkView(props: MarkViewProps) {
     location.pathname,
     isInternal,
     isShareRoute,
-    isPublicSpaceRoute,
     slugId,
     shareId,
-    spaceSlug,
-    publicSpacePageData,
     pageTitle,
     pageSlug,
   ]);
@@ -366,18 +319,12 @@ 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 ? internalHref() : normalizeUrl(href),
+    isInternal
+      ? isShareRoute && slugId
+        ? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
+        : href
+      : normalizeUrl(href),
   );
 
   const linkTitleInput = (
@@ -427,16 +374,6 @@ 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,10 +4,8 @@ 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";
@@ -23,30 +21,17 @@ 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 && !isPublicSpaceRoute ? slugId : null,
-  });
+  } = usePageQuery({ pageId: isPageMention && !isShareRoute ? 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;
 
@@ -102,61 +87,7 @@ export default function MentionView(props: NodeViewProps) {
         </Anchor>
       )}
 
-      {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 && (
+      {isPageMention && !isShareRoute && isError && (
         <Anchor
           component={Link}
           fw={500}
@@ -180,7 +111,7 @@ export default function MentionView(props: NodeViewProps) {
         </Anchor>
       )}
 
-      {isPageMention && !isShareRoute && !isPublicSpaceRoute && !isError && (
+      {isPageMention && !isShareRoute && !isError && (
         <Anchor
           component={Link}
           fw={500}

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

@@ -106,9 +106,6 @@ 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/search-and-replace/search-and-replace-dialog.tsx

@@ -66,7 +66,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
     }
     // Clear search term in editor
     if (isEditorReady(editor)) {
-      editor.commands.setSearchTerms([""]);
+      editor.commands.setSearchTerm("");
     }
   };
 
@@ -117,7 +117,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
 
   useEffect(() => {
     if (!isEditorReady(editor)) return;
-    editor.commands.setSearchTerms([searchText]);
+    editor.commands.setSearchTerm(searchText);
     editor.commands.resetIndex();
     editor.commands.selectCurrentItem();
   }, [searchText]);
@@ -181,10 +181,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
 
   const location = useLocation();
   useEffect(() => {
-    if (pageFindState.isOpen) {
-      closeDialog();
-    }
-  }, [location.pathname]);
+    closeDialog();
+  }, [location]);
 
   return (
     <Dialog

apps/client/src/features/editor/components/search-and-replace/search-navigation-dialog.tsx

@@ -1,205 +0,0 @@
-import { ActionIcon, Dialog, Flex, Text, Tooltip } from "@mantine/core";
-import {
-  IconArrowNarrowDown,
-  IconArrowNarrowUp,
-  IconX,
-} from "@tabler/icons-react";
-import { useEditor } from "@tiptap/react";
-import { isEditorReady } from "@docmost/editor-ext";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import classes from "./search-replace.module.css";
-import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router-dom";
-
-interface SearchNavigationDialogProps {
-  editor: ReturnType<typeof useEditor>;
-}
-
-interface SearchNavigationEvent extends CustomEvent {
-  detail: {
-    searchTerms: string[];
-    wholeWord?: boolean;
-  };
-}
-
-function SearchNavigationDialog({ editor }: SearchNavigationDialogProps) {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [open, setOpen] = useState(false);
-  const openRef = useRef(false);
-  const [resultState, setResultState] = useState({
-    resultIndex: 0,
-    resultsLength: 0,
-  });
-
-  const goToSelection = () => {
-    if (!isEditorReady(editor)) return;
-
-    const { results, resultIndex } = editor.storage.searchAndReplace;
-    const position = results[resultIndex];
-
-    setResultState({
-      resultsLength: results.length,
-      resultIndex,
-    });
-
-    if (!position) return;
-    requestAnimationFrame(() => {
-      document
-        .querySelector(".search-result-current")
-        ?.scrollIntoView({ behavior: "smooth", block: "center" });
-    });
-  };
-
-  const next = () => {
-    if (!isEditorReady(editor)) return;
-    editor.commands.nextSearchResult();
-    goToSelection();
-  };
-
-  const previous = () => {
-    if (!isEditorReady(editor)) return;
-    editor.commands.previousSearchResult();
-    goToSelection();
-  };
-
-  const close = useCallback(() => {
-    if (!openRef.current) return;
-
-    openRef.current = false;
-    setOpen(false);
-    if (isEditorReady(editor)) {
-      editor.commands.setSearchTerms([""]);
-    }
-    const nextParams = new URLSearchParams(location.search);
-    nextParams.delete("q");
-    nextParams.delete("m");
-    const nextSearch = nextParams.toString();
-    navigate(
-      {
-        pathname: location.pathname,
-        search: nextSearch ? `?${nextSearch}` : "",
-        hash: location.hash,
-      },
-      { replace: true },
-    );
-  }, [editor, location.hash, location.pathname, location.search, navigate]);
-
-  useEffect(() => {
-    const handleOpen = (event: Event) => {
-      const { searchTerms: terms, wholeWord = true } = (
-        event as SearchNavigationEvent
-      ).detail;
-
-      if (!terms?.length || !isEditorReady(editor)) return;
-
-      openRef.current = false;
-      editor.commands.setSearchTerms(terms);
-      editor.commands.setWholeWord(wholeWord);
-      editor.commands.resetIndex();
-
-      const { results, resultIndex } = editor.storage.searchAndReplace;
-      openRef.current = true;
-      if (results.length === 0) {
-        close();
-        return;
-      }
-
-      setOpen(true);
-      setResultState({
-        resultIndex,
-        resultsLength: results.length,
-      });
-
-      goToSelection();
-    };
-
-    const handleClose = () => {
-      if (openRef.current) {
-        close();
-      }
-    };
-
-    document.addEventListener("openSearchNavigationDialog", handleOpen);
-    document.addEventListener("openFindDialogFromEditor", handleClose);
-    document.addEventListener("closeFindDialogFromEditor", handleClose);
-
-    return () => {
-      document.removeEventListener("openSearchNavigationDialog", handleOpen);
-      document.removeEventListener("openFindDialogFromEditor", handleClose);
-      document.removeEventListener("closeFindDialogFromEditor", handleClose);
-    };
-  }, [close, editor]);
-
-  useEffect(() => {
-    const handleTransaction = () => {
-      if (!openRef.current || editor.isDestroyed) return;
-
-      const { results } = editor.storage.searchAndReplace;
-      if (results.length === 0) {
-        close();
-      }
-    };
-
-    editor.on("transaction", handleTransaction);
-    return () => {
-      editor.off("transaction", handleTransaction);
-    };
-  }, [close, editor]);
-
-  return (
-    <Dialog
-      className={classes.findDialog}
-      opened={open}
-      size="xs"
-      radius="md"
-      w="auto"
-      position={{ top: 90, right: 50 }}
-      withBorder
-      aria-label="Search navigation"
-    >
-      <Flex align="center" gap="xs">
-        <Text size="xs" style={{ flex: 1 }}>
-          {resultState.resultsLength > 0
-            ? `${resultState.resultIndex + 1}/${resultState.resultsLength}`
-            : t("Not found")}
-        </Text>
-        <Tooltip label="Previous match">
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            onClick={previous}
-            aria-label="Previous match"
-            disabled={resultState.resultsLength === 0}
-          >
-            <IconArrowNarrowUp size={16} />
-          </ActionIcon>
-        </Tooltip>
-        <Tooltip label="Next match">
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            onClick={next}
-            aria-label="Next match"
-            disabled={resultState.resultsLength === 0}
-          >
-            <IconArrowNarrowDown size={16} />
-          </ActionIcon>
-        </Tooltip>
-        <Tooltip label="Close">
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            onClick={close}
-            aria-label="Close"
-          >
-            <IconX size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Flex>
-    </Dialog>
-  );
-}
-
-export default SearchNavigationDialog;

apps/client/src/features/editor/components/search-and-replace/use-search-navigation-params.ts

@@ -1,47 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { useEditor } from "@tiptap/react";
-
-interface UseSearchNavigationParamsProps {
-  editor: ReturnType<typeof useEditor>;
-  isSynced: boolean;
-  pageId: string;
-  searchParams: URLSearchParams;
-  showStatic: boolean;
-}
-
-export function useSearchNavigationParams({
-  editor,
-  isSynced,
-  pageId,
-  searchParams,
-  showStatic,
-}: UseSearchNavigationParamsProps) {
-  const appliedSearchKeyRef = useRef<string | null>(null);
-  const searchKey = `${pageId}:${searchParams.toString()}`;
-
-  useEffect(() => {
-    const searchQueries = searchParams.getAll("q");
-    if (!searchQueries.length) {
-      appliedSearchKeyRef.current = null;
-      return;
-    }
-
-    if (
-      !editor ||
-      editor.isDestroyed ||
-      !editor.view.dom.isConnected ||
-      appliedSearchKeyRef.current === searchKey
-    ) {
-      return;
-    }
-
-    const match = searchParams.get("m");
-    appliedSearchKeyRef.current = searchKey;
-
-    document.dispatchEvent(
-      new CustomEvent("openSearchNavigationDialog", {
-        detail: { searchTerms: searchQueries, wholeWord: match === "whole" },
-      }),
-    );
-  }, [editor, isSynced, searchKey, searchParams, showStatic]);
-}

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

@@ -61,9 +61,6 @@ 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,30 +3,22 @@ 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, useLocation, useParams } from "react-router-dom";
+import { Link, 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;
@@ -37,25 +29,11 @@ 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(
-    isPublicView ? null : { pageId: currentPageId },
+    shareId ? null : { pageId: currentPageId },
   );
 
   const subpages = useMemo(() => {
@@ -70,33 +48,17 @@ 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,
-    isPublicSpaceRoute,
-    publicSpaceSubpages,
-  ]);
+  }, [data, shareId, sharedSubpages]);
 
-  if (isLoading && !isPublicView) {
+  if (isLoading && !shareId) {
     return null;
   }
 
-  if (error && !isPublicView) {
+  if (error && !shareId) {
     return (
       <NodeViewWrapper data-drag-handle>
         <Text c="dimmed" size="md" py="md">
@@ -134,13 +96,7 @@ export default function SubpagesView(props: NodeViewProps) {
                       pageSlugId: page.slugId,
                       pageTitle: page.title,
                     })
-                  : isPublicSpaceRoute
-                    ? buildPublicSpaceUrl({
-                        spaceSlug,
-                        pageSlugId: page.slugId,
-                        pageTitle: page.title,
-                      })
-                    : buildPageUrl(spaceSlug, page.slugId, 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;
 };
 
-export const recalculateLinks = (nodePos: NodePos[]) => {
+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,7 +9,6 @@ import React, {
 } from "react";
 import {
   lookupTransclusion,
-  lookupTransclusionForPublicSpace,
   lookupTransclusionForShare,
 } from "@/features/transclusion/services/transclusion-api";
 import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types";
@@ -39,7 +38,6 @@ const TransclusionLookupContext = createContext<ContextValue | null>(null);
 export function TransclusionLookupProvider({
   children,
   shareId,
-  spaceSlug,
 }: {
   children: React.ReactNode;
   /**
@@ -49,11 +47,6 @@ 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>());
@@ -62,8 +55,6 @@ 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.
@@ -100,18 +91,12 @@ export function TransclusionLookupProvider({
 
     try {
       const activeShareId = shareIdRef.current;
-      const activeSpaceSlug = spaceSlugRef.current;
       const { items } = activeShareId
         ? await lookupTransclusionForShare({
             shareId: activeShareId,
             references,
           })
-        : activeSpaceSlug
-          ? await lookupTransclusionForPublicSpace({
-              spaceSlug: activeSpaceSlug,
-              references,
-            })
-          : await lookupTransclusion({ 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,9 +132,6 @@ 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/extensions/document.test.ts

@@ -1,112 +0,0 @@
-import { Editor, Node } from "@tiptap/core";
-import { GapCursor } from "@tiptap/pm/gapcursor";
-import { NodeSelection, TextSelection } from "@tiptap/pm/state";
-import { StarterKit } from "@tiptap/starter-kit";
-import { describe, expect, it } from "vitest";
-import { TiptapDocument } from "./document";
-
-const Footnotes = Node.create({
-  name: "footnotes",
-  group: "",
-  content: "paragraph*",
-  isolating: true,
-  renderHTML() {
-    return ["ol", { class: "footnotes" }, 0];
-  },
-});
-
-const AtomBlock = Node.create({
-  name: "atomBlock",
-  group: "block",
-  atom: true,
-  renderHTML() {
-    return ["div", { "data-atom-block": "" }];
-  },
-});
-
-const IsolatingBlock = Node.create({
-  name: "isolatingBlock",
-  group: "block",
-  content: "paragraph+",
-  isolating: true,
-  renderHTML() {
-    return ["div", { "data-isolating-block": "" }, 0];
-  },
-});
-
-function createEditor(content: object[]) {
-  const element = document.createElement("div");
-  document.body.appendChild(element);
-
-  return new Editor({
-    element,
-    extensions: [
-      TiptapDocument,
-      StarterKit.configure({ document: false }),
-      Footnotes,
-      AtomBlock,
-      IsolatingBlock,
-    ],
-    content: { type: "doc", content },
-  });
-}
-
-function pressKey(editor: Editor, key: string, keyCode: number) {
-  editor.view.dom.dispatchEvent(
-    new KeyboardEvent("keydown", {
-      key,
-      keyCode,
-      bubbles: true,
-      cancelable: true,
-    }),
-  );
-}
-
-describe("TiptapDocument", () => {
-  it("stops on the gap when arrowing down from a selected block node", () => {
-    const editor = createEditor([
-      { type: "atomBlock" },
-      { type: "atomBlock" },
-      { type: "paragraph" },
-    ]);
-    const gapPos = editor.state.doc.child(0).nodeSize;
-    editor.view.dispatch(
-      editor.state.tr.setSelection(
-        NodeSelection.create(editor.state.doc, 0),
-      ),
-    );
-
-    pressKey(editor, "ArrowDown", 40);
-
-    expect(editor.state.selection).toBeInstanceOf(GapCursor);
-    expect(editor.state.selection.head).toBe(gapPos);
-
-    editor.destroy();
-  });
-
-  it("stops on the gap when arrowing right out of an isolating block", () => {
-    const paragraph = (text: string) => ({
-      type: "paragraph",
-      content: [{ type: "text", text }],
-    });
-    const editor = createEditor([
-      { type: "isolatingBlock", content: [paragraph("a")] },
-      { type: "isolatingBlock", content: [paragraph("b")] },
-      { type: "paragraph" },
-    ]);
-    const gapPos = editor.state.doc.child(0).nodeSize;
-    const endOfFirstText = gapPos - 2;
-    editor.view.dispatch(
-      editor.state.tr.setSelection(
-        TextSelection.create(editor.state.doc, endOfFirstText),
-      ),
-    );
-
-    pressKey(editor, "ArrowRight", 39);
-
-    expect(editor.state.selection).toBeInstanceOf(GapCursor);
-    expect(editor.state.selection.head).toBe(gapPos);
-
-    editor.destroy();
-  });
-});

apps/client/src/features/editor/extensions/document.ts

@@ -1,8 +0,0 @@
-import { Document } from "@tiptap/extension-document";
-
-// With `block+ footnotes?`, ProseMirror's defaultType after the first block is
-// `footnotes` (not a textblock), so GapCursor.valid() rejects every top-level gap.
-export const TiptapDocument = Document.extend({
-  content: "block+ footnotes?",
-  allowGapCursor: true,
-});

apps/client/src/features/editor/extensions/extensions.ts

@@ -1,6 +1,6 @@
 import { markInputRule } from "@tiptap/core";
 import { StarterKit } from "@tiptap/starter-kit";
-import { TiptapDocument } from "@/features/editor/extensions/document";
+import { Document } from "@tiptap/extension-document";
 import { Code } from "@tiptap/extension-code";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { TaskList, TaskItem } from "@tiptap/extension-list";
@@ -148,7 +148,9 @@ export const mainExtensions = [
     codeBlock: false,
     code: false,
   }),
-  TiptapDocument,
+  Document.extend({
+    content: "block+ footnotes?",
+  }),
   // Override TipTap's Code extension to fix the inline code input rule.
   // The upstream regex /(^|[^`])`([^`]+)`(?!`)$/ captures the character
   // before the opening backtick as part of the match, causing markInputRule

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

@@ -65,13 +65,11 @@ import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu-lazy";
 import DrawioMenu from "./components/drawio/drawio-menu";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
 import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
-import SearchNavigationDialog from "@/features/editor/components/search-and-replace/search-navigation-dialog.tsx";
-import { useSearchNavigationParams } from "@/features/editor/components/search-and-replace/use-search-navigation-params.ts";
 import { useDebouncedCallback, useDocumentVisibility } from "@mantine/hooks";
 import { useIdle } from "@/hooks/use-idle.ts";
 import { queryClient } from "@/main.tsx";
 import { IPage } from "@/features/page/types/page.types.ts";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { extractPageSlugId, platformModifierKey } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
@@ -201,7 +199,6 @@ function CollabPageEditor({
   const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
   const documentState = useDocumentVisibility();
   const { pageSlug } = useParams();
-  const [searchParams] = useSearchParams();
   const slugId = extractPageSlugId(pageSlug);
   const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
   const canScroll = useCallback(
@@ -440,14 +437,6 @@ function CollabPageEditor({
   const hasConnectedOnceRef = useRef(false);
   const [showStatic, setShowStatic] = useState(true);
 
-  useSearchNavigationParams({
-    editor,
-    isSynced,
-    pageId,
-    searchParams,
-    showStatic,
-  });
-
   useEffect(() => {
     if (
       !hasConnectedOnceRef.current &&
@@ -471,7 +460,6 @@ function CollabPageEditor({
         {editor && (
           <SearchAndReplaceDialog editor={editor} editable={editable} />
         )}
-        {editor && <SearchNavigationDialog editor={editor} />}
 
         {editor && editorIsEditable && (
           <div>

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

@@ -35,16 +35,6 @@ 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({
@@ -53,16 +43,12 @@ 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,
@@ -78,9 +64,9 @@ export default function ReadonlyPageEditor({
   }, []);
 
   useEffect(() => {
-    if (!isPublicView) return;
+    if (!shareId) return;
     setLightboxRequest(null);
-  }, [pageId, isPublicView]);
+  }, [pageId, shareId]);
 
   const extensions = useMemo(() => {
     const excludedExtensions = new Set([
@@ -113,7 +99,7 @@ export default function ReadonlyPageEditor({
   ];
 
   return (
-    <TransclusionLookupProvider shareId={shareId} spaceSlug={spaceSlug}>
+    <TransclusionLookupProvider shareId={shareId}>
       <div className="page-title">
         <EditorProvider
           editable={false}
@@ -124,8 +110,6 @@ export default function ReadonlyPageEditor({
         ></EditorProvider>
       </div>
 
-      {byline}
-
       <EditorProvider
         editable={false}
         immediatelyRender={true}
@@ -133,7 +117,7 @@ export default function ReadonlyPageEditor({
         extensions={extensions}
         content={content}
         editorProps={
-          isPublicView
+          shareId
             ? {
                 handleClickOn: (_view, _pos, node) => {
                   const request = getLightboxClickRequest(node);
@@ -160,7 +144,7 @@ export default function ReadonlyPageEditor({
           }
         }}
       ></EditorProvider>
-      {isPublicView && contentEditor && (
+      {shareId && contentEditor && (
         <LightboxView
           editor={contentEditor}
           open={!!lightboxRequest}
@@ -169,7 +153,7 @@ export default function ReadonlyPageEditor({
           onClose={() => setLightboxRequest(null)}
         />
       )}
-      {trailingSpace && <div style={{ paddingBottom: "20vh" }}></div>}
+      <div style={{ paddingBottom: "20vh" }}></div>
     </TransclusionLookupProvider>
   );
 }

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

@@ -1,63 +1,16 @@
 import classes from "./page-header.module.css";
 import PageHeaderMenu from "@/features/page/components/header/page-header-menu.tsx";
-import { Badge, Group, Tooltip } from "@mantine/core";
-import { IconExternalLink, IconWorld } from "@tabler/icons-react";
+import { Group } from "@mantine/core";
 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}>
-        <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>
+        <Breadcrumb />
 
         <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

@@ -25,37 +25,11 @@ const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
   return `${titleSlug}-${pageSlugId}`;
 };
 
-function appendSearchParams(
-  url: string,
-  search?: string[],
-  wholeWord?: boolean,
-): string {
-  if(search?.length === 0){
-    return url;
-  }
-
-  const params = new URLSearchParams();
-  search
-    ?.map((term) => term.trim())
-    .filter(Boolean)
-    .forEach((term) => params.append("q", term));
-
-  if (wholeWord) {
-    params.set("m", "whole");
-  }
-
-  const queryString = params.toString();
-
-  return queryString ? `${url}?${queryString}` : url;
-}
-
 export const buildPageUrl = (
   spaceName: string,
   pageSlugId: string,
   pageTitle?: string,
   anchorId?: string,
-  search?: string[],
-  wholeWord?: boolean,
 ): string => {
   let url: string;
   if (spaceName === undefined) {
@@ -63,9 +37,6 @@ export const buildPageUrl = (
   } else {
     url = `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
-
-  url = appendSearchParams(url, search, wholeWord);
-
   return anchorId ? `${url}#${anchorId}` : url;
 };
 
@@ -74,31 +45,13 @@ export const buildSharedPageUrl = (opts: {
   pageSlugId: string;
   pageTitle?: string;
   anchorId?: string;
-  search?: string[];
-  wholeWord?: boolean;
 }): string => {
-  const { shareId, pageSlugId, pageTitle, anchorId, search, wholeWord } = opts;
+  const { shareId, pageSlugId, pageTitle, anchorId } = opts;
   let url: string;
   if (!shareId) {
     url = `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   } else {
     url = `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
-
-  url = appendSearchParams(url, search, wholeWord);
-
-  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,7 +41,6 @@ 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;
@@ -69,7 +68,6 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
     activeId,
     renderRow,
     indentPerLevel,
-    rowClassName,
     onMove,
     onToggle,
     readOnly,
@@ -325,7 +323,7 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
       style={{ paddingLeft: level * indentPerLevel }}
     >
       <div
-        className={rowClassName ? `${styles.node} ${rowClassName}` : styles.node}
+        className={styles.node}
         data-dragging={isDragging || undefined}
         data-selected={isSelected || undefined}
         data-receiving-drop={
@@ -378,7 +376,6 @@ 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,18 +56,6 @@ 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;
@@ -135,9 +123,6 @@ function DocTreeInner<T extends object>(
     renderRow,
     indentPerLevel = 16,
     rowHeight = 32,
-    rowClassName,
-    rowGap,
-    dynamicRowHeight = false,
     onMove,
     onToggle,
     onSelect,
@@ -147,7 +132,6 @@ function DocTreeInner<T extends object>(
     getDragLabel,
     uniqueContextId,
     emptyState,
-    footer,
     'aria-label': ariaLabel,
   } = props;
 
@@ -213,20 +197,10 @@ 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,
-    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;
-    },
+    estimateSize: () => rowHeight,
     overscan: 10,
   });
 
@@ -497,12 +471,7 @@ function DocTreeInner<T extends object>(
   );
 
   if (data.length === 0 && emptyState) {
-    return (
-      <div className={styles.treeContainer}>
-        {emptyState}
-        {footer}
-      </div>
-    );
+    return <div className={styles.treeContainer}>{emptyState}</div>;
   }
 
   const virtualItems = virtualizer.getVirtualItems();
@@ -525,9 +494,6 @@ 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}
@@ -535,15 +501,12 @@ 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
@@ -555,7 +518,6 @@ function DocTreeInner<T extends object>(
                 activeId={effectiveActiveId}
                 renderRow={renderRow}
                 indentPerLevel={indentPerLevel}
-                rowClassName={rowClassName}
                 onMove={onMove}
                 onToggle={onToggle}
                 readOnly={readOnly}
@@ -570,7 +532,6 @@ function DocTreeInner<T extends object>(
           );
         })}
       </ul>
-      {footer}
     </div>
   );
 }

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

@@ -1,17 +0,0 @@
-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

@@ -1,51 +0,0 @@
-.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

@@ -1,165 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,485 +0,0 @@
-/* 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

@@ -1,70 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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);
-const MANTINE_COLOR_SCHEME_ATTRIBUTE = "data-mantine-color-scheme";
-const DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE = "data-docs-print-color-scheme";
-
-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);
-
-  React.useEffect(() => {
-    const root = document.documentElement;
-    let previousColorScheme: string | null = null;
-    let isPrinting = false;
-
-    const restoreColorScheme = () => {
-      if (!isPrinting) return;
-
-      if (previousColorScheme === null) {
-        root.removeAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE);
-      } else {
-        root.setAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE, previousColorScheme);
-      }
-      root.removeAttribute(DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE);
-      isPrinting = false;
-    };
-
-    const useLightPrintTheme = () => {
-      if (isPrinting) return;
-
-      previousColorScheme = root.getAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE);
-      root.setAttribute(
-        DOCS_PRINT_COLOR_SCHEME_ATTRIBUTE,
-        previousColorScheme ?? "light",
-      );
-      root.setAttribute(MANTINE_COLOR_SCHEME_ATTRIBUTE, "light");
-      isPrinting = true;
-    };
-
-    window.addEventListener("beforeprint", useLightPrintTheme);
-    window.addEventListener("afterprint", restoreColorScheme);
-
-    return () => {
-      window.removeEventListener("beforeprint", useLightPrintTheme);
-      window.removeEventListener("afterprint", restoreColorScheme);
-      restoreColorScheme();
-    };
-  }, []);
-
-  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

@@ -1,198 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,958 +0,0 @@
-/* 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;
-}
-
-/* ---------- Print ---------- */
-
-@page public-doc {
-  background-color: #fff;
-}
-
-/* Only the article prints; the body grid collapses so it takes the page width. */
-@media print {
-  :global(html):has(.root),
-  :global(body):has(.root) {
-    page: public-doc;
-    background-color: #fff !important;
-  }
-
-  :global(html[data-docs-print-color-scheme="dark"])
-    .root.root
-    :global(.codeBlock svg) {
-    filter: invert(1) hue-rotate(180deg);
-  }
-
-  .header,
-  .sidebar,
-  .toc,
-  .articleActions,
-  .breadcrumbs,
-  .pageNav,
-  .footer {
-    display: none !important;
-  }
-
-  .root {
-    --docs-bg: #fff;
-    --docs-fg: #1f1f1f;
-    --docs-content-fg: var(--docs-fg);
-    --docs-nav-fg: #495057;
-    --docs-muted: #5f6368;
-    --docs-hover: #f1f3f5;
-    --docs-faint: #868e96;
-    --docs-border: #dee2e6;
-    --docs-header-bg: #fff;
-
-    min-height: 0;
-    background-color: #fff;
-    color: var(--docs-fg);
-  }
-
-  .body {
-    display: block;
-  }
-
-  .article {
-    max-width: none;
-    padding: 0;
-  }
-}

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

@@ -1,69 +0,0 @@
-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

@@ -1,283 +0,0 @@
-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

@@ -1,210 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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/components/search-result-item.tsx

@@ -117,9 +117,6 @@ export function SearchResultItem({
           pageResult.space.slug,
           pageResult.slugId,
           pageResult.title,
-          undefined,
-          pageResult.matchedText,
-          pageResult.wholeWord
         )}
         style={{ userSelect: "none" }}
       >

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

@@ -5,6 +5,3 @@ 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,7 +2,6 @@ import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-quer
 import {
   searchAttachments,
   searchPage,
-  searchPublicSpace,
   searchShare,
   searchSuggestions,
 } from '@/features/search/services/search-service';
@@ -56,13 +55,3 @@ 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,16 +28,6 @@ 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/search/types/search.types.ts

@@ -14,8 +14,6 @@ export interface IPageSearch {
   updatedAt: Date;
   rank: string;
   highlight: string;
-  matchedText: string[];
-  wholeWord: boolean;
   space: Partial<ISpace>;
 }
 

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

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

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

@@ -1,10 +1,11 @@
 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 as ISharedPageTree | null,
-);
-export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(
-  null as SharedPageTreeNode[] | null,
-);
+export const sharedPageTreeAtom = atom<ISharedPageTree | null>(null);
+export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
+export const sharedPageFullWidthAtom = atomWithStorage<boolean>(
+  "sharedPageFullWidth",
+  false,
+);

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,16 @@
+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,67 +1,10 @@
-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";
+import { Outlet } from "react-router-dom";
+import ShareShell from "@/features/share/components/share-shell.tsx";
 
 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 (
-    <DocsShell
-      surface={surface}
-      onSearchOpen={shareId ? shareSearchSpotlight.open : undefined}
-      searchSpotlight={
-        shareId ? <ShareSearchSpotlight shareId={shareId} /> : undefined
-      }
-    >
+    <ShareShell>
       <Outlet />
-    </DocsShell>
+    </ShareShell>
   );
 }

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

@@ -0,0 +1,272 @@
+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,3 +6,39 @@
     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

@@ -0,0 +1,220 @@
+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,13 +1,29 @@
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
 import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
-import { findSubpagesInTree } from "@/features/share/utils";
+import { SharedPageTreeNode } from "@/features/share/utils";
 
 export function useSharedPageSubpages(pageId: string | undefined) {
   const treeData = useAtomValue(sharedTreeDataAtom);
 
-  return useMemo(
-    () => findSubpagesInTree(treeData, pageId),
-    [treeData, pageId],
-  );
+  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]);
 }

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

@@ -0,0 +1,8 @@
+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,27 +68,6 @@ 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,8 +4,6 @@ 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 {
@@ -13,8 +11,6 @@ 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;
@@ -33,13 +29,6 @@ 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
@@ -71,12 +60,10 @@ export default function SpaceSettingsModal({
                   <Tabs.Tab fw={500} value="members">
                     {t("Members")}
                   </Tabs.Tab>
-                  {canManageSettings && allowPublicSpaces && (
-                    <Tabs.Tab fw={500} value="publish">
-                      {t("Publish")}
-                    </Tabs.Tab>
-                  )}
-                  {canManageSettings && (
+                  {spaceAbility.can(
+                    SpaceCaslAction.Manage,
+                    SpaceCaslSubject.Settings,
+                  ) && (
                     <Tabs.Tab fw={500} value="security">
                       {t("Security")}
                     </Tabs.Tab>
@@ -127,16 +114,6 @@ 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, isBetaPublicSpaces } from "@/lib/config.ts";
+import { getSpaceUrl } 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,7 +106,6 @@ 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,32 +2,24 @@ 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, Tooltip } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronUp,
-  IconWorld,
-} from "@tabler/icons-react";
+import { Button, Popover, Text } from "@mantine/core";
+import { IconChevronDown, IconChevronUp } 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);
 
@@ -69,16 +61,6 @@ 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,7 +30,6 @@ 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,14 +19,6 @@ 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

@@ -1,129 +0,0 @@
-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,8 +24,6 @@ export interface IWorkspace {
   aiSearch?: boolean;
   generativeAi?: boolean;
   disablePublicSharing?: boolean;
-  allowPublicSpaces?: boolean;
-  publicSpacesDirectory?: boolean;
   mcpEnabled?: boolean;
   aiChatReadOnly?: boolean;
   aiChatWorkspaceKnowledgeOnly?: boolean;
@@ -44,7 +42,6 @@ export interface IWorkspaceSettings {
   api?: IWorkspaceApiSettings;
   templates?: IWorkspaceTemplateSettings;
   spaces?: IWorkspaceSpaceSettings;
-  publicSpaces?: IWorkspacePublicSpacesSettings;
   defaultPageEditMode?: string;
 }
 
@@ -74,11 +71,6 @@ 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,13 +32,6 @@ 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,10 +43,6 @@ 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

@@ -1,235 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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,23 +1,19 @@
 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 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 { Alert, Text } 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);
 
-  const allowPublicSpaces = isPublicSpacesAllowed(workspace);
-
-  const sharedPages = (
+  return (
     <>
+      <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",
@@ -27,38 +23,4 @@ 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,13 +2,12 @@ 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 { isBetaPublicSpaces, isCloud } from "@/lib/config.ts";
+import { 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() {
@@ -26,13 +25,6 @@ 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,18 +1,19 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
-import { Skeleton, Stack } from "@mantine/core";
+import { Container } 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 { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
+import {
+  sharedPageFullWidthAtom,
+  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();
@@ -25,6 +26,7 @@ export default function SharedPage() {
   });
 
   const sharedTreeData = useAtomValue(sharedTreeDataAtom);
+  const fullWidth = useAtomValue(sharedPageFullWidthAtom);
 
   useEffect(() => {
     if (shareId && data) {
@@ -42,16 +44,7 @@ export default function SharedPage() {
   }, [shareId, data, sharedTreeData]);
 
   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>
-    );
+    return <></>;
   }
 
   if (isError || !data) {
@@ -72,21 +65,17 @@ export default function SharedPage() {
         )}
       </DocumentTitle>
 
-      <DocsBreadcrumbs />
+      <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>
 
-      <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" />}
+      {data && !shareId && !(data.features?.length > 0) && <ShareBranding />}
     </div>
   );
 }

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

@@ -1,6 +1,5 @@
 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";
@@ -13,7 +12,6 @@ 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,13 +61,3 @@
     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

@@ -1,39 +0,0 @@
-/* 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,7 +17,6 @@ export default defineConfig(({ mode }) => {
     POSTHOG_HOST,
     POSTHOG_KEY,
     AI_VECTOR_DRIVER,
-    BETA_PUBLIC_SPACES,
   } = loadEnv(mode, envPath, "");
 
   return {
@@ -34,7 +33,6 @@ export default defineConfig(({ mode }) => {
         POSTHOG_HOST,
         POSTHOG_KEY,
         AI_VECTOR_DRIVER,
-        BETA_PUBLIC_SPACES,
       },
       APP_VERSION: JSON.stringify(process.env.npm_package_version),
     },

apps/server/src/common/features.ts

@@ -26,7 +26,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/server/src/core/core.module.ts

@@ -18,7 +18,6 @@ import { PageAccessModule } from './page/page-access/page-access.module';
 import { DomainMiddleware } from '../common/middlewares/domain.middleware';
 import { AuditContextMiddleware } from '../common/middlewares/audit-context.middleware';
 import { ShareModule } from './share/share.module';
-import { PublicSpaceModule } from './public-space/public-space.module';
 import { LabelModule } from './label/label.module';
 import { NotificationModule } from './notification/notification.module';
 import { WatcherModule } from './watcher/watcher.module';
@@ -41,7 +40,6 @@ import { ClsMiddleware } from 'nestjs-cls';
     CaslModule,
     PageAccessModule,
     ShareModule,
-    PublicSpaceModule,
     LabelModule,
     NotificationModule,
     WatcherModule,

apps/server/src/core/favorite/favorite.controller.ts

@@ -48,9 +48,9 @@ export class FavoriteController {
 
     await this.favoriteService.addFavorite(user.id, workspace.id, {
       type: dto.type,
-      pageId: dto.type === 'page' ? dto.pageId : undefined,
+      pageId: dto.pageId,
       spaceId: dto.type === 'space' ? resolved.spaceId : undefined,
-      templateId: dto.type === 'template' ? dto.templateId : undefined,
+      templateId: dto.templateId,
     });
   }
 

apps/server/src/core/favorite/services/favorite.service.ts

@@ -6,12 +6,14 @@ import {
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
 import { InsertableFavorite } from '@docmost/db/types/entity.types';
 import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
+import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
 
 @Injectable()
 export class FavoriteService {
   constructor(
     private readonly favoriteRepo: FavoriteRepo,
     private readonly pagePermissionRepo: PagePermissionRepo,
+    private readonly spaceMemberRepo: SpaceMemberRepo,
   ) {}
 
   async getFavoriteIds(
@@ -41,6 +43,12 @@ export class FavoriteService {
       result.items = result.items.filter((id) => accessibleSet.has(id));
     }
 
+    if (type === FavoriteType.SPACE) {
+      const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
+      const spaceSet = new Set(userSpaceIds);
+      result.items = result.items.filter((id) => spaceSet.has(id));
+    }
+
     return result;
   }
 
@@ -103,6 +111,9 @@ export class FavoriteService {
       return result;
     }
 
+    const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
+    const spaceSet = new Set(userSpaceIds);
+
     const pageFavorites = result.items.filter(
       (f) => f.type === FavoriteType.PAGE && f.pageId,
     );
@@ -118,11 +129,19 @@ export class FavoriteService {
       accessiblePageSet = new Set(accessibleIds);
     }
 
-    result.items = result.items.filter(
-      (f) =>
-        f.type !== FavoriteType.PAGE ||
-        (f.pageId && accessiblePageSet?.has(f.pageId)),
-    );
+    result.items = result.items.filter((f) => {
+      if (f.type === FavoriteType.PAGE) {
+        return f.pageId && accessiblePageSet?.has(f.pageId);
+      }
+      if (f.type === FavoriteType.SPACE) {
+        return f.spaceId && spaceSet.has(f.spaceId);
+      }
+      if (f.type === FavoriteType.TEMPLATE) {
+        const templateSpaceId = (f as any).template?.spaceId;
+        return !templateSpaceId || spaceSet.has(templateSpaceId);
+      }
+      return true;
+    });
 
     return result;
   }

apps/server/src/core/public-space/dto/public-space.dto.ts

@@ -1,79 +0,0 @@
-import {
-  IsBoolean,
-  IsNotEmpty,
-  IsOptional,
-  IsString,
-  IsUUID,
-  Matches,
-  ValidateNested,
-} from 'class-validator';
-import { Type } from 'class-transformer';
-import { LookupDto } from '../../page/transclusion/dto/lookup.dto';
-
-export const APPEARANCE_HEX_REGEX = /^#[0-9a-fA-F]{6}$/;
-
-export class PublicSpaceSlugDto {
-  @IsString()
-  @IsNotEmpty()
-  spaceSlug: string;
-}
-
-export class PublicSpacePageDto extends PublicSpaceSlugDto {
-  @IsString()
-  @IsOptional()
-  pageSlugId?: string;
-
-  @IsOptional()
-  @IsBoolean()
-  contentless?: boolean;
-}
-
-export class PublicSpaceTransclusionLookupDto extends LookupDto {
-  @IsString()
-  @IsNotEmpty()
-  spaceSlug!: string;
-}
-
-export class PublicSpaceAppearanceDto {
-  @IsOptional()
-  @Matches(APPEARANCE_HEX_REGEX)
-  primaryColorLight?: string | null;
-
-  @IsOptional()
-  @Matches(APPEARANCE_HEX_REGEX)
-  primaryColorDark?: string | null;
-}
-
-export class PublishSpaceDto {
-  @IsUUID()
-  spaceId: string;
-
-  @IsBoolean()
-  enabled: boolean;
-
-  @IsOptional()
-  @IsBoolean()
-  searchIndexing?: boolean;
-
-  @IsOptional()
-  @ValidateNested()
-  @Type(() => PublicSpaceAppearanceDto)
-  appearance?: PublicSpaceAppearanceDto;
-
-  @IsOptional()
-  @IsBoolean()
-  bylineAuthor?: boolean;
-
-  @IsOptional()
-  @IsBoolean()
-  bylineUpdatedAt?: boolean;
-
-  @IsOptional()
-  @IsBoolean()
-  directory?: boolean;
-}
-
-export class PublicSpaceForSpaceDto {
-  @IsUUID()
-  spaceId: string;
-}