@mks2508/mks-ui 0.7.0 → 0.8.1

package/dist/index.css

@@ -1,1059 +0,0 @@
-
-
-/* react-ui/blocks/Sidebar/animations/tooltip.css */
-
-/**
- * Tooltip Transition Keyframes
- *
- * Sistema de animaciones CSS para transiciones de tooltip con:
- * - Items staggered enter/exit
- * - Grid-based height transitions
- * - 3D title rotations
- *
- * Performance: GPU-accelerated (transform + opacity only)
- */
-
-/* ============================================================================
-   ITEMS ANIMATIONS - Staggered Enter/Exit
-   ============================================================================ */
-
-@keyframes tooltip-item-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes tooltip-item-exit {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-}
-
-/**
- * Item States con CSS Custom Properties
- *
- * Uso: <div style="--animation-order: 0" data-state="entering">
- */
-.sidebar-sublink[data-state="entering"] {
-  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
-  animation-fill-mode: both;
-}
-
-.sidebar-sublink[data-state="leaving"] {
-  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
-  animation-delay: calc(var(--animation-order, 0) * 20ms);
-  animation-fill-mode: both;
-}
-
-/* ============================================================================
-   TITLE 3D ROTATIONS
-   ============================================================================ */
-
-/**
- * Title Rotate Up (direction-aware)
- * Usado cuando navegamos hacia arriba en el sidebar
- */
-@keyframes tooltip-title-rotate-up {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-below {
-  from {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title Rotate Down (direction-aware)
- * Usado cuando navegamos hacia abajo en el sidebar
- */
-@keyframes tooltip-title-rotate-down {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-above {
-  from {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title States
- */
-.tooltip-title[data-direction="up"][data-state="leaving"] {
-  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="up"][data-state="entering"] {
-  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="leaving"] {
-  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="entering"] {
-  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* ============================================================================
-   3D CUBE FACES (Enfoque A: Multi-cara)
-   ============================================================================ */
-
-/**
- * Cubo 3D con 6 caras para títulos
- *
- * Estructura:
- * .title-scene (perspective)
- *   └─ .title-cube (preserve-3d)
- *       ├─ .title-face--front
- *       ├─ .title-face--back
- *       ├─ .title-face--top
- *       ├─ .title-face--bottom
- *       ├─ .title-face--left
- *       └─ .title-face--right
- */
-
-.title-scene {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-}
-
-.title-cube {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  /* Empujar hacia atrás para evitar blur en texto */
-  transform: translateZ(-1rem);
-}
-
-.title-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 1rem;
-  font-weight: 500;
-}
-
-/* Posicionamiento de caras - Vertical rotation (rotateX) */
-.title-face--front {
-  transform: rotateX(0deg) translateZ(1rem);
-}
-
-.title-face--top {
-  transform: rotateX(90deg) translateZ(1rem);
-}
-
-.title-face--bottom {
-  transform: rotateX(-90deg) translateZ(1rem);
-}
-
-.title-face--back {
-  transform: rotateX(180deg) translateZ(1rem);
-}
-
-/* Estados del cubo - Direction-aware */
-.title-cube[data-face="front"] {
-  transform: translateZ(-1rem) rotateX(0deg);
-}
-
-.title-cube[data-face="top"] {
-  transform: translateZ(-1rem) rotateX(-90deg);
-}
-
-.title-cube[data-face="bottom"] {
-  transform: translateZ(-1rem) rotateX(90deg);
-}
-
-.title-cube[data-face="back"] {
-  transform: translateZ(-1rem) rotateX(180deg);
-}
-
-/* ============================================================================
-   GRID HEIGHT TRANSITION (Grid Trick)
-   ============================================================================ */
-
-/**
- * Grid trick para height: auto transitions
- *
- * Técnica: grid-template-rows: 0fr → 1fr
- * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
- */
-
-.tooltip-content-grid {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition-delay: 50ms; /* Empieza después del fade-out de items */
-}
-
-.tooltip-content-grid[data-state="open"] {
-  grid-template-rows: 1fr;
-}
-
-.tooltip-content-inner {
-  overflow: hidden;
-  min-height: 0; /* Crítico para que grid trick funcione */
-}
-
-/* ============================================================================
-   UTILITY CLASSES
-   ============================================================================ */
-
-/**
- * Contenedor con perspective para títulos crossfade
- */
-.tooltip-title-perspective {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-  overflow: hidden;
-}
-
-/**
- * Disable animations durante hover rápido (opcional)
- * Usar con cuidado: puede causar flickering
- */
-.tooltip-no-animations * {
-  animation: none !important;
-  transition: none !important;
-}
-
-/* ============================================================================
-   DEBUG HELPERS
-   ============================================================================ */
-
-/**
- * Visualización de estados en debug mode
- */
-[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
-  content: attr(data-state);
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 8px;
-  background: rgba(255, 0, 0, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
-  content: "dir:" attr(data-direction);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  font-size: 8px;
-  background: rgba(0, 0, 255, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-/* ============================================================================
-   PERFORMANCE OPTIMIZATIONS
-   ============================================================================ */
-
-/**
- * GPU acceleration hints
- */
-.sidebar-sublink[data-state],
-.tooltip-title[data-state],
-.title-cube {
-  will-change: transform, opacity;
-}
-
-/**
- * Contain layout/paint/style para mejor performance
- */
-.tooltip-content-grid {
-  contain: layout style paint;
-}
-
-/**
- * Reduce motion para accesibilidad
- */
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-sublink[data-state],
-  .tooltip-title[data-state],
-  .title-cube,
-  .tooltip-content-grid {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-
-
-/* react-ui/blocks/Terminal/panel/TerminalFilterDropdown/terminal-filter-dropdown.module.css */
-
-/**
- * TerminalFilterDropdown Styles.
- *
- * Uses CSS Anchor Positioning API for dropdown placement.
- * Button acts as anchor, dropdown is positioned relative to it
- * with automatic flip behavior at viewport edges.
- *
- * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
- */
-
-/* Trigger button - acts as CSS anchor */
-.triggerButton {
-  anchor-name: --filter-dropdown-anchor;
-}
-
-/* Dropdown menu - anchored to trigger button */
-.dropdownMenu {
-  position-anchor: --filter-dropdown-anchor;
-  position: fixed;
-
-  /* Position below and left-aligned */
-  left: anchor(left);
-  top: anchor(bottom);
-  margin-top: 4px;
-
-  /* Flip to above if no room below */
-  position-try-fallbacks: flip-block, flip-inline;
-
-  min-width: 180px;
-  z-index: 50;
-
-  /* Hidden by default */
-  display: none;
-  opacity: 0;
-  transform: translateY(-4px);
-  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
-  pointer-events: none;
-}
-
-.dropdownMenu[data-open="true"] {
-  display: block;
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-/* Fallback for browsers without CSS Anchor Positioning */
-@supports not (anchor-name: none) {
-  .dropdownMenu {
-    position: absolute;
-    left: 0;
-    top: calc(100% + 4px);
-    z-index: 50;
-  }
-
-  .dropdownMenu[data-open="true"] {
-    display: block;
-  }
-}
-
-
-
-/* react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.css */
-
-/**
- * TerminalSessionTabs Dropdown Styles.
- *
- * Uses CSS Anchor Positioning API for the "add container" dropdown.
- * The + button acts as anchor, dropdown is positioned below it
- * with automatic flip behavior at viewport edges.
- *
- * @module components/devenv/terminal/panel/terminal-session-tabs/styles
- */
-
-/* + button - acts as CSS anchor */
-.addButton {
-  anchor-name: --session-tabs-add-anchor;
-}
-
-/* Container dropdown - anchored to + button */
-.containerDropdown {
-  position-anchor: --session-tabs-add-anchor;
-  position: fixed;
-
-  /* Position below and left-aligned */
-  left: anchor(left);
-  top: anchor(bottom);
-  margin-top: 4px;
-
-  /* Flip to above if no room below */
-  position-try-fallbacks: flip-block, flip-inline;
-
-  min-width: 200px;
-  z-index: 50;
-
-  /* Hidden by default */
-  display: none;
-  opacity: 0;
-  transform: translateY(-4px);
-  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
-  pointer-events: none;
-}
-
-.containerDropdown[data-open="true"] {
-  display: block;
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-/* Fallback for browsers without CSS Anchor Positioning */
-@supports not (anchor-name: none) {
-  .containerDropdown {
-    position: absolute;
-    left: 0;
-    top: calc(100% + 4px);
-    z-index: 50;
-  }
-
-  .containerDropdown[data-open="true"] {
-    display: block;
-  }
-}
-
-
-
-/* react-ui/components/MorphingPopover/morphing-popover.module.css */
-
-/* CSS Variables for anchor positioning */
-.morphingPopoverContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-width: 220px;
-  --target-height: 120px;
-  --transition-duration: 0.2s;
-}
-
-/* Trigger button styles */
-.morphingTrigger {
-  anchor-name: var(--anchor-name);
-  width: 44px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  font-size: 24px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  transition: background-color 0.2s;
-}
-
-.morphingTrigger:hover {
-  background-color: hsl(var(--muted) / 0.5);
-}
-
-/* Popover styles - anchored to trigger by default */
-.morphingPopover {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
-  transform-origin: center center;
-  opacity: 0;
-}
-
-/* When popover is open - expand to target size */
-.morphingPopover:popover-open {
-  position-anchor: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: var(--target-width);
-  height: var(--target-height);
-  border-radius: 12px;
-  opacity: 1;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
-}
-
-/* Starting style for animation - browser support required */
-@starting-style {
-  .morphingPopover:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    transform: none;
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
-  }
-}
-
-/* Fallback for browsers without anchor positioning */
-@supports not (anchor-name: none) {
-  .morphingPopover {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .morphingPopover:popover-open {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  @starting-style {
-    .morphingPopover:popover-open {
-      transform: translate(-50%, -50%) scale(0.8);
-      opacity: 0;
-    }
-  }
-}
-
-/* Variant: Morphing to a specific target element */
-.morphingPopoverTargetContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-anchor-name: morphing-target;
-  --transition-duration: 0.2s;
-}
-
-.morphingPopoverTarget {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
-}
-
-.morphingPopoverTarget:popover-open {
-  position-anchor: var(--target-anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  border-radius: 12px;
-  min-width: 200px;
-  min-height: 120px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
-  opacity: 1;
-}
-
-@starting-style {
-  .morphingPopoverTarget:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
-  }
-}
-
-
-
-/* react-ui/primitives/waapi/Morph/techniques/useViewTransitions.module.css */
-
-/**
- * View Transitions API - Default transition styles.
- *
- * These styles apply to all view-transition pseudo-elements by default,
- * eliminating the need for dynamic style injection based on transition names.
- *
- * Usage: Apply `view-transition-name` via inline style or CSS variable:
- *   <div style={{ viewTransitionName: 'hero' }}>...</div>
- *
- * Or via CSS:
- *   .my-element { view-transition-name: hero; }
- */
-
-/* Default animation for all view transitions */
-::view-transition-old(*),
-::view-transition-new(*) {
-  animation-duration: 300ms;
-  animation-timing-function: ease-out;
-}
-
-
-
-/* react-ui/ui/DynamicToggle/DynamicToggle.css */
-
-/**
- * DynamicToggle v2 — CSS state transitions.
- *
- * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
- * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
- *
- * @import '@mks2508/mks-ui/react/ui/DynamicToggle/DynamicToggle.module.css';
- */
-
-/* ── Variables ── */
-[data-slot="dt-root"] {
-  --dt-dur: 0.22s;
-  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-  --dt-fade: 0.45;
-  --dt-indicator-dur: 0.3s;
-  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* ── Track: explicit row prevents h-full items from overflowing container ── */
-[data-slot="dt-root"] [data-slot="dt-track"] {
-  grid-template-rows: minmax(0, 1fr);
-}
-
-/* ── Top-level option spans 2 grid cols ── */
-[data-slot="dt-root"] [data-slot="dt-track"] > label {
-  grid-column: span 2;
-}
-
-/* ── Primary option text ── */
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--accent-foreground);
-  z-index: 2;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
-  color: var(--foreground);
-  opacity: var(--dt-fade);
-}
-
-/* ── Group: container queries ── */
-[data-slot="dt-root"] [data-slot="dt-group"] {
-  container-type: size;
-  overflow: hidden;
-}
-
-/* ══════════════════════════════════════════════════════════
- * INDICATOR POSITIONING
- *
- * Modern: CSS Anchor Positioning — indicator follows active option
- * Fallback: translate-based positioning for older browsers
- * ══════════════════════════════════════════════════════════ */
-
-/* ── Anchor-based indicator (requires full anchor API) ── */
-@supports (anchor-scope: all) {
-  /* Scope anchors per toggle instance */
-  [data-slot="dt-root"]:not([data-indicator="translate"]) {
-    anchor-scope: --dt-active;
-  }
-
-  /* Active option becomes the anchor via native :checked */
-  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
-    anchor-name: --dt-active;
-  }
-  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
-    anchor-name: --dt-active;
-  }
-
-  /* Single unified indicator: morphs from full-width to half-width */
-  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
-    position-anchor: --dt-active;
-    top: anchor(top);
-    right: anchor(right);
-    bottom: anchor(bottom);
-    left: anchor(left);
-    translate: none;
-    width: auto;
-    transition:
-      top var(--dt-indicator-dur) var(--dt-indicator-ease),
-      right var(--dt-indicator-dur) var(--dt-indicator-ease),
-      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
-      left var(--dt-indicator-dur) var(--dt-indicator-ease);
-  }
-
-  /* Hide the group indicator — unified indicator handles everything */
-  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
-    display: none;
-  }
-}
-
-/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
-@supports not (anchor-scope: all) {
-  /* Unified indicator: left/right transition morphs width + position */
-  [data-slot="dt-root"] [data-slot="dt-indicator"] {
-    left: 50%;
-    right: 0;
-    width: auto;
-    translate: none;
-    transition:
-      left var(--dt-indicator-dur) var(--dt-indicator-ease),
-      right var(--dt-indicator-dur) var(--dt-indicator-ease);
-  }
-  /* Top-level checked: indicator covers left half */
-  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-    left: 0;
-    right: 50%;
-  }
-  /* Group option 1 checked: indicator at 3rd quarter */
-  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
-  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
-    left: 50%;
-    right: 25%;
-  }
-  /* Group option 2 checked: indicator at 4th quarter */
-  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
-  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
-    left: 75%;
-    right: 0;
-  }
-  /* Hide group indicator — unified indicator handles everything */
-  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-    display: none;
-  }
-}
-
-/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
-[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
-  left: 50%;
-  right: 0;
-  width: auto;
-  translate: none;
-  transition:
-    left var(--dt-indicator-dur) var(--dt-indicator-ease),
-    right var(--dt-indicator-dur) var(--dt-indicator-ease);
-}
-[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  left: 0;
-  right: 50%;
-}
-[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
-  left: 50%;
-  right: 25%;
-}
-[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
-  left: 75%;
-  right: 0;
-}
-[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
-  display: none;
-}
-
-/* ══════════════════════════════════════════════════════════
- * GROUP COLLAPSED STATE
- *
- * ::before = title text (via data-label attr)
- * ::after  = combined opts text (via data-opts attr)
- * <label>s = controlled by data-collapsed mode
- *
- * 3 modes: title | opts | title-opts (default)
- * ══════════════════════════════════════════════════════════ */
-
-/* ── ::before — group title ── */
-[data-slot="dt-group"]::before {
-  content: attr(data-label);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% -80%;
-  color: var(--foreground);
-  font-size: inherit;
-  font-weight: 500;
-  z-index: 2;
-  white-space: nowrap;
-  pointer-events: none;
-  transition:
-    scale var(--dt-dur) var(--dt-ease),
-    translate var(--dt-dur) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease);
-}
-
-/* ── ::after — combined opts text ── */
-[data-slot="dt-group"]::after {
-  content: attr(data-opts);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% 20%;
-  color: var(--muted-foreground);
-  font-size: 0.85em;
-  opacity: 0.6;
-  z-index: 2;
-  white-space: nowrap;
-  pointer-events: none;
-  transition: opacity var(--dt-dur) var(--dt-ease);
-}
-[data-slot="dt-group"]:not([data-opts])::after {
-  content: none;
-}
-
-/* ── Group labels — transition props ── */
-[data-slot="dt-root"] [data-slot="dt-group"] label {
-  color: var(--muted-foreground);
-  cursor: pointer;
-  z-index: 2;
-  transition:
-    color var(--dt-dur) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease),
-    translate var(--dt-dur) var(--dt-ease);
-}
-[data-slot="dt-root"] [data-slot="dt-group"] label span {
-  display: grid;
-  place-items: center;
-  height: 100%;
-  width: 100%;
-  border-radius: var(--dt-radius, 9999px);
-  transition: scale var(--dt-dur) var(--dt-ease);
-}
-
-/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
-[data-slot="dt-group"][data-collapsed="title"]::before {
-  translate: -50% -50%;
-}
-[data-slot="dt-group"][data-collapsed="title"]::after {
-  display: none;
-}
-[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
-  scale: 0.5;
-}
-
-/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
-[data-slot="dt-group"][data-collapsed="opts"]::before {
-  display: none;
-}
-[data-slot="dt-group"][data-collapsed="opts"]::after {
-  translate: -50% -50%;
-  font-size: inherit;
-  opacity: 0.7;
-}
-[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
-  scale: 0.5;
-}
-
-/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
-/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
-   at all container sizes. The codepen original morph relied on specific dimensions
-   that don't translate to the component's size variants. Needs a different approach
-   (e.g., crossfade, flex layout, or JS-measured positions). */
-[data-slot="dt-group"][data-collapsed="title-opts"]::after {
-  content: none;
-}
-[data-slot="dt-group"][data-collapsed="title-opts"]::before {
-  translate: -50% -50%;
-}
-[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-
-/* ── When group expanded ── */
-[data-slot="dt-group"]:has(input:checked)::before {
-  translate: -50% -250%;
-  scale: 0.85;
-}
-[data-slot="dt-group"]:has(input:checked)::after {
-  opacity: 0;
-}
-[data-slot="dt-group"]:has(input:checked) label {
-  opacity: 0.75;
-  color: var(--muted-foreground);
-  translate: 0 0;
-}
-[data-slot="dt-group"]:has(input:checked) label span {
-  scale: 1;
-}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
-[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
-  color: var(--foreground);
-  opacity: 1;
-}
-
-/* ══════════════════════════════════════════════════════════
- * GROUP LABEL / BUBBLE (above or below the pill)
- *
- * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
- * In none mode, simple CSS-driven show/hide.
- * bubblePosition: top | bottom (no left/right in v2)
- * ══════════════════════════════════════════════════════════ */
-
-[data-slot="dt-group-label"] {
-  display: grid;
-  grid-template-rows: 0fr;
-  left: 20%;
-  right: 20%;
-  transition:
-    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease);
-  opacity: 0;
-  background: var(--card);
-  border: 1px solid var(--border);
-  z-index: 3;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-}
-[data-slot="dt-group-label"] > span {
-  overflow: hidden;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.75em;
-  height: calc(var(--dt-h, 38px) * 0.4);
-  box-sizing: border-box;
-}
-
-/* Top position */
-[data-slot="dt-group-label"][data-bubble-position="top"] {
-  bottom: 100%;
-  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
-  border-bottom: none;
-  margin-bottom: -1px;
-}
-
-/* Bottom position */
-[data-slot="dt-group-label"][data-bubble-position="bottom"] {
-  top: 100%;
-  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
-  border-top: none;
-  margin-top: -1px;
-}
-
-/* When group active → group label grows (vertical: top/bottom) */
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
-  grid-template-rows: 1fr;
-  opacity: 1;
-}
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > span {
-  padding: 0.35em 0.75em;
-}
-
-/* ── Filter morph mode ── */
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
-  border: none;
-}
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
-  position: relative;
-  z-index: 1;
-}
-
-/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
-  opacity: 0;
-  translate: -50% -80%;
-  scale: 1;
-}
-
-/* ── Path morph mode ── */
-[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
-  position: relative;
-  z-index: 1;
-}
-
-
-
-/* react-ui/ui/Tabs/Tabs.css */
-
-/**
- * Tabs CSS Anchor Positioning.
- *
- * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
- * The indicator automatically follows the active tab via anchor positioning.
- */
-
-/* Scope anchors per Tabs instance */
-[data-slot="tabs-list"] {
-  anchor-scope: --tabs-active;
-}
-
-/* Active tab becomes the anchor */
-[data-slot="tabs-tab"][data-active] {
-  anchor-name: --tabs-active;
-}
-
-/* Indicator follows the active anchor */
-[data-slot="tabs-indicator"] {
-  position-anchor: --tabs-active;
-  left: anchor(left);
-  right: anchor(right);
-  transition:
-    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Respect reduced motion preference */
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="tabs-indicator"] {
-    transition-duration: 0ms;
-  }
-}
-