ciderui 0.1.0

package/src/css/components/button.css

@@ -0,0 +1,59 @@
+/* ========== BUTTON ========== */
+.btn,
+.btn-primary,
+.btn-secondary,
+.btn-outline,
+.btn-ghost,
+.btn-destructive {
+  @apply inline-flex items-center justify-center gap-2 rounded-[12px] px-4 py-2.5 text-[13px] font-medium disabled:pointer-events-none disabled:opacity-50 cursor-pointer;
+  transition: all 0.25s var(--apple-spring);
+  letter-spacing: -0.01em;
+  &:active { transform: scale(var(--apple-press-scale)); }
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+}
+.btn-primary {
+  @apply bg-primary text-primary-foreground;
+  box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.1);
+  &:hover { @apply bg-primary-hover; box-shadow: var(--shadow), inset 0 1px 0 oklch(1 0 0 / 0.1); }
+  &:active { @apply bg-primary-active; transform: scale(var(--apple-press-scale)); }
+}
+/* Default .btn alone = primary style (exclude color variants, not size/shape modifiers) */
+.btn:not(.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-destructive, .btn-icon) {
+  @apply bg-primary text-primary-foreground;
+  box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.1);
+  &:hover { @apply bg-primary-hover; box-shadow: var(--shadow), inset 0 1px 0 oklch(1 0 0 / 0.1); }
+  &:active { @apply bg-primary-active; }
+}
+.btn-secondary {
+  @apply bg-secondary text-secondary-foreground;
+  &:hover { background: var(--secondary-hover); }
+}
+.btn-outline {
+  @apply border bg-card text-card-foreground;
+  border-color: var(--border-solid);
+  box-shadow: var(--shadow-sm);
+  &:hover { background: var(--surface-2); box-shadow: var(--shadow); }
+}
+.btn-ghost {
+  @apply text-foreground;
+  &:hover { @apply bg-secondary; }
+}
+.btn-destructive {
+  @apply bg-destructive text-destructive-foreground;
+  box-shadow: var(--shadow-sm);
+  &:hover { @apply bg-destructive-hover; box-shadow: var(--shadow); }
+  &:active { @apply bg-destructive-active; transform: scale(var(--apple-press-scale)); }
+}
+.btn-pill {
+  @apply rounded-full px-5;
+}
+.btn-sm {
+  @apply px-3.5 py-1.5 text-xs gap-1.5;
+}
+.btn-lg {
+  @apply px-6 py-3 text-base;
+}
+.btn-icon {
+  @apply size-9 p-0 rounded-full bg-secondary text-muted-foreground;
+  &:hover { background: var(--secondary-hover); }
+}

package/src/css/components/card.css

@@ -0,0 +1,37 @@
+/* ========== CARD ========== */
+.card {
+  @apply rounded-2xl bg-card text-card-foreground;
+  box-shadow: var(--shadow), var(--panel-ring);
+  & > header {
+    @apply px-6 py-5;
+    &:not(:last-child) { border-bottom: 1px solid var(--panel-border); }
+    & h2, & h3 { @apply text-[20px] font-semibold tracking-tight; }
+    & p { @apply mt-1 text-[13px] text-muted-foreground; }
+  }
+  & > section {
+    @apply px-6 py-5;
+  }
+  & > footer {
+    @apply px-6 py-4;
+    border-top: 1px solid var(--panel-border);
+  }
+  /* Basic card without header/section/footer = padded */
+  &:not(:has(header)):not(:has(section)) {
+    @apply p-6;
+    & h2, & h3 { @apply text-[20px] font-semibold tracking-tight; }
+    & p { @apply mt-2 text-[13px] text-muted-foreground; }
+  }
+}
+.card-interactive {
+  @apply rounded-2xl bg-card p-6 text-card-foreground cursor-pointer;
+  box-shadow: var(--shadow), var(--panel-ring);
+  transition: all 0.3s var(--apple-spring);
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+  & h2, & h3 { @apply text-[20px] font-semibold tracking-tight; }
+  & p { @apply mt-2 text-[13px] text-muted-foreground; }
+  &:hover {
+    box-shadow: var(--shadow-md), var(--float-ring);
+    transform: translateY(-1px);
+  }
+  &:active { transform: translateY(0) scale(var(--apple-press-scale)); }
+}

package/src/css/components/carousel.css

@@ -0,0 +1,60 @@
+/* ========== CAROUSEL ========== */
+.carousel {
+  @apply relative w-full;
+  padding-inline: 3rem;
+}
+.carousel-content {
+  @apply flex gap-4 overflow-x-auto scroll-smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  /* overflow-x:auto forces overflow-y:auto per CSS spec, clipping shadows/borders.
+     Padding creates breathing room; negative margin keeps layout stable. */
+  padding-block: 8px;
+  margin-block: -8px;
+  &::-webkit-scrollbar { display: none; }
+}
+.carousel-item {
+  @apply shrink-0;
+  scroll-snap-align: start;
+  width: calc(100% - 2rem);
+}
+.carousel-item-half {
+  @apply shrink-0;
+  scroll-snap-align: start;
+  width: calc(50% - 0.5rem);
+}
+.carousel-item-third {
+  @apply shrink-0;
+  scroll-snap-align: start;
+  width: calc(33.333% - 0.75rem);
+}
+.carousel-prev,
+.carousel-next {
+  @apply absolute top-1/2 z-10 flex size-9 -translate-y-1/2 items-center justify-center rounded-full text-foreground cursor-pointer;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: var(--shadow), var(--float-ring);
+  transition: all 0.2s var(--apple-ease);
+  &:hover { box-shadow: var(--shadow-md), var(--float-ring); }
+  &:active { transform: translateY(-50%) scale(var(--apple-press-scale)); }
+  &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+  &:disabled { @apply pointer-events-none opacity-30; }
+  & svg { @apply size-4; }
+}
+.carousel-prev { @apply -left-3; }
+.carousel-next { @apply -right-3; }
+.carousel-indicators {
+  @apply mt-4 flex items-center justify-center gap-1.5;
+}
+.carousel-indicator {
+  @apply rounded-full cursor-pointer;
+  width: 6px;
+  height: 6px;
+  background: oklch(from var(--foreground) l c h / 0.2);
+  transition: all 0.3s var(--apple-spring);
+  &[data-active] {
+    background: oklch(from var(--foreground) l c h / 0.6);
+    width: 1.5rem;
+  }
+}

package/src/css/components/checkbox.css

@@ -0,0 +1,16 @@
+/* ========== CHECKBOX ========== */
+.checkbox {
+  @apply appearance-none size-[18px] shrink-0 rounded-[5px] border bg-card cursor-pointer;
+  border-color: var(--input-border);
+  transition: all 0.2s var(--apple-ease);
+  &:checked {
+    @apply bg-primary border-primary;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+    background-size: 12px;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  &:hover:not(:focus-visible):not(:checked) { border-color: var(--input-border-hover); }
+  &:focus-visible { box-shadow: 0 0 0 4px oklch(from var(--primary) l c h / 0.15); }
+  &:disabled { @apply cursor-not-allowed opacity-50; }
+}

package/src/css/components/collapsible.css

@@ -0,0 +1,25 @@
+/* ========== COLLAPSIBLE ========== */
+.collapsible {
+  @apply rounded-2xl bg-card;
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+  & summary {
+    @apply flex cursor-pointer list-none items-center justify-between rounded-2xl px-5 py-4 text-[13px] font-medium text-foreground;
+    transition: background-color 0.15s var(--apple-ease);
+    &:hover { background: var(--surface-1); }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    &::-webkit-details-marker { display: none; }
+    & svg:last-child {
+      @apply size-4 shrink-0 text-muted-foreground;
+      transition: transform 0.25s var(--apple-spring);
+    }
+  }
+  &[open] > summary {
+    @apply rounded-b-none;
+  }
+  &[open] > summary svg:last-child {
+    transform: rotate(180deg);
+  }
+  & > div, & > p {
+    @apply px-5 pb-4 text-[13px] text-muted-foreground;
+  }
+}

package/src/css/components/combobox.css

@@ -0,0 +1,69 @@
+/* ========== COMBOBOX ========== */
+.combobox {
+  @apply relative inline-block;
+  & > button {
+    @apply flex h-11 items-center justify-between gap-2 rounded-[12px] border px-3.5 text-[13px] transition-all duration-200 cursor-pointer;
+    background-color: var(--card);
+    border-color: var(--input);
+    &:hover:not(:focus) { border-color: var(--border-solid); }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+    & span { @apply flex-1 truncate text-left; }
+    & span[data-placeholder] { @apply text-muted-foreground; opacity: 0.5; }
+    & svg { @apply size-4 shrink-0 text-muted-foreground opacity-50; }
+  }
+  & [data-combobox-content] {
+    @apply absolute z-50 mt-1.5 w-full min-w-[200px] rounded-xl overflow-hidden;
+    display: none;
+    background: var(--glass-bg-opaque);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    box-shadow: var(--shadow-lg), var(--float-ring);
+    animation: slideUp 0.2s var(--apple-spring);
+    & > header {
+      @apply flex items-center gap-2 border-b px-3;
+      & svg { @apply size-4 shrink-0 text-muted-foreground; }
+      & input {
+        @apply h-10 flex-1 bg-transparent text-[13px] text-foreground outline-none;
+        &::placeholder { @apply text-muted-foreground; opacity: 0.5; }
+      }
+    }
+    & [role="listbox"] {
+      @apply max-h-56 overflow-y-auto p-1;
+      & [role="group"] {
+        & > [role="heading"] {
+          @apply block px-2 py-1.5 text-xs font-medium text-muted-foreground;
+        }
+      }
+      & [role="option"] {
+        @apply flex items-center gap-2 rounded-lg px-2 py-2 text-[13px] text-foreground cursor-pointer transition-colors;
+        & svg { @apply size-4 shrink-0 text-muted-foreground; }
+        &:hover { @apply bg-accent; }
+        &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+        &[data-active] { @apply bg-accent; }
+        &[data-selected] {
+          @apply bg-accent font-medium;
+          &::after {
+            content: "";
+            display: inline-block;
+            width: 1rem; height: 1rem; margin-left: auto;
+            background-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='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+            background-size: contain;
+            background-repeat: no-repeat;
+            flex-shrink: 0;
+          }
+        }
+      }
+      & hr[role="separator"], & hr {
+        @apply my-1 h-px;
+        background: var(--panel-border);
+      }
+      &.combobox-empty::after {
+        content: attr(data-empty);
+        @apply block py-6 text-center text-[13px] text-muted-foreground;
+      }
+    }
+  }
+  &[data-open] > [data-combobox-content] {
+    display: block;
+  }
+}

package/src/css/components/command.css

@@ -0,0 +1,64 @@
+/* ========== COMMAND ========== */
+.command {
+  @apply flex flex-col rounded-2xl bg-card overflow-hidden;
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  & > header {
+    @apply flex items-center gap-2 px-3.5;
+    border-bottom: 1px solid var(--panel-border);
+    & svg { @apply size-4 shrink-0 text-muted-foreground; }
+    & input {
+      @apply h-12 flex-1 bg-transparent text-[13px] text-foreground outline-none;
+      &::placeholder { @apply text-muted-foreground; opacity: 0.45; }
+    }
+  }
+  & [role="menu"], & [role="listbox"] {
+    @apply max-h-72 overflow-y-auto p-1.5;
+    & [role="group"] {
+      & > [role="heading"], & > span[role="heading"] {
+        @apply block px-2.5 py-1.5 text-[11px] font-semibold text-muted-foreground;
+      }
+    }
+    & [role="menuitem"], & [role="option"] {
+      @apply flex items-center gap-2.5 rounded-[8px] px-2.5 py-2 text-[13px] text-foreground cursor-pointer;
+      transition: background-color 0.12s var(--apple-ease);
+      & svg { @apply size-4 shrink-0 text-muted-foreground; }
+      & span { @apply flex-1; }
+      &:hover { @apply bg-accent; }
+      &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+      &[data-active] { @apply bg-accent; }
+      &[aria-disabled="true"] { @apply opacity-50 pointer-events-none; }
+      &[data-selected]::before {
+        content: "";
+        display: inline-block;
+        width: 1rem; height: 1rem;
+        background-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='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+        background-size: contain;
+        background-repeat: no-repeat;
+        flex-shrink: 0;
+      }
+    }
+    & hr[role="separator"], & hr {
+      @apply my-1 h-px;
+      background: var(--panel-border);
+    }
+    &.command-empty::after {
+      content: attr(data-empty);
+      @apply block py-6 text-center text-[13px] text-muted-foreground;
+    }
+  }
+}
+dialog.command-dialog,
+.command-dialog {
+  @apply m-auto w-full max-w-lg rounded-[20px] border-0 bg-transparent p-0;
+  box-shadow: var(--shadow-xl);
+  &::backdrop {
+    background: var(--backdrop-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+  }
+  &[open] { animation: dialogShow 0.25s var(--apple-spring); }
+  & > .command {
+    box-shadow: none;
+    border: 1px solid var(--panel-border);
+  }
+}

package/src/css/components/context-menu.css

@@ -0,0 +1,28 @@
+/* ========== CONTEXT MENU ========== */
+.context-menu-trigger {
+  @apply cursor-default;
+}
+.context-menu-content {
+  @apply fixed z-[9999] min-w-[200px] rounded-xl p-1.5;
+  display: none;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  animation: slideUp 0.12s var(--apple-spring);
+  & button, & a {
+    @apply flex w-full items-center gap-2.5 rounded-[8px] px-3 py-2 text-left text-[13px] text-foreground;
+    transition: background-color 0.12s var(--apple-ease);
+    &:hover { @apply bg-accent; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    & svg { @apply size-4 text-muted-foreground; }
+  }
+  & hr {
+    @apply my-1 h-px mx-1.5;
+    background: var(--panel-border);
+  }
+  & .context-menu-shortcut {
+    @apply ml-auto text-xs text-muted-foreground;
+  }
+  &[data-open] { display: block; }
+}

package/src/css/components/dialog.css

@@ -0,0 +1,23 @@
+/* ========== DIALOG ========== */
+dialog.dialog,
+.dialog {
+  @apply m-auto w-full max-w-md rounded-[20px] bg-card text-card-foreground p-0;
+  box-shadow: var(--shadow-xl), var(--float-ring);
+  &::backdrop {
+    background: var(--backdrop-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+  }
+  &[open] { animation: dialogShow 0.28s var(--apple-spring); }
+  & > header {
+    @apply px-6 pt-6;
+    & h2 { @apply text-[20px] font-semibold tracking-tight text-foreground; }
+    & p { @apply mt-2 text-[13px] text-muted-foreground; }
+  }
+  & > section {
+    @apply px-6 pt-4;
+  }
+  & > footer {
+    @apply flex justify-end gap-2 px-6 pb-6 pt-6;
+  }
+}

package/src/css/components/drawer.css

@@ -0,0 +1,69 @@
+/* ========== DRAWER ========== */
+dialog.sheet-bottom,
+.sheet-bottom {
+  @apply fixed bottom-0 left-0 right-0 top-auto m-0 w-full max-w-full bg-card text-card-foreground;
+  max-height: min(85vh, 600px);
+  border-radius: 20px 20px 0 0;
+  box-shadow: 0 -8px 32px oklch(0 0 0 / 0.1), var(--float-ring);
+  &::backdrop {
+    background: var(--backdrop-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+  }
+  &[open] { animation: sheetSlideInBottom 0.35s var(--apple-spring); }
+  & > header {
+    @apply px-6 py-5;
+    & h2 { @apply text-[20px] font-semibold tracking-tight text-foreground; }
+    & p { @apply mt-1 text-[13px] text-muted-foreground; }
+  }
+  & > section {
+    @apply overflow-y-auto px-6 py-5;
+  }
+  & > footer {
+    @apply px-6 py-4;
+    border-top: 1px solid var(--panel-border);
+  }
+  & .sheet-close {
+    @apply absolute right-4 top-4 rounded-full p-1.5 text-muted-foreground cursor-pointer;
+    transition: all 0.2s var(--apple-ease);
+    &:hover { @apply text-foreground bg-accent; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+    & svg { @apply size-4; }
+  }
+  & .drawer-handle {
+    @apply mx-auto mt-2 mb-1 h-1 w-9 rounded-full;
+    background: var(--surface-7);
+  }
+}
+dialog.sheet-top,
+.sheet-top {
+  @apply fixed top-0 left-0 right-0 bottom-auto m-0 w-full max-w-full bg-card text-card-foreground;
+  max-height: min(85vh, 600px);
+  border-radius: 0 0 20px 20px;
+  box-shadow: 0 8px 32px oklch(0 0 0 / 0.1), var(--float-ring);
+  &::backdrop {
+    background: var(--backdrop-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+  }
+  &[open] { animation: sheetSlideInTop 0.35s var(--apple-spring); }
+  & > header {
+    @apply px-6 py-5;
+    & h2 { @apply text-[20px] font-semibold tracking-tight text-foreground; }
+    & p { @apply mt-1 text-[13px] text-muted-foreground; }
+  }
+  & > section {
+    @apply overflow-y-auto px-6 py-5;
+  }
+  & > footer {
+    @apply px-6 py-4;
+    border-top: 1px solid var(--panel-border);
+  }
+  & .sheet-close {
+    @apply absolute right-4 top-4 rounded-full p-1.5 text-muted-foreground cursor-pointer;
+    transition: all 0.2s var(--apple-ease);
+    &:hover { @apply text-foreground bg-accent; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; }
+    & svg { @apply size-4; }
+  }
+}

package/src/css/components/dropdown-menu.css

@@ -0,0 +1,28 @@
+/* ========== DROPDOWN MENU ========== */
+.dropdown-menu {
+  @apply absolute z-50 mt-1.5 min-w-[200px] rounded-xl p-1.5;
+  display: none;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  &[data-open] { display: block; }
+  & button, & a {
+    @apply flex w-full items-center gap-2.5 rounded-[8px] px-3 py-2 text-left text-[13px] text-foreground;
+    transition: background-color 0.12s var(--apple-ease);
+    &:hover { @apply bg-accent; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    & svg { @apply size-4 text-muted-foreground; }
+  }
+  & .dropdown-divider, & hr {
+    @apply my-1 h-px mx-1.5;
+    background: var(--panel-border);
+  }
+  & .dropdown-destructive {
+    color: var(--destructive);
+    &:hover { background: oklch(from var(--destructive) l c h / 0.08); }
+    &:is(.dark *) {
+      &:hover { background: oklch(from var(--destructive) l c h / 0.12); }
+    }
+  }
+}

package/src/css/components/empty.css

@@ -0,0 +1,12 @@
+/* ========== EMPTY ========== */
+.empty {
+  @apply flex min-w-0 flex-1 flex-col items-center justify-center gap-3 rounded-2xl p-10 text-center text-balance;
+  & .empty-icon {
+    @apply mb-1 flex size-14 shrink-0 items-center justify-center rounded-2xl text-muted-foreground;
+    background: var(--surface-3);
+    & svg { @apply size-6; }
+  }
+  & h3 { @apply text-[20px] font-semibold tracking-tight text-foreground; }
+  & p { @apply text-[13px] text-muted-foreground; max-width: 28ch; }
+  & .empty-actions { @apply mt-3 flex gap-2; }
+}

package/src/css/components/field.css

@@ -0,0 +1,7 @@
+/* ========== FIELD (auto-styles children — form controls inherited from shared base above) ========== */
+.field {
+  @apply space-y-1.5;
+  & > label { @apply text-[13px] font-medium text-foreground; }
+  & > p { @apply text-xs text-muted-foreground; }
+  & > p.field-error { color: var(--destructive); }
+}

package/src/css/components/file-tree.css

@@ -0,0 +1,53 @@
+/* ========== FILE TREE ========== */
+.file-tree {
+  @apply rounded-2xl bg-card;
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+
+  & summary {
+    list-style: none;
+    cursor: pointer;
+    &::-webkit-details-marker { display: none; }
+  }
+
+  /* Root header */
+  & > summary {
+    @apply flex items-center justify-between rounded-2xl px-4 py-3 text-[13px] font-medium text-foreground;
+    transition: background-color 0.15s var(--apple-ease);
+    &:hover { background: var(--surface-1); }
+  }
+  &[open] > summary { @apply rounded-b-none; }
+
+  /* Tree body */
+  & > div {
+    @apply p-2;
+
+    & summary {
+      @apply flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-foreground;
+      transition: background-color 0.15s var(--apple-ease);
+      &:hover { background: var(--surface-2); }
+      &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+      & > svg { @apply size-4 shrink-0 text-muted-foreground; }
+    }
+
+    & .file-tree-chevron {
+      @apply size-3.5 shrink-0 text-muted-foreground;
+      transition: transform 0.2s var(--apple-ease);
+    }
+    & details[open] > summary > .file-tree-chevron {
+      transform: rotate(90deg);
+    }
+
+    /* 12px per nesting level (Xcode-like density) */
+    & details > div { @apply pl-3; }
+  }
+
+  /* File item */
+  & .file-tree-item {
+    @apply flex cursor-pointer items-center gap-1.5 rounded-lg py-1 pr-2 text-[13px] text-muted-foreground;
+    padding-left: 1.75rem; /* aligns file icon with folder icon: px-2 + chevron + gap */
+    transition: background-color 0.15s var(--apple-ease);
+    &:hover { background: var(--surface-2); }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    & > svg { @apply size-4 shrink-0; }
+  }
+}

package/src/css/components/form-controls.css

@@ -0,0 +1,57 @@
+/* ========== FORM CONTROLS (shared base) ========== */
+.input,
+.textarea,
+.select,
+.field > input:not([type="checkbox"]):not([type="radio"]),
+.field > textarea,
+.field > select {
+  @apply w-full rounded-[12px] border text-[13px] text-foreground outline-none;
+  background-color: var(--card);
+  transition: border-color 0.2s var(--apple-ease);
+  &::placeholder { @apply text-muted-foreground; opacity: 0.45; }
+  &:focus {
+    border-color: var(--primary);
+  }
+  &:disabled { @apply cursor-not-allowed opacity-50; }
+}
+/* Text inputs + textareas share border behavior */
+.input,
+.textarea,
+.field > input:not([type="checkbox"]):not([type="radio"]),
+.field > textarea {
+  border-color: var(--input-border);
+  &:hover:not(:focus) { border-color: var(--input-border-hover); }
+}
+/* Input sizing */
+.input,
+.field > input:not([type="checkbox"]):not([type="radio"]) {
+  @apply h-11 px-3.5;
+}
+/* Textarea sizing */
+.textarea,
+.field > textarea {
+  @apply px-3.5 py-3;
+}
+/* Select sizing + chevron */
+.select,
+.field > select {
+  @apply h-11 appearance-none pl-3.5 pr-10;
+  border-color: var(--input);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236E6E73' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  &:is(.dark *) {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2398989D' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+  }
+  &:hover:not(:focus) { border-color: var(--border-solid); }
+}
+/* Error states */
+.input[aria-invalid="true"], .input.input-error,
+.textarea[aria-invalid="true"], .textarea.textarea-error,
+.field > input[aria-invalid="true"], .field > input.input-error {
+  border-color: var(--destructive);
+  &:focus {
+    border-color: var(--destructive);
+  }
+}

package/src/css/components/form.css

@@ -0,0 +1,15 @@
+/* ========== FORM ========== */
+.fieldset {
+  @apply flex flex-col gap-5;
+  & legend {
+    @apply w-full text-base font-semibold tracking-tight text-foreground;
+    letter-spacing: -0.01em;
+    float: left;
+  }
+  & legend + p {
+    @apply mt-1 text-[13px] text-muted-foreground;
+  }
+  & hr {
+    background: var(--panel-border);
+  }
+}

package/src/css/components/hover-card.css

@@ -0,0 +1,25 @@
+/* ========== HOVER CARD ========== */
+.hover-card {
+  @apply relative inline-block;
+}
+.hover-card-content {
+  @apply pointer-events-none absolute z-50 mt-2 min-w-[280px] rounded-2xl p-4;
+  background: var(--glass-bg-opaque);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-lg), var(--float-ring);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.2s var(--apple-ease), transform 0.2s var(--apple-ease);
+}
+.hover-card:hover .hover-card-content {
+  @apply pointer-events-auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+.hover-card-bottom .hover-card-content {
+  @apply bottom-auto top-full mt-2;
+}
+.hover-card-top .hover-card-content {
+  @apply bottom-full top-auto mb-2 mt-0;
+}