uidex 0.0.1 → 0.1.0

package/dist/core/style.css

@@ -0,0 +1,964 @@
+/* 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 {
+  appearance: none;
+  padding: 6px 10px;
+  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);
+  cursor: pointer;
+  outline: none;
+  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-select:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.uidex-form-textarea {
+  padding: 8px 10px;
+  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);
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  min-height: 80px;
+}
+
+.uidex-form-textarea::placeholder {
+  color: var(--uidex-color-text-muted);
+}
+
+.uidex-form-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.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: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;
+}