@tangle-network/agent-app 0.45.23 → 0.45.24

package/dist/{chunk-TZO3SOUL.js → chunk-LSQR6HM6.js}

@@ -1,29 +1,32 @@
 // src/theme/theme.ts
 var lightTheme = {
   background: "0 0% 100%",
-  foreground: "0 0% 5%",
-  card: "240 7% 97%",
-  cardForeground: "0 0% 5%",
+  foreground: "240.1 6.8% 5.5%",
+  card: "239.6 17.2% 96.5%",
+  cardForeground: "240.1 6.8% 5.5%",
   popover: "0 0% 100%",
-  popoverForeground: "0 0% 5%",
+  popoverForeground: "240.1 6.8% 5.5%",
   primary: "245 62% 57%",
   primaryForeground: "0 0% 100%",
-  secondary: "240 6% 93%",
-  secondaryForeground: "0 0% 10%",
-  muted: "240 6% 93%",
-  mutedForeground: "240 5% 38%",
-  accent: "240 6% 93%",
-  accentForeground: "0 0% 10%",
+  secondary: "239.6 8% 92.6%",
+  secondaryForeground: "239.9 3.8% 10.7%",
+  muted: "239.6 8% 92.6%",
+  mutedForeground: "239.7 1.3% 38.2%",
+  accent: "239.6 8% 92.6%",
+  accentForeground: "239.9 3.8% 10.7%",
   destructive: "0 72% 41%",
   destructiveForeground: "0 0% 100%",
-  border: "240 6% 89%",
-  input: "240 6% 89%",
+  border: "239.6 5.2% 88.7%",
+  input: "239.6 5.2% 88.7%",
   ring: "245 62% 57%",
   success: "160 84% 26%",
   successForeground: "0 0% 100%",
   warning: "41 96% 38%",
   warningForeground: "38 92% 12%",
-  canvasBackdrop: "hsl(240 7% 90%)",
+  warningStrong: "41 96% 28%",
+  canvasBackdrop: "hsl(239.6 5.2% 88.7%)",
+  borderSoft: "color-mix(in oklch, hsl(var(--border)) 40%, transparent)",
+  cardEdge: "color-mix(in oklch, hsl(var(--border)) 60%, transparent)",
   canvasRender: {
     grid: "#c0c0c0",
     snapGrid: "#a0a0a0",
@@ -39,30 +42,35 @@ var lightTheme = {
   }
 };
 var darkTheme = {
-  background: "240 8% 5%",
-  foreground: "240 6% 93%",
-  card: "240 5% 8%",
-  cardForeground: "240 6% 93%",
-  popover: "240 4% 13%",
-  popoverForeground: "240 6% 93%",
+  background: "240.1 6.8% 5.5%",
+  foreground: "239.6 8% 92.6%",
+  card: "240 4.9% 8%",
+  cardForeground: "239.6 8% 92.6%",
+  popover: "239.9 3.1% 13.5%",
+  popoverForeground: "239.6 8% 92.6%",
   primary: "239 84% 74%",
-  primaryForeground: "0 0% 100%",
-  secondary: "240 5% 11%",
-  secondaryForeground: "240 6% 93%",
-  muted: "240 5% 11%",
-  mutedForeground: "240 4% 62%",
-  accent: "240 5% 11%",
-  accentForeground: "240 6% 93%",
+  // Inverted, not copied from light: white on this fill measures 3.02:1.
+  primaryForeground: "240.1 6.8% 5.5%",
+  secondary: "239.9 3.8% 10.7%",
+  secondaryForeground: "239.6 8% 92.6%",
+  muted: "239.9 3.8% 10.7%",
+  mutedForeground: "239.6 1.5% 62.5%",
+  accent: "239.9 3.8% 10.7%",
+  accentForeground: "239.6 8% 92.6%",
   destructive: "348 90% 68%",
-  destructiveForeground: "0 0% 12%",
-  border: "240 3% 13%",
-  input: "240 5% 11%",
+  destructiveForeground: "239.9 3.1% 13.5%",
+  border: "239.9 3.1% 13.5%",
+  input: "239.9 3.8% 10.7%",
   ring: "239 84% 74%",
   success: "160 70% 52%",
   successForeground: "160 84% 10%",
   warning: "40 94% 56%",
   warningForeground: "38 92% 12%",
-  canvasBackdrop: "hsl(240 8% 5%)",
+  warningStrong: "40 94% 56%",
+  canvasBackdrop: "hsl(240.1 6.8% 5.5%)",
+  // The inversion: dark keeps both tiers at full strength (see tokens.css).
+  borderSoft: "hsl(var(--border))",
+  cardEdge: "hsl(var(--border))",
   canvasRender: {
     grid: "#3a3a3a",
     snapGrid: "#5a5a5a",
@@ -78,7 +86,7 @@ var darkTheme = {
   }
 };
 function themeColor(value) {
-  return value.startsWith("hsl") || value.startsWith("#") || value.startsWith("rgb") ? value : `hsl(${value})`;
+  return /^(hsl|rgb|oklch|oklab|lch|lab|color|color-mix|#)/.test(value) ? value : `hsl(${value})`;
 }
 function themeToCssVars(theme) {
   return {
@@ -105,6 +113,10 @@ function themeToCssVars(theme) {
     "--success-foreground": theme.successForeground,
     "--warning": theme.warning,
     "--warning-foreground": theme.warningForeground,
+    // Falls back to the pairing the tinted surfaces used before this token
+    // existed, so an unset value restores the previous look rather than an
+    // unthemed one.
+    "--warning-strong": theme.warningStrong ?? theme.warningForeground,
     "--bg-input": `hsl(${theme.card})`,
     "--text-primary": `hsl(${theme.foreground})`,
     "--text-secondary": `hsl(${theme.secondaryForeground})`,
@@ -114,7 +126,11 @@ function themeToCssVars(theme) {
     "--brand-primary": `hsl(${theme.primary})`,
     "--editor-selection-background": `hsl(${theme.primary})`,
     "--editor-selection-foreground": `hsl(${theme.background})`,
-    "--canvas-backdrop": theme.canvasBackdrop
+    "--canvas-backdrop": theme.canvasBackdrop,
+    // Full strength is the safe default: an unset tier can under-draw an edge,
+    // never erase one.
+    "--border-soft": theme.borderSoft ?? `hsl(${theme.border})`,
+    "--card-edge": theme.cardEdge ?? `hsl(${theme.border})`
   };
 }
 
@@ -124,4 +140,4 @@ export {
   themeColor,
   themeToCssVars
 };
-//# sourceMappingURL=chunk-TZO3SOUL.js.map
+//# sourceMappingURL=chunk-LSQR6HM6.js.map

package/dist/chunk-LSQR6HM6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/theme.ts"],"sourcesContent":["/**\n * Typed mirror of tokens.css for runtime/JS theming. The canonical source is\n * tokens.css (`import '@tangle-network/agent-app/styles'`); this module is for\n * apps that compute theme variables in JS, or read color values where CSS\n * custom properties cannot reach — notably Konva canvas render code, which\n * paints to a bitmap and cannot resolve `var(--…)`.\n *\n * Values are shadcn-style HSL channel triples (\"H S% L%\"); wrap with `color()`.\n *\n * The neutral triples are the RESOLVED form of tokens.css's `--neutral-*` ramp\n * (that file states them as `var(--neutral-NN-hsl)`; JS has no cascade to\n * resolve through, so they are inlined here). `tests/theme/tokens-contract.test.ts`\n * resolves the CSS one level and fails if this mirror has drifted.\n */\n\nexport interface AgentAppTheme {\n  background: string\n  foreground: string\n  card: string\n  cardForeground: string\n  popover: string\n  popoverForeground: string\n  primary: string\n  primaryForeground: string\n  secondary: string\n  secondaryForeground: string\n  muted: string\n  mutedForeground: string\n  accent: string\n  accentForeground: string\n  destructive: string\n  destructiveForeground: string\n  border: string\n  input: string\n  ring: string\n  success: string\n  successForeground: string\n  warning: string\n  warningForeground: string\n  /**\n   * Warning as TEXT on a warning-TINTED surface, as a channel triple. Optional\n   * so a consumer's existing `AgentAppTheme` literal still type-checks;\n   * {@link themeToCssVars} falls back to `warningForeground`, which is what the\n   * surface used before this token existed.\n   */\n  warningStrong?: string\n  /** Full CSS color (not a triple) — the canvas/scene backdrop. */\n  canvasBackdrop: string\n  /**\n   * Border tiers as FULL CSS colors (they are `color-mix()` results, not\n   * triples). Optional so a consumer's existing `AgentAppTheme` literal still\n   * type-checks; {@link themeToCssVars} falls back to full-strength\n   * `hsl(var(--border))`, which can never erase an edge.\n   */\n  borderSoft?: string\n  /** @see borderSoft */\n  cardEdge?: string\n  /** Konva render palette — full hex colors the bitmap canvas paints with\n   *  (it cannot resolve `var(--…)`). NOT emitted by themeToCssVars. */\n  canvasRender: CanvasRenderPalette\n}\n\n/**\n * Colors the Konva design-canvas paints directly. Konva renders to a bitmap\n * and cannot read CSS custom properties, so these are full hex strings sourced\n * from the active theme and threaded through the canvas components.\n */\nexport interface CanvasRenderPalette {\n  /** Grid line color (GridLayer). */\n  grid: string\n  /** Grid-snap guide line (SnapGuidesOverlay, kind 'grid'). */\n  snapGrid: string\n  /** Saved ruler-guide snap line (kind 'guide'). */\n  snapGuide: string\n  /** Page edge/center snap line (kinds 'page-edge'/'page-center'). */\n  snapPage: string\n  /** Element edge/center snap line (kinds 'element-edge'/'element-center'). */\n  snapElement: string\n  /** Transformer border + anchor stroke (SelectionLayer). */\n  selectionStroke: string\n  /** Transformer anchor fill (SelectionLayer). */\n  selectionAnchorFill: string\n  /** Video placeholder fill (ElementNode VideoNode). */\n  placeholderFill: string\n  /** Video placeholder stroke (ElementNode VideoNode). */\n  placeholderStroke: string\n  /** Broken/loading image placeholder fill (ElementNode ImageNode). */\n  brokenFill: string\n  /** Broken/loading image placeholder stroke (ElementNode ImageNode). */\n  brokenStroke: string\n}\n\n/** Define a light color theme with specific background, foreground, and accent color values */\nexport const lightTheme: AgentAppTheme = {\n  background: '0 0% 100%',\n  foreground: '240.1 6.8% 5.5%',\n  card: '239.6 17.2% 96.5%',\n  cardForeground: '240.1 6.8% 5.5%',\n  popover: '0 0% 100%',\n  popoverForeground: '240.1 6.8% 5.5%',\n  primary: '245 62% 57%',\n  primaryForeground: '0 0% 100%',\n  secondary: '239.6 8% 92.6%',\n  secondaryForeground: '239.9 3.8% 10.7%',\n  muted: '239.6 8% 92.6%',\n  mutedForeground: '239.7 1.3% 38.2%',\n  accent: '239.6 8% 92.6%',\n  accentForeground: '239.9 3.8% 10.7%',\n  destructive: '0 72% 41%',\n  destructiveForeground: '0 0% 100%',\n  border: '239.6 5.2% 88.7%',\n  input: '239.6 5.2% 88.7%',\n  ring: '245 62% 57%',\n  success: '160 84% 26%',\n  successForeground: '0 0% 100%',\n  warning: '41 96% 38%',\n  warningForeground: '38 92% 12%',\n  warningStrong: '41 96% 28%',\n  canvasBackdrop: 'hsl(239.6 5.2% 88.7%)',\n  borderSoft: 'color-mix(in oklch, hsl(var(--border)) 40%, transparent)',\n  cardEdge: 'color-mix(in oklch, hsl(var(--border)) 60%, transparent)',\n  canvasRender: {\n    grid: '#c0c0c0',\n    snapGrid: '#a0a0a0',\n    snapGuide: '#3b82f6',\n    snapPage: '#f59e0b',\n    snapElement: '#f43f5e',\n    selectionStroke: '#00a1ff',\n    selectionAnchorFill: '#ffffff',\n    placeholderFill: '#1f2937',\n    placeholderStroke: '#374151',\n    brokenFill: '#e5e7eb',\n    brokenStroke: '#9ca3af',\n  },\n}\n\n/** Define a dark color scheme for the Agent app interface with specific background and foreground hues */\nexport const darkTheme: AgentAppTheme = {\n  background: '240.1 6.8% 5.5%',\n  foreground: '239.6 8% 92.6%',\n  card: '240 4.9% 8%',\n  cardForeground: '239.6 8% 92.6%',\n  popover: '239.9 3.1% 13.5%',\n  popoverForeground: '239.6 8% 92.6%',\n  primary: '239 84% 74%',\n  // Inverted, not copied from light: white on this fill measures 3.02:1.\n  primaryForeground: '240.1 6.8% 5.5%',\n  secondary: '239.9 3.8% 10.7%',\n  secondaryForeground: '239.6 8% 92.6%',\n  muted: '239.9 3.8% 10.7%',\n  mutedForeground: '239.6 1.5% 62.5%',\n  accent: '239.9 3.8% 10.7%',\n  accentForeground: '239.6 8% 92.6%',\n  destructive: '348 90% 68%',\n  destructiveForeground: '239.9 3.1% 13.5%',\n  border: '239.9 3.1% 13.5%',\n  input: '239.9 3.8% 10.7%',\n  ring: '239 84% 74%',\n  success: '160 70% 52%',\n  successForeground: '160 84% 10%',\n  warning: '40 94% 56%',\n  warningForeground: '38 92% 12%',\n  warningStrong: '40 94% 56%',\n  canvasBackdrop: 'hsl(240.1 6.8% 5.5%)',\n  // The inversion: dark keeps both tiers at full strength (see tokens.css).\n  borderSoft: 'hsl(var(--border))',\n  cardEdge: 'hsl(var(--border))',\n  canvasRender: {\n    grid: '#3a3a3a',\n    snapGrid: '#5a5a5a',\n    snapGuide: '#3b82f6',\n    snapPage: '#f59e0b',\n    snapElement: '#f43f5e',\n    selectionStroke: '#00a1ff',\n    selectionAnchorFill: '#e5e7eb',\n    placeholderFill: '#2a2f3a',\n    placeholderStroke: '#3f4654',\n    brokenFill: '#262b33',\n    brokenStroke: '#4b5563',\n  },\n}\n\n/**\n * Wrap a channel triple in `hsl()`; pass through values already in a color form.\n * `oklch(…)` / `oklab(…)` / `color-mix(…)` are recognised because the ramp is\n * authored in oklch and the border tiers are colour mixes — wrapping either in\n * `hsl()` yields an invalid colour that paints as nothing.\n */\nexport function themeColor(value: string): string {\n  return /^(hsl|rgb|oklch|oklab|lch|lab|color|color-mix|#)/.test(value) ? value : `hsl(${value})`\n}\n\n/**\n * Map a theme to the full CSS-variable set (shadcn triples + canvas/sequences\n * aliases + canvas surface). Apply at runtime to scope a theme without loading\n * tokens.css: `Object.assign(el.style, themeToCssVars(darkTheme))`.\n */\nexport function themeToCssVars(theme: AgentAppTheme): Record<string, string> {\n  return {\n    '--background': theme.background,\n    '--foreground': theme.foreground,\n    '--card': theme.card,\n    '--card-foreground': theme.cardForeground,\n    '--popover': theme.popover,\n    '--popover-foreground': theme.popoverForeground,\n    '--primary': theme.primary,\n    '--primary-foreground': theme.primaryForeground,\n    '--secondary': theme.secondary,\n    '--secondary-foreground': theme.secondaryForeground,\n    '--muted': theme.muted,\n    '--muted-foreground': theme.mutedForeground,\n    '--accent': theme.accent,\n    '--accent-foreground': theme.accentForeground,\n    '--destructive': theme.destructive,\n    '--destructive-foreground': theme.destructiveForeground,\n    '--border': theme.border,\n    '--input': theme.input,\n    '--ring': theme.ring,\n    '--success': theme.success,\n    '--success-foreground': theme.successForeground,\n    '--warning': theme.warning,\n    '--warning-foreground': theme.warningForeground,\n    // Falls back to the pairing the tinted surfaces used before this token\n    // existed, so an unset value restores the previous look rather than an\n    // unthemed one.\n    '--warning-strong': theme.warningStrong ?? theme.warningForeground,\n    '--bg-input': `hsl(${theme.card})`,\n    '--text-primary': `hsl(${theme.foreground})`,\n    '--text-secondary': `hsl(${theme.secondaryForeground})`,\n    '--text-muted': `hsl(${theme.mutedForeground})`,\n    '--text-danger': `hsl(${theme.destructive})`,\n    '--border-default': `hsl(${theme.border})`,\n    '--brand-primary': `hsl(${theme.primary})`,\n    '--editor-selection-background': `hsl(${theme.primary})`,\n    '--editor-selection-foreground': `hsl(${theme.background})`,\n    '--canvas-backdrop': theme.canvasBackdrop,\n    // Full strength is the safe default: an unset tier can under-draw an edge,\n    // never erase one.\n    '--border-soft': theme.borderSoft ?? `hsl(${theme.border})`,\n    '--card-edge': theme.cardEdge ?? `hsl(${theme.border})`,\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-3IHYJIDJ.js → chunk-NC2V63EL.js}

@@ -353,7 +353,7 @@ var ShapesGlyph = glyph(
 // src/design-canvas-react/components/icon-button.tsx
 import { forwardRef } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var BTN_BASE = "items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)] disabled:cursor-default disabled:opacity-40";
+var BTN_BASE = "items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40";
 var BTN_ACTIVE_EXTRA = " border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]";
 var BTN = `flex h-7 w-7 ${BTN_BASE}`;
 var BTN_ACTIVE = BTN + BTN_ACTIVE_EXTRA;
@@ -459,7 +459,7 @@ function PagesStrip({
                       "aria-label": `Page ${index + 1}: ${page.name}${isActive ? " (active)" : ""}`,
                       "aria-pressed": isActive,
                       onClick: () => onSelectPage(page.id),
-                      className: "flex cursor-pointer flex-col items-center gap-1 rounded focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+                      className: "flex cursor-pointer flex-col items-center gap-1 rounded",
                       children: [
                         /* @__PURE__ */ jsx5(
                           "div",
@@ -521,7 +521,7 @@ function PagesStrip({
               type: "button",
               "aria-label": "Add page",
               onClick: onAddPage,
-              className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+              className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)]",
               children: [
                 /* @__PURE__ */ jsx5(PlusGlyph, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx5("span", { className: "text-[10px]", children: "Add page" })
@@ -847,7 +847,7 @@ function NumberInput({
           if (event.key === "Enter") commit(event.target.value);
           if (event.key === "Escape") setRaw(null);
         },
-        className: `${className} rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]`
+        className: `${className} rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]`
       }
     )
   ] });
@@ -877,7 +877,7 @@ function SelectControl({
             "aria-haspopup": "listbox",
             "aria-expanded": open,
             onClick: () => setOpen((v) => !v),
-            className: `${buttonClassName} flex items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40`,
+            className: `${buttonClassName} flex items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40`,
             children: [
               /* @__PURE__ */ jsx7("span", { className: "truncate", children: current?.label ?? value }),
               /* @__PURE__ */ jsx7("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
@@ -931,7 +931,7 @@ function FontPicker({
             "aria-expanded": open,
             "aria-label": "Font family",
             onClick: () => setOpen((v) => !v),
-            className: "flex w-28 items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40",
+            className: "flex w-28 items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40",
             style: { fontFamily: value },
             children: [
               /* @__PURE__ */ jsx7("span", { className: "truncate", children: value }),
@@ -948,7 +948,7 @@ function FontPicker({
               onChange: (event) => setQuery(event.target.value),
               placeholder: "Search fonts",
               "aria-label": "Search fonts",
-              className: "m-1 rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+              className: "m-1 rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
             }
           ),
           /* @__PURE__ */ jsx7("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx7(
@@ -1012,7 +1012,7 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
               "aria-label": `${label} hex value`,
               value,
               onChange: (event) => onCommit(event.target.value),
-              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
             }
           )
         ] })
@@ -1216,7 +1216,7 @@ function SelectionControls({
                 value: slotInput,
                 onChange: (event) => setSlotInput(event.target.value),
                 placeholder: "slot-name",
-                className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+                className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
               }
             ),
             /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
@@ -1363,7 +1363,7 @@ function ImageControls({ element, canWrite, onPatch }) {
               onChange: (event) => setSwapUrl(event.target.value),
               placeholder: "https://\u2026 image URL",
               "aria-label": "New image URL",
-              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
             }
           ),
           /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
@@ -1418,7 +1418,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides, pa
         value: page.name,
         disabled: !canWrite,
         onChange: (event) => onSetPageProps({ name: event.target.value }),
-        className: "w-28 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+        className: "w-28 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
       }
     ),
     SEP,
@@ -1450,7 +1450,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides, pa
             if (event.key === "Enter") commitDimension("width", event.target.value);
             if (event.key === "Escape") setCustomW(null);
           },
-          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
         }
       )
     ] }),
@@ -1470,7 +1470,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides, pa
             if (event.key === "Enter") commitDimension("height", event.target.value);
             if (event.key === "Escape") setCustomH(null);
           },
-          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]"
         }
       )
     ] }),
@@ -1571,7 +1571,7 @@ function ZoomControls({ zoom, onZoom, onFit, fitLabel = "Fit to screen" }) {
         type: "button",
         "aria-label": "Reset to 100%",
         onClick: resetHundred,
-        className: "rounded px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--text-secondary)] transition hover:bg-[var(--border-default)] hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+        className: "rounded px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--text-secondary)] transition hover:bg-[var(--border-default)] hover:text-[var(--text-primary)]",
         title: "Reset to 100%",
         children: [
           Math.round(zoom * 100),
@@ -2192,4 +2192,4 @@ export {
   ExportControl,
   DesignCanvas
 };
-//# sourceMappingURL=chunk-3IHYJIDJ.js.map
+//# sourceMappingURL=chunk-NC2V63EL.js.map