carboncanvas 0.1.0

package/lib-CSrTsI4Y.js

@@ -0,0 +1,2231 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect, lazy, useMemo, Suspense, useRef } from "react";
+import { createPortal } from "react-dom";
+let portalRoot = null;
+function setPortalRoot(el) {
+  portalRoot = el;
+}
+__name(setPortalRoot, "setPortalRoot");
+function getPortalRoot() {
+  return portalRoot && portalRoot.isConnected ? portalRoot : document.body;
+}
+__name(getPortalRoot, "getPortalRoot");
+function resolveCanvasId(explicitId) {
+  return explicitId;
+}
+__name(resolveCanvasId, "resolveCanvasId");
+function isDevHost(host, unstableHostPatterns) {
+  if (!host || host === "localhost" || host === "127.0.0.1" || host === "::1") return true;
+  if (unstableHostPatterns.some((re) => re.test(host))) return true;
+  return false;
+}
+__name(isDevHost, "isDevHost");
+function isLiveCommentsHost(unstableHostPatterns = []) {
+  const host = typeof window !== "undefined" ? window.location.hostname : "";
+  return !isDevHost(host, unstableHostPatterns);
+}
+__name(isLiveCommentsHost, "isLiveCommentsHost");
+const FONT$1 = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const cardStyle = {
+  width: 300,
+  background: "#fff",
+  border: "1px solid #e4e4e7",
+  borderRadius: 12,
+  boxShadow: "0 8px 28px rgba(0,0,0,0.18)",
+  fontFamily: FONT$1,
+  fontSize: 13,
+  color: "#1f1f23",
+  overflow: "hidden"
+};
+const textareaStyle = {
+  width: "100%",
+  minHeight: 56,
+  resize: "vertical",
+  border: "1px solid #e4e4e7",
+  borderRadius: 8,
+  padding: "8px 10px",
+  font: "inherit",
+  outline: "none",
+  boxSizing: "border-box"
+};
+const primaryBtn = {
+  font: "inherit",
+  fontWeight: 600,
+  border: "none",
+  borderRadius: 8,
+  padding: "7px 14px",
+  background: "linear-gradient(135deg,#cbd2de 0%,#868fa0 100%)",
+  color: "#16181b",
+  cursor: "pointer"
+};
+const ghostBtn = {
+  font: "inherit",
+  fontWeight: 600,
+  border: "1px solid #e4e4e7",
+  borderRadius: 8,
+  padding: "7px 12px",
+  background: "transparent",
+  color: "#3c3c43",
+  cursor: "pointer"
+};
+const linkBtn = {
+  font: "inherit",
+  fontWeight: 600,
+  border: "none",
+  background: "transparent",
+  color: "#9aa6bb",
+  cursor: "pointer",
+  padding: 0
+};
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+__name(initials, "initials");
+const AVATAR_BG = ["#2D7FFF", "#7A3FF2", "#1C8B4B", "#C8841C", "#C8203A", "#0E8C8C"];
+function Avatar({ user, size = 24 }) {
+  const name = (user == null ? void 0 : user.displayName) || (user == null ? void 0 : user.username) || "?";
+  const hash = [...name].reduce((a, c) => a + c.charCodeAt(0), 0);
+  const bg = AVATAR_BG[hash % AVATAR_BG.length];
+  if (user == null ? void 0 : user.avatarUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: user.avatarUrl,
+        alt: name,
+        width: size,
+        height: size,
+        style: { width: size, height: size, borderRadius: "50%", objectFit: "cover", flex: "0 0 auto", alignSelf: "flex-start" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: bg,
+        color: "#fff",
+        fontSize: size * 0.42,
+        fontWeight: 700,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: "0 0 auto",
+        fontFamily: FONT$1
+      },
+      children: initials(name)
+    }
+  );
+}
+__name(Avatar, "Avatar");
+function relativeTime(iso) {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const s = Math.max(0, Math.round((Date.now() - then) / 1e3));
+  if (s < 45) return "now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h`;
+  const d = Math.round(h / 24);
+  if (d < 7) return `${d}d`;
+  return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+__name(relativeTime, "relativeTime");
+const DARK = "#18191b";
+const PANEL_W = 340;
+const PANEL_GAP = 16;
+function simpleCopy(state) {
+  switch (state) {
+    case "inactive":
+      return {
+        title: "Comments are paused",
+        body: "This canvas’s plan no longer includes comments — they’re read-only until the subscription is renewed. Reviewers’ existing threads are safe.",
+        cta: "Renew to re-enable"
+      };
+    case "unauthorized":
+    default:
+      return {
+        title: "Sign in to comment",
+        body: "Your session has expired or the access key is invalid. Sign in again to comment on this canvas.",
+        cta: "Manage access"
+      };
+  }
+}
+__name(simpleCopy, "simpleCopy");
+function agentPrompt(serviceUrl) {
+  const base = "Enable Carbon Canvas comments on this project. My canvas ID is <paste-your-canvas-ID-here>.";
+  if (serviceUrl) {
+    return `${base} Backend: ${serviceUrl}. Follow the instructions at ${serviceUrl}/skill.md to wire it up.`;
+  }
+  return `${base} Follow the Carbon Canvas skill (served at <your-backend>/skill.md) to wire it up.`;
+}
+__name(agentPrompt, "agentPrompt");
+function CommentsUpsell({
+  state,
+  enableUrl,
+  serviceUrl,
+  onClose
+}) {
+  const href = enableUrl || "#";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cl-ui": true,
+      "data-cl-upsell": true,
+      style: {
+        position: "fixed",
+        top: 16,
+        right: PANEL_GAP,
+        width: PANEL_W,
+        zIndex: 2e3,
+        background: DARK,
+        borderRadius: 10,
+        boxShadow: "0 16px 48px rgba(0,0,0,0.4)",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: FONT$1,
+        color: "#f5f1e8",
+        overflow: "hidden"
+      },
+      onPointerDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onPointerDown"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px 14px",
+              borderBottom: "1px solid rgba(255,255,255,0.08)",
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 600, color: "#fff", letterSpacing: -0.2 }, children: "Comments" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close comments",
+                  onClick: onClose,
+                  style: {
+                    marginLeft: "auto",
+                    border: "none",
+                    background: "transparent",
+                    color: "rgba(245,241,232,0.7)",
+                    cursor: "pointer",
+                    fontSize: 18,
+                    lineHeight: 1,
+                    padding: 0
+                  },
+                  children: "×"
+                }
+              )
+            ]
+          }
+        ),
+        state === "locked" ? /* @__PURE__ */ jsx(LockedSteps, { href, serviceUrl }) : /* @__PURE__ */ jsx(SimpleUpsell, { state, href })
+      ]
+    }
+  );
+}
+__name(CommentsUpsell, "CommentsUpsell");
+function LockedSteps({ href, serviceUrl }) {
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 18px", display: "flex", flexDirection: "column", gap: 14 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 600, color: "#fff" }, children: "Enable comments for your team" }),
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 12.5, lineHeight: 1.5, color: "rgba(245,241,232,0.6)", marginTop: 6 }, children: "Comments live on your deployed prototype so your whole team can review in place. Two quick steps:" })
+    ] }),
+    /* @__PURE__ */ jsxs(Step, { n: 1, title: "Create a canvas", children: [
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: 12.5, lineHeight: 1.5, color: "rgba(245,241,232,0.6)" }, children: [
+        "Sign in and create a canvas — you’ll get a canvas ID like ",
+        /* @__PURE__ */ jsx("code", { style: codeInline, children: "cnv_…" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { ...ctaStyle, alignSelf: "flex-start", marginTop: 8 },
+          onClick: /* @__PURE__ */ __name((e) => {
+            if (href === "#") e.preventDefault();
+          }, "onClick"),
+          children: "Sign in & create a canvas →"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Step, { n: 2, title: "Give the ID to your coding agent", children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 12.5, lineHeight: 1.5, color: "rgba(245,241,232,0.6)" }, children: "Paste this into Cursor, Claude Code, or whatever agent built this — with your ID dropped in:" }),
+      /* @__PURE__ */ jsx(CopyPrompt, { text: agentPrompt(serviceUrl) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, lineHeight: 1.5, color: "rgba(245,241,232,0.4)", borderTop: "1px solid rgba(255,255,255,0.06)", paddingTop: 12 }, children: "Your agent follows the Carbon Canvas skill to wire it in and redeploy — then the Comments tab turns on for everyone who opens the prototype. The canvas and inspector stay free either way." })
+  ] });
+}
+__name(LockedSteps, "LockedSteps");
+function Step({ n, title, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: "0 0 auto",
+          width: 22,
+          height: 22,
+          borderRadius: 11,
+          background: "rgba(154,166,187,0.15)",
+          color: "#7aa8ff",
+          fontSize: 12,
+          fontWeight: 700,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: 1
+        },
+        children: n
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 13.5, fontWeight: 600, color: "#fff" }, children: title }),
+      children
+    ] })
+  ] });
+}
+__name(Step, "Step");
+function CopyPrompt({ text }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          fontSize: 11.5,
+          lineHeight: 1.5,
+          color: "rgba(245,241,232,0.85)",
+          background: "rgba(0,0,0,0.35)",
+          border: "1px solid rgba(255,255,255,0.08)",
+          borderRadius: 8,
+          padding: "10px 12px 34px",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word"
+        },
+        children: text
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: /* @__PURE__ */ __name(() => {
+          var _a;
+          void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(
+            () => {
+              setCopied(true);
+              window.setTimeout(() => setCopied(false), 1600);
+            },
+            () => {
+            }
+          ));
+        }, "onClick"),
+        style: {
+          position: "absolute",
+          right: 8,
+          bottom: 8,
+          border: "1px solid rgba(255,255,255,0.14)",
+          background: copied ? "rgba(154,166,187,0.25)" : "rgba(255,255,255,0.06)",
+          color: copied ? "#7aa8ff" : "rgba(245,241,232,0.8)",
+          borderRadius: 6,
+          padding: "3px 9px",
+          fontSize: 11,
+          fontWeight: 600,
+          fontFamily: FONT$1,
+          cursor: "pointer"
+        },
+        children: copied ? "Copied ✓" : "Copy"
+      }
+    )
+  ] });
+}
+__name(CopyPrompt, "CopyPrompt");
+function SimpleUpsell({ state, href }) {
+  const { title, body, cta } = simpleCopy(state);
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "18px 16px", display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 600, color: "#fff" }, children: title }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 13, lineHeight: 1.5, color: "rgba(245,241,232,0.72)" }, children: body }),
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { ...ctaStyle, alignSelf: "flex-start" },
+        onClick: /* @__PURE__ */ __name((e) => {
+          if (href === "#") e.preventDefault();
+        }, "onClick"),
+        children: cta
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "rgba(245,241,232,0.4)" }, children: "The canvas and inspector stay free — this only turns on team comments." })
+  ] });
+}
+__name(SimpleUpsell, "SimpleUpsell");
+const ctaStyle = {
+  display: "inline-block",
+  padding: "9px 14px",
+  borderRadius: 8,
+  background: "linear-gradient(135deg,#cbd2de 0%,#868fa0 100%)",
+  color: "#16181b",
+  fontSize: 13,
+  fontWeight: 600,
+  textDecoration: "none",
+  textAlign: "center"
+};
+const codeInline = {
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  fontSize: 11.5,
+  background: "rgba(255,255,255,0.08)",
+  borderRadius: 4,
+  padding: "1px 5px"
+};
+const LOCKED_FEATURES = {};
+function trimTrailingSlashes(s) {
+  return s.replace(/\/+$/, "");
+}
+__name(trimTrailingSlashes, "trimTrailingSlashes");
+function readStoredToken(backend) {
+  try {
+    const origin = backend ? new URL(backend).origin : window.location.origin;
+    return window.localStorage.getItem(`quilt-comments-token:${origin}`);
+  } catch {
+    return null;
+  }
+}
+__name(readStoredToken, "readStoredToken");
+function useEntitlement(opts = {}) {
+  var _a, _b, _c, _d;
+  const { backend = "", canvasId, enabled = true } = opts;
+  const explicitToken = opts.token;
+  const [view, setView] = useState(null);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState(null);
+  const [nonce, setNonce] = useState(0);
+  const refresh = useCallback(() => setNonce((n) => n + 1), []);
+  useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      setView(null);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+    const base = trimTrailingSlashes(backend);
+    const token = explicitToken != null ? explicitToken : readStoredToken(base);
+    const qs = canvasId ? `?canvasId=${encodeURIComponent(canvasId)}` : "";
+    const headers = {};
+    if (token) headers.Authorization = `Bearer ${token}`;
+    fetch(`${base}/api/entitlements${qs}`, {
+      headers,
+      signal: controller.signal
+      // No credentials — bearer token only (matches networkClient.ts + open CORS).
+    }).then(async (res) => {
+      var _a2;
+      if (cancelled) return;
+      if (!res.ok) {
+        const data2 = await res.json().catch(() => ({}));
+        setView(null);
+        setError((_a2 = data2.error) != null ? _a2 : `http_${res.status}`);
+        return;
+      }
+      const data = await res.json();
+      setView(data);
+    }).catch((err) => {
+      if (cancelled || (err == null ? void 0 : err.name) === "AbortError") return;
+      setView(null);
+      setError("network_error");
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [backend, canvasId, explicitToken, enabled, nonce]);
+  const features = (_a = view == null ? void 0 : view.features) != null ? _a : LOCKED_FEATURES;
+  const can = useCallback(
+    (capability) => features[capability] === true,
+    [features]
+  );
+  return {
+    features,
+    tier: (_b = view == null ? void 0 : view.tier) != null ? _b : null,
+    status: (_c = view == null ? void 0 : view.status) != null ? _c : null,
+    canvasLimit: (_d = view == null ? void 0 : view.canvasLimit) != null ? _d : null,
+    loading,
+    error,
+    can,
+    refresh
+  };
+}
+__name(useEntitlement, "useEntitlement");
+function deriveLockState(i) {
+  if (i.writeBlocked) return "inactive";
+  if (!i.configured) return "locked";
+  if (i.loading) return "loading";
+  if (i.comments) return "active";
+  if (i.error === "payment_required" || i.status === "past_due" || i.status === "canceled") {
+    return "inactive";
+  }
+  if (i.error === "unauthorized" || i.error === "http_401") return "unauthorized";
+  return "locked";
+}
+__name(deriveLockState, "deriveLockState");
+function shouldMountRuntime(state) {
+  return state === "active" || state === "unauthorized";
+}
+__name(shouldMountRuntime, "shouldMountRuntime");
+function shouldShowUpsell(state) {
+  return state === "locked" || state === "inactive";
+}
+__name(shouldShowUpsell, "shouldShowUpsell");
+const CommentsRuntime = lazy(() => import("./CommentsRuntime-CRhC_WJU.js"));
+function CommentLayer({
+  config,
+  mode,
+  setMode,
+  activePageId = null,
+  pages,
+  onSwitchPage,
+  onUnreadChange
+}) {
+  const configured = !!config.devMode || !!config.serviceUrl;
+  const effectiveCanvasId = useMemo(() => resolveCanvasId(config.canvasId), [config.canvasId]);
+  const ent = useEntitlement({
+    backend: config.serviceUrl,
+    canvasId: effectiveCanvasId,
+    enabled: !config.devMode && configured
+  });
+  const [writeBlocked, setWriteBlocked] = useState(false);
+  useEffect(() => {
+    if (ent.can("comments")) setWriteBlocked(false);
+  }, [ent]);
+  const lockState = config.devMode ? "active" : deriveLockState({
+    loading: ent.loading,
+    error: ent.error,
+    comments: ent.can("comments"),
+    status: ent.status,
+    configured,
+    writeBlocked
+  });
+  const mountRuntime = config.devMode || shouldMountRuntime(lockState);
+  const showUpsell = !config.devMode && shouldShowUpsell(lockState);
+  useEffect(() => {
+    if (!mountRuntime) onUnreadChange == null ? void 0 : onUnreadChange(0);
+  }, [mountRuntime, onUnreadChange]);
+  if (mountRuntime) {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      CommentsRuntime,
+      {
+        config,
+        mode,
+        setMode,
+        activePageId,
+        pages,
+        onSwitchPage,
+        onUnreadChange,
+        onPaymentRequired: /* @__PURE__ */ __name(() => setWriteBlocked(true), "onPaymentRequired"),
+        onAuthChanged: ent.refresh
+      }
+    ) });
+  }
+  if (showUpsell && mode === "comment") {
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        CommentsUpsell,
+        {
+          state: lockState,
+          enableUrl: config.enableUrl,
+          serviceUrl: config.serviceUrl,
+          onClose: /* @__PURE__ */ __name(() => setMode("cursor"), "onClose")
+        }
+      ),
+      getPortalRoot()
+    );
+  }
+  return null;
+}
+__name(CommentLayer, "CommentLayer");
+const FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+const ACCENT = "linear-gradient(135deg,#cbd2de 0%,#868fa0 100%)";
+function Seg({
+  active,
+  disabled,
+  title,
+  onClick,
+  icon,
+  label,
+  badge
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick,
+      title,
+      "aria-pressed": active,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 7,
+        border: "none",
+        borderRadius: 8,
+        padding: "7px 11px",
+        font: `600 12.5px ${FONT}`,
+        cursor: disabled ? "default" : "pointer",
+        color: active ? "#16181b" : disabled ? "rgba(245,241,232,0.4)" : "rgba(245,241,232,0.82)",
+        background: active ? ACCENT : "transparent",
+        opacity: disabled ? 0.7 : 1,
+        transition: "background 120ms ease, color 120ms ease",
+        whiteSpace: "nowrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexShrink: 0, position: "relative" }, children: [
+          icon,
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: -3,
+                right: -4,
+                width: 7,
+                height: 7,
+                borderRadius: "50%",
+                background: "#9aa6bb",
+                boxShadow: "0 0 0 1.5px #18191b"
+              }
+            }
+          )
+        ] }),
+        label
+      ]
+    }
+  );
+}
+__name(Seg, "Seg");
+const Divider = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      width: 1,
+      alignSelf: "stretch",
+      margin: "5px 3px",
+      background: "rgba(255,255,255,0.1)",
+      flexShrink: 0
+    }
+  }
+), "Divider");
+const ICON = {
+  page: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "1.5", width: "10", height: "11", rx: "1.6", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 4.5h5M4.5 7h5M4.5 9.5h3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
+  ] }),
+  cursor: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.5 1.8l8.3 4-3.4 1.1-1.1 3.4-3.8-8.5z",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "0.6",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  comment: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2 3.2A1.2 1.2 0 0 1 3.2 2h7.6A1.2 1.2 0 0 1 12 3.2v5A1.2 1.2 0 0 1 10.8 9.4H6l-2.8 2.3V9.4H3.2A1.2 1.2 0 0 1 2 8.2v-5z",
+      stroke: "currentColor",
+      strokeWidth: "1.3",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  dev: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 1v3M6 8v3M1 6h3M8 6h3M6 6l5 5",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round"
+    }
+  ) })
+};
+const ZOOM_PRESETS = [1, 0.5, 0.25];
+function ZoomControl() {
+  const [open, setOpen] = useState(false);
+  const [pct, setPct] = useState(100);
+  const ref = useRef(null);
+  const apiRef = useRef(null);
+  useEffect(() => {
+    let unsub = null;
+    let tries = 0;
+    let raf = 0;
+    const attach = /* @__PURE__ */ __name(() => {
+      var _a;
+      const vp = document.querySelector("[data-dc-viewport]");
+      const api = (_a = vp == null ? void 0 : vp.__dcViewport) != null ? _a : null;
+      if (api) {
+        apiRef.current = api;
+        unsub = api.subscribe((t) => setPct(Math.round(t.scale * 100)));
+        return;
+      }
+      if (tries++ < 60) raf = requestAnimationFrame(attach);
+    }, "attach");
+    attach();
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      if (unsub) unsub();
+    };
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = /* @__PURE__ */ __name((e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }, "onDown");
+    const onKey = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") setOpen(false);
+    }, "onKey");
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const zoomTo = /* @__PURE__ */ __name((scale) => {
+    const api = apiRef.current;
+    const vp = document.querySelector("[data-dc-viewport]");
+    if (!api || !vp) return;
+    const r = vp.getBoundingClientRect();
+    const cx = r.width / 2;
+    const cy = r.height / 2;
+    const t = api.getTransform();
+    const k = scale / t.scale;
+    api.animateTransform({ x: cx - (cx - t.x) * k, y: cy - (cy - t.y) * k, scale }, 200);
+    setOpen(false);
+  }, "zoomTo");
+  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "flex" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: /* @__PURE__ */ __name(() => setOpen((o) => !o), "onClick"),
+        title: "Zoom",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          border: "none",
+          borderRadius: 8,
+          padding: "7px 9px 7px 11px",
+          font: `600 12.5px ${FONT}`,
+          cursor: "pointer",
+          color: "rgba(245,241,232,0.82)",
+          background: open ? "rgba(255,255,255,0.08)" : "transparent",
+          transition: "background 120ms ease, color 120ms ease",
+          whiteSpace: "nowrap",
+          fontVariantNumeric: "tabular-nums",
+          minWidth: 56,
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            pct,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "9",
+              height: "9",
+              viewBox: "0 0 11 11",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.8",
+              strokeLinecap: "round",
+              style: { opacity: 0.6 },
+              children: /* @__PURE__ */ jsx("path", { d: open ? "M2 7l3.5-3.5L9 7" : "M2 4l3.5 3.5L9 4" })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "100%",
+          left: 0,
+          marginBottom: 8,
+          background: "#202123",
+          borderRadius: 10,
+          boxShadow: "0 10px 32px rgba(0,0,0,0.4)",
+          padding: 4,
+          minWidth: 120,
+          zIndex: 10
+        },
+        children: ZOOM_PRESETS.map((z) => {
+          const zp = Math.round(z * 100);
+          const isActive = zp === pct;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: /* @__PURE__ */ __name(() => zoomTo(z), "onClick"),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                textAlign: "left",
+                border: "none",
+                cursor: "pointer",
+                background: isActive ? "rgba(255,255,255,0.1)" : "transparent",
+                color: "#fff",
+                padding: "8px 10px",
+                borderRadius: 6,
+                font: `${isActive ? 600 : 400} 13px ${FONT}`,
+                fontVariantNumeric: "tabular-nums"
+              },
+              onMouseEnter: /* @__PURE__ */ __name((e) => {
+                if (!isActive) e.currentTarget.style.background = "rgba(255,255,255,0.05)";
+              }, "onMouseEnter"),
+              onMouseLeave: /* @__PURE__ */ __name((e) => {
+                if (!isActive) e.currentTarget.style.background = "transparent";
+              }, "onMouseLeave"),
+              children: [
+                zp,
+                "%"
+              ]
+            },
+            z
+          );
+        })
+      }
+    )
+  ] });
+}
+__name(ZoomControl, "ZoomControl");
+function PageSwitcher({
+  pages,
+  activePageId,
+  setActivePage,
+  fallbackName
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const multi = !!(pages && pages.length > 1);
+  const active = pages == null ? void 0 : pages.find((p) => p.id === activePageId);
+  const label = active ? active.title : fallbackName;
+  useEffect(() => {
+    if (!open) return;
+    const onDown = /* @__PURE__ */ __name((e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }, "onDown");
+    const onKey = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") setOpen(false);
+    }, "onKey");
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "flex" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: !multi,
+        onClick: /* @__PURE__ */ __name(() => multi && setOpen((o) => !o), "onClick"),
+        title: multi ? "Switch page" : `Page · ${label}`,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 7,
+          border: "none",
+          borderRadius: 8,
+          padding: "7px 11px",
+          font: `600 12.5px ${FONT}`,
+          cursor: multi ? "pointer" : "default",
+          color: multi ? "rgba(245,241,232,0.82)" : "rgba(245,241,232,0.5)",
+          background: open ? "rgba(255,255,255,0.08)" : "transparent",
+          transition: "background 120ms ease, color 120ms ease",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { display: "flex", flexShrink: 0 }, children: ICON.page }),
+          label,
+          multi && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "9",
+              height: "9",
+              viewBox: "0 0 11 11",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.8",
+              strokeLinecap: "round",
+              style: { opacity: 0.6, marginLeft: -1 },
+              children: /* @__PURE__ */ jsx("path", { d: open ? "M2 7l3.5-3.5L9 7" : "M2 4l3.5 3.5L9 4" })
+            }
+          )
+        ]
+      }
+    ),
+    open && multi && pages && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "100%",
+          left: 0,
+          marginBottom: 8,
+          background: "#202123",
+          borderRadius: 10,
+          boxShadow: "0 10px 32px rgba(0,0,0,0.4)",
+          padding: 4,
+          minWidth: 180,
+          zIndex: 10
+        },
+        children: pages.map((p) => {
+          const isActive = p.id === activePageId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: /* @__PURE__ */ __name(() => {
+                setActivePage == null ? void 0 : setActivePage(p.id);
+                setOpen(false);
+              }, "onClick"),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                textAlign: "left",
+                border: "none",
+                cursor: "pointer",
+                background: isActive ? "rgba(255,255,255,0.1)" : "transparent",
+                color: "#fff",
+                padding: "8px 10px",
+                borderRadius: 6,
+                font: `${isActive ? 600 : 400} 13px ${FONT}`
+              },
+              onMouseEnter: /* @__PURE__ */ __name((e) => {
+                if (!isActive) e.currentTarget.style.background = "rgba(255,255,255,0.05)";
+              }, "onMouseEnter"),
+              onMouseLeave: /* @__PURE__ */ __name((e) => {
+                if (!isActive) e.currentTarget.style.background = "transparent";
+              }, "onMouseLeave"),
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { display: "flex", flexShrink: 0, opacity: isActive ? 1 : 0.6 }, children: ICON.page }),
+                p.title
+              ]
+            },
+            p.id
+          );
+        })
+      }
+    )
+  ] });
+}
+__name(PageSwitcher, "PageSwitcher");
+function ModeBar({
+  mode,
+  setMode,
+  hasComments,
+  hasInspector,
+  commentUnread = 0,
+  canvasLabel,
+  pages,
+  activePageId,
+  setActivePage
+}) {
+  const pageName = canvasLabel ? canvasLabel.split(":").pop() || "Canvas" : "Canvas";
+  const shell = {
+    position: "fixed",
+    left: 16,
+    bottom: 16,
+    zIndex: 2001,
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    padding: 4,
+    background: "#18191b",
+    borderRadius: 12,
+    border: "1px solid rgba(255,255,255,0.12)",
+    boxShadow: "0 6px 22px rgba(0,0,0,0.32)",
+    fontFamily: FONT
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-dc-modebar": true, style: shell, onPointerDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onPointerDown"), children: [
+    /* @__PURE__ */ jsx(ZoomControl, {}),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      PageSwitcher,
+      {
+        pages,
+        activePageId,
+        setActivePage,
+        fallbackName: pageName
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Seg,
+      {
+        title: "Cursor — interact with the prototypes, pan & zoom",
+        active: mode === "cursor",
+        onClick: /* @__PURE__ */ __name(() => setMode("cursor"), "onClick"),
+        icon: ICON.cursor,
+        label: "Cursor"
+      }
+    ),
+    hasComments && /* @__PURE__ */ jsx(
+      Seg,
+      {
+        title: "Comment — drop pins and open the comments sidebar",
+        active: mode === "comment",
+        onClick: /* @__PURE__ */ __name(() => setMode("comment"), "onClick"),
+        icon: ICON.comment,
+        label: "Comment",
+        badge: commentUnread > 0 && mode !== "comment"
+      }
+    ),
+    hasInspector && /* @__PURE__ */ jsx(
+      Seg,
+      {
+        title: "Dev — inspect components, tokens & accessibility",
+        active: mode === "dev",
+        onClick: /* @__PURE__ */ __name(() => setMode("dev"), "onClick"),
+        icon: ICON.dev,
+        label: "Dev"
+      }
+    )
+  ] });
+}
+__name(ModeBar, "ModeBar");
+function getComponentName(type) {
+  if (!type) return null;
+  if (typeof type === "string") return null;
+  if (typeof type === "function") return type.displayName || type.name || null;
+  if (type.$$typeof && type.render) {
+    return type.displayName || type.render.displayName || type.render.name || null;
+  }
+  if (type.$$typeof && type.type) {
+    return type.displayName || getComponentName(type.type);
+  }
+  return null;
+}
+__name(getComponentName, "getComponentName");
+const genericAdapter = {
+  libraryLabel: "Library",
+  libraryShortLabel: "Lib",
+  // No design system connected → nothing is ever a library instance.
+  isLibraryComponent(_type) {
+    return false;
+  },
+  componentName(type) {
+    return getComponentName(type);
+  },
+  classify(type) {
+    return { kind: "user", name: getComponentName(type) };
+  },
+  // No icon library to match against.
+  findIconName(_fiber) {
+    return null;
+  },
+  iconWrapperSize(_fiber) {
+    return null;
+  },
+  iconImportSnippet(name) {
+    return `import { ${name} } from 'icons';`;
+  },
+  iconLabel: "Icon",
+  tokens: {
+    // Empty prefix → builders harvest no CSS vars → inspector shows raw values.
+    color: { cssVarPrefix: "" },
+    shadow: { cssVarPrefix: "" },
+    spacing: { cssVarPrefix: "" },
+    radius: { cssVarPrefix: "" },
+    typography: {
+      // No utility-class convention known → never matches a typography token.
+      classMatcher: /* @__PURE__ */ __name(() => [], "classMatcher")
+    },
+    // No utility-class convention known. Empty prefixes are guarded by the core
+    // so they don't match every class.
+    utilityClassPrefixes: {
+      typography: "",
+      text: "",
+      bg: "",
+      border: ""
+    }
+  }
+};
+let activeAdapter = genericAdapter;
+const adapterChangeListeners = [];
+function onDesignSystemAdapterChange(fn) {
+  adapterChangeListeners.push(fn);
+}
+__name(onDesignSystemAdapterChange, "onDesignSystemAdapterChange");
+function setDesignSystemAdapter(adapter) {
+  if (adapter === activeAdapter) return;
+  activeAdapter = adapter;
+  for (const fn of adapterChangeListeners) fn(adapter);
+}
+__name(setDesignSystemAdapter, "setDesignSystemAdapter");
+function getDesignSystemAdapter() {
+  return activeAdapter;
+}
+__name(getDesignSystemAdapter, "getDesignSystemAdapter");
+function adapterHasTokens(adapter = activeAdapter) {
+  const t = adapter.tokens;
+  return Boolean(
+    t.color.cssVarPrefix || t.shadow.cssVarPrefix || t.spacing.cssVarPrefix || t.radius.cssVarPrefix
+  );
+}
+__name(adapterHasTokens, "adapterHasTokens");
+const Inspector = React.lazy(() => import("./Inspector-D9W1Ie5_.js"));
+const DC = {
+  bg: "#18191b",
+  grid: "rgba(255,255,255,0.55)",
+  label: "rgba(233,234,237,0.6)",
+  title: "rgba(240,241,244,0.92)",
+  subtitle: "rgba(233,234,237,0.5)",
+  postitBg: "#fef4a8",
+  postitText: "#5a4a2a",
+  font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif'
+};
+function ensureDcStyles() {
+  if (typeof document === "undefined" || document.getElementById("dc-styles")) return;
+  const s = document.createElement("style");
+  s.id = "dc-styles";
+  s.textContent = [
+    ".dc-editable{cursor:text;outline:none;white-space:nowrap;border-radius:3px;padding:0 2px;margin:0 -2px}",
+    ".dc-editable:focus{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 0 1.5px #9aa6bb}",
+    // Keyboard-only focus ring for hierarchy-tree rows (roving tabindex); no ring
+    // on mouse focus so click-to-select stays visually unchanged.
+    "[data-dc-treeitem]:focus{outline:none}",
+    "[data-dc-treeitem]:focus-visible{outline:2px solid #9aa6bb;outline-offset:-2px}",
+    // An ENGAGED artboard (clicked into; owns wheel/scroll until you click out)
+    // gets a subtle accent ring so it is clear where scroll/zoom will land.
+    "[data-dc-slot][data-dc-engaged] .dc-card{box-shadow:0 0 0 1.5px var(--quilt-accent,#9aa6bb),0 6px 24px rgba(154,166,187,.16)}",
+    ".dc-card{transition:box-shadow .15s,transform .15s}",
+    ".dc-card *{scrollbar-width:none}",
+    ".dc-card *::-webkit-scrollbar{display:none}",
+    ".dc-labelrow{display:flex;align-items:center;gap:4px;height:24px}",
+    ".dc-labeltext{cursor:pointer;border-radius:4px;padding:3px 6px;display:flex;align-items:center;transition:background .12s}",
+    ".dc-labeltext:hover{background:rgba(255,255,255,.08)}",
+    ".dc-labeltext.dc-selected{background:rgba(154,166,187,.12)}",
+    ".dc-share-pop{position:absolute;bottom:100%;left:-4px;margin-bottom:32px;z-index:5;display:flex;align-items:center;",
+    "  background:#202123;color:#f5f1e8;border-radius:7px;padding:5px 6px;gap:2px;",
+    "  box-shadow:0 6px 24px rgba(0,0,0,.28);white-space:nowrap}",
+    ".dc-share-pop button{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:inherit;",
+    '  cursor:pointer;font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;padding:5px 8px;border-radius:5px;transition:background .12s}',
+    ".dc-share-pop button:hover{background:rgba(255,255,255,.12)}",
+    ".dc-expand{position:absolute;bottom:100%;right:0;margin-bottom:5px;z-index:2;opacity:0;transition:opacity .12s,background .12s;",
+    "  width:22px;height:22px;border-radius:5px;border:none;cursor:pointer;padding:0;",
+    "  background:transparent;color:rgba(233,234,237,.55);display:flex;align-items:center;justify-content:center}",
+    ".dc-expand:hover{background:rgba(255,255,255,.08);color:#fff}",
+    "[data-dc-slot]:hover .dc-expand{opacity:1}"
+  ].join("\n");
+  document.head.appendChild(s);
+}
+__name(ensureDcStyles, "ensureDcStyles");
+const DCCtx = React.createContext(null);
+const DCViewportCtx = React.createContext(null);
+const DCArtboardActiveCtx = React.createContext(true);
+const useArtboardActive = /* @__PURE__ */ __name(() => React.useContext(DCArtboardActiveCtx), "useArtboardActive");
+function DesignCanvas({
+  children,
+  minScale,
+  maxScale,
+  minActiveScale,
+  style,
+  inspector = false,
+  comments = false,
+  adapter
+}) {
+  React.useState(() => {
+    ensureDcStyles();
+    if (adapter) setDesignSystemAdapter(adapter);
+    return null;
+  });
+  React.useEffect(() => {
+    if (adapter) setDesignSystemAdapter(adapter);
+  }, [adapter]);
+  const [state, setState] = React.useState({ sections: {}, focus: null, selected: null });
+  const [mode, setMode] = React.useState("cursor");
+  const [commentUnread, setCommentUnread] = React.useState(0);
+  const pages = [];
+  React.Children.forEach(children, (p) => {
+    var _a, _b;
+    if (!React.isValidElement(p) || p.type !== DCPage) return;
+    const pp = p.props;
+    const pid = (_a = pp.id) != null ? _a : pp.title;
+    if (!pid) return;
+    pages.push({ id: pid, title: (_b = pp.title) != null ? _b : pid, children: pp.children });
+  });
+  const paged = pages.length > 0;
+  const [activePageId, setActivePageId] = React.useState(() => {
+    if (!paged) return null;
+    const ids = pages.map((p) => p.id);
+    let fromUrl = null;
+    if (typeof window !== "undefined") {
+      fromUrl = new URLSearchParams(window.location.search).get("page");
+    }
+    return fromUrl && ids.includes(fromUrl) ? fromUrl : pages[0].id;
+  });
+  React.useEffect(() => {
+    if (paged && !pages.some((p) => p.id === activePageId)) {
+      setActivePageId(pages[0].id);
+    }
+  }, [paged, pages.map((p) => p.id).join("|"), activePageId]);
+  const switchPage = React.useCallback((id) => {
+    setActivePageId(id);
+    setState((s) => ({ ...s, focus: null }));
+    if (typeof window !== "undefined" && window.history) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("page", id);
+      window.history.replaceState(null, "", url);
+    }
+  }, []);
+  const activePage = paged ? pages.find((p) => p.id === activePageId) || pages[0] : null;
+  const activeChildren = activePage ? activePage.children : children;
+  const commentsConfig = comments && comments.canvasId ? comments : null;
+  const hasComments = !!commentsConfig;
+  const pageList = React.useMemo(
+    () => paged ? pages.map((p) => ({ id: p.id, title: p.title })) : void 0,
+    [paged, pages]
+  );
+  const registry = {};
+  const sectionMeta = {};
+  const sectionOrder = [];
+  React.Children.forEach(activeChildren, (sec) => {
+    var _a, _b;
+    if (!React.isValidElement(sec) || sec.type !== DCSection) return;
+    const sp = sec.props;
+    const sid = (_a = sp.id) != null ? _a : sp.title;
+    if (!sid) return;
+    sectionOrder.push(sid);
+    const persisted = state.sections[sid] || {};
+    const srcIds = [];
+    React.Children.forEach(sp.children, (ab) => {
+      var _a2;
+      if (!React.isValidElement(ab) || ab.type !== DCArtboard) return;
+      const abp = ab.props;
+      const aid = (_a2 = abp.id) != null ? _a2 : abp.label;
+      if (!aid) return;
+      registry[`${sid}/${aid}`] = { sectionId: sid, artboard: ab };
+      srcIds.push(aid);
+    });
+    const kept = (persisted.order || []).filter((k) => srcIds.includes(k));
+    sectionMeta[sid] = {
+      title: (_b = persisted.title) != null ? _b : sp.title,
+      subtitle: sp.subtitle,
+      slotIds: [...kept, ...srcIds.filter((k) => !kept.includes(k))]
+    };
+  });
+  const api = React.useMemo(() => ({
+    state,
+    section: /* @__PURE__ */ __name((id) => state.sections[id] || {}, "section"),
+    patchSection: /* @__PURE__ */ __name((id, p) => setState((s) => ({
+      ...s,
+      sections: { ...s.sections, [id]: { ...s.sections[id], ...typeof p === "function" ? p(s.sections[id] || {}) : p } }
+    })), "patchSection"),
+    setFocus: /* @__PURE__ */ __name((slotId) => setState((s) => ({ ...s, focus: slotId })), "setFocus"),
+    setSelected: /* @__PURE__ */ __name((slotId) => setState((s) => s.selected === slotId ? s : { ...s, selected: slotId }), "setSelected"),
+    activePageId
+  }), [state, activePageId]);
+  React.useEffect(() => {
+    const onKey = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") setState((s) => s.focus || s.selected ? { ...s, focus: null, selected: null } : s);
+    }, "onKey");
+    const onPd = /* @__PURE__ */ __name((e) => {
+      const ae = document.activeElement;
+      if (ae && ae.isContentEditable && !ae.contains(e.target)) ae.blur();
+      if (!(e.target instanceof Element) || !e.target.closest(".dc-labelrow, .dc-share-pop")) {
+        setState((s) => s.selected ? { ...s, selected: null } : s);
+      }
+    }, "onPd");
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPd, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPd, true);
+    };
+  }, []);
+  const artboardDeeplinkDone = React.useRef(false);
+  React.useEffect(() => {
+    if (artboardDeeplinkDone.current || typeof window === "undefined") return;
+    artboardDeeplinkDone.current = true;
+    const aid = new URLSearchParams(window.location.search).get("artboard");
+    if (!aid) return;
+    let tries = 0;
+    const tick = /* @__PURE__ */ __name(() => {
+      const el = document.querySelector(`[data-dc-slot="${CSS.escape(aid)}"]`);
+      if (el) {
+        panToSlot(el);
+        const sec = el.closest("[data-dc-section]");
+        if (sec) setState((s) => ({ ...s, selected: `${sec.getAttribute("data-dc-section")}/${aid}` }));
+        return;
+      }
+      if (tries++ < 40) requestAnimationFrame(tick);
+    }, "tick");
+    requestAnimationFrame(tick);
+  }, []);
+  const hasSections = React.Children.toArray(activeChildren).some(
+    (c) => React.isValidElement(c) && c.type === DCSection
+  );
+  return /* @__PURE__ */ jsxs(DCCtx.Provider, { value: api, children: [
+    /* @__PURE__ */ jsx(DCViewport, { minScale, maxScale, minActiveScale, style, mode, fitKey: paged ? activePageId : null, children: paged && !hasSections ? /* @__PURE__ */ jsx(DCEmptyPage, { title: activePage == null ? void 0 : activePage.title }) : activeChildren }),
+    state.focus && registry[state.focus] && /* @__PURE__ */ jsx(DCFocusOverlay, { entry: registry[state.focus], sectionMeta, sectionOrder }),
+    inspector && /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Inspector, { mode, setMode }) }),
+    commentsConfig && /* @__PURE__ */ jsx(
+      CommentLayer,
+      {
+        config: commentsConfig,
+        mode,
+        setMode,
+        activePageId: paged ? activePageId : null,
+        pages: pageList,
+        onSwitchPage: switchPage,
+        onUnreadChange: setCommentUnread
+      }
+    ),
+    (inspector || hasComments) && /* @__PURE__ */ jsx(
+      ModeBar,
+      {
+        mode,
+        setMode,
+        hasComments,
+        hasInspector: !!inspector,
+        commentUnread,
+        canvasLabel: commentsConfig ? commentsConfig.canvasId : void 0,
+        pages: paged ? pages.map((p) => ({ id: p.id, title: p.title })) : void 0,
+        activePageId,
+        setActivePage: switchPage
+      }
+    )
+  ] });
+}
+__name(DesignCanvas, "DesignCanvas");
+function DCPage(_props) {
+  return null;
+}
+__name(DCPage, "DCPage");
+function panToSlot(slotEl) {
+  const vpEl = document.querySelector("[data-dc-viewport]");
+  if (!vpEl) return;
+  const api = vpEl.__dcViewport;
+  if (!api) return;
+  const vpRect = vpEl.getBoundingClientRect();
+  const tf = api.getTransform();
+  const r = slotEl.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) return;
+  const worldW = r.width / tf.scale;
+  const worldH = r.height / tf.scale;
+  const worldCx = (r.left + r.width / 2 - vpRect.left - tf.x) / tf.scale;
+  const worldCy = (r.top + r.height / 2 - vpRect.top - tf.y) / tf.scale;
+  const scale = Math.min(2, Math.max(
+    0.15,
+    Math.min((vpRect.width - 160) / worldW, (vpRect.height - 200) / worldH)
+  ));
+  api.animateTransform({
+    x: vpRect.width / 2 - worldCx * scale,
+    y: vpRect.height / 2 - worldCy * scale,
+    scale
+  }, 320);
+}
+__name(panToSlot, "panToSlot");
+function DCEmptyPage({ title }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    pointerEvents: "none",
+    fontFamily: DC.font,
+    color: DC.subtitle
+  }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "3", width: "16", height: "18", rx: "2", stroke: "currentColor", strokeWidth: "1.4" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 8h8M8 12h8M8 16h4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 18, fontWeight: 600, color: DC.title }, children: title }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 14 }, children: "Nothing here yet — add artboards in code." })
+  ] });
+}
+__name(DCEmptyPage, "DCEmptyPage");
+function DCViewport({
+  children,
+  minScale = 0.1,
+  maxScale = 8,
+  minActiveScale = 0.35,
+  style = {},
+  mode = "cursor",
+  fitKey = null
+}) {
+  const vpRef = React.useRef(null);
+  const worldRef = React.useRef(null);
+  const tf = React.useRef({ x: 0, y: 0, scale: 1 });
+  const subsRef = React.useRef(/* @__PURE__ */ new Set());
+  const engagedRef = React.useRef(null);
+  const apply = React.useCallback(() => {
+    const { x, y, scale } = tf.current;
+    const el = worldRef.current;
+    if (el) el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
+    subsRef.current.forEach((fn) => fn(tf.current));
+  }, []);
+  const setTransform = React.useCallback((next) => {
+    const t = tf.current;
+    t.x = next.x;
+    t.y = next.y;
+    t.scale = Math.min(maxScale, Math.max(minScale, next.scale));
+    apply();
+  }, [apply, minScale, maxScale]);
+  const tweenTokenRef = React.useRef(0);
+  const animateTransform = React.useCallback((next, ms = 240) => {
+    const start = { ...tf.current };
+    const target = {
+      x: next.x,
+      y: next.y,
+      scale: Math.min(maxScale, Math.max(minScale, next.scale))
+    };
+    const token = ++tweenTokenRef.current;
+    const t0 = performance.now();
+    const step = /* @__PURE__ */ __name((now) => {
+      if (token !== tweenTokenRef.current) return;
+      const u = Math.min(1, (now - t0) / ms);
+      const k = 1 - Math.pow(1 - u, 3);
+      tf.current.x = start.x + (target.x - start.x) * k;
+      tf.current.y = start.y + (target.y - start.y) * k;
+      tf.current.scale = start.scale + (target.scale - start.scale) * k;
+      apply();
+      if (u < 1) requestAnimationFrame(step);
+    }, "step");
+    requestAnimationFrame(step);
+  }, [apply, minScale, maxScale]);
+  const fitToContent = React.useCallback((ms = 260) => {
+    const vp = vpRef.current;
+    if (!vp) return;
+    const vpRect = vp.getBoundingClientRect();
+    if (!vpRect.width || !vpRect.height) return;
+    const t = tf.current;
+    const slots = Array.from(vp.querySelectorAll("[data-dc-slot]")).filter((el) => {
+      const parent = el.parentElement;
+      return !!(parent && parent.closest && parent.closest("[data-dc-viewport]") === vp);
+    });
+    if (!slots.length) return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const el of slots) {
+      const r = el.getBoundingClientRect();
+      const x = (r.left - vpRect.left - t.x) / t.scale;
+      const y = (r.top - vpRect.top - t.y) / t.scale;
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + r.width / t.scale);
+      maxY = Math.max(maxY, y + r.height / t.scale);
+    }
+    const bw = maxX - minX, bh = maxY - minY;
+    if (!(bw > 0) || !(bh > 0)) return;
+    const margin = 0.88;
+    const cap = Math.min(maxScale, 1);
+    const scale = Math.min(cap, Math.max(minScale, Math.min(vpRect.width / bw, vpRect.height / bh) * margin));
+    const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+    animateTransform({ x: vpRect.width / 2 - cx * scale, y: vpRect.height / 2 - cy * scale, scale }, ms);
+  }, [animateTransform, minScale, maxScale]);
+  const fitKeyRef = React.useRef(null);
+  React.useEffect(() => {
+    if (fitKey == null) return;
+    if (fitKeyRef.current === null) {
+      fitKeyRef.current = fitKey;
+      return;
+    }
+    if (fitKeyRef.current === fitKey) return;
+    fitKeyRef.current = fitKey;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => fitToContent());
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [fitKey, fitToContent]);
+  const viewportCtx = React.useMemo(() => ({
+    subscribe: /* @__PURE__ */ __name((fn) => {
+      subsRef.current.add(fn);
+      fn(tf.current);
+      return () => {
+        subsRef.current.delete(fn);
+      };
+    }, "subscribe"),
+    getTransform: /* @__PURE__ */ __name(() => tf.current, "getTransform"),
+    setTransform,
+    animateTransform,
+    minActiveScale
+  }), [minActiveScale, setTransform, animateTransform]);
+  React.useEffect(() => {
+    const vp = vpRef.current;
+    if (!vp) return;
+    vp.__dcViewport = viewportCtx;
+    return () => {
+      if (vp.__dcViewport === viewportCtx) delete vp.__dcViewport;
+    };
+  }, [viewportCtx]);
+  React.useEffect(() => {
+    const vp = vpRef.current;
+    if (!vp) return;
+    const zoomAt = /* @__PURE__ */ __name((cx, cy, factor) => {
+      const r = vp.getBoundingClientRect();
+      const px = cx - r.left, py = cy - r.top;
+      const t = tf.current;
+      const next = Math.min(maxScale, Math.max(minScale, t.scale * factor));
+      const k = next / t.scale;
+      t.x = px - (px - t.x) * k;
+      t.y = py - (py - t.y) * k;
+      t.scale = next;
+      apply();
+    }, "zoomAt");
+    const interacting = { drag: false, gesture: false };
+    let wheelTimer = null;
+    const syncInteractingAttr = /* @__PURE__ */ __name(() => {
+      const active = interacting.drag || interacting.gesture || wheelTimer !== null;
+      if (active) vp.setAttribute("data-dc-interacting", "true");
+      else vp.removeAttribute("data-dc-interacting");
+    }, "syncInteractingAttr");
+    const pulseWheelInteracting = /* @__PURE__ */ __name(() => {
+      if (wheelTimer) clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => {
+        wheelTimer = null;
+        syncInteractingAttr();
+      }, 150);
+      syncInteractingAttr();
+    }, "pulseWheelInteracting");
+    const isMouseWheel = /* @__PURE__ */ __name((e) => e.deltaMode !== 0 || e.deltaX === 0 && Number.isInteger(e.deltaY) && Math.abs(e.deltaY) >= 40, "isMouseWheel");
+    const canNativelyScroll = /* @__PURE__ */ __name((e) => {
+      if (e.ctrlKey || isMouseWheel(e)) return false;
+      const target = e.target;
+      if (!target || !target.closest) return false;
+      let el = target.closest("[data-dc-allow-scroll]");
+      while (el) {
+        const cs = getComputedStyle(el);
+        const overY = cs.overflowY;
+        const scrollableY = (overY === "auto" || overY === "scroll") && el.scrollHeight > el.clientHeight;
+        if (scrollableY) {
+          const dy = e.deltaY;
+          const atTop = el.scrollTop <= 0 && dy < 0;
+          const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1 && dy > 0;
+          if (!atTop && !atBottom) return true;
+        }
+        el = el.parentElement ? el.parentElement.closest("[data-dc-allow-scroll]") : null;
+      }
+      return false;
+    }, "canNativelyScroll");
+    const isScrollableInDir = /* @__PURE__ */ __name((el, e) => {
+      if (!el || el === vp || !el.getBoundingClientRect) return false;
+      const cs = getComputedStyle(el);
+      const dy = e.deltaY, dx = e.deltaX;
+      if (dy !== 0 && (cs.overflowY === "auto" || cs.overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+        const atTop = el.scrollTop <= 0 && dy < 0;
+        const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1 && dy > 0;
+        if (!atTop && !atBottom) return true;
+      }
+      if (dx !== 0 && (cs.overflowX === "auto" || cs.overflowX === "scroll") && el.scrollWidth > el.clientWidth) {
+        const atLeft = el.scrollLeft <= 0 && dx < 0;
+        const atRight = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1 && dx > 0;
+        if (!atLeft && !atRight) return true;
+      }
+      return false;
+    }, "isScrollableInDir");
+    const wheelConsumableWithin = /* @__PURE__ */ __name((root, e) => {
+      let el = e.target;
+      while (el && el.nodeType === 1) {
+        if (el.matches && el.matches("[data-dc-viewport]") && el !== vp) return true;
+        if (el !== root && isScrollableInDir(el, e)) return true;
+        if (el === root) break;
+        el = el.parentElement;
+      }
+      return false;
+    }, "wheelConsumableWithin");
+    const onWheel = /* @__PURE__ */ __name((e) => {
+      if (canNativelyScroll(e)) return;
+      const eng = engagedRef.current;
+      if (eng && eng.isConnected && eng.contains(e.target) && wheelConsumableWithin(eng, e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (isGesturing) return;
+      if (e.ctrlKey) {
+        zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.01));
+      } else if (isMouseWheel(e)) {
+        zoomAt(e.clientX, e.clientY, Math.exp(-Math.sign(e.deltaY) * 0.18));
+      } else {
+        tf.current.x -= e.deltaX;
+        tf.current.y -= e.deltaY;
+        apply();
+      }
+      pulseWheelInteracting();
+    }, "onWheel");
+    let gsBase = 1;
+    let isGesturing = false;
+    const onGestureStart = /* @__PURE__ */ __name((e) => {
+      e.preventDefault();
+      isGesturing = true;
+      gsBase = tf.current.scale;
+      interacting.gesture = true;
+      syncInteractingAttr();
+    }, "onGestureStart");
+    const onGestureChange = /* @__PURE__ */ __name((e) => {
+      e.preventDefault();
+      const g = e;
+      zoomAt(g.clientX, g.clientY, gsBase * g.scale / tf.current.scale);
+    }, "onGestureChange");
+    const onGestureEnd = /* @__PURE__ */ __name((e) => {
+      e.preventDefault();
+      isGesturing = false;
+      interacting.gesture = false;
+      syncInteractingAttr();
+    }, "onGestureEnd");
+    let drag = null;
+    const onPointerDown = /* @__PURE__ */ __name((e) => {
+      const onBg = !e.target.closest("[data-dc-slot], .dc-editable");
+      if (!(e.button === 1 || e.button === 0 && onBg)) return;
+      e.preventDefault();
+      vp.setPointerCapture(e.pointerId);
+      drag = { id: e.pointerId, lx: e.clientX, ly: e.clientY };
+      vp.style.cursor = "grabbing";
+      interacting.drag = true;
+      syncInteractingAttr();
+    }, "onPointerDown");
+    const onPointerMove = /* @__PURE__ */ __name((e) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      tf.current.x += e.clientX - drag.lx;
+      tf.current.y += e.clientY - drag.ly;
+      drag.lx = e.clientX;
+      drag.ly = e.clientY;
+      apply();
+    }, "onPointerMove");
+    const onPointerUp = /* @__PURE__ */ __name((e) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      vp.releasePointerCapture(e.pointerId);
+      drag = null;
+      vp.style.cursor = "";
+      interacting.drag = false;
+      syncInteractingAttr();
+    }, "onPointerUp");
+    const slotConsumable = /* @__PURE__ */ __name((slot) => {
+      if (!slot) return false;
+      if (slot.querySelector("[data-dc-viewport]")) return true;
+      for (const el of Array.from(slot.querySelectorAll("*"))) {
+        const overflowsY = el.scrollHeight > el.clientHeight;
+        const overflowsX = el.scrollWidth > el.clientWidth;
+        if (!overflowsY && !overflowsX) continue;
+        const cs = getComputedStyle(el);
+        if (overflowsY && (cs.overflowY === "auto" || cs.overflowY === "scroll")) return true;
+        if (overflowsX && (cs.overflowX === "auto" || cs.overflowX === "scroll")) return true;
+      }
+      return false;
+    }, "slotConsumable");
+    const setEngaged = /* @__PURE__ */ __name((slot) => {
+      const next = slot && slotConsumable(slot) ? slot : null;
+      if (next === engagedRef.current) return;
+      if (engagedRef.current) engagedRef.current.removeAttribute("data-dc-engaged");
+      engagedRef.current = next;
+      if (next) next.setAttribute("data-dc-engaged", "");
+    }, "setEngaged");
+    const slotForThisCanvas = /* @__PURE__ */ __name((target) => {
+      let el = target;
+      while (el && el !== vp && el.nodeType === 1) {
+        if (el.matches && el.matches("[data-dc-slot]")) {
+          const parent = el.parentElement;
+          const nearestVp = parent && parent.closest ? parent.closest("[data-dc-viewport]") : null;
+          if (nearestVp === vp) return el;
+        }
+        el = el.parentElement;
+      }
+      return null;
+    }, "slotForThisCanvas");
+    const onEngageDown = /* @__PURE__ */ __name((e) => {
+      setEngaged(slotForThisCanvas(e.target));
+    }, "onEngageDown");
+    vp.addEventListener("wheel", onWheel, { passive: false, capture: true });
+    vp.addEventListener("pointerdown", onEngageDown, true);
+    vp.addEventListener("gesturestart", onGestureStart, { passive: false });
+    vp.addEventListener("gesturechange", onGestureChange, { passive: false });
+    vp.addEventListener("gestureend", onGestureEnd, { passive: false });
+    vp.addEventListener("pointerdown", onPointerDown);
+    vp.addEventListener("pointermove", onPointerMove);
+    vp.addEventListener("pointerup", onPointerUp);
+    vp.addEventListener("pointercancel", onPointerUp);
+    return () => {
+      vp.removeEventListener("wheel", onWheel, { capture: true });
+      vp.removeEventListener("pointerdown", onEngageDown, true);
+      vp.removeEventListener("gesturestart", onGestureStart);
+      vp.removeEventListener("gesturechange", onGestureChange);
+      vp.removeEventListener("gestureend", onGestureEnd);
+      vp.removeEventListener("pointerdown", onPointerDown);
+      vp.removeEventListener("pointermove", onPointerMove);
+      vp.removeEventListener("pointerup", onPointerUp);
+      vp.removeEventListener("pointercancel", onPointerUp);
+      if (engagedRef.current) {
+        engagedRef.current.removeAttribute("data-dc-engaged");
+        engagedRef.current = null;
+      }
+      if (wheelTimer) {
+        clearTimeout(wheelTimer);
+        wheelTimer = null;
+      }
+      vp.removeAttribute("data-dc-interacting");
+    };
+  }, [apply, minScale, maxScale]);
+  const gridSvg = `url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 40h6M40 37v6' fill='none' stroke='${encodeURIComponent(DC.grid)}' stroke-width='0.75'/%3E%3C/svg%3E")`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: vpRef,
+      className: "design-canvas",
+      "data-dc-viewport": true,
+      "data-dc-mode": mode,
+      style: {
+        height: "100vh",
+        width: "100vw",
+        background: DC.bg,
+        overflow: "hidden",
+        overscrollBehavior: "none",
+        touchAction: "none",
+        position: "relative",
+        fontFamily: DC.font,
+        boxSizing: "border-box",
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: worldRef,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            transformOrigin: "0 0",
+            willChange: "transform",
+            width: "max-content",
+            minWidth: "100%",
+            minHeight: "100%",
+            padding: "60px 0 80px"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: -6e3, backgroundImage: gridSvg, backgroundSize: "80px 80px", pointerEvents: "none", zIndex: -1 } }),
+            /* @__PURE__ */ jsx(DCViewportCtx.Provider, { value: viewportCtx, children })
+          ]
+        }
+      )
+    }
+  );
+}
+__name(DCViewport, "DCViewport");
+function DCSection({ id, title, subtitle, children, gap = 48 }) {
+  var _a;
+  const ctx = React.useContext(DCCtx);
+  const sid = id != null ? id : title;
+  const all = React.Children.toArray(children);
+  const artboards = all.filter(
+    (c) => React.isValidElement(c) && c.type === DCArtboard
+  );
+  const rest = all.filter((c) => !(React.isValidElement(c) && c.type === DCArtboard));
+  const srcOrder = artboards.map((a) => {
+    var _a2;
+    return (_a2 = a.props.id) != null ? _a2 : a.props.label;
+  });
+  const sec = (ctx && sid ? ctx.section(sid) : void 0) || {};
+  const order = React.useMemo(() => {
+    const kept = (sec.order || []).filter((k) => srcOrder.includes(k));
+    return [...kept, ...srcOrder.filter((k) => !kept.includes(k))];
+  }, [sec.order, srcOrder.join("|")]);
+  const byId = Object.fromEntries(
+    artboards.map((a) => {
+      var _a2;
+      return [(_a2 = a.props.id) != null ? _a2 : a.props.label, a];
+    })
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-dc-section": sid, style: { marginBottom: 80, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: "0 60px 56px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 28, fontWeight: 600, color: DC.title, letterSpacing: -0.4, marginBottom: 6, display: "inline-block" }, children: (_a = sec.title) != null ? _a : title }),
+      subtitle && /* @__PURE__ */ jsx("div", { style: { fontSize: 16, color: DC.subtitle }, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap, padding: "0 60px", alignItems: "flex-start", width: "max-content" }, children: order.map((k) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        DCArtboardFrame,
+        {
+          sectionId: sid,
+          artboard: byId[k],
+          label: (_a2 = (sec.labels || {})[k]) != null ? _a2 : byId[k].props.label,
+          selected: !!ctx && ctx.state.selected === `${sid}/${k}`,
+          onSelect: /* @__PURE__ */ __name(() => {
+            if (ctx) ctx.setSelected(`${sid}/${k}`);
+          }, "onSelect"),
+          activePageId: ctx ? ctx.activePageId : null,
+          onRename: /* @__PURE__ */ __name((v) => {
+            if (ctx) ctx.patchSection(sid, (x) => ({ labels: { ...x.labels, [k]: v } }));
+          }, "onRename"),
+          onFocus: /* @__PURE__ */ __name(() => {
+            if (ctx) ctx.setFocus(`${sid}/${k}`);
+          }, "onFocus")
+        },
+        k
+      );
+    }) }),
+    rest
+  ] });
+}
+__name(DCSection, "DCSection");
+function DCArtboard(_props) {
+  return null;
+}
+__name(DCArtboard, "DCArtboard");
+function DCArtboardFrame({ sectionId: _sectionId, artboard, label, selected, onSelect, activePageId, onRename, onFocus }) {
+  const { id: rawId, label: rawLabel, width = 260, height = 480, children, style = {}, contain = false } = artboard.props;
+  const id = rawId != null ? rawId : rawLabel;
+  const ref = React.useRef(null);
+  const viewport = React.useContext(DCViewportCtx);
+  const [active, setActive] = React.useState(true);
+  React.useEffect(() => {
+    if (!viewport) return;
+    let last = true;
+    const check = /* @__PURE__ */ __name((t) => {
+      const el = ref.current;
+      if (!el) return;
+      const tooSmall = t.scale < viewport.minActiveScale;
+      const r = el.getBoundingClientRect();
+      const m = 400;
+      const inView = r.right > -m && r.left < window.innerWidth + m && r.bottom > -m && r.top < window.innerHeight + m;
+      const next = inView && !tooSmall;
+      if (next !== last) {
+        last = next;
+        setActive(next);
+      }
+    }, "check");
+    const unsub = viewport.subscribe(check);
+    const onResize = /* @__PURE__ */ __name(() => check(viewport.getTransform()), "onResize");
+    window.addEventListener("resize", onResize);
+    return () => {
+      unsub();
+      window.removeEventListener("resize", onResize);
+    };
+  }, [viewport]);
+  const [editing, setEditing] = React.useState(false);
+  const labelRef = React.useRef(null);
+  const startRename = /* @__PURE__ */ __name(() => {
+    setEditing(true);
+    requestAnimationFrame(() => {
+      const el = labelRef.current;
+      if (!el) return;
+      el.focus();
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const sel = window.getSelection();
+      sel == null ? void 0 : sel.removeAllRanges();
+      sel == null ? void 0 : sel.addRange(range);
+    });
+  }, "startRename");
+  const commitRename = /* @__PURE__ */ __name(() => {
+    var _a;
+    setEditing(false);
+    if (labelRef.current) onRename((_a = labelRef.current.textContent) != null ? _a : "");
+  }, "commitRename");
+  const [copied, setCopied] = React.useState(false);
+  const copyShareLink = /* @__PURE__ */ __name(() => {
+    var _a;
+    const url = new URL(window.location.href);
+    url.searchParams.delete("pin");
+    if (activePageId) url.searchParams.set("page", activePageId);
+    url.searchParams.set("artboard", id);
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(url.toString());
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, "copyShareLink");
+  React.useEffect(() => {
+    if (!selected) setCopied(false);
+  }, [selected]);
+  return /* @__PURE__ */ jsxs("div", { ref, "data-dc-slot": id, style: { position: "relative", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx("div", { className: "dc-labelrow", style: { position: "absolute", bottom: "100%", left: -4, marginBottom: 4, color: DC.label }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `dc-labeltext${selected ? " dc-selected" : ""}`,
+        onClick: /* @__PURE__ */ __name(() => !editing && onSelect(), "onClick"),
+        onDoubleClick: startRename,
+        title: editing ? void 0 : "Click to select · double-click to rename",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: labelRef,
+            className: "dc-editable",
+            contentEditable: editing,
+            suppressContentEditableWarning: true,
+            onPointerDown: /* @__PURE__ */ __name((e) => {
+              if (editing) e.stopPropagation();
+            }, "onPointerDown"),
+            onBlur: /* @__PURE__ */ __name(() => editing && commitRename(), "onBlur"),
+            onKeyDown: /* @__PURE__ */ __name((e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.currentTarget.blur();
+              }
+            }, "onKeyDown"),
+            style: { fontSize: 15, fontWeight: 500, color: selected ? "#9aa6bb" : DC.label, lineHeight: 1, cursor: editing ? "text" : "pointer" },
+            children: label
+          }
+        )
+      }
+    ) }),
+    selected && /* @__PURE__ */ jsx("div", { className: "dc-share-pop", onPointerDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onPointerDown"), children: /* @__PURE__ */ jsxs("button", { onClick: copyShareLink, children: [
+      copied ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "#7ed3a0", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 6.5L4.8 9.2 10 3.5" }) }) : /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 7a2.4 2.4 0 0 0 3.4.2l1.8-1.8a2.4 2.4 0 0 0-3.4-3.4l-1 1" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 5a2.4 2.4 0 0 0-3.4-.2L1.8 6.6A2.4 2.4 0 0 0 5.2 10l1-1" })
+      ] }),
+      copied ? "Link copied" : "Copy link to artboard"
+    ] }) }),
+    /* @__PURE__ */ jsx("button", { className: "dc-expand", onClick: onFocus, onPointerDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onPointerDown"), title: "Focus", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M7 1h4v4M5 11H1V7M11 1L7.5 4.5M1 11l3.5-3.5" }) }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "dc-card",
+        "data-vt-window": contain ? "" : void 0,
+        style: {
+          borderRadius: 2,
+          boxShadow: "0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06)",
+          overflow: "hidden",
+          width,
+          height,
+          background: "#fff",
+          ...contain ? { contain: "layout" } : {},
+          ...style,
+          ...selected ? { outline: "2px solid #9aa6bb", outlineOffset: 2 } : null
+        },
+        children: /* @__PURE__ */ jsx(DCArtboardActiveCtx.Provider, { value: active, children: children || /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#bbb", fontSize: 13, fontFamily: DC.font }, children: id }) })
+      }
+    )
+  ] });
+}
+__name(DCArtboardFrame, "DCArtboardFrame");
+function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
+  var _a, _b;
+  const ctx = React.useContext(DCCtx);
+  const { sectionId, artboard } = entry;
+  const sec = ctx.section(sectionId);
+  const meta = sectionMeta[sectionId];
+  const peers = meta.slotIds;
+  const aid = (_a = artboard.props.id) != null ? _a : artboard.props.label;
+  const idx = peers.indexOf(aid);
+  const secIdx = sectionOrder.indexOf(sectionId);
+  const go = /* @__PURE__ */ __name((d) => {
+    const n = peers[(idx + d + peers.length) % peers.length];
+    if (n) ctx.setFocus(`${sectionId}/${n}`);
+  }, "go");
+  const goSection = /* @__PURE__ */ __name((d) => {
+    const ns = sectionOrder[(secIdx + d + sectionOrder.length) % sectionOrder.length];
+    const first = sectionMeta[ns] && sectionMeta[ns].slotIds[0];
+    if (first) ctx.setFocus(`${ns}/${first}`);
+  }, "goSection");
+  React.useEffect(() => {
+    const k = /* @__PURE__ */ __name((e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        go(-1);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        go(1);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        goSection(-1);
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        goSection(1);
+      }
+    }, "k");
+    document.addEventListener("keydown", k);
+    return () => document.removeEventListener("keydown", k);
+  });
+  const { width = 260, height = 480, children } = artboard.props;
+  const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight });
+  React.useEffect(() => {
+    const r = /* @__PURE__ */ __name(() => setVp({ w: window.innerWidth, h: window.innerHeight }), "r");
+    window.addEventListener("resize", r);
+    return () => window.removeEventListener("resize", r);
+  }, []);
+  const scale = Math.max(0.1, Math.min((vp.w - 200) / width, (vp.h - 260) / height, 2));
+  const [ddOpen, setDd] = React.useState(false);
+  const Arrow = /* @__PURE__ */ __name(({ dir, onClick }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: /* @__PURE__ */ __name((e) => {
+        e.stopPropagation();
+        onClick();
+      }, "onClick"),
+      style: {
+        position: "absolute",
+        top: "50%",
+        [dir]: 28,
+        transform: "translateY(-50%)",
+        border: "none",
+        background: "rgba(255,255,255,.08)",
+        color: "rgba(255,255,255,.9)",
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        fontSize: 18,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background .15s"
+      },
+      onMouseEnter: /* @__PURE__ */ __name((e) => e.currentTarget.style.background = "rgba(255,255,255,.18)", "onMouseEnter"),
+      onMouseLeave: /* @__PURE__ */ __name((e) => e.currentTarget.style.background = "rgba(255,255,255,.08)", "onMouseLeave"),
+      children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: dir === "left" ? "M11 3L5 9l6 6" : "M7 3l6 6-6 6" }) })
+    }
+  ), "Arrow");
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: /* @__PURE__ */ __name(() => ctx.setFocus(null), "onClick"),
+        onWheel: /* @__PURE__ */ __name((e) => e.preventDefault(), "onWheel"),
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 100,
+          background: "rgba(24,25,27,.6)",
+          backdropFilter: "blur(14px)",
+          fontFamily: DC.font,
+          color: "#fff"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
+              style: { position: "absolute", top: 0, left: 0, right: 0, height: 72, display: "flex", alignItems: "flex-start", padding: "16px 20px 0", gap: 16 },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: /* @__PURE__ */ __name(() => setDd((o) => !o), "onClick"),
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "#fff",
+                        cursor: "pointer",
+                        padding: "6px 8px",
+                        borderRadius: 6,
+                        textAlign: "left",
+                        fontFamily: "inherit"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                          /* @__PURE__ */ jsx("span", { style: { fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }, children: meta.title }),
+                          /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsx("path", { d: "M2 4l3.5 3.5L9 4" }) })
+                        ] }),
+                        meta.subtitle && /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: 13, opacity: 0.6, fontWeight: 400, marginTop: 2 }, children: meta.subtitle })
+                      ]
+                    }
+                  ),
+                  ddOpen && /* @__PURE__ */ jsx("div", { style: {
+                    position: "absolute",
+                    top: "100%",
+                    left: 0,
+                    marginTop: 4,
+                    background: "#202123",
+                    borderRadius: 8,
+                    boxShadow: "0 8px 32px rgba(0,0,0,.4)",
+                    padding: 4,
+                    minWidth: 200,
+                    zIndex: 10
+                  }, children: sectionOrder.map((sid) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: /* @__PURE__ */ __name(() => {
+                        setDd(false);
+                        const f = sectionMeta[sid].slotIds[0];
+                        if (f) ctx.setFocus(`${sid}/${f}`);
+                      }, "onClick"),
+                      style: {
+                        display: "block",
+                        width: "100%",
+                        textAlign: "left",
+                        border: "none",
+                        cursor: "pointer",
+                        background: sid === sectionId ? "rgba(255,255,255,.1)" : "transparent",
+                        color: "#fff",
+                        padding: "8px 12px",
+                        borderRadius: 5,
+                        fontSize: 14,
+                        fontWeight: sid === sectionId ? 600 : 400,
+                        fontFamily: "inherit"
+                      },
+                      children: sectionMeta[sid].title
+                    },
+                    sid
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: /* @__PURE__ */ __name(() => ctx.setFocus(null), "onClick"),
+                    onMouseEnter: /* @__PURE__ */ __name((e) => e.currentTarget.style.background = "rgba(255,255,255,.12)", "onMouseEnter"),
+                    onMouseLeave: /* @__PURE__ */ __name((e) => e.currentTarget.style.background = "transparent", "onMouseLeave"),
+                    style: {
+                      border: "none",
+                      background: "transparent",
+                      color: "rgba(255,255,255,.7)",
+                      width: 32,
+                      height: 32,
+                      borderRadius: 16,
+                      fontSize: 20,
+                      cursor: "pointer",
+                      lineHeight: 1,
+                      transition: "background .12s"
+                    },
+                    children: "×"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: { position: "absolute", top: 64, bottom: 56, left: 100, right: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16 },
+              children: [
+                /* @__PURE__ */ jsx("div", { onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"), style: { width: width * scale, height: height * scale, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: {
+                  width,
+                  height,
+                  transform: `scale(${scale})`,
+                  transformOrigin: "top left",
+                  background: "#fff",
+                  borderRadius: 2,
+                  overflow: "hidden",
+                  boxShadow: "0 20px 80px rgba(0,0,0,.4)"
+                }, children: children || /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#bbb" }, children: aid }) }) }),
+                /* @__PURE__ */ jsxs("div", { onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"), style: { fontSize: 14, fontWeight: 500, opacity: 0.85, textAlign: "center" }, children: [
+                  (_b = (sec.labels || {})[aid]) != null ? _b : artboard.props.label,
+                  /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, marginLeft: 10, fontVariantNumeric: "tabular-nums" }, children: [
+                    idx + 1,
+                    " / ",
+                    peers.length
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Arrow, { dir: "left", onClick: /* @__PURE__ */ __name(() => go(-1), "onClick") }),
+          /* @__PURE__ */ jsx(Arrow, { dir: "right", onClick: /* @__PURE__ */ __name(() => go(1), "onClick") }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
+              style: { position: "absolute", bottom: 20, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 8 },
+              children: peers.map((p, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: /* @__PURE__ */ __name(() => ctx.setFocus(`${sectionId}/${p}`), "onClick"),
+                  style: {
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    background: i === idx ? "#fff" : "rgba(255,255,255,.3)"
+                  }
+                },
+                p
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    getPortalRoot()
+  );
+}
+__name(DCFocusOverlay, "DCFocusOverlay");
+function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180 }) {
+  return /* @__PURE__ */ jsx("div", { style: {
+    position: "absolute",
+    top,
+    left,
+    right,
+    bottom,
+    width,
+    background: DC.postitBg,
+    padding: "14px 16px",
+    fontFamily: '"Comic Sans MS", "Marker Felt", "Segoe Print", cursive',
+    fontSize: 14,
+    lineHeight: 1.4,
+    color: DC.postitText,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)",
+    transform: `rotate(${rotate}deg)`,
+    zIndex: 5
+  }, children });
+}
+__name(DCPostIt, "DCPostIt");
+export {
+  Avatar as A,
+  DCArtboard as D,
+  FONT$1 as F,
+  adapterHasTokens as a,
+  getComponentName as b,
+  getPortalRoot as c,
+  cardStyle as d,
+  ghostBtn as e,
+  resolveCanvasId as f,
+  getDesignSystemAdapter as g,
+  DCPage as h,
+  isLiveCommentsHost as i,
+  DCPostIt as j,
+  DCSection as k,
+  linkBtn as l,
+  DesignCanvas as m,
+  genericAdapter as n,
+  onDesignSystemAdapterChange as o,
+  primaryBtn as p,
+  setPortalRoot as q,
+  relativeTime as r,
+  setDesignSystemAdapter as s,
+  textareaStyle as t,
+  useArtboardActive as u
+};
+//# sourceMappingURL=lib-CSrTsI4Y.js.map