@vibeflow-tools/prototyping 0.2.0

package/dist/index.js

@@ -0,0 +1,890 @@
+// src/context.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef
+} from "react";
+
+// src/utils.ts
+var URL_PARAM_PREFIX = "vf";
+var LS_PREFIX = "__vf__";
+function encodeUrlKey(name) {
+  return `${URL_PARAM_PREFIX}[${name}]`;
+}
+function readVariantFromUrl(name) {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  return params.get(encodeUrlKey(name));
+}
+function writeVariantToUrl(name, variant) {
+  if (typeof window === "undefined") return;
+  const params = new URLSearchParams(window.location.search);
+  params.set(encodeUrlKey(name), variant);
+  const newSearch = params.toString();
+  const newUrl = `${window.location.pathname}?${newSearch}${window.location.hash}`;
+  window.history.pushState(null, "", newUrl);
+}
+function removeVariantFromUrl(name) {
+  if (typeof window === "undefined") return;
+  const params = new URLSearchParams(window.location.search);
+  params.delete(encodeUrlKey(name));
+  const newSearch = params.toString();
+  const newUrl = newSearch ? `${window.location.pathname}?${newSearch}${window.location.hash}` : `${window.location.pathname}${window.location.hash}`;
+  window.history.pushState(null, "", newUrl);
+}
+function lsKey(name) {
+  return `${LS_PREFIX}${name}`;
+}
+function readVariantFromStorage(name) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(lsKey(name));
+  } catch {
+    return null;
+  }
+}
+function writeVariantToStorage(name, variant) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(lsKey(name), variant);
+  } catch {
+  }
+}
+function removeVariantFromStorage(name) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(lsKey(name));
+  } catch {
+  }
+}
+var UI_VISIBLE_KEY = "__vf__ui_visible__";
+function writeUiVisibleToStorage(visible) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(UI_VISIBLE_KEY, String(visible));
+  } catch {
+  }
+}
+function readUiVisibleFromStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    const val = window.localStorage.getItem(UI_VISIBLE_KEY);
+    if (val === null) return null;
+    return val !== "false";
+  } catch {
+    return null;
+  }
+}
+function resolveActiveVariant(name, variantKeys, defaultKey) {
+  const fromUrl = readVariantFromUrl(name);
+  if (fromUrl && variantKeys.includes(fromUrl)) return fromUrl;
+  const fromStorage = readVariantFromStorage(name);
+  if (fromStorage && variantKeys.includes(fromStorage)) return fromStorage;
+  return defaultKey;
+}
+
+// src/useKeyboardShortcuts.ts
+import { useEffect } from "react";
+var DEFAULT_SHORTCUTS = [
+  { key: "h", alt: true },
+  { key: "V", ctrl: true, shift: true }
+];
+function matchesShortcut(e, shortcut) {
+  if (e.key !== shortcut.key) return false;
+  if (!!shortcut.alt !== e.altKey) return false;
+  if (!!shortcut.ctrl !== e.ctrlKey) return false;
+  if (!!shortcut.shift !== e.shiftKey) return false;
+  if (!!shortcut.meta !== e.metaKey) return false;
+  return true;
+}
+function useKeyboardShortcuts({
+  onToggleUi,
+  shortcuts = DEFAULT_SHORTCUTS
+}) {
+  useEffect(() => {
+    if (shortcuts === false) return;
+    const handler = (e) => {
+      for (const shortcut of shortcuts) {
+        if (matchesShortcut(e, shortcut)) {
+          e.preventDefault();
+          onToggleUi();
+          return;
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onToggleUi, shortcuts]);
+}
+
+// src/context.tsx
+import { jsx } from "react/jsx-runtime";
+var VariantContext = createContext(null);
+function useVariantContext() {
+  const ctx = useContext(VariantContext);
+  if (!ctx) {
+    throw new Error("useVariantContext must be used inside <VariantProvider>");
+  }
+  return ctx;
+}
+function resolveInitialUiVisible(mode, defaultVisible) {
+  if (mode === "always") {
+    return defaultVisible ?? true;
+  }
+  const persisted = readUiVisibleFromStorage();
+  if (persisted !== null) return persisted;
+  return defaultVisible ?? true;
+}
+function VariantProvider({
+  children,
+  mode = "dev",
+  defaultVisible,
+  shortcuts
+}) {
+  const [scopes, setScopes] = useState({});
+  const [uiVisible, setUiVisible] = useState(
+    () => resolveInitialUiVisible(mode, defaultVisible)
+  );
+  const registeredSwitchers = useRef(/* @__PURE__ */ new Set());
+  const registerScope = useCallback(
+    (name, variantNames) => {
+      setScopes((prev) => {
+        const existing = prev[name];
+        if (existing && existing.variantNames.length === variantNames.length && existing.variantNames.every((v, i) => v === variantNames[i])) {
+          return prev;
+        }
+        const firstKey = variantNames[0] ?? "default";
+        const activeVariant = resolveActiveVariant(
+          name,
+          variantNames,
+          existing?.activeVariant ?? firstKey
+        );
+        return { ...prev, [name]: { activeVariant, variantNames } };
+      });
+    },
+    []
+  );
+  const getActiveVariant = useCallback(
+    (name) => {
+      return scopes[name]?.activeVariant ?? "";
+    },
+    [scopes]
+  );
+  const setActiveVariant = useCallback(
+    (name, variant) => {
+      setScopes((prev) => {
+        const existing = prev[name];
+        if (!existing) return prev;
+        if (existing.activeVariant === variant) return prev;
+        return { ...prev, [name]: { ...existing, activeVariant: variant } };
+      });
+      writeVariantToUrl(name, variant);
+      writeVariantToStorage(name, variant);
+    },
+    []
+  );
+  const toggleUiVisible = useCallback(() => {
+    setUiVisible((prev) => {
+      const next = !prev;
+      writeUiVisibleToStorage(next);
+      return next;
+    });
+  }, []);
+  const registerSwitcher = useCallback((name) => {
+    if (registeredSwitchers.current.has(name)) return false;
+    registeredSwitchers.current.add(name);
+    return true;
+  }, []);
+  const unregisterSwitcher = useCallback((name) => {
+    registeredSwitchers.current.delete(name);
+  }, []);
+  useKeyboardShortcuts({
+    onToggleUi: toggleUiVisible,
+    shortcuts
+  });
+  const value = {
+    getActiveVariant,
+    setActiveVariant,
+    registerScope,
+    registerSwitcher,
+    unregisterSwitcher,
+    scopes,
+    uiVisible,
+    toggleUiVisible,
+    mode
+  };
+  return /* @__PURE__ */ jsx(VariantContext.Provider, { value, children });
+}
+
+// src/useVariant.ts
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerVariant(name, variants) {
+  registry.set(name, variants);
+}
+function getRegisteredVariant(name) {
+  return registry.get(name);
+}
+function clearVariantRegistry() {
+  registry.clear();
+}
+
+// src/useActiveVariant.ts
+import { useMemo } from "react";
+function useActiveVariant(name, variantKeys) {
+  const ctx = useVariantContext();
+  return useMemo(() => {
+    const current = ctx.getActiveVariant(name);
+    if (current && variantKeys.includes(current)) return current;
+    return resolveActiveVariant(
+      name,
+      variantKeys,
+      variantKeys[0] ?? "default"
+    );
+  }, [ctx, name, variantKeys]);
+}
+
+// src/useVariant.ts
+function useVariant(name, variants) {
+  const ctx = useVariantContext();
+  const mergedVariants = useMemo2(() => {
+    const registered = getRegisteredVariant(name);
+    return registered ? { ...registered, ...variants } : variants;
+  }, [name, variants]);
+  const variantKeys = useMemo2(
+    () => Object.keys(mergedVariants),
+    [mergedVariants]
+  );
+  useEffect2(() => {
+    ctx.registerScope(name, variantKeys);
+  }, [ctx, name, variantKeys]);
+  const activeKey = useActiveVariant(name, variantKeys);
+  return mergedVariants[activeKey] ?? mergedVariants[variantKeys[0] ?? "default"] ?? {};
+}
+
+// src/PageVariantSwitcher.tsx
+import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PageVariantSwitcher({
+  name,
+  variants
+}) {
+  const ctx = useVariantContext();
+  const variantKeys = useMemo3(() => Object.keys(variants), [variants]);
+  useEffect3(() => {
+    ctx.registerScope(name, variantKeys);
+  }, [ctx, name, variantKeys]);
+  const activeKey = useActiveVariant(name, variantKeys);
+  if (!ctx.uiVisible) return null;
+  if (variantKeys.length < 2) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": `Page variant switcher: ${name}`,
+      style: {
+        position: "fixed",
+        top: "12px",
+        left: "12px",
+        zIndex: 99999,
+        display: "flex",
+        alignItems: "center",
+        background: "#171717",
+        borderRadius: "8px",
+        padding: "4px",
+        gap: "2px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.32)",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        fontSize: "12px",
+        userSelect: "none"
+      },
+      children: variantKeys.map((key) => {
+        const isActive = key === activeKey;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            role: "radio",
+            "aria-checked": isActive,
+            "aria-label": `Switch to ${key} variant`,
+            onClick: () => ctx.setActiveVariant(name, key),
+            style: {
+              cursor: "pointer",
+              border: "none",
+              outline: "none",
+              borderRadius: "5px",
+              padding: "5px 12px",
+              fontSize: "12px",
+              fontWeight: isActive ? 600 : 400,
+              background: isActive ? "#ffffff" : "transparent",
+              color: isActive ? "#171717" : "#a3a3a3",
+              transition: "background 0.15s, color 0.15s",
+              whiteSpace: "nowrap"
+            },
+            children: key
+          },
+          key
+        );
+      })
+    }
+  );
+}
+
+// src/VariantSwitcher.tsx
+import { useEffect as useEffect4, useMemo as useMemo4, useState as useState2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function VariantSwitcher({
+  name,
+  variants,
+  position = "right"
+}) {
+  const ctx = useVariantContext();
+  const variantKeys = useMemo4(() => Object.keys(variants), [variants]);
+  const [expanded, setExpanded] = useState2(false);
+  const containerRef = useRef2(null);
+  const [isPrimary, setIsPrimary] = useState2(false);
+  useEffect4(() => {
+    const primary = ctx.registerSwitcher(name);
+    setIsPrimary(primary);
+    return () => {
+      ctx.unregisterSwitcher(name);
+    };
+  }, [ctx, name]);
+  useEffect4(() => {
+    ctx.registerScope(name, variantKeys);
+  }, [ctx, name, variantKeys]);
+  const activeKey = useActiveVariant(name, variantKeys);
+  const [pos, setPos] = useState2(() => {
+    try {
+      const saved = localStorage.getItem(`vf-variant-pos-${name}`);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (typeof parsed.x === "number" && typeof parsed.y === "number")
+          return parsed;
+      }
+    } catch {
+    }
+    return null;
+  });
+  const [isDragging, setIsDragging] = useState2(false);
+  const [isHolding, setIsHolding] = useState2(false);
+  const dragOrigin = useRef2(null);
+  const holdTimer = useRef2(null);
+  const didDrag = useRef2(false);
+  const posRef = useRef2(null);
+  posRef.current = pos;
+  useEffect4(() => {
+    if (pos !== null) {
+      try {
+        localStorage.setItem(`vf-variant-pos-${name}`, JSON.stringify(pos));
+      } catch {
+      }
+    }
+  }, [pos, name]);
+  useEffect4(() => {
+    return () => {
+      if (holdTimer.current !== null) window.clearTimeout(holdTimer.current);
+    };
+  }, []);
+  function getInitialPos() {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      return { x: rect.left, y: rect.top };
+    }
+    return { x: window.innerWidth - 48, y: window.innerHeight / 2 };
+  }
+  function onDotPointerDown(e) {
+    const target = e.currentTarget;
+    const pointerId = e.pointerId;
+    const clientX = e.clientX;
+    const clientY = e.clientY;
+    didDrag.current = false;
+    holdTimer.current = window.setTimeout(() => {
+      setIsHolding(true);
+      const startPos = posRef.current ?? getInitialPos();
+      dragOrigin.current = {
+        mouseX: clientX,
+        mouseY: clientY,
+        posX: startPos.x,
+        posY: startPos.y
+      };
+      target.setPointerCapture(pointerId);
+    }, 300);
+  }
+  function onDotPointerMove(e) {
+    if (!dragOrigin.current) return;
+    const dx = e.clientX - dragOrigin.current.mouseX;
+    const dy = e.clientY - dragOrigin.current.mouseY;
+    if (!isDragging && (Math.abs(dx) > 3 || Math.abs(dy) > 3))
+      setIsDragging(true);
+    didDrag.current = true;
+    const bw = window.innerWidth;
+    const bh = window.innerHeight;
+    const x = Math.max(8, Math.min(bw - 40, dragOrigin.current.posX + dx));
+    const y = Math.max(8, Math.min(bh - 40, dragOrigin.current.posY + dy));
+    setPos({ x, y });
+  }
+  function onDotPointerUp() {
+    if (holdTimer.current !== null) {
+      window.clearTimeout(holdTimer.current);
+      holdTimer.current = null;
+    }
+    const wasDragged = didDrag.current;
+    dragOrigin.current = null;
+    setIsDragging(false);
+    setIsHolding(false);
+    didDrag.current = false;
+    if (!wasDragged) setExpanded(true);
+  }
+  function onDotPointerCancel() {
+    if (holdTimer.current !== null) {
+      window.clearTimeout(holdTimer.current);
+      holdTimer.current = null;
+    }
+    dragOrigin.current = null;
+    setIsDragging(false);
+    setIsHolding(false);
+    didDrag.current = false;
+  }
+  const handleClickOutside = useCallback2((e) => {
+    if (containerRef.current && !containerRef.current.contains(e.target)) {
+      setExpanded(false);
+    }
+  }, []);
+  useEffect4(() => {
+    if (expanded) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [expanded, handleClickOutside]);
+  useEffect4(() => {
+    if (!expanded) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expanded]);
+  if (!ctx.uiVisible) return null;
+  if (variantKeys.length < 2) return null;
+  if (!isPrimary) return null;
+  const sideStyle = position === "left" ? { left: "-24px", right: "auto" } : { right: "-24px", left: "auto" };
+  const containerStyle = pos !== null ? {
+    position: "fixed",
+    left: pos.x,
+    top: pos.y,
+    transform: "none",
+    zIndex: 9999
+  } : {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    ...sideStyle,
+    zIndex: 9999
+  };
+  const dotTitle = isDragging ? "Drag to reposition" : isHolding ? "Drag to reposition \xB7 Release to expand" : `${name} variants \u2014 click to switch \xB7 hold to drag`;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: containerRef,
+      role: "toolbar",
+      "aria-label": `Component variant switcher: ${name}`,
+      className: "vf-variant-switcher",
+      style: containerStyle,
+      children: expanded ? /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "3px",
+            background: "#fff",
+            border: "1px solid #e5e5e5",
+            borderRadius: "4px",
+            boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+            padding: "3px",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+          },
+          children: variantKeys.map((key, index) => {
+            const isActive = key === activeKey;
+            return /* @__PURE__ */ jsx3(
+              "button",
+              {
+                role: "radio",
+                "aria-checked": isActive,
+                "aria-label": `Switch to ${key} variant (${index + 1})`,
+                onClick: () => {
+                  ctx.setActiveVariant(name, key);
+                  setExpanded(false);
+                },
+                title: key,
+                style: {
+                  cursor: "pointer",
+                  border: "none",
+                  outline: "none",
+                  width: "22px",
+                  height: "22px",
+                  borderRadius: "3px",
+                  fontSize: "10px",
+                  fontWeight: isActive ? 700 : 400,
+                  background: isActive ? "#171717" : "transparent",
+                  color: isActive ? "#fff" : "#737373",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transition: "background 0.12s, color 0.12s",
+                  padding: 0,
+                  lineHeight: 1
+                },
+                children: index + 1
+              },
+              key
+            );
+          })
+        }
+      ) : (
+        /* Collapsed: draggable indicator dot */
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            "aria-label": `Open variant switcher for ${name}`,
+            title: dotTitle,
+            onPointerDown: onDotPointerDown,
+            onPointerMove: onDotPointerMove,
+            onPointerUp: onDotPointerUp,
+            onPointerCancel: onDotPointerCancel,
+            style: {
+              cursor: isDragging ? "grabbing" : isHolding ? "grab" : "pointer",
+              border: "1px solid #e5e5e5",
+              outline: "none",
+              width: "14px",
+              height: "14px",
+              borderRadius: "50%",
+              background: isDragging ? "#e5e5e5" : "#f5f5f5",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: isDragging ? "0 2px 8px rgba(0,0,0,0.14)" : "0 1px 2px rgba(0,0,0,0.06)",
+              transition: isDragging ? "none" : "background 0.15s, border-color 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (isDragging) return;
+              e.currentTarget.style.background = "#e5e5e5";
+              e.currentTarget.style.borderColor = "#d4d4d4";
+            },
+            onMouseLeave: (e) => {
+              if (isDragging) return;
+              e.currentTarget.style.background = "#f5f5f5";
+              e.currentTarget.style.borderColor = "#e5e5e5";
+            },
+            children: /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: {
+                  width: "5px",
+                  height: "5px",
+                  borderRadius: "50%",
+                  background: "#a3a3a3"
+                }
+              }
+            )
+          }
+        )
+      )
+    }
+  );
+}
+
+// src/VariantDevToolbar.tsx
+import { useState as useState3, useEffect as useEffect5, useCallback as useCallback3, useRef as useRef3 } from "react";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function isOverlayPresent() {
+  if (typeof document === "undefined") return false;
+  return !!document.getElementById("vibeflow-studio-root");
+}
+function VariantDevToolbar() {
+  const ctx = useVariantContext();
+  const [isOpen, setIsOpen] = useState3(false);
+  const [overlayDetected, setOverlayDetected] = useState3(() => isOverlayPresent());
+  const panelRef = useRef3(null);
+  const isOpenRef = useRef3(isOpen);
+  isOpenRef.current = isOpen;
+  useEffect5(() => {
+    if (overlayDetected) return;
+    function detect() {
+      if (isOverlayPresent()) {
+        setOverlayDetected(true);
+        return true;
+      }
+      return false;
+    }
+    if (detect()) return;
+    const observer = new MutationObserver(() => {
+      detect();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    const interval = setInterval(() => {
+      detect();
+    }, 500);
+    return () => {
+      observer.disconnect();
+      clearInterval(interval);
+    };
+  }, [overlayDetected]);
+  const openPanel = useCallback3(() => setIsOpen(true), []);
+  const closePanel = useCallback3(() => setIsOpen(false), []);
+  useEffect5(() => {
+    if (!overlayDetected) return;
+    const api = { openPanel, closePanel, get isOpen() {
+      return isOpenRef.current;
+    } };
+    Object.defineProperty(window, "__vf_prototyping", {
+      value: api,
+      writable: true,
+      configurable: true
+    });
+    return () => {
+      if (window.__vf_prototyping === api) {
+        delete window.__vf_prototyping;
+      }
+    };
+  }, [overlayDetected, openPanel, closePanel]);
+  useEffect5(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  const handleClickOutside = useCallback3((e) => {
+    if (panelRef.current && !panelRef.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  }, []);
+  useEffect5(() => {
+    if (!isOpen) return;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, handleClickOutside]);
+  const scopeEntries = Object.entries(ctx.scopes);
+  if (!ctx.uiVisible && !isOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ctx.uiVisible && !overlayDetected && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        "aria-label": "Toggle variant dev toolbar",
+        "aria-expanded": isOpen,
+        onClick: () => setIsOpen((p) => !p),
+        style: {
+          position: "fixed",
+          bottom: "16px",
+          right: "16px",
+          zIndex: 99998,
+          width: "40px",
+          height: "40px",
+          borderRadius: "50%",
+          background: "#6366f1",
+          color: "#fff",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.32)",
+          transition: "background 0.15s",
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+        },
+        title: "Open variant dev toolbar (Ctrl+Shift+V)",
+        children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx4("rect", { x: "2.5", y: "5", width: "2", height: "8", rx: "1", fill: "currentColor", opacity: "0.7" }),
+          /* @__PURE__ */ jsx4("rect", { x: "6.5", y: "2", width: "2", height: "14", rx: "1", fill: "currentColor" }),
+          /* @__PURE__ */ jsx4("rect", { x: "10.5", y: "6", width: "2", height: "6", rx: "1", fill: "currentColor", opacity: "0.7" }),
+          /* @__PURE__ */ jsx4("rect", { x: "14.5", y: "4", width: "2", height: "10", rx: "1", fill: "currentColor", opacity: "0.85" })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": "Variant dev toolbar",
+        style: {
+          position: "fixed",
+          bottom: "68px",
+          right: "16px",
+          zIndex: 99999,
+          background: "#fff",
+          border: "1px solid #e5e5e5",
+          borderRadius: "12px",
+          boxShadow: "0 8px 32px rgba(0,0,0,0.16)",
+          padding: "16px",
+          minWidth: "240px",
+          maxWidth: "360px",
+          maxHeight: "70vh",
+          overflowY: "auto",
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginBottom: "12px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontWeight: 700, color: "#171717", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+                  /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx4("rect", { x: "2.5", y: "5", width: "2", height: "8", rx: "1", fill: "#6366f1", opacity: "0.7" }),
+                    /* @__PURE__ */ jsx4("rect", { x: "6.5", y: "2", width: "2", height: "14", rx: "1", fill: "#6366f1" }),
+                    /* @__PURE__ */ jsx4("rect", { x: "10.5", y: "6", width: "2", height: "6", rx: "1", fill: "#6366f1", opacity: "0.7" }),
+                    /* @__PURE__ */ jsx4("rect", { x: "14.5", y: "4", width: "2", height: "10", rx: "1", fill: "#6366f1", opacity: "0.85" })
+                  ] }),
+                  "Variant Switcher"
+                ] }),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    "aria-label": "Close toolbar",
+                    onClick: () => setIsOpen(false),
+                    style: {
+                      border: "none",
+                      background: "none",
+                      cursor: "pointer",
+                      fontSize: "16px",
+                      color: "#737373",
+                      padding: "2px 4px",
+                      lineHeight: 1
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                color: "#a3a3a3",
+                marginBottom: "12px"
+              },
+              children: "Alt+H to toggle \u2022 Ctrl+Shift+V to open"
+            }
+          ),
+          scopeEntries.length === 0 ? /* @__PURE__ */ jsx4("div", { style: { color: "#a3a3a3", fontSize: "12px" }, children: "No variant scopes registered yet." }) : /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: scopeEntries.map(([scopeName, state]) => /* @__PURE__ */ jsx4(
+            ScopeControl,
+            {
+              name: scopeName,
+              state,
+              onSelect: (variant) => ctx.setActiveVariant(scopeName, variant)
+            },
+            scopeName
+          )) }),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                marginTop: "16px",
+                paddingTop: "12px",
+                borderTop: "1px solid #f0f0f0"
+              },
+              children: /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: ctx.toggleUiVisible,
+                  style: {
+                    width: "100%",
+                    padding: "7px 12px",
+                    border: "1px solid #e5e5e5",
+                    borderRadius: "6px",
+                    background: "none",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    color: "#737373",
+                    textAlign: "center"
+                  },
+                  children: ctx.uiVisible ? "Hide switchers (Alt+H)" : "Show switchers (Alt+H)"
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ScopeControl({ name, state, onSelect }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          color: "#404040",
+          marginBottom: "6px",
+          fontSize: "12px"
+        },
+        children: name
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: state.variantNames.map((key) => {
+      const isActive = key === state.activeVariant;
+      return /* @__PURE__ */ jsx4(
+        "button",
+        {
+          role: "radio",
+          "aria-checked": isActive,
+          "aria-label": `Switch ${name} to ${key}`,
+          onClick: () => onSelect(key),
+          style: {
+            cursor: "pointer",
+            border: isActive ? "2px solid #171717" : "1px solid #e5e5e5",
+            borderRadius: "5px",
+            padding: "3px 10px",
+            fontSize: "11px",
+            fontWeight: isActive ? 600 : 400,
+            background: isActive ? "#171717" : "#fafafa",
+            color: isActive ? "#fff" : "#404040",
+            transition: "all 0.12s"
+          },
+          children: key
+        },
+        key
+      );
+    }) })
+  ] });
+}
+export {
+  PageVariantSwitcher,
+  VariantContext,
+  VariantDevToolbar,
+  VariantProvider,
+  VariantSwitcher,
+  clearVariantRegistry,
+  getRegisteredVariant,
+  readUiVisibleFromStorage,
+  readVariantFromStorage,
+  readVariantFromUrl,
+  registerVariant,
+  removeVariantFromStorage,
+  removeVariantFromUrl,
+  resolveActiveVariant,
+  useActiveVariant,
+  useKeyboardShortcuts,
+  useVariant,
+  useVariantContext,
+  writeUiVisibleToStorage,
+  writeVariantToStorage,
+  writeVariantToUrl
+};