@dreamlake/dockit 0.1.1

package/dist/components/SearchResize.js

@@ -0,0 +1,150 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+const DAY_MS = 864e5;
+function useSearchResize(hitCount, totalChars) {
+  const [panelH, setPanelH] = useState(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = JSON.parse(localStorage.getItem("palette-h") ?? "");
+      if (Date.now() - raw.ts > DAY_MS) {
+        localStorage.removeItem("palette-h");
+        return null;
+      }
+      return Number.isFinite(raw.v) && raw.v > 0 ? raw.v : null;
+    } catch {
+      return null;
+    }
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const edgeRef = useRef(null);
+  const originRef = useRef({ x: 0, y: 0, w: 0, h: 0 });
+  useEffect(() => {
+    function onMove(e) {
+      if (!edgeRef.current) return;
+      const dy = e.clientY - originRef.current.y;
+      setPanelH(Math.max(200, Math.min(originRef.current.h + dy, window.innerHeight - 60)));
+    }
+    function onUp() {
+      if (edgeRef.current) {
+        edgeRef.current = null;
+        setIsResizing(false);
+        document.body.style.userSelect = "";
+        if (panelH != null) localStorage.setItem("palette-h", JSON.stringify({ v: panelH, ts: Date.now() }));
+      }
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [panelH]);
+  const maxVh = typeof window !== "undefined" ? window.innerHeight * 0.7 : 540;
+  const effectiveH = panelH ?? (() => {
+    const rowH = Math.max(hitCount, 1) * 48 + 44;
+    const charH = 120 + Math.min(totalChars * 0.3, 420);
+    return Math.max(250, Math.min(Math.max(rowH, charH), maxVh, 540));
+  })();
+  function startResize(edge, e) {
+    const panel = e.currentTarget.closest("[data-palette-panel]");
+    if (!panel) return;
+    const rect = panel.getBoundingClientRect();
+    edgeRef.current = edge;
+    originRef.current = { x: e.clientX, y: e.clientY, w: rect.width, h: rect.height };
+    setIsResizing(true);
+    document.body.style.userSelect = "none";
+  }
+  function resetHeight() {
+    setPanelH(null);
+    localStorage.removeItem("palette-h");
+  }
+  return { panelH, effectiveH, isResizing, startResize, resetHeight };
+}
+function SearchResizeHandles({ startResize, resetHeight }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .palette-resize .palette-resize-pill {
+          opacity: 0;
+          transition: opacity 0.15s ease;
+        }
+        .palette-resize:hover .palette-resize-pill {
+          opacity: 0.45;
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "palette-resize",
+        onMouseDown: (e) => startResize("bottom", e),
+        onDoubleClick: resetHeight,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 32,
+          right: 32,
+          height: 10,
+          cursor: "ns-resize",
+          zIndex: 10
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "palette-resize-pill",
+            style: {
+              position: "absolute",
+              bottom: 3,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: 48,
+              height: 4,
+              borderRadius: 9999,
+              background: "var(--color-doc-template-muted)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "palette-resize",
+        onMouseDown: (e) => startResize("corner", e),
+        onDoubleClick: resetHeight,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          width: 24,
+          height: 24,
+          cursor: "nwse-resize",
+          zIndex: 11
+        },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "palette-resize-pill",
+            width: "10",
+            height: "10",
+            viewBox: "0 0 10 10",
+            overflow: "visible",
+            style: { position: "absolute", bottom: 5, right: 5 },
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M 9 0 A 9 9 0 0 1 0 9",
+                stroke: "var(--color-doc-template-muted)",
+                strokeWidth: "4",
+                strokeLinecap: "round",
+                fill: "none"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  SearchResizeHandles,
+  useSearchResize
+};

package/dist/components/Sidebar.d.ts

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

package/dist/components/Sidebar.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect } from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { groupedPages, groupedVisiblePages } from "../lib/navigation.js";
+import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+import { tabForUrl, urlInTab } from "../lib/tabs.js";
+const SIDEBAR_KEY = "sidebar-collapsed";
+function loadCollapsed() {
+  if (typeof window === "undefined") return /* @__PURE__ */ new Set();
+  try {
+    return new Set(JSON.parse(localStorage.getItem(SIDEBAR_KEY) || "[]"));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function Sidebar() {
+  const { urlPathname } = usePageContext();
+  const [showHidden] = useHiddenToggle();
+  const allGroups = showHidden ? groupedPages : groupedVisiblePages;
+  const activeTab = tabForUrl(urlPathname);
+  const groups = useMemo(
+    () => allGroups.map((g) => ({
+      ...g,
+      items: g.items.filter((i) => urlInTab(i.path, activeTab))
+    })).filter((g) => g.items.length > 0),
+    [allGroups, activeTab]
+  );
+  const [collapsed, setCollapsed] = useState(loadCollapsed);
+  function toggle(label) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      localStorage.setItem(SIDEBAR_KEY, JSON.stringify([...next]));
+      return next;
+    });
+  }
+  useEffect(() => {
+    const g = groups.find((g2) => g2.items.some((i) => i.path === urlPathname));
+    if (g?.label && collapsed.has(g.label)) {
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        next.delete(g.label);
+        localStorage.setItem(SIDEBAR_KEY, JSON.stringify([...next]));
+        return next;
+      });
+    }
+  }, [urlPathname]);
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      "aria-label": "Sections",
+      className: "hidden md:flex sticky overflow-y-auto flex-col",
+      style: { top: 40, height: "calc(100vh - 40px)", padding: "22px 12px 32px 18px", gap: 2 },
+      children: groups.map((group) => {
+        const isFolded = group.label ? collapsed.has(group.label) : false;
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { gap: 1, marginBottom: isFolded ? 4 : 14, transition: "margin-bottom 0.2s ease" }, children: [
+          group.label && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggle(group.label),
+              className: "group sidebar-section",
+              "data-folded": isFolded || void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: group.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: isFolded ? "opacity-60" : "opacity-0 group-hover:opacity-60 transition-opacity",
+                    style: { fontSize: 10, fontWeight: 400, lineHeight: 1, flexShrink: 0 },
+                    children: isFolded ? "+" : "−"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", opacity: 0.85 }, children: String(group.items.length).padStart(2, "0") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: {
+            display: "grid",
+            gridTemplateRows: isFolded ? "0fr" : "1fr",
+            transition: "grid-template-rows 0.2s ease"
+          }, children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", minHeight: 0 }, children: group.items.map((item) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: item.path,
+              "aria-current": item.path === urlPathname ? "page" : void 0,
+              className: "sidebar-link",
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: item.title }),
+                item.hidden && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    title: "Internal — only visible when dev mode is on (Cmd+Shift+D)",
+                    style: { display: "inline-flex", alignItems: "center", color: "var(--color-doc-template-warn)", flexShrink: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+                      /* @__PURE__ */ jsx("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+                      /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 7.5-1.2" })
+                    ] })
+                  }
+                ),
+                item.draft && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-label": "Draft — awaiting review",
+                    title: "Draft — awaiting review",
+                    style: {
+                      fontFamily: "var(--font-doc-template-mono)",
+                      fontSize: 8.5,
+                      fontWeight: 600,
+                      letterSpacing: "0.08em",
+                      padding: "1px 5px",
+                      borderRadius: 3,
+                      color: "var(--color-doc-template-warn)",
+                      background: "var(--color-doc-template-warn-soft)",
+                      border: "1px solid color-mix(in srgb, var(--color-doc-template-warn) 30%, transparent)",
+                      flexShrink: 0
+                    },
+                    children: "DRAFT"
+                  }
+                )
+              ]
+            },
+            item.path
+          )) }) })
+        ] }, group.label || "_");
+      })
+    }
+  );
+}
+export {
+  Sidebar
+};

package/dist/components/StatusTable.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Loads /test-results.json (served from docs/public/) and renders a status
+ * table for one section. Pass `kind="suites"` for the unit-test suites or
+ * `kind="examples"` for the example smoke runs.
+ *
+ * Used standalone on /status and inline in API/concept docs to surface
+ * "is this section's tests green right now?" with a deep link to logs.
+ */
+export declare function StatusTable({ kind }: {
+    kind?: 'suites' | 'examples';
+}): import("react").JSX.Element;
+/**
+ * Inline single-suite status badge for embedding in API docs. Example:
+ *   <TestStatus suite="lakeshore-controlplane" />
+ */
+export declare function TestStatus({ suite, example }: {
+    suite?: string;
+    example?: string;
+}): import("react").JSX.Element;

package/dist/components/StatusTable.js

@@ -0,0 +1,251 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+const STATUS_COLOR = {
+  pass: "oklch(62% .15 145)",
+  fail: "oklch(58% .19 25)",
+  skip: "oklch(60% .02 250)",
+  pending: "oklch(70% .12 75)"
+};
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": status,
+      title: status,
+      style: {
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: STATUS_COLOR[status] ?? "var(--color-doc-template-muted)",
+        marginRight: 8,
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+function StatusBadge({ status }) {
+  const color = STATUS_COLOR[status] ?? "var(--color-doc-template-muted)";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "2px 8px",
+        borderRadius: 4,
+        background: `color-mix(in srgb, ${color} 12%, transparent)`,
+        color,
+        fontFamily: "var(--font-doc-template-mono)",
+        fontSize: 11,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em"
+      },
+      children: [
+        /* @__PURE__ */ jsx(StatusDot, { status }),
+        status
+      ]
+    }
+  );
+}
+function fmtDuration(s) {
+  if (s == null) return "—";
+  if (s < 1) return `${Math.round(s * 1e3)}ms`;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
+}
+function relativeTime(iso) {
+  const then = new Date(iso).getTime();
+  const now = Date.now();
+  const diff = Math.max(0, Math.round((now - then) / 1e3));
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+const cellStyle = {
+  padding: "9px 10px",
+  verticalAlign: "top",
+  borderBottom: "1px solid var(--color-doc-template-faint)",
+  fontSize: 13
+};
+const monoStyle = {
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 12,
+  color: "var(--color-doc-template-muted)"
+};
+function StatusTable({ kind = "suites" }) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    fetch("/test-results.json", { cache: "no-store" }).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    }).then(setData).catch((e) => setError(String(e)));
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: 12,
+          border: "1px solid var(--color-doc-template-faint)",
+          borderRadius: 8,
+          color: "var(--color-doc-template-muted)",
+          fontSize: 13
+        },
+        children: [
+          "Could not load test results: ",
+          error
+        ]
+      }
+    );
+  }
+  if (!data) {
+    return /* @__PURE__ */ jsx("div", { style: { color: "var(--color-doc-template-muted)", fontSize: 13, padding: 12 }, children: "Loading test results…" });
+  }
+  const items = kind === "suites" ? data.suites : data.examples;
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { style: { color: "var(--color-doc-template-muted)", fontSize: 13, padding: 12 }, children: [
+      "No ",
+      kind,
+      " reported yet. Run",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "uv run lakeshore-examples/test_runner.py" }),
+      " to populate."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+          marginBottom: 8,
+          fontSize: 12,
+          color: "var(--color-doc-template-muted)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            items.length,
+            " ",
+            kind,
+            data.status === "seed" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  marginLeft: 8,
+                  padding: "1px 6px",
+                  background: "color-mix(in srgb, oklch(70% .12 75) 15%, transparent)",
+                  color: "oklch(60% .14 75)",
+                  borderRadius: 4,
+                  fontFamily: "var(--font-doc-template-mono)"
+                },
+                title: data.note,
+                children: "seed data"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: monoStyle, title: data.generated_at, children: [
+            "updated ",
+            relativeTime(data.generated_at)
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Status" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Suite" : "Example" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Command" : "Description" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Tests" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Time" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: kind === "suites" ? items.map((s) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(StatusBadge, { status: s.status }) }),
+        /* @__PURE__ */ jsxs("td", { style: cellStyle, children: [
+          s.doc_link ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: s.doc_link,
+              className: "text-doc-template-accent",
+              style: {
+                borderBottom: "1px solid color-mix(in srgb, var(--color-doc-template-accent) 35%, transparent)",
+                textDecoration: "none"
+              },
+              children: s.name
+            }
+          ) : s.name,
+          /* @__PURE__ */ jsxs("div", { style: monoStyle, children: [
+            s.cwd,
+            "/"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("td", { style: { ...cellStyle, ...monoStyle }, children: [
+          s.command,
+          s.reason && /* @__PURE__ */ jsx("div", { style: { color: "var(--color-doc-template-muted)", marginTop: 2 }, children: s.reason })
+        ] }),
+        /* @__PURE__ */ jsx("td", { style: { ...cellStyle, textAlign: "right" }, children: s.tests ? /* @__PURE__ */ jsxs("span", { style: monoStyle, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: STATUS_COLOR.pass }, children: s.tests.pass }),
+          s.tests.fail > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " / ",
+            /* @__PURE__ */ jsx("span", { style: { color: STATUS_COLOR.fail }, children: s.tests.fail })
+          ] }),
+          s.tests.skip > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " / ",
+            /* @__PURE__ */ jsx("span", { style: { color: STATUS_COLOR.skip }, children: s.tests.skip })
+          ] })
+        ] }) : /* @__PURE__ */ jsx("span", { style: monoStyle, children: "—" }) }),
+        /* @__PURE__ */ jsx("td", { style: { ...cellStyle, ...monoStyle, textAlign: "right" }, children: fmtDuration(s.duration_s) })
+      ] }, s.id)) : items.map((e) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(StatusBadge, { status: e.status }) }),
+        /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: e.source_link,
+            target: "_blank",
+            rel: "noopener",
+            className: "text-doc-template-accent",
+            style: {
+              borderBottom: "1px solid color-mix(in srgb, var(--color-doc-template-accent) 35%, transparent)",
+              textDecoration: "none"
+            },
+            children: e.id
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("td", { style: { ...cellStyle, fontSize: 13 }, children: [
+          e.description || e.title,
+          e.reason && /* @__PURE__ */ jsx("div", { style: { color: "var(--color-doc-template-muted)", marginTop: 2, fontSize: 12 }, children: e.reason })
+        ] }),
+        /* @__PURE__ */ jsx("td", { style: { ...cellStyle, ...monoStyle, textAlign: "right" }, children: e.needs_cp ? "needs CP" : "local" }),
+        /* @__PURE__ */ jsx("td", { style: { ...cellStyle, ...monoStyle, textAlign: "right" }, children: fmtDuration(e.duration_s) })
+      ] }, e.id)) })
+    ] })
+  ] });
+}
+function TestStatus({ suite, example }) {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    fetch("/test-results.json", { cache: "no-store" }).then((r) => r.json()).then(setData).catch(() => {
+    });
+  }, []);
+  if (!data) {
+    return /* @__PURE__ */ jsx("span", { style: monoStyle, children: "loading…" });
+  }
+  const item = suite ? data.suites.find((s) => s.id === suite) : example ? data.examples.find((e) => e.id === example) : null;
+  if (!item) {
+    return /* @__PURE__ */ jsx("span", { style: monoStyle, children: "unknown" });
+  }
+  return /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(StatusBadge, { status: item.status }),
+    /* @__PURE__ */ jsx("span", { style: monoStyle, title: data.generated_at, children: relativeTime(data.generated_at) })
+  ] });
+}
+export {
+  StatusTable,
+  TestStatus
+};

package/dist/components/TOC.d.ts

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