@pstdio/ui 0.22.0 → 0.24.1

package/dist/{theme-B-l5_a6F.js → theme-Ca-KyNoi.js}

@@ -1,7 +1,132 @@
-import { defineSlotRecipe as t, defineRecipe as c, defaultConfig as d, defineLayerStyles as F, defineTextStyles as k, createSystem as C, defineConfig as E } from "@chakra-ui/react";
-import { alertAnatomy as w, colorPickerAnatomy as A, dialogAnatomy as z, drawerAnatomy as D, fieldsetAnatomy as W, menuAnatomy as R, numberInputAnatomy as B, popoverAnatomy as H, switchAnatomy as T, tabsAnatomy as L, timelineAnatomy as V, tooltipAnatomy as I } from "@chakra-ui/react/anatomy";
-import { progressCircleSlotRecipe as h } from "@chakra-ui/react/theme";
-const X = {
+import { defineSlotRecipe as t, defineRecipe as c, defaultConfig as d, defineLayerStyles as k, defineTextStyles as C, createSystem as F, defineConfig as E } from "@chakra-ui/react";
+import { alertAnatomy as W, colorPickerAnatomy as z, dialogAnatomy as D, drawerAnatomy as A, fieldsetAnatomy as R, menuAnatomy as B, numberInputAnatomy as H, popoverAnatomy as T, switchAnatomy as I, tabsAnatomy as L, timelineAnatomy as P, tooltipAnatomy as V } from "@chakra-ui/react/anatomy";
+import { progressCircleSlotRecipe as v } from "@chakra-ui/react/theme";
+const X = t({
+  className: "ps-window-title-bar",
+  slots: ["root", "content"],
+  base: {
+    root: {
+      position: "relative",
+      flexShrink: 0,
+      width: "full",
+      height: "window-title-bar",
+      bg: "bg.subtle",
+      color: "fg",
+      borderBottomWidth: "1px",
+      borderColor: "border",
+      userSelect: "none",
+      WebkitAppRegion: "drag"
+    },
+    content: {
+      display: "flex",
+      alignItems: "center",
+      gap: "xs",
+      height: "full",
+      minWidth: 0,
+      paddingInline: "compact",
+      "& button, & a, & input, & [role=tab]": {
+        WebkitAppRegion: "no-drag"
+      }
+    }
+  },
+  variants: {
+    controls: {
+      mac: {
+        content: {
+          paddingInlineStart: "window-controls-mac"
+        }
+      },
+      overlay: {
+        content: {
+          marginLeft: "env(titlebar-area-x, 0px)",
+          width: "env(titlebar-area-width, 100%)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    controls: "overlay"
+  }
+}), M = t({
+  className: "ps-window-tabs",
+  slots: ["list", "tab", "trigger", "label", "close"],
+  base: {
+    list: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2xs",
+      minWidth: 0,
+      overflowX: "auto",
+      scrollbarWidth: "none"
+    },
+    tab: {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: 0,
+      height: "window-tab",
+      maxWidth: "window-tab-max",
+      borderRadius: "xs",
+      borderWidth: "1px",
+      borderColor: "border",
+      color: "fg.muted",
+      bg: "transparent",
+      _selected: {
+        bg: "bg.muted",
+        color: "fg"
+      },
+      _hover: {
+        bg: "bg.hover",
+        color: "fg"
+      }
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      gap: "window-tab-gap",
+      minWidth: 0,
+      height: "full",
+      paddingInlineStart: "compact",
+      paddingInlineEnd: "window-tab-gap",
+      cursor: "pointer",
+      textStyle: "label/S/medium",
+      borderRadius: "xs",
+      focusVisibleRing: "inside",
+      WebkitAppRegion: "no-drag",
+      _icon: {
+        width: "icon-xs",
+        height: "icon-xs",
+        flexShrink: 0
+      }
+    },
+    label: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    close: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "window-tab-close",
+      height: "window-tab-close",
+      marginInlineEnd: "compact",
+      color: "fg.muted",
+      borderRadius: "2xs",
+      cursor: "pointer",
+      focusVisibleRing: "outside",
+      WebkitAppRegion: "no-drag",
+      _hover: {
+        bg: "bg.active",
+        color: "fg"
+      },
+      _icon: {
+        width: "full",
+        height: "full"
+      }
+    }
+  }
+}), j = {
   "editor.background": ["colors.bg", "colors.bg.code"],
   "editor.foreground": ["colors.fg"],
   "editor.lineHighlightBackground": ["colors.bg.hover"],
@@ -34,11 +159,11 @@ const X = {
   descriptionForeground: ["colors.fg.muted"],
   disabledForeground: ["colors.fg.subtle"],
   border: ["colors.border", "colors.border.subtle"]
-}, M = (o) => `colors.vscode.${o}`, P = (o) => o.replace(/^#/, ""), j = (o) => {
+}, O = (o) => `colors.vscode.${o}`, U = (o) => o.replace(/^#/, ""), N = (o) => {
   const l = (o.theme.tokenColors ?? []).flatMap((r) => (Array.isArray(r.scope) ? r.scope : r.scope ? [r.scope] : []).map((s) => ({
     token: s,
     ...r.settings?.foreground ? {
-      foreground: P(r.settings.foreground)
+      foreground: U(r.settings.foreground)
     } : {},
     ...r.settings?.fontStyle ? {
       fontStyle: r.settings.fontStyle
@@ -50,11 +175,11 @@ const X = {
     rules: l,
     colors: o.theme.colors ?? {}
   };
-}, ro = (o) => {
+}, co = (o) => {
   const l = {}, r = o.theme.colors ?? {};
   for (const [n, s] of Object.entries(r))
-    l[M(n)] = s;
-  for (const [n, s] of Object.entries(X)) {
+    l[O(n)] = s;
+  for (const [n, s] of Object.entries(j)) {
     const g = r[n];
     if (g)
       for (const m of s) l[m] = g;
@@ -63,12 +188,12 @@ const X = {
     id: o.id,
     mode: o.mode,
     tokens: l,
-    monacoTheme: j({
+    monacoTheme: N({
       mode: o.mode,
       theme: o.theme
     })
   };
-}, U = {
+}, Y = {
   "*::selection": {
     bg: {
       base: "bg.accent-secondary.blue-medium",
@@ -129,7 +254,7 @@ const X = {
       fontSize: "1.5rem"
     }
   }
-}, O = {
+}, G = {
   DEFAULT: {
     value: "#0A0D15"
   },
@@ -178,7 +303,7 @@ const X = {
   1e3: {
     value: "#000000"
   }
-}, Y = {
+}, $ = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -212,7 +337,7 @@ const X = {
   900: {
     value: "#002862"
   }
-}, $ = {
+}, q = {
   DEFAULT: {
     value: "#3A4BE4"
   },
@@ -249,7 +374,7 @@ const X = {
   900: {
     value: "#0A125A"
   }
-}, N = {
+}, K = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -286,7 +411,7 @@ const X = {
   900: {
     value: "#520659"
   }
-}, q = {
+}, J = {
   DEFAULT: {
     value: "#FBD8CE"
   },
@@ -320,7 +445,7 @@ const X = {
   900: {
     value: "#522923"
   }
-}, G = {
+}, Q = {
   DEFAULT: {
     value: "#FF3232"
   },
@@ -354,7 +479,7 @@ const X = {
   900: {
     value: "#580707"
   }
-}, K = {
+}, Z = {
   DEFAULT: {
     value: "#F78C25"
   },
@@ -388,7 +513,7 @@ const X = {
   900: {
     value: "#552107"
   }
-}, J = {
+}, ee = {
   DEFAULT: {
     value: "#FFD643"
   },
@@ -428,7 +553,7 @@ const X = {
   900: {
     value: "#644E00"
   }
-}, Q = {
+}, oe = {
   DEFAULT: {
     value: "#2DD665"
   },
@@ -462,7 +587,7 @@ const X = {
   900: {
     value: "#003110"
   }
-}, Z = {
+}, re = {
   DEFAULT: {
     value: "#3EECC4"
   },
@@ -496,7 +621,7 @@ const X = {
   900: {
     value: "#024F3D"
   }
-}, ee = {
+}, le = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -530,7 +655,7 @@ const X = {
   900: {
     value: "#005B73"
   }
-}, oe = {
+}, te = {
   DEFAULT: {
     value: "#8B47FF"
   },
@@ -564,7 +689,7 @@ const X = {
   900: {
     value: "#1E0050"
   }
-}, re = {
+}, ae = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -598,7 +723,7 @@ const X = {
   900: {
     value: "#E8CECE"
   }
-}, le = {
+}, ie = {
   50: {
     value: "#FCFDFC"
   },
@@ -641,30 +766,64 @@ const X = {
   950: {
     value: "#10141B"
   }
-}, te = {
+}, ne = {
   100: {
     value: "#D3ECEE"
   },
   200: {
     value: "#B3DEE2"
   }
-}, ae = {
-  sand: re,
-  blacks: O,
-  blue: Y,
-  sapphire: $,
-  pink: N,
-  peach: q,
-  red: G,
-  orange: K,
-  yellow: J,
-  green: Q,
-  teal: Z,
-  cyan: ee,
-  purple: oe,
-  neutral: le,
-  mint: te
-}, ie = {
+}, se = {
+  windowControl: {
+    close: {
+      value: "#FF5F57"
+    },
+    minimize: {
+      value: "#FEBC2E"
+    },
+    zoom: {
+      value: "#28C840"
+    }
+  },
+  illustration: {
+    desktop: {
+      value: "#FF6B1A"
+    },
+    page: {
+      value: "#29ABE2"
+    },
+    command: {
+      value: "#FBB040"
+    },
+    editor: {
+      value: "#29ABE2"
+    },
+    skill: {
+      value: "#E6357F"
+    },
+    hook: {
+      value: "#E6357F"
+    },
+    automation: {
+      value: "#F7931E"
+    }
+  },
+  sand: ae,
+  blacks: G,
+  blue: $,
+  sapphire: q,
+  pink: K,
+  peach: J,
+  red: Q,
+  orange: Z,
+  yellow: ee,
+  green: oe,
+  teal: re,
+  cyan: le,
+  purple: te,
+  neutral: ie,
+  mint: ne
+}, de = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -680,7 +839,7 @@ const X = {
   body: {
     value: "Inter, sans-serif"
   }
-}, ne = {
+}, ce = {
   "2xs": {
     value: "0.5rem"
   },
@@ -749,7 +908,7 @@ const X = {
     value: "1.25rem"
   }
   // 20px
-}, se = {
+}, ue = {
   regular: {
     value: 400
   },
@@ -793,7 +952,13 @@ const X = {
   1600: "8rem",
   // 128px
   2e3: "10rem"
-}, de = {
+}, be = {
+  "window-tab-gap": {
+    value: "0.4375rem"
+  },
+  "window-controls-mac": {
+    value: "4.875rem"
+  },
   none: {
     value: "0"
   },
@@ -841,8 +1006,29 @@ const X = {
   },
   "5xl": {
     value: e[1600]
+  },
+  "panel-gap": {
+    value: e[50]
   }
-}, ce = {
+}, ge = {
+  "panel-gap": {
+    value: e[50]
+  },
+  "window-title-bar": {
+    value: "2.75rem"
+  },
+  "window-tab": {
+    value: "1.75rem"
+  },
+  "window-tab-close": {
+    value: "0.8125rem"
+  },
+  "window-tab-max": {
+    value: "15rem"
+  },
+  "mobile-titlebar": {
+    value: "3.25rem"
+  },
   "collection-row": {
     value: "2.125rem"
   },
@@ -915,11 +1101,11 @@ const X = {
   "view-subheader": {
     value: "2.25rem"
   }
-}, ue = {
+}, me = {
   selection: {
     value: "0.09375rem"
   }
-}, be = {
+}, pe = {
   none: {
     value: "0"
   },
@@ -947,8 +1133,8 @@ const X = {
   full: {
     value: "100%"
   }
-}, ge = t({
-  slots: w.keys(),
+}, he = t({
+  slots: W.keys(),
   base: {
     root: {
       px: "xs",
@@ -1020,7 +1206,7 @@ const X = {
       }
     }
   }]
-}), me = c({
+}), ve = c({
   className: "chakra-badge",
   base: {
     display: "inline-flex",
@@ -1094,7 +1280,7 @@ const X = {
     variant: "subtle",
     size: "sm"
   }
-}), ve = c({
+}), fe = c({
   base: {
     borderRadius: "xs",
     transition: "all 0.1s ease-in-out",
@@ -1176,13 +1362,15 @@ const X = {
       },
       destructive: {
         color: "blacks.50",
-        bg: "red.500",
+        bg: "red.600",
         border: "none",
         _hover: {
-          bg: "red.600"
+          "&:not(:active, [data-active])": {
+            bg: "red.700"
+          }
         },
         _active: {
-          bg: "red.700"
+          bg: "red.800"
         }
       },
       outline: {
@@ -1310,8 +1498,8 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), u = "border.accent-light", he = t({
-  slots: A.keys(),
+}), u = "border.accent-light", xe = t({
+  slots: z.keys(),
   base: {
     control: {
       display: "flex",
@@ -1430,8 +1618,8 @@ const X = {
   defaultVariants: {
     size: "sm"
   }
-}), pe = t({
-  slots: z.keys(),
+}), ye = t({
+  slots: D.keys(),
   base: {
     content: {
       bg: "bg",
@@ -1441,12 +1629,12 @@ const X = {
       overflow: "hidden"
     }
   }
-}), fe = c({
+}), Se = c({
   base: {
     borderColor: "border.subtle"
   }
-}), xe = t({
-  slots: D.keys(),
+}), _e = t({
+  slots: A.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -1457,7 +1645,7 @@ const X = {
       bg: "bg"
     }
   }
-}), _e = t({
+}), we = t({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1556,14 +1744,14 @@ const X = {
       }
     }
   }
-}), ye = t({
-  slots: W.keys(),
+}), ke = t({
+  slots: R.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), a = "border.accent-light", Se = c({
+}), a = "border.accent-light", Ce = c({
   base: {
     px: "sm",
     borderRadius: "xs",
@@ -1763,103 +1951,767 @@ const X = {
     size: "md",
     variant: "raised"
   }
-}), ke = t({
-  slots: R.keys(),
+}), Ee = t({
+  slots: ["root", "window", "titlebar", "windowControls", "windowControl", "mobileTitlebar", "mobileNav", "sidebar", "status", "body", "main", "hero", "heroCopy", "heroNavigation", "tools", "download", "brandTab", "panelsScroll", "panelScroll"],
   base: {
-    itemGroupLabel: {
-      ml: "{2xs}",
-      textStyle: "label/S/regular",
-      fontWeight: "normal",
-      color: "fg.muted"
+    root: {
+      height: "100dvh",
+      position: "relative",
+      overflow: "hidden",
+      bg: "bg.subtle"
     },
-    item: {
+    window: {
+      display: "flex",
+      flexDirection: "column",
+      height: "full",
       width: "full",
-      minWidth: "0",
-      maxWidth: "full",
-      minH: "1.75rem",
-      h: "auto",
+      position: "relative",
+      bg: "bg.subtle",
+      color: "fg",
+      overflow: "hidden"
+    },
+    titlebar: {
+      height: "11",
+      flexShrink: 0,
+      gap: "xs",
+      px: "compact",
+      display: {
+        base: "none",
+        md: "flex"
+      },
+      alignItems: "center"
+    },
+    windowControls: {
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between",
       gap: "xs",
       px: "sm",
-      py: "2xs",
-      borderRadius: "0",
-      bg: "transparent",
-      color: "fg.menu-item.default",
-      textStyle: "label/S/regular",
+      flexShrink: 0
+    },
+    windowControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "icon-2xs",
+      height: "icon-2xs",
+      borderRadius: "full",
+      color: "blackAlpha.700",
       cursor: "pointer",
-      overflow: "hidden",
-      textAlign: "left",
-      textDecoration: "none",
-      _hover: {
-        bg: "bg.menu-item.hover"
+      "& svg": {
+        width: "2",
+        height: "2",
+        visibility: "hidden"
       },
-      _highlighted: {
-        bg: "bg.menu-item.hover"
+      "&[data-control=close]:not(:disabled)": {
+        bg: "windowControl.close"
       },
-      _focusVisible: {
-        bg: "bg.menu-item.focus"
+      "&[data-control=minimize]:not(:disabled)": {
+        bg: "windowControl.minimize"
       },
-      _checked: {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      "&[data-control=zoom]": {
+        bg: "windowControl.zoom"
       },
-      _selected: {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      _groupHover: {
+        "&:not(:disabled) svg": {
+          visibility: "visible"
+        }
       },
-      "&[aria-checked=true]": {
-        bg: "bg.menu-item.selected",
-        color: "fg"
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px",
+        "& svg": {
+          visibility: "visible"
+        }
       },
       _disabled: {
+        bg: "bg.muted",
         cursor: "not-allowed",
-        color: "fg.muted"
+        "& svg": {
+          visibility: "hidden"
+        }
       }
     },
-    itemIndicator: {
-      color: "fg"
+    mobileTitlebar: {
+      height: "mobile-titlebar",
+      flexShrink: 0,
+      gap: "xs",
+      px: "sm",
+      display: {
+        base: "flex",
+        md: "none"
+      },
+      textAlign: "left",
+      alignItems: "center"
     },
-    separator: {
-      my: "0",
-      borderColor: "border.subtle"
+    mobileNav: {
+      alignItems: "center",
+      height: "10",
+      flexShrink: 0,
+      width: "full",
+      gap: "xs",
+      px: "md",
+      display: {
+        base: "flex",
+        lg: "none"
+      }
     },
-    content: {
+    sidebar: {
       display: "flex",
       flexDirection: "column",
-      width: "17.5rem",
-      minWidth: "17.5rem",
-      maxWidth: "17.5rem",
-      gap: "0",
-      borderRadius: "xs",
-      p: "0",
-      px: "0",
-      py: "0",
-      bg: "bg",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "border",
-      textStyle: "label/M/regular"
-    }
-  }
-}), Ce = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", Ee = t({
-  slots: B.keys(),
-  base: {
-    root: {
-      position: "relative",
-      zIndex: "0",
-      isolation: "isolate",
-      boxShadow: "none",
-      "--number-input-border-color": Ce,
-      "&:is(:hover, [data-hover])": {
-        "--number-input-border-color": v
-      },
+      layerStyle: "panel",
+      height: "full",
+      width: "full",
+      flexShrink: 0,
+      gap: "2xs",
+      px: "xs",
+      py: "xs",
+      bg: "bg.subtle"
+    },
+    status: {
+      minHeight: "7",
+      flexShrink: 0,
+      flexWrap: "wrap",
+      gap: "xs",
+      rowGap: "2xs",
+      px: "xs",
+      color: "fg.muted"
+    },
+    body: {
+      display: "flex",
+      flex: 1,
+      minHeight: 0,
+      p: "panel-gap"
+    },
+    main: {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
+      position: "relative",
+      overflow: "hidden"
+    },
+    panelsScroll: {
+      "& > [data-part=viewport] > [data-part=content]": {
+        height: {
+          base: "auto",
+          lg: "full"
+        }
+      },
+      "& > [data-part=scrollbar]": {
+        display: {
+          base: "flex",
+          lg: "none"
+        }
+      }
+    },
+    panelScroll: {
+      display: {
+        base: "contents",
+        lg: "flex"
+      },
+      "& > [data-part=viewport]": {
+        display: {
+          base: "contents",
+          lg: "block"
+        }
+      },
+      "& > [data-part=viewport] > [data-part=content]": {
+        display: {
+          base: "contents",
+          lg: "block"
+        }
+      },
+      "& > [data-part=scrollbar]": {
+        display: {
+          base: "none",
+          lg: "flex"
+        }
+      }
+    },
+    hero: {
+      display: "flex",
+      flexDirection: "column",
+      layerStyle: "panel",
+      bg: "bg",
+      width: "full",
+      height: "full",
+      overflow: "hidden"
+    },
+    heroNavigation: {
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+      gap: "sm",
+      flexShrink: 0,
+      px: {
+        base: "lg",
+        xl: "3xl"
+      },
+      py: "lg",
+      "& [data-direction=next]": {
+        marginInlineStart: "auto",
+        flexDirection: "row-reverse"
+      }
+    },
+    heroCopy: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "full",
+      width: "full",
+      maxWidth: "2xl",
+      mx: "auto",
+      gap: "xl",
+      px: {
+        base: "lg",
+        xl: "3xl"
+      },
+      py: {
+        base: "xl",
+        xl: "4xl"
+      }
+    },
+    tools: {
+      layerStyle: "panel",
+      bg: "bg",
+      position: "relative",
+      overflow: "hidden",
+      width: "full",
+      height: "full",
+      minHeight: "0"
+    },
+    download: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      alignItems: "start",
+      width: "full"
+    },
+    brandTab: {
+      height: "7",
+      px: "compact",
+      gap: "xs",
+      borderRadius: "xs",
+      bg: "bg.hover",
+      color: "fg",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      flexShrink: 0,
+      cursor: "pointer"
+    }
+  },
+  variants: {
+    windowed: {
+      true: {
+        root: {
+          bg: "illustration.desktop"
+        },
+        window: {
+          height: "calc(100dvh - 12rem)",
+          width: "calc(100% - 15rem)",
+          mx: "7.5rem",
+          my: "6rem",
+          borderRadius: "lg",
+          boxShadow: "2xl"
+        },
+        titlebar: {
+          cursor: "grab",
+          _active: {
+            cursor: "grabbing"
+          }
+        }
+      }
+    }
+  }
+}), We = t({
+  slots: ["page", "section", "featureSection", "intro", "visual", "panels", "panel", "panelHeader", "panelBody", "blockGrid", "block", "blockSymbol", "blockMark", "composition"],
+  base: {
+    page: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      minWidth: 0,
+      gap: "4xl",
+      px: {
+        base: "lg",
+        md: "xl"
+      },
+      py: "3xl",
+      containerType: "inline-size"
+    },
+    section: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "lg",
+      width: "full",
+      minWidth: 0
+    },
+    featureSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xl",
+      width: "full",
+      minWidth: 0,
+      pt: "xl",
+      pb: "xl"
+    },
+    intro: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      maxWidth: "3xl"
+    },
+    visual: {
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      p: "xs",
+      width: "full",
+      minWidth: 0
+    },
+    panels: {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      gap: "panel-gap",
+      "@container (min-width: 36rem)": {
+        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.3fr)"
+      }
+    },
+    panel: {
+      layerStyle: "panel",
+      bg: "bg",
+      minWidth: 0,
+      height: "full",
+      display: "flex",
+      flexDirection: "column",
+      "&[data-highlighted=true]": {
+        borderColor: "fg.muted"
+      }
+    },
+    panelHeader: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sm",
+      p: "md",
+      borderBottomWidth: "1px",
+      borderColor: "border.subtle",
+      textStyle: "label/M/medium"
+    },
+    panelBody: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      p: "md",
+      flex: 1,
+      minWidth: 0
+    },
+    blockGrid: {
+      display: "grid",
+      gap: "sm",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      "@container (min-width: 26rem)": {
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
+      },
+      "@container (min-width: 55rem)": {
+        gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
+      }
+    },
+    block: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start",
+      gap: "sm",
+      p: "lg",
+      bg: "bg.subtle",
+      borderRadius: "sm",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      textAlign: "left",
+      color: "fg"
+    },
+    blockMark: {
+      display: "inline-flex",
+      flexShrink: 0,
+      "& svg": {
+        height: "full",
+        width: "auto",
+        maxWidth: "none"
+      }
+    },
+    blockSymbol: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "start",
+      height: "16",
+      width: "full"
+    },
+    composition: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      borderTopWidth: "1px",
+      borderColor: "border.subtle",
+      pt: "lg"
+    }
+  },
+  variants: {
+    spacing: {
+      normal: {},
+      spacious: {
+        page: {
+          gap: "5xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    spacing: "normal"
+  }
+}), ze = t({
+  slots: ["iconEditor", "iconPicker", "iconGrid", "iconTile", "iconName", "tileSymbol", "iconCanvas", "inspectorSymbol", "inspector", "toolbar", "metrics", "metric", "sessions", "session", "sessionStatus", "preview", "checks", "prompt", "plot", "plotGrid", "plotCurve", "plotComparison", "plotCursor", "plotPoint", "shaderCode", "shaderCanvas", "extensionPanels"],
+  base: {
+    extensionPanels: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, {sizes.48}), 1fr))",
+      gap: "panel-gap",
+      minHeight: "64",
+      width: "full"
+    },
+    iconPicker: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      "@container (min-width: 26rem)": {
+        gridTemplateColumns: "repeat(6, minmax(0, 1fr))"
+      },
+      gap: "xs"
+    },
+    shaderCode: {
+      textStyle: "mono/XS",
+      fontSize: "sm",
+      minHeight: "64",
+      flex: 1,
+      resize: "none"
+    },
+    shaderCanvas: {
+      display: "block",
+      width: "full",
+      aspectRatio: "4 / 3",
+      bg: "bg.subtle",
+      borderRadius: "sm"
+    },
+    plot: {
+      width: "full",
+      bg: "bg.subtle",
+      borderRadius: "sm"
+    },
+    plotGrid: {
+      fill: "none",
+      stroke: "border.subtle",
+      strokeWidth: 1
+    },
+    plotComparison: {
+      fill: "none",
+      stroke: "fg.muted",
+      strokeWidth: 2,
+      strokeDasharray: "5 5"
+    },
+    plotCurve: {
+      fill: "none",
+      stroke: "fg.info",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    plotCursor: {
+      stroke: "fg.muted",
+      strokeWidth: 1,
+      strokeDasharray: "4 4"
+    },
+    plotPoint: {
+      fill: "fg",
+      stroke: "bg",
+      strokeWidth: 2
+    },
+    iconEditor: {
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr)",
+      gap: "panel-gap",
+      "@container (min-width: 36rem)": {
+        gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)"
+      }
+    },
+    iconGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(min({sizes.24}, 100%), 1fr))",
+      gap: "xs",
+      listStyle: "none",
+      py: "xs"
+    },
+    iconTile: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "xs",
+      minWidth: 0,
+      minHeight: "28",
+      p: "sm",
+      bg: "bg.subtle",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      borderRadius: "sm",
+      color: "fg",
+      transitionProperty: "opacity, background-color, border-color",
+      transitionDuration: "moderate",
+      "&[data-state=pending]": {
+        opacity: 0.25
+      },
+      "&[data-state=active]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        transition: "none"
+      },
+      "&[aria-pressed]": {
+        cursor: "pointer",
+        _hover: {
+          bg: "bg.hover"
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px"
+      },
+      "&[aria-pressed=true]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      }
+    },
+    iconName: {
+      textStyle: "label/S/regular",
+      maxWidth: "full",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    tileSymbol: {
+      boxSize: "8",
+      fontSize: "{sizes.8}",
+      mb: "xs"
+    },
+    iconCanvas: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      bg: "bg.subtle",
+      borderRadius: "sm",
+      minHeight: "44",
+      p: "xl"
+    },
+    inspectorSymbol: {
+      boxSize: "24",
+      fontSize: "{sizes.24}"
+    },
+    inspector: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md"
+    },
+    toolbar: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "sm",
+      flexWrap: "wrap"
+    },
+    metrics: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      gap: "panel-gap"
+    },
+    metric: {
+      layerStyle: "panel",
+      bg: "bg",
+      p: "md",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xs"
+    },
+    sessions: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm",
+      listStyle: "none"
+    },
+    session: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "md",
+      width: "full",
+      p: "md",
+      minWidth: 0,
+      textAlign: "left",
+      color: "fg",
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      "&[aria-pressed]": {
+        cursor: "pointer",
+        _hover: {
+          bg: "bg.hover"
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "fg",
+        outlineOffset: "2px"
+      },
+      "&[aria-pressed=true]": {
+        borderColor: "fg.muted",
+        bg: "bg.active"
+      },
+      "&[data-status=in_progress]": {
+        borderColor: "fg.info",
+        bg: "bg.info"
+      },
+      "&[data-status=completed]": {
+        borderColor: "fg.success"
+      }
+    },
+    sessionStatus: {
+      gap: "xs",
+      "&[data-status=in_progress] > svg": {
+        animation: "spin 1.2s linear infinite"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        "&[data-status=in_progress] > svg": {
+          animation: "none"
+        }
+      }
+    },
+    preview: {
+      layerStyle: "panel",
+      bg: "bg.subtle",
+      p: "md",
+      overflow: "hidden",
+      minWidth: 0,
+      flex: 1
+    },
+    checks: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "md",
+      textStyle: "label/S/regular",
+      color: "fg.success"
+    },
+    prompt: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      gap: "md",
+      p: "lg",
+      bg: "bg.subtle",
+      layerStyle: "panel",
+      textStyle: "paragraph/L/regular"
+    }
+  }
+}), De = t({
+  slots: B.keys(),
+  base: {
+    itemGroupLabel: {
+      ml: "{2xs}",
+      textStyle: "label/S/regular",
+      fontWeight: "normal",
+      color: "fg.muted"
+    },
+    item: {
+      width: "full",
+      minWidth: "0",
+      maxWidth: "full",
+      minH: "1.75rem",
+      h: "auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "xs",
+      px: "sm",
+      py: "2xs",
+      borderRadius: "0",
+      bg: "transparent",
+      color: "fg.menu-item.default",
+      textStyle: "label/S/regular",
+      cursor: "pointer",
+      overflow: "hidden",
+      textAlign: "left",
+      textDecoration: "none",
+      _hover: {
+        bg: "bg.menu-item.hover"
+      },
+      _highlighted: {
+        bg: "bg.menu-item.hover"
+      },
+      _focusVisible: {
+        bg: "bg.menu-item.focus"
+      },
+      _checked: {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      _selected: {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      "&[aria-checked=true]": {
+        bg: "bg.menu-item.selected",
+        color: "fg"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "fg.muted"
+      }
+    },
+    itemIndicator: {
+      color: "fg"
+    },
+    separator: {
+      my: "0",
+      borderColor: "border.subtle"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      width: "17.5rem",
+      minWidth: "17.5rem",
+      maxWidth: "17.5rem",
+      gap: "0",
+      borderRadius: "xs",
+      p: "0",
+      px: "0",
+      py: "0",
+      bg: "bg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "border",
+      textStyle: "label/M/regular"
+    }
+  }
+}), Ae = "var(--chakra-colors-border)", p = "var(--chakra-colors-border-accent-light)", Re = t({
+  slots: H.keys(),
+  base: {
+    root: {
+      position: "relative",
+      zIndex: "0",
+      isolation: "isolate",
+      boxShadow: "none",
+      "--number-input-border-color": Ae,
+      "&:is(:hover, [data-hover])": {
+        "--number-input-border-color": p
+      },
       "&:is(:active, [data-active])": {
-        "--number-input-border-color": v
+        "--number-input-border-color": p
       },
       "&:focus-within": {
-        "--number-input-border-color": v
+        "--number-input-border-color": p
       }
     },
     input: {
@@ -2056,8 +2908,8 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), we = t({
-  slots: H.keys(),
+}), Be = t({
+  slots: T.keys(),
   base: {
     positioner: {
       _focus: {
@@ -2110,12 +2962,12 @@ const X = {
       }
     }
   }
-}), Ae = h.variants?.size ?? {}, ze = {
-  ...h,
+}), He = v.variants?.size ?? {}, Te = {
+  ...v,
   variants: {
-    ...h.variants,
+    ...v.variants,
     size: {
-      ...Ae,
+      ...He,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -2127,13 +2979,134 @@ const X = {
       }
     }
   }
-}, De = c({
+}, h = {
+  root: {
+    flexDirection: "column",
+    height: "auto",
+    overflow: "visible",
+    gap: "panel-gap"
+  },
+  resizablePanel: {
+    display: "flex",
+    width: "full",
+    height: "auto",
+    flex: "initial",
+    overflow: "visible"
+  },
+  contentPanel: {
+    height: "auto",
+    flex: "initial",
+    overflow: "visible"
+  },
+  separator: {
+    display: "none"
+  }
+}, Ie = t({
+  slots: ["root", "resizablePanel", "contentPanel", "separator"],
+  base: {
+    root: {
+      display: "flex",
+      width: "full",
+      minWidth: 0,
+      minHeight: 0
+    },
+    resizablePanel: {
+      minWidth: 0,
+      minHeight: 0,
+      "&[data-collapsed=true]": {
+        display: "none"
+      }
+    },
+    contentPanel: {
+      display: "flex",
+      minWidth: 0,
+      minHeight: 0
+    },
+    separator: {
+      "&[data-collapsed=true]": {
+        display: "none"
+      }
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          "--split-direction": "row",
+          "--split-width": "var(--split-size)",
+          "--split-height": "100%"
+        }
+      },
+      vertical: {
+        root: {
+          "--split-direction": "column",
+          "--split-width": "100%",
+          "--split-height": "var(--split-size)"
+        }
+      }
+    },
+    layout: {
+      split: {
+        root: {
+          flexDirection: "var(--split-direction)",
+          height: "full",
+          overflow: "hidden",
+          gap: "0"
+        },
+        resizablePanel: {
+          display: "flex",
+          width: "var(--split-width)",
+          height: "var(--split-height)",
+          flex: "0 0 var(--split-size)",
+          overflow: "hidden"
+        },
+        contentPanel: {
+          height: "full",
+          flex: "1",
+          overflow: "hidden"
+        },
+        separator: {
+          display: "flex"
+        }
+      },
+      stacked: h,
+      "stacked-reverse": {
+        ...h,
+        root: {
+          ...h.root,
+          flexDirection: "column-reverse"
+        }
+      },
+      content: {
+        root: {
+          height: "full",
+          overflow: "hidden"
+        },
+        resizablePanel: {
+          display: "none"
+        },
+        contentPanel: {
+          height: "full",
+          flex: "1",
+          overflow: "hidden"
+        },
+        separator: {
+          display: "none"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    layout: "split"
+  }
+}), Le = c({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
-  }
-}), We = t({
-  slots: T.keys(),
+  }
+}), Pe = t({
+  slots: I.keys(),
   base: {
     control: {
       alignItems: "center",
@@ -2196,7 +3169,7 @@ const X = {
       }
     }
   }
-}), Re = t({
+}), Ve = t({
   slots: L.keys(),
   base: {
     root: {
@@ -2331,7 +3304,7 @@ const X = {
     size: "xs",
     variant: "subtle"
   }
-}), i = "border.accent-light", Be = c({
+}), i = "border.accent-light", Xe = c({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -2437,8 +3410,8 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), He = t({
-  slots: V.keys(),
+}), Me = t({
+  slots: P.keys(),
   base: {
     root: {
       display: "flex",
@@ -2584,8 +3557,8 @@ const X = {
     variant: "solid",
     showLastSeparator: !1
   }
-}), Te = t({
-  slots: I.keys(),
+}), je = t({
+  slots: V.keys(),
   base: {
     content: {
       bg: "bg.inverted",
@@ -2593,55 +3566,55 @@ const X = {
       color: "fg.inverted"
     }
   }
-}), Le = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, Ve = (o) => {
-  if (!p.test(o)) return o;
-  const l = o.split(",").map((r) => r.trim()).filter((r) => !p.test(r));
+}), Oe = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), f = /shadow/i, Ue = (o) => {
+  if (!f.test(o)) return o;
+  const l = o.split(",").map((r) => r.trim()).filter((r) => !f.test(r));
   if (l.length !== 0)
     return l.join(", ");
-}, b = (o) => Array.isArray(o) ? o.map(b).filter((l) => l !== void 0) : typeof o == "string" ? Ve(o) : !o || typeof o != "object" ? o : Object.fromEntries(Object.entries(o).flatMap(([l, r]) => {
-  if (Le.has(l) || p.test(l)) return [];
+}, b = (o) => Array.isArray(o) ? o.map(b).filter((l) => l !== void 0) : typeof o == "string" ? Ue(o) : !o || typeof o != "object" ? o : Object.fromEntries(Object.entries(o).flatMap(([l, r]) => {
+  if (Oe.has(l) || f.test(l)) return [];
   const n = b(r);
   return n === void 0 ? [] : [[l, n]];
-})), x = (o) => {
+})), y = (o) => {
   const {
     shadows: l,
     ...r
   } = o ?? {};
   return r;
-}, Ie = {
+}, Ne = {
   badge: ["surface"],
   button: ["secondary", "surface"]
-}, Xe = (o) => {
+}, Ye = (o) => {
   const l = {
     ...o ?? {}
   };
-  for (const [r, n] of Object.entries(Ie)) {
+  for (const [r, n] of Object.entries(Ne)) {
     const s = l[r];
     if (!s || typeof s != "object") continue;
-    const g = s, m = g.variants, f = m?.variant;
-    if (!f) continue;
-    const _ = new Set(n), y = Object.fromEntries(Object.entries(f).filter(([S]) => !_.has(S)));
+    const g = s, m = g.variants, x = m?.variant;
+    if (!x) continue;
+    const S = new Set(n), _ = Object.fromEntries(Object.entries(x).filter(([w]) => !S.has(w)));
     l[r] = {
       ...g,
       variants: {
         ...m,
-        variant: y
+        variant: _
       }
     };
   }
   return l;
-}, Me = {
+}, Ge = {
   ...d,
   theme: {
     ...d.theme,
-    tokens: x(d.theme?.tokens),
-    semanticTokens: x(d.theme?.semanticTokens),
-    recipes: Xe(b(d.theme?.recipes)),
+    tokens: y(d.theme?.tokens),
+    semanticTokens: y(d.theme?.semanticTokens),
+    recipes: Ye(b(d.theme?.recipes)),
     slotRecipes: b(d.theme?.slotRecipes),
     layerStyles: b(d.theme?.layerStyles),
     animationStyles: b(d.theme?.animationStyles)
   }
-}, Pe = {
+}, $e = {
   DEFAULT: {
     value: "1px solid {colors.border}"
   },
@@ -2657,103 +3630,168 @@ const X = {
   "accent-light": {
     value: "1px solid {colors.border.accent-light}"
   }
-}, je = {
-  DEFAULT: {
-    value: {
-      _light: "{colors.blacks.800}",
-      _dark: "#F7F8F8"
-    }
-  },
-  muted: {
-    value: {
-      _light: "{colors.blacks.450}",
-      _dark: "#8B9099"
-    }
-  },
-  subtle: {
-    value: {
-      _light: "{colors.blacks.400}",
-      _dark: "#646973"
+}, qe = {
+  text: {
+    primary: {
+      value: {
+        _light: "{colors.blacks.800}",
+        _dark: "{colors.blacks.200}"
+      }
+    },
+    secondary: {
+      value: {
+        _light: "{colors.blacks.600}",
+        _dark: "{colors.blacks.500}"
+      }
     }
   },
-  inverted: {
+  grid: {
     value: {
-      _light: "{colors.blacks.50}",
+      _light: "{colors.blacks.300}",
       _dark: "{colors.blacks.800}"
     }
   },
-  info: {
-    value: {
-      _light: "{colors.blue.700}",
-      _dark: "{colors.blue.300}"
-    }
-  },
-  warning: {
-    value: {
-      _light: "{colors.orange.700}",
-      _dark: "{colors.orange.300}"
-    }
-  },
-  success: {
-    value: {
-      _light: "{colors.green.700}",
-      _dark: "{colors.green.400}"
-    }
-  },
-  error: {
+  axis: {
     value: {
-      _light: "{colors.red.700}",
-      _dark: "{colors.red.400}"
+      _light: "{colors.blacks.700}",
+      _dark: "{colors.blacks.300}"
     }
   },
-  accent: {
-    "pink-dark": {
+  categorical: {
+    1: {
+      value: {
+        _light: "{colors.blue.700}",
+        _dark: "{colors.blue.300}"
+      }
+    },
+    2: {
+      value: {
+        _light: "{colors.orange.700}",
+        _dark: "{colors.orange.300}"
+      }
+    },
+    3: {
+      value: {
+        _light: "{colors.purple.700}",
+        _dark: "{colors.purple.300}"
+      }
+    },
+    4: {
+      value: {
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.300}"
+      }
+    },
+    5: {
       value: {
         _light: "{colors.pink.700}",
-        _dark: "{colors.pink.50}"
+        _dark: "{colors.pink.300}"
+      }
+    },
+    6: {
+      value: {
+        _light: "{colors.teal.700}",
+        _dark: "{colors.teal.300}"
+      }
+    },
+    7: {
+      value: {
+        _light: "{colors.cyan.700}",
+        _dark: "{colors.cyan.300}"
       }
     }
   },
-  "green-dark": {
-    value: {
-      _light: "{colors.green.700}",
-      _dark: "{colors.green.50}"
-    }
-  },
-  "blue-dark": {
-    value: {
-      _light: "{colors.sapphire.700}",
-      _dark: "{colors.sapphire.100}"
-    }
-  },
-  "blue-very-dark": {
-    value: {
-      _light: "{colors.sapphire.900}",
-      _dark: "{colors.sapphire.800}"
-    }
-  },
-  button: {
-    primary: {
+  sequential: {
+    blue: {
+      "low-3": {
+        value: {
+          _light: "{colors.blue.200}",
+          _dark: "{colors.blue.800}"
+        }
+      },
+      "low-2": {
+        value: {
+          _light: "{colors.blue.300}",
+          _dark: "{colors.blue.700}"
+        }
+      },
+      "low-1": {
+        value: {
+          _light: "{colors.blue.400}",
+          _dark: "{colors.blue.600}"
+        }
+      },
       default: {
         value: {
-          _light: "{colors.blacks.800}",
-          _dark: "{colors.blacks.800}"
+          _light: "{colors.blue.500}",
+          _dark: "{colors.blue.500}"
         }
       },
-      disabled: {
-        value: "{colors.fg.subtle}"
+      "high-1": {
+        value: {
+          _light: "{colors.blue.600}",
+          _dark: "{colors.blue.400}"
+        }
+      },
+      "high-2": {
+        value: {
+          _light: "{colors.blue.700}",
+          _dark: "{colors.blue.300}"
+        }
+      },
+      "high-3": {
+        value: {
+          _light: "{colors.blue.800}",
+          _dark: "{colors.blue.200}"
+        }
       }
-    }
-  },
-  "menu-item": {
-    default: {
-      value: "{colors.fg}"
     },
-    secondary: {
-      value: "{colors.fg.muted}"
+    red: {
+      "low-3": {
+        value: {
+          _light: "{colors.red.200}",
+          _dark: "{colors.red.800}"
+        }
+      },
+      "low-2": {
+        value: {
+          _light: "{colors.red.300}",
+          _dark: "{colors.red.700}"
+        }
+      },
+      "low-1": {
+        value: {
+          _light: "{colors.red.400}",
+          _dark: "{colors.red.600}"
+        }
+      },
+      default: {
+        value: {
+          _light: "{colors.red.500}",
+          _dark: "{colors.red.500}"
+        }
+      },
+      "high-1": {
+        value: {
+          _light: "{colors.red.600}",
+          _dark: "{colors.red.400}"
+        }
+      },
+      "high-2": {
+        value: {
+          _light: "{colors.red.700}",
+          _dark: "{colors.red.300}"
+        }
+      },
+      "high-3": {
+        value: {
+          _light: "{colors.red.800}",
+          _dark: "{colors.red.200}"
+        }
+      }
     }
   }
-}, Ue = {
+}, Ke = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.50}",
@@ -2995,24 +4033,120 @@ const X = {
     },
     "cyan-light": {
       value: {
-        _light: "{colors.cyan.50}",
-        _dark: "{colors.cyan.100}"
+        _light: "{colors.cyan.50}",
+        _dark: "{colors.cyan.100}"
+      }
+    },
+    "green-light": {
+      value: {
+        _light: "{colors.green.50}",
+        _dark: "{colors.sapphire.50}"
+      }
+    },
+    "sand-light": {
+      value: {
+        _light: "{colors.sand.100}",
+        _dark: "{colors.sand.100}"
+      }
+    }
+  }
+}, Je = {
+  DEFAULT: {
+    value: {
+      _light: "{colors.blacks.800}",
+      _dark: "#F7F8F8"
+    }
+  },
+  muted: {
+    value: {
+      _light: "{colors.blacks.600}",
+      _dark: "#8B9099"
+    }
+  },
+  subtle: {
+    value: {
+      _light: "{colors.blacks.400}",
+      _dark: "#646973"
+    }
+  },
+  inverted: {
+    value: {
+      _light: "{colors.blacks.50}",
+      _dark: "{colors.blacks.800}"
+    }
+  },
+  info: {
+    value: {
+      _light: "{colors.blue.700}",
+      _dark: "{colors.blue.300}"
+    }
+  },
+  warning: {
+    value: {
+      _light: "{colors.orange.700}",
+      _dark: "{colors.orange.300}"
+    }
+  },
+  success: {
+    value: {
+      _light: "{colors.green.700}",
+      _dark: "{colors.green.400}"
+    }
+  },
+  error: {
+    value: {
+      _light: "{colors.red.700}",
+      _dark: "{colors.red.400}"
+    }
+  },
+  accent: {
+    "pink-dark": {
+      value: {
+        _light: "{colors.pink.700}",
+        _dark: "{colors.pink.50}"
       }
-    },
-    "green-light": {
-      value: {
-        _light: "{colors.green.50}",
-        _dark: "{colors.sapphire.50}"
+    }
+  },
+  "green-dark": {
+    value: {
+      _light: "{colors.green.700}",
+      _dark: "{colors.green.50}"
+    }
+  },
+  "blue-dark": {
+    value: {
+      _light: "{colors.sapphire.700}",
+      _dark: "{colors.sapphire.100}"
+    }
+  },
+  "blue-very-dark": {
+    value: {
+      _light: "{colors.sapphire.900}",
+      _dark: "{colors.sapphire.800}"
+    }
+  },
+  button: {
+    primary: {
+      default: {
+        value: {
+          _light: "{colors.blacks.800}",
+          _dark: "{colors.blacks.800}"
+        }
+      },
+      disabled: {
+        value: "{colors.fg.subtle}"
       }
+    }
+  },
+  "menu-item": {
+    default: {
+      value: "{colors.fg}"
     },
-    "sand-light": {
-      value: {
-        _light: "{colors.sand.100}",
-        _dark: "{colors.sand.100}"
-      }
+    secondary: {
+      value: "{colors.fg.muted}"
     }
   }
-}, Oe = {
+}, Qe = {
   DEFAULT: {
     value: {
       _light: "#EAF0EB",
@@ -3072,14 +4206,14 @@ const X = {
       value: "{colors.border.subtle}"
     }
   }
-}, Ye = {
+}, Ze = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, $e = {
+}, eo = {
   contrast: {
     value: {
       _light: "black",
@@ -3128,168 +4262,7 @@ const X = {
       _dark: "{colors.orange.500}"
     }
   }
-}, Ne = {
-  text: {
-    primary: {
-      value: {
-        _light: "{colors.blacks.800}",
-        _dark: "{colors.blacks.200}"
-      }
-    },
-    secondary: {
-      value: {
-        _light: "{colors.blacks.600}",
-        _dark: "{colors.blacks.500}"
-      }
-    }
-  },
-  grid: {
-    value: {
-      _light: "{colors.blacks.300}",
-      _dark: "{colors.blacks.800}"
-    }
-  },
-  axis: {
-    value: {
-      _light: "{colors.blacks.700}",
-      _dark: "{colors.blacks.300}"
-    }
-  },
-  categorical: {
-    1: {
-      value: {
-        _light: "{colors.blue.700}",
-        _dark: "{colors.blue.300}"
-      }
-    },
-    2: {
-      value: {
-        _light: "{colors.orange.700}",
-        _dark: "{colors.orange.300}"
-      }
-    },
-    3: {
-      value: {
-        _light: "{colors.purple.700}",
-        _dark: "{colors.purple.300}"
-      }
-    },
-    4: {
-      value: {
-        _light: "{colors.red.700}",
-        _dark: "{colors.red.300}"
-      }
-    },
-    5: {
-      value: {
-        _light: "{colors.pink.700}",
-        _dark: "{colors.pink.300}"
-      }
-    },
-    6: {
-      value: {
-        _light: "{colors.teal.700}",
-        _dark: "{colors.teal.300}"
-      }
-    },
-    7: {
-      value: {
-        _light: "{colors.cyan.700}",
-        _dark: "{colors.cyan.300}"
-      }
-    }
-  },
-  sequential: {
-    blue: {
-      "low-3": {
-        value: {
-          _light: "{colors.blue.200}",
-          _dark: "{colors.blue.800}"
-        }
-      },
-      "low-2": {
-        value: {
-          _light: "{colors.blue.300}",
-          _dark: "{colors.blue.700}"
-        }
-      },
-      "low-1": {
-        value: {
-          _light: "{colors.blue.400}",
-          _dark: "{colors.blue.600}"
-        }
-      },
-      default: {
-        value: {
-          _light: "{colors.blue.500}",
-          _dark: "{colors.blue.500}"
-        }
-      },
-      "high-1": {
-        value: {
-          _light: "{colors.blue.600}",
-          _dark: "{colors.blue.400}"
-        }
-      },
-      "high-2": {
-        value: {
-          _light: "{colors.blue.700}",
-          _dark: "{colors.blue.300}"
-        }
-      },
-      "high-3": {
-        value: {
-          _light: "{colors.blue.800}",
-          _dark: "{colors.blue.200}"
-        }
-      }
-    },
-    red: {
-      "low-3": {
-        value: {
-          _light: "{colors.red.200}",
-          _dark: "{colors.red.800}"
-        }
-      },
-      "low-2": {
-        value: {
-          _light: "{colors.red.300}",
-          _dark: "{colors.red.700}"
-        }
-      },
-      "low-1": {
-        value: {
-          _light: "{colors.red.400}",
-          _dark: "{colors.red.600}"
-        }
-      },
-      default: {
-        value: {
-          _light: "{colors.red.500}",
-          _dark: "{colors.red.500}"
-        }
-      },
-      "high-1": {
-        value: {
-          _light: "{colors.red.600}",
-          _dark: "{colors.red.400}"
-        }
-      },
-      "high-2": {
-        value: {
-          _light: "{colors.red.700}",
-          _dark: "{colors.red.300}"
-        }
-      },
-      "high-3": {
-        value: {
-          _light: "{colors.red.800}",
-          _dark: "{colors.red.200}"
-        }
-      }
-    }
-  }
-}, qe = {
+}, oo = {
   selectable: {
     primary: {
       value: {
@@ -3298,15 +4271,15 @@ const X = {
       }
     }
   }
-}, Ge = {
-  fg: je,
-  bg: Ue,
-  border: Oe,
-  blue: Ye,
-  orange: $e,
-  vis: Ne,
-  text: qe
-}, Ke = F({
+}, ro = {
+  fg: Je,
+  bg: Ke,
+  border: Qe,
+  blue: Ze,
+  orange: eo,
+  vis: qe,
+  text: oo
+}, lo = k({
   floatingBar: {
     value: {
       paddingInline: "sm",
@@ -3318,6 +4291,15 @@ const X = {
       boxShadow: "lg"
     }
   },
+  // Cards clip their content so square children never paint over the rounded corners.
+  panel: {
+    value: {
+      borderRadius: "sm",
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      overflow: "hidden"
+    }
+  },
   modal: {
     value: {
       paddingInline: "xs",
@@ -3328,7 +4310,7 @@ const X = {
       borderColor: "border"
     }
   }
-}), Je = k({
+}), to = C({
   brand: {
     value: {
       fontFamily: "brand",
@@ -3615,59 +4597,75 @@ const X = {
       letterSpacing: "0.14px"
     }
   }
-}), Qe = E({
-  globalCss: U,
+}), ao = E({
+  globalCss: Y,
+  utilities: {
+    WebkitAppRegion: {
+      values: ["drag", "no-drag"],
+      transform: (o) => ({
+        WebkitAppRegion: o
+      })
+    }
+  },
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: Je,
-    layerStyles: Ke,
+    textStyles: to,
+    layerStyles: lo,
     recipes: {
-      badge: me,
-      button: ve,
-      divider: fe,
-      input: Se,
+      badge: ve,
+      button: fe,
+      divider: Se,
+      input: Ce,
       kbd: Fe,
-      skeleton: De,
-      textarea: Be
+      skeleton: Le,
+      textarea: Xe
     },
     tokens: {
-      colors: ae,
-      borderWidths: ue,
-      fonts: ie,
-      fontSizes: ne,
-      fontWeights: se,
-      radii: be,
-      sizes: ce,
-      spacing: de
+      colors: se,
+      borderWidths: me,
+      fonts: de,
+      fontSizes: ce,
+      fontWeights: ue,
+      radii: pe,
+      sizes: ge,
+      spacing: be
     },
     semanticTokens: {
-      colors: Ge,
-      borders: Pe
+      colors: ro,
+      borders: $e
     },
     slotRecipes: {
-      alert: ge,
-      colorPicker: he,
-      drawer: xe,
-      tooltip: Te,
-      popover: we,
-      menu: ke,
-      numberInput: Ee,
-      editable: _e,
-      form: ye,
-      dialog: pe,
-      progressCircle: ze,
-      switch: We,
-      tabs: Re,
-      timeline: He
-    }
-  }
-}), lo = C(Me, Qe);
+      windowTitleBar: X,
+      windowTabs: M,
+      landing: Ee,
+      landingStory: We,
+      landingToolDemo: ze,
+      resizableSplitLayout: Ie,
+      alert: he,
+      colorPicker: xe,
+      drawer: _e,
+      tooltip: je,
+      popover: Be,
+      menu: De,
+      numberInput: Re,
+      editable: we,
+      form: ke,
+      dialog: ye,
+      progressCircle: Te,
+      switch: Pe,
+      tabs: Ve,
+      timeline: Me
+    }
+  }
+}), uo = F(Ge, ao);
 export {
-  ro as a,
-  j as c,
-  lo as t
+  co as a,
+  X as b,
+  N as c,
+  uo as t,
+  M as w
 };
-//# sourceMappingURL=theme-B-l5_a6F.js.map
+//# sourceMappingURL=theme-Ca-KyNoi.js.map