uidex 0.2.1 → 0.3.0

package/dist/core/style.css

@@ -1,971 +0,0 @@
-/* Design tokens — :host targets the shadow root, :where(:root) for standalone use */
-/* Theme: shadcn lyra — monochromatic, sharp, monospace */
-:where(:host, :root) {
-  /* Colors — dark theme (lyra neutral) */
-  --uidex-color-primary: #e5e5e5;
-  --uidex-color-primary-hover: #ffffff;
-  --uidex-color-bg: #1c1c1c;
-  --uidex-color-bg-elevated: #2e2e2e;
-  --uidex-color-text: #f9f9f9;
-  --uidex-color-text-strong: #ffffff;
-  --uidex-color-text-muted: #ababab;    /* chrome: labels, counts, placeholders */
-  --uidex-color-text-secondary: #ababab; /* content: doc text, descriptions */
-  --uidex-color-surface-hover: rgba(255, 255, 255, 0.08);
-  --uidex-color-surface-active: rgba(255, 255, 255, 0.12);
-  --uidex-color-border: rgba(255, 255, 255, 0.1);
-  --uidex-color-border-light: rgba(255, 255, 255, 0.06);
-  --uidex-color-backdrop: rgba(0, 0, 0, 0.6);
-
-  /* Category colors */
-  --uidex-color-pages: #60a5fa;
-  --uidex-color-features: #a78bfa;
-  --uidex-color-components: #34d399;
-
-  /* Shadows — minimal, border-driven definition */
-  --uidex-shadow-sm: none;
-  --uidex-shadow-md: 0 0 0 1px var(--uidex-color-border);
-  --uidex-shadow-lg: 0 0 0 1px var(--uidex-color-border);
-
-  /* Border radius — lyra: none */
-  --uidex-radius-sm: 0;
-  --uidex-radius-md: 0;
-  --uidex-radius-lg: 0;
-  --uidex-radius-full: 0;
-
-  /* Z-index — high enough to stay above app UI */
-  --uidex-z-container: 2147483644;
-  --uidex-z-overlay: 2147483645;
-  --uidex-z-modal: 2147483646;
-
-  /* Typography — mono-first (lyra). Both stacks are mono by default;
-     consumers can override --uidex-font-sans to restore a proportional body font. */
-  --uidex-font-sans: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --uidex-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --uidex-font-size-xs: 11px;
-  --uidex-font-size-sm: 12px;
-  --uidex-font-size-md: 13px;
-  --uidex-font-size-lg: 14px;
-
-  /* Transitions */
-  --uidex-transition-fast: 0.1s ease;
-  --uidex-transition-normal: 0.15s ease;
-  --uidex-transition-smooth: 0.2s ease;
-}
-
-/* ——— Container ——— */
-.uidex-container {
-  position: fixed;
-  z-index: var(--uidex-z-container);
-  pointer-events: auto;
-  font-family: var(--uidex-font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.uidex-bottom-right { bottom: 20px; right: 20px; }
-.uidex-bottom-left  { bottom: 20px; left: 20px; }
-.uidex-top-right    { top: 20px; right: 20px; }
-.uidex-top-left     { top: 20px; left: 20px; }
-
-/* ——— Trigger button group ——— */
-.uidex-trigger-group {
-  display: flex;
-  align-items: center;
-  border-radius: 0;
-  background: var(--uidex-color-bg);
-  border: 1px solid var(--uidex-color-border);
-  overflow: hidden;
-  user-select: none;
-  height: 32px;
-}
-
-.uidex-trigger-group:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-}
-
-.uidex-trigger-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 100%;
-  padding: 0 10px;
-  border: none;
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
-}
-
-.uidex-trigger-btn:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-trigger-btn:active {
-  background: var(--uidex-color-surface-active);
-  transform: translateY(1px);
-}
-
-.uidex-trigger-btn--active {
-  color: var(--uidex-color-text-strong);
-  background: var(--uidex-color-surface-active);
-}
-
-.uidex-trigger-btn--active:hover {
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.uidex-trigger-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--uidex-color-border);
-  flex-shrink: 0;
-}
-
-.uidex-trigger-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-/* ——— Draggable ——— */
-.uidex-container--dragging {
-  transition: none !important;
-}
-
-.uidex-container--dragging .uidex-trigger-btn {
-  cursor: grabbing !important;
-}
-
-/* ——— Inspect mode cursor ——— */
-body.uidex-inspecting,
-body.uidex-inspecting * {
-  cursor: crosshair !important;
-}
-
-/* ——— Modal ——— */
-.uidex-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--uidex-z-modal);
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--uidex-color-backdrop);
-}
-
-.uidex-modal {
-  background: var(--uidex-color-bg);
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  max-width: calc(100vw - 32px);
-  max-height: calc(100vh - 64px);
-  font-family: var(--uidex-font-sans);
-}
-
-.uidex-modal-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--uidex-color-border);
-}
-
-.uidex-modal-title {
-  margin: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  font-family: var(--uidex-font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.uidex-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: 18px;
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast), border-color var(--uidex-transition-fast);
-}
-
-.uidex-modal-close:hover {
-  background: var(--uidex-color-surface-hover);
-  border-color: var(--uidex-color-border);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-modal-close:active {
-  transform: translateY(1px);
-}
-
-.uidex-modal-body {
-  padding: 12px 16px;
-}
-
-.uidex-modal-section {
-  margin-bottom: 12px;
-}
-
-.uidex-modal-section:last-child {
-  margin-bottom: 0;
-}
-
-.uidex-modal-label {
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-  margin-bottom: 6px;
-}
-
-.uidex-modal-section--spaced {
-  margin-top: 12px;
-}
-
-.uidex-modal-doc {
-  margin: 0;
-  font-size: var(--uidex-font-size-sm);
-  line-height: 1.5;
-  color: var(--uidex-color-text-secondary);
-}
-
-.uidex-modal-code {
-  display: block;
-  font-family: var(--uidex-font-mono);
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text);
-  background: var(--uidex-color-bg-elevated);
-  padding: 6px 10px;
-  border-radius: 0;
-  border: 1px solid var(--uidex-color-border);
-  word-break: break-all;
-}
-
-.uidex-modal-location {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.uidex-modal-location:last-child {
-  margin-bottom: 0;
-}
-
-.uidex-modal-location .uidex-modal-code {
-  flex: 1;
-  min-width: 0;
-}
-
-.uidex-modal-copy {
-  flex-shrink: 0;
-  padding: 4px 10px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: var(--uidex-color-bg-elevated);
-  color: var(--uidex-color-text-secondary);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
-  white-space: nowrap;
-}
-
-.uidex-modal-copy:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-modal-copy:active {
-  transform: translateY(1px);
-}
-
-.uidex-modal-env-item {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
-  line-height: 1.6;
-}
-
-.uidex-empty-message {
-  padding: 16px 12px;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-sm);
-  text-align: center;
-}
-
-/* ——— Panel layout (sidebar modal) ——— */
-.uidex-modal--panel {
-  width: calc(100vw - 32px);
-  max-width: 720px;
-  height: calc(100vh - 64px);
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.uidex-panel-body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.uidex-panel-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--uidex-color-border);
-  overflow-y: auto;
-  padding: 0;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
-}
-
-.uidex-panel-main {
-  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
-  padding: 16px 20px;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-}
-
-.uidex-panel-main::-webkit-scrollbar {
-  width: 6px;
-}
-
-.uidex-panel-main::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.uidex-panel-main::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
-}
-
-/* ——— Sidebar navigation ——— */
-.uidex-sidebar-back {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  margin: 0;
-  border-bottom: 1px solid var(--uidex-color-border);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-secondary);
-  cursor: pointer;
-  transition: color var(--uidex-transition-fast);
-  position: sticky;
-  top: 0;
-  background: var(--uidex-color-bg);
-  z-index: 1;
-}
-
-.uidex-sidebar-back:hover {
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-sidebar-back-arrow {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.uidex-sidebar-root-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-}
-
-.uidex-sidebar-root-item:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-root-label {
-  flex: 0 0 auto;
-}
-
-.uidex-sidebar-count {
-  font-size: var(--uidex-font-size-xs);
-  color: var(--uidex-color-text-muted);
-  font-weight: 400;
-}
-
-.uidex-sidebar-chevron {
-  margin-left: auto;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-sidebar-item {
-  padding: 4px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.uidex-sidebar-item:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-item--active {
-  background: var(--uidex-color-surface-active);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-sidebar-item--active:hover {
-  background: var(--uidex-color-surface-active);
-}
-
-.uidex-sidebar-item--dimmed {
-  opacity: 0.5;
-}
-
-.uidex-sidebar-item--mono {
-  font-family: var(--uidex-font-mono);
-}
-
-.uidex-sidebar-item--grouped {
-  padding-left: 24px;
-}
-
-/* Sidebar category colors */
-.uidex-sidebar-item--pages.uidex-sidebar-item--active {
-  color: var(--uidex-color-pages);
-}
-
-.uidex-sidebar-item--features.uidex-sidebar-item--active {
-  color: var(--uidex-color-features);
-}
-
-.uidex-sidebar-item--components.uidex-sidebar-item--active {
-  color: var(--uidex-color-components);
-}
-
-.uidex-sidebar-root-item--pages .uidex-sidebar-root-label {
-  color: var(--uidex-color-pages);
-}
-
-.uidex-sidebar-root-item--features .uidex-sidebar-root-label {
-  color: var(--uidex-color-features);
-}
-
-.uidex-sidebar-root-item--components .uidex-sidebar-root-label {
-  color: var(--uidex-color-components);
-}
-
-/* ——— Sidebar component groups ——— */
-.uidex-sidebar-group-header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  user-select: none;
-}
-
-.uidex-sidebar-group-header:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-group-chevron {
-  font-size: 14px;
-  line-height: 1;
-  color: var(--uidex-color-text-muted);
-  width: 14px;
-  text-align: center;
-  flex-shrink: 0;
-  transition: transform var(--uidex-transition-normal);
-  transform: rotate(0deg);
-}
-
-.uidex-sidebar-group-header--expanded .uidex-sidebar-group-chevron {
-  transform: rotate(90deg);
-}
-
-.uidex-sidebar-group-count {
-  margin-left: auto;
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 400;
-  color: var(--uidex-color-text-muted);
-}
-
-/* ——— Search ——— */
-.uidex-search-input {
-  flex: 1;
-  min-width: 0;
-  padding: 4px 8px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
-  outline: none;
-  box-sizing: border-box;
-}
-
-.uidex-search-input::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-search-input:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.uidex-search-group-label {
-  padding: 8px 10px 2px;
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-search-group-label--pages { color: var(--uidex-color-pages); }
-.uidex-search-group-label--features { color: var(--uidex-color-features); }
-.uidex-search-group-label--components { color: var(--uidex-color-components); }
-
-.uidex-search-empty {
-  padding: 20px 10px;
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  text-align: center;
-}
-
-.uidex-sidebar-divider {
-  height: 1px;
-  background: var(--uidex-color-border);
-  margin: 4px 10px;
-}
-
-.uidex-sidebar-root-item--active {
-  background: var(--uidex-color-surface-active);
-}
-
-/* ——— Main content ——— */
-.uidex-main-title {
-  margin: 0 0 8px;
-  font-size: var(--uidex-font-size-lg);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-main-title--mono {
-  font-family: var(--uidex-font-mono);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-main-divider {
-  height: 1px;
-  background: var(--uidex-color-border);
-  margin: 16px 0;
-}
-
-.uidex-absent-notice {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  font-style: italic;
-  margin-bottom: 12px;
-}
-
-/* ——— Page content in modal ——— */
-.uidex-page-content {
-  font-size: var(--uidex-font-size-sm);
-  line-height: 1.6;
-  color: var(--uidex-color-text);
-}
-
-.uidex-page-content h2,
-.uidex-page-content h3,
-.uidex-page-content h4,
-.uidex-page-content h5,
-.uidex-page-content h6 {
-  margin: 12px 0 6px;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.uidex-page-content h2 {
-  font-size: var(--uidex-font-size-md);
-}
-
-.uidex-page-content p {
-  margin: 0 0 8px;
-}
-
-.uidex-checklist {
-  list-style: none;
-  margin: 0 0 8px;
-  padding-left: 0;
-}
-
-.uidex-checklist-item {
-  margin-bottom: 4px;
-}
-
-.uidex-checklist-label {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  cursor: pointer;
-}
-
-.uidex-checklist-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
-}
-
-/* ——— Chips ——— */
-.uidex-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.uidex-chip {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 0;
-  background: transparent;
-  border: 1px solid var(--uidex-color-border);
-  font-family: var(--uidex-font-mono);
-  font-size: var(--uidex-font-size-xs);
-  color: var(--uidex-color-text);
-  transition: background-color var(--uidex-transition-fast);
-}
-
-.uidex-chip:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-chip--absent {
-  opacity: 0.4;
-}
-
-.uidex-chip--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
-}
-
-.uidex-chip--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
-}
-
-.uidex-chip--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
-}
-
-/* ——— Category badges ——— */
-.uidex-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 0;
-  border: 1px solid var(--uidex-color-border);
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 12px;
-}
-
-.uidex-badge--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
-}
-
-.uidex-badge--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
-}
-
-.uidex-badge--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
-}
-
-/* ——— Feedback modal ——— */
-.uidex-modal--feedback {
-  width: calc(100vw - 32px);
-  max-width: 400px;
-}
-
-.uidex-modal-code--inline {
-  border: none;
-  background: none;
-  padding: 0;
-}
-
-.uidex-header-spacer {
-  flex: 1;
-}
-
-.uidex-chips--spaced {
-  margin-bottom: 8px;
-}
-
-.uidex-modal-doc--spaced {
-  margin-bottom: 12px;
-}
-
-/* ——— Feedback form ——— */
-.uidex-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.uidex-form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.uidex-form-label {
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-select,
-.uidex-form-input,
-.uidex-form-textarea {
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
-  outline: none;
-}
-
-.uidex-form-select:focus,
-.uidex-form-input:focus,
-.uidex-form-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.uidex-form-input::placeholder,
-.uidex-form-textarea::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-select {
-  appearance: none;
-  padding: 6px 10px;
-  cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ababab' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-right: 26px;
-}
-
-.uidex-form-input {
-  padding: 6px 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.uidex-form-input + .uidex-form-input {
-  margin-top: 6px;
-}
-
-.uidex-form-textarea {
-  padding: 8px 10px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 80px;
-}
-
-.uidex-form-submit {
-  padding: 6px 16px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: var(--uidex-color-primary);
-  color: var(--uidex-color-bg);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  align-self: flex-end;
-}
-
-.uidex-form-submit:hover {
-  background: var(--uidex-color-primary-hover);
-}
-
-.uidex-form-submit:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-.uidex-form-submit:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* ——— Form toggle ——— */
-.uidex-form-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-
-.uidex-form-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
-}
-
-.uidex-form-toggle-text {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
-}
-
-/* ——— Responsive ——— */
-@media (max-width: 600px) {
-  .uidex-modal--panel {
-    width: auto;
-  }
-
-  .uidex-panel-body {
-    flex-direction: column;
-  }
-
-  .uidex-panel-sidebar {
-    width: auto;
-    max-height: 200px;
-    border-right: none;
-    border-bottom: 1px solid var(--uidex-color-border);
-  }
-}
-
-/* ——— Graph ——— */
-.uidex-graph {
-  margin-top: 8px;
-}
-
-.uidex-graph-svg {
-  display: block;
-}
-
-.uidex-graph-header {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-}
-
-.uidex-graph-header--pages { fill: var(--uidex-color-pages); }
-.uidex-graph-header--features { fill: var(--uidex-color-features); }
-.uidex-graph-header--components { fill: var(--uidex-color-components); }
-
-.uidex-graph-node {
-  cursor: pointer;
-}
-
-.uidex-graph-node rect {
-  fill: var(--uidex-color-bg-elevated);
-  stroke: var(--uidex-color-border);
-  stroke-width: 1;
-}
-
-.uidex-graph-node:hover rect {
-  fill: var(--uidex-color-surface-hover);
-}
-
-.uidex-graph-node--page rect { stroke: color-mix(in srgb, var(--uidex-color-pages) 50%, transparent); }
-.uidex-graph-node--feature rect { stroke: color-mix(in srgb, var(--uidex-color-features) 50%, transparent); }
-.uidex-graph-node--component rect { stroke: color-mix(in srgb, var(--uidex-color-components) 50%, transparent); }
-
-.uidex-graph-label {
-  font-size: 10px;
-  font-family: var(--uidex-font-mono);
-  fill: var(--uidex-color-text);
-}
-
-.uidex-graph-edge {
-  fill: none;
-  stroke-width: 1;
-  opacity: 0.3;
-}
-
-.uidex-graph-edge--page { stroke: var(--uidex-color-pages); }
-.uidex-graph-edge--feature { stroke: var(--uidex-color-features); }
-
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-edge { opacity: 0.08; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-node { opacity: 0.3; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-edge--highlighted { opacity: 0.6; stroke-width: 1.5; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-node--highlighted { opacity: 1; }
-
-.uidex-graph-note {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  margin-top: 12px;
-  font-style: italic;
-}
-
-/* ——— Overlay ———
-   NOTE: The overlay renders in document.body (outside the Shadow DOM)
-   so all its styles are set inline in overlay.ts. These CSS classes
-   are retained only for consumers who import style.css standalone. */
-.uidex-overlay {
-  position: fixed;
-  pointer-events: none;
-  z-index: 2147483645;
-}