@dreamlake/dockit 0.2.30 → 0.2.32

package/dist/components/CodeBlock.js

@@ -2,6 +2,8 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext, useRef, useState } from "react";
 import { CodeTabsContext } from "./code-tabs-context.js";
 import { useLineNumbers } from "../lib/use-line-numbers.js";
+import { copyWithGlyphBurst } from "../lib/glyph-burst.js";
+const BURST = { color: "var(--color-doc-template-ink)" };
 const headerBtnStyle = (active) => ({
   display: "inline-flex",
   alignItems: "center",
@@ -25,17 +27,14 @@ function CodeBlock({ children, filename, lang }) {
   const [copied, setCopied] = useState(false);
   const [wrap, setWrap] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
-  function copy() {
+  function copy(button) {
     const el = wrapRef.current?.querySelector("pre code");
     if (!el) return;
-    navigator.clipboard.writeText(el.innerText).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1400);
-      },
-      () => {
-      }
-    );
+    void copyWithGlyphBurst(button, el.innerText, BURST).then((ok) => {
+      if (!ok) return;
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     embedded && (filename || lang) && /* @__PURE__ */ jsx("span", { className: "dockit-code-tabs-label", title: filename || lang, children: filename || lang }),
@@ -115,7 +114,7 @@ function CodeBlock({ children, filename, lang }) {
                           children: "Wrap"
                         }
                       ),
-                      /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+                      /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => copy(e.currentTarget), style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
                     ]
                   }
                 )
@@ -181,7 +180,7 @@ function CodeBlock({ children, filename, lang }) {
                     children: "Wrap"
                   }
                 ),
-                /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => copy(e.currentTarget), style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
               ]
             }
           ),

package/dist/components/CodeTabs.d.ts

@@ -8,6 +8,13 @@ export declare function CodeExample({ children }: CodeExampleProps): import("rea
 export interface CodeTabsProps {
     children: ReactNode;
     'aria-label'?: string;
+    /**
+     * Opt-in sync group. Every CodeTabs with the same `syncKey` shows the same
+     * tab label, on this page and others; the choice persists in localStorage
+     * (`doc:code-tabs:<syncKey>`) and follows other browser tabs. A group that
+     * lacks the chosen label keeps its own selection.
+     */
+    syncKey?: string;
 }
 /** UIKit owns the frame and keyboard navigation; Dockit owns fenced examples. */
-export declare function CodeTabs({ children, 'aria-label': label }: CodeTabsProps): import("react").JSX.Element | null;
+export declare function CodeTabs({ children, syncKey, 'aria-label': label }: CodeTabsProps): import("react").JSX.Element | null;

package/dist/components/CodeTabs.js

@@ -1,23 +1,35 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, useState } from "react";
 import { TabbedContainer } from "../vendor/@dreamlake/uikit/src/components/TabbedContainer/TabbedContainer.js";
 import { CodeTabsContext } from "./code-tabs-context.js";
+import { useCodeTabsChoice, resolveCodeTab } from "../lib/code-tabs-sync.js";
 function CodeExample({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function CodeTabs({ children, "aria-label": label = "Code examples" }) {
+function CodeTabs({ children, syncKey, "aria-label": label = "Code examples" }) {
   const examples = Children.toArray(children).filter(isValidElement);
-  if (!examples.length) return null;
-  return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, children: /* @__PURE__ */ jsx(CodeTabsContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+  const items = examples.map((example, index) => ({
+    value: String(example.key ?? index),
+    label: example.props.label,
+    children: example.props.children
+  }));
+  const [choice, choose] = useCodeTabsChoice(syncKey);
+  const [own, setOwn] = useState(void 0);
+  const value = resolveCodeTab(items, choice, own);
+  if (value !== own && choice !== null && value !== void 0) setOwn(value);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, "data-code-tabs-sync": syncKey, children: /* @__PURE__ */ jsx(CodeTabsContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
     TabbedContainer,
     {
       "aria-label": label,
       className: "dockit-code-tabs",
-      items: examples.map((example, index) => ({
-        value: String(example.key ?? index),
-        label: example.props.label,
-        children: example.props.children
-      }))
+      items,
+      value,
+      onValueChange: (next) => {
+        setOwn(next);
+        const picked = items.find((item) => item.value === next);
+        if (picked) choose(picked.label);
+      }
     }
   ) }) });
 }

package/dist/components/Preview.d.ts

@@ -12,5 +12,10 @@ export interface PreviewProps {
     defaultTab?: 'preview' | 'source' | 'data';
     /** Force a height for the preview pane. */
     height?: number | string;
+    /** `split` shows the source and the live render side by side (source on
+     *  the left), stacking source above preview when the frame is narrower
+     *  than 560px. The preview pane is then a size container, so a demo's
+     *  container queries follow the pane's width. Default `tabs`. */
+    layout?: 'tabs' | 'split';
 }
-export declare function Preview({ children, source, dataSource, filename, defaultTab, height, }: PreviewProps): import("react").JSX.Element;
+export declare function Preview({ children, source, dataSource, filename, defaultTab, height, layout, }: PreviewProps): import("react").JSX.Element;

package/dist/components/Preview.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useLineNumbers } from "../lib/use-line-numbers.js";
+import { copyWithGlyphBurst } from "../lib/glyph-burst.js";
 function langFromFilename(name) {
   if (!name) return "tsx";
   const ext = name.split(".").pop()?.toLowerCase();
@@ -160,9 +161,12 @@ function Preview({
   dataSource,
   filename,
   defaultTab = "preview",
-  height
+  height,
+  layout = "tabs"
 }) {
-  const [tab, setTab] = useState(defaultTab);
+  const split = layout === "split";
+  const [selectedTab, setTab] = useState(defaultTab);
+  const tab = split ? "source" : selectedTab;
   const [copied, setCopied] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
@@ -175,21 +179,19 @@ function Preview({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [fullscreen]);
-  function copy() {
-    navigator.clipboard.writeText(visibleSource).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1400);
-      },
-      () => {
-      }
-    );
+  function copy(button) {
+    void copyWithGlyphBurst(button, visibleSource, { color: "var(--color-doc-template-ink)" }).then((ok) => {
+      if (!ok) return;
+      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",
+      ...split ? { "data-preview-layout": "split" } : null,
+      className: "dockit-preview border border-doc-template-faint bg-doc-template-panel",
       style: fullscreen ? {
         // Full-viewport overlay. `--color-doc-template-bg` is the page
         // surface token so the backdrop matches the site in both light
@@ -215,7 +217,7 @@ function Preview({
               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) => {
+              split ? /* @__PURE__ */ jsx("span", { style: { ...TAB, color: "var(--color-doc-template-muted)", cursor: "default", display: "inline-flex", alignItems: "center" }, children: "Source · Preview" }) : /* @__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",
@@ -264,7 +266,7 @@ function Preview({
                   "button",
                   {
                     type: "button",
-                    onClick: copy,
+                    onClick: (e) => copy(e.currentTarget),
                     "aria-label": "Copy source",
                     style: headerBtnStyle(copied),
                     children: copied ? "Copied" : "Copy"
@@ -287,7 +289,31 @@ function Preview({
             ]
           }
         ),
-        tab === "preview" ? /* @__PURE__ */ jsxs(
+        split ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "dockit-preview-split",
+            style: fullscreen ? { flex: 1, minHeight: 0, overflow: "auto" } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dockit-preview-split-source",
+                  style: { background: "var(--color-doc-template-code)", minWidth: 0 },
+                  children: /* @__PURE__ */ jsx(HighlightedSource, { code: source, filename })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "dockit-preview-split-render",
+                  style: { padding: 24, minHeight: 80, minWidth: 0, ...height ? { height } : null },
+                  children
+                }
+              )
+            ]
+          }
+        ) : tab === "preview" ? /* @__PURE__ */ jsxs(
           "div",
           {
             ...fullscreen ? { "data-preview-fill": "" } : null,

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { useHiddenToggle } from './lib/use-hidden-toggle';
 export { useLineNumbers } from './lib/use-line-numbers';
 export { useLocalStorage, DOC_PREFIX, docKey } from './lib/use-local-storage';
 export { useMediaQuery } from './lib/use-media-query';
+export { glyphBurst, copyWithGlyphBurst, burstGlyphs, type GlyphBurstOptions } from './lib/glyph-burst';
 export { Callout } from './components/Callout';
 export { Chip, type ChipProps, type ChipVariant } from './components/Chip';
 export { ClientOnly } from './components/ClientOnly';

package/dist/index.js

@@ -11,6 +11,7 @@ import { useHiddenToggle } from "./lib/use-hidden-toggle.js";
 import { useLineNumbers } from "./lib/use-line-numbers.js";
 import { DOC_PREFIX, docKey, useLocalStorage } from "./lib/use-local-storage.js";
 import { useMediaQuery } from "./lib/use-media-query.js";
+import { burstGlyphs, copyWithGlyphBurst, glyphBurst } from "./lib/glyph-burst.js";
 import { Callout } from "./components/Callout.js";
 import { Chip } from "./components/Chip.js";
 import { ClientOnly } from "./components/ClientOnly.js";
@@ -66,11 +67,14 @@ export {
   ThemeToggle,
   Topbar,
   VersionBadge,
+  burstGlyphs,
+  copyWithGlyphBurst,
   defaultResults,
   defineSiteConfig,
   docKey,
   findPage,
   getAdjacentPages,
+  glyphBurst,
   groupedPages,
   groupedVisiblePages,
   initDocs,

package/dist/lib/code-tabs-sync.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Opt-in sync groups for `<CodeTabs syncKey="…">` (Docusaurus `groupId`).
+ *
+ * Every CodeTabs sharing a `syncKey` shows the same tab *label*. The
+ * choice is persisted at `doc:code-tabs:<syncKey>` through the same
+ * `doc:` storage layer as `useLocalStorage`, so it survives navigation and
+ * reloads, follows other browser tabs via the native `storage` event, and
+ * follows other blocks on the page via the same-tab broadcast. An
+ * in-memory copy keeps in-page sync working when storage is blocked.
+ */
+export declare const codeTabsStorageKey: (syncKey: string) => string;
+/** Current choice for a group (client only). */
+export declare function readCodeTabsChoice(syncKey: string): string | null;
+/** Choose a label for every block in the group, here and in other tabs. */
+export declare function writeCodeTabsChoice(syncKey: string, label: string): void;
+/** Notify when the group's choice changes from any source. */
+export declare function subscribeCodeTabsChoice(syncKey: string, onChange: () => void): () => void;
+export interface CodeTabItem {
+    value: string;
+    label: string;
+}
+/**
+ * Which tab a block shows: the group's choice when the block has that label;
+ * otherwise the block keeps its own last selection, then its first tab.
+ */
+export declare function resolveCodeTab(items: readonly CodeTabItem[], choice: string | null, own: string | undefined): string | undefined;
+/**
+ * The group's chosen label, or `null` without a `syncKey`/choice.
+ *
+ * SSR and the hydration pass both see `null`, so markup always matches the
+ * server's (first-tab) HTML. A layout effect then re-renders before the
+ * browser paints the hydrated tree; client-side navigation reads the stored
+ * choice on first render, so no flash there.
+ */
+export declare function useCodeTabsChoice(syncKey: string | undefined): [string | null, (label: string) => void];

package/dist/lib/code-tabs-sync.js

@@ -0,0 +1,63 @@
+import { useCallback, useSyncExternalStore, useReducer, useLayoutEffect } from "react";
+import { subscribeDocStorage, readDocStorage, writeDocStorage } from "./use-local-storage.js";
+const codeTabsStorageKey = (syncKey) => `code-tabs:${syncKey}`;
+const memory = /* @__PURE__ */ new Map();
+const asLabel = (value) => typeof value === "string" ? value : null;
+function readCodeTabsChoice(syncKey) {
+  let choice = memory.get(syncKey);
+  if (choice === void 0) {
+    choice = asLabel(readDocStorage(codeTabsStorageKey(syncKey)));
+    memory.set(syncKey, choice);
+  }
+  return choice;
+}
+function writeCodeTabsChoice(syncKey, label) {
+  memory.set(syncKey, label);
+  writeDocStorage(codeTabsStorageKey(syncKey), label);
+}
+function subscribeCodeTabsChoice(syncKey, onChange) {
+  return subscribeDocStorage(codeTabsStorageKey(syncKey), (change) => {
+    if (change) memory.set(syncKey, asLabel(change.value));
+    else memory.delete(syncKey);
+    onChange();
+  });
+}
+function resolveCodeTab(items, choice, own) {
+  const chosen = choice === null ? void 0 : items.find((item) => item.label === choice);
+  if (chosen) return chosen.value;
+  return items.some((item) => item.value === own) ? own : items[0]?.value;
+}
+const noop = () => () => {
+};
+const serverSnapshot = () => null;
+function useCodeTabsChoice(syncKey) {
+  const subscribe = useCallback(
+    (onChange) => syncKey ? subscribeCodeTabsChoice(syncKey, onChange) : () => {
+    },
+    [syncKey]
+  );
+  const choice = useSyncExternalStore(
+    syncKey ? subscribe : noop,
+    () => syncKey ? readCodeTabsChoice(syncKey) : null,
+    serverSnapshot
+  );
+  const [, rerender] = useReducer((n) => n + 1, 0);
+  useLayoutEffect(() => {
+    if (syncKey && readCodeTabsChoice(syncKey) !== choice) rerender();
+  }, [syncKey]);
+  const choose = useCallback(
+    (label) => {
+      if (syncKey) writeCodeTabsChoice(syncKey, label);
+    },
+    [syncKey]
+  );
+  return [choice, choose];
+}
+export {
+  codeTabsStorageKey,
+  readCodeTabsChoice,
+  resolveCodeTab,
+  subscribeCodeTabsChoice,
+  useCodeTabsChoice,
+  writeCodeTabsChoice
+};

package/dist/lib/glyph-burst.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Glyph burst — the copy-button flourish. After a successful copy, a handful
+ * of the copied code's own punctuation (`{ } ( ) ; = …`) pops out of the
+ * button in its ink and mono face, arcs under gravity, and fades.
+ *
+ * Everything happens after the clipboard write resolves, inside one fixed,
+ * pointer-transparent overlay that removes itself; only transform and
+ * opacity animate, so nothing on the page reflows. Reduced motion, no
+ * matchMedia, or no Web Animations API → no burst, plain feedback only.
+ *
+ * Kept dependency-free on purpose; the DreamLake app ships a twin of this
+ * file (lib/notes/glyphBurst.ts) so both copy buttons feel the same.
+ */
+/** Up to `count` distinct symbols from `source`, padded with code punctuation. */
+export declare function burstGlyphs(source: string, count?: number): string[];
+export interface GlyphBurstOptions {
+    /** CSS font-family for the glyphs; defaults to the origin's computed font. */
+    font?: string;
+    /** CSS color for the glyphs; defaults to the origin's computed color. */
+    color?: string;
+}
+/** Fire-and-forget. Never throws; does nothing under reduced motion. */
+export declare function glyphBurst(origin: Element, source: string, options?: GlyphBurstOptions): void;
+/**
+ * Write `text` to the clipboard, then (only on success) burst from `origin`.
+ * Resolves true when the copy happened; the burst never delays or fails it.
+ */
+export declare function copyWithGlyphBurst(origin: Element, text: string, options?: GlyphBurstOptions): Promise<boolean>;

package/dist/lib/glyph-burst.js

@@ -0,0 +1,111 @@
+const FALLBACK = "{}();=<>/*[]#:";
+const SYMBOL = /[^\p{L}\p{N}\s_]/u;
+const COUNT = 10;
+function burstGlyphs(source, count = COUNT) {
+  const glyphs = [];
+  for (const ch of source) {
+    if (glyphs.length >= count) break;
+    if (SYMBOL.test(ch) && !glyphs.includes(ch)) glyphs.push(ch);
+  }
+  for (const ch of FALLBACK) {
+    if (glyphs.length >= count) break;
+    if (!glyphs.includes(ch)) glyphs.push(ch);
+  }
+  return glyphs;
+}
+function motionAllowed() {
+  if (typeof window === "undefined" || typeof document === "undefined")
+    return false;
+  if (typeof window.matchMedia !== "function") return false;
+  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function glyphBurst(origin, source, options = {}) {
+  try {
+    if (!motionAllowed()) return;
+    const rect = origin.getBoundingClientRect();
+    if (!rect.width && !rect.height) return;
+    const computed = window.getComputedStyle(origin);
+    const font = options.font ?? computed.fontFamily;
+    const color = options.color ?? computed.color;
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const layer = document.createElement("div");
+    layer.setAttribute("aria-hidden", "true");
+    layer.setAttribute("data-glyph-burst", "");
+    Object.assign(layer.style, {
+      position: "fixed",
+      inset: "0",
+      pointerEvents: "none",
+      overflow: "hidden",
+      contain: "strict",
+      zIndex: "2147483647"
+    });
+    const glyphs = burstGlyphs(source);
+    const animations = [];
+    glyphs.forEach((glyph, i) => {
+      const span = document.createElement("span");
+      span.textContent = glyph;
+      Object.assign(span.style, {
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`,
+        font: `500 12px/1 ${font}`,
+        color,
+        whiteSpace: "pre",
+        willChange: "transform, opacity"
+      });
+      layer.append(span);
+      if (typeof span.animate !== "function") return;
+      const angle = (-150 + 120 * (i + 0.2 + Math.random() * 0.6) / glyphs.length) * Math.PI / 180;
+      const speed = 170 + Math.random() * 60;
+      const vx = Math.cos(angle) * speed * 0.6;
+      const vy = Math.sin(angle) * speed;
+      const gravity = 440;
+      const spin = (Math.random() - 0.5) * 300;
+      const frames = [];
+      for (let step = 0; step <= 8; step++) {
+        const t = step / 8;
+        const dx = vx * t;
+        const dy = vy * t + gravity * t * t / 2;
+        frames.push({
+          offset: t,
+          opacity: t < 0.6 ? 0.9 : 0.9 * (1 - (t - 0.6) / 0.4),
+          transform: `translate(-50%, -50%) translate(${dx.toFixed(1)}px, ${dy.toFixed(1)}px) rotate(${(spin * t).toFixed(1)}deg) scale(${t === 0 ? 0.5 : 1})`
+        });
+      }
+      animations.push(
+        span.animate(frames, {
+          duration: 760 + Math.random() * 220,
+          delay: i * 12,
+          easing: "cubic-bezier(.3,.55,.55,1)",
+          fill: "both"
+        })
+      );
+    });
+    if (!animations.length) return;
+    document.body.append(layer);
+    let removed = false;
+    const remove = () => {
+      if (removed) return;
+      removed = true;
+      layer.remove();
+    };
+    Promise.all(animations.map((a) => a.finished)).then(remove, remove);
+    setTimeout(remove, 1600);
+  } catch {
+  }
+}
+async function copyWithGlyphBurst(origin, text, options) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    return false;
+  }
+  glyphBurst(origin, text, options);
+  return true;
+}
+export {
+  burstGlyphs,
+  copyWithGlyphBurst,
+  glyphBurst
+};

package/dist/lib/use-local-storage.d.ts

@@ -1,5 +1,19 @@
 export declare const DOC_PREFIX = "doc:";
 export declare const docKey: (k: string) => string;
+/** Read and JSON-decode a `doc:` key. Missing, malformed, or blocked
+ *  storage (privacy mode, sandboxed iframe, SSR) all return `undefined`. */
+export declare function readDocStorage<T>(key: string): T | undefined;
+/** JSON-encode a value into a `doc:` key and notify same-tab subscribers.
+ *  The broadcast fires even when persistence fails, so live in-page sync
+ *  survives disabled storage. */
+export declare function writeDocStorage<T>(key: string, value: T): void;
+/** Subscribe to changes of a `doc:` key from this tab (custom event) and
+ *  other tabs (native `storage` event; `key === null` means storage was
+ *  cleared). Same-tab writes pass `{ value }`, so subscribers stay in sync
+ *  even when storage is blocked; cross-tab changes pass `null` (re-read). */
+export declare function subscribeDocStorage(key: string, onChange: (sameTab: {
+    value: unknown;
+} | null) => void): () => void;
 /**
  * SSR-safe localStorage-backed state. Returns the in-memory React
  * value and a setter that mirrors the value into localStorage and

package/dist/lib/use-local-storage.js

@@ -2,50 +2,62 @@ import { useState, useRef, useEffect, useCallback } from "react";
 const DOC_PREFIX = "doc:";
 const docKey = (k) => k.startsWith(DOC_PREFIX) ? k : DOC_PREFIX + k;
 const SAME_TAB_EVENT = "doc:storage";
+function readDocStorage(key) {
+  if (typeof window === "undefined") return void 0;
+  const fullKey = docKey(key);
+  try {
+    const raw = localStorage.getItem(fullKey);
+    return raw === null ? void 0 : JSON.parse(raw);
+  } catch (err) {
+    return void 0;
+  }
+}
+function writeDocStorage(key, value) {
+  if (typeof window === "undefined") return;
+  const fullKey = docKey(key);
+  try {
+    localStorage.setItem(fullKey, JSON.stringify(value));
+  } catch {
+  }
+  window.dispatchEvent(
+    new CustomEvent(SAME_TAB_EVENT, { detail: { key: fullKey, value } })
+  );
+}
+function subscribeDocStorage(key, onChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  const fullKey = docKey(key);
+  const onStorage = (e) => {
+    if (e.key === fullKey || e.key === null) onChange(null);
+  };
+  const onSameTab = (e) => {
+    const detail = e.detail;
+    if (detail?.key === fullKey) onChange({ value: detail.value });
+  };
+  window.addEventListener("storage", onStorage);
+  window.addEventListener(SAME_TAB_EVENT, onSameTab);
+  return () => {
+    window.removeEventListener("storage", onStorage);
+    window.removeEventListener(SAME_TAB_EVENT, onSameTab);
+  };
+}
 function useLocalStorage(key, defaultValue) {
   const fullKey = docKey(key);
   const [value, setValue] = useState(defaultValue);
   const defaultRef = useRef(defaultValue);
   defaultRef.current = defaultValue;
   useEffect(() => {
-    if (typeof window === "undefined") return;
     const read = () => {
-      try {
-        const raw = localStorage.getItem(fullKey);
-        if (raw === null) {
-          setValue(defaultRef.current);
-        } else {
-          setValue(JSON.parse(raw));
-        }
-      } catch (err) {
-      }
+      const stored = readDocStorage(fullKey);
+      setValue(stored === void 0 ? defaultRef.current : stored);
     };
     read();
-    const onStorage = (e) => {
-      if (e.key === fullKey) read();
-    };
-    const onSameTab = (e) => {
-      const detail = e.detail;
-      if (detail?.key === fullKey) read();
-    };
-    window.addEventListener("storage", onStorage);
-    window.addEventListener(SAME_TAB_EVENT, onSameTab);
-    return () => {
-      window.removeEventListener("storage", onStorage);
-      window.removeEventListener(SAME_TAB_EVENT, onSameTab);
-    };
+    return subscribeDocStorage(fullKey, () => read());
   }, [fullKey]);
   const set = useCallback(
     (next) => {
       setValue(next);
-      if (typeof window === "undefined") return;
-      try {
-        localStorage.setItem(fullKey, JSON.stringify(next));
-      } catch {
-      }
-      window.dispatchEvent(
-        new CustomEvent(SAME_TAB_EVENT, { detail: { key: fullKey } })
-      );
+      writeDocStorage(fullKey, next);
     },
     [fullKey]
   );
@@ -54,5 +66,8 @@ function useLocalStorage(key, defaultValue) {
 export {
   DOC_PREFIX,
   docKey,
-  useLocalStorage
+  readDocStorage,
+  subscribeDocStorage,
+  useLocalStorage,
+  writeDocStorage
 };

package/dist/styles.css

@@ -468,3 +468,15 @@
   /* Touch has no hover-away state: leave room so actions never mask code. */
   [data-code-block]:has(> .dockit-code-controls) > div:last-child { padding-top: 30px; }
 }
+
+/* Preview layout="split": source left, live render right; stacked when the
+   frame is narrower than 560px. The render pane is a size container so a
+   demo's container queries follow the pane, not the page. */
+.dockit-preview[data-preview-layout='split'] { container: dockit-preview / inline-size; }
+.dockit-preview-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.dockit-preview-split-source { border-right: 1px solid var(--color-doc-template-faint); overflow-x: auto; }
+.dockit-preview-split-render { container-type: inline-size; }
+@container dockit-preview (max-width: 560px) {
+  .dockit-preview-split { grid-template-columns: minmax(0, 1fr); }
+  .dockit-preview-split-source { border-right: 0; border-bottom: 1px solid var(--color-doc-template-faint); }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.30",
-  "description": "The DreamLake documentation shell \u2014 Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
+  "version": "0.2.32",
+  "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -38,11 +38,6 @@
     },
     "./styles.css": "./dist/styles.css"
   },
-  "scripts": {
-    "build": "vite build",
-    "typecheck": "tsc --noEmit",
-    "test": "node --test tests/*.test.mjs"
-  },
   "peerDependencies": {
     "@mdx-js/react": ">=3.0.0",
     "react": ">=19.0.0",
@@ -85,5 +80,10 @@
     "vike-react": "^0.5.0",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.3.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test tests/*.test.mjs"
   }
-}
+}