imprensa 0.1.2 → 0.1.3

package/src/components/mobile-nav.tsx

@@ -0,0 +1,102 @@
+/** @jsxImportSource ilha */
+import { Button, Icon, LinkButton, Popover } from "areia";
+import { ExternalLink } from "lucide";
+import { contentTree, type ContentTreeNode } from "imprensa/mdx";
+import { NavFooterBar } from "./nav-footer-bar";
+import { LogoButton } from "./search";
+import type { ImprensaUiTree } from "./ilha-ui";
+import { cx } from "./classes";
+import { treeIndentClass } from "./tree-indent";
+
+const ACTIVE_LINK_CLASS = "border-areia-primary text-areia-primary ring-1 ring-areia-primary/30";
+
+function normalizePath(path: string) {
+  return path.replace(/\/$/, "") || "/";
+}
+
+function renderMobileTree(
+  nodes: ContentTreeNode[],
+  currentPath: string,
+  depth = 0,
+): ImprensaUiTree[] {
+  return nodes.flatMap((node) => {
+    const href = node.type === "link" ? node.link : node.path;
+    const active =
+      node.path && node.type !== "link" ? normalizePath(node.path) === currentPath : false;
+    const items: ImprensaUiTree[] = [];
+    if (href) {
+      items.push(
+        <Popover.Close>
+          <div class={treeIndentClass(depth)}>
+            <LinkButton
+              href={href}
+              external={node.external}
+              variant={active ? "outline" : "ghost"}
+              class={cx(
+                "w-full justify-start",
+                node.type === "link" && node.external && "justify-between",
+                active && ACTIVE_LINK_CLASS,
+              )}
+            >
+              <span class="min-w-0 truncate">{node.title}</span>
+              {node.type === "link" && node.external ? (
+                <Icon icon={ExternalLink} class="size-3.5 shrink-0" />
+              ) : null}
+            </LinkButton>
+          </div>
+        </Popover.Close>,
+      );
+    } else {
+      items.push(
+        <span
+          class={cx("mt-2 block text-sm font-medium text-areia-subtle", treeIndentClass(depth))}
+        >
+          {node.title}
+        </span>,
+      );
+    }
+    if (node.children.length > 0)
+      items.push(...renderMobileTree(node.children, currentPath, depth + 1));
+    return items;
+  });
+}
+
+export function MobileNavigationPopover(props: { currentPath: string }) {
+  const currentPath = normalizePath(props.currentPath);
+  return (
+    <Popover
+      side="bottom"
+      align="start"
+      contentClass="z-50"
+      trigger={
+        <Button shape="square" aria-label="Open navigation">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </Button>
+      }
+      content={
+        <div class="flex w-64 max-h-[70dvh] flex-col gap-2 p-1">
+          <div class="flex shrink-0 items-center px-1 pb-1">
+            <LogoButton />
+          </div>
+          <nav class="min-h-0 flex-1 overflow-y-auto flex flex-col gap-1">
+            {renderMobileTree(contentTree, currentPath)}
+          </nav>
+          <NavFooterBar />
+        </div>
+      }
+    />
+  );
+}

package/src/components/nav-footer-bar.tsx

@@ -0,0 +1,34 @@
+/** @jsxImportSource ilha */
+import { LinkButton } from "areia";
+import { socials } from "imprensa/config";
+import { cx } from "./classes";
+import { Icon } from "./icons";
+import { ThemeToggle } from "./search";
+
+export function NavFooterBar(props: { class?: string }) {
+  return (
+    <div
+      class={cx(
+        "flex shrink-0 items-center justify-between rounded-lg border border-areia-border bg-areia-surface-muted/60 p-1",
+        props.class,
+      )}
+    >
+      <div class="flex items-center gap-0">
+        {socials.map((s) => (
+          <LinkButton
+            href={s.url}
+            shape="square"
+            variant="ghost"
+            icon={<Icon icon={s.service} class="size-4" />}
+            external
+            aria-label={s.service}
+            class="shrink-0"
+          />
+        ))}
+      </div>
+      <div class="ml-auto">
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

package/src/components/preview.tsx

@@ -0,0 +1,83 @@
+/** @jsxImportSource ilha */
+import ilha from "ilha";
+import { preview as previewConfig, shikiThemes } from "imprensa/config";
+import type { ImprensaShikiHighlighter } from "../core/shiki-types";
+
+const DEFAULT_IMPORTMAP = { imports: {} as Record<string, string> };
+
+const DEFAULT_HEAD = ``;
+
+function makeIframeDoc(code: string) {
+  const script = code
+    .replace(/^export default /m, "const __island = ")
+    .replace(/^export const (\w+)/m, "const $1");
+
+  const importmap = previewConfig.importmap
+    ? { imports: { ...DEFAULT_IMPORTMAP.imports, ...JSON.parse(previewConfig.importmap).imports } }
+    : DEFAULT_IMPORTMAP;
+
+  const head = previewConfig.head ?? DEFAULT_HEAD;
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script>const localStorage = { getItem: () => null, setItem: () => {}, removeItem: () => {} };</script>
+  <script type="importmap">${JSON.stringify(importmap)}</script>
+  <script type="module" src="https://esm.sh/tsx"></script>
+  ${head}
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel" data-type="module">
+    ${script}
+    const __resolved = typeof __island !== 'undefined' ? __island : typeof App !== 'undefined' ? App : undefined;
+    if (__resolved?.mount) __resolved.mount(document.getElementById('root'));
+  </script>
+</body>
+</html>`;
+}
+
+export const Preview = ilha
+  .input<{ code64: string }>()
+  .onMount(({ host, input }) => {
+    const code = atob(input.code64);
+    const wrapper = host.querySelector<HTMLElement>(".preview-wrapper")!;
+
+    const pre = document.createElement("pre");
+    pre.className =
+      "rounded-lg bg-areia-surface-muted border border-areia-border p-4 overflow-x-auto text-sm";
+    pre.innerHTML = `<code>${code.replace(/&/g, "&amp;").replace(/</g, "&lt;")}</code>`;
+    wrapper.appendChild(pre);
+
+    const iframe = document.createElement("iframe");
+    iframe.className = "rounded-lg border border-areia-border w-full min-h-32";
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin");
+    iframe.srcdoc = makeIframeDoc(code);
+    wrapper.appendChild(iframe);
+
+    iframe.addEventListener("load", () => {
+      const syncDark = () => {
+        const dark = document.documentElement.classList.contains("dark");
+        iframe.contentDocument?.documentElement.classList.toggle("dark", dark);
+      };
+      syncDark();
+      new MutationObserver(syncDark).observe(document.documentElement, {
+        attributeFilter: ["class"],
+      });
+    });
+
+    void import("imprensa/shiki").then(async ({ shiki }) => {
+      const previewHighlighter = shiki as ImprensaShikiHighlighter;
+      await previewHighlighter.loadLanguage("tsx");
+      const div = document.createElement("div");
+      div.className =
+        "rounded-lg overflow-hidden border border-areia-border text-sm [&_pre]:!p-4 [&_pre]:!m-0 [&_pre]:overflow-x-auto";
+      div.innerHTML = previewHighlighter.codeToHtml(code, {
+        lang: "tsx",
+        themes: shikiThemes,
+      });
+      wrapper.replaceChild(div, pre);
+    });
+  })
+  .render(() => <div class="not-prose flex flex-col gap-4 preview-wrapper" />);

package/src/components/search-core.tsx

@@ -0,0 +1,47 @@
+import MiniSearch from "minisearch";
+import { searchDocuments } from "imprensa/mdx";
+
+type SearchDocument = (typeof searchDocuments)[number];
+export type SearchResult = Pick<SearchDocument, "id" | "title" | "path" | "text">;
+
+const searchIndex = new MiniSearch<SearchDocument>({
+  fields: ["title", "text"],
+  storeFields: ["title", "path", "text"],
+  searchOptions: { boost: { title: 3 }, fuzzy: 0.2, prefix: true },
+});
+searchIndex.addAll(searchDocuments);
+
+function getQueryTerms(query: string) {
+  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+
+function getTextMatchIndex(text: string, query: string) {
+  const normalizedText = text.toLowerCase();
+  return getQueryTerms(query)
+    .map((term) => normalizedText.indexOf(term))
+    .filter((index) => index >= 0)
+    .sort((a, b) => a - b)[0];
+}
+
+export function getMatchedExcerpt(text: string, query: string) {
+  const firstMatch = getTextMatchIndex(text, query);
+  if (firstMatch === undefined) return undefined;
+  const start = Math.max(0, firstMatch - 60);
+  const end = Math.min(text.length, firstMatch + 140);
+  const excerpt = text.slice(start, end).trim();
+  return `${start > 0 ? "…" : ""}${excerpt}${end < text.length ? "…" : ""}`;
+}
+
+export function getSearchResults(query: string): SearchResult[] {
+  const trimmedQuery = query.trim();
+  if (!trimmedQuery) return [];
+  return searchIndex
+    .search(trimmedQuery)
+    .slice(0, 8)
+    .map((result) => ({
+      id: result.id,
+      title: result.title,
+      path: result.path,
+      text: result.text,
+    }));
+}

package/src/components/search-portal-sync.ts

@@ -0,0 +1,234 @@
+/**
+ * Areia Dialog portals to document.body; Ilha does not morph that subtree.
+ * Syncs command-list + keyboard nav until Areia supports portal={false} on body hosts.
+ */
+import { Command as CommandPrimitive } from "@areia/slots";
+import { getMatchedExcerpt, getSearchResults, type SearchResult } from "./search-core";
+
+function escapeHtml(text: string) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function highlightPlain(text: string, query: string) {
+  const terms = query
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((t) => t.length > 1);
+  if (terms.length === 0) return escapeHtml(text);
+  const pattern = new RegExp(
+    `(${terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
+    "gi",
+  );
+  return text
+    .split(pattern)
+    .map((part) =>
+      terms.includes(part.toLowerCase())
+        ? `<mark class="rounded bg-areia-primary px-0.5 text-areia-primary-foreground">${escapeHtml(part)}</mark>`
+        : escapeHtml(part),
+    )
+    .join("");
+}
+
+export function findOpenSearchCommandRoot(): HTMLElement | null {
+  const portal = document.querySelector('[data-slot="dialog-portal"][data-state="open"]');
+  if (portal) {
+    const inPortal = portal.querySelector<HTMLElement>(
+      '[data-imprensa-search-dialog][data-slot="command"]',
+    );
+    if (inPortal) return inPortal;
+  }
+  return document.querySelector<HTMLElement>('[data-imprensa-search-dialog][data-slot="command"]');
+}
+
+function findListIn(root: HTMLElement | null): HTMLElement | null {
+  if (!root) return null;
+  return root.querySelector('[data-slot="command-list"]');
+}
+
+function findInputIn(root: HTMLElement | null): HTMLInputElement | null {
+  if (!root) return null;
+  return root.querySelector("[data-search-input]");
+}
+
+export function syncPortaledSearchList(
+  query: string,
+  results: SearchResult[],
+  root?: HTMLElement | null,
+) {
+  const commandRoot = root ?? findOpenSearchCommandRoot();
+  const list = findListIn(commandRoot);
+  if (!list) return false;
+
+  const trimmed = query.trim();
+  if (!trimmed) {
+    list.classList.add("hidden");
+    list.innerHTML = "";
+    return true;
+  }
+
+  list.classList.remove("hidden");
+
+  if (results.length === 0) {
+    list.innerHTML = `<div data-slot="command-group">
+      <div data-slot="command-group-heading" class="px-3 py-1 text-xs font-medium text-areia-foreground/60">Pages</div>
+      <div data-slot="command-empty" class="px-3 py-6 text-center text-sm text-areia-foreground/60">No results found.</div>
+    </div>`;
+    return true;
+  }
+
+  const items = results
+    .map((result) => {
+      const excerpt = getMatchedExcerpt(result.text, query);
+      const titleHtml = highlightPlain(result.title, query);
+      const excerptHtml = excerpt
+        ? `<div class="mt-1 line-clamp-2 text-xs text-areia-foreground/60">${highlightPlain(excerpt, query)}</div>`
+        : "";
+      return `<div data-slot="command-item" data-value="${escapeHtml(result.path)}" data-keywords="${escapeHtml(`${result.title}\n${result.text}`)}" class="cursor-pointer rounded-lg px-3 py-2 text-sm data-selected:bg-areia-control-hover">
+        <div class="font-medium">${titleHtml}</div>
+        ${excerptHtml}
+      </div>`;
+    })
+    .join("");
+
+  list.innerHTML = `<div data-slot="command-group">
+    <div data-slot="command-group-heading" class="px-3 py-1 text-xs font-medium text-areia-foreground/60">Pages</div>
+    ${items}
+  </div>`;
+  return true;
+}
+
+export type PortaledSearchBridgeOptions = {
+  isOpen: () => boolean;
+  getQuery: () => string;
+  setQuery: (value: string) => void;
+  onClose: () => void;
+  onNavigate: (path: string) => void;
+};
+
+function syncInputFromSaved(root: HTMLElement, saved: string) {
+  const input = findInputIn(root);
+  if (input && input.value !== saved) input.value = saved;
+}
+
+function searchDialogOpenInDom(): boolean {
+  return findOpenSearchCommandRoot() !== null;
+}
+
+export function attachPortaledSearchBridge(options: PortaledSearchBridgeOptions) {
+  const { isOpen, getQuery, setQuery, onClose, onNavigate } = options;
+  let commandDestroy = () => {};
+  let commandRoot: HTMLElement | null = null;
+
+  const repaint = (query: string, root?: HTMLElement | null) => {
+    syncPortaledSearchList(query, getSearchResults(query), root ?? findOpenSearchCommandRoot());
+  };
+
+  const ensureCommand = (root: HTMLElement) => {
+    if (root === commandRoot) return;
+    commandDestroy();
+    commandRoot = root;
+    const saved = getQuery();
+    syncInputFromSaved(root, saved);
+    const controller = CommandPrimitive.createCommand(root, {
+      label: "Search documentation",
+      loop: true,
+      shouldFilter: false,
+      onSearchChange: (value: string) => {
+        setQuery(value);
+        repaint(value, root);
+      },
+      onSelect: (value: string) => {
+        onClose();
+        onNavigate(value);
+      },
+    });
+    commandDestroy = () => controller.destroy();
+    repaint(saved, root);
+    findInputIn(root)?.focus();
+  };
+
+  const active = () => isOpen() || searchDialogOpenInDom();
+
+  const handleQueryFromInput = (input: HTMLInputElement) => {
+    if (!input.closest("[data-imprensa-search-dialog]")) return;
+    const root = input.closest<HTMLElement>('[data-slot="command"]');
+    if (!root) return;
+    const query = input.value;
+    setQuery(query);
+    repaint(query, root);
+    ensureCommand(root);
+  };
+
+  const onInput = (event: Event) => {
+    if (!active()) return;
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || !target.matches("[data-search-input]")) return;
+    handleQueryFromInput(target);
+  };
+
+  const onClick = (event: MouseEvent) => {
+    if (!active()) return;
+    const item = (event.target as Element | null)?.closest<HTMLElement>(
+      '[data-slot="command-item"]',
+    );
+    if (!item?.closest("[data-imprensa-search-dialog]")) return;
+    const path = item.getAttribute("data-value");
+    if (!path) return;
+    event.preventDefault();
+    onClose();
+    onNavigate(path);
+  };
+
+  document.addEventListener("input", onInput, true);
+  document.addEventListener("click", onClick, true);
+
+  const tick = () => {
+    if (!active()) {
+      if (commandRoot) {
+        commandDestroy();
+        commandDestroy = () => {};
+        commandRoot = null;
+      }
+      return;
+    }
+    const root = findOpenSearchCommandRoot();
+    if (!root) return;
+    const saved = getQuery();
+    syncInputFromSaved(root, saved);
+    ensureCommand(root);
+    repaint(saved, root);
+  };
+
+  const interval = window.setInterval(tick, 50);
+  tick();
+
+  return () => {
+    window.clearInterval(interval);
+    document.removeEventListener("input", onInput, true);
+    document.removeEventListener("click", onClick, true);
+    commandDestroy();
+    commandRoot = null;
+  };
+}
+
+export function onSearchPortalMounted(container: HTMLElement, getSavedQuery: () => string) {
+  const root = container.querySelector<HTMLElement>(
+    '[data-imprensa-search-dialog][data-slot="command"]',
+  );
+  if (!root) return;
+  const input = findInputIn(root);
+  const query = getSavedQuery();
+  if (input) input.value = query;
+  syncPortaledSearchList(query, getSearchResults(query), root);
+  input?.focus();
+  if (query.length > 0) {
+    requestAnimationFrame(() => {
+      input?.setSelectionRange(query.length, query.length);
+    });
+  }
+}

package/src/components/search-store.ts

@@ -0,0 +1,34 @@
+import { createStore } from "@ilha/store";
+
+export type ImprensaSearchState = {
+  open: boolean;
+  query: string;
+};
+
+export const searchStore = createStore<ImprensaSearchState>({
+  open: false,
+  query: "",
+});
+
+/** Hoisted for `bind:open` / portaled bridge — same alien-signals graph as islands. */
+export const searchOpen = searchStore.bind((s) => s.open);
+export const searchQuery = searchStore.bind((s) => s.query);
+
+export function closeSearch() {
+  searchOpen(false);
+}
+
+export function openSearch() {
+  searchOpen(true);
+}
+
+export function toggleSearch() {
+  if (searchOpen()) closeSearch();
+  else openSearch();
+}
+
+/** Legacy alias for store bind accessors (optional app code). */
+export type SearchBindAccessors = {
+  dialogOpen: typeof searchOpen;
+  query: typeof searchQuery;
+};

package/src/components/search.tsx

@@ -0,0 +1,140 @@
+/** @jsxImportSource ilha */
+import { Button, Icon, LinkButton } from "areia";
+import ilha from "ilha";
+import { Command, Monitor, Moon, Search, Sun } from "lucide";
+import { applyThemeToHtml, getStoredTheme, setStoredTheme } from "imprensa/runtime";
+
+export { getSearchResults, type SearchResult } from "./search-core";
+export {
+  closeSearch,
+  closeSearch as closeSearchDialog,
+  openSearch,
+  searchOpen,
+  searchQuery,
+  searchStore,
+  toggleSearch,
+  type ImprensaSearchState,
+  type SearchBindAccessors,
+} from "./search-store";
+
+export function LogoButton() {
+  return (
+    <LinkButton href="/" class="font-semibold" icon={<img src="/logo.svg" class="size-6" />}>
+      Imprensa
+    </LinkButton>
+  );
+}
+
+export const ThemeToggle = ilha
+  .state("mode", "system" as "light" | "dark" | "system")
+  .onMount(({ state }) => {
+    const mode = getStoredTheme();
+    state.mode(mode);
+
+    const applySystem = () =>
+      applyThemeToHtml(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (state.mode() === "system") applySystem();
+    };
+    mq.addEventListener("change", handler);
+
+    if (mode === "system") applySystem();
+    else applyThemeToHtml(mode === "dark");
+
+    return () => mq.removeEventListener("change", handler);
+  })
+  .on("button@click", ({ state }) => {
+    const next = state.mode() === "light" ? "dark" : state.mode() === "dark" ? "system" : "light";
+    state.mode(next);
+    setStoredTheme(next);
+    if (next === "system")
+      applyThemeToHtml(window.matchMedia("(prefers-color-scheme: dark)").matches);
+    else applyThemeToHtml(next === "dark");
+  })
+  .render(({ state }) => (
+    <Button
+      shape="square"
+      aria-label={
+        state.mode() === "light"
+          ? "Switch to dark theme"
+          : state.mode() === "dark"
+            ? "Switch to system theme"
+            : "Switch to light theme"
+      }
+      icon={
+        <Icon icon={state.mode() === "light" ? Sun : state.mode() === "dark" ? Moon : Monitor} />
+      }
+    />
+  ));
+
+/**
+ * @deprecated Replaced by `GlobalSearch` (body-mounted in `createImprensa().init()`).
+ * Kept so the vite plugin island registry stays stable.
+ */
+export const SearchOverlay = ilha.render(() => <></>);
+
+export function SearchTriggerButton(props: { class?: string }) {
+  return (
+    <Button
+      type="button"
+      data-search-trigger
+      aria-label="Search documentation"
+      icon={<Icon icon={Search} />}
+      class={props.class}
+    />
+  );
+}
+
+export function SearchSidebarTrigger() {
+  return (
+    <div class="relative inline-flex w-full min-w-0">
+      <Button
+        type="button"
+        data-search-trigger
+        aria-label="Search documentation"
+        icon={<Icon icon={Search} />}
+        class="w-10 justify-center sm:w-full sm:justify-start"
+      >
+        <span class="hidden sm:inline">Search</span>
+        <kbd class="ml-auto hidden items-center border border-areia-border py-px px-1 rounded-full md:flex">
+          <Icon icon={Command} class="size-3" />
+          <span>K</span>
+        </kbd>
+      </Button>
+    </div>
+  );
+}
+
+export function SearchMobileTriggerButton() {
+  return (
+    <Button
+      type="button"
+      shape="square"
+      data-search-trigger
+      aria-label="Search documentation"
+      icon={<Icon icon={Search} />}
+      class="shrink-0"
+    />
+  );
+}
+
+export function SearchNavbarTrigger() {
+  return (
+    <div class="relative inline-flex min-w-0">
+      <Button
+        type="button"
+        data-search-trigger
+        aria-label="Search documentation"
+        icon={<Icon icon={Search} />}
+        class="w-10 shrink-0 justify-center sm:w-auto sm:min-w-[7.5rem] sm:justify-start sm:gap-2 sm:px-3"
+      >
+        <span class="hidden sm:inline">Search</span>
+        <kbd class="ml-auto hidden items-center border border-areia-border py-px px-1 rounded-full md:inline-flex">
+          <Icon icon={Command} class="size-3" />
+          <span>K</span>
+        </kbd>
+      </Button>
+    </div>
+  );
+}