dialkit 1.2.1 → 1.3.0

package/dist/svelte/theme-css.d.ts

@@ -1,2 +1,2 @@
-export declare const themeCSS = "@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\n\n/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n  --dial-text-focus: #ffffff;\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-dropdown-bg: #2a2a2a;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.dialkit-panel-inner {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px 0 12px;\n  transform: translateZ(0);\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: 100%;\n  max-height: none;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-focus);\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: 1px solid var(--dial-surface-subtle);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--dial-surface-active);\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-active .dialkit-slider-fill {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--dial-text-primary);\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n  display: inline-flex;\n  align-items: center;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: var(--dial-text-focus);\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--dial-text-primary);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  display: flex;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n  margin-right: -6px;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  width: 100%;\n  aspect-ratio: 256 / 140;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  flex: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-select-option {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-color-hex {\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  cursor: text;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input {\n  width: 7ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-transform: uppercase;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--dial-border-hover);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.dialkit-color-swatch:hover {\n  transform: scale(1.1);\n}\n\n.dialkit-color-picker-native {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  width: max-content;\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-focus);\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcut Pill */\n.dialkit-shortcut-pill {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--dial-text-tertiary);\n  background: var(--dial-surface-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 6px;\n  letter-spacing: 0.02em;\n  line-height: 16px;\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n}\n\n.dialkit-shortcut-pill-active {\n  color: var(--dial-text-primary);\n  background: var(--dial-border-hover);\n}\n\n/* Shortcuts Menu Trigger */\n.dialkit-shortcuts-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-shortcuts-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-shortcuts-trigger svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcuts Dropdown */\n.dialkit-shortcuts-dropdown {\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 8px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n  min-width: 200px;\n}\n\n.dialkit-shortcuts-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dial-text-tertiary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 4px 8px 8px;\n}\n\n.dialkit-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dialkit-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n}\n\n.dialkit-shortcuts-row-key {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  min-width: 28px;\n  text-align: center;\n}\n\n.dialkit-shortcuts-row-label {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n}\n\n.dialkit-shortcuts-row-mode {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--dial-text-tertiary);\n  font-style: italic;\n}\n\n.dialkit-shortcuts-hint {\n  font-size: 11px;\n  color: var(--dial-text-tertiary);\n  padding: 6px 8px 2px;\n  border-top: 1px solid var(--dial-border);\n  margin-top: 4px;\n}\n\n/* \u2500\u2500 Light Theme \u2500\u2500 */\n.dialkit-root[data-theme=\"light\"] {\n  --dial-surface: rgba(0, 0, 0, 0.04);\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n  --dial-text-root: #000000;\n  --dial-text-section: rgba(0, 0, 0, 0.65);\n  --dial-text-label: rgba(0, 0, 0, 0.6);\n  --dial-text-focus: #000000;\n\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n  --dial-border: rgba(0, 0, 0, 0.1);\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n  --dial-glass-bg: #fafafa;\n  --dial-dropdown-bg: #ffffff;\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Light mode: SVG visualization overrides */\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line {\n  stroke: rgba(0, 0, 0, 0.08);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line[stroke-dasharray] {\n  stroke: rgba(0, 0, 0, 0.15);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz path {\n  stroke: rgba(0, 0, 0, 0.5);\n}\n\n/* Light mode: toggle thumb needs shadow for definition */\n.dialkit-root[data-theme=\"light\"] .dialkit-toggle-thumb {\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u2500\u2500 System preference: light \u2500\u2500 */\n@media (prefers-color-scheme: light) {\n  .dialkit-root[data-theme=\"system\"] {\n    --dial-surface: rgba(0, 0, 0, 0.04);\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n    --dial-text-root: #000000;\n    --dial-text-section: rgba(0, 0, 0, 0.65);\n    --dial-text-label: rgba(0, 0, 0, 0.6);\n    --dial-text-focus: #000000;\n\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n    --dial-border: rgba(0, 0, 0, 0.1);\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n    --dial-glass-bg: #fafafa;\n    --dial-dropdown-bg: #ffffff;\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line {\n    stroke: rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line[stroke-dasharray] {\n    stroke: rgba(0, 0, 0, 0.15);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz path {\n    stroke: rgba(0, 0, 0, 0.5);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-toggle-thumb {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n}\n";
+export declare const themeCSS = "@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\n\n/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  position: relative;\n\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n  --dial-text-focus: #ffffff;\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-dropdown-bg: #2a2a2a;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  max-height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: inherit;\n  height: auto;\n  overflow: visible;\n}\n\n.dialkit-panel-inner {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px 0 12px;\n  transform: translateZ(0);\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-origin-x=\"left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n}\n\n.dialkit-panel[data-origin-x=\"right\"] .dialkit-panel-inner {\n  transform-origin: top right;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\n  transform-origin: top left;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: auto;\n  max-height: inherit;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: inherit;\n  height: auto;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header {\n  cursor: grab;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header:active {\n  cursor: grabbing;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-icon {\n  cursor: pointer;\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-focus);\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: 1px solid var(--dial-surface-subtle);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root):last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) {\n  padding: 0 12px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) .dialkit-panel-icon {\n  top: 14px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {\n  height: 44px;\n  padding: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {\n  height: 44px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  gap: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {\n  margin: 0;\n  padding-bottom: 0;\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: none;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-title-root {\n  line-height: 20px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {\n  border-top: none;\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-top: 4px;\n  padding-bottom: 12px;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--dial-surface-active);\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-active .dialkit-slider-fill {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--dial-text-primary);\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n  display: inline-flex;\n  align-items: center;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: var(--dial-text-focus);\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--dial-text-primary);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  display: flex;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n  margin-right: -6px;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  width: 100%;\n  aspect-ratio: 256 / 140;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-panel-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: var(--dial-row-height);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  flex: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-select-option {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-color-hex {\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  cursor: text;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input {\n  width: 7ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-transform: uppercase;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--dial-border-hover);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.dialkit-color-swatch:hover {\n  transform: scale(1.1);\n}\n\n.dialkit-color-picker-native {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  width: max-content;\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-focus);\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcut Pill */\n.dialkit-shortcut-pill {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--dial-text-tertiary);\n  background: var(--dial-surface-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 6px;\n  letter-spacing: 0.02em;\n  line-height: 16px;\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n}\n\n.dialkit-shortcut-pill-active {\n  color: var(--dial-text-primary);\n  background: var(--dial-border-hover);\n}\n\n/* Shortcuts Menu Trigger */\n.dialkit-shortcuts-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-shortcuts-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-shortcuts-trigger svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcuts Dropdown */\n.dialkit-shortcuts-dropdown {\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 8px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n  min-width: 200px;\n}\n\n.dialkit-shortcuts-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dial-text-tertiary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 4px 8px 8px;\n}\n\n.dialkit-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dialkit-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n}\n\n.dialkit-shortcuts-row-key {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  min-width: 28px;\n  text-align: center;\n}\n\n.dialkit-shortcuts-row-label {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n}\n\n.dialkit-shortcuts-row-mode {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--dial-text-tertiary);\n  font-style: italic;\n}\n\n.dialkit-shortcuts-hint {\n  font-size: 11px;\n  color: var(--dial-text-tertiary);\n  padding: 6px 8px 2px;\n  border-top: 1px solid var(--dial-border);\n  margin-top: 4px;\n}\n\n/* \u2500\u2500 Light Theme \u2500\u2500 */\n.dialkit-root[data-theme=\"light\"] {\n  --dial-surface: rgba(0, 0, 0, 0.04);\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n  --dial-text-root: #000000;\n  --dial-text-section: rgba(0, 0, 0, 0.65);\n  --dial-text-label: rgba(0, 0, 0, 0.6);\n  --dial-text-focus: #000000;\n\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n  --dial-border: rgba(0, 0, 0, 0.1);\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n  --dial-glass-bg: #fafafa;\n  --dial-dropdown-bg: #ffffff;\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Light mode: SVG visualization overrides */\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line {\n  stroke: rgba(0, 0, 0, 0.08);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line[stroke-dasharray] {\n  stroke: rgba(0, 0, 0, 0.15);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz path {\n  stroke: rgba(0, 0, 0, 0.5);\n}\n\n/* Light mode: toggle thumb needs shadow for definition */\n.dialkit-root[data-theme=\"light\"] .dialkit-toggle-thumb {\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* \u2500\u2500 System preference: light \u2500\u2500 */\n@media (prefers-color-scheme: light) {\n  .dialkit-root[data-theme=\"system\"] {\n    --dial-surface: rgba(0, 0, 0, 0.04);\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n    --dial-text-root: #000000;\n    --dial-text-section: rgba(0, 0, 0, 0.65);\n    --dial-text-label: rgba(0, 0, 0, 0.6);\n    --dial-text-focus: #000000;\n\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n    --dial-border: rgba(0, 0, 0, 0.1);\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\n\n    --dial-glass-bg: #fafafa;\n    --dial-dropdown-bg: #ffffff;\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line {\n    stroke: rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line[stroke-dasharray] {\n    stroke: rgba(0, 0, 0, 0.15);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz path {\n    stroke: rgba(0, 0, 0, 0.5);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-toggle-thumb {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n}\n";
 //# sourceMappingURL=theme-css.d.ts.map

package/dist/svelte/theme-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,k44BA8yCpB,CAAC"}
+{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,8j/BAg5CpB,CAAC"}

package/dist/svelte/theme-css.js

@@ -3,6 +3,8 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
 
 /* Dialkit Theme - Dark glassmorphic design */
 .dialkit-root {
+  position: relative;
+
   /* Surfaces */
   --dial-surface: rgba(255, 255, 255, 0.05);
   --dial-surface-hover: rgba(255, 255, 255, 0.1);
@@ -49,15 +51,15 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
 
 /* Inline mode */
 .dialkit-root[data-mode="inline"] {
-  height: 100%;
+  max-height: 100%;
 }
 
 .dialkit-panel[data-mode="inline"] {
   position: static;
   z-index: auto;
-  max-height: 100%;
-  height: 100%;
-  overflow: hidden;
+  max-height: inherit;
+  height: auto;
+  overflow: visible;
 }
 
 .dialkit-panel-inner {
@@ -71,6 +73,14 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   transform-origin: top right;
 }
 
+.dialkit-panel[data-origin-x="left"] .dialkit-panel-inner {
+  transform-origin: top left;
+}
+
+.dialkit-panel[data-origin-x="right"] .dialkit-panel-inner {
+  transform-origin: top right;
+}
+
 .dialkit-panel[data-position="top-left"] .dialkit-panel-inner {
   transform-origin: top left;
   max-height: calc(100vh - 80px);
@@ -110,8 +120,8 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
 
 .dialkit-panel-inline {
   width: 100%;
-  height: 100%;
-  max-height: none;
+  height: auto;
+  max-height: inherit;
   overflow-y: auto;
   box-shadow: none;
   border-radius: 0;
@@ -123,7 +133,8 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  max-height: inherit;
+  height: auto;
 }
 
 /* Position variants */
@@ -171,6 +182,18 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   border-bottom: 1px solid var(--dial-surface-subtle);
 }
 
+.dialkit-panel:not([data-mode="inline"]) .dialkit-panel-inner:not([data-collapsed="true"]) > .dialkit-folder-root > .dialkit-panel-header {
+  cursor: grab;
+}
+
+.dialkit-panel:not([data-mode="inline"]) .dialkit-panel-inner:not([data-collapsed="true"]) > .dialkit-folder-root > .dialkit-panel-header:active {
+  cursor: grabbing;
+}
+
+.dialkit-panel:not([data-mode="inline"]) .dialkit-panel-icon {
+  cursor: pointer;
+}
+
 .dialkit-folder-header {
   cursor: pointer;
   user-select: none;
@@ -267,6 +290,11 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   padding-bottom: 0;
 }
 
+.dialkit-folder:not(.dialkit-folder-root):last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
 /* Adjacent non-root folders collapse gap and share a single divider */
 .dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {
   margin-top: -10px;
@@ -289,6 +317,66 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   padding-bottom: 0;
 }
 
+.dialkit-panel[data-multiple="true"] .dialkit-panel-inner:not([data-collapsed="true"]) {
+  padding: 0 12px;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-panel-inner:not([data-collapsed="true"]) .dialkit-panel-icon {
+  top: 14px;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-panel-header {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {
+  height: 44px;
+  padding: 0;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {
+  height: 44px;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {
+  gap: 0;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {
+  margin: 0;
+  padding-bottom: 0;
+  border-top: 1px solid var(--dial-surface-subtle);
+  border-bottom: none;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--dial-text-root);
+  transform: translateZ(0);
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-title-root {
+  line-height: 20px;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {
+  border-top: none;
+  margin-top: 0;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {
+  margin-top: 0;
+}
+
+.dialkit-panel[data-multiple="true"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {
+  padding-top: 4px;
+  padding-bottom: 12px;
+}
+
 /* Content spacing handled by folder-inner gap */
 
 
@@ -631,6 +719,16 @@ export const themeCSS = `@import url('https://fonts.googleapis.com/css2?family=G
   overflow: hidden;
 }
 
+.dialkit-panel-section-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: var(--dial-row-height);
+  min-width: 0;
+  overflow: hidden;
+}
+
 .dialkit-toolbar-add {
   display: flex;
   align-items: center;