@floegence/floe-webapp-core 0.52.13 → 0.53.1

package/dist/surface.css

@@ -13,8 +13,8 @@
 /* Preblend quiet seams onto the carrying background. Opaque borders avoid an
  * extra blending path when native editors repaint their text and caret. */
 :root {
-  --floe-surface-edge: color-mix(in srgb, var(--border) 18%, var(--background));
-  --floe-surface-divider: color-mix(in srgb, var(--border) 12%, var(--background));
+  --floe-surface-edge: color-mix(in srgb, var(--foreground) 11.5%, var(--background));
+  --floe-surface-divider: color-mix(in srgb, var(--foreground) 8.5%, var(--background));
   --floe-surface-highlight: rgb(255 255 255 / 50%);
   --floe-surface-shade: rgb(0 0 0 / 12%);
 }
@@ -23,15 +23,9 @@
  * quiet seams; material and existing fills carry the grouping. High contrast
  * retains the original boundaries. Explicit rich Card variants stay independent. */
 @media (forced-colors: none) {
-  :root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light']) {
-    /* A uniform muted border keeps focus readable without a bright frame.
-     * Different colors per edge force a costlier native-editor raster path. */
-    --floe-input-focus-color: color-mix(in srgb, var(--muted-foreground) 88%, var(--card));
-  }
   :where(:root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light']))
     :is(
       .border-border,
-      .border-input,
       [class~='border-border/40'],
       [data-floe-surface],
       .workbench-hud,
@@ -40,6 +34,9 @@
     ):not(
       :where(
         [aria-invalid='true'],
+        .border-input,
+        [data-floe-input-surface],
+        [data-floe-input-surface] *,
         [data-floe-surface-part='tab'],
         [data-floe-card-variant]:not([data-floe-card-variant='default'])
       )
@@ -92,7 +89,9 @@
   }
 }
 :root.dark {
-  --floe-surface-highlight: rgb(255 255 255 / 4%);
+  --floe-surface-highlight: transparent;
+  --floe-surface-shadow-raised: 0 0 transparent;
+  --floe-surface-shadow-inset: 0 0 transparent;
   --floe-surface-shade: rgb(0 0 0 / 20%);
 }
 
@@ -132,10 +131,9 @@
 [data-floe-surface-style='soft-neumorphic'] [data-floe-surface='floating'] {
   --floe-surface-decoration: var(
     --floe-surface-shadow-floating,
-    0 8px 18px -8px var(--floe-surface-shade),
-    inset 0 1px 1px var(--floe-surface-highlight)
+    var(--floe-window-shadow)
   );
-  background-color: var(--card);
+  background-color: var(--popover);
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }
@@ -284,17 +282,17 @@
       [data-floe-surface-part='choice']:not([data-floe-selected='true']):hover:not(
         :has(:disabled)
       ) {
-      background-color: color-mix(in srgb, var(--primary) 3%, var(--card));
+      background-color: color-mix(in srgb, var(--foreground) 4%, var(--card));
     }
     & [data-floe-surface-part='choice'][data-floe-selected='true'] {
-      background-color: color-mix(in srgb, var(--primary) 8%, var(--card));
+      background-color: var(--accent);
     }
     & [data-floe-choice-variant='button'][data-floe-selected='true'] {
       color: var(--foreground);
     }
     & [data-floe-surface-part='segment'][aria-checked='true'],
     & [data-floe-surface-part='tab'][aria-selected='true'] {
-      background-color: color-mix(in srgb, var(--primary) 8%, var(--card));
+      background-color: var(--accent);
       color: var(--foreground);
     }
     & [data-floe-surface-part='segment'][aria-checked='false'] {
@@ -380,19 +378,10 @@
       box-shadow: var(--floe-surface-decoration);
     }
   }
-  :where(
-    :root.dark[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
-  ) {
-    /* A solid carrying plane avoids repainting a large gradient behind editors. */
-    & [data-floe-card-variant='default'][data-floe-surface='raised'] {
-      background-color: color-mix(in srgb, var(--card) 98%, white);
-    }
-    & [data-floe-surface='floating']:not(.workbench-widget) {
-      background-color: color-mix(in srgb, var(--card) 94%, white);
-    }
+  :where(:root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])) {
     & [data-floe-input-surface],
-    & :is(input, textarea)[data-floe-surface='inset'] {
-      background-color: color-mix(in srgb, var(--card) 94%, black);
+    & :is(input, textarea, select)[data-floe-surface='inset'] {
+      background-color: color-mix(in srgb, var(--card) 50%, var(--background));
     }
   }
 }
@@ -409,7 +398,7 @@
 @media (forced-colors: none) {
   :root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
     [data-floe-floating-window-surface='true'][data-floe-surface='floating'] {
-    --floe-window-radius: 10px;
+    --floe-window-radius: var(--floe-radius-floating);
     background: var(--floe-window-background);
     color: var(--floe-window-foreground);
     --muted-foreground: var(--floe-window-muted-foreground);
@@ -426,20 +415,6 @@
       transition: none;
       border-radius: calc(var(--floe-window-radius) - 1px) calc(var(--floe-window-radius) - 1px) 0 0;
     }
-    & [data-floe-floating-window-titlebar='true']::before {
-      content: '';
-      position: absolute;
-      inset: 0 14px auto;
-      height: 1px;
-      background: linear-gradient(
-        90deg,
-        transparent,
-        color-mix(in srgb, var(--ring) 42%, transparent) 50%,
-        transparent
-      );
-      opacity: 0.72;
-      pointer-events: none;
-    }
     &[data-floe-floating-window-state='inactive'] > [data-floe-floating-window-titlebar='true'] {
       background: color-mix(in srgb, var(--floe-window-titlebar-background) 50%, var(--floe-window-background));
       background-image: none;

package/dist/themes/dark.css

@@ -1,127 +1,73 @@
-/* Dark theme - Blue-black ink */
+/* Generated from classicSemanticTokens.ts. Do not edit by hand. */
 .dark {
   color-scheme: dark;
-
-  /* Independent non-modal window material. */
-  --floe-window-background: color-mix(in srgb, var(--card) 90%, white);
+  --floe-window-background: var(--popover);
   --floe-window-foreground: var(--foreground);
   --floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
-  --floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
+  --floe-window-titlebar-background: var(--popover);
   --floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
   --floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
-
-
-  /* Base - Blue-black ink */
-  --background: hsl(222 30% 8%);
-  --foreground: hsl(210 20% 98%);
-
-  /* Primary - Light text */
-  --primary: hsl(210 20% 98%);
-  --primary-foreground: hsl(222 30% 10%);
-
-  /* Secondary */
-  --secondary: hsl(220 18% 15%);
-  --secondary-foreground: hsl(210 20% 98%);
-
-  /* Muted — hover/inactive fill, one step above card */
-  --muted: hsl(220 16% 16%);
-  --muted-foreground: hsl(215 16% 56%);
-
-  /* Accent — selected/active fill, one step above muted */
-  --accent: hsl(220 14% 19%);
-  --accent-foreground: hsl(210 20% 98%);
-
-  /* Border */
-  --border: hsl(220 16% 20%);
-  --input: hsl(220 18% 15%);
-  --ring: hsl(215 25% 70%);
-  /* chrome-border: hairline seams between shell chrome panels */
-  --chrome-border: hsl(220 16% 13%);
-  /* glow: dedicated accent color for glow/bloom effects.
-     --primary in dark mode is near-white (hsl 210 20% 98%), which creates
-     an overpowering white bloom when used as a glow source. This token
-     maps to a specific blue that reads as luminous without burning. */
-  --glow: hsl(217 65% 52%);
+  --background: #202223;
+  --foreground: #e5e6e2;
+  --primary: #bccbb8;
+  --primary-foreground: #20291f;
+  --secondary: #303435;
+  --secondary-foreground: #b8bdb8;
+  --muted: #343738;
+  --muted-foreground: #9da4a0;
+  --accent: #353a38;
+  --accent-foreground: #e5e6e2;
+  --border: #3e4142;
+  --input: #6d7571;
+  --ring: #acbdb3;
+  --chrome-border: #292c2b;
   --top-bar-border: var(--chrome-border);
   --activity-bar-border: var(--chrome-border);
   --bottom-bar-border: var(--chrome-border);
   --terminal-panel-border: var(--chrome-border);
-
-  /* Card — one clear step above sidebar */
-  --card: hsl(220 20% 13%);
-  --card-foreground: hsl(210 20% 98%);
-
-  /* Popover — floating layer, one step above card */
-  --popover: hsl(220 18% 15%);
-  --popover-foreground: hsl(210 20% 98%);
-
-  /* Status colors */
-  --success: oklch(0.72 0.19 150);
-  --success-foreground: hsl(222 30% 10%);
-  --warning: oklch(0.82 0.16 80);
-  --warning-foreground: hsl(222 30% 10%);
+  --card: #282b2c;
+  --card-foreground: #e5e6e2;
+  --popover: #2b2e2f;
+  --popover-foreground: #e5e6e2;
+  --success: #a1b69e;
+  --success-foreground: #20291f;
+  --warning: #c8af84;
+  --warning-foreground: #20291f;
   --error: oklch(0.7 0.22 25);
-  --error-foreground: hsl(0 0% 100%);
+  --error-foreground: #202223;
   --info: oklch(0.7 0.15 250);
-  --info-foreground: hsl(0 0% 100%);
-
-  /* Highlight block accents - deeper than shared status tokens */
+  --info-foreground: #202223;
   --highlight-block-info-accent: oklch(0.62 0.12 240);
   --highlight-block-warning-accent: oklch(0.7 0.14 65);
   --highlight-block-success-accent: oklch(0.62 0.12 155);
   --highlight-block-error-accent: oklch(0.6 0.14 25);
   --highlight-block-note-accent: oklch(0.62 0.14 285);
   --highlight-block-tip-accent: oklch(0.6 0.1 175);
-
-  /* Sidebar — distinct structural plane between background and card */
-  --sidebar: hsl(221 22% 11%);
-  --sidebar-foreground: hsl(210 20% 98%);
-  --sidebar-primary: hsl(217 80% 55%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(220 14% 19%);
-  --sidebar-accent-foreground: hsl(210 20% 98%);
-  --sidebar-border: hsl(220 16% 13%);
-  --sidebar-ring: hsl(217 80% 55%);
-
-  /* Activity bar — deepest surface, anchors the left edge of the layout */
-  --activity-bar: hsl(222 28% 7%);
-  --activity-bar-foreground: hsl(215 16% 50%);
-  --activity-bar-foreground-active: hsl(210 20% 96%);
-  --activity-bar-badge: hsl(217 80% 55%);
-  --activity-bar-badge-foreground: hsl(0 0% 100%);
-
-  /* Terminal */
+  --sidebar: #1b1d1e;
+  --sidebar-foreground: #e5e6e2;
+  --sidebar-primary: #bccbb8;
+  --sidebar-primary-foreground: #20291f;
+  --sidebar-accent: #353a38;
+  --sidebar-accent-foreground: #e5e6e2;
+  --sidebar-border: #292c2b;
+  --sidebar-ring: #acbdb3;
+  --activity-bar: #17191a;
+  --activity-bar-foreground: #9da4a0;
+  --activity-bar-foreground-active: #e5e6e2;
+  --activity-bar-badge: #bccbb8;
+  --activity-bar-badge-foreground: #20291f;
   --terminal-background: hsl(222 32% 7%);
   --terminal-foreground: hsl(210 15% 92%);
-
-  /* Chart colors */
   --chart-1: hsl(210 20% 98%);
   --chart-2: hsl(215 20% 60%);
   --chart-3: oklch(0.7 0.15 250);
   --chart-4: oklch(0.72 0.19 150);
   --chart-5: oklch(0.82 0.16 80);
-
-  /* ============================================
-     Selection Colors
-     ============================================
-     Design notes:
-     1. Default selection: blue background + white text
-     2. Selection on primary backgrounds: must contrast with the primary color
-        - In dark theme, --primary is near-white, so we use a darker selection (deep blue)
-     3. Code selection: fixed bright blue, since code blocks always use a dark background
-  */
-
-  /* Default selection */
   --selection-bg: hsl(215 70% 50%);
   --selection-fg: hsl(0 0% 100%);
-
-  /* Selection on primary backgrounds
-     In dark theme, primary is near-white (hsl(210 20% 98%)),
-     so we use a darker selection to keep contrast. */
   --selection-on-primary-bg: hsl(215 80% 35%);
   --selection-on-primary-fg: hsl(0 0% 100%);
-
-  /* Code-block selection (code blocks use a dark background: #0d1117) */
   --selection-code-bg: hsl(212 100% 67%);
   --selection-code-fg: hsl(220 20% 8%);
+  --glow: hsl(217 65% 52%);
 }

package/dist/themes/light.css

@@ -1,126 +1,74 @@
-/* Light theme - Redeven warm paper aesthetic */
+/* Generated from classicSemanticTokens.ts. Do not edit by hand. */
 :root,
 .light {
   color-scheme: light;
-
-  /* Independent non-modal window material. */
-  --floe-window-background: color-mix(in srgb, var(--card) 35%, white);
+  --floe-window-background: var(--popover);
   --floe-window-foreground: var(--foreground);
   --floe-window-muted-foreground: var(--muted-foreground);
-  --floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
+  --floe-window-titlebar-background: var(--popover);
   --floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
   --floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
-
-
-  /* Base - Warm paper and blue-black ink */
-  --background: hsl(34 24% 94%);
-  --foreground: hsl(214 26% 17%);
-
-  /* Primary - Deep blue-black ink */
-  --primary: hsl(214 26% 17%);
-  --primary-foreground: hsl(36 100% 99%);
-
-  /* Secondary - Warm muted */
-  --secondary: hsl(36 15% 94%);
-  --secondary-foreground: hsl(214 25% 25%);
-
-  /* Muted - Warm gray */
-  --muted: hsl(36 15% 94%);
-  --muted-foreground: hsl(215 16% 42%);
-
-  /* Accent - Subtle warm highlight, darker than sidebar for visible hover/active fills */
-  --accent: hsl(34 9% 85%);
-  --accent-foreground: hsl(214 26% 17%);
-
-  /* Border - Warm gray */
-  --border: hsl(35 13% 82%);
-  --input: hsl(37 15% 76%);
-  --ring: hsl(214 26% 17%);
-  --chrome-border: hsl(33 11% 84%);
+  --background: #f8f7f2;
+  --foreground: #303a34;
+  --primary: #465a43;
+  --primary-foreground: #f8faf5;
+  --secondary: #eeefe8;
+  --secondary-foreground: #545f56;
+  --muted: #e9ece3;
+  --muted-foreground: #5e695c;
+  --accent: #e0e7da;
+  --accent-foreground: #303a34;
+  --border: #d4d8cd;
+  --input: #858e80;
+  --ring: #56694f;
+  --chrome-border: #dedfd7;
   --top-bar-border: var(--chrome-border);
   --activity-bar-border: var(--chrome-border);
   --bottom-bar-border: var(--chrome-border);
   --terminal-panel-border: var(--chrome-border);
-
-  /* glow: in light mode primary is dark ink — works well as a depth/shadow glow accent */
-  --glow: var(--primary);
-
-  /* Card */
-  --card: hsl(36 100% 99%);
-  --card-foreground: hsl(214 26% 17%);
-
-  /* Popover */
-  --popover: hsl(36 100% 99%);
-  --popover-foreground: hsl(214 26% 17%);
-
-  /* Status colors */
-  --success: oklch(0.68 0.16 150);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(38 92% 50%);
-  --warning-foreground: hsl(214 26% 17%);
-  --error: oklch(0.65 0.2 25);
-  --error-foreground: hsl(0 0% 100%);
-  --info: hsl(217 91% 60%);
-  --info-foreground: hsl(0 0% 100%);
-
-  /* Highlight block accents - deeper than shared status tokens */
+  --card: #fcfbf7;
+  --card-foreground: #303a34;
+  --popover: #fffefa;
+  --popover-foreground: #303a34;
+  --success: #496744;
+  --success-foreground: #f8faf5;
+  --warning: #856828;
+  --warning-foreground: #fffefa;
+  --error: #b74744;
+  --error-foreground: #fffefa;
+  --info: #2671d9;
+  --info-foreground: #fffefa;
   --highlight-block-info-accent: oklch(0.52 0.14 245);
   --highlight-block-warning-accent: oklch(0.62 0.16 65);
   --highlight-block-success-accent: oklch(0.55 0.14 155);
   --highlight-block-error-accent: oklch(0.55 0.16 25);
   --highlight-block-note-accent: oklch(0.52 0.16 285);
   --highlight-block-tip-accent: oklch(0.52 0.12 175);
-
-  /* Sidebar — distinct from background, slightly deeper */
-  --sidebar: hsl(34 13% 90%);
-  --sidebar-foreground: hsl(214 26% 17%);
-  --sidebar-primary: hsl(214 26% 17%);
-  --sidebar-primary-foreground: hsl(36 100% 99%);
-  --sidebar-accent: hsl(34 9% 84%);
-  --sidebar-accent-foreground: hsl(214 26% 17%);
-  --sidebar-border: hsl(33 9% 82%);
-  --sidebar-ring: hsl(214 26% 17%);
-
-  /* Activity bar — deepest light-mode surface, clearly separate from sidebar.
-     L90% keeps --muted-foreground contrast ratio ≥ 4.5 on this surface (WCAG AA). */
-  --activity-bar: hsl(34 11% 90%);
-  --activity-bar-foreground: hsl(215 14% 46%);
-  --activity-bar-foreground-active: hsl(214 26% 17%);
-  --activity-bar-badge: hsl(214 26% 17%);
-  --activity-bar-badge-foreground: hsl(36 100% 99%);
-
-  /* Terminal */
+  --sidebar: #efeee7;
+  --sidebar-foreground: #303a34;
+  --sidebar-primary: #465a43;
+  --sidebar-primary-foreground: #f8faf5;
+  --sidebar-accent: #e0e7da;
+  --sidebar-accent-foreground: #303a34;
+  --sidebar-border: #dedfd7;
+  --sidebar-ring: #56694f;
+  --activity-bar: #eeede6;
+  --activity-bar-foreground: #5e695c;
+  --activity-bar-foreground-active: #303a34;
+  --activity-bar-badge: #465a43;
+  --activity-bar-badge-foreground: #f8faf5;
   --terminal-background: hsl(214 26% 17%);
   --terminal-foreground: hsl(0 0% 92%);
-
-  /* Chart colors */
   --chart-1: hsl(214 26% 17%);
   --chart-2: hsl(215 16% 42%);
   --chart-3: hsl(217 91% 60%);
   --chart-4: oklch(0.68 0.16 150);
   --chart-5: hsl(38 92% 50%);
-
-  /* ============================================
-     Selection Colors
-     ============================================
-     Design notes:
-     1. Default selection: blue background + white text (works for most cases)
-     2. Selection on primary backgrounds: must contrast with the primary color
-        - In light theme, --primary is dark, so we use a bright highlight (yellow)
-     3. Code selection: fixed bright blue, since code blocks always use a dark background
-  */
-
-  /* Default selection */
   --selection-bg: hsl(217 91% 60%);
   --selection-fg: hsl(0 0% 100%);
-
-  /* Selection on primary backgrounds
-     In light theme, primary is dark (hsl(214 26% 17%)),
-     so we use a warm amber selection to keep contrast. */
   --selection-on-primary-bg: hsl(38 92% 50%);
   --selection-on-primary-fg: hsl(214 26% 17%);
-
-  /* Code-block selection (code blocks use a dark background: #0d1117) */
   --selection-code-bg: hsl(212 100% 67%);
   --selection-code-fg: hsl(220 20% 8%);
+  --glow: #465a43;
 }

package/dist/themes/shell-presets.generated.css

@@ -1433,7 +1433,7 @@
   --secondary: #2c2c30;
   --secondary-foreground: #e0e0e4;
   --muted: #2c2c30;
-  --muted-foreground: #909098;
+  --muted-foreground: #93939b;
   --accent: #2c2c30;
   --accent-foreground: #e0e0e4;
   --border: #323236;
@@ -1471,7 +1471,7 @@
   --sidebar-border: #323236;
   --sidebar-ring: #e0e0e4;
   --activity-bar: #141416;
-  --activity-bar-foreground: #909098;
+  --activity-bar-foreground: #93939b;
   --activity-bar-foreground-active: #e0e0e4;
   --activity-bar-badge: #e0e0e4;
   --activity-bar-badge-foreground: #1a1a1c;
@@ -1509,7 +1509,7 @@
   --accent-foreground: #f2f2f7;
   --border: #38383a;
   --input: #888888;
-  --ring: #0070e0;
+  --ring: #0a84ff;
   --chrome-border: #38383a;
   --top-bar-border: #38383a;
   --activity-bar-border: #38383a;
@@ -1540,7 +1540,7 @@
   --sidebar-accent: #3a3a3c;
   --sidebar-accent-foreground: #f2f2f7;
   --sidebar-border: #38383a;
-  --sidebar-ring: #0070e0;
+  --sidebar-ring: #0a84ff;
   --activity-bar: #242426;
   --activity-bar-foreground: #aeaeb2;
   --activity-bar-foreground-active: #f2f2f7;
@@ -1561,3 +1561,145 @@
   --selection-code-fg: #08111d;
   --glow: #0070e0;
 }
+:root[data-floe-shell-theme='porcelain-light'] {
+  --floe-window-background: color-mix(in srgb, var(--card) 35%, white);
+  --floe-window-foreground: var(--foreground);
+  --floe-window-muted-foreground: var(--muted-foreground);
+  --floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground));
+  --floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
+  --floe-window-shadow: 0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%);
+  --background: #f4f1ed;
+  --foreground: #202a37;
+  --primary: #202a37;
+  --primary-foreground: #fffdfa;
+  --secondary: #f1efec;
+  --secondary-foreground: #202a37;
+  --muted: #f1efec;
+  --muted-foreground: #576579;
+  --accent: #e4e1dd;
+  --accent-foreground: #202a37;
+  --border: #d8d3cc;
+  --input: #828891;
+  --ring: #202a37;
+  --chrome-border: #d8d3cc;
+  --top-bar-border: #d8d3cc;
+  --activity-bar-border: #d8d3cc;
+  --bottom-bar-border: #d8d3cc;
+  --terminal-panel-border: #d8d3cc;
+  --card: #fffdfa;
+  --card-foreground: #202a37;
+  --popover: #fffdfa;
+  --popover-foreground: #202a37;
+  --success: #287a4b;
+  --success-foreground: #ffffff;
+  --warning: #835800;
+  --warning-foreground: #ffffff;
+  --error: #b42318;
+  --error-foreground: #ffffff;
+  --info: #245b9b;
+  --info-foreground: #ffffff;
+  --highlight-block-info-accent: #245b9b;
+  --highlight-block-warning-accent: #835800;
+  --highlight-block-success-accent: #287a4b;
+  --highlight-block-error-accent: #b42318;
+  --highlight-block-note-accent: #6847a0;
+  --highlight-block-tip-accent: #1e6f73;
+  --sidebar: #eeece9;
+  --sidebar-foreground: #202a37;
+  --sidebar-primary: #202a37;
+  --sidebar-primary-foreground: #fffdfa;
+  --sidebar-accent: #e4e1dd;
+  --sidebar-accent-foreground: #202a37;
+  --sidebar-border: #d8d3cc;
+  --sidebar-ring: #202a37;
+  --activity-bar: #eeece9;
+  --activity-bar-foreground: #576579;
+  --activity-bar-foreground-active: #202a37;
+  --activity-bar-badge: #202a37;
+  --activity-bar-badge-foreground: #fffdfa;
+  --terminal-background: #202a37;
+  --terminal-foreground: #ebebeb;
+  --chart-1: #202a37;
+  --chart-2: #5a687c;
+  --chart-3: #2671d9;
+  --chart-4: #287a4b;
+  --chart-5: #835800;
+  --selection-bg: #2671d9;
+  --selection-fg: #ffffff;
+  --selection-on-primary-bg: #f4c95d;
+  --selection-on-primary-fg: #243447;
+  --selection-code-bg: #58a6ff;
+  --selection-code-fg: #08111d;
+  --glow: #202a37;
+}
+:root[data-floe-shell-theme='porcelain-dark'] {
+  --floe-window-background: color-mix(in srgb, var(--card) 90%, white);
+  --floe-window-foreground: var(--foreground);
+  --floe-window-muted-foreground: color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground));
+  --floe-window-titlebar-background: color-mix(in srgb, var(--floe-window-background) 95%, white);
+  --floe-window-border: color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground));
+  --floe-window-shadow: 0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%);
+  --background: #20242a;
+  --foreground: #e6e3dd;
+  --primary: #bcc8d5;
+  --primary-foreground: #202a37;
+  --secondary: #343a43;
+  --secondary-foreground: #e6e3dd;
+  --muted: #343a43;
+  --muted-foreground: #a2abb8;
+  --accent: #343a43;
+  --accent-foreground: #e6e3dd;
+  --border: #3e444d;
+  --input: #7a8491;
+  --ring: #a8bcd0;
+  --chrome-border: #3e444d;
+  --top-bar-border: #3e444d;
+  --activity-bar-border: #3e444d;
+  --bottom-bar-border: #3e444d;
+  --terminal-panel-border: #3e444d;
+  --card: #292e35;
+  --card-foreground: #e6e3dd;
+  --popover: #292e35;
+  --popover-foreground: #e6e3dd;
+  --success: #72d39c;
+  --success-foreground: #07160e;
+  --warning: #f0c36a;
+  --warning-foreground: #1b1405;
+  --error: #ff8a82;
+  --error-foreground: #210706;
+  --info: #79b8ff;
+  --info-foreground: #061321;
+  --highlight-block-info-accent: #79b8ff;
+  --highlight-block-warning-accent: #f0c36a;
+  --highlight-block-success-accent: #72d39c;
+  --highlight-block-error-accent: #ff8a82;
+  --highlight-block-note-accent: #c19be8;
+  --highlight-block-tip-accent: #71c8c0;
+  --sidebar: #1c2026;
+  --sidebar-foreground: #e6e3dd;
+  --sidebar-primary: #bcc8d5;
+  --sidebar-primary-foreground: #202a37;
+  --sidebar-accent: #343a43;
+  --sidebar-accent-foreground: #e6e3dd;
+  --sidebar-border: #3e444d;
+  --sidebar-ring: #a8bcd0;
+  --activity-bar: #1c2026;
+  --activity-bar-foreground: #a2abb8;
+  --activity-bar-foreground-active: #e6e3dd;
+  --activity-bar-badge: #bcc8d5;
+  --activity-bar-badge-foreground: #202a37;
+  --terminal-background: #181c22;
+  --terminal-foreground: #e6e3dd;
+  --chart-1: #bcc8d5;
+  --chart-2: #79b8ff;
+  --chart-3: #c19be8;
+  --chart-4: #72d39c;
+  --chart-5: #f0c36a;
+  --selection-bg: #3b6592;
+  --selection-fg: #ffffff;
+  --selection-on-primary-bg: #20242a;
+  --selection-on-primary-fg: #e6e3dd;
+  --selection-code-bg: #58a6ff;
+  --selection-code-fg: #08111d;
+  --glow: #3b6592;
+}

package/dist/utils/index.d.ts

@@ -8,3 +8,4 @@ export * from './gridCollision';
 export * from './gridLayout';
 export * from './hotInteraction';
 export * from './uiFirstSelection';
+export { secureRandomUUID } from './secureRandom';

package/dist/utils/secureRandom.d.ts

@@ -0,0 +1,2 @@
+/** RFC 9562 UUIDv4 using the CSPRNG available on both HTTP and HTTPS origins. */
+export declare function secureRandomUUID(): string;

package/dist/utils/secureRandom.js

@@ -0,0 +1,11 @@
+function a() {
+  if (typeof globalThis.crypto?.getRandomValues != "function")
+    throw new Error("Cryptographically secure random values are unavailable");
+  const e = globalThis.crypto.getRandomValues(new Uint8Array(16));
+  e[6] = e[6] & 15 | 64, e[8] = e[8] & 63 | 128;
+  const r = Array.from(e, (o) => o.toString(16).padStart(2, "0")).join("");
+  return `${r.slice(0, 8)}-${r.slice(8, 12)}-${r.slice(12, 16)}-${r.slice(16, 20)}-${r.slice(20)}`;
+}
+export {
+  a as secureRandomUUID
+};

package/dist/utils/secureRandom.test.d.ts

@@ -0,0 +1 @@
+export {};