@takazudo/zudo-doc 0.1.0

package/dist/code-syntax/tabs-init-script.js

@@ -0,0 +1,106 @@
+import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
+const TABS_INIT_SCRIPT = `(function () {
+  var BASE_BTN = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors";
+  var ACTIVE_BTN = BASE_BTN + " text-accent border-accent";
+  var INACTIVE_BTN = BASE_BTN + " text-muted border-transparent hover:text-fg";
+
+  function activateTab(container, value) {
+    // Update button styles.
+    var buttons = container.querySelectorAll("[data-tab-btn]");
+    for (var i = 0; i < buttons.length; i++) {
+      var btn = buttons[i];
+      var isActive = btn.dataset.tabBtn === value;
+      btn.className = isActive ? ACTIVE_BTN : INACTIVE_BTN;
+      btn.setAttribute("aria-selected", String(isActive));
+    }
+    // Update panel visibility.
+    showPanel(container, value);
+  }
+
+  function showPanel(container, value) {
+    var panels = container.querySelectorAll(".tab-panel");
+    for (var i = 0; i < panels.length; i++) {
+      var panel = panels[i];
+      panel.hidden = panel.dataset.tabValue !== value;
+    }
+  }
+
+  function syncGroup(groupId, value, source) {
+    var others = document.querySelectorAll("[data-tabs][data-group-id=\\"" + CSS.escape(groupId) + "\\"]");
+    for (var i = 0; i < others.length; i++) {
+      var container = others[i];
+      if (container === source) continue;
+      var hasPanel = container.querySelector(".tab-panel[data-tab-value=\\"" + CSS.escape(value) + "\\"]");
+      if (hasPanel) activateTab(container, value);
+    }
+  }
+
+  function initTabs() {
+    var containers = document.querySelectorAll("[data-tabs]");
+
+    for (var ci = 0; ci < containers.length; ci++) {
+      var container = containers[ci];
+      if (container.dataset.tabsInit) continue;
+      container.dataset.tabsInit = "true";
+
+      var panels = container.querySelectorAll(".tab-panel");
+      if (panels.length === 0) continue;
+
+      var groupId = container.dataset.groupId;
+
+      // Determine which tab should be active.
+      var activeValue = null;
+
+      if (groupId) {
+        var stored = localStorage.getItem("tabs-group-" + groupId);
+        if (stored) {
+          // Only use stored value if a matching panel exists.
+          for (var pi = 0; pi < panels.length; pi++) {
+            if (panels[pi].dataset.tabValue === stored) {
+              activeValue = stored;
+              break;
+            }
+          }
+        }
+      }
+
+      if (!activeValue) {
+        var defaultPanel = container.querySelector(".tab-panel[data-tab-default]");
+        activeValue = defaultPanel
+          ? defaultPanel.dataset.tabValue
+          : panels[0].dataset.tabValue;
+      }
+
+      // Activate the correct tab (set button styles + show panel).
+      activateTab(container, activeValue);
+
+      // Wire click handlers on the server-rendered buttons.
+      (function (cont, gid) {
+        var buttons = cont.querySelectorAll("[data-tab-btn]");
+        for (var bi = 0; bi < buttons.length; bi++) {
+          (function (btn) {
+            btn.addEventListener("click", function () {
+              var val = btn.dataset.tabBtn;
+              activateTab(cont, val);
+              if (gid) {
+                localStorage.setItem("tabs-group-" + gid, val);
+                syncGroup(gid, val, cont);
+              }
+            });
+          })(buttons[bi]);
+        }
+      })(container, groupId);
+    }
+  }
+
+  // Run on initial load.
+  initTabs();
+
+  // Re-run after every page-navigate-end signal so View Transitions
+  // navigations (which under the zfb runtime are real page loads) see
+  // the tabs initialised on the new page.
+  document.addEventListener(${JSON.stringify(AFTER_NAVIGATE_EVENT)}, initTabs);
+})();`;
+export {
+  TABS_INIT_SCRIPT
+};

package/dist/code-syntax/tabs-init.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+/**
+ * Drop-in JSX replacement for `src/components/tabs-init.astro`.
+ *
+ * Include **once** in the layout (e.g. in the `<body>` foot). Emits the
+ * tabs interactivity script via `dangerouslySetInnerHTML`.
+ *
+ * The script:
+ * - Activates the correct panel on first paint (localStorage → default → first).
+ * - Wires click handlers to the pre-rendered `[data-tab-btn]` buttons from
+ *   the `<Tabs>` component.
+ * - Syncs tab state across containers that share a `data-group-id`.
+ * - Re-runs on `AFTER_NAVIGATE_EVENT` (from `../transitions/page-events.ts`)
+ *   to support View Transitions.
+ *
+ * Requires `<Tabs>` to have server-rendered the tab buttons in the DOM.
+ */
+declare function TabsInit(): JSX.Element;
+
+export { TabsInit, TabsInit as default };

package/dist/code-syntax/tabs-init.js

@@ -0,0 +1,10 @@
+import { jsx } from "preact/jsx-runtime";
+import { TABS_INIT_SCRIPT } from "./tabs-init-script.js";
+function TabsInit() {
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: TABS_INIT_SCRIPT } });
+}
+var tabs_init_default = TabsInit;
+export {
+  TabsInit,
+  tabs_init_default as default
+};

package/dist/code-syntax/tabs.d.ts

@@ -0,0 +1,36 @@
+import { ComponentChildren, JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+interface TabsProps {
+    /**
+     * When set, clicking a tab in this group persists the chosen value to
+     * `localStorage` under `tabs-group-{groupId}` and syncs all other
+     * containers that share the same `groupId`.
+     */
+    groupId?: string;
+    /** `<TabItem>` children (and any other content). */
+    children?: ComponentChildren;
+}
+/**
+ * Server-rendered tab container — JSX port of `src/components/tabs.astro`.
+ *
+ * Iterates `children` via `toChildArray` to discover `<TabItem>` elements
+ * and renders their labels as `<button>` elements in the tab nav bar.
+ * All panels remain `hidden` on first paint; `<TabsInit>` (the companion
+ * script component) activates the default/stored tab after hydration.
+ *
+ * Place `<TabsInit>` once in the layout — NOT inside each `<Tabs>`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *   <TabItem label="npm"><code>npm install …</code></TabItem>
+ *   <TabItem label="pnpm" default><code>pnpm add …</code></TabItem>
+ * </Tabs>
+ * ```
+ */
+declare function Tabs({ groupId, children }: TabsProps): JSX.Element;
+
+export { Tabs, type TabsProps, Tabs as default };

package/dist/code-syntax/tabs.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { cloneElement, toChildArray } from "preact";
+import { TabItem } from "../tab-item/tab-item.js";
+const BASE_BTN_CLASS = "px-hsp-lg py-vsp-xs text-small font-medium border-b-[5px] -mb-px transition-colors";
+const ACTIVE_BTN_CLASS = `${BASE_BTN_CLASS} text-accent border-accent`;
+const INACTIVE_BTN_CLASS = `${BASE_BTN_CLASS} text-muted border-transparent hover:text-fg`;
+function Tabs({ groupId, children }) {
+  const childArray = toChildArray(children);
+  const tabItemNodes = childArray.filter(
+    (child) => typeof child === "object" && child !== null && child.type === TabItem
+  );
+  const tabItems = tabItemNodes.map((n) => ({
+    ...n,
+    props: n.props
+  }));
+  const explicitDefault = tabItems.find((item) => item.props.default === true);
+  const fallbackDefault = tabItems[0];
+  const defaultItem = explicitDefault ?? fallbackDefault;
+  const defaultValue = defaultItem ? defaultItem.props.value ?? defaultItem.props.label : void 0;
+  const renderedChildren = childArray.map((child) => {
+    if (typeof child === "object" && child !== null && child.type === TabItem) {
+      const node = child;
+      const props = node.props;
+      const value = props.value ?? props.label;
+      const isDefault = value === defaultValue;
+      return cloneElement(node, { default: isDefault });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: "tabs-container my-vsp-md",
+      "data-tabs": true,
+      "data-group-id": groupId,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "tabs-nav flex border-b border-muted", role: "tablist", children: tabItems.map((item) => {
+          const value = item.props.value ?? item.props.label;
+          const isActive = value === defaultValue;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              class: isActive ? ACTIVE_BTN_CLASS : INACTIVE_BTN_CLASS,
+              "data-tab-btn": value,
+              "aria-selected": isActive ? "true" : "false",
+              children: item.props.label
+            },
+            value
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { class: "tabs-content", children: renderedChildren })
+      ]
+    }
+  );
+}
+var tabs_default = Tabs;
+export {
+  Tabs,
+  tabs_default as default
+};

package/dist/content/component-map.d.ts

@@ -0,0 +1,51 @@
+import { HeadingH2 } from './heading-h2.js';
+import { HeadingH3 } from './heading-h3.js';
+import { HeadingH4 } from './heading-h4.js';
+import { ContentParagraph } from './content-paragraph.js';
+import { ContentLink } from './content-link.js';
+import { ContentStrong } from './content-strong.js';
+import { ContentBlockquote } from './content-blockquote.js';
+import { ContentUl } from './content-ul.js';
+import { ContentOl } from './content-ol.js';
+import { ContentTable } from './content-table.js';
+import { ContentCode } from './content-code.js';
+import 'preact';
+
+/**
+ * MDX component overrides map for the HTML elements used in doc content.
+ *
+ * Pass this to `<Content components={defaultComponents} />` (or spread it
+ * into a larger components object that also includes admonition overrides,
+ * custom shortcodes, etc.) at the Astro page layer.
+ */
+declare const htmlOverrides: {
+    h2: typeof HeadingH2;
+    h3: typeof HeadingH3;
+    h4: typeof HeadingH4;
+    p: typeof ContentParagraph;
+    a: typeof ContentLink;
+    strong: typeof ContentStrong;
+    blockquote: typeof ContentBlockquote;
+    ul: typeof ContentUl;
+    ol: typeof ContentOl;
+    table: typeof ContentTable;
+    code: typeof ContentCode;
+};
+/**
+ * Alias for `htmlOverrides`. Prefer this name in new consumer code.
+ */
+declare const defaultComponents: {
+    h2: typeof HeadingH2;
+    h3: typeof HeadingH3;
+    h4: typeof HeadingH4;
+    p: typeof ContentParagraph;
+    a: typeof ContentLink;
+    strong: typeof ContentStrong;
+    blockquote: typeof ContentBlockquote;
+    ul: typeof ContentUl;
+    ol: typeof ContentOl;
+    table: typeof ContentTable;
+    code: typeof ContentCode;
+};
+
+export { defaultComponents, htmlOverrides };

package/dist/content/component-map.js

@@ -0,0 +1,29 @@
+import { HeadingH2 } from "./heading-h2.js";
+import { HeadingH3 } from "./heading-h3.js";
+import { HeadingH4 } from "./heading-h4.js";
+import { ContentParagraph } from "./content-paragraph.js";
+import { ContentLink } from "./content-link.js";
+import { ContentStrong } from "./content-strong.js";
+import { ContentBlockquote } from "./content-blockquote.js";
+import { ContentUl } from "./content-ul.js";
+import { ContentOl } from "./content-ol.js";
+import { ContentTable } from "./content-table.js";
+import { ContentCode } from "./content-code.js";
+const htmlOverrides = {
+  h2: HeadingH2,
+  h3: HeadingH3,
+  h4: HeadingH4,
+  p: ContentParagraph,
+  a: ContentLink,
+  strong: ContentStrong,
+  blockquote: ContentBlockquote,
+  ul: ContentUl,
+  ol: ContentOl,
+  table: ContentTable,
+  code: ContentCode
+};
+const defaultComponents = htmlOverrides;
+export {
+  defaultComponents,
+  htmlOverrides
+};

package/dist/content/content-blockquote.d.ts

@@ -0,0 +1,11 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+declare function ContentBlockquote({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentBlockquote };

package/dist/content/content-blockquote.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentBlockquote({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: `border-l-[3px] border-muted pl-hsp-lg text-muted italic${className ? ` ${className}` : ""}`,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  ContentBlockquote
+};

package/dist/content/content-code.d.ts

@@ -0,0 +1,26 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+/**
+ * Override for inline `<code>` in MDX. Wraps text-only inline code with
+ * <SmartBreak> so that path/URL-like strings (e.g. `src/foo/bar.ts`) can
+ * break at delimiters on narrow viewports.
+ *
+ * Block code inside a fenced block is processed by Shiki, which emits a
+ * <code> element with class "language-*" containing a tree of <span>
+ * nodes (not a plain string). We detect those and render untouched so
+ * syntax highlighting is never disturbed.
+ *
+ * Astro 6 passes pure-text MDX children wrapped in a `StaticHtml` Preact
+ * component whose text lives in `props.value`, not as a string child.
+ * `extractText` unwraps that so the heuristic works regardless of MDX's
+ * internal wrapping.
+ */
+declare function ContentCode({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentCode };

package/dist/content/content-code.js

@@ -0,0 +1,39 @@
+import { jsx } from "preact/jsx-runtime";
+import { SmartBreak as SmartBreakImpl } from "../toc/smart-break.js";
+const SmartBreak = SmartBreakImpl;
+function ContentCode({ children, className, ...rest }) {
+  const isShikiBlock = typeof className === "string" && /(^|\s)language-/.test(className);
+  const textFromChildren = isShikiBlock ? null : extractText(children);
+  if (textFromChildren === null) {
+    return /* @__PURE__ */ jsx("code", { className, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx("code", { className, ...rest, children: /* @__PURE__ */ jsx(SmartBreak, { children: textFromChildren }) });
+}
+function extractText(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (children && typeof children === "object" && !Array.isArray(children)) {
+    const v = children;
+    if (v.props && v.props.value != null) {
+      if (typeof v.props.value === "string" || v.props.value instanceof String || typeof v.props.value === "object" && typeof v.props.value.toString === "function") {
+        const s = String(v.props.value);
+        if (!s || s.startsWith("[object")) return null;
+        if (looksLikeHtmlMarkup(s)) return null;
+        return decodeEntities(s);
+      }
+    }
+  }
+  return null;
+}
+function looksLikeHtmlMarkup(s) {
+  return /&lt;(span|code|pre|div|br|i|b|em|strong)\b/i.test(s) || /<(span|code|pre)\s/i.test(s);
+}
+function decodeEntities(s) {
+  return s.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/gi, "'").replace(/&nbsp;/g, " ").replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n))).replace(
+    /&#x([0-9a-f]+);/gi,
+    (_, n) => String.fromCodePoint(parseInt(n, 16))
+  ).replace(/&amp;/g, "&");
+}
+export {
+  ContentCode
+};

package/dist/content/content-link.d.ts

@@ -0,0 +1,12 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    href?: string;
+    className?: string;
+    children?: ComponentChildren;
+    [key: string]: any;
+};
+declare function ContentLink({ href, className, children, ...rest }: Props): preact.JSX.Element;
+
+export { ContentLink };

package/dist/content/content-link.js

@@ -0,0 +1,43 @@
+import { jsx } from "preact/jsx-runtime";
+import { SmartBreak as SmartBreakBase } from "../toc/smart-break.js";
+const SmartBreak = SmartBreakBase;
+function ContentLink({ href, className, children, ...rest }) {
+  const classes = className ? className.split(" ") : [];
+  if (classes.includes("block") || classes.includes("hash-link")) {
+    return /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+  }
+  const textFromChildren = extractText(children);
+  const content = textFromChildren !== null ? /* @__PURE__ */ jsx(SmartBreak, { children: textFromChildren }) : children;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: `text-accent underline hover:text-accent-hover${className ? ` ${className}` : ""}`,
+      ...rest,
+      children: content
+    }
+  );
+}
+function extractText(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (children && typeof children === "object" && !Array.isArray(children)) {
+    const v = children;
+    if (v.props && v.props.value != null) {
+      if (typeof v.props.value === "string" || v.props.value instanceof String || typeof v.props.value === "object" && typeof v.props.value.toString === "function") {
+        const s = String(v.props.value);
+        if (s && !s.startsWith("[object")) return decodeEntities(s);
+      }
+    }
+  }
+  return null;
+}
+function decodeEntities(s) {
+  return s.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/gi, "'").replace(/&nbsp;/g, " ").replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n))).replace(
+    /&#x([0-9a-f]+);/gi,
+    (_, n) => String.fromCodePoint(parseInt(n, 16))
+  ).replace(/&amp;/g, "&");
+}
+export {
+  ContentLink
+};

package/dist/content/content-ol.d.ts

@@ -0,0 +1,11 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+declare function ContentOl({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentOl };

package/dist/content/content-ol.js

@@ -0,0 +1,15 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentOl({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ...rest,
+      className: className || void 0,
+      style: { paddingLeft: "2em", listStyleType: "decimal" },
+      children
+    }
+  );
+}
+export {
+  ContentOl
+};

package/dist/content/content-paragraph.d.ts

@@ -0,0 +1,10 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    [key: string]: any;
+};
+declare function ContentParagraph({ children, ...rest }: Props): preact.JSX.Element;
+
+export { ContentParagraph };

package/dist/content/content-paragraph.js

@@ -0,0 +1,7 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentParagraph({ children, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { ...rest, children });
+}
+export {
+  ContentParagraph
+};

package/dist/content/content-strong.d.ts

@@ -0,0 +1,11 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+declare function ContentStrong({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentStrong };

package/dist/content/content-strong.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentStrong({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "strong",
+    {
+      className: `font-bold text-fg${className ? ` ${className}` : ""}`,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  ContentStrong
+};

package/dist/content/content-table.d.ts

@@ -0,0 +1,11 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+declare function ContentTable({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentTable };

package/dist/content/content-table.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentTable({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: `w-full border-collapse text-small${className ? ` ${className}` : ""}`,
+      ...rest,
+      children
+    }
+  ) });
+}
+export {
+  ContentTable
+};

package/dist/content/content-ul.d.ts

@@ -0,0 +1,11 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+type Props = {
+    children?: ComponentChildren;
+    className?: string;
+    [key: string]: any;
+};
+declare function ContentUl({ children, className, ...rest }: Props): preact.JSX.Element;
+
+export { ContentUl };

package/dist/content/content-ul.js

@@ -0,0 +1,15 @@
+import { jsx } from "preact/jsx-runtime";
+function ContentUl({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...rest,
+      className: className || void 0,
+      style: { paddingLeft: "2em", listStyleType: "disc" },
+      children
+    }
+  );
+}
+export {
+  ContentUl
+};

package/dist/content/heading-h2.d.ts

@@ -0,0 +1,14 @@
+import { ComponentChildren, JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+type Props = {
+    id?: string;
+    className?: string;
+    children?: ComponentChildren;
+    [key: string]: any;
+};
+declare function HeadingH2({ id, children, className, ...rest }: Props): JSX.Element;
+
+export { HeadingH2 };

package/dist/content/heading-h2.js

@@ -0,0 +1,18 @@
+import { jsx } from "preact/jsx-runtime";
+function HeadingH2({ id, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id,
+      className: `text-title font-bold leading-tight pt-vsp-sm border-t-[3px] border-transparent${className ? ` ${className}` : ""}`,
+      style: {
+        borderImage: "linear-gradient(to right, var(--color-fg), transparent) 1"
+      },
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  HeadingH2
+};

package/dist/content/heading-h3.d.ts

@@ -0,0 +1,14 @@
+import { ComponentChildren, JSX } from 'preact';
+
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+
+type Props = {
+    id?: string;
+    className?: string;
+    children?: ComponentChildren;
+    [key: string]: any;
+};
+declare function HeadingH3({ id, children, className, ...rest }: Props): JSX.Element;
+
+export { HeadingH3 };