@dreamlake/dockit 0.2.1 → 0.2.3

package/dist/components/TabStrip.js

@@ -1,11 +1,20 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useLayoutEffect } from "react";
+import { useMemo, useRef, useState, useLayoutEffect } from "react";
 import { usePageContext } from "vike-react/usePageContext";
-import { tabForUrl, TABS } from "../lib/tabs.js";
+import { tabForUrl, TABS, urlInTab } from "../lib/tabs.js";
+import { pages } from "../lib/navigation.js";
+import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
 function TabStrip() {
   const { urlPathname } = usePageContext();
   const activeTab = tabForUrl(urlPathname);
+  const [showHidden] = useHiddenToggle();
+  const visibleTabs = useMemo(() => {
+    if (showHidden) return TABS;
+    return TABS.filter(
+      (tab) => tab.id === activeTab || pages.some((p) => !p.hidden && urlInTab(p.path, tab.id))
+    );
+  }, [showHidden, activeTab]);
   const containerRef = useRef(null);
   const linkRefs = useRef({});
   const [hovered, setHovered] = useState(null);
@@ -35,7 +44,7 @@ function TabStrip() {
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [targetTab]);
-  if (TABS.length === 0) return null;
+  if (visibleTabs.length === 0) return null;
   return /* @__PURE__ */ jsxs(
     "ol",
     {
@@ -45,7 +54,7 @@ function TabStrip() {
       style: { height: "100%" },
       onMouseLeave: () => setHovered(null),
       children: [
-        TABS.map((tab) => {
+        visibleTabs.map((tab) => {
           const isActive = tab.id === activeTab;
           return /* @__PURE__ */ jsx(
             "li",

package/dist/components/Topbar.js

@@ -19,30 +19,22 @@ function HiddenRevealChip() {
       onClick: () => setShow(false),
       "aria-label": "Dev mode on — hidden pages are visible. Click to hide again.",
       title: "Dev mode on — hidden pages are visible (Cmd+Shift+D to toggle)",
+      className: "text-doc-template-warn",
       style: {
         display: "inline-flex",
         alignItems: "center",
-        justifyContent: "center",
-        width: 16,
-        height: 16,
-        padding: 0,
-        border: 0,
-        background: "transparent",
+        padding: "2px 7px",
+        border: "1px solid color-mix(in srgb, var(--color-doc-template-warn) 45%, transparent)",
+        borderRadius: 4,
+        background: "var(--color-doc-template-warn-soft)",
+        fontFamily: "var(--font-doc-template-mono)",
+        fontSize: 10,
+        fontWeight: 600,
+        letterSpacing: "0.08em",
+        lineHeight: 1.4,
         cursor: "pointer"
       },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          style: {
-            width: 8,
-            height: 8,
-            borderRadius: 999,
-            background: "var(--color-doc-template-warn)",
-            boxShadow: "0 0 0 3px var(--color-doc-template-warn-soft)"
-          }
-        }
-      )
+      children: "DEV"
     }
   );
 }

package/dist/renderer/onRenderHtml.js

@@ -17,6 +17,8 @@ async function onRenderHtml(pageContext) {
   const themeScript = dangerouslySkipEscape(
     `<script>(function(){try{var raw=localStorage.getItem('doc:theme');var t=raw;try{t=JSON.parse(raw);}catch(_){}var d=document.documentElement;if(t==='light'){d.setAttribute('data-theme','light');}else if(t==='dark'){d.setAttribute('data-theme','dark');}else{d.setAttribute('data-theme',window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}catch(e){}})()<\/script>`
   );
+  const headScripts = (siteConfig.headScripts ?? []).filter((src) => /^(https?:)?\/\/[^"'<>\s]+$|^\/[^"'<>\s]*$/.test(src)).map((src) => `<script src="${src}" defer><\/script>`).join("\n    ");
+  const headScriptTags = headScripts ? dangerouslySkipEscape(headScripts) : "";
   return {
     documentHtml: escapeInject`<!DOCTYPE html>
 <html lang="en">
@@ -24,6 +26,7 @@ async function onRenderHtml(pageContext) {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     ${themeScript}
+    ${headScriptTags}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
     <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet" />

package/dist/site-config.d.ts

@@ -64,6 +64,11 @@ export interface SiteConfig {
      *  per-page imports. Same-name entries override the library's. Typed
      *  loosely to avoid coupling this module to React. */
     mdxComponents?: Record<string, unknown>;
+    /** External script URLs injected as `<script src defer>` into every page's
+     *  head at SSR time (e.g. the Studio design-integration bridge). URLs only
+     *  — http(s), protocol-relative, or absolute-path; anything else is
+     *  silently dropped. */
+    headScripts?: string[];
 }
 export declare const siteConfig: SiteConfig;
 /** Merge site-provided values into the singleton (mutates in place). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",