uidex 0.2.0 → 0.2.4

package/dist/core/style.css

@@ -1,418 +1,1066 @@
-/* Design tokens — :host targets the shadow root, :where(:root) for standalone use */
-/* Theme: shadcn lyra — monochromatic, sharp, monospace */
+/* ============================================================
+   Design tokens — COSS defaults + uidex category colors
+   :host for Shadow DOM, :where(:root) for standalone use.
+   Dark theme default. Light theme via :host(.light).
+   ============================================================ */
+
 :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;
+  --background: #141414;
+  --foreground: #f5f5f5;
+  --card: #181818;
+  --card-foreground: #f5f5f5;
+  --popover: #1e1e1e;
+  --popover-foreground: #f5f5f5;
+  --primary: #f5f5f5;
+  --primary-foreground: #262626;
+  --secondary: rgba(255, 255, 255, 0.04);
+  --secondary-foreground: #f5f5f5;
+  --muted: rgba(255, 255, 255, 0.04);
+  --muted-foreground: #7f7f7f;
+  --accent: rgba(255, 255, 255, 0.04);
+  --accent-foreground: #f5f5f5;
+  --destructive: #f87171;
+  --destructive-foreground: #f87171;
+  --border: rgba(255, 255, 255, 0.06);
+  --input: rgba(255, 255, 255, 0.08);
+  --ring: #737373;
+  --info: #60a5fa;
+  --radius: 0.625rem;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 16px;
+  --font-sans: ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
+    Consolas, monospace;
+
+  /* Uidex category colors */
+  --uidex-component: #34d399;
+  --uidex-feature: #a78bfa;
+  --uidex-block: #c084fc;
+}
+
+/* ——— Light theme ——— */
+:host(.light) {
+  --background: #ffffff;
+  --foreground: #262626;
+  --card: #ffffff;
+  --card-foreground: #262626;
+  --popover: #ffffff;
+  --popover-foreground: #262626;
+  --primary: #262626;
+  --primary-foreground: #fafafa;
+  --secondary: rgba(0, 0, 0, 0.04);
+  --secondary-foreground: #262626;
+  --muted: rgba(0, 0, 0, 0.04);
+  --muted-foreground: #6b6b6b;
+  --accent: rgba(0, 0, 0, 0.04);
+  --accent-foreground: #262626;
+  --destructive: #ef4444;
+  --destructive-foreground: #b91c1c;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.1);
+  --ring: #a3a3a3;
+  --info: #3b82f6;
+  --warning: #f59e0b;
+  --warning-foreground: #92400e;
+  --success: #10b981;
+  --success-foreground: #065f46;
+  --info-foreground: #1e40af;
+  --purple: #8b5cf6;
+  --purple-foreground: #5b21b6;
+}
+
+/* ============================================================
+   Reset — match Tailwind preflight (border-box + no margin)
+   ============================================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
-.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; }
+/* ============================================================
+   Icon
+   ============================================================ */
 
-/* ——— 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-icon {
+  flex-shrink: 0;
+  pointer-events: none;
 }
 
-.uidex-trigger-group:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-}
+/* ============================================================
+   Button — mirrors COSS button.tsx variants
+   ============================================================ */
 
-.uidex-trigger-btn {
-  display: flex;
+.uidex-btn {
+  position: relative;
+  display: inline-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);
+  gap: 8px;
+  border-radius: var(--radius-lg);
+  border: 1px solid transparent;
+  font-size: 14px;
   font-weight: 500;
-  font-family: var(--uidex-font-mono);
+  font-family: var(--font-sans);
+  white-space: nowrap;
   cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
+  outline: none;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+  -webkit-font-smoothing: antialiased;
 }
 
-.uidex-trigger-btn:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
+.uidex-btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: calc(var(--radius-lg) - 1px);
 }
 
-.uidex-trigger-btn:active {
-  background: var(--uidex-color-surface-active);
-  transform: translateY(1px);
+.uidex-btn:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
 }
 
-.uidex-trigger-btn--active {
-  color: var(--uidex-color-text-strong);
-  background: var(--uidex-color-surface-active);
+.uidex-btn:disabled {
+  opacity: 0.64;
+  pointer-events: none;
 }
 
-.uidex-trigger-btn--active:hover {
-  background: rgba(255, 255, 255, 0.16);
+/* Default variant — primary fill */
+.uidex-btn--default {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
+    0 1px 2px color-mix(in srgb, var(--primary) 24%, transparent);
 }
 
-.uidex-trigger-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--uidex-color-border);
-  flex-shrink: 0;
+.uidex-btn--default::before {
+  box-shadow: inset 0 1px color-mix(in srgb, var(--primary-foreground) 16%, transparent);
 }
 
-.uidex-trigger-icon {
+.uidex-btn--default:hover {
+  opacity: 0.9;
+}
+
+.uidex-btn--default:active {
+  box-shadow: none;
+}
+
+.uidex-btn--default:active::before {
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.08);
+}
+
+/* Ghost variant */
+.uidex-btn--ghost {
+  background: transparent;
+  color: var(--foreground);
+}
+
+.uidex-btn--ghost::before {
+  display: none;
+}
+
+.uidex-btn--ghost:hover {
+  background: var(--accent);
+}
+
+/* Outline variant */
+.uidex-btn--outline {
+  border-color: var(--input);
+  background: var(--popover);
+  color: var(--foreground);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.uidex-btn--outline::before {
+  box-shadow: 0 -1px var(--border);
+}
+
+.uidex-btn--outline:hover {
+  background: var(--input);
+}
+
+.uidex-btn--outline:active {
+  box-shadow: none;
+}
+
+/* Destructive variant */
+.uidex-btn--destructive {
+  border-color: var(--destructive);
+  background: var(--destructive);
+  color: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.uidex-btn--destructive::before {
+  box-shadow: inset 0 1px color-mix(in srgb, var(--primary-foreground) 16%, transparent);
+}
+
+.uidex-btn--destructive:hover {
+  opacity: 0.9;
+}
+
+/* Button sizes */
+.uidex-btn--size-default {
+  height: 36px;
+  padding: 0 12px;
+}
+
+.uidex-btn--size-sm {
+  height: 32px;
+  padding: 0 10px;
+  gap: 6px;
+}
+
+.uidex-btn--size-xs {
+  height: 28px;
+  padding: 0 8px;
+  gap: 4px;
+  font-size: 12px;
+  border-radius: var(--radius-md);
+}
+
+.uidex-btn--size-xs::before {
+  border-radius: calc(var(--radius-md) - 1px);
+}
+
+.uidex-btn--size-icon {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+}
+
+.uidex-btn--size-icon-sm {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
+.uidex-btn--size-icon-xs {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--radius-md);
+}
+
+.uidex-btn--size-icon-xs .uidex-icon {
   width: 14px;
   height: 14px;
-  flex-shrink: 0;
 }
 
-/* ——— Draggable ——— */
-.uidex-container--dragging {
-  transition: none !important;
+.uidex-btn .uidex-icon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.8;
 }
 
-.uidex-container--dragging .uidex-trigger-btn {
-  cursor: grabbing !important;
+.uidex-btn--size-xs .uidex-icon {
+  width: 14px;
+  height: 14px;
 }
 
-/* ——— Inspect mode cursor ——— */
-body.uidex-inspecting,
-body.uidex-inspecting * {
-  cursor: crosshair !important;
-}
+/* ============================================================
+   Dialog — mirrors COSS dialog.tsx
+   ============================================================ */
 
-/* ——— Modal ——— */
-.uidex-modal-backdrop {
+.uidex-dialog-backdrop {
   position: fixed;
   inset: 0;
-  z-index: var(--uidex-z-modal);
+  z-index: 2147483646;
   pointer-events: auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--uidex-color-backdrop);
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
 }
 
-.uidex-modal {
-  background: var(--uidex-color-bg);
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
+.uidex-dialog-backdrop--open {
+  opacity: 1;
+}
+
+.uidex-dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-2xl);
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 64px);
-  font-family: var(--uidex-font-sans);
+  font-family: var(--font-sans);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  opacity: 0;
+  transform: scale(0.98);
+  transform-origin: center;
+  will-change: transform;
+  transition:
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 }
 
-.uidex-modal-header {
+.uidex-dialog--open {
+  opacity: 1;
+  transform: none;
+}
+
+.uidex-dialog::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: calc(var(--radius-2xl) - 1px);
+  box-shadow: 0 -1px var(--border);
+}
+
+/* Panel variant — sidebar layout */
+.uidex-dialog--panel {
+  width: calc(100vw - 32px);
+  max-width: 720px;
+  height: calc(100vh - 64px);
+  max-height: 600px;
+}
+
+/* Feedback variant — single column */
+.uidex-dialog--feedback {
+  width: calc(100vw - 32px);
+  max-width: 400px;
+}
+
+.uidex-dialog-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--uidex-color-border);
+  gap: 8px;
+  padding: 16px 24px;
+  padding-right: 48px;
+  border-bottom: 1px solid var(--border);
 }
 
-.uidex-modal-title {
+.uidex-dialog-title {
   margin: 0;
-  font-size: var(--uidex-font-size-sm);
+  font-size: 20px;
   font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  font-family: var(--uidex-font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  line-height: 1;
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+.uidex-dialog-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
+}
+
+.uidex-dialog-body::-webkit-scrollbar {
+  width: 6px;
 }
 
-.uidex-modal-close {
+.uidex-dialog-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.uidex-dialog-body::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.2);
+  border-radius: 9999px;
+}
+
+.uidex-dialog-footer {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid transparent;
-  border-radius: 0;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--muted);
+  border-radius: 0 0 calc(var(--radius-2xl) - 1px)
+    calc(var(--radius-2xl) - 1px);
+}
+
+.uidex-dialog-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 1;
+}
+
+/* ——— Panel body layout (sidebar + main) ——— */
+.uidex-panel-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.uidex-panel-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
+}
+
+.uidex-panel-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.uidex-panel-sidebar::-webkit-scrollbar-track {
   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-panel-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.2);
+  border-radius: 9999px;
 }
 
-.uidex-modal-close:active {
-  transform: translateY(1px);
+.uidex-panel-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 24px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
+}
+
+.uidex-panel-main::-webkit-scrollbar {
+  width: 6px;
+}
+
+.uidex-panel-main::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.uidex-panel-main::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.2);
+  border-radius: 9999px;
+}
+
+.uidex-control--flex-fill {
+  flex: 1;
+  min-width: 0;
 }
 
-.uidex-modal-body {
+.uidex-dialog-body--padded {
   padding: 12px 16px;
 }
 
-.uidex-modal-section {
-  margin-bottom: 12px;
+/* ============================================================
+   Control wrapper — shared base for input, textarea, select
+   ============================================================ */
+
+.uidex-control {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--input);
+  background: var(--background);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+}
+
+.uidex-control::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: calc(var(--radius-lg) - 1px);
+  box-shadow: 0 -1px var(--border);
 }
 
-.uidex-modal-section:last-child {
-  margin-bottom: 0;
+.uidex-control:focus-within {
+  border-color: var(--ring);
+  outline: 3px solid color-mix(in srgb, var(--ring) 24%, transparent);
+  outline-offset: -1px;
+  box-shadow: none;
 }
 
-.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-control:focus-within::before {
+  box-shadow: none;
 }
 
-.uidex-modal-section--spaced {
-  margin-top: 12px;
+/* ——— Input ——— */
+
+.uidex-input {
+  width: 100%;
+  min-width: 0;
+  height: 30px;
+  padding: 0 10px;
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  outline: none;
+  line-height: 30px;
 }
 
-.uidex-modal-doc {
-  margin: 0;
-  font-size: var(--uidex-font-size-sm);
+.uidex-input::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.72;
+}
+
+.uidex-control--sm .uidex-input {
+  height: 26px;
+  line-height: 26px;
+  padding: 0 8px;
+}
+
+/* ——— Textarea ——— */
+
+.uidex-textarea {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 10px;
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  outline: none;
   line-height: 1.5;
-  color: var(--uidex-color-text-secondary);
+  resize: vertical;
+  min-height: 80px;
+}
+
+.uidex-textarea::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.72;
+}
+
+/* ——— Select ——— */
+
+.uidex-select {
+  width: 100%;
+  height: 30px;
+  padding: 0 26px 0 10px;
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%237f7f7f' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  background-size: 16px;
 }
 
-.uidex-modal-code {
+/* ============================================================
+   Badge — mirrors COSS badge.tsx
+   ============================================================ */
+
+.uidex-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 18px;
+  min-width: 18px;
+  padding: 0 4px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  white-space: nowrap;
+}
+
+.uidex-badge--sm {
+  height: 16px;
+  min-width: 16px;
+  font-size: 10px;
+}
+
+.uidex-badge--default {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.uidex-badge--outline {
+  border-color: var(--input);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.uidex-badge--pages {
+  color: var(--info);
+  border-color: color-mix(
+    in srgb,
+    var(--info) 30%,
+    transparent
+  );
+}
+
+.uidex-badge--features {
+  color: var(--uidex-feature);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-feature) 30%,
+    transparent
+  );
+}
+
+.uidex-badge--components {
+  color: var(--uidex-component);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-component) 30%,
+    transparent
+  );
+}
+
+.uidex-badge--blocks {
+  color: var(--uidex-block);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-block) 30%,
+    transparent
+  );
+}
+
+.uidex-badge--spaced {
+  margin-bottom: 12px;
+}
+
+/* ============================================================
+   Chip — small clickable tags
+   ============================================================ */
+
+.uidex-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--foreground);
+  transition: background-color 0.2s ease-in-out;
+}
+
+.uidex-chip:hover {
+  background: var(--accent);
+}
+
+.uidex-chip--dimmed {
+  opacity: 0.4;
+}
+
+.uidex-chip--pages {
+  color: var(--info);
+  border-color: color-mix(
+    in srgb,
+    var(--info) 30%,
+    transparent
+  );
+}
+
+.uidex-chip--features {
+  color: var(--uidex-feature);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-feature) 30%,
+    transparent
+  );
+}
+
+.uidex-chip--components {
+  color: var(--uidex-component);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-component) 30%,
+    transparent
+  );
+}
+
+.uidex-chip--blocks {
+  color: var(--uidex-block);
+  border-color: color-mix(
+    in srgb,
+    var(--uidex-block) 30%,
+    transparent
+  );
+}
+
+.uidex-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.uidex-chip-group--spaced {
+  margin-bottom: 8px;
+}
+
+/* ============================================================
+   Separator
+   ============================================================ */
+
+.uidex-separator {
+  background: var(--border);
+  height: 1px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.uidex-separator--vertical {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+}
+
+/* ============================================================
+   Code block
+   ============================================================ */
+
+.uidex-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);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--foreground);
+  background: var(--card);
   padding: 6px 10px;
-  border-radius: 0;
-  border: 1px solid var(--uidex-color-border);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
   word-break: break-all;
 }
 
-.uidex-modal-location {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.uidex-code--inline {
+  display: inline;
+  border: none;
+  background: none;
+  padding: 0;
+  word-break: normal;
+}
+
+/* ============================================================
+   Label — section heading, muted small text
+   ============================================================ */
+
+.uidex-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted-foreground);
   margin-bottom: 6px;
 }
 
-.uidex-modal-location:last-child {
-  margin-bottom: 0;
+/* ============================================================
+   Field — form label + control wrapper
+   ============================================================ */
+
+.uidex-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.uidex-modal-location .uidex-modal-code {
-  flex: 1;
-  min-width: 0;
+.uidex-field-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+/* ============================================================
+   Form
+   ============================================================ */
+
+.uidex-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ============================================================
+   Toggle — checkbox + label
+   ============================================================ */
+
+.uidex-toggle {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
 }
 
-.uidex-modal-copy {
+.uidex-toggle-checkbox,
+.uidex-checklist-checkbox {
+  -webkit-appearance: none;
+  appearance: none;
   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);
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--input);
+  border-radius: 4px;
+  background: var(--background);
   cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
-  white-space: nowrap;
+  position: relative;
+  transition: background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
 }
 
-.uidex-modal-copy:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
+.uidex-toggle-checkbox:checked,
+.uidex-checklist-checkbox:checked {
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
-.uidex-modal-copy:active {
-  transform: translateY(1px);
+.uidex-toggle-checkbox:checked::after,
+.uidex-checklist-checkbox:checked::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--primary-foreground);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.252 12.7 10.2 18.63 18.748 5.37'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.252 12.7 10.2 18.63 18.748 5.37'/%3E%3C/svg%3E");
+  -webkit-mask-size: 12px;
+  mask-size: 12px;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
 }
 
-.uidex-modal-env-item {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
-  line-height: 1.6;
+.uidex-toggle-checkbox:focus-visible,
+.uidex-checklist-checkbox:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
 }
 
-.uidex-empty-message {
-  padding: 16px 12px;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-sm);
-  text-align: center;
+.uidex-toggle-text {
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--foreground);
 }
 
-/* ——— Panel layout (sidebar modal) ——— */
-.uidex-modal--panel {
-  width: calc(100vw - 32px);
-  max-width: 720px;
-  height: calc(100vh - 64px);
-  max-height: 600px;
+/* ============================================================
+   Section — content grouping
+   ============================================================ */
+
+.uidex-section {
+  margin-bottom: 12px;
+}
+
+.uidex-section:last-child {
+  margin-bottom: 0;
+}
+
+.uidex-section--spaced {
+  margin-top: 12px;
+}
+
+/* ============================================================
+   Container — fixed position for trigger group
+   ============================================================ */
+
+.uidex-container {
+  position: fixed;
+  z-index: 2147483644;
+  pointer-events: auto;
+  font-family: var(--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 — COSS outline button group
+   ============================================================ */
+
+.uidex-trigger-group {
+  position: relative;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  border-radius: var(--radius-lg);
+  background: var(--popover);
+  border: 1px solid var(--input);
   overflow: hidden;
+  user-select: none;
+  height: 32px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.uidex-panel-body {
+.uidex-trigger-group::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: calc(var(--radius-lg) - 1px);
+  box-shadow: 0 -1px var(--border);
+}
+
+.uidex-trigger-btn {
   display: flex;
-  flex: 1;
-  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 10px;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
 }
 
-.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-trigger-btn:hover {
+  background: var(--accent);
+  color: var(--foreground);
 }
 
-.uidex-panel-sidebar::-webkit-scrollbar {
-  width: 6px;
+.uidex-trigger-btn:active {
+  background: var(--input);
 }
 
-.uidex-panel-sidebar::-webkit-scrollbar-track {
-  background: transparent;
+.uidex-trigger-btn--active {
+  color: var(--foreground);
+  background: var(--input);
+}
+
+.uidex-trigger-btn--active:hover {
+  background: var(--accent);
+}
+
+.uidex-trigger-btn:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.uidex-trigger-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.uidex-trigger-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--border);
+  flex-shrink: 0;
 }
 
-.uidex-panel-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
+/* Draggable */
+.uidex-container--dragging {
+  transition: none !important;
 }
 
-.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-container--dragging .uidex-trigger-btn {
+  cursor: grabbing !important;
 }
 
-.uidex-panel-main::-webkit-scrollbar {
-  width: 6px;
-}
+/* ============================================================
+   Inspect mode cursor
+   ============================================================ */
 
-.uidex-panel-main::-webkit-scrollbar-track {
-  background: transparent;
+body.uidex-inspecting,
+body.uidex-inspecting * {
+  cursor: crosshair !important;
 }
 
-.uidex-panel-main::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
-}
+/* ============================================================
+   Sidebar navigation
+   ============================================================ */
 
-/* ——— Sidebar navigation ——— */
 .uidex-sidebar-back {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
+  gap: 8px;
+  padding: 8px;
   margin: 0;
-  border-bottom: 1px solid var(--uidex-color-border);
-  font-size: var(--uidex-font-size-sm);
+  border-bottom: 1px solid var(--border);
+  font-size: 14px;
   font-weight: 600;
-  color: var(--uidex-color-text-secondary);
+  color: var(--muted-foreground);
   cursor: pointer;
-  transition: color var(--uidex-transition-fast);
+  transition: color 0.2s ease-in-out;
   position: sticky;
   top: 0;
-  background: var(--uidex-color-bg);
+  background: var(--popover);
   z-index: 1;
 }
 
 .uidex-sidebar-back:hover {
-  color: var(--uidex-color-text-strong);
+  color: var(--foreground);
 }
 
-.uidex-sidebar-back-arrow {
-  font-size: 16px;
-  line-height: 1;
+.uidex-sidebar-back-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
 
 .uidex-sidebar-root-item {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
+  gap: 8px;
+  padding: 8px;
+  margin: 0 4px;
+  border-radius: var(--radius-lg);
+  min-height: 32px;
+  font-size: 14px;
   font-weight: 500;
-  color: var(--uidex-color-text);
+  color: var(--foreground);
   cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
+  transition: background-color 0.2s ease-in-out;
 }
 
 .uidex-sidebar-root-item:hover {
-  background: var(--uidex-color-surface-hover);
+  background: var(--accent);
+}
+
+.uidex-sidebar-root-item--active {
+  background: var(--input);
 }
 
 .uidex-sidebar-root-label {
@@ -420,41 +1068,49 @@ body.uidex-inspecting * {
 }
 
 .uidex-sidebar-count {
-  font-size: var(--uidex-font-size-xs);
-  color: var(--uidex-color-text-muted);
+  font-size: 12px;
+  color: var(--muted-foreground);
   font-weight: 400;
 }
 
 .uidex-sidebar-chevron {
   margin-left: auto;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--uidex-color-text-muted);
+  color: var(--muted-foreground);
+}
+
+.uidex-sidebar-chevron .uidex-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .uidex-sidebar-item {
-  padding: 4px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text);
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  margin: 0 4px;
+  border-radius: var(--radius-lg);
+  min-height: 32px;
+  font-size: 14px;
+  color: var(--foreground);
   cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
+  transition: background-color 0.2s ease-in-out;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .uidex-sidebar-item:hover {
-  background: var(--uidex-color-surface-hover);
+  background: var(--accent);
 }
 
 .uidex-sidebar-item--active {
-  background: var(--uidex-color-surface-active);
-  color: var(--uidex-color-text-strong);
+  background: var(--input);
+  color: var(--foreground);
+  font-weight: 500;
 }
 
 .uidex-sidebar-item--active:hover {
-  background: var(--uidex-color-surface-active);
+  background: var(--input);
 }
 
 .uidex-sidebar-item--dimmed {
@@ -462,65 +1118,84 @@ body.uidex-inspecting * {
 }
 
 .uidex-sidebar-item--mono {
-  font-family: var(--uidex-font-mono);
+  font-family: var(--font-mono);
 }
 
 .uidex-sidebar-item--grouped {
-  padding-left: 24px;
+  padding-left: 28px;
 }
 
 /* Sidebar category colors */
 .uidex-sidebar-item--pages.uidex-sidebar-item--active {
-  color: var(--uidex-color-pages);
+  color: var(--info);
 }
 
 .uidex-sidebar-item--features.uidex-sidebar-item--active {
-  color: var(--uidex-color-features);
+  color: var(--uidex-feature);
 }
 
 .uidex-sidebar-item--components.uidex-sidebar-item--active {
-  color: var(--uidex-color-components);
+  color: var(--uidex-component);
+}
+
+.uidex-sidebar-item--blocks.uidex-sidebar-item--active {
+  color: var(--uidex-block);
 }
 
 .uidex-sidebar-root-item--pages .uidex-sidebar-root-label {
-  color: var(--uidex-color-pages);
+  color: var(--info);
 }
 
 .uidex-sidebar-root-item--features .uidex-sidebar-root-label {
-  color: var(--uidex-color-features);
+  color: var(--uidex-feature);
 }
 
 .uidex-sidebar-root-item--components .uidex-sidebar-root-label {
-  color: var(--uidex-color-components);
+  color: var(--uidex-component);
+}
+
+.uidex-sidebar-root-item--blocks .uidex-sidebar-root-label {
+  color: var(--uidex-block);
 }
 
-/* ——— Sidebar component groups ——— */
+.uidex-sidebar-item--block {
+  color: var(--uidex-block);
+  font-style: italic;
+}
+
+.uidex-sidebar-item--block.uidex-sidebar-item--active {
+  color: var(--uidex-block);
+}
+
+/* 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);
+  gap: 8px;
+  padding: 8px;
+  margin: 0 4px;
+  border-radius: var(--radius-lg);
+  min-height: 32px;
+  font-size: 14px;
   font-weight: 600;
-  color: var(--uidex-color-text);
+  color: var(--foreground);
   cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
+  transition: background-color 0.2s ease-in-out;
   user-select: none;
 }
 
 .uidex-sidebar-group-header:hover {
-  background: var(--uidex-color-surface-hover);
+  background: var(--accent);
 }
 
 .uidex-sidebar-group-chevron {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1;
-  color: var(--uidex-color-text-muted);
-  width: 14px;
+  color: var(--muted-foreground);
+  width: 16px;
   text-align: center;
   flex-shrink: 0;
-  transition: transform var(--uidex-transition-normal);
+  transition: transform 0.2s ease-in-out;
   transform: rotate(0deg);
 }
 
@@ -530,95 +1205,46 @@ body.uidex-inspecting * {
 
 .uidex-sidebar-group-count {
   margin-left: auto;
-  font-size: var(--uidex-font-size-xs);
+  font-size: 12px;
   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;
+  color: var(--muted-foreground);
 }
 
-.uidex-sidebar-divider {
-  height: 1px;
-  background: var(--uidex-color-border);
-  margin: 4px 10px;
-}
+/* ============================================================
+   Search
+   ============================================================ */
 
-.uidex-sidebar-root-item--active {
-  background: var(--uidex-color-surface-active);
-}
+/* ============================================================
+   Main content
+   ============================================================ */
 
-/* ——— Main content ——— */
 .uidex-main-title {
   margin: 0 0 8px;
-  font-size: var(--uidex-font-size-lg);
+  font-size: 20px;
   font-weight: 600;
-  color: var(--uidex-color-text-strong);
+  line-height: 1;
+  color: var(--foreground);
 }
 
 .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;
+  font-family: var(--font-mono);
 }
 
 .uidex-absent-notice {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
+  font-size: 14px;
+  color: var(--muted-foreground);
   font-style: italic;
   margin-bottom: 12px;
 }
 
-/* ——— Page content in modal ——— */
+/* ============================================================
+   Page markdown content
+   ============================================================ */
+
 .uidex-page-content {
-  font-size: var(--uidex-font-size-sm);
+  font-size: 14px;
   line-height: 1.6;
-  color: var(--uidex-color-text);
+  color: var(--foreground);
 }
 
 .uidex-page-content h2,
@@ -627,15 +1253,13 @@ body.uidex-inspecting * {
 .uidex-page-content h5,
 .uidex-page-content h6 {
   margin: 12px 0 6px;
-  font-size: var(--uidex-font-size-sm);
+  font-size: 14px;
   font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  color: var(--foreground);
 }
 
 .uidex-page-content h2 {
-  font-size: var(--uidex-font-size-md);
+  font-size: 16px;
 }
 
 .uidex-page-content p {
@@ -653,234 +1277,230 @@ body.uidex-inspecting * {
 }
 
 .uidex-checklist-label {
-  display: flex;
-  align-items: baseline;
+  display: inline-flex;
+  align-items: flex-start;
   gap: 8px;
   cursor: pointer;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--foreground);
 }
 
-.uidex-checklist-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
-}
+/* checkbox styles in shared .uidex-toggle-checkbox / .uidex-checklist-checkbox block above */
 
-/* ——— Chips ——— */
-.uidex-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
+/* ============================================================
+   Empty state
+   ============================================================ */
 
-.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-empty-message {
+  padding: 16px 12px;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  text-align: center;
 }
 
-.uidex-chip:hover {
-  background: var(--uidex-color-surface-hover);
-}
+/* ============================================================
+   Input group — mirrors COSS InputGroup (input + inline addon)
+   ============================================================ */
 
-.uidex-chip--absent {
-  opacity: 0.4;
+.uidex-input-group {
+  display: inline-flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--input);
+  background: var(--background);
+  font-size: 14px;
+  color: var(--foreground);
+  margin-bottom: 6px;
+  box-shadow: 0 -1px var(--border);
 }
 
-.uidex-chip--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
+.uidex-input-group:last-child {
+  margin-bottom: 0;
 }
 
-.uidex-chip--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
+.uidex-input-group-text {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  padding: 0 11px;
+  font-size: 14px;
+  line-height: 30px;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.uidex-chip--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
+.uidex-input-group-addon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 7px;
+  flex-shrink: 0;
 }
 
-/* ——— 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;
-}
+/* ============================================================
+   Environment info
+   ============================================================ */
 
-.uidex-badge--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
+.uidex-env-item {
+  font-size: 14px;
+  color: var(--muted-foreground);
+  line-height: 1.6;
 }
 
-.uidex-badge--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
-}
+/* ============================================================
+   Doc/description text
+   ============================================================ */
 
-.uidex-badge--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
+.uidex-doc {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--muted-foreground);
 }
 
-/* ——— Feedback modal ——— */
-.uidex-modal--feedback {
-  width: calc(100vw - 32px);
-  max-width: 400px;
+.uidex-doc--spaced {
+  margin-bottom: 12px;
 }
 
-.uidex-modal-code--inline {
-  border: none;
-  background: none;
-  padding: 0;
-}
+/* ============================================================
+   Header spacer (flex grow to push close button right)
+   ============================================================ */
 
 .uidex-header-spacer {
   flex: 1;
 }
 
-.uidex-chips--spaced {
-  margin-bottom: 8px;
-}
-
-.uidex-modal-doc--spaced {
-  margin-bottom: 12px;
-}
+/* ============================================================
+   Graph visualization
+   ============================================================ */
 
-/* ——— Feedback form ——— */
-.uidex-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.uidex-graph {
+  margin-top: 8px;
 }
 
-.uidex-form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.uidex-graph-svg {
+  display: block;
 }
 
-.uidex-form-label {
-  font-size: var(--uidex-font-size-xs);
+.uidex-graph-header {
+  font-size: 10px;
   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-graph-header--pages {
+  fill: var(--info);
 }
-
-.uidex-form-select:focus,
-.uidex-form-input:focus,
-.uidex-form-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.3);
+.uidex-graph-header--features {
+  fill: var(--uidex-feature);
 }
-
-.uidex-form-input::placeholder,
-.uidex-form-textarea::placeholder {
-  color: var(--uidex-color-text-muted);
+.uidex-graph-header--blocks {
+  fill: var(--uidex-block);
+}
+.uidex-graph-header--components {
+  fill: var(--uidex-component);
 }
 
-.uidex-form-select {
-  appearance: none;
-  padding: 6px 10px;
+.uidex-graph-node {
   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-graph-node rect {
+  fill: var(--card);
+  stroke: var(--border);
+  stroke-width: 1;
+  rx: 6;
+  ry: 6;
 }
 
-.uidex-form-input + .uidex-form-input {
-  margin-top: 6px;
+.uidex-graph-node:hover rect {
+  fill: var(--accent);
+}
+
+.uidex-graph-node--page rect {
+  stroke: color-mix(
+    in srgb,
+    var(--info) 50%,
+    transparent
+  );
+}
+.uidex-graph-node--feature rect {
+  stroke: color-mix(
+    in srgb,
+    var(--uidex-feature) 50%,
+    transparent
+  );
+}
+.uidex-graph-node--block rect {
+  stroke: color-mix(
+    in srgb,
+    var(--uidex-block) 50%,
+    transparent
+  );
+}
+.uidex-graph-node--component rect {
+  stroke: color-mix(
+    in srgb,
+    var(--uidex-component) 50%,
+    transparent
+  );
 }
 
-.uidex-form-textarea {
-  padding: 8px 10px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 80px;
+.uidex-graph-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  fill: var(--foreground);
 }
 
-.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-graph-edge {
+  fill: none;
+  stroke-width: 1;
+  opacity: 0.3;
 }
 
-.uidex-form-submit:hover {
-  background: var(--uidex-color-primary-hover);
+.uidex-graph-edge--page {
+  stroke: var(--info);
 }
-
-.uidex-form-submit:not(:disabled):active {
-  transform: translateY(1px);
+.uidex-graph-edge--feature {
+  stroke: var(--uidex-feature);
 }
-
-.uidex-form-submit:disabled {
-  opacity: 0.5;
-  cursor: default;
+.uidex-graph-edge--block {
+  stroke: var(--uidex-block);
+  stroke-dasharray: 4 3;
 }
 
-/* ——— Form toggle ——— */
-.uidex-form-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
+.uidex-graph-svg.uidex-graph--hover .uidex-graph-edge {
+  opacity: 0.08;
 }
-
-.uidex-form-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
+.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-form-toggle-text {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
+.uidex-graph-note {
+  font-size: 14px;
+  color: var(--muted-foreground);
+  margin-top: 12px;
+  font-style: italic;
 }
 
-/* ——— Responsive ——— */
+/* ============================================================
+   Responsive
+   ============================================================ */
+
 @media (max-width: 600px) {
-  .uidex-modal--panel {
+  .uidex-dialog--panel {
     width: auto;
   }
 
@@ -892,78 +1512,16 @@ body.uidex-inspecting * {
     width: auto;
     max-height: 200px;
     border-right: none;
-    border-bottom: 1px solid var(--uidex-color-border);
+    border-bottom: 1px solid var(--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 — renders in document.body outside Shadow DOM.
+   All styles set inline in overlay.ts. These classes retained
+   for consumers who import style.css standalone.
+   ============================================================ */
 
-/* ——— 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;