@dreamlake/dockit 0.2.28 → 0.2.29

package/dist/components/CodeBlock.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+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";
@@ -23,6 +23,7 @@ function CodeBlock({ children, filename, lang }) {
   const embedded = useContext(CodeTabsContext);
   const wrapRef = useRef(null);
   const [copied, setCopied] = useState(false);
+  const [wrap, setWrap] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
   function copy() {
     const el = wrapRef.current?.querySelector("pre code");
@@ -36,131 +37,169 @@ function CodeBlock({ children, filename, lang }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapRef,
-      "data-line-numbers": showLines ? "on" : "off",
-      className: embedded ? void 0 : "group relative border border-doc-template-faint bg-doc-template-code",
-      style: {
-        margin: embedded ? 0 : "18px 0 22px",
-        borderRadius: embedded ? 0 : "var(--radius-doc-template)",
-        overflow: embedded ? "visible" : "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 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
-                  style: { fontWeight: 600, letterSpacing: "0.06em" },
-                  children: lang
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: "inline-flex items-center opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
-                  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: embedded ? 8 : 6, padding: embedded ? "3px 0 3px 8px" : "8px 8px", isolation: "isolate" },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  style: {
-                    position: "absolute",
-                    inset: 4,
-                    zIndex: -1,
-                    pointerEvents: "none",
-                    borderRadius: 6,
-                    background: embedded ? "var(--color-doc-template-bg)" : "color-mix(in srgb, var(--color-doc-template-code) 88%, transparent)",
-                    boxShadow: embedded ? void 0 : "0 0 10px 6px var(--color-doc-template-code)",
-                    backdropFilter: "blur(8px)",
-                    WebkitBackdropFilter: "blur(8px)"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    embedded && (filename || lang) && /* @__PURE__ */ jsx("span", { className: "dockit-code-tabs-label", title: filename || lang, children: filename || lang }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapRef,
+        "data-code-block": true,
+        "data-wrap": wrap ? "on" : "off",
+        "data-line-numbers": showLines ? "on" : "off",
+        className: embedded ? "group relative" : "group relative border border-doc-template-faint bg-doc-template-code",
+        style: {
+          margin: embedded ? 0 : "18px 0 22px",
+          borderRadius: embedded ? 0 : "var(--radius-doc-template)",
+          overflow: embedded ? "visible" : "hidden"
+        },
+        children: [
+          filename && !embedded && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center border-b border-doc-template-faint text-doc-template-muted",
+              style: {
+                gap: 12,
+                flexWrap: "wrap",
+                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: "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
-          }
-        )
-      ]
-    }
-  );
+                ),
+                lang && !embedded && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "uppercase opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
+                    style: { fontWeight: 600, letterSpacing: "0.06em" },
+                    children: lang
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "dockit-code-controls inline-flex items-center opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
+                    style: { gap: 6 },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Line numbers",
+                          "aria-pressed": showLines,
+                          title: showLines ? ":set nonu" : ":set nu",
+                          onClick: () => setShowLines(!showLines),
+                          style: headerBtnStyle(showLines),
+                          children: /* @__PURE__ */ jsx(HashIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-pressed": wrap,
+                          onClick: () => setWrap(!wrap),
+                          style: headerBtnStyle(wrap),
+                          children: "Wrap"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("button", { type: "button", onClick: copy, style: headerBtnStyle(copied), children: copied ? "Copied" : "Copy" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          (!filename || embedded) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "dockit-code-controls 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", isolation: "isolate" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      position: "absolute",
+                      inset: 4,
+                      zIndex: -1,
+                      pointerEvents: "none",
+                      borderRadius: 6,
+                      background: "color-mix(in srgb, var(--color-doc-template-code) 88%, transparent)",
+                      boxShadow: "0 0 10px 6px var(--color-doc-template-code)",
+                      backdropFilter: "blur(8px)",
+                      WebkitBackdropFilter: "blur(8px)"
+                    }
+                  }
+                ),
+                lang && !embedded && /* @__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-label": "Line numbers",
+                    "aria-pressed": showLines,
+                    title: showLines ? ":set nonu" : ":set nu",
+                    onClick: () => setShowLines(!showLines),
+                    style: headerBtnStyle(showLines),
+                    children: /* @__PURE__ */ jsx(HashIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": wrap,
+                    onClick: () => setWrap(!wrap),
+                    style: headerBtnStyle(wrap),
+                    children: "Wrap"
+                  }
+                ),
+                /* @__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(

package/dist/components/CodeTabs.d.ts

@@ -9,5 +9,5 @@ export interface CodeTabsProps {
     children: ReactNode;
     'aria-label'?: string;
 }
-/** Equivalent fenced examples in one frame; arrow keys activate and focus tabs. */
+/** 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;

package/dist/components/CodeTabs.js

@@ -1,58 +1,25 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useState, useId, useRef } from "react";
-import { Tabs, TabsList, TabsTrigger } from "../vendor/@dreamlake/uikit/src/components/Tabs/Tabs.js";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { TabbedContainer } from "../vendor/@dreamlake/uikit/src/components/TabbedContainer/TabbedContainer.js";
 import { CodeTabsContext } from "./code-tabs-context.js";
 function CodeExample({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function CodeTabs({ children, "aria-label": label = "Code examples" }) {
   const examples = Children.toArray(children).filter(isValidElement);
-  const [selected, setSelected] = useState(0);
-  const active = Math.min(selected, Math.max(0, examples.length - 1));
-  const id = useId();
-  const buttons = useRef([]);
   if (!examples.length) return null;
-  return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, "data-first-active": active === 0, className: "dockit-code-tabs group relative", children: /* @__PURE__ */ jsxs(Tabs, { value: String(active), onValueChange: (value) => setSelected(Number(value)), children: [
-    /* @__PURE__ */ jsx("div", { className: "dockit-code-tabs-header", children: /* @__PURE__ */ jsx(TabsList, { "aria-label": label, className: "dockit-code-tabs-list border-0 font-doc-template-ui", children: examples.map((example, index) => /* @__PURE__ */ jsx(
-      TabsTrigger,
-      {
-        value: String(index),
-        className: "shrink-0 font-doc-template-mono font-medium data-[active]:font-semibold text-doc-template-muted hover:text-doc-template-ink data-[active]:text-doc-template-ink text-[12px]",
-        ref: (element) => {
-          buttons.current[index] = element;
-        },
-        id: `${id}-tab-${index}`,
-        "aria-controls": `${id}-panel-${index}`,
-        "aria-selected": active === index,
-        tabIndex: active === index ? 0 : -1,
-        onKeyDown: (event) => {
-          let next;
-          if (event.key === "ArrowRight") next = (index + 1) % examples.length;
-          else if (event.key === "ArrowLeft") next = (index - 1 + examples.length) % examples.length;
-          else if (event.key === "Home") next = 0;
-          else if (event.key === "End") next = examples.length - 1;
-          else return;
-          event.preventDefault();
-          setSelected(next);
-          buttons.current[next]?.focus();
-        },
-        children: example.props.label
-      },
-      example.key ?? index
-    )) }) }),
-    /* @__PURE__ */ jsx(CodeTabsContext.Provider, { value: true, children: examples.map((example, index) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "tabpanel",
-        id: `${id}-panel-${index}`,
-        "aria-labelledby": `${id}-tab-${index}`,
-        hidden: active !== index,
-        tabIndex: 0,
+  return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, 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
-      },
-      example.key ?? index
-    )) })
-  ] }) });
+      }))
+    }
+  ) }) });
 }
 export {
   CodeExample,

package/dist/components/code-tabs-context.d.ts

@@ -1,2 +1,2 @@
-/** Internal: a fenced block shares the surrounding tabs' frame and toolbar. */
+/** Internal: a fenced block shares the surrounding tabs' frame; its label sits beside the tabs. */
 export declare const CodeTabsContext: import('react').Context<boolean>;

package/dist/styles.css

@@ -382,19 +382,26 @@
 /* One frame and toolbar for ordinary MDX fenced examples. Inactive panels keep
    their code/control state but are absent from keyboard and accessibility flow. */
 .dockit-code-tabs {
+  position: relative;
+  min-width: 0;
   margin: 18px 0 22px;
   border-radius: 6px 6px var(--radius-doc-template) var(--radius-doc-template);
   overflow: hidden;
 }
-.dockit-code-tabs-header {
+.dockit-code-tabs .uikit-tabbed-container-header {
   background: var(--color-doc-template-bg);
   min-height: 30px;
-  padding: 0 156px 0 0;
+  padding: 0 min(32%, 12ch) 0 0;
 }
-.dockit-code-tabs-list { overflow-x: auto; min-height: 30px; gap: 2px; }
+.dockit-code-tabs .uikit-tabbed-container-tabs { overflow-x: auto; min-height: 30px; gap: 2px; border: 0; }
 /* Raised file-tab geometry follows Studio's chat TabStrip. UIKit supplies the
    compound primitives; the active code-colored bottom edge opens the baseline. */
-.dockit-code-tabs-list [role='tab'] {
+.dockit-code-tabs .uikit-tabbed-container-tabs [role='tab'] {
+  flex-shrink: 0;
+  font-family: var(--font-doc-template-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-doc-template-muted);
   margin: 0 1px;
   padding: 3px 9px 4px;
   border: 1px solid transparent;
@@ -402,19 +409,21 @@
   background: transparent;
   line-height: 18px;
 }
-.dockit-code-tabs-list [role='tab']:first-child { margin-left: 0; }
-.dockit-code-tabs-list [role='tab'][aria-selected='false']:hover {
+.dockit-code-tabs .uikit-tabbed-container-tabs [role='tab']:first-child { margin-left: 0; }
+.dockit-code-tabs .uikit-tabbed-container-tabs [role='tab'][aria-selected='false']:hover {
   border-color: var(--color-doc-template-faint);
   border-bottom-color: transparent;
   color: var(--color-doc-template-ink);
 }
-.dockit-code-tabs-list [role='tab'][aria-selected='true'] {
+.dockit-code-tabs .uikit-tabbed-container-tabs [role='tab'][aria-selected='true'] {
+  color: var(--color-doc-template-ink);
+  font-weight: 600;
   z-index: 1;
   border-color: var(--color-doc-template-faint);
   border-bottom-color: var(--color-doc-template-code);
   background: var(--color-doc-template-code);
 }
-.dockit-code-tabs-list [role='tab']:focus-visible,
+.dockit-code-tabs .uikit-tabbed-container-tabs [role='tab']:focus-visible,
 .dockit-code-tabs [role='tabpanel']:focus-visible {
   outline: 2px solid var(--color-doc-template-accent);
   outline-offset: -3px;
@@ -435,3 +444,27 @@
 .doc-content-row > * { min-width: 0; }
 @media (min-width: 1024px) { .doc-content { --doc-row-bleed: 40px; } }
 .doc-content[data-doc-fullscreen] { --doc-row-bleed: 0px; }
+
+/* Labels stay in the tab row; actions are positioned by each code block. The
+   hidden/inert UIKit panel also hides its label, without client-only portals. */
+.dockit-code-tabs-label {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  max-width: calc(min(32%, 12ch) - 16px);
+  line-height: 29px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: 600 10px/29px var(--font-doc-template-mono);
+  color: var(--color-doc-template-muted);
+}
+[data-code-block][data-wrap='on'] pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+@media (hover: none) {
+  .dockit-code-controls { opacity: 1; }
+  /* 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; }
+}

package/dist/vendor/@dreamlake/uikit/src/components/TabbedContainer/TabbedContainer.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsList, TabsTrigger } from "../Tabs/Tabs.js";
+function TabbedContainer({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  "aria-label": label,
+  keepMounted = true,
+  activationMode = "click",
+  className,
+  contentClassName
+}) {
+  const [internal, setInternal] = useState(defaultValue ?? items[0]?.value);
+  const id = useId(), buttons = useRef([]);
+  const selected = value ?? internal;
+  const active = items.findIndex((item) => item.value === selected);
+  const index = active < 0 ? 0 : active;
+  const choose = (next) => {
+    if (value === void 0) setInternal(next);
+    onValueChange?.(next);
+  };
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("uikit-tabbed-container", className),
+      "data-first-active": index === 0,
+      children: /* @__PURE__ */ jsxs(Tabs, { value: items[index].value, onValueChange: choose, children: [
+        /* @__PURE__ */ jsx("div", { className: "uikit-tabbed-container-header", children: /* @__PURE__ */ jsx(TabsList, { "aria-label": label, className: "uikit-tabbed-container-tabs", children: items.map((item, i) => /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: item.value,
+            ref: (node) => {
+              buttons.current[i] = node;
+            },
+            id: `${id}-tab-${i}`,
+            "aria-controls": `${id}-panel-${i}`,
+            tabIndex: index === i ? 0 : -1,
+            onPointerEnter: (event) => {
+              if (activationMode === "hover" && event.pointerType === "mouse" && index !== i)
+                choose(item.value);
+            },
+            onKeyDown: (event) => {
+              let next;
+              if (event.key === "ArrowRight") next = (i + 1) % items.length;
+              else if (event.key === "ArrowLeft")
+                next = (i + items.length - 1) % items.length;
+              else if (event.key === "Home") next = 0;
+              else if (event.key === "End") next = items.length - 1;
+              else return;
+              event.preventDefault();
+              choose(items[next].value);
+              buttons.current[next]?.focus();
+            },
+            children: item.label
+          },
+          item.value
+        )) }) }),
+        items.map(
+          (item, i) => (keepMounted || index === i) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tabpanel",
+              id: `${id}-panel-${i}`,
+              "aria-labelledby": `${id}-tab-${i}`,
+              hidden: index !== i,
+              inert: index !== i,
+              tabIndex: 0,
+              className: cn(
+                "uikit-tabbed-container-content",
+                contentClassName
+              ),
+              children: item.children
+            },
+            item.value
+          )
+        )
+      ] })
+    }
+  );
+}
+export {
+  TabbedContainer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",
@@ -67,6 +67,7 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
+    "@dreamlake/uikit": "0.2.3",
     "@mdx-js/react": "^3.1.0",
     "@types/node": "^22.20.1",
     "@types/react": "latest",
@@ -78,8 +79,7 @@
     "vike": "^0.4.210",
     "vike-react": "^0.5.0",
     "vite": "^7.0.0",
-    "vite-plugin-dts": "^4.3.0",
-    "@dreamlake/uikit": "0.1.15"
+    "vite-plugin-dts": "^4.3.0"
   },
   "scripts": {
     "build": "vite build",