@dxos/ui-theme 0.8.4-main.59c2e9b → 0.8.4-main.6fa680abb7

package/dist/plugin/node-cjs/theme.css

@@ -1,77 +1,256 @@
-@import "tailwindcss/base" layer(tw-base);
-@import "tailwindcss/utilities";
-@import "tailwindcss/components" layer(tw-components);
+@layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
+@import "tailwindcss";
 @import "@fontsource-variable/jetbrains-mono/wght-italic.css";
 @import "@fontsource-variable/jetbrains-mono/wght.css";
 @import "@fontsource/poiret-one";
 
-/* src/styles/layers/anchored-overflow.css */
-@layer utilities {
-  .overflow-anchored * {
-    overflow-anchor: none;
-  }
-  .overflow-anchor {
-    overflow-anchor: auto;
+/* src/css/theme/animation.css */
+@theme { --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1); @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } --animate-fade-in: fade-in 200ms ease-out; --animate-fade-out: fade-out 400ms ease-out; @keyframes slide-down-and-fade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } } @keyframes slide-left-and-fade { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-up-and-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-right-and-fade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); @keyframes toast-hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-slide-in-right { 0% { transform: translateX(calc(100% + 1rem)); } 100% { transform: translateX(0); } } @keyframes toast-slide-in-bottom { 0% { transform: translateY(calc(100% + 1rem)); } 100% { transform: translateY(0); } } @keyframes toast-swipe-out { 0% { transform: translateX(var(--radix-toast-swipe-end-x)); } 100% { transform: translateX(calc(100% + 1rem)); } } --animate-toast-hide: toast-hide 100ms ease-in forwards; --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards; @keyframes slide-down { from { height: 0px; } to { height: var(--radix-accordion-content-height); } } @keyframes slide-up { from { height: var(--radix-accordion-content-height); } to { height: 0px; } } --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1); --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1); @keyframes shimmer-loop { 100% { transform: translateX(100%); } } --animate-shimmer: shimmer-loop 2s infinite; @keyframes halo-pulse { 0% { opacity: 0.3; } 5% { opacity: 1; } 100% { opacity: 0.3; } } --animate-halo-pulse: halo-pulse 2s ease-out infinite; @keyframes progress-indeterminate { 0% { left: 0; width: 0%; } 25% { left: 25%; width: 50%; } 75% { left: 50%; width: 100%; } 100% { left: 100%; width: 0%; } } --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite; @keyframes trail { to { offset-distance: 100%; } } @keyframes trail-offset { 0% { offset-distance: 50%; } 100% { offset-distance: 150%; } } --animate-trail: trail 6s linear infinite; --animate-trail-offset: trail-offset 6s linear infinite; --animate-spin-slow: spin 3s linear infinite; @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } --animate-blink: blink 1s step-start infinite; }
+
+/* src/css/theme/border.css */
+@theme { --ring-offset-width-focus-offset: var(--dx-focus-offset); --ring-width-focus-line: var(--dx-focus-line); --ring-width-hair-line: var(--dx-hair-line); --ring-width-thick-line: var(--dx-thick-line); --ring-width-no-line: var(--dx-no-line); --border-width-landmark-line: var(--dx-landmark-line); --radius-none: 0; --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3); }
+
+/* src/css/theme/palette.css */
+@theme { --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); }
+
+/* src/css/theme/semantic.css */
+@theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrim-surface: light-dark( oklch(from var(--color-neutral-50) l c h / 0.5), oklch(from var(--color-neutral-950) l c h / 0.25) ); --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-card-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-accent-surface: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800)); --color-accent-surface-text: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-primary-separator: light-dark(var(--color-neutral-400), var(--color-neutral-800)); --color-subdued-separator: light-dark(var(--color-neutral-300), var(--color-neutral-900)); --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700)); --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800)); --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600)); --color-grid-comment-active: light-dark( oklch(from var(--color-green-400) l c h / 0.5), oklch(from var(--color-green-600) l c h / 0.5) ); --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1); --color-grid-selection-overlay: var(--color-blue-500); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600)); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
+
+/* src/css/theme/spacing.css */
+@theme { --spacing-screen-border: 1rem; --spacing-article-max-width: 50rem; --spacing-prose-max-width: 50rem; --spacing-popover-min-width: 12rem; --spacing-card-default-width: 20rem; --spacing-card-min-width: 18rem; --spacing-card-max-width: 22rem; --spacing-card-min-height: 18rem; --spacing-card-max-height: 30rem; --spacing-trim-xs: 0.375rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1.5rem; --spacing-tag-padding-block: 0.125rem; --spacing-text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-padding: var(--spacing-trim-sm); --spacing-icon-button-padding: var(--spacing-trim-xs); --spacing-scroll-padding: 4px; }
+@layer dx-tokens {
+  .dx-density-coarse {
+    --spacing-form-padding: var(--spacing-trim-md);
+    --spacing-icon-button-padding: var(--spacing-trim-sm);
+    --spacing-scroll-padding: 8px;
   }
 }
-
-/* src/styles/layers/animation.css */
-@layer utilities {
-  @keyframes blink {
-    0%, 50%, 100% {
-      opacity: 1;
-    }
-    25%, 75% {
-      opacity: 0;
-    }
+@layer dx-tokens {
+  :root {
+    --dx-line-0: 0px;
+    --dx-line-1: 1px;
+    --dx-line-2: 2px;
+    --dx-lacuna-12: 1.5rem;
+    --dx-lacuna-3: 0.375rem;
+    --dx-lacuna-4: 0.5rem;
+    --dx-lacuna-6: 0.75rem;
+    --dx-gutter-xs: 0.125rem;
+    --dx-gutter-sm: 0.5rem;
+    --dx-gutter-md: 1rem;
+    --dx-gutter-lg: 2rem;
+  }
+  :root {
+    --dx-hair-line: 1px;
+    --dx-landmark-line: 1px;
+    --dx-modal-line: 1px;
+    --dx-no-line: 0px;
+    --dx-thick-line: 2px;
+    --dx-focus-line: 2px;
+    --dx-no-line: var(--dx-line-0);
+    --dx-hair-line: var(--dx-line-1);
+    --dx-thick-line: var(--dx-line-2);
+    --dx-focus-offset: var(--dx-no-line);
+    --dx-focus-line: var(--dx-thick-line);
+    --dx-modal-line: var(--dx-hair-line);
+    --dx-grid-focus-indicator-width: var(--dx-hair-line);
+    --dx-input-fine: var(--dx-lacuna-3);
+    --dx-input-coarse: var(--dx-lacuna-4);
+  }
+  [data-grid-focus-indicator-variant=stack] {
+    --dx-grid-focus-indicator-width: var(--dx-thick-line);
   }
-  .animate-blink {
-    animation: blink 1s step-start infinite;
+  :root {
+    --dx-rail-content: 3rem;
+    --dx-rail-size: calc(var(--dx-rail-content) + 1px);
+    --dx-rail-item: calc(var(--dx-rail-content) - 1rem);
+    --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem + 1px);
+    --dx-topbar-size: var(--dx-rail-size);
+    --dx-toolbar-size: var(--dx-rail-content);
+    --dx-statusbar-size: var(--dx-rail-content);
+    --dx-nav-sidebar-size: 23rem;
+    --dx-complementary-sidebar-size: 25rem;
+    --dx-drawer-size: 50dvh;
+    --dx-l0-size: 74px;
+    --dx-l0-avatar-size: 3rem;
+    --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
+    --dx-r0-size: var(--dx-rail-size);
+    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
   }
-}
-
-/* src/styles/layers/attention.css */
-@layer utilities {
-  .attention-surface {
-    --surface-separator: transparent;
-    background-color: var(--dx-baseSurface);
-    border-color: var(--dx-separator);
+  :root {
+    --dx-calc-auto: auto;
+    --dx-calc-min: min-content;
+    --dx-calc-fit: fit-content;
+    --dx-calc-max: max-content;
+    --dx-calc-content: content;
+  }
+  @supports (block-size: calc-size(fit-content, size)) {
+    :root {
+      --dx-calc-auto: calc-size(auto, size);
+      --dx-calc-min: calc-size(min-content, size);
+      --dx-calc-fit: calc-size(fit-content, size);
+      --dx-calc-max: calc-size(max-content, size);
+      --dx-calc-content: calc-size(content, size);
+    }
   }
 }
 
-/* src/styles/layers/base.css */
+/* src/css/theme/styles.css */
+@theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-surface-text: var(--color-cyan-surface-text); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-fill: var(--color-emerald-fill); --color-success-surface: var(--color-emerald-surface); --color-success-surface-text: var(--color-emerald-surface-text); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-fill: var(--color-amber-fill); --color-warning-surface: var(--color-amber-surface); --color-warning-surface-text: var(--color-amber-surface-text); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-fill: var(--color-rose-fill); --color-error-surface: var(--color-rose-surface); --color-error-surface-text: var(--color-rose-surface-text); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700)); --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800)); --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200)); --color-red-text: light-dark(var(--color-red-700), var(--color-red-300)); --color-red-border: light-dark(var(--color-red-400), var(--color-red-600)); --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700)); --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800)); --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200)); --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300)); --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600)); --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700)); --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800)); --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300)); --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600)); --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700)); --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800)); --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200)); --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300)); --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600)); --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700)); --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800)); --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200)); --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300)); --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600)); --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700)); --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800)); --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200)); --color-green-text: light-dark(var(--color-green-700), var(--color-green-300)); --color-green-border: light-dark(var(--color-green-400), var(--color-green-600)); --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700)); --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800)); --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200)); --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300)); --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600)); --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700)); --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800)); --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200)); --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300)); --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600)); --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700)); --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800)); --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200)); --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300)); --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600)); --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700)); --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800)); --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200)); --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300)); --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600)); --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700)); --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800)); --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200)); --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700)); --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800)); --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200)); --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300)); --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600)); --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700)); --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800)); --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200)); --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300)); --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600)); --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700)); --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800)); --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200)); --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300)); --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600)); --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700)); --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800)); --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200)); --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300)); --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600)); --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700)); --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800)); --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200)); --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300)); --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600)); --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700)); --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800)); --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200)); --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300)); --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600)); }
+
+/* src/css/theme/text.css */
+@theme { --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; }
+
+/* src/css/base/base.css */
 @layer dx-base {
   :root {
+    color-scheme: light;
     touch-action: pan-x pan-y;
     font-synthesis: none;
     font-variation-settings: "wght" 400, "slnt" 0;
-    scroll-padding-block-start: theme(spacing.14);
-    scroll-padding-block-end: theme(spacing.2);
+    scroll-padding-block-start: var(--spacing-14);
+    scroll-padding-block-end: var(--spacing-2);
     @apply font-body;
   }
+  .dark {
+    color-scheme: dark;
+  }
   button {
+    @apply cursor-pointer;
     -webkit-tap-highlight-color: transparent;
   }
 }
 @layer dx-tokens {
+  :root {
+    --dx-tag-padding-block: var(--spacing-tag-padding-block);
+  }
   html,
   html.dark,
-  html .dark {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-    color: var(--dx-baseText);
-    --surface-text: var(--dx-baseText);
-    --description-text: var(--dx-description);
+  html .dark,
+  .sb-show-main {
+    background-color: var(--color-base-surface);
+    color: var(--color-base-surface-text);
+    --surface-bg: var(--color-base-surface);
+    --surface-text: var(--color-base-surface-text);
+    --description-text: var(--color-description);
+  }
+}
+
+/* src/css/base/typography.css */
+@layer dx-components {
+  .not-italic {
+    font-variation-settings: "wght" 400, "slnt" 0;
+  }
+  .font-thin,
+  .not-italic.font-thin,
+  .not-italic .font-thin,
+  .font-thin .not-italic {
+    font-variation-settings: "wght" 100, "slnt" 0;
+  }
+  .font-extralight,
+  .not-italic.font-extralight,
+  .not-italic .font-extralight,
+  .font-extralight .not-italic {
+    font-variation-settings: "wght" 200, "slnt" 0;
+  }
+  .font-light,
+  .not-italic.font-light,
+  .not-italic .font-light,
+  .font-light .not-italic {
+    font-variation-settings: "wght" 300, "slnt" 0;
+  }
+  .font-normal,
+  .not-italic.font-normal,
+  .not-italic .font-normal,
+  .font-normal .not-italic {
+    font-variation-settings: "wght" 400, "slnt" 0;
+  }
+  .font-medium,
+  .not-italic.font-medium,
+  .not-italic .font-medium,
+  .font-medium .not-italic {
+    font-variation-settings: "wght" 500, "slnt" 0;
+  }
+  .font-semibold,
+  .not-italic.font-semibold,
+  .not-italic .font-semibold,
+  .font-semibold .not-italic {
+    font-variation-settings: "wght" 600, "slnt" 0;
+  }
+  .font-bold,
+  .not-italic.font-bold,
+  .not-italic .font-bold,
+  .font-bold .not-italic {
+    font-variation-settings: "wght" 700, "slnt" 0;
+  }
+  .font-extrabold,
+  .not-italic.font-extrabold,
+  .not-italic .font-extrabold,
+  .font-extrabold .not-italic {
+    font-variation-settings: "wght" 800, "slnt" 0;
+  }
+  .font-black,
+  .not-italic.font-black,
+  .not-italic .font-black,
+  .font-black .not-italic {
+    font-variation-settings: "wght" 900, "slnt" 0;
+  }
+  .italic {
+    font-variation-settings: "wght" 400, "slnt" -10;
+  }
+  .italic.font-thin,
+  .italic .font-thin,
+  .font-thin .italic {
+    font-variation-settings: "wght" 100, "slnt" -10;
+  }
+  .italic.font-extralight,
+  .italic .font-extralight,
+  .font-extralight .italic {
+    font-variation-settings: "wght" 200, "slnt" -10;
+  }
+  .italic.font-light,
+  .italic .font-light,
+  .font-light .italic {
+    font-variation-settings: "wght" 300, "slnt" -10;
+  }
+  .italic.font-normal,
+  .italic .font-normal,
+  .font-normal .italic {
+    font-variation-settings: "wght" 400, "slnt" -10;
+  }
+  .italic.font-medium,
+  .italic .font-medium,
+  .font-medium .italic {
+    font-variation-settings: "wght" 500, "slnt" -10;
+  }
+  .italic.font-semibold,
+  .italic .font-semibold,
+  .font-semibold .italic {
+    font-variation-settings: "wght" 600, "slnt" -10;
+  }
+  .italic.font-bold,
+  .italic .font-bold,
+  .font-bold .italic {
+    font-variation-settings: "wght" 700, "slnt" -10;
+  }
+  .italic.font-extrabold,
+  .italic .font-extrabold,
+  .font-extrabold .italic {
+    font-variation-settings: "wght" 800, "slnt" -10;
+  }
+  .italic.font-black,
+  .italic .font-black,
+  .font-black .italic {
+    font-variation-settings: "wght" 900, "slnt" -10;
   }
 }
 
-/* src/styles/layers/button.css */
+/* src/css/components/button.css */
 @layer dx-components {
   .dx-button {
-    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-inputSurface min-bs-[2.5rem] pli-3;
+    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-input-surface min-h-[2.5rem] px-3;
     &[aria-pressed=true],
     &[aria-checked=true] {
-      @apply text-accentText bg-attention;
+      @apply text-accent-text bg-attention-surface;
     }
     &[disabled]:not([disabled=false]) {
       @apply opacity-40 cursor-not-allowed shadow-none;
@@ -79,113 +258,89 @@
     &[data-variant=ghost] {
       @apply bg-transparent;
       &:hover {
-        @apply bg-hoverSurface text-inherit;
+        @apply bg-hover-surface text-inherit;
       }
       &[data-state=open] {
-        @apply bg-inputSurface;
+        @apply bg-input-surface;
       }
       &[aria-pressed=true],
       &[aria-checked=true] {
-        @apply bg-baseSurface text-accentText;
+        @apply bg-base-surface text-accent-text;
       }
     }
     &[data-variant=outline] {
-      @apply border border-baseSurface bg-transparent;
+      @apply border border-base-surface bg-transparent;
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
     }
     &:not([disabled]),
     &[disabled=false] {
       &:hover {
-        @apply bg-hoverSurface;
+        @apply bg-hover-surface;
       }
       &[data-variant=primary] {
-        @apply text-accentSurfaceText bg-accentSurface;
+        @apply text-accent-surface-text bg-accent-surface;
         &:hover,
         &[aria-pressed=true],
         &[aria-checked=true] &[data-state=open] {
-          @apply bg-accentSurfaceHover;
+          @apply bg-accent-surface-hover;
         }
       }
       &[data-variant=destructive] {
-        @apply text-accentSurfaceText bg-roseFill;
+        @apply text-accent-surface-text bg-rose-fill;
         &:hover,
         &[aria-pressed=true],
         &[aria-checked=true] &[data-state=open] {
-          @apply bg-roseFill;
+          @apply bg-rose-fill;
         }
       }
     }
   }
   .dx-button:not([data-props~=grouped]) {
-    @apply rounded-sm;
+    @apply rounded-xs;
   }
   .dx-button:not([data-props~=wrap]) {
     @apply truncate;
   }
   @media (pointer: fine) {
     .dx-button[data-density=fine] {
-      @apply min-bs-[2rem] pli-2.5;
+      @apply min-h-[2rem] px-2.5;
     }
   }
 }
 
-/* src/styles/layers/can-scroll.css */
-@layer dx-components {
-  :root {
-    --can-scroll-inline: initial;
-  }
-  @keyframes detect-scroll-inline {
-    from, to {
-      --can-scroll-inline: ;
-    }
-  }
-  .justify-center-if-no-scroll {
-    justify-content: start;
-  }
-  @supports (animation-timeline: scroll(inline self)) {
-    .justify-center-if-no-scroll {
-      animation: detect-scroll-inline linear;
-      animation-timeline: scroll(inline self);
-      --justify-if-no-scroll: center;
-      --justify-if-can-scroll: var(--can-scroll-inline) start;
-      justify-content: var(--justify-if-can-scroll, var(--justify-if-no-scroll));
-    }
-  }
-}
-
-/* src/styles/layers/checkbox.css */
+/* src/css/components/checkbox.css */
 @layer dx-components {
   .dx-checkbox--switch,
   .dx-checkbox {
-    @apply border border-unAccent;
+    @apply border border-un-accent;
     &[aria-checked=true],
     &[aria-checked=mixed],
     &:checked {
-      @apply bg-accentSurface accent-accentSurface border-accentSurface;
+      @apply bg-accent-surface accent-accent-surface border-accent-surface;
     }
     &:not([disabled]),
     &[disabled=false] {
       &:hover {
-        @apply bg-unAccentHover accent-unAccentHover;
+        @apply bg-un-accent-hover accent-un-accent-hover;
         &[aria-checked=true],
         &[aria-checked=mixed],
         &:checked {
-          @apply bg-accentSurfaceHover accent-accentSurfaceHover border-accentSurfaceHover;
+          @apply bg-accent-surface-hover accent-accent-surface-hover border-accent-surface-hover;
         }
       }
     }
   }
   .dx-checkbox {
-    @apply is-4 bs-4 overflow-hidden shadow-inner transition-colors bg-unAccent accent-unAccent text-accentSurfaceText shrink-0 inline-grid place-items-center rounded-sm;
+    @apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-surface-text shrink-0 inline-grid place-items-center rounded-xs;
   }
   .dx-checkbox--switch {
-    @apply inline-block appearance-none relative shrink-0 bs-5 is-8;
-    @apply shadow-inner transition-colors bg-unAccent;
+    @apply inline-block appearance-none relative shrink-0 h-5 w-8;
+    @apply shadow-inner transition-colors bg-un-accent;
     @apply cursor-pointer rounded-full;
     &::before {
-      @apply is-3 bs-3 mli-[0.1875rem] mlb-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
+      @apply w-3 h-3 mx-[0.1875rem] my-[0.1875rem] absolute block bg-white rounded-full border-separator transition-transform duration-100 will-change-transform;
       content: "";
     }
     &[aria-checked=true],
@@ -199,10 +354,11 @@
   }
 }
 
-/* src/styles/layers/dialog.css */
+/* src/css/components/dialog.css */
 @layer dx-components {
   .dx-dialog__overlay {
-    @apply z-50 fixed grid inset-inline-0 block-start-0 bs-dvh pbs-[env(safe-area-inset-top)] place-items-center overflow-auto bg-scrimSurface;
+    @apply z-40 fixed grid inset-x-0 top-0 h-dvh py-[env(safe-area-inset-top)] place-items-center;
+    @apply bg-scrim-surface backdrop-blur-xs;
     &[data-state=open] {
       @apply animate-fade-in;
     }
@@ -221,23 +377,23 @@
       justify-items: center;
     }
   }
-  @media (min-width: theme("screens.sm")) {
+  @media (width >= theme(--breakpoint-sm)) {
     .dx-dialog__overlay {
       @apply p-[calc(env(safe-area-inset-top)+.6rem)];
     }
   }
-  @media (min-width: theme("screens.md")) {
+  @media (width >= theme(--breakpoint-md)) {
     .dx-dialog__overlay {
       @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
     }
   }
-  @media (min-width: theme("screens.lg")) {
+  @media (width >= theme(--breakpoint-lg)) {
     .dx-dialog__overlay {
       @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
     }
   }
   .dx-dialog__content {
-    @apply flex flex-col is-dvw max-is-full p-4 shadow-md backdrop-blur;
+    @apply flex flex-col w-dvw max-w-full max-h-full overflow-hidden shadow-md;
     &[data-state=open] {
       @apply animate-slide-up-and-fade;
     }
@@ -245,61 +401,39 @@
       @apply animate-slide-down-and-fade;
     }
   }
-  @media (min-width: theme("screens.sm")) {
+  @media (width >= theme(--breakpoint-sm)) {
     .dx-dialog__content {
-      @apply is-[95vw] border rounded-md border-separator;
+      @apply w-[95vw] border rounded-md border-separator;
     }
   }
-  @media (min-width: theme("screens.md")) {
+  @media (width >= theme(--breakpoint-md)) {
     .dx-dialog__content {
-      @apply max-is-[24rem];
+      @apply max-w-[24rem];
     }
   }
   .dx-dialog__title {
     @apply shrink-0 text-xl font-medium;
   }
-  .dx-dialog__description {
-    @apply mlb-2;
-  }
-}
-
-/* src/styles/layers/drag-preview.css */
-@layer dx-base {
-  body[data-drag-preview] {
-    i[data-tabster-dummy] {
-      display: none;
-    }
-  }
-}
-@layer utilities {
-  body[data-drag-preview] {
-    .drag-preview-p-0 {
-      padding-inline-start: 0;
-      padding-inline-end: 0;
-      padding-block-start: 0;
-      padding-block-end: 0;
-    }
-  }
 }
 
-/* src/styles/layers/focus-ring.css */
-@layer utilities {
+/* src/css/components/focus-ring.css */
+@layer dx-components {
   .dx-focus-ring,
   .dx-focus-ring-inset {
     &:not([disabled]),
     &[disabled=false] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
       &:focus-visible {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
         &[data-variant=primary] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -310,17 +444,17 @@
     &:not([disabled]),
     &[disabled=false] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
       &:focus {
-        @apply ring-focusLine ring-offset-focusOffset z-[1] ring-neutralFocusIndicator;
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
         &[data-variant=primary] {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -335,35 +469,35 @@
     &:not([disabled]),
     &[disabled=false] {
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
   .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
     &[data-variant=primary] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
   .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
-    @apply ring-focusLine ring-offset-focusOffset ring-neutralFocusIndicator;
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
     &[data-variant=primary] {
-      @apply ring-accentFocusIndicator;
+      @apply ring-[var(--color-accent-focus-indicator)];
     }
     &:hover {
-      @apply outline-none;
+      @apply outline-hidden;
       .dark & {
-        @apply outline-none;
+        @apply outline-hidden;
       }
     }
   }
@@ -392,19 +526,19 @@
         @apply z-20 pointer-events-none;
       }
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
       &:focus-visible {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
         &[data-variant=primary]::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -419,19 +553,19 @@
         @apply z-20 pointer-events-none;
       }
       &:focus {
-        @apply outline-none;
+        @apply outline-hidden;
       }
       &:focus {
         &::after {
-          @apply ring-focusLine ring-offset-focusOffset ring-inset z-[1] ring-neutralFocusIndicator;
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
         }
         &[data-variant=primary]::after {
-          @apply ring-accentFocusIndicator;
+          @apply ring-[var(--color-accent-focus-indicator)];
         }
         &:hover {
-          @apply outline-none;
+          @apply outline-hidden;
           .dark & {
-            @apply outline-none;
+            @apply outline-hidden;
           }
         }
       }
@@ -453,910 +587,908 @@
         position: fixed;
         inset: 0;
       }
-      @media screen(lg) {
-        &[data-sidebar-inline-start-state=expanded]::after {
-          inset-inline-start: var(--nav-sidebar-size);
+      @media (width >= theme(--breakpoint-lg)) {
+        &[data-sidebar-left-state=expanded]::after {
+          inset-inline-start: var(--dx-nav-sidebar-size);
         }
-        &[data-sidebar-inline-start-state=collapsed]::after {
-          inset-inline-start: var(--l0-size);
+        &[data-sidebar-left-state=collapsed]::after {
+          inset-inline-start: var(--dx-l0-size);
         }
-        &[data-sidebar-inline-end-state=expanded]::after {
-          inset-inline-end: var(--complementary-sidebar-size);
+        &[data-sidebar-right-state=expanded]::after {
+          inset-inline-end: var(--dx-complementary-sidebar-size);
         }
-        &[data-sidebar-inline-end-state=collapsed]::after {
-          inset-inline-end: var(--r0-size);
+        &[data-sidebar-right-state=collapsed]::after {
+          inset-inline-end: var(--dx-r0-size);
         }
       }
     }
   }
 }
 
-/* src/styles/layers/hues.css */
+/* src/css/components/panel.css */
 @layer dx-components {
-  .dx-text-hue[data-hue=red],
-  .dx-text-hue--red {
-    @apply text-redText;
+  .dx-panel[data-hue=neutral],
+  .dx-panel--neutral {
+    @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
   }
-  .dx-text-hue[data-hue=orange],
-  .dx-text-hue--orange {
-    @apply text-orangeText;
+  .dx-panel[data-hue=red],
+  .dx-panel--red {
+    @apply bg-red-surface text-red-surface-text border-red-border;
   }
-  .dx-text-hue[data-hue=amber],
-  .dx-text-hue--amber {
-    @apply text-amberText;
+  .dx-panel[data-hue=orange],
+  .dx-panel--orange {
+    @apply bg-orange-surface text-orange-surface-text border-orange-border;
   }
-  .dx-text-hue[data-hue=yellow],
-  .dx-text-hue--yellow {
-    @apply text-yellowText;
+  .dx-panel[data-hue=amber],
+  .dx-panel--amber {
+    @apply bg-amber-surface text-amber-surface-text border-amber-border;
   }
-  .dx-text-hue[data-hue=lime],
-  .dx-text-hue--lime {
-    @apply text-limeText;
+  .dx-panel[data-hue=yellow],
+  .dx-panel--yellow {
+    @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
   }
-  .dx-text-hue[data-hue=green],
-  .dx-text-hue--green {
-    @apply text-greenText;
+  .dx-panel[data-hue=lime],
+  .dx-panel--lime {
+    @apply bg-lime-surface text-lime-surface-text border-lime-border;
   }
-  .dx-text-hue[data-hue=emerald],
-  .dx-text-hue--emerald {
-    @apply text-emeraldText;
+  .dx-panel[data-hue=green],
+  .dx-panel--green {
+    @apply bg-green-surface text-green-surface-text border-green-border;
   }
-  .dx-text-hue[data-hue=teal],
-  .dx-text-hue--teal {
-    @apply text-tealText;
+  .dx-panel[data-hue=emerald],
+  .dx-panel--emerald {
+    @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
   }
-  .dx-text-hue[data-hue=cyan],
-  .dx-text-hue--cyan {
-    @apply text-cyanText;
+  .dx-panel[data-hue=teal],
+  .dx-panel--teal {
+    @apply bg-teal-surface text-teal-surface-text border-teal-border;
   }
-  .dx-text-hue[data-hue=sky],
-  .dx-text-hue--sky {
-    @apply text-skyText;
+  .dx-panel[data-hue=cyan],
+  .dx-panel--cyan {
+    @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
   }
-  .dx-text-hue[data-hue=blue],
-  .dx-text-hue--blue {
-    @apply text-blueText;
+  .dx-panel[data-hue=sky],
+  .dx-panel--sky {
+    @apply bg-sky-surface text-sky-surface-text border-sky-border;
   }
-  .dx-text-hue[data-hue=indigo],
-  .dx-text-hue--indigo {
-    @apply text-indigoText;
+  .dx-panel[data-hue=blue],
+  .dx-panel--blue {
+    @apply bg-blue-surface text-blue-surface-text border-blue-border;
   }
-  .dx-text-hue[data-hue=violet],
-  .dx-text-hue--violet {
-    @apply text-violetText;
+  .dx-panel[data-hue=indigo],
+  .dx-panel--indigo {
+    @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
   }
-  .dx-text-hue[data-hue=purple],
-  .dx-text-hue--purple {
-    @apply text-purpleText;
+  .dx-panel[data-hue=violet],
+  .dx-panel--violet {
+    @apply bg-violet-surface text-violet-surface-text border-violet-border;
   }
-  .dx-text-hue[data-hue=fuchsia],
-  .dx-text-hue--fuchsia {
-    @apply text-fuchsiaText;
+  .dx-panel[data-hue=purple],
+  .dx-panel--purple {
+    @apply bg-purple-surface text-purple-surface-text border-purple-border;
   }
-  .dx-text-hue[data-hue=pink],
-  .dx-text-hue--pink {
-    @apply text-pinkText;
+  .dx-panel[data-hue=fuchsia],
+  .dx-panel--fuchsia {
+    @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
   }
-  .dx-text-hue[data-hue=rose],
-  .dx-text-hue--rose {
-    @apply text-roseText;
+  .dx-panel[data-hue=pink],
+  .dx-panel--pink {
+    @apply bg-pink-surface text-pink-surface-text border-pink-border;
   }
-  .dx-text-hue[data-hue=info],
-  .dx-text-hue--info {
-    @apply text-cyanText;
+  .dx-panel[data-hue=rose],
+  .dx-panel--rose {
+    @apply bg-rose-surface text-rose-surface-text border-rose-border;
   }
-  .dx-text-hue[data-hue=success],
-  .dx-text-hue--success {
-    @apply text-emeraldText;
+  .dx-panel[data-hue=info],
+  .dx-panel--info {
+    @apply bg-info-surface text-info-surface-text border-info-border;
   }
-  .dx-text-hue[data-hue=warning],
-  .dx-text-hue--warning {
-    @apply text-amberText;
+  .dx-panel[data-hue=success],
+  .dx-panel--success {
+    @apply bg-success-surface text-success-surface-text border-success-border;
   }
-  .dx-text-hue[data-hue=error],
-  .dx-text-hue--error {
-    @apply text-roseText;
+  .dx-panel[data-hue=warning],
+  .dx-panel--warning {
+    @apply bg-warning-surface text-warning-surface-text border-warning-border;
+  }
+  .dx-panel[data-hue=error],
+  .dx-panel--error {
+    @apply bg-error-surface text-error-surface-text border-error-border;
   }
 }
 
-/* src/styles/layers/positioning.css */
-@layer utilities {
-  .snap-inline {
-    scroll-snap-type: inline var(--tw-scroll-snap-strictness);
+/* src/css/components/link.css */
+@layer dx-components {
+  .dx-link {
+    @apply text-accent-text hover:text-accent-text-hover;
   }
-  .snap-block {
-    scroll-snap-type: block var(--tw-scroll-snap-strictness);
+}
+
+/* src/css/components/scrollbar.css */
+@layer dx-components {
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-scrollbar-thumb-hover!;
   }
-  .sticky-top-0 {
-    --sticky-top: 0;
+  ::-webkit-scrollbar-thumb:active {
+    @apply bg-scrollbar-thumb-active!;
   }
-  .contain-layout {
-    contain: layout;
+  .dx-scrollbar-thin::-webkit-scrollbar {
+    @apply w-[4px];
   }
-}
-@layer dx-components {
-  .sticky-top-from-topbar-bottom {
-    --sticky-top: var(--topbar-size);
+  .dx-scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+    transition: background 0.15s;
   }
-  .sticky-bottom-from-statusbar-bottom {
-    --sticky-bottom: var(--statusbar-size);
+  .dx-scrollbar-thin:hover::-webkit-scrollbar-thumb {
+    @apply bg-scrollbar-thumb;
   }
 }
 
-/* src/styles/layers/main.css */
-@layer utilities {
-  .dx-main-content-padding {
-    @apply pis-0 scroll-ps-0 pie-0 scroll-pe-0;
-    @media (min-width: theme("screens.lg")) {
-      &[data-sidebar-inline-start-state=collapsed] {
-        @apply pis-[--l0-size] scroll-ps-[--l0-size];
-      }
-      &[data-sidebar-inline-start-state=expanded] {
-        @apply pis-[--nav-sidebar-size] scroll-ps-[--nav-sidebar-size];
-      }
-      &[data-sidebar-inline-end-state=collapsed] {
-        @apply pie-[--r0-size] scroll-pe-[--r0-size];
-      }
-      &[data-sidebar-inline-end-state=expanded] {
-        @apply pie-[--complementary-sidebar-size] scroll-pe-[--complementary-sidebar-size];
-      }
-    }
+/* src/css/components/surface.css */
+@layer dx-components {
+  .dx-base-surface {
+    @apply bg-base-surface text-base-surface-text;
+    --surface-bg: var(--color-base-surface);
   }
-  .dx-main-content-padding-transitions {
-    transition-property:
-      padding-inline-start,
-      padding-inline-end,
-      scroll-padding-start,
-      scroll-padding-end;
-    @apply duration-200 ease-in-out-symmetric;
+  .dx-sidebar-surface {
+    @apply bg-sidebar-surface text-base-surface-text;
+    --surface-bg: var(--color-sidebar-surface);
   }
-  .dx-main-intrinsic-size {
-    @apply is-[calc(100dvw)-2*var(--main-spacing)] transition-[inline-size] ease-in-out-symmetric duration-200;
-    @media (min-width: theme("screens.lg")) {
-      &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=closed] {
-        inline-size: calc(100dvw - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=closed] {
-        inline-size: calc(100dvw - var(--l0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=closed] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=collapsed] {
-        inline-size: calc(100dvw - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=collapsed] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=collapsed] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--r0-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=closed][data-sidebar-inline-end-state=expanded] {
-        inline-size: calc(100dvw - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=collapsed][data-sidebar-inline-end-state=expanded] {
-        inline-size: calc(100dvw - var(--l0-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-      &[data-sidebar-inline-start-state=expanded][data-sidebar-inline-end-state=expanded] {
-        inline-size: calc(100dvw - var(--nav-sidebar-size) - var(--complementary-sidebar-size) - 2 * var(--main-spacing));
-      }
-    }
+  .dx-modal-surface {
+    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    --surface-bg: var(--color-modal-surface);
   }
-  .dx-main-bounce-layout {
-    @apply fixed inset-0 z-0 overflow-auto overscroll-auto;
+  .dx-attention-surface {
+    @apply bg-attention-surface text-base-surface-text;
+    --surface-bg: var(--color-attention-surface);
   }
 }
+
+/* src/css/components/tag.css */
 @layer dx-components {
-  .dx-main-sidebar {
-    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
-    @apply duration-200 ease-in-out-symmetric;
-    @apply border-landmarkLine border-subduedSeparator rounded-md;
-    @apply sidebar-surface backdrop-blur-md dark:backdrop-blur-lg;
-    transition-property:
-      inset-inline-start,
-      inset-inline-end,
-      inline-size;
-    inset-block-start: max(0.5rem, env(safe-area-inset-top));
-    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
-    inline-size: calc(100dvw - 3rem);
-    z-index: 7;
-    @media (min-width: theme("screens.lg")) {
-      @apply block-start-0 block-end-0 rounded-none border-lb-0;
-    }
-    &[data-resizing=false] {
-      @apply duration-200;
-    }
-    &[data-side=is] {
-      @apply -inline-start-[100vw] border-ie-landmarkLine border-subduedSeparator;
-      z-index: 8;
-      &[data-state=expanded] {
-        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
-        @media (min-width: theme("screens.lg")) {
-          @apply inline-start-0;
-        }
-      }
-      @media (min-width: theme("screens.sm")) {
-        @apply is-[--nav-sidebar-size];
-      }
-      @media (min-width: theme("screens.lg")) {
-        @apply border-is-0;
-        &[data-state=collapsed] {
-          @apply is-[--l0-size] inline-start-0;
-        }
-        &[data-state=expanded] {
-          @apply is-[--nav-sidebar-size];
-        }
-      }
-    }
-    &[data-side=ie] {
-      @apply -inline-end-[100vw] border-is-landmarkLine border-separator;
-      &[data-state=expanded] {
-        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
-        @media (min-width: theme("screens.lg")) {
-          @apply inline-end-0;
-        }
-      }
-      @media (min-width: theme("screens.sm")) {
-        @apply is-[--complementary-sidebar-size];
-      }
-      @media (min-width: theme("screens.lg")) {
-        @apply border-ie-0;
-        &[data-state=collapsed] {
-          @apply is-[--r0-size] inline-end-0;
-        }
-        &[data-state=expanded] {
-          @apply is-[--complementary-sidebar-size];
-        }
-      }
-    }
+  .dx-tag {
+    @apply inline-block text-xs font-semibold m-0.5 px-1 rounded-sm cursor-default truncate;
+    padding-block: var(--spacing-tag-padding-block);
+    user-select: none;
   }
-  .dx-main-overlay {
-    @apply fixed inset-0 bg-scrimSurface;
-    @apply transition-opacity duration-200 ease-in-out-symmetric;
-    @apply opacity-0 hidden;
-    z-index: 6;
-    &[data-state=open] {
-      @apply opacity-100 block;
-      @media (min-width: theme("screens.lg")) {
-        @apply opacity-100 hidden;
-      }
+  .dx-tag--anchor {
+    @apply inline cursor-pointer -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+    &:hover {
+      @apply bg-hover-surface;
     }
   }
-}
-
-/* src/styles/layers/native.css */
-@layer utilities {
-  .app-drag {
-    -webkit-user-select: none;
-    -webkit-app-region: drag;
-    --app-region: drag;
-  }
-  .app-no-drag {
-    -webkit-app-region: no-drag;
-    --app-region: no-drag;
+  .dx-tag[data-hue=neutral],
+  .dx-tag--neutral {
+    @apply bg-neutral-surface text-neutral-surface-text;
+  }
+  .dx-tag[data-hue=red],
+  .dx-tag--red {
+    @apply bg-red-surface text-red-surface-text;
+  }
+  .dx-tag[data-hue=orange],
+  .dx-tag--orange {
+    @apply bg-orange-surface text-orange-surface-text;
+  }
+  .dx-tag[data-hue=amber],
+  .dx-tag--amber {
+    @apply bg-amber-surface text-amber-surface-text;
+  }
+  .dx-tag[data-hue=yellow],
+  .dx-tag--yellow {
+    @apply bg-yellow-surface text-yellow-surface-text;
+  }
+  .dx-tag[data-hue=lime],
+  .dx-tag--lime {
+    @apply bg-lime-surface text-lime-surface-text;
+  }
+  .dx-tag[data-hue=green],
+  .dx-tag--green {
+    @apply bg-green-surface text-green-surface-text;
+  }
+  .dx-tag[data-hue=emerald],
+  .dx-tag--emerald {
+    @apply bg-emerald-surface text-emerald-surface-text;
+  }
+  .dx-tag[data-hue=teal],
+  .dx-tag--teal {
+    @apply bg-teal-surface text-teal-surface-text;
+  }
+  .dx-tag[data-hue=cyan],
+  .dx-tag--cyan {
+    @apply bg-cyan-surface text-cyan-surface-text;
+  }
+  .dx-tag[data-hue=sky],
+  .dx-tag--sky {
+    @apply bg-sky-surface text-sky-surface-text;
+  }
+  .dx-tag[data-hue=blue],
+  .dx-tag--blue {
+    @apply bg-blue-surface text-blue-surface-text;
+  }
+  .dx-tag[data-hue=indigo],
+  .dx-tag--indigo {
+    @apply bg-indigo-surface text-indigo-surface-text;
+  }
+  .dx-tag[data-hue=violet],
+  .dx-tag--violet {
+    @apply bg-violet-surface text-violet-surface-text;
+  }
+  .dx-tag[data-hue=purple],
+  .dx-tag--purple {
+    @apply bg-purple-surface text-purple-surface-text;
+  }
+  .dx-tag[data-hue=fuchsia],
+  .dx-tag--fuchsia {
+    @apply bg-fuchsia-surface text-fuchsia-surface-text;
+  }
+  .dx-tag[data-hue=pink],
+  .dx-tag--pink {
+    @apply bg-pink-surface text-pink-surface-text;
+  }
+  .dx-tag[data-hue=rose],
+  .dx-tag--rose {
+    @apply bg-rose-surface text-rose-surface-text;
+  }
+  .dx-tag[data-hue=info],
+  .dx-tag--info {
+    @apply bg-cyan-surface text-cyan-surface-text;
+  }
+  .dx-tag[data-hue=success],
+  .dx-tag--success {
+    @apply bg-emerald-surface text-emerald-surface-text;
+  }
+  .dx-tag[data-hue=warning],
+  .dx-tag--warning {
+    @apply bg-amber-surface text-amber-surface-text;
+  }
+  .dx-tag[data-hue=error],
+  .dx-tag--error {
+    @apply bg-rose-surface text-rose-surface-text;
   }
 }
 
-/* src/styles/layers/size.css */
-.size-container {
-  container-type: size;
-}
-.container-max-width {
-  @apply is-full max-is-container-max-width mli-auto;
-}
-.card-default-width {
-  @apply is-card-default-width;
-}
-.card-min-width {
-  @apply min-is-card-min-width;
-}
-.card-max-width {
-  @apply is-full max-is-card-max-width;
+/* src/css/components/text.css */
+@layer dx-components {
+  .dx-text[data-hue=info],
+  .dx-text--info {
+    @apply text-cyan-text;
+  }
+  .dx-text[data-hue=success],
+  .dx-text--success {
+    @apply text-emerald-text;
+  }
+  .dx-text[data-hue=warning],
+  .dx-text--warning {
+    @apply text-amber-text;
+  }
+  .dx-text[data-hue=error],
+  .dx-text--error {
+    @apply text-rose-text;
+  }
+  .dx-text[data-hue=neutral],
+  .dx-text--neutral {
+    @apply text-neutral-text;
+  }
+  .dx-text[data-hue=red],
+  .dx-text--red {
+    @apply text-red-text;
+  }
+  .dx-text[data-hue=orange],
+  .dx-text--orange {
+    @apply text-orange-text;
+  }
+  .dx-text[data-hue=amber],
+  .dx-text--amber {
+    @apply text-amber-text;
+  }
+  .dx-text[data-hue=yellow],
+  .dx-text--yellow {
+    @apply text-yellow-text;
+  }
+  .dx-text[data-hue=lime],
+  .dx-text--lime {
+    @apply text-lime-text;
+  }
+  .dx-text[data-hue=green],
+  .dx-text--green {
+    @apply text-green-text;
+  }
+  .dx-text[data-hue=emerald],
+  .dx-text--emerald {
+    @apply text-emerald-text;
+  }
+  .dx-text[data-hue=teal],
+  .dx-text--teal {
+    @apply text-teal-text;
+  }
+  .dx-text[data-hue=cyan],
+  .dx-text--cyan {
+    @apply text-cyan-text;
+  }
+  .dx-text[data-hue=sky],
+  .dx-text--sky {
+    @apply text-sky-text;
+  }
+  .dx-text[data-hue=blue],
+  .dx-text--blue {
+    @apply text-blue-text;
+  }
+  .dx-text[data-hue=indigo],
+  .dx-text--indigo {
+    @apply text-indigo-text;
+  }
+  .dx-text[data-hue=violet],
+  .dx-text--violet {
+    @apply text-violet-text;
+  }
+  .dx-text[data-hue=purple],
+  .dx-text--purple {
+    @apply text-purple-text;
+  }
+  .dx-text[data-hue=fuchsia],
+  .dx-text--fuchsia {
+    @apply text-fuchsia-text;
+  }
+  .dx-text[data-hue=pink],
+  .dx-text--pink {
+    @apply text-pink-text;
+  }
+  .dx-text[data-hue=rose],
+  .dx-text--rose {
+    @apply text-rose-text;
+  }
 }
-.popover-max-width {
-  @apply is-max max-is-popover-max-width;
+
+/* src/css/layout/main.css */
+@layer dx-components {
+  .dx-main-bounce-layout {
+    @apply fixed overflow-auto overscroll-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    transition-property:
+      padding-inline-start,
+      padding-inline-end,
+      scroll-padding-start,
+      scroll-padding-end;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    z-index: 0;
+  }
+  .dx-main-mobile-layout {
+    @apply absolute inset-0 overflow-hidden flex flex-col;
+  }
+  .dx-main-content-padding-transitions {
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    transition-property:
+      padding-inline-start,
+      padding-inline-end,
+      scroll-padding-start,
+      scroll-padding-end;
+  }
+  .dx-main-intrinsic-size {
+    inline-size: calc(100dvw - 2 * var(--main-spacing));
+    transition-property: inline-size;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state=closed][data-sidebar-right-state=closed] {
+        inline-size: calc(100dvw - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=collapsed][data-sidebar-right-state=closed] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=expanded][data-sidebar-right-state=closed] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=closed][data-sidebar-right-state=collapsed] {
+        inline-size: calc(100dvw - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=collapsed][data-sidebar-right-state=collapsed] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=expanded][data-sidebar-right-state=collapsed] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=closed][data-sidebar-right-state=expanded] {
+        inline-size: calc(100dvw - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=collapsed][data-sidebar-right-state=expanded] {
+        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+      &[data-sidebar-left-state=expanded][data-sidebar-right-state=expanded] {
+        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
+      }
+    }
+  }
 }
-.popover-card-width {
-  inline-size: min(var(--radix-popper-available-width), calc(var(--dx-popover-max-width) - 2 * var(--dx-hairLine)));
+@layer dx-components {
+  .dx-main-sidebar {
+    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply border-primary-separator rounded-md;
+    @apply backdrop-blur-md;
+    .dark & {
+      @apply backdrop-blur-lg;
+    }
+    background-color: var(--color-sidebar-surface);
+    --surface-bg: var(--color-sidebar-surface);
+    transition-property:
+      inset-inline-start,
+      inset-inline-end,
+      inline-size;
+    inset-block-start: max(0.5rem, env(safe-area-inset-top));
+    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
+    inline-size: calc(100dvw - 3rem);
+    z-index: 7;
+    @media (width >= theme(--breakpoint-lg)) {
+      @apply top-0 bottom-0 rounded-none border-y-0;
+    }
+    &[data-resizing=false] {
+      @apply duration-200;
+    }
+    &[data-side=is] {
+      @apply -start-[100vw] border-e;
+      border-inline-end-width: var(--border-width-landmark-line) !important;
+      border-inline-end-style: solid;
+      z-index: 8;
+      &[data-state=expanded] {
+        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply start-0;
+        }
+      }
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-nav-sidebar-size);
+      }
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
+        &[data-state=collapsed] {
+          @apply w-(--dx-l0-size) start-0;
+        }
+        &[data-state=expanded] {
+          @apply w-(--dx-nav-sidebar-size);
+        }
+      }
+    }
+    &[data-side=ie] {
+      @apply -end-[100vw] border-s;
+      border-inline-start-width: var(--border-width-landmark-line);
+      border-inline-start-style: solid;
+      &[data-state=expanded] {
+        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
+        @media (width >= theme(--breakpoint-lg)) {
+          @apply end-0;
+        }
+      }
+      @media (width >= theme(--breakpoint-sm)) {
+        @apply w-(--dx-complementary-sidebar-size);
+      }
+      @media (width >= theme(--breakpoint-lg)) {
+        border-inline-end-width: 0;
+        &[data-state=collapsed] {
+          @apply w-(--dx-r0-size) end-0;
+        }
+        &[data-state=expanded] {
+          @apply w-(--dx-complementary-sidebar-size);
+        }
+      }
+    }
+  }
+  .dx-main-overlay {
+    @apply fixed inset-0 bg-scrim-surface;
+    transition-property: opacity;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    @apply opacity-0 hidden;
+    z-index: 6;
+    &[data-state=open] {
+      @apply opacity-100 block;
+      @media (width >= theme(--breakpoint-lg)) {
+        @apply opacity-100 hidden;
+      }
+    }
+  }
+  .dx-main-content-padding {
+    padding-inline-start: 0;
+    scroll-padding-inline-start: 0;
+    padding-inline-end: 0;
+    scroll-padding-inline-end: 0;
+    @media (width >= theme(--breakpoint-lg)) {
+      &[data-sidebar-left-state=collapsed] {
+        padding-inline-start: var(--dx-l0-size);
+        scroll-padding-inline-start: var(--dx-l0-size);
+      }
+      &[data-sidebar-left-state=expanded] {
+        padding-inline-start: var(--dx-nav-sidebar-size);
+        scroll-padding-inline-start: var(--dx-nav-sidebar-size);
+      }
+      &[data-sidebar-right-state=collapsed] {
+        padding-inline-end: var(--dx-r0-size);
+        scroll-padding-inline-end: var(--dx-r0-size);
+      }
+      &[data-sidebar-right-state=expanded] {
+        padding-inline-end: var(--dx-complementary-sidebar-size);
+        scroll-padding-inline-end: var(--dx-complementary-sidebar-size);
+      }
+    }
+  }
 }
-.popover-card-height {
-  block-size: min(var(--radix-popper-available-height), 100dvh);
+
+/* src/css/layout/native.css */
+@layer dx-components {
+  .dx-app-drag {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    --app-region: drag;
+  }
+  .dx-app-no-drag {
+    -webkit-app-region: no-drag;
+    --app-region: no-drag;
+  }
 }
-.popover-square {
-  inline-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)), min(var(--radix-popper-available-height), 100dvh));
-  block-size: min(min(var(--radix-popper-available-width), var(--dx-popover-max-width)), min(var(--radix-popper-available-height), 100dvh));
+
+/* src/css/layout/positioning.css */
+@layer dx-components {
+  .dx-contain-layout {
+    contain: layout;
+  }
+  .dx-sticky-top-0 {
+    --sticky-top: 0;
+  }
+  .dx-sticky-top-from-topbar-bottom {
+    --sticky-top: var(--dx-topbar-size);
+  }
+  .dx-sticky-bottom-from-statusbar-bottom {
+    --sticky-bottom: var(--dx-statusbar-size);
+  }
 }
-.popover-card-max-width {
-  max-inline-size: min(var(--radix-popper-available-width), var(--dx-popover-max-width));
+
+/* src/css/layout/size.css */
+@layer dx-components {
+  .dx-size-container {
+    container-type: size;
+  }
+  .dx-container {
+    @apply flex-1 min-h-0 min-w-0 h-full w-full;
+  }
+  .dx-article {
+    @apply mx-auto w-full max-w-article-max-width;
+  }
+  .dx-card-square {
+    inline-size: min(min(var(--radix-popper-available-width), var(--spacing-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
+    block-size: min(min(var(--radix-popper-available-width), var(--spacing-card-max-width)), min(var(--radix-popper-available-height), 100dvh));
+  }
+  .dx-card-default-width {
+    @apply w-card-default-width;
+  }
+  .dx-card-min-width {
+    @apply min-w-card-min-width;
+  }
+  .dx-card-max-width {
+    @apply w-full max-w-card-max-width;
+  }
+  .dx-card-popover {
+    @apply inline-card-max-width bg-card-surface;
+    max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
+    max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
+  }
 }
 @layer dx-components {
   [data-size="0"],
   [data-block-size="0"] {
-    @apply bs-0;
+    @apply h-0;
   }
   [data-size=px],
   [data-block-size=px] {
-    @apply bs-px;
+    @apply h-px;
   }
   [data-size="0.5"],
   [data-block-size="0.5"] {
-    @apply bs-0.5;
+    @apply h-0.5;
   }
   [data-size="1"],
   [data-block-size="1"] {
-    @apply bs-1;
+    @apply h-1;
   }
   [data-size="1.5"],
   [data-block-size="1.5"] {
-    @apply bs-1.5;
+    @apply h-1.5;
   }
   [data-size="2"],
   [data-block-size="2"] {
-    @apply bs-2;
+    @apply h-2;
   }
   [data-size="2.5"],
   [data-block-size="2.5"] {
-    @apply bs-2.5;
+    @apply h-2.5;
   }
   [data-size="3"],
   [data-block-size="3"] {
-    @apply bs-3;
+    @apply h-3;
   }
   [data-size="3.5"],
   [data-block-size="3.5"] {
-    @apply bs-3.5;
+    @apply h-3.5;
   }
   [data-size="4"],
   [data-block-size="4"] {
-    @apply bs-4;
+    @apply h-4;
   }
   [data-size="5"],
   [data-block-size="5"] {
-    @apply bs-5;
+    @apply h-5;
   }
   [data-size="6"],
   [data-block-size="6"] {
-    @apply bs-6;
+    @apply h-6;
   }
   [data-size="7"],
   [data-block-size="7"] {
-    @apply bs-7;
+    @apply h-7;
   }
   [data-size="8"],
   [data-block-size="8"] {
-    @apply bs-8;
+    @apply h-8;
   }
   [data-size="9"],
   [data-block-size="9"] {
-    @apply bs-9;
+    @apply h-9;
   }
   [data-size="10"],
   [data-block-size="10"] {
-    @apply bs-10;
+    @apply h-10;
   }
   [data-size="11"],
   [data-block-size="11"] {
-    @apply bs-11;
+    @apply h-11;
   }
   [data-size="12"],
   [data-block-size="12"] {
-    @apply bs-12;
+    @apply h-12;
   }
   [data-size="14"],
   [data-block-size="14"] {
-    @apply bs-14;
+    @apply h-14;
   }
   [data-size="16"],
   [data-block-size="16"] {
-    @apply bs-16;
+    @apply h-16;
   }
   [data-size="20"],
   [data-block-size="20"] {
-    @apply bs-20;
+    @apply h-20;
   }
   [data-size="24"],
   [data-block-size="24"] {
-    @apply bs-24;
+    @apply h-24;
   }
   [data-size="28"],
   [data-block-size="28"] {
-    @apply bs-28;
+    @apply h-28;
   }
   [data-size="32"],
   [data-block-size="32"] {
-    @apply bs-32;
+    @apply h-32;
   }
   [data-size="36"],
   [data-block-size="36"] {
-    @apply bs-36;
+    @apply h-36;
   }
   [data-size="40"],
   [data-block-size="40"] {
-    @apply bs-40;
+    @apply h-40;
   }
   [data-size="44"],
   [data-block-size="44"] {
-    @apply bs-44;
+    @apply h-44;
   }
   [data-size="48"],
   [data-block-size="48"] {
-    @apply bs-48;
+    @apply h-48;
   }
   [data-size="52"],
   [data-block-size="52"] {
-    @apply bs-52;
+    @apply h-52;
   }
   [data-size="56"],
   [data-block-size="56"] {
-    @apply bs-56;
+    @apply h-56;
   }
   [data-size="60"],
   [data-block-size="60"] {
-    @apply bs-60;
+    @apply h-60;
   }
   [data-size="64"],
   [data-block-size="64"] {
-    @apply bs-64;
+    @apply h-64;
   }
   [data-size="72"],
   [data-block-size="72"] {
-    @apply bs-72;
+    @apply h-72;
   }
   [data-size="80"],
   [data-block-size="80"] {
-    @apply bs-80;
+    @apply h-80;
   }
   [data-size="96"],
   [data-block-size="96"] {
-    @apply bs-96;
+    @apply h-96;
   }
   [data-size="0"],
   [data-inline-size="0"] {
-    @apply is-0;
+    @apply w-0;
   }
   [data-size=px],
   [data-inline-size=px] {
-    @apply is-px;
+    @apply w-px;
   }
   [data-size="0.5"],
   [data-inline-size="0.5"] {
-    @apply is-0.5;
+    @apply w-0.5;
   }
   [data-size="1"],
   [data-inline-size="1"] {
-    @apply is-1;
+    @apply w-1;
   }
   [data-size="1.5"],
   [data-inline-size="1.5"] {
-    @apply is-1.5;
+    @apply w-1.5;
   }
   [data-size="2"],
   [data-inline-size="2"] {
-    @apply is-2;
+    @apply w-2;
   }
   [data-size="2.5"],
   [data-inline-size="2.5"] {
-    @apply is-2.5;
+    @apply w-2.5;
   }
   [data-size="3"],
   [data-inline-size="3"] {
-    @apply is-3;
+    @apply w-3;
   }
   [data-size="3.5"],
   [data-inline-size="3.5"] {
-    @apply is-3.5;
+    @apply w-3.5;
   }
   [data-size="4"],
   [data-inline-size="4"] {
-    @apply is-4;
+    @apply w-4;
   }
   [data-size="5"],
   [data-inline-size="5"] {
-    @apply is-5;
+    @apply w-5;
   }
   [data-size="6"],
   [data-inline-size="6"] {
-    @apply is-6;
+    @apply w-6;
   }
   [data-size="7"],
   [data-inline-size="7"] {
-    @apply is-7;
+    @apply w-7;
   }
   [data-size="8"],
   [data-inline-size="8"] {
-    @apply is-8;
+    @apply w-8;
   }
   [data-size="9"],
   [data-inline-size="9"] {
-    @apply is-9;
+    @apply w-9;
   }
   [data-size="10"],
   [data-inline-size="10"] {
-    @apply is-10;
+    @apply w-10;
   }
   [data-size="11"],
   [data-inline-size="11"] {
-    @apply is-11;
+    @apply w-11;
   }
   [data-size="12"],
   [data-inline-size="12"] {
-    @apply is-12;
+    @apply w-12;
   }
   [data-size="14"],
   [data-inline-size="14"] {
-    @apply is-14;
+    @apply w-14;
   }
   [data-size="16"],
   [data-inline-size="16"] {
-    @apply is-16;
+    @apply w-16;
   }
   [data-size="20"],
   [data-inline-size="20"] {
-    @apply is-20;
+    @apply w-20;
   }
   [data-size="24"],
   [data-inline-size="24"] {
-    @apply is-24;
+    @apply w-24;
   }
   [data-size="28"],
   [data-inline-size="28"] {
-    @apply is-28;
+    @apply w-28;
   }
   [data-size="32"],
   [data-inline-size="32"] {
-    @apply is-32;
+    @apply w-32;
   }
   [data-size="36"],
   [data-inline-size="36"] {
-    @apply is-36;
+    @apply w-36;
   }
   [data-size="40"],
   [data-inline-size="40"] {
-    @apply is-40;
+    @apply w-40;
   }
   [data-size="44"],
   [data-inline-size="44"] {
-    @apply is-44;
+    @apply w-44;
   }
   [data-size="48"],
   [data-inline-size="48"] {
-    @apply is-48;
+    @apply w-48;
   }
   [data-size="52"],
   [data-inline-size="52"] {
-    @apply is-52;
+    @apply w-52;
   }
   [data-size="56"],
   [data-inline-size="56"] {
-    @apply is-56;
+    @apply w-56;
   }
   [data-size="60"],
   [data-inline-size="60"] {
-    @apply is-60;
+    @apply w-60;
   }
   [data-size="64"],
   [data-inline-size="64"] {
-    @apply is-64;
+    @apply w-64;
   }
   [data-size="72"],
   [data-inline-size="72"] {
-    @apply is-72;
+    @apply w-72;
   }
   [data-size="80"],
   [data-inline-size="80"] {
-    @apply is-80;
+    @apply w-80;
   }
   [data-size="96"],
   [data-inline-size="96"] {
-    @apply is-96;
-  }
-}
-
-/* src/styles/layers/surfaces.css */
-@layer utilities {
-  .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-  .dark .base-surface {
-    background-color: var(--dx-baseSurface);
-    --surface-bg: var(--dx-baseSurface);
-  }
-  .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-  .dark .sidebar-surface {
-    background-color: var(--dx-sidebarSurface);
-    --surface-bg: var(--dx-sidebarSurface);
-  }
-  .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
-  }
-  .dark .modal-surface {
-    background-color: var(--dx-modalSurface);
-    --surface-bg: var(--dx-modalSurface);
+    @apply w-96;
   }
 }
 
-/* src/styles/layers/tag.css */
-@layer dx-tokens {
-  :root {
-    --dx-tag-padding-block: 0.125rem;
-  }
-}
-@layer dx-components {
-  .dx-tag {
-    @apply inline-block text-xs font-semibold m-0.5 pli-1 rounded-sm cursor-default truncate;
-    padding-block: var(--dx-tag-padding-block);
-    user-select: none;
-  }
-  .dx-tag--anchor {
-    @apply inline cursor-pointer -mli-[4px] pli-[3px] plb-0.5 border border-separator rounded-sm bg-groupSurface transition-colors;
-    &:hover {
-      @apply bg-hoverSurface;
-    }
-  }
-  .dx-tag[data-hue=neutral],
-  .dx-tag--neutral {
-    @apply bg-separator text-neutral-700 dark:text-neutral-150;
-  }
-  .dx-tag[data-hue=red],
-  .dx-tag--red {
-    @apply bg-redSurface text-redSurfaceText;
-  }
-  .dx-tag[data-hue=orange],
-  .dx-tag--orange {
-    @apply bg-orangeSurface text-orangeSurfaceText;
-  }
-  .dx-tag[data-hue=amber],
-  .dx-tag--amber {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-  .dx-tag[data-hue=yellow],
-  .dx-tag--yellow {
-    @apply bg-yellowSurface text-yellowSurfaceText;
-  }
-  .dx-tag[data-hue=lime],
-  .dx-tag--lime {
-    @apply bg-limeSurface text-limeSurfaceText;
-  }
-  .dx-tag[data-hue=green],
-  .dx-tag--green {
-    @apply bg-greenSurface text-greenSurfaceText;
-  }
-  .dx-tag[data-hue=emerald],
-  .dx-tag--emerald {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-  .dx-tag[data-hue=teal],
-  .dx-tag--teal {
-    @apply bg-tealSurface text-tealSurfaceText;
-  }
-  .dx-tag[data-hue=cyan],
-  .dx-tag--cyan {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-  .dx-tag[data-hue=sky],
-  .dx-tag--sky {
-    @apply bg-skySurface text-skySurfaceText;
-  }
-  .dx-tag[data-hue=blue],
-  .dx-tag--blue {
-    @apply bg-blueSurface text-blueSurfaceText;
-  }
-  .dx-tag[data-hue=indigo],
-  .dx-tag--indigo {
-    @apply bg-indigoSurface text-indigoSurfaceText;
-  }
-  .dx-tag[data-hue=violet],
-  .dx-tag--violet {
-    @apply bg-violetSurface text-violetSurfaceText;
-  }
-  .dx-tag[data-hue=purple],
-  .dx-tag--purple {
-    @apply bg-purpleSurface text-purpleSurfaceText;
-  }
-  .dx-tag[data-hue=fuchsia],
-  .dx-tag--fuchsia {
-    @apply bg-fuchsiaSurface text-fuchsiaSurfaceText;
-  }
-  .dx-tag[data-hue=pink],
-  .dx-tag--pink {
-    @apply bg-pinkSurface text-pinkSurfaceText;
-  }
-  .dx-tag[data-hue=rose],
-  .dx-tag--rose {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-  .dx-tag[data-hue=info],
-  .dx-tag--info {
-    @apply bg-cyanSurface text-cyanSurfaceText;
-  }
-  .dx-tag[data-hue=success],
-  .dx-tag--success {
-    @apply bg-emeraldSurface text-emeraldSurfaceText;
-  }
-  .dx-tag[data-hue=warning],
-  .dx-tag--warning {
-    @apply bg-amberSurface text-amberSurfaceText;
-  }
-  .dx-tag[data-hue=error],
-  .dx-tag--error {
-    @apply bg-roseSurface text-roseSurfaceText;
-  }
-}
+/* src/css/utilities.css */
+@utility dx-icon-inline { @apply inline-block align-[-0.125em]; }
 
-/* src/styles/layers/tldraw.css */
-@layer dx-components {
-  .tl-container.tl-theme__light {
-    --color-accent: var(--color-accent);
-    --color-background: var(--surface-bg);
-    --color-panel-contrast: var(--dx-separator);
-    --color-panel-overlay: rgba(255, 255, 255, 0.82);
-  }
-  .tl-container.tl-theme__dark {
-    --color-accent: var(--color-accent);
-    --color-background: var(--surface-bg);
-    --color-divider: var(--dx-separator);
-    --color-panel: var(--dx-attention);
-    --color-panel-contrast: var(--dx-separator);
-    --color-panel-overlay: rgba(54, 61, 68, 0.82);
-  }
-}
+/* src/css/integrations/codemirror.css */
+@theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800)); --color-cm-comment-text: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-cm-code: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-cm-code-mark: var(--color-blue-500); --color-cm-mark-opacity: 0.5; --color-cm-heading: light-dark(var(--color-neutral-900), var(--color-neutral-400)); }
 
-/* src/styles/layers/tokens.css */
-@layer dx-tokens {
-  @tokens dx;
-  :root {
-    --sticky-top: 0;
-    --rail-content: 3rem;
-    --rail-size: calc(var(--rail-content) + 1px);
-    --rail-action: calc(var(--rail-content) - 0.5rem + 1px);
-    --rail-item: calc(var(--rail-content) - 1rem);
-    --line-height: 32px;
-    --topbar-size: var(--rail-size);
-    --toolbar-size: var(--rail-content);
-    --statusbar-size: theme(spacing.8);
-    --nav-sidebar-size: 22.5rem;
-    --complementary-sidebar-size: 25rem;
-    --l0-size: 74px;
-    --l0-avatar-size: 3rem;
-    --l1-size: calc(var(--nav-sidebar-size) - var(--l0-size));
-    --r0-size: var(--rail-size);
-    --r1-size: calc(var(--complementary-sidebar-size) - var(--r0-size));
-    --text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
-  }
-  :root {
-    --dx-calc-auto: auto;
-    --dx-calc-min: min-content;
-    --dx-calc-fit: fit-content;
-    --dx-calc-max: max-content;
-    --dx-calc-content: content;
-  }
-  @supports (block-size: calc-size(fit-content, size)) {
-    :root {
-      --dx-calc-auto: calc-size(auto, size);
-      --dx-calc-min: calc-size(min-content, size);
-      --dx-calc-fit: calc-size(fit-content, size);
-      --dx-calc-max: calc-size(max-content, size);
-      --dx-calc-content: calc-size(content, size);
-    }
-  }
+/* src/css/integrations/tldraw.css */
+.tl-background {
+  --color-background: var(--color-base-surface);
 }
-
-/* src/styles/layers/typography.css */
-@layer utilities {
-  .not-italic {
-    font-variation-settings: "wght" 400, "slnt" 0;
-  }
-  .font-thin,
-  .not-italic.font-thin,
-  .not-italic .font-thin,
-  .font-thin .not-italic {
-    font-variation-settings: "wght" 100, "slnt" 0;
-  }
-  .font-extralight,
-  .not-italic.font-extralight,
-  .not-italic .font-extralight,
-  .font-extralight .not-italic {
-    font-variation-settings: "wght" 200, "slnt" 0;
-  }
-  .font-light,
-  .not-italic.font-light,
-  .not-italic .font-light,
-  .font-light .not-italic {
-    font-variation-settings: "wght" 300, "slnt" 0;
-  }
-  .font-normal,
-  .not-italic.font-normal,
-  .not-italic .font-normal,
-  .font-normal .not-italic {
-    font-variation-settings: "wght" 400, "slnt" 0;
-  }
-  .font-medium,
-  .not-italic.font-medium,
-  .not-italic .font-medium,
-  .font-medium .not-italic {
-    font-variation-settings: "wght" 500, "slnt" 0;
-  }
-  .font-semibold,
-  .not-italic.font-semibold,
-  .not-italic .font-semibold,
-  .font-semibold .not-italic {
-    font-variation-settings: "wght" 600, "slnt" 0;
-  }
-  .font-bold,
-  .not-italic.font-bold,
-  .not-italic .font-bold,
-  .font-bold .not-italic {
-    font-variation-settings: "wght" 700, "slnt" 0;
-  }
-  .font-extrabold,
-  .not-italic.font-extrabold,
-  .not-italic .font-extrabold,
-  .font-extrabold .not-italic {
-    font-variation-settings: "wght" 800, "slnt" 0;
-  }
-  .font-black,
-  .not-italic.font-black,
-  .not-italic .font-black,
-  .font-black .not-italic {
-    font-variation-settings: "wght" 900, "slnt" 0;
-  }
-  .italic {
-    font-variation-settings: "wght" 400, "slnt" -10;
-  }
-  .italic.font-thin,
-  .italic .font-thin,
-  .font-thin .italic {
-    font-variation-settings: "wght" 100, "slnt" -10;
-  }
-  .italic.font-extralight,
-  .italic .font-extralight,
-  .font-extralight .italic {
-    font-variation-settings: "wght" 200, "slnt" -10;
-  }
-  .italic.font-light,
-  .italic .font-light,
-  .font-light .italic {
-    font-variation-settings: "wght" 300, "slnt" -10;
-  }
-  .italic.font-normal,
-  .italic .font-normal,
-  .font-normal .italic {
-    font-variation-settings: "wght" 400, "slnt" -10;
-  }
-  .italic.font-medium,
-  .italic .font-medium,
-  .font-medium .italic {
-    font-variation-settings: "wght" 500, "slnt" -10;
-  }
-  .italic.font-semibold,
-  .italic .font-semibold,
-  .font-semibold .italic {
-    font-variation-settings: "wght" 600, "slnt" -10;
-  }
-  .italic.font-bold,
-  .italic .font-bold,
-  .font-bold .italic {
-    font-variation-settings: "wght" 700, "slnt" -10;
-  }
-  .italic.font-extrabold,
-  .italic .font-extrabold,
-  .font-extrabold .italic {
-    font-variation-settings: "wght" 800, "slnt" -10;
-  }
-  .italic.font-black,
-  .italic .font-black,
-  .font-black .italic {
-    font-variation-settings: "wght" 900, "slnt" -10;
-  }
+.tl-container.tl-theme__light,
+.tl-container.tl-theme__dark {
+  --color-selected: var(--color-accent-surface);
+  --color-panel: var(--color-modal-surface);
+  --color-panel-contrast: var(--color-separator);
 }
 
-/* src/styles/layers/index.css */
-@layer dx-tokens, user-tokens, tw-base, dx-base, tw-components, dx-components, utilities;
-
 /* src/theme.css */
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
+@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
+@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
+@source inline("border-{info,success,warning,error}-border");
+@plugin "@tailwindcss/forms";
+@plugin "tailwind-scrollbar";
+@plugin "tailwindcss-radix";
+@variant dark (&:where(.dark, .dark *));
+@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
+@custom-variant hover-hover (@media (hover: hover));
+@custom-variant pointer-fine (@media (pointer: fine));
 /*# sourceMappingURL=theme.css.map */