imprensa 0.1.2 → 0.1.3

package/README.md

@@ -32,15 +32,17 @@ See `templates/starter` in the [imprensa](https://github.com/ilhajs/imprensa) mo
 
 ## Exports
 
-| Subpath                | Role                                     |
-| ---------------------- | ---------------------------------------- |
-| `imprensa`             | Vite plugin                              |
-| `imprensa/runtime`     | `createImprensa`, theme, mount/hydrate   |
-| `imprensa/prerender`   | Static prerender entry                   |
-| `imprensa/mdx`         | Routes, search index, MDX render helpers |
-| `imprensa/components`  | Layout, sidebar, search triggers         |
-| `imprensa/doc`         | Doc toolbar, pager                       |
-| `imprensa/default.css` | Docs theme + Tailwind layers             |
+| Subpath                | Role                                                     |
+| ---------------------- | -------------------------------------------------------- |
+| `imprensa`             | Vite plugin                                              |
+| `imprensa/runtime`     | `createImprensa`, theme, mount/hydrate                   |
+| `imprensa/prerender`   | Static prerender entry                                   |
+| `imprensa/mdx`         | Routes, search index, MDX render helpers                 |
+| `imprensa/components`  | Layout, sidebar, search triggers                         |
+| `imprensa/doc`         | Doc toolbar, pager                                       |
+| `imprensa/default.css` | Docs theme + Tailwind layers (import from `src/app.css`) |
+
+Import `imprensa/default.css` in your app stylesheet and keep `imprensa()` in Vite plugins so Tailwind scans imprensa’s `dist/` and `src/components` for utility classes.
 
 ## Global search
 

package/default.css

@@ -3,7 +3,9 @@
 @plugin "@tailwindcss/typography";
 @plugin "areia";
 
-@source "./src/**/*.{ts,tsx}";
+/* Class names live in prebuilt dist chunks and optional source components (npm tarball). */
+@source "./dist/**/*.{mjs,js}";
+@source "./src/components/**/*.{ts,tsx}";
 
 @layer base {
   * {

package/dist/index.mjs

@@ -493,6 +493,16 @@ function isAppPageFile(file, root) {
 	const relative = path.relative(path.join(root, "src/pages"), file).replace(/\\/g, "/");
 	return !relative.startsWith("..") && !path.isAbsolute(relative);
 }
+/** Tailwind v4 @source paths are relative to the stylesheet file (package root for npm consumers). */
+function patchImprensaDefaultCss(code, id) {
+	const file = id.split("?")[0] ?? id;
+	if (!file.endsWith(`${path.sep}imprensa${path.sep}default.css`) && !file.endsWith("/imprensa/default.css")) return;
+	const pkgRoot = path.dirname(file);
+	const distGlob = path.join(pkgRoot, "dist", "**", "*.{mjs,js}").replace(/\\/g, "/");
+	if (code.includes(distGlob)) return code;
+	const injection = `@source "${distGlob}";\n@source "${path.join(pkgRoot, "src", "components", "**", "*.{ts,tsx}").replace(/\\/g, "/")}";\n`;
+	return code.replace(/@plugin "areia";\s*\n/, `@plugin "areia";\n${injection}`);
+}
 function createImprensaVitePlugins(options = {}) {
 	const { shiki, mdx: mdxOptions = {}, pages: pagesOptions = {}, contentDir = "src/pages/(content)", detectDeadLink = true, llms = true, repo = "", repoBranch = "main", repoPath = "", hostname, head: headDefaults, socials = [], preview = {} } = options;
 	const { rehypePlugins, remarkPlugins, ...restMdxOptions } = mdxOptions;
@@ -601,6 +611,8 @@ export const shikiThemes = ${JSON.stringify(shikiThemes)};`;
 			return IMPRENSA_VIRTUAL_RUNTIME.replace("__SHIKI_THEMES__", JSON.stringify(shikiThemes));
 		},
 		transform(code, id) {
+			const cssPatch = patchImprensaDefaultCss(code, id);
+			if (cssPatch) return cssPatch;
 			if (/\.mdx?$/.test(id) && code.startsWith("---")) {
 				const end = code.indexOf("\n---", 3);
 				if (end !== -1) return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imprensa",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vite plugin and runtime for Ilha + Areia documentation sites (MDX, prerender, search)",
   "keywords": [
     "areia",
@@ -28,6 +28,7 @@
   },
   "files": [
     "dist",
+    "src/components",
     "src/docs/frontmatter.ts",
     "src/docs/mdx.ts",
     "src/docs/mdx/",

package/src/components/classes.ts

@@ -0,0 +1,3 @@
+export function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}

package/src/components/doc-pager.tsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource ilha */
+import { Icon, LayerCard } from "areia";
+import { ChevronLeft, ChevronRight } from "lucide";
+import { contentMeta, contentTree, searchDocuments, type ContentTreeNode } from "imprensa/mdx";
+import { cx } from "./classes";
+
+export type DocNavItem = {
+  title: string;
+  path: string;
+  excerpt: string;
+};
+
+const EXCERPT_MAX = 160;
+
+function excerptForPath(path: string): string {
+  const normalized = normalizePath(path);
+  const meta = contentMeta[normalized];
+  if (meta?.description?.trim()) return meta.description.trim();
+
+  const doc = searchDocuments.find((d) => normalizePath(d.path) === normalized);
+  const text = doc?.text?.trim();
+  if (!text) return "";
+
+  if (text.length <= EXCERPT_MAX) return text;
+  const slice = text.slice(0, EXCERPT_MAX);
+  const lastSpace = slice.lastIndexOf(" ");
+  return `${(lastSpace > 80 ? slice.slice(0, lastSpace) : slice).trim()}…`;
+}
+
+function normalizePath(path: string) {
+  return path.replace(/\/$/, "") || "/";
+}
+
+function flattenContentTree(nodes: ContentTreeNode[]): { title: string; path: string }[] {
+  const pages: { title: string; path: string }[] = [];
+
+  for (const node of nodes) {
+    if (node.path && node.type !== "link") pages.push({ title: node.title, path: node.path });
+    if (node.children.length > 0) pages.push(...flattenContentTree(node.children));
+  }
+
+  return pages;
+}
+
+export function getAdjacentDocs(path: string): { prev?: DocNavItem; next?: DocNavItem } {
+  const pages = flattenContentTree(contentTree);
+  const index = pages.findIndex((page) => normalizePath(page.path) === normalizePath(path));
+  if (index === -1) return {};
+
+  const toNavItem = (page: { title: string; path: string }): DocNavItem => ({
+    ...page,
+    excerpt: excerptForPath(page.path),
+  });
+
+  return {
+    prev: index > 0 ? toNavItem(pages[index - 1]) : undefined,
+    next: index < pages.length - 1 ? toNavItem(pages[index + 1]) : undefined,
+  };
+}
+
+function DocNavCard(props: { item: DocNavItem; direction: "prev" | "next" }) {
+  const isPrev = props.direction === "prev";
+
+  return (
+    <a href={props.item.path} class="group block h-full no-underline">
+      <LayerCard class="h-full transition-colors group-hover:bg-areia-control-hover">
+        <LayerCard.Content class="flex flex-col gap-2 p-4">
+          <div
+            class={cx(
+              "flex items-center gap-1.5 text-sm font-medium text-areia-strong",
+              !isPrev && "justify-end text-right",
+            )}
+          >
+            {isPrev ? <Icon icon={ChevronLeft} class="size-4 shrink-0" /> : null}
+            <span>{props.item.title}</span>
+            {!isPrev ? <Icon icon={ChevronRight} class="size-4 shrink-0" /> : null}
+          </div>
+          <p class={cx("line-clamp-2 text-sm text-areia-subtle", !isPrev && "text-right")}>
+            {props.item.excerpt}
+          </p>
+        </LayerCard.Content>
+      </LayerCard>
+    </a>
+  );
+}
+
+export function DocPager(props: { path: string }) {
+  const { prev, next } = getAdjacentDocs(props.path);
+  if (!prev && !next) return null;
+
+  return (
+    <nav class="not-prose grid gap-4 py-12 sm:grid-cols-2" aria-label="Documentation pagination">
+      {prev ? <DocNavCard item={prev} direction="prev" /> : <div aria-hidden="true" />}
+      {next ? <DocNavCard item={next} direction="next" /> : <div aria-hidden="true" />}
+    </nav>
+  );
+}

package/src/components/doc-toolbar.tsx

@@ -0,0 +1,143 @@
+/** @jsxImportSource ilha */
+import type { RawHtml } from "ilha";
+import { useRoute } from "@ilha/router";
+import { Button, Dropdown, Icon } from "areia";
+import ilha from "ilha";
+import { MobileNavigationPopover } from "./mobile-nav";
+import { SearchMobileTriggerButton } from "./search";
+import { ChevronDown, Copy, ExternalLink, FileText, GitBranch, MessageSquare } from "lucide";
+import { toast } from "sonner";
+import { articleClass, contentMeta, getDocLinks } from "imprensa/mdx";
+import { DocPager } from "./doc-pager";
+import { cx } from "./classes";
+
+function absoluteUrl(path: string) {
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).href;
+}
+
+function aiPromptUrl(service: "chatgpt" | "claude", markdownUrl: string) {
+  const prompt = `Read ${markdownUrl}`;
+  const encoded = encodeURIComponent(prompt);
+
+  if (service === "chatgpt") return `https://chatgpt.com/?q=${encoded}`;
+  return `https://claude.ai/new?q=${encoded}`;
+}
+
+async function copyMarkdownForRoute(route: string) {
+  const links = getDocLinks(route);
+  if (!links) return;
+
+  try {
+    const text =
+      links.rawMarkdown ??
+      (await fetch(links.markdownUrl).then((response) => {
+        if (!response.ok) throw new Error("Failed to fetch markdown");
+        return response.text();
+      }));
+
+    await navigator.clipboard.writeText(text);
+    toast.success("Markdown copied to clipboard");
+  } catch {
+    toast.error("Failed to copy markdown");
+  }
+}
+
+export const DocToolbar = ilha.input<{ path: string }>().render(({ input }) => {
+  const links = getDocLinks(input.path);
+  if (!links) return <></>;
+
+  const markdownUrl = absoluteUrl(links.markdownUrl);
+  const items = [
+    {
+      label: "Copy Markdown",
+      value: "copy-markdown",
+      icon: <Icon icon={Copy} class="size-4" />,
+    },
+    ...(links.githubUrl
+      ? [
+          {
+            label: "Open in GitHub",
+            href: links.githubUrl,
+            external: true,
+            icon: <Icon icon={GitBranch} class="size-4" />,
+          },
+        ]
+      : []),
+    {
+      label: "View as Markdown",
+      href: links.markdownUrl,
+      external: true,
+      icon: <Icon icon={FileText} class="size-4" />,
+      "data-no-intercept": true,
+    },
+    {
+      label: "Open in ChatGPT",
+      href: aiPromptUrl("chatgpt", markdownUrl),
+      external: true,
+      icon: <Icon icon={MessageSquare} class="size-4" />,
+    },
+    {
+      label: "Open in Claude",
+      href: aiPromptUrl("claude", markdownUrl),
+      external: true,
+      icon: <Icon icon={ExternalLink} class="size-4" />,
+    },
+  ];
+
+  const { path: routePath } = useRoute();
+
+  return (
+    <div
+      class="not-prose fixed inset-x-0 top-0 z-30 mb-6 flex w-auto flex-wrap items-center justify-between gap-2 border-b border-areia-border bg-areia-background/90 px-4 py-2 backdrop-blur md:static md:inset-auto md:w-full md:border-b-0 md:bg-transparent md:p-0 md:backdrop-blur-none"
+      data-doc-route={input.path}
+    >
+      <div class="flex shrink-0 items-center gap-2 md:hidden">
+        <MobileNavigationPopover currentPath={routePath()} />
+        <SearchMobileTriggerButton />
+      </div>
+      <div class="flex flex-wrap items-center justify-end gap-2 md:ml-auto">
+        <Dropdown
+          align="end"
+          side="bottom"
+          onSelect={(value) => {
+            if (value === "copy-markdown") void copyMarkdownForRoute(input.path);
+          }}
+          trigger={
+            <Button
+              variant="outline"
+              shape="square"
+              aria-label="Open"
+              class="shrink-0 md:!size-auto md:!h-9 md:min-w-[4.5rem] md:gap-1.5 md:rounded-lg md:px-3"
+              icon={<Icon icon={ChevronDown} class="size-4" />}
+            >
+              <span class="hidden md:inline">Open In</span>
+            </Button>
+          }
+          items={items}
+        />
+      </div>
+    </div>
+  );
+});
+
+export function DocArticle(props: { path: string; children: RawHtml | string; class?: string }) {
+  const meta = contentMeta[props.path.replace(/\/$/, "") || "/"];
+  const articleClasses =
+    props.class ?? (meta?.type === "custom" ? "w-full max-w-none" : articleClass);
+
+  const isCustom = meta?.type === "custom";
+
+  return (
+    <div
+      class={cx(
+        "flex min-h-0 w-full flex-1 flex-col",
+        !isCustom && "mx-auto max-w-4xl pt-14 md:pt-0",
+      )}
+    >
+      {isCustom ? null : <DocToolbar path={props.path} />}
+      <article class={cx(articleClasses, "flex-1")}>{props.children}</article>
+      {isCustom ? null : <DocPager path={props.path} />}
+    </div>
+  );
+}

package/src/components/doc.tsx

@@ -0,0 +1,2 @@
+export { DocArticle, DocToolbar } from "./doc-toolbar";
+export { DocPager, getAdjacentDocs, type DocNavItem } from "./doc-pager";

package/src/components/global-search.tsx

@@ -0,0 +1,141 @@
+/** @jsxImportSource ilha */
+import { Dialog, Icon } from "areia";
+import ilha from "ilha";
+import { Search, X } from "lucide";
+import { closeSearch, openSearch, searchOpen, searchQuery, toggleSearch } from "./search-store";
+import { attachPortaledSearchBridge, onSearchPortalMounted } from "./search-portal-sync";
+
+const HOST_ID = "imprensa-global-search-host";
+
+function syncSearchHostVisibility(open = searchOpen()) {
+  document.getElementById(HOST_ID)?.toggleAttribute("hidden", !open);
+}
+
+function mountSearchShortcuts() {
+  const onTriggerClick = (event: MouseEvent) => {
+    const target = event.target;
+    if (!(target instanceof Element) || !target.closest("[data-search-trigger]")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    openSearch();
+  };
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      toggleSearch();
+      return;
+    }
+    if (event.key === "Escape" && searchOpen()) {
+      event.preventDefault();
+      closeSearch();
+    }
+  };
+
+  document.addEventListener("click", onTriggerClick, true);
+  window.addEventListener("keydown", onKeydown);
+  return () => {
+    document.removeEventListener("click", onTriggerClick, true);
+    window.removeEventListener("keydown", onKeydown);
+  };
+}
+
+export const GlobalSearch = ilha
+  .effect(() => {
+    const open = searchOpen();
+    syncSearchHostVisibility(open);
+    if (!open) return;
+    let tries = 0;
+    const restore = () => {
+      const portal = document.querySelector<HTMLElement>(
+        '[data-slot="dialog-portal"][data-state="open"]',
+      );
+      if (portal) {
+        onSearchPortalMounted(portal, searchQuery);
+        return;
+      }
+      if (++tries < 24) requestAnimationFrame(restore);
+    };
+    requestAnimationFrame(restore);
+  })
+  .onMount(() => {
+    const unlisten = mountSearchShortcuts();
+    const detachBridge = attachPortaledSearchBridge({
+      isOpen: searchOpen,
+      getQuery: searchQuery,
+      setQuery: (value) => searchQuery(value),
+      onClose: closeSearch,
+      onNavigate: (path) => window.location.assign(path),
+    });
+    return () => {
+      unlisten();
+      detachBridge();
+    };
+  })
+  .render(() => (
+    <Dialog
+      bind:open={searchOpen as never}
+      closeOnClickOutside
+      closeOnEscape
+      lockScroll
+      onOpenChange={(open: boolean) => {
+        if (!open) closeSearch();
+      }}
+      onPortalMounted={(container) => onSearchPortalMounted(container, searchQuery)}
+    >
+      <Dialog.Trigger as="button" type="button" class="sr-only" tabIndex={-1} aria-hidden="true">
+        Search
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay class="backdrop-blur-sm" />
+        <Dialog.Content size="lg" class="grid gap-0 p-0 min-w-[min(100%,32rem)]">
+          <div data-imprensa-search-dialog data-slot="command" data-label="Search documentation">
+            <Dialog.Title class="sr-only">Search documentation</Dialog.Title>
+            <div
+              data-slot="command-input-wrapper"
+              class="flex h-12 items-center gap-2 border-b border-areia-border px-3"
+            >
+              <Icon icon={Search} class="size-4 shrink-0 text-areia-foreground/60" />
+              <input
+                data-search-input
+                data-slot="command-input"
+                type="search"
+                autocomplete="off"
+                spellcheck={false}
+                placeholder="Search documentation..."
+                class="h-full flex-1 bg-transparent text-sm leading-none outline-none"
+              />
+              <Dialog.Close
+                as="button"
+                type="button"
+                class="flex size-7 items-center justify-center rounded-md hover:bg-areia-control-hover"
+                aria-label="Close search"
+              >
+                <Icon icon={X} class="size-4" />
+              </Dialog.Close>
+            </div>
+            <div data-slot="command-list" class="max-h-96 overflow-y-auto p-2 hidden" />
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  ));
+
+let globalSearchUnmount: (() => void) | undefined;
+
+export function ensureGlobalSearchMounted() {
+  if (typeof document === "undefined" || globalSearchUnmount) return;
+
+  let host = document.getElementById(HOST_ID);
+  if (!host) {
+    host = document.createElement("div");
+    host.id = HOST_ID;
+    host.hidden = true;
+    document.body.appendChild(host);
+  }
+
+  syncSearchHostVisibility(false);
+
+  const result = GlobalSearch.mount(host);
+  globalSearchUnmount = typeof result === "function" ? result : () => {};
+}

package/src/components/icons.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource ilha */
+import type { RawHtml } from "ilha";
+import { raw } from "ilha";
+import type { ImprensaSocialService } from "../docs/socials";
+
+export type { ImprensaSocialService } from "../docs/socials";
+
+function escapeAttribute(value: string) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+function svg(className: string | undefined, path: string) {
+  const classAttr = className ? ` class="${escapeAttribute(className)}"` : "";
+  return raw(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"${classAttr}><path d="${path}"/></svg>`,
+  );
+}
+
+const PATHS = {
+  github:
+    "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z",
+  x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+  discord:
+    "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
+} as const satisfies Record<ImprensaSocialService, string>;
+
+/** Social brand icon — `icon` matches `imprensa({ socials })` `service` values. */
+export function Icon(props: { icon: ImprensaSocialService; class?: string }): RawHtml {
+  return svg(props.class, PATHS[props.icon]);
+}
+
+/** @deprecated Use `<Icon icon="github" />` from `imprensa/icons`. */
+export function GithubIcon(props: { class?: string }) {
+  return Icon({ icon: "github", class: props.class });
+}
+
+/** @deprecated Use `<Icon icon="x" />`. */
+export function XIcon(props: { class?: string }) {
+  return Icon({ icon: "x", class: props.class });
+}
+
+/** @deprecated Use `<Icon icon="discord" />`. */
+export function DiscordIcon(props: { class?: string }) {
+  return Icon({ icon: "discord", class: props.class });
+}

package/src/components/ilha-ui.ts

@@ -0,0 +1,6 @@
+import type { RawHtml } from "ilha";
+
+/** JSX nodes returned from Ilha render helpers in imprensa components. */
+export type ImprensaUiNode = RawHtml | string | number | boolean | null | undefined;
+
+export type ImprensaUiTree = ImprensaUiNode | ImprensaUiTree[];

package/src/components/index.tsx

@@ -0,0 +1,13 @@
+export {
+  LogoButton,
+  ThemeToggle,
+  SearchOverlay,
+  SearchNavbarTrigger,
+  SearchSidebarTrigger,
+} from "./search";
+export { Sidebar } from "./sidebar";
+export { ContentLayout, RootLayout } from "./layout";
+export { Preview } from "./preview";
+export { Snippet } from "./snippet";
+export { DocArticle, DocToolbar } from "./doc-toolbar";
+export { DocPager, getAdjacentDocs, type DocNavItem } from "./doc-pager";

package/src/components/layout.tsx

@@ -0,0 +1,110 @@
+/** @jsxImportSource ilha */
+import { defineLayout, routeHash } from "@ilha/router";
+import { Resizable, Toaster } from "areia";
+import ilha from "ilha";
+
+import { Sidebar } from "./sidebar";
+import { DEFAULT_SIDEBAR_LAYOUT, readSidebarLayout, writeSidebarLayout } from "./sidebar-layout";
+
+const initialSidebarLayout =
+  typeof window !== "undefined" ? readSidebarLayout() : DEFAULT_SIDEBAR_LAYOUT;
+
+function layoutsNearlyEqual(a: number[], b: [number, number]) {
+  return a.length === 2 && Math.abs(a[0] - b[0]) < 0.05 && Math.abs(a[1] - b[1]) < 0.05;
+}
+
+function mountSidebarLayoutPersistence(host: Element) {
+  let resizable: HTMLElement | null = null;
+  let persist = false;
+  const stored = readSidebarLayout();
+
+  const onLayoutChange = (event: Event) => {
+    if (!persist) return;
+    const { layout } = (event as CustomEvent<{ layout: number[] }>).detail;
+    if (!Array.isArray(layout) || layout.length !== 2) return;
+    writeSidebarLayout(layout);
+    document.documentElement.dataset.imprensaSidebarLayout = "1";
+    document.documentElement.style.setProperty("--imprensa-sidebar-pct", String(layout[0]));
+    document.documentElement.style.setProperty("--imprensa-content-pct", String(layout[1]));
+  };
+
+  const connect = () => {
+    resizable = host.querySelector<HTMLElement>('[data-slot="resizable"]');
+    if (!resizable) return;
+
+    resizable.addEventListener("resizable:change", onLayoutChange);
+
+    if (
+      document.documentElement.dataset.imprensaSidebarLayout !== "1" &&
+      !layoutsNearlyEqual(stored, DEFAULT_SIDEBAR_LAYOUT)
+    ) {
+      resizable.dispatchEvent(
+        new CustomEvent("resizable:set", { detail: { layout: [...stored] }, bubbles: true }),
+      );
+    }
+    persist = true;
+  };
+
+  queueMicrotask(connect);
+
+  return () => {
+    resizable?.removeEventListener("resizable:change", onLayoutChange);
+  };
+}
+
+const DOCS_LAYOUT_CLASS = "imprensa-docs-layout";
+
+function mountDocsViewportLock() {
+  document.documentElement.classList.add(DOCS_LAYOUT_CLASS);
+  return () => {
+    document.documentElement.classList.remove(DOCS_LAYOUT_CLASS);
+  };
+}
+
+export const RootLayout = defineLayout((children) =>
+  ilha.render(() => (
+    <div class="imprensa-root bg-areia-background text-areia-default">
+      <Toaster richColors closeButton />
+      <main class="imprensa-root-main">{children}</main>
+    </div>
+  )),
+);
+
+export const ContentLayout = defineLayout((children) => {
+  return ilha
+    .effect(() => {
+      const hash = routeHash();
+      if (hash)
+        requestAnimationFrame(() => document.getElementById(hash.slice(1))?.scrollIntoView());
+    })
+    .onMount(({ host }) => {
+      const unlockViewport = mountDocsViewportLock();
+      const disconnectLayout = mountSidebarLayoutPersistence(host);
+      return () => {
+        disconnectLayout();
+        unlockViewport();
+      };
+    })
+    .render(() => (
+      <div class="imprensa-docs-shell flex h-dvh w-full overflow-hidden bg-areia-background text-areia-default">
+        <Resizable direction="horizontal" class="h-full min-h-0 w-full">
+          <Resizable.Panel
+            defaultSize={initialSidebarLayout[0]}
+            minSize={15}
+            maxSize={35}
+            class="imprensa-docs-sidebar-panel max-md:!hidden"
+          >
+            <Sidebar />
+          </Resizable.Panel>
+          <Resizable.Handle class="max-md:!hidden" />
+          <Resizable.Panel
+            defaultSize={initialSidebarLayout[1]}
+            minSize={50}
+            class="imprensa-docs-main-panel"
+          >
+            <div class="imprensa-docs-main-scroll flex w-full flex-col p-4">{children}</div>
+          </Resizable.Panel>
+        </Resizable>
+      </div>
+    ));
+});