@dreamlake/dockit 0.1.1 → 0.2.1

package/dist/components/CodeBlock.js

@@ -60,22 +60,36 @@ function CodeBlock({ children, filename, lang }) {
             },
             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 }),
+              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", 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" })
-              ] })
+              /* @__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" })
+                  ]
+                }
+              )
             ]
           }
         ),

package/dist/components/Preview.js

@@ -112,6 +112,48 @@ function HashIcon() {
     }
   );
 }
+function MaximizeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 12, height: 12, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function MinimizeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { width: 12, height: 12, display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
 function Preview({
   children,
   source,
@@ -122,8 +164,17 @@ function Preview({
 }) {
   const [tab, setTab] = useState(defaultTab);
   const [copied, setCopied] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
   const visibleSource = tab === "data" ? dataSource ?? "" : source;
+  useEffect(() => {
+    if (!fullscreen) return;
+    function onKey(e) {
+      if (e.key === "Escape") setFullscreen(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [fullscreen]);
   function copy() {
     navigator.clipboard.writeText(visibleSource).then(
       () => {
@@ -139,7 +190,20 @@ function Preview({
     {
       "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" },
+      style: fullscreen ? {
+        // Full-viewport overlay. `--color-doc-template-bg` is the page
+        // surface token so the backdrop matches the site in both light
+        // and dark themes.
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        margin: 0,
+        borderRadius: 0,
+        background: "var(--color-doc-template-bg)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      } : { margin: "18px 0 22px", borderRadius: "var(--radius-doc-template)", overflow: "hidden" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -206,11 +270,54 @@ function Preview({
                     children: copied ? "Copied" : "Copy"
                   }
                 )
-              ] })
+              ] }),
+              tab === "preview" && /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" } }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": fullscreen,
+                  "aria-label": fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                  title: fullscreen ? "Exit fullscreen (Esc)" : "Enter fullscreen",
+                  onClick: () => setFullscreen((f) => !f),
+                  style: headerBtnStyle(fullscreen),
+                  children: fullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(MaximizeIcon, {})
+                }
+              )
             ]
           }
         ),
-        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 }) })
+        tab === "preview" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...fullscreen ? { "data-preview-fill": "" } : null,
+            style: fullscreen ? {
+              // Full-bleed: drop the padding so a wide demo reaches every
+              // edge of the overlay. The `[data-preview-fill]` rule below
+              // then stretches the demo's own wrapper to this pane's
+              // height, so a specimen with a fixed height grows to fill
+              // the viewport instead of leaving dead space below it.
+              padding: 0,
+              flex: 1,
+              minHeight: 0,
+              width: "100%",
+              overflow: "auto"
+            } : { padding: 24, minHeight: 80, ...height ? { height } : null },
+            children: [
+              fullscreen && /* @__PURE__ */ jsx("style", { children: "[data-preview-fill]>:not(style){height:100%!important}" }),
+              children
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              background: "var(--color-doc-template-code)",
+              ...fullscreen ? { flex: 1, minHeight: 0, overflow: "auto" } : null
+            },
+            children: /* @__PURE__ */ jsx(HighlightedSource, { code: visibleSource, filename })
+          }
+        )
       ]
     }
   );

package/dist/components/Sidebar.js

@@ -1,7 +1,7 @@
 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 { normalizePath, 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";
@@ -15,6 +15,7 @@ function loadCollapsed() {
 }
 function Sidebar() {
   const { urlPathname } = usePageContext();
+  const currentPath = normalizePath(urlPathname);
   const [showHidden] = useHiddenToggle();
   const allGroups = showHidden ? groupedPages : groupedVisiblePages;
   const activeTab = tabForUrl(urlPathname);
@@ -36,7 +37,7 @@ function Sidebar() {
     });
   }
   useEffect(() => {
-    const g = groups.find((g2) => g2.items.some((i) => i.path === urlPathname));
+    const g = groups.find((g2) => g2.items.some((i) => i.path === currentPath));
     if (g?.label && collapsed.has(g.label)) {
       setCollapsed((prev) => {
         const next = new Set(prev);
@@ -84,7 +85,7 @@ function Sidebar() {
             "a",
             {
               href: item.path,
-              "aria-current": item.path === urlPathname ? "page" : void 0,
+              "aria-current": item.path === currentPath ? "page" : void 0,
               className: "sidebar-link",
               children: [
                 /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: item.title }),

package/dist/components/TOC.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { usePageContext } from "vike-react/usePageContext";
-import { pages } from "../lib/navigation.js";
+import { normalizePath, findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 const TOC_KEY_PREFIX = "toc-collapsed:";
 const X0 = 4;
@@ -51,15 +51,16 @@ function scrollToHeading(e, id) {
 }
 function TOC() {
   const { urlPathname } = usePageContext();
+  const currentPath = normalizePath(urlPathname);
   const mdHref = (() => {
-    const meta = pages.find((p) => p.path === urlPathname);
+    const meta = findPage(urlPathname);
     if (!meta || meta.noindex) return null;
-    return urlPathname === "/" ? "/index.md" : `${urlPathname}.md`;
+    return currentPath === "/" ? "/index.md" : `${currentPath}.md`;
   })();
   const editHref = (() => {
-    const meta = pages.find((p) => p.path === urlPathname);
+    const meta = findPage(urlPathname);
     if (!meta) return null;
-    const slug = urlPathname === "/" ? "index" : urlPathname.replace(/^\//, "");
+    const slug = currentPath === "/" ? "index" : currentPath.replace(/^\//, "");
     const pagesPath = siteConfig.docsPagesPath ?? "docs/pages";
     return `${siteConfig.docsRepoUrl}/edit/${siteConfig.docsBranch}/${pagesPath}/${slug}/+Page.mdx`;
   })();
@@ -138,7 +139,7 @@ function TOC() {
       setHeadings([]);
       return;
     }
-    const current = pages.find((p) => p.path === urlPathname);
+    const current = findPage(urlPathname);
     const tocLevel = current?.tocLevel ?? 3;
     const selector = tocLevel >= 3 ? "[data-toc-anchor], h3[id]" : "[data-toc-anchor]";
     function collect() {

package/dist/components/ThemeToggle.d.ts

@@ -1,2 +1,5 @@
 import { JSX } from 'react';
+/** Topbar theme control. The variant comes from `siteConfig.themeToggle`:
+ *  `'cycle'` (default) renders the single cycling button, `'segmented'`
+ *  the three-button slider. Both share ThemeProvider state. */
 export declare function ThemeToggle(): JSX.Element;

package/dist/components/ThemeToggle.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "./ThemeProvider.js";
 import { ClientOnly } from "./ClientOnly.js";
+import { siteConfig } from "../site-config.js";
 const SIZE = 24;
 const PAD = 2;
 const SPRING = "cubic-bezier(0.34, 1.45, 0.55, 1)";
@@ -61,11 +62,11 @@ const DarkIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const SEGMENTS = [
-  { value: "light", label: "Light", Icon: LightIcon },
+  { value: "light", label: "Light", Icon: LightIcon, inactiveRotate: -18 },
   { value: "system", label: "System", Icon: SystemIcon },
-  { value: "dark", label: "Dark", Icon: DarkIcon }
+  { value: "dark", label: "Dark", Icon: DarkIcon, inactiveRotate: 18 }
 ];
-function ToggleInner() {
+function CycleToggle() {
   const { theme, setTheme } = useTheme();
   const idx = Math.max(0, SEGMENTS.findIndex((s) => s.value === theme));
   const current = SEGMENTS[idx];
@@ -101,8 +102,80 @@ function ToggleInner() {
     }
   );
 }
+function SegmentedToggle() {
+  const { theme, setTheme } = useTheme();
+  const idx = Math.max(0, SEGMENTS.findIndex((s) => s.value === theme));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Theme",
+      className: "relative inline-flex items-center bg-doc-template-panel",
+      style: { padding: PAD, borderRadius: 999, isolation: "isolate" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "bg-doc-template-chip",
+            style: {
+              position: "absolute",
+              top: PAD,
+              left: PAD,
+              width: SIZE,
+              height: SIZE,
+              borderRadius: 999,
+              transform: `translateX(${idx * SIZE}px)`,
+              transition: `transform 0.42s ${SPRING}`,
+              zIndex: 0,
+              willChange: "transform"
+            }
+          }
+        ),
+        SEGMENTS.map((seg) => {
+          const pressed = seg.value === theme;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": seg.label,
+              title: seg.label,
+              "aria-pressed": pressed,
+              onClick: () => setTheme(seg.value),
+              className: pressed ? "inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-doc-template-ink" : "inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-doc-template-muted hover:text-doc-template-ink",
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: SIZE,
+                height: SIZE,
+                borderRadius: 999,
+                padding: 0,
+                margin: 0,
+                transition: "color 0.25s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    transform: pressed ? "scale(1) rotate(0deg)" : `scale(0.85)${seg.inactiveRotate ? ` rotate(${seg.inactiveRotate}deg)` : ""}`,
+                    opacity: pressed ? 1 : 0.65,
+                    transition: `transform 0.42s ${SPRING}, opacity 0.25s ease`
+                  },
+                  children: /* @__PURE__ */ jsx(seg.Icon, {})
+                }
+              )
+            },
+            seg.value
+          );
+        })
+      ]
+    }
+  );
+}
 function ThemeToggle() {
-  return /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(ToggleInner, {}) });
+  const segmented = siteConfig.themeToggle === "segmented";
+  return /* @__PURE__ */ jsx(ClientOnly, { children: segmented ? /* @__PURE__ */ jsx(SegmentedToggle, {}) : /* @__PURE__ */ jsx(CycleToggle, {}) });
 }
 export {
   ThemeToggle