@dreamlake/dockit 0.2.31 → 0.2.32

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

@@ -161,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();
@@ -187,7 +190,8 @@ function Preview({
     "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
@@ -213,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",
@@ -285,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/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,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.31",
+  "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",