react-os-shell 4.15.0 → 4.21.0

package/dist/shell.css

@@ -0,0 +1,105 @@
+/**
+ * react-os-shell/shell.css — the window chrome half of the stylesheet.
+ *
+ * NOT a public subpath: it is reached only through `styles.css`, which imports
+ * it by relative path. Consumers take `styles.css` (shell + kit) or
+ * `ui.css` (kit alone).
+ *
+ * A rule lives here only if its selector is scoped to DOM the shell alone
+ * produces — [data-sticky-id], .glass-input-bg, .docs-editor — or if it
+ * declares a --window-* / --taskbar-* custom property. Everything whose
+ * selector is a bare utility class stays in ui.css, even where a comment
+ * mentions the taskbar: the cascade does not read comments, and a rule that
+ * names .text-gray-600 applies to every button in every app.
+ */
+
+/* Glass input field — used by the start-menu search and any consumer that
+ * imports GLASS_INPUT_BG. Adapts to dark mode so the tile blends with the
+ * dark glass gradient instead of reading as a bright white panel that
+ * mismatches its frame. */
+.glass-input-bg {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+[data-theme="dark"] .glass-input-bg {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+/* Base theme colors for transparent windows.
+ *
+ * --window-accent-rgb (SG#00372) is deliberately NOT defined here: it is a
+ * per-window property, set inline on the panel element by Modal when the
+ * consumer passes `accentRgb` (see WindowManagerProvider's
+ * `windowAccentForRoute`). It paints only the thin accent stripe between the
+ * title bar and the body, and only when the user has switched that stripe on
+ * (the `window_accent_stripe` preference) — the header colours below and the
+ * user's custom header colour are never overridden by it. */
+:root {
+  --window-header-rgb: 243 244 246;
+  --window-footer-rgb: 249 250 251;
+  --window-content-rgb: 255 255 255;
+}
+[data-theme="pink"] {
+  --window-header-rgb: 252 231 243;
+  --window-footer-rgb: 253 242 248;
+  --window-content-rgb: 255 245 249;
+}
+[data-theme="green"] {
+  --window-header-rgb: 220 252 231;
+  --window-footer-rgb: 236 253 245;
+  --window-content-rgb: 245 254 247;
+}
+[data-theme="grey"] {
+  --window-header-rgb: 229 231 235;
+  --window-footer-rgb: 243 244 246;
+  --window-content-rgb: 249 250 251;
+}
+[data-theme="blue"] {
+  --window-header-rgb: 219 234 254;
+  --window-footer-rgb: 239 246 255;
+  --window-content-rgb: 245 249 255;
+}
+[data-theme="dark"] {
+  --window-header-rgb: 49 50 68;
+  --window-footer-rgb: 24 24 37;
+  --window-content-rgb: 30 30 46;
+}
+
+/* Sticky notes — keep a solid coloured "paper" in dark mode. The bare .bg-*-100
+   overrides above mute these to a faint 18% status-pill tint (washed out) and
+   the note's black ink then can't be read. The [data-sticky-id] selector wins
+   on specificity: give each colour a muted dark paper and flip the ink to a
+   light tone. */
+[data-theme="dark"] [data-sticky-id].bg-yellow-100 { background-color: #514a1f !important; border-color: #6e6330 !important; }
+[data-theme="dark"] [data-sticky-id].bg-blue-100   { background-color: #1e3553 !important; border-color: #2f4d72 !important; }
+[data-theme="dark"] [data-sticky-id].bg-green-100  { background-color: #1f4030 !important; border-color: #2f5c45 !important; }
+[data-theme="dark"] [data-sticky-id].bg-pink-100   { background-color: #4d2339 !important; border-color: #6e3654 !important; }
+[data-theme="dark"] [data-sticky-id].bg-purple-100 { background-color: #392555 !important; border-color: #4f3873 !important; }
+[data-theme="dark"] [data-sticky-id].bg-orange-100 { background-color: #533619 !important; border-color: #6e4b27 !important; }
+[data-theme="dark"] [data-sticky-id] .text-black\/70 { color: rgba(230, 233, 245, 0.92) !important; }
+[data-theme="dark"] [data-sticky-id] .text-black\/30 { color: rgba(230, 233, 245, 0.45) !important; }
+[data-theme="dark"] [data-sticky-id] .text-black\/20 { color: rgba(230, 233, 245, 0.42) !important; }
+[data-theme="dark"] [data-sticky-id] .text-black\/15 { color: rgba(230, 233, 245, 0.35) !important; }
+[data-theme="dark"] [data-sticky-id] .hover\:text-black\/50:hover { color: rgba(230, 233, 245, 0.70) !important; }
+[data-theme="dark"] [data-sticky-id] .placeholder\:text-black\/30::placeholder { color: rgba(230, 233, 245, 0.45) !important; }
+[data-theme="dark"] [data-sticky-id] .bg-black\/10 { background-color: rgba(230, 233, 245, 0.16) !important; }
+[data-theme="dark"] [data-sticky-id] .hover\:bg-black\/20:hover { background-color: rgba(230, 233, 245, 0.26) !important; }
+
+/* Window title colors — read by Modal.tsx */
+[data-theme="dark"] {
+  --window-title-active: #cdd6f4;
+  --window-title-inactive: #6c7086;
+  --taskbar-bg-rgb: 24 24 37;            /* Catppuccin mantle */
+  --taskbar-border-color: #313244;
+}
+
+/* Documents app — page content styling. The editor is a bare contenteditable
+   and Tailwind's preflight strips list markers and element margins, so
+   restore them for anything typed into or imported from a document; images
+   are click-to-resize (menu) and never overflow the page. */
+.docs-editor ul { list-style: disc; padding-left: 1.5rem; margin: 0.25rem 0; }
+.docs-editor ul ul { list-style: circle; }
+.docs-editor ol { list-style: decimal; padding-left: 1.5rem; margin: 0.25rem 0; }
+.docs-editor li { margin: 0.125rem 0; }
+.docs-editor p { margin: 0 0 0.5rem; }
+.docs-editor img { max-width: 100%; height: auto; cursor: pointer; }
+.docs-editor img:hover { outline: 2px solid rgba(59, 130, 246, 0.45); outline-offset: 1px; }

package/dist/styles.css

@@ -1,511 +1,22 @@
 /**
- * react-os-shell base styles — Tailwind v4 @theme + dark-mode tone-down rules.
+ * react-os-shell base styles — the full stylesheet: UI kit + window chrome.
  *
  * Consumers import this once near their app entry:
  *
- *   import 'react-os-shell/styles.css';
+ *   import "react-os-shell/styles.css";
  *
- * The CSS custom properties are namespaced `--window-*` / `--taskbar-*` /
- * `--menu-*` so they don't collide with consumer styles. Dark mode is
- * activated by setting `data-theme="dark"` on the document element; the
- * package's `useTheme()` hook handles this.
+ * Since 4.16.0 this is an umbrella over two halves, so a consumer taking
+ * `react-os-shell/ui` can load `ui.css` alone and skip the window, taskbar,
+ * desktop and sticky-note rules it will never render. The rules, their order,
+ * and the resulting cascade are unchanged — no selector appears in both halves,
+ * so the split is order-independent (asserted by tests/cssSplit.test.ts).
  *
- * Scope:
- *   - :root variables for window header/footer/content tints
- *   - [data-theme="dark"] overrides for bg-/text-/border-/shadow-/divide-
- *     Tailwind utility classes so the desktop, modals, and start menu
- *     all stay readable on dark glass
- *   - Status-badge tone-downs (matches the 8 semantic groups in StatusBadge)
- *   - Scrollbar styling for editable grids and dark-mode containers
+ * Import EXACTLY ONE of this and ui.css. Taking both doubles every rule.
  *
- * Per-theme accent variants (pink / green / grey / blue + custom accent)
- * live in themes.css, imported below so every consumer gets the full set —
- * useTheme() offers all of them in every portal, so the remaps must exist
- * wherever styles.css is loaded. themes.css is also exported standalone
- * ("react-os-shell/themes.css") for consumers that import granularly.
+ * themes.css is imported by ui.css, and is also exported standalone
+ * ("react-os-shell/themes.css") for consumers that build their CSS granularly.
  */
 
 @import "tailwindcss";
-@import "./themes.css";
-
-/* Tailwind v4 doesn't scan node_modules by default — tell it to scan this
-   package's compiled JS so utility classes used in shell components get
-   generated when consumers import react-os-shell/styles.css. */
-@source "./**/*.js";
-
-/* Glass input field — used by the start-menu search and any consumer that
- * imports GLASS_INPUT_BG. Adapts to dark mode so the tile blends with the
- * dark glass gradient instead of reading as a bright white panel that
- * mismatches its frame. */
-.glass-input-bg {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-[data-theme="dark"] .glass-input-bg {
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-/* ── Reduce transparency (Preferences → Customization) ──────────────────────
- * When the user turns on "Reduce transparency", Layout adds this class to
- * <html>. Two effects, applied globally so every present-and-future glass
- * surface is covered without per-component edits:
- *   1. Force every window/taskbar/menu opacity variable fully opaque, so the
- *      surfaces that tint via `rgb(... / var(--*-opacity))` become solid. The
- *      `!important` beats Layout's inline (non-important) custom-property writes.
- *   2. Strip backdrop-filter everywhere — the blur is the GPU-expensive part on
- *      older machines. `!important` overrides both Tailwind `backdrop-blur-*`
- *      utilities and inline `backdropFilter` from glassStyle(). glassStyle()
- *      also returns a solid background under this class so menus/popups don't
- *      read as washed-out translucent panels once the blur is gone. */
-html.rosh-reduce-transparency {
-  --active-header-opacity: 1 !important;
-  --active-content-opacity: 1 !important;
-  --inactive-header-opacity: 1 !important;
-  --inactive-content-opacity: 1 !important;
-  --menu-opacity: 1 !important;
-  --taskbar-opacity: 1 !important;
-}
-html.rosh-reduce-transparency *,
-html.rosh-reduce-transparency *::before,
-html.rosh-reduce-transparency *::after {
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-}
-
-/* Base theme colors for transparent windows.
- *
- * --window-accent-rgb (SG#00372) is deliberately NOT defined here: it is a
- * per-window property, set inline on the panel element by Modal when the
- * consumer passes `accentRgb` (see WindowManagerProvider's
- * `windowAccentForRoute`). It paints only the thin accent stripe between the
- * title bar and the body, and only when the user has switched that stripe on
- * (the `window_accent_stripe` preference) — the header colours below and the
- * user's custom header colour are never overridden by it. */
-:root {
-  --window-header-rgb: 243 244 246;
-  --window-footer-rgb: 249 250 251;
-  --window-content-rgb: 255 255 255;
-}
-[data-theme="pink"] {
-  --window-header-rgb: 252 231 243;
-  --window-footer-rgb: 253 242 248;
-  --window-content-rgb: 255 245 249;
-}
-[data-theme="green"] {
-  --window-header-rgb: 220 252 231;
-  --window-footer-rgb: 236 253 245;
-  --window-content-rgb: 245 254 247;
-}
-[data-theme="grey"] {
-  --window-header-rgb: 229 231 235;
-  --window-footer-rgb: 243 244 246;
-  --window-content-rgb: 249 250 251;
-}
-[data-theme="blue"] {
-  --window-header-rgb: 219 234 254;
-  --window-footer-rgb: 239 246 255;
-  --window-content-rgb: 245 249 255;
-}
-[data-theme="dark"] {
-  --window-header-rgb: 49 50 68;
-  --window-footer-rgb: 24 24 37;
-  --window-content-rgb: 30 30 46;
-}
-
-/* ═══════════════════════════════════════════════════
-   Theme: Dark
-   ═══════════════════════════════════════════════════ */
-[data-theme="dark"] {
-  color-scheme: dark;
-}
-
-/* Backgrounds */
-[data-theme="dark"] .bg-white { background-color: #1e1e2e !important; }
-[data-theme="dark"] .bg-gray-50 { background-color: #181825 !important; }
-[data-theme="dark"] .bg-gray-100 { background-color: #1e1e2e !important; }
-[data-theme="dark"] .bg-gray-200 { background-color: #313244 !important; }
-
-/* Text */
-[data-theme="dark"] .text-gray-900 { color: #cdd6f4 !important; }
-[data-theme="dark"] .text-gray-800 { color: #bac2de !important; }
-[data-theme="dark"] .text-gray-700 { color: #a6adc8 !important; }
-[data-theme="dark"] .text-gray-600 { color: #9399b2 !important; }
-[data-theme="dark"] .text-gray-500 { color: #7f849c !important; }
-[data-theme="dark"] .text-gray-400 { color: #6c7086 !important; }
-
-/* Borders */
-[data-theme="dark"] .border-gray-200 { border-color: #313244 !important; }
-[data-theme="dark"] .border-gray-300 { border-color: #45475a !important; }
-[data-theme="dark"] .border-gray-100 { border-color: #2a2a3c !important; }
-
-/* Cards, shadows, tables */
-[data-theme="dark"] .shadow { --tw-shadow-color: rgba(0,0,0,0.4) !important; }
-[data-theme="dark"] .shadow-lg { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
-[data-theme="dark"] .shadow-xl { --tw-shadow-color: rgba(0,0,0,0.5) !important; }
-[data-theme="dark"] .shadow-2xl { --tw-shadow-color: rgba(0,0,0,0.6) !important; }
-[data-theme="dark"] .divide-gray-200 > :not(:last-child) { border-color: #313244 !important; }
-[data-theme="dark"] .divide-gray-100 > :not(:last-child) { border-color: #2a2a3c !important; }
-
-/* Hover states */
-[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #2a2a3c !important; }
-[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #313244 !important; }
-[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #45475a !important; }
-
-/* Blue hover states — used by menu items, profile row, etc.
-   In dark mode swap the near-white bg for a dark blue tint and the dark
-   blue text for a light shade so highlighted items stay readable. */
-[data-theme="dark"] .bg-blue-50,
-[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
-[data-theme="dark"] .text-blue-700,
-[data-theme="dark"] .hover\:text-blue-700:hover { color: #bfdbfe !important; }
-[data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
-[data-theme="dark"] .text-blue-800 { color: #bfdbfe !important; }
-
-/* Bare *-100 highlight backgrounds + *-700 text (status pills, badges, avatars,
-   dialog icons) have no dark override otherwise, so they keep their bright
-   light-mode value and wash out the text on top. Mute the background to a low
-   tint and lighten the text so highlighted content stays readable in dark mode. */
-[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
-
-/* Tailwind's `!` important modifier compiles to distinct class names
-   (`.\!bg-blue-100` etc.), so the EditableGrid selection utilities escape the
-   remaps above: the selection keeps its light-mode background while the cell
-   text goes light, making selected cells unreadable in dark mode. The
-   attribute selector outranks the utility's own !important. */
-[data-theme="dark"] .\!bg-blue-50 { background-color: rgba(59, 130, 246, 0.26) !important; }
-[data-theme="dark"] .\!bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
-[data-theme="dark"] .\!bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
-[data-theme="dark"] .\!text-gray-700 { color: #a6adc8 !important; }
-[data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
-[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
-[data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; }
-[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
-[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
-[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; }
-[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
-[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; }
-[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
-[data-theme="dark"] .text-green-700 { color: #86efac !important; }
-[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; }
-[data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; }
-[data-theme="dark"] .text-amber-700 { color: #fcd34d !important; }
-[data-theme="dark"] .text-yellow-700 { color: #fde047 !important; }
-[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }
-[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
-[data-theme="dark"] .text-indigo-700 { color: #a5b4fc !important; }
-[data-theme="dark"] .text-purple-700 { color: #d8b4fe !important; }
-
-/* Brighten taskbar button text so it stays readable on dark glass.
-   The default override (#9399b2) is too dim for short button labels. */
-[data-theme="dark"] .text-gray-600 { color: #a6adc8 !important; }
-
-/* Translucent button backgrounds — Tailwind generates separate classes for the
-   /40 /60 alpha variants (bg-gray-50\/40 etc.) so the bare .bg-gray-50 override
-   doesn't match. Override them explicitly with dark equivalents so taskbar
-   tabs and the start-menu button don't look too bright in Dark mode. */
-[data-theme="dark"] .bg-gray-50\/40 { background-color: rgba(24, 24, 37, 0.4) !important; }
-/* /50 and /60 are used as in-window PANEL surfaces (sidebars, form sections,
-   popup cards) — keep them solid in dark so a bright wallpaper can't bleed
-   through the window glass and wash them out. */
-[data-theme="dark"] .bg-gray-50\/50 { background-color: #181825 !important; }
-[data-theme="dark"] .bg-gray-50\/60 { background-color: #181825 !important; }
-[data-theme="dark"] .hover\:bg-gray-50\/50:hover { background-color: #181825 !important; }
-[data-theme="dark"] .bg-gray-100\/40 { background-color: rgba(30, 30, 46, 0.4) !important; }
-[data-theme="dark"] .bg-gray-100\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
-[data-theme="dark"] .bg-gray-200\/40 { background-color: rgba(49, 50, 68, 0.4) !important; }
-[data-theme="dark"] .bg-gray-200\/50 { background-color: rgba(49, 50, 68, 0.5) !important; }
-[data-theme="dark"] .bg-blue-100\/60 { background-color: rgba(59, 130, 246, 0.22) !important; }
-/* Pale-blue tinted panels (selected rows, inline-reply box) — scale the
-   .bg-blue-50 dark tint (0.26) down through the alpha steps. */
-[data-theme="dark"] .bg-blue-50\/30 { background-color: rgba(59, 130, 246, 0.10) !important; }
-[data-theme="dark"] .bg-blue-50\/40 { background-color: rgba(59, 130, 246, 0.12) !important; }
-[data-theme="dark"] .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.15) !important; }
-[data-theme="dark"] .bg-blue-50\/60 { background-color: rgba(59, 130, 246, 0.18) !important; }
-[data-theme="dark"] .border-gray-200\/40 { border-color: rgba(69, 71, 90, 0.4) !important; }
-[data-theme="dark"] .border-gray-300\/40 { border-color: rgba(88, 91, 112, 0.4) !important; }
-[data-theme="dark"] .border-blue-400\/60 { border-color: rgba(96, 165, 250, 0.45) !important; }
-[data-theme="dark"] .hover\:bg-gray-200\/40:hover { background-color: rgba(49, 50, 68, 0.4) !important; }
-
-/* White alpha variants — the bare .bg-white override doesn't match the /50../95
-   alpha classes, so cards (the Widget gallery), the Exposé snapshot title pill
-   and desktop overlays stayed bright white in dark mode while their (remapped,
-   light) text washed out. Map them to the dark window tint. */
-[data-theme="dark"] .bg-white\/50 { background-color: rgba(30, 30, 46, 0.5) !important; }
-[data-theme="dark"] .bg-white\/60 { background-color: rgba(30, 30, 46, 0.6) !important; }
-[data-theme="dark"] .bg-white\/70 { background-color: rgba(30, 30, 46, 0.7) !important; }
-[data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 30, 46, 0.85) !important; }
-[data-theme="dark"] .bg-white\/90 { background-color: rgba(30, 30, 46, 0.92) !important; }
-[data-theme="dark"] .bg-white\/95 { background-color: rgba(30, 30, 46, 0.95) !important; }
-[data-theme="dark"] .bg-blue-50\/70 { background-color: rgba(59, 130, 246, 0.22) !important; }
-
-/* Sticky notes — keep a solid coloured "paper" in dark mode. The bare .bg-*-100
-   overrides above mute these to a faint 18% status-pill tint (washed out) and
-   the note's black ink then can't be read. The [data-sticky-id] selector wins
-   on specificity: give each colour a muted dark paper and flip the ink to a
-   light tone. */
-[data-theme="dark"] [data-sticky-id].bg-yellow-100 { background-color: #514a1f !important; border-color: #6e6330 !important; }
-[data-theme="dark"] [data-sticky-id].bg-blue-100   { background-color: #1e3553 !important; border-color: #2f4d72 !important; }
-[data-theme="dark"] [data-sticky-id].bg-green-100  { background-color: #1f4030 !important; border-color: #2f5c45 !important; }
-[data-theme="dark"] [data-sticky-id].bg-pink-100   { background-color: #4d2339 !important; border-color: #6e3654 !important; }
-[data-theme="dark"] [data-sticky-id].bg-purple-100 { background-color: #392555 !important; border-color: #4f3873 !important; }
-[data-theme="dark"] [data-sticky-id].bg-orange-100 { background-color: #533619 !important; border-color: #6e4b27 !important; }
-[data-theme="dark"] [data-sticky-id] .text-black\/70 { color: rgba(230, 233, 245, 0.92) !important; }
-[data-theme="dark"] [data-sticky-id] .text-black\/30 { color: rgba(230, 233, 245, 0.45) !important; }
-[data-theme="dark"] [data-sticky-id] .text-black\/20 { color: rgba(230, 233, 245, 0.42) !important; }
-[data-theme="dark"] [data-sticky-id] .text-black\/15 { color: rgba(230, 233, 245, 0.35) !important; }
-[data-theme="dark"] [data-sticky-id] .hover\:text-black\/50:hover { color: rgba(230, 233, 245, 0.70) !important; }
-[data-theme="dark"] [data-sticky-id] .placeholder\:text-black\/30::placeholder { color: rgba(230, 233, 245, 0.45) !important; }
-[data-theme="dark"] [data-sticky-id] .bg-black\/10 { background-color: rgba(230, 233, 245, 0.16) !important; }
-[data-theme="dark"] [data-sticky-id] .hover\:bg-black\/20:hover { background-color: rgba(230, 233, 245, 0.26) !important; }
-
-/* Inputs — apply the form-input dark styling, but skip elements that
-   explicitly opt into a transparent background (e.g. the start-menu
-   search) so they keep their parent's frosted-glass tile. */
-[data-theme="dark"] input:not(.bg-transparent):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
-[data-theme="dark"] select:not(.bg-transparent),
-[data-theme="dark"] textarea:not(.bg-transparent) {
-  background-color: #181825 !important;
-  border-color: #45475a !important;
-  color: #cdd6f4 !important;
-}
-
-/* iOS auto-zooms the viewport when a focused form control's computed
-   font-size is below 16px. On phones/tablets (same breakpoint as
-   useIsMobile) pin text-bearing controls to 16px so focusing them never
-   triggers the zoom. This keeps pinch-zoom working, unlike a
-   `maximum-scale=1` viewport lock. !important beats Tailwind text-*
-   utilities; the :not() list mirrors the dark-input rule above and skips
-   controls that don't take a text caret. */
-@media (max-width: 767px), (pointer: coarse) {
-  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
-  select,
-  textarea {
-    font-size: 16px !important;
-  }
-}
-
-/* Window title colors — read by Modal.tsx */
-[data-theme="dark"] {
-  --window-title-active: #cdd6f4;
-  --window-title-inactive: #6c7086;
-  --taskbar-bg-rgb: 24 24 37;            /* Catppuccin mantle */
-  --taskbar-border-color: #313244;
-}
-
-/* Status badges — tone down brightness in dark mode (matches StatusBadge.tsx semantic groups) */
-[data-theme="dark"] .bg-gray-100.text-gray-800 { background-color: #313244 !important; color: #a6adc8 !important; }
-[data-theme="dark"] .bg-gray-300.text-gray-800 { background-color: #45475a !important; color: #cdd6f4 !important; }
-[data-theme="dark"] .bg-green-100.text-green-800 { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
-[data-theme="dark"] .bg-blue-100.text-blue-800 { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
-[data-theme="dark"] .bg-indigo-100.text-indigo-800 { background-color: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
-[data-theme="dark"] .bg-sky-100.text-sky-800 { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; }
-[data-theme="dark"] .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.18) !important; color: #fde68a !important; }
-[data-theme="dark"] .bg-orange-100.text-orange-800 { background-color: rgba(249, 115, 22, 0.18) !important; color: #fdba74 !important; }
-[data-theme="dark"] .bg-red-100.text-red-800 { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
-
-/* ── Extended dark-mode tint families ────────────────────────────────
-   Upstreamed 2026-06-13 from the admin portal's 2026-06-10 audit so all
-   consumers share one source of truth. Every hue used by chips/badges
-   (tag colors, group colors, status accents, deal stages), notice
-   banners, verdict panels, row tints and danger buttons gets the same
-   scale as the families above: -50 → 10% tint, -100 → 18%, -200 → ~30%,
-   borders -200 → 32% / -300 → 45%, and dark inks flip to the
-   -400/-300/-200 light end of their scale.
-   Deliberately NOT remapped: game surfaces that read as intentionally
-   light (Calculator LCD bg-slate-200/text-slate-600/800, 2048/Chess
-   tiles, weather gradients), the Customization theme-preview swatches
-   (bg-pink-50/90, bg-green-50/90, bg-blue-50/90, bg-gray-200/90,
-   bg-pink-200, bg-green-200 — they must show each theme's real colors),
-   and low white/black alphas used as glass highlights on wallpaper. */
-
-/* Red */
-[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.16) !important; }
-[data-theme="dark"] .active\:bg-red-50:active { background-color: rgba(239, 68, 68, 0.16) !important; }
-[data-theme="dark"] .bg-red-50\/30 { background-color: rgba(239, 68, 68, 0.06) !important; }
-[data-theme="dark"] .bg-red-50\/50 { background-color: rgba(239, 68, 68, 0.08) !important; }
-[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.22) !important; }
-[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }
-[data-theme="dark"] .border-red-300,
-[data-theme="dark"] .hover\:border-red-300:hover { border-color: rgba(239, 68, 68, 0.45) !important; }
-[data-theme="dark"] .text-red-600,
-[data-theme="dark"] .hover\:text-red-600:hover { color: #f87171 !important; }
-[data-theme="dark"] .hover\:text-red-700:hover { color: #fca5a5 !important; }
-[data-theme="dark"] .text-red-800,
-[data-theme="dark"] .hover\:text-red-800:hover { color: #fecaca !important; }
-[data-theme="dark"] .text-red-900 { color: #fecaca !important; }
-
-/* Amber */
-[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.14) !important; }
-[data-theme="dark"] .bg-amber-50\/30 { background-color: rgba(245, 158, 11, 0.06) !important; }
-[data-theme="dark"] .bg-amber-50\/40 { background-color: rgba(245, 158, 11, 0.07) !important; }
-[data-theme="dark"] .bg-amber-50\/50 { background-color: rgba(245, 158, 11, 0.08) !important; }
-[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.24) !important; }
-[data-theme="dark"] .bg-amber-200 { background-color: rgba(245, 158, 11, 0.28) !important; }
-[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; }
-[data-theme="dark"] .border-amber-300,
-[data-theme="dark"] .hover\:border-amber-300:hover { border-color: rgba(245, 158, 11, 0.45) !important; }
-[data-theme="dark"] .text-amber-600,
-[data-theme="dark"] .hover\:text-amber-600:hover { color: #fbbf24 !important; }
-[data-theme="dark"] .text-amber-800 { color: #fde68a !important; }
-[data-theme="dark"] .text-amber-900 { color: #fde68a !important; }
-
-/* Yellow */
-[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.10) !important; }
-[data-theme="dark"] .bg-yellow-50\/50 { background-color: rgba(234, 179, 8, 0.08) !important; }
-[data-theme="dark"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35) !important; }
-[data-theme="dark"] .border-yellow-300 { border-color: rgba(234, 179, 8, 0.45) !important; }
-[data-theme="dark"] .text-yellow-600,
-[data-theme="dark"] .hover\:text-yellow-600:hover { color: #facc15 !important; }
-[data-theme="dark"] .text-yellow-900 { color: #fef08a !important; }
-
-/* Green / emerald */
-[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.14) !important; }
-[data-theme="dark"] .bg-green-50\/40 { background-color: rgba(34, 197, 94, 0.06) !important; }
-[data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.32) !important; }
-[data-theme="dark"] .border-green-300,
-[data-theme="dark"] .hover\:border-green-300:hover { border-color: rgba(34, 197, 94, 0.45) !important; }
-[data-theme="dark"] .text-green-600,
-[data-theme="dark"] .hover\:text-green-600:hover { color: #4ade80 !important; }
-[data-theme="dark"] .text-green-900,
-[data-theme="dark"] .hover\:text-green-800:hover { color: #bbf7d0 !important; }
-[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.24) !important; }
-[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.32) !important; }
-[data-theme="dark"] .border-emerald-300 { border-color: rgba(16, 185, 129, 0.45) !important; }
-[data-theme="dark"] .text-emerald-600 { color: #34d399 !important; }
-[data-theme="dark"] .text-emerald-800 { color: #a7f3d0 !important; }
-
-/* Orange */
-[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.14) !important; }
-[data-theme="dark"] .hover\:bg-orange-200:hover { background-color: rgba(249, 115, 22, 0.30) !important; }
-[data-theme="dark"] .border-orange-200 { border-color: rgba(249, 115, 22, 0.32) !important; }
-[data-theme="dark"] .border-orange-300,
-[data-theme="dark"] .hover\:border-orange-300:hover { border-color: rgba(249, 115, 22, 0.45) !important; }
-[data-theme="dark"] .text-orange-600 { color: #fb923c !important; }
-[data-theme="dark"] .text-orange-900 { color: #fed7aa !important; }
-
-/* Sky / teal / cyan */
-[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.10) !important; }
-[data-theme="dark"] .border-sky-300 { border-color: rgba(14, 165, 233, 0.45) !important; }
-[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.10) !important; }
-[data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18) !important; }
-[data-theme="dark"] .text-teal-600 { color: #2dd4bf !important; }
-[data-theme="dark"] .text-teal-700 { color: #5eead4 !important; }
-[data-theme="dark"] .text-teal-800 { color: #99f6e4 !important; }
-[data-theme="dark"] .text-cyan-600 { color: #22d3ee !important; }
-
-/* Purple / violet */
-[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.10) !important; }
-[data-theme="dark"] .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.14) !important; }
-[data-theme="dark"] .border-purple-200 { border-color: rgba(168, 85, 247, 0.32) !important; }
-[data-theme="dark"] .border-purple-300,
-[data-theme="dark"] .hover\:border-purple-300:hover { border-color: rgba(168, 85, 247, 0.45) !important; }
-[data-theme="dark"] .text-purple-600 { color: #c084fc !important; }
-[data-theme="dark"] .text-purple-800,
-[data-theme="dark"] .text-purple-900 { color: #e9d5ff !important; }
-[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18) !important; }
-[data-theme="dark"] .border-violet-300 { border-color: rgba(139, 92, 246, 0.45) !important; }
-[data-theme="dark"] .text-violet-800 { color: #ddd6fe !important; }
-
-/* Pink / rose */
-[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.18) !important; }
-[data-theme="dark"] .border-pink-200 { border-color: rgba(236, 72, 153, 0.32) !important; }
-[data-theme="dark"] .border-pink-300 { border-color: rgba(236, 72, 153, 0.45) !important; }
-[data-theme="dark"] .text-pink-600 { color: #f472b6 !important; }
-[data-theme="dark"] .text-pink-800,
-[data-theme="dark"] .text-pink-900 { color: #fbcfe8 !important; }
-[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
-[data-theme="dark"] .text-rose-700 { color: #fda4af !important; }
-[data-theme="dark"] .text-rose-800 { color: #fecdd3 !important; }
-
-/* Indigo / slate */
-[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
-[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.25) !important; }
-[data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; }
-[data-theme="dark"] .border-indigo-300 { border-color: rgba(99, 102, 241, 0.45) !important; }
-[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } /* slate-600/800 left for the Calculator LCD */
-[data-theme="dark"] .border-slate-300 { border-color: rgba(148, 163, 184, 0.35) !important; }
-
-/* Blue — gaps beyond the accent remaps above. Hover/active steps sit one
-   ladder step above their resting tint (base .26 → active .30; the /30../50
-   alpha ladder steps 0.10/0.12/0.15 → hovers 0.12/0.15/0.18). */
-[data-theme="dark"] .bg-blue-200 { background-color: rgba(59, 130, 246, 0.35) !important; }
-[data-theme="dark"] .active\:bg-blue-200:active { background-color: rgba(59, 130, 246, 0.40) !important; }
-[data-theme="dark"] .bg-blue-200\/60 { background-color: rgba(59, 130, 246, 0.20) !important; }
-[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.26) !important; }
-[data-theme="dark"] .active\:bg-blue-50:active { background-color: rgba(59, 130, 246, 0.30) !important; }
-[data-theme="dark"] .hover\:bg-blue-50\/30:hover { background-color: rgba(59, 130, 246, 0.12) !important; }
-[data-theme="dark"] .hover\:bg-blue-50\/40:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
-[data-theme="dark"] .hover\:bg-blue-50\/50:hover { background-color: rgba(59, 130, 246, 0.18) !important; }
-[data-theme="dark"] .border-blue-100 { border-color: rgba(59, 130, 246, 0.22) !important; }
-[data-theme="dark"] .border-blue-200,
-[data-theme="dark"] .hover\:border-blue-200:hover { border-color: rgba(59, 130, 246, 0.32) !important; }
-[data-theme="dark"] .border-blue-300,
-[data-theme="dark"] .hover\:border-blue-300:hover { border-color: rgba(59, 130, 246, 0.45) !important; }
-[data-theme="dark"] .border-blue-300\/50 { border-color: rgba(59, 130, 246, 0.25) !important; }
-[data-theme="dark"] .text-blue-900 { color: #bfdbfe !important; }
-[data-theme="dark"] .hover\:text-blue-600:hover { color: #93c5fd !important; }
-[data-theme="dark"] .hover\:text-blue-800:hover { color: #bfdbfe !important; }
-/* File-input buttons (file: compiles to ::file-selector-button) */
-[data-theme="dark"] .file\:bg-blue-50::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
-[data-theme="dark"] .file\:text-blue-700::file-selector-button { color: #bfdbfe !important; }
-[data-theme="dark"] .hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgba(59, 130, 246, 0.26) !important; }
-
-/* Gray interaction-state variants (separate class names from the bare remaps) */
-[data-theme="dark"] .hover\:text-gray-600:hover,
-[data-theme="dark"] .hover\:text-gray-700:hover { color: #a6adc8 !important; }
-[data-theme="dark"] .hover\:text-gray-800:hover { color: #bac2de !important; }
-[data-theme="dark"] .hover\:text-gray-900:hover,
-[data-theme="dark"] .active\:text-gray-900:active { color: #cdd6f4 !important; }
-[data-theme="dark"] .active\:bg-gray-100:active { background-color: #313244 !important; }
-[data-theme="dark"] .active\:bg-gray-200:active { background-color: #45475a !important; }
-[data-theme="dark"] .active\:bg-gray-300:active,
-[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: #585b70 !important; }
-[data-theme="dark"] .disabled\:bg-gray-100:disabled { background-color: #1e1e2e !important; }
-[data-theme="dark"] .disabled\:bg-gray-200:disabled { background-color: #313244 !important; }
-[data-theme="dark"] .hover\:bg-gray-200\/50:hover { background-color: rgba(69, 71, 90, 0.5) !important; }
-[data-theme="dark"] .even\:bg-gray-50\/50:nth-child(even) { background-color: rgba(24, 24, 37, 0.5) !important; }
-[data-theme="dark"] .border-gray-50,
-[data-theme="dark"] .divide-gray-50 > :not(:last-child) { border-color: #2a2a3c !important; }
-[data-theme="dark"] .border-gray-200\/50 { border-color: rgba(49, 50, 68, 0.6) !important; }
-[data-theme="dark"] .hover\:border-gray-200:hover { border-color: #313244 !important; }
-[data-theme="dark"] .hover\:border-gray-300:hover { border-color: #45475a !important; }
-
-/* White panel surfaces / solid black ink. hover-to-white means "emphasize",
-   which on dark glass means a solid panel tint; hover-to-black ink flips to
-   brighter, not darker (e.g. the taskbar bell). */
-[data-theme="dark"] .bg-white\/85 { background-color: rgba(30, 30, 46, 0.85) !important; }
-[data-theme="dark"] .hover\:bg-white:hover { background-color: #1e1e2e !important; }
-[data-theme="dark"] .text-black { color: #cdd6f4 !important; }
-[data-theme="dark"] .hover\:text-black:hover { color: #ffffff !important; }
-
-/* Scrollbar */
-/* Force visible scrollbars on editable grids (macOS hides them by default) */
-.grid-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
-.grid-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
-.grid-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #f1f5f9; }
-.grid-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-.grid-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }
-
-[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
-[data-theme="dark"] ::-webkit-scrollbar-track { background: #181825; }
-[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #45475a; border-radius: 4px; }
-[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #585b70; }
-
-/* Documents app — page content styling. The editor is a bare contenteditable
-   and Tailwind's preflight strips list markers and element margins, so
-   restore them for anything typed into or imported from a document; images
-   are click-to-resize (menu) and never overflow the page. */
-.docs-editor ul { list-style: disc; padding-left: 1.5rem; margin: 0.25rem 0; }
-.docs-editor ul ul { list-style: circle; }
-.docs-editor ol { list-style: decimal; padding-left: 1.5rem; margin: 0.25rem 0; }
-.docs-editor li { margin: 0.125rem 0; }
-.docs-editor p { margin: 0 0 0.5rem; }
-.docs-editor img { max-width: 100%; height: auto; cursor: pointer; }
-.docs-editor img:hover { outline: 2px solid rgba(59, 130, 246, 0.45); outline-offset: 1px; }
-
-
-/* ═══════════════════════════════════════════════════
+@import "./ui.css";
+@import "./shell.css";

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export { A as ALT, a as ALT_SHIFT_D, b as ALT_SHIFT_E, c as ALT_SHIFT_N, d as Accordion, e as AccordionItem, f as AccordionProps, g as Align, h as AuthScreen, i as AuthScreenProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Banner, p as BannerEmphasis, q as BannerProps, r as BannerTone, s as BarChart, t as BarChartProps, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, x as Button, y as ButtonProps, z as ButtonSize, D as ButtonVariant, E as CMD_A, F as CMD_DOT, G as CMD_ENTER, H as CMD_K, I as CMD_S, J as Card, K as CardPadding, L as CardProps, M as CellStyle, N as ChatTemplate, O as Checkbox, Q as CheckboxProps, R as CheckoutTemplate, T as ColoredBadge, U as ColoredBadgeProps, C as ColumnDef, V as ConfirmProvider, W as ContainerFillChart, X as ContainerFillChartProps, Y as ContainerFillItem, Z as CountBadge, _ as CountBadgeProps, $ as CountBadgeTone, a0 as DashboardTemplate, a1 as DataTable, a2 as DataTableColumn, a3 as DataTablePage, a4 as DataTableProps, a5 as DateRangePicker, a6 as DateRangePickerProps, a7 as DescriptionColumns, a8 as DescriptionItem, a9 as DescriptionList, aa as DescriptionListProps, ab as Dialog, ac as DialogProps, ad as DialogSize, ae as Divider, af as DividerProps, ag as DividerSpacing, ah as DonutChart, ai as DonutChartProps, aj as DonutSegment, ak as Drawer, al as DrawerProps, am as DrawerSide, an as DrawerSize, ao as ENTER, ap as EditableGrid, aq as EditableGridProps, ar as EmailTemplate, as as EmptyState, at as EmptyStateProps, au as ErrorPage, av as ErrorPageProps, aw as FilePicker, ax as FilePickerProps, ay as FormField, az as FormFieldProps, aA as FormLayoutPage, aB as GLASS_DIVIDER, aD as GalleryTemplate, aE as Gap, aF as Grid, aG as GridCols, aH as GridColumn, aI as GridProps, aJ as HelpCenter, aK as HelpCenterDoc, aL as HelpCenterProps, aM as INPUT_BASE, aN as INPUT_SIZES, aO as Inline, aP as InlineProps, aQ as Input, aR as InputNumber, aS as InputNumberProps, aT as InputProps, aU as InputSize, aV as Justify, aW as Kanban, aX as KanbanColumn, aY as KanbanProps, aZ as Label, a_ as LabelProps, a$ as ListFooter, b0 as ListLoadError, b1 as ListLoadErrorProps, b2 as LoadingSpinner, b3 as LoadingSpinnerProps, b4 as MAX_FRACTION_DIGITS, b5 as MOD, b6 as Markdown, b7 as MarkdownProps, b8 as MediaUploadField, b9 as MediaUploadFieldProps, ba as MediaUploadGrid, bb as MediaUploadGridItem, bc as MediaUploadGridProps, bd as MetricBar, be as MetricBarProps, bf as Milestone, bg as MilestoneKind, bh as MilestoneTimeline, bi as MilestoneTimelineProps, bj as NativeSelect, bk as NumericKeypad, bl as NumericKeypadProps, bm as PageHeader, bn as PageHeaderProps, P as PaginatedResponse, bo as Pagination, bp as PaginationProps, bq as Paragraph, br as ParagraphProps, bs as PopupMenu, bt as PopupMenuDivider, bu as PopupMenuItem, bv as PopupMenuLabel, bw as Radio, bx as RadioProps, by as Result, bz as ResultProps, bA as ResultStatus, bB as SHIFT, bC as SearchableOption, bD as SearchableSelect, bE as SearchableSelectProps, bF as Segmented, bG as SegmentedOption, bH as SegmentedProps, bI as SegmentedSize, bJ as Select, bK as SelectOption, bL as SelectProps, bM as SemanticGroup, bN as SeverityTone, bO as ShellPrefsAdapter, bP as ShellPrefsProvider, bQ as SidebarActionButton, bR as SidebarActionButtonProps, bS as SidebarGroupLabel, bT as SidebarLayout, bU as SidebarLayoutProps, bV as SidebarNavItem, bW as Skeleton, bX as SkeletonProps, bY as SkeletonVariant, S as SortState, bZ as Sparkline, b_ as SparklineProps, b$ as Stack, c0 as StackProps, c1 as StatCard, c2 as StatCardProps, c3 as Statistic, c4 as StatisticProps, c5 as StatisticSize, c6 as StatisticTone, c7 as StatusBadge, c8 as StatusBadgeProvider, c9 as Switch, ca as SwitchProps, cb as SwitchSize, cc as TabItem, cd as Tabs, ce as TabsProps, cf as Text, cg as TextProps, ch as TextSize, ci as TextTone, cj as TextWeight, ck as Textarea, cl as TextareaProps, cm as Theme, cn as TileButton, co as TileButtonProps, cp as TileSize, cq as Title, cr as TitleLevel, cs as TitleProps, ct as ToastOptions, cu as ToastPlacement, cv as Tooltip, cw as TooltipProps, cx as TopNav, cy as TopNavItem, cz as TopNavProps, cA as VERSION, cB as appendKey, cC as applyThemePrefs, cD as backspace, cE as confirm, cF as confirmDestructive, cG as formatDate, cH as glassStyle, cI as inputClasses, cJ as isMac, cK as isSeverityTone, cL as mediaFileName, cM as prompt, cN as resolveTheme, cO as severityOf, cP as toISODate, cQ as toast, cR as useClickOutside, cS as useConfirm, cT as useFocusTrap, cU as useIsMobile, cV as useLocalStoragePrefs, cW as useScrollLock, cX as useShellPrefs, cY as useTheme } from '../index-Czn1re5M.js';
+import 'react';
+import 'react/jsx-runtime';