@dreamlake/dockit 0.1.1

package/dist/components/Callout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface CalloutProps {
+    variant?: 'info' | 'warn';
+    /** Optional explicit title above the body. The body's leading
+     *  `<strong>` is automatically styled as a title too — for GFM
+     *  alerts, just lead with a `**bolded sentence.**` in the body. */
+    title?: ReactNode;
+    children: ReactNode;
+}
+export declare function Callout({ variant, title, children }: CalloutProps): import("react").JSX.Element;
+export {};

package/dist/components/Callout.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function InfoIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 18, height: 18, display: "block", marginTop: 2 },
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
+function WarnIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 18, height: 18, display: "block", marginTop: 2 },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+function Callout({ variant = "info", title, children }) {
+  const isWarn = variant === "warn";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "text-doc-template-ink",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "18px 1fr",
+        gap: 12,
+        padding: "12px 14px",
+        borderRadius: "var(--radius-doc-template)",
+        border: "1px solid var(--color-doc-template-faint)",
+        background: isWarn ? "color-mix(in oklab, oklch(75% .16 80) 10%, var(--color-doc-template-bg))" : "color-mix(in srgb, var(--color-doc-template-accent) 5%, var(--color-doc-template-bg))",
+        margin: "18px 0 22px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: isWarn ? "oklch(58% .16 60)" : "var(--color-doc-template-accent)"
+            },
+            children: isWarn ? /* @__PURE__ */ jsx(WarnIcon, {}) : /* @__PURE__ */ jsx(InfoIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontFamily: "var(--font-doc-template-ui)",
+              fontSize: 13.5,
+              lineHeight: 1.55,
+              color: "var(--color-doc-template-ink)"
+            },
+            children: [
+              title && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "block",
+                    fontWeight: 600,
+                    fontSize: 12,
+                    letterSpacing: "-0.005em",
+                    marginBottom: 2
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "doc-callout-body", children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Callout
+};

package/dist/components/ClientOnly.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function ClientOnly({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/components/ClientOnly.js

@@ -0,0 +1,11 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+function ClientOnly({ children }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  ClientOnly
+};

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface CodeBlockProps {
+    children: ReactNode;
+    filename?: string;
+    lang?: string;
+}
+/**
+ * Wraps a Shiki-rendered <pre><code> with the dreamlake header bar
+ * (lang label + filename + line-number toggle + Copy). Children come
+ * straight from MDX.
+ */
+export declare function CodeBlock({ children, filename, lang }: CodeBlockProps): import("react").JSX.Element;
+export {};

package/dist/components/CodeBlock.js

@@ -0,0 +1,155 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useLineNumbers } from "../lib/use-line-numbers.js";
+const headerBtnStyle = (active) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 10,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: active ? "var(--color-doc-template-accent)" : "var(--color-doc-template-muted)",
+  background: "transparent",
+  border: `1px solid ${active ? "var(--color-doc-template-accent)" : "var(--color-doc-template-faint)"}`,
+  borderRadius: 4,
+  padding: "2px 8px",
+  height: 22,
+  cursor: "pointer",
+  transition: "color 0.12s ease, border-color 0.12s ease"
+});
+function CodeBlock({ children, filename, lang }) {
+  const wrapRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const [showLines, setShowLines] = useLineNumbers();
+  function copy() {
+    const el = wrapRef.current?.querySelector("pre code");
+    if (!el) return;
+    navigator.clipboard.writeText(el.innerText).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      "data-line-numbers": showLines ? "on" : "off",
+      className: "group relative border border-doc-template-faint bg-doc-template-code",
+      style: {
+        margin: "18px 0 22px",
+        borderRadius: "var(--radius-doc-template)",
+        overflow: "hidden"
+      },
+      children: [
+        filename && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center border-b border-doc-template-faint text-doc-template-muted",
+            style: {
+              gap: 12,
+              padding: "6px 10px 6px 14px",
+              fontFamily: "var(--font-doc-template-mono)",
+              fontSize: 10,
+              letterSpacing: "0.06em",
+              background: "color-mix(in srgb, var(--color-doc-template-ink) 3%, transparent)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, textTransform: "none", letterSpacing: 0 }, children: filename }),
+              lang && /* @__PURE__ */ jsx("span", { className: "uppercase", style: { fontWeight: 600, letterSpacing: "0.06em" }, children: lang }),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center", style: { gap: 6 }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": showLines,
+                    title: showLines ? ":set nonu" : ":set nu",
+                    onClick: () => setShowLines(!showLines),
+                    style: headerBtnStyle(showLines),
+                    children: /* @__PURE__ */ jsx(HashIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+              ] })
+            ]
+          }
+        ),
+        !filename && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute top-0 right-0 z-10 flex items-center opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
+            style: { gap: 6, padding: "8px 8px" },
+            children: [
+              lang && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-doc-template-muted uppercase",
+                  style: {
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: "0.04em",
+                    marginRight: 2
+                  },
+                  children: lang
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": showLines,
+                  title: showLines ? ":set nonu" : ":set nu",
+                  onClick: () => setShowLines(!showLines),
+                  style: headerBtnStyle(showLines),
+                  children: /* @__PURE__ */ jsx(HashIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: "var(--font-doc-template-mono)",
+              fontSize: 12.5,
+              lineHeight: 1.3
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function HashIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 10, height: 10, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
+      ]
+    }
+  );
+}
+export {
+  CodeBlock
+};

package/dist/components/DocFooter.d.ts

@@ -0,0 +1 @@
+export declare function DocFooter(): import("react").JSX.Element | null;

package/dist/components/DocFooter.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { usePageContext } from "vike-react/usePageContext";
+import { getAdjacentPages } from "../lib/navigation.js";
+import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+const LINK = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  padding: "12px 14px",
+  border: "1px solid var(--color-doc-template-faint)",
+  borderRadius: "var(--radius-doc-template)",
+  textDecoration: "none",
+  background: "var(--color-doc-template-panel)",
+  transition: "border-color 0.15s ease"
+};
+const LABEL = {
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 10,
+  letterSpacing: "0.12em",
+  textTransform: "uppercase",
+  color: "var(--color-doc-template-muted)"
+};
+function DocFooter() {
+  const { urlPathname } = usePageContext();
+  const [showHidden] = useHiddenToggle();
+  const { prev, next } = getAdjacentPages(urlPathname, { includeHidden: showHidden });
+  if (!prev && !next) return null;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Page navigation",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 12,
+        marginTop: 64,
+        paddingTop: 24,
+        borderTop: "1px solid var(--color-doc-template-faint)"
+      },
+      children: [
+        prev ? /* @__PURE__ */ jsxs("a", { href: prev.path, style: LINK, className: "hover:[border-color:var(--color-doc-template-accent)]", children: [
+          /* @__PURE__ */ jsx("span", { style: LABEL, children: "← Prev" }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600 }, children: prev.title })
+        ] }) : /* @__PURE__ */ jsx("span", {}),
+        next ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: next.path,
+            style: { ...LINK, textAlign: "right" },
+            className: "hover:[border-color:var(--color-doc-template-accent)]",
+            children: [
+              /* @__PURE__ */ jsx("span", { style: LABEL, children: "Next →" }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600 }, children: next.title })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("span", {})
+      ]
+    }
+  );
+}
+export {
+  DocFooter
+};

package/dist/components/Preview.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface PreviewProps {
+    /** Live-rendered example. Pass a component or JSX. */
+    children: ReactNode;
+    /** Source code for the example (use `import src from './x.tsx?raw'`). */
+    source: string;
+    /** Optional matching dataIO source — surfaces a `Data` tab. */
+    dataSource?: string;
+    /** Filename shown in the tab header. */
+    filename?: string;
+    /** Default tab. */
+    defaultTab?: 'preview' | 'source' | 'data';
+    /** Force a height for the preview pane. */
+    height?: number | string;
+}
+export declare function Preview({ children, source, dataSource, filename, defaultTab, height, }: PreviewProps): import("react").JSX.Element;

package/dist/components/Preview.js

@@ -0,0 +1,220 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useLineNumbers } from "../lib/use-line-numbers.js";
+function langFromFilename(name) {
+  if (!name) return "tsx";
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+    case "js":
+    case "jsx":
+    case "json":
+    case "css":
+    case "html":
+    case "md":
+    case "mdx":
+    case "bash":
+    case "sh":
+      return ext;
+    default:
+      return "tsx";
+  }
+}
+function HighlightedSource({ code, filename }) {
+  const [html, setHtml] = useState(null);
+  useEffect(() => {
+    let alive = true;
+    setHtml(null);
+    (async () => {
+      try {
+        const { codeToHtml } = await import("shiki");
+        const out = await codeToHtml(code, {
+          lang: langFromFilename(filename),
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false
+        });
+        if (alive) setHtml(out);
+      } catch {
+        if (alive) setHtml(null);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [code, filename]);
+  if (html) return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "14px 16px",
+        fontFamily: "var(--font-doc-template-mono)",
+        fontSize: 12.5,
+        lineHeight: 1.3,
+        overflowX: "auto",
+        background: "transparent"
+      },
+      children: /* @__PURE__ */ jsx("code", { children: code })
+    }
+  );
+}
+const TAB = {
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: "0.06em",
+  textTransform: "uppercase",
+  border: "1px solid transparent",
+  borderRadius: 4,
+  padding: "3px 8px",
+  height: 22,
+  background: "transparent",
+  cursor: "pointer",
+  transition: "color 0.12s ease, background 0.12s ease, border-color 0.12s ease"
+};
+const headerBtnStyle = (active) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 10,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: active ? "var(--color-doc-template-accent)" : "var(--color-doc-template-muted)",
+  background: "transparent",
+  border: `1px solid ${active ? "var(--color-doc-template-accent)" : "var(--color-doc-template-faint)"}`,
+  borderRadius: 4,
+  padding: "2px 8px",
+  height: 22,
+  cursor: "pointer",
+  transition: "color 0.12s ease, border-color 0.12s ease"
+});
+function HashIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 10, height: 10, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
+      ]
+    }
+  );
+}
+function Preview({
+  children,
+  source,
+  dataSource,
+  filename,
+  defaultTab = "preview",
+  height
+}) {
+  const [tab, setTab] = useState(defaultTab);
+  const [copied, setCopied] = useState(false);
+  const [showLines, setShowLines] = useLineNumbers();
+  const visibleSource = tab === "data" ? dataSource ?? "" : source;
+  function copy() {
+    navigator.clipboard.writeText(visibleSource).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      },
+      () => {
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-line-numbers": showLines ? "on" : "off",
+      className: "border border-doc-template-faint bg-doc-template-panel",
+      style: { margin: "18px 0 22px", borderRadius: "var(--radius-doc-template)", overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center border-b border-doc-template-faint",
+            style: {
+              gap: 10,
+              padding: "6px 10px 6px 6px",
+              background: "color-mix(in srgb, var(--color-doc-template-ink) 3%, transparent)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { display: "inline-flex", gap: 2 }, role: "tablist", children: ["preview", "source", ...dataSource ? ["data"] : []].map((t) => {
+                const active = t === tab;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": active,
+                    onClick: () => setTab(t),
+                    style: {
+                      ...TAB,
+                      color: active ? "var(--color-doc-template-ink)" : "var(--color-doc-template-muted)",
+                      background: active ? "var(--color-doc-template-bg)" : "transparent",
+                      borderColor: active ? "var(--color-doc-template-faint)" : "transparent"
+                    },
+                    children: t === "preview" ? "Preview" : t === "source" ? "Source" : "Data"
+                  },
+                  t
+                );
+              }) }),
+              filename && tab !== "preview" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-doc-template-muted",
+                  style: { fontFamily: "var(--font-doc-template-mono)", fontSize: 10, marginLeft: 4 },
+                  children: filename
+                }
+              ),
+              tab !== "preview" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" } }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": showLines,
+                    "aria-label": showLines ? "Hide line numbers" : "Show line numbers",
+                    title: showLines ? ":set nonu" : ":set nu",
+                    onClick: () => setShowLines(!showLines),
+                    style: headerBtnStyle(showLines),
+                    children: [
+                      /* @__PURE__ */ jsx(HashIcon, {}),
+                      /* @__PURE__ */ jsx("span", { children: showLines ? ":set nonu" : ":set nu" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: copy,
+                    "aria-label": "Copy source",
+                    style: headerBtnStyle(copied),
+                    children: copied ? "Copied" : "Copy"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        tab === "preview" ? /* @__PURE__ */ jsx("div", { style: { padding: 24, minHeight: 80, ...height ? { height } : null }, children }) : /* @__PURE__ */ jsx("div", { style: { background: "var(--color-doc-template-code)" }, children: /* @__PURE__ */ jsx(HighlightedSource, { code: visibleSource, filename }) })
+      ]
+    }
+  );
+}
+export {
+  Preview
+};

package/dist/components/SearchPalette.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+interface SearchPaletteProps {
+    open: boolean;
+    onClose: () => void;
+    query: string;
+}
+export declare function SearchPalette({ open, onClose, query }: SearchPaletteProps): JSX.Element | null;
+export {};