@mirror-physics/fractal-ui 0.2.0-next.4 → 0.2.0-next.40

package/dist/index.css

@@ -32,6 +32,60 @@
   }
 }
 
+/* src/components/Breadcrumbs/Breadcrumbs.css */
+.fractal-breadcrumbs {
+  min-width: 0;
+  color: var(--fg-primary);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+.fractal-breadcrumbs__list {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fractal-breadcrumbs__item {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-1);
+}
+.fractal-breadcrumbs__separator {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--fg-tertiary);
+}
+.fractal-breadcrumbs__link,
+.fractal-breadcrumbs__current {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fractal-breadcrumbs__link {
+  color: var(--fg-tertiary);
+  font: inherit;
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.fractal-breadcrumbs__link:hover {
+  color: var(--fg-primary);
+}
+.fractal-breadcrumbs__link:focus-visible {
+  border-radius: var(--radius-sm);
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-breadcrumbs__current {
+  color: var(--fg-primary);
+  font-weight: 500;
+}
+
 /* src/components/Card/Card.css */
 .fractal-card {
   border-radius: var(--radius-lg, 8px);
@@ -401,9 +455,11 @@
   height: 18px;
   font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 50%;
   margin-top: 1px;
 }
+.fractal-alert-icon svg {
+  display: block;
+}
 .fractal-alert-content {
   flex: 1;
   min-width: 0;
@@ -415,53 +471,49 @@
   line-height: 1.4;
 }
 .fractal-alert-description {
+  color: var(--fg-secondary);
   font-size: 0.875rem;
   line-height: 1.5;
 }
 .fractal-alert--default {
   background-color: var(--bg-canvas);
-  border-color: var(--border-default);
+  border-color: var(--border-subtle);
   color: var(--fg-primary);
 }
 .fractal-alert--default .fractal-alert-icon {
-  background: var(--bg-surface-2);
   color: var(--fg-secondary);
 }
 .fractal-alert--info {
   background-color: var(--accent-surface);
-  border-color: var(--accent-default);
+  border-color: var(--accent-surface-stroke);
   color: var(--fg-primary);
 }
 .fractal-alert--info .fractal-alert-icon {
-  background: var(--accent-default);
-  color: var(--fg-inverse);
+  color: var(--accent-default);
 }
 .fractal-alert--success {
   background-color: var(--success-surface);
-  border-color: var(--success-default);
+  border-color: var(--success-surface-stroke);
   color: var(--fg-primary);
 }
 .fractal-alert--success .fractal-alert-icon {
-  background: var(--success-default);
-  color: var(--fg-inverse);
+  color: var(--success-default);
 }
 .fractal-alert--warning {
   background-color: var(--warning-surface);
-  border-color: var(--warning-default);
+  border-color: var(--warning-surface-stroke);
   color: var(--fg-primary);
 }
 .fractal-alert--warning .fractal-alert-icon {
-  background: var(--warning-default);
-  color: var(--fg-inverse);
+  color: var(--warning-default);
 }
 .fractal-alert--error {
   background-color: var(--error-surface);
-  border-color: var(--error-default);
+  border-color: var(--error-surface-stroke);
   color: var(--fg-primary);
 }
 .fractal-alert--error .fractal-alert-icon {
-  background: var(--error-default);
-  color: var(--fg-inverse);
+  color: var(--error-default);
 }
 
 /* src/components/Toggle/Toggle.css */
@@ -506,6 +558,60 @@
   user-select: none;
 }
 
+/* src/components/UILoader/UILoader.css */
+.fractal-ui-loader {
+  display: inline-flex;
+  line-height: 0;
+}
+.fractal-ui-loader svg {
+  display: block;
+  overflow: visible;
+}
+.fractal-ui-loader__stop-start {
+  stop-color: var(--grey-200);
+}
+.fractal-ui-loader__stop-end {
+  stop-color: var(--grey-100);
+}
+.fractal-ui-loader--blue .fractal-ui-loader__stop-start {
+  stop-color: var(--blue-500);
+}
+.fractal-ui-loader--blue .fractal-ui-loader__stop-end {
+  stop-color: var(--blue-300);
+}
+.fractal-ui-loader--green .fractal-ui-loader__stop-start {
+  stop-color: var(--green-500);
+}
+.fractal-ui-loader--green .fractal-ui-loader__stop-end {
+  stop-color: var(--green-300);
+}
+.fractal-ui-loader__shine-axis {
+  transform-box: view-box;
+  transform-origin: 0 0;
+}
+.fractal-ui-loader__shine {
+  animation: fractal-ui-loader-shine 2500ms var(--ease-in-out) infinite;
+  transform-box: view-box;
+  transform-origin: 0 0;
+}
+@keyframes fractal-ui-loader-shine {
+  0%, 12% {
+    transform: translateX(-120px);
+  }
+  48% {
+    transform: translateX(120px);
+  }
+  49%, 100% {
+    transform: translateX(-120px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-ui-loader__shine {
+    animation: none;
+    transform: translateX(0);
+  }
+}
+
 /* src/components/Modal/Modal.css */
 .fractal-modal-overlay {
   position: fixed;
@@ -576,10 +682,23 @@
   color: var(--fg-primary);
   background: var(--bg-surface-1);
 }
+.fractal-modal-close:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.fractal-modal-close:disabled:hover {
+  color: var(--fg-secondary);
+  background: none;
+}
 .fractal-modal-body {
   font-size: 0.875rem;
   color: var(--fg-secondary);
 }
+.fractal-modal-body--loading {
+  display: grid;
+  min-height: 168px;
+  place-items: center;
+}
 .fractal-modal-body--lg {
   flex: 1;
   min-height: 0;
@@ -600,7 +719,7 @@
 .fractal-datatable-surface {
   overflow: hidden;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl, 12px);
+  border-radius: var(--radius-md, 6px);
   background: var(--bg-canvas);
 }
 .fractal-datatable-header {
@@ -639,9 +758,6 @@
   border-bottom: 1px solid var(--border-subtle);
   vertical-align: middle;
 }
-.fractal-datatable-th + .fractal-datatable-th {
-  border-left: 1px solid var(--border-subtle);
-}
 .fractal-datatable-row {
   background: var(--bg-canvas);
   transition: background 120ms ease;
@@ -656,8 +772,8 @@
   vertical-align: top;
   overflow-wrap: anywhere;
 }
-.fractal-datatable-td + .fractal-datatable-td {
-  border-left: 1px solid var(--border-subtle);
+.fractal-datatable-td .fractal-dropdown-trigger--icon-only.fractal-dropdown-trigger--tertiary:hover {
+  background: var(--bg-canvas);
 }
 .fractal-datatable-row + .fractal-datatable-row .fractal-datatable-td {
   border-top: 1px solid var(--border-subtle);
@@ -700,6 +816,16 @@
   padding: 4px 8px;
   font-size: 0.75rem;
 }
+.fractal-dropdown-trigger--icon-only {
+  width: 32px;
+  height: 32px;
+  justify-content: center;
+  padding: 0;
+}
+.fractal-dropdown-trigger--icon-only.fractal-dropdown-trigger--sm {
+  width: 28px;
+  height: 28px;
+}
 .fractal-dropdown-trigger--tertiary {
   border-color: transparent;
   background: transparent;
@@ -708,6 +834,17 @@
 .fractal-dropdown-trigger--tertiary:hover {
   background: var(--bg-surface-1);
 }
+.fractal-dropdown-trigger:disabled,
+.fractal-dropdown-trigger:disabled:hover {
+  color: var(--fg-disabled);
+  cursor: not-allowed;
+  background: var(--bg-surface-1);
+}
+.fractal-dropdown-trigger:disabled .fractal-dropdown-selected-text,
+.fractal-dropdown-trigger:disabled .fractal-dropdown-chevron,
+.fractal-dropdown-trigger:disabled .fractal-dropdown-icon {
+  color: var(--fg-disabled);
+}
 .fractal-dropdown-trigger:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus);
@@ -731,12 +868,15 @@
 .fractal-dropdown-chevron {
   display: flex;
   flex-shrink: 0;
+  margin-left: auto;
   color: var(--fg-secondary);
 }
 .fractal-dropdown-panel {
   position: absolute;
   z-index: 999999;
+  min-width: 100%;
   overflow: hidden;
+  box-sizing: border-box;
   border-radius: var(--radius-md, 6px);
   border: 1px solid var(--border-subtle);
   background: var(--bg-canvas);
@@ -755,6 +895,7 @@
 .fractal-dropdown-option {
   display: flex;
   width: 100%;
+  box-sizing: border-box;
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
@@ -778,7 +919,7 @@
 }
 .fractal-dropdown-option:hover,
 .fractal-dropdown-option:focus-visible {
-  background: var(--hover-canvas, var(--bg-surface-2));
+  background: var(--hover-surface, var(--bg-surface-2));
   outline: none;
 }
 .fractal-dropdown-separator {
@@ -874,6 +1015,35 @@
   color: var(--accent-default);
 }
 
+/* src/components/Checkbox/Checkbox.css */
+.fractal-checkbox {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-checkbox:hover:not(:disabled) {
+  background: var(--hover-canvas);
+  color: var(--fg-primary);
+}
+.fractal-checkbox--checked {
+  color: var(--fg-primary);
+}
+.fractal-checkbox:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-checkbox:disabled {
+  cursor: not-allowed;
+  color: var(--fg-disabled);
+}
+
 /* src/components/SortableTable/SortableTable.css */
 .fractal-sortable-table {
   font-family: var(--font-sans);
@@ -882,9 +1052,14 @@
 .fractal-sortable-table-surface {
   overflow: hidden;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl, 12px);
+  border-radius: var(--radius-md, 6px);
   background: var(--bg-canvas);
 }
+.fractal-sortable-table--embedded .fractal-sortable-table-surface {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  border-radius: 0;
+}
 .fractal-sortable-table-header {
   display: flex;
   align-items: center;
@@ -922,9 +1097,6 @@
   vertical-align: middle;
   white-space: nowrap;
 }
-.fractal-sortable-table-th + .fractal-sortable-table-th {
-  border-left: 1px solid var(--border-subtle);
-}
 .fractal-sortable-table-th--sortable {
   padding: 0;
 }
@@ -977,6 +1149,56 @@
 .fractal-sortable-table-row:hover {
   background: var(--bg-surface-1);
 }
+.fractal-sortable-table-row--interactive {
+  cursor: pointer;
+}
+.fractal-sortable-table-td--row-action {
+  position: relative;
+}
+.fractal-sortable-table-td .fractal-dropdown-trigger--icon-only.fractal-dropdown-trigger--tertiary:hover {
+  background: var(--bg-canvas);
+}
+.fractal-sortable-table-row-action {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  display: flex;
+  width: min(280px, calc(200% + 32px));
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: var(--space-4);
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--hover-surface) 72%, transparent) 52%,
+      var(--hover-surface) 100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+}
+.fractal-sortable-table-row--interactive:hover .fractal-sortable-table-row-action,
+.fractal-sortable-table-row--interactive:focus-visible .fractal-sortable-table-row-action {
+  opacity: 1;
+}
+.fractal-sortable-table-row-action__icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: var(--bg-canvas);
+  color: var(--fg-primary);
+}
+.fractal-sortable-table-row--interactive:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
 .fractal-sortable-table-row + .fractal-sortable-table-row .fractal-sortable-table-td {
   border-top: 1px solid var(--border-subtle);
 }
@@ -993,17 +1215,14 @@
   vertical-align: top;
   overflow-wrap: anywhere;
 }
-.fractal-sortable-table-td + .fractal-sortable-table-td {
-  border-left: 1px solid var(--border-subtle);
-}
-.fractal-sortable-table--sm .fractal-sortable-table-th,
+.fractal-sortable-table--sm .fractal-sortable-table-th:not(.fractal-sortable-table-th--sortable),
 .fractal-sortable-table--sm .fractal-sortable-table-sort-button {
   padding: 8px 12px;
 }
 .fractal-sortable-table--sm .fractal-sortable-table-td {
   padding: 10px 12px;
 }
-.fractal-sortable-table--lg .fractal-sortable-table-th,
+.fractal-sortable-table--lg .fractal-sortable-table-th:not(.fractal-sortable-table-th--sortable),
 .fractal-sortable-table--lg .fractal-sortable-table-sort-button {
   padding: 18px 24px;
 }
@@ -1017,17 +1236,60 @@
   font-size: 0.875rem;
 }
 .fractal-tabs-list {
+  position: relative;
   display: flex;
   gap: 24px;
+  margin-bottom: var(--space-6);
+}
+.fractal-tabs--divider > .fractal-tabs-list {
   border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: 16px;
+}
+.fractal-tabs--surface > .fractal-tabs-list {
+  width: 100%;
+  gap: 0;
+  margin-bottom: 0;
+  background: var(--bg-surface-1);
+}
+.fractal-tabs--surface > .fractal-tabs-list::before {
+  position: absolute;
+  z-index: 3;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  background: var(--border-subtle);
+  content: "";
+  pointer-events: none;
+}
+.fractal-tabs-list::after {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: var(--fractal-tabs-indicator-width, 0px);
+  height: 2px;
+  background: var(--accent-default);
+  content: "";
+  opacity: 0;
+  transform: translateX(var(--fractal-tabs-indicator-offset, 0px));
+  transition:
+    transform 180ms var(--ease-standard, ease),
+    width 180ms var(--ease-standard, ease),
+    opacity 100ms ease;
+}
+.fractal-tabs-list[data-indicator-ready=true]::after {
+  opacity: 1;
+}
+.fractal-tabs--surface > .fractal-tabs-list::after {
+  display: none;
 }
 .fractal-tabs-trigger {
   position: relative;
   display: inline-flex;
+  min-width: 88px;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  padding: 10px 0;
+  padding: 10px 1rem;
   background: none;
   border: 0;
   font: inherit;
@@ -1035,8 +1297,7 @@
   font-weight: 400;
   color: var(--fg-secondary);
   cursor: pointer;
-  transition: color 0.15s ease, box-shadow 0.15s ease;
-  box-shadow: inset 0 -1px 0 transparent;
+  transition: color 0.15s ease;
   margin-bottom: -1px;
 }
 .fractal-tabs-trigger:hover:not(.fractal-tabs-trigger--active):not(.fractal-tabs-trigger--disabled) {
@@ -1050,7 +1311,21 @@
 .fractal-tabs-trigger--active {
   color: var(--accent-default);
   font-weight: 500;
-  box-shadow: inset 0 -1px 0 var(--accent-default);
+}
+.fractal-tabs:not(.fractal-tabs--divider):not(.fractal-tabs--surface) > .fractal-tabs-list > .fractal-tabs-trigger:not(.fractal-tabs-trigger--active) {
+  box-shadow: inset 0 -1px 0 var(--border-subtle);
+}
+.fractal-tabs--surface > .fractal-tabs-list > .fractal-tabs-trigger {
+  margin-bottom: 0;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--bg-surface-1);
+}
+.fractal-tabs--surface > .fractal-tabs-list > .fractal-tabs-trigger:hover:not(.fractal-tabs-trigger--active):not(.fractal-tabs-trigger--disabled) {
+  background: var(--hover-surface);
+}
+.fractal-tabs--surface > .fractal-tabs-list > .fractal-tabs-trigger--active {
+  background: var(--bg-canvas);
+  color: var(--fg-primary);
 }
 .fractal-tabs-trigger--disabled {
   color: var(--fg-disabled, var(--fg-secondary));
@@ -1064,6 +1339,94 @@
 .fractal-tabs-panel[hidden] {
   display: none;
 }
+@media (prefers-reduced-motion: reduce) {
+  .fractal-tabs-list::after {
+    transition: none;
+  }
+}
+
+/* src/components/ContentSwitcher/ContentSwitcher.css */
+.fractal-content-switcher {
+  position: relative;
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-subtle);
+  font-family: var(--font-sans);
+}
+.fractal-content-switcher__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--fractal-content-switcher-indicator-width, 0);
+  height: var(--fractal-content-switcher-indicator-height, 0);
+  border-radius: var(--radius-sm);
+  background: var(--bg-canvas);
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(var(--fractal-content-switcher-indicator-x, 0), var(--fractal-content-switcher-indicator-y, 0), 0);
+}
+.fractal-content-switcher[data-indicator-ready=true] .fractal-content-switcher__indicator {
+  opacity: 1;
+}
+.fractal-content-switcher[data-indicator-ready=true][data-indicator-animate=true] .fractal-content-switcher__indicator {
+  transition:
+    transform var(--duration-normal) var(--ease-in-out),
+    width var(--duration-normal) var(--ease-in-out),
+    height var(--duration-normal) var(--ease-in-out),
+    opacity var(--duration-fast) var(--ease-out);
+}
+.fractal-content-switcher--full-width {
+  display: flex;
+  width: 100%;
+}
+.fractal-content-switcher__item {
+  position: relative;
+  z-index: 1;
+  min-width: 128px;
+  min-height: 40px;
+  padding: 0 var(--space-4);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  text-align: center;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.fractal-content-switcher--full-width .fractal-content-switcher__item {
+  flex: 1;
+}
+.fractal-content-switcher__item:hover:not(:disabled):not(.fractal-content-switcher__item--active) {
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-content-switcher__item--active {
+  background: transparent;
+  color: var(--fg-primary);
+}
+.fractal-content-switcher__item:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+.fractal-content-switcher__item:disabled {
+  cursor: not-allowed;
+  color: var(--fg-disabled);
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-content-switcher[data-indicator-ready=true][data-indicator-animate=true] .fractal-content-switcher__indicator {
+    transition: none;
+  }
+}
 
 /* src/components/Disclosure/Disclosure.css */
 .fractal-disclosure {
@@ -1095,6 +1458,17 @@
 .fractal-disclosure-trigger:hover {
   background: var(--bg-surface-1);
 }
+.fractal-disclosure--disabled .fractal-disclosure-trigger {
+  color: var(--fg-tertiary);
+  cursor: not-allowed;
+}
+.fractal-disclosure--disabled .fractal-disclosure-trigger:hover {
+  background: transparent;
+}
+.fractal-disclosure--disabled .fractal-disclosure-icon,
+.fractal-disclosure--disabled .fractal-disclosure-meta {
+  color: var(--fg-tertiary);
+}
 .fractal-disclosure-trigger:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: -2px;
@@ -1137,25 +1511,380 @@
   padding: 4px 0 12px 24px;
 }
 
-/* src/components/Sidebar/Sidebar.css */
-.fractal-sidebar {
-  --fractal-sidebar-width: 232px;
-  box-sizing: border-box;
-  display: flex;
-  width: var(--fractal-sidebar-width);
-  min-width: var(--fractal-sidebar-width);
-  min-height: 100%;
-  flex-direction: column;
-  background: var(--bg-surface-1);
-  border-right: 1px solid var(--nav-border);
-  color: var(--fg-primary);
-  font-family: var(--font-sans);
-}
-.fractal-sidebar__header {
+/* src/components/LatticeLoader/LatticeLoader.css */
+.fractal-lattice-loader {
   display: flex;
-  min-height: 48px;
   align-items: center;
-  padding: 0 var(--space-4);
+  gap: 6px;
+  width: 100%;
+  height: 12px;
+  overflow: hidden;
+  color: var(--fg-secondary);
+}
+.fractal-lattice-loader__cell {
+  position: relative;
+  width: 12px;
+  flex: 0 0 12px;
+  aspect-ratio: 1;
+  background: currentColor;
+  -webkit-mask: url("./lattice-FAYE5KWW.svg") center / contain no-repeat;
+  mask: url("./lattice-FAYE5KWW.svg") center / contain no-repeat;
+  opacity: 0.08;
+  animation: fractal-lattice-wave 3.2s ease-in-out infinite;
+  animation-delay: calc((var(--fractal-lattice-index) * 40ms) - 3.2s);
+}
+@keyframes fractal-lattice-wave {
+  0%, 58%, 100% {
+    opacity: 0.08;
+  }
+  18% {
+    opacity: 0.28;
+  }
+  30% {
+    opacity: 1;
+  }
+  42% {
+    opacity: 0.28;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-lattice-loader__cell {
+    opacity: 0.35;
+    animation: none;
+  }
+}
+
+/* src/components/Ghost/Ghost.css */
+.fractal-ghost {
+  --fractal-ghost-base: var(--bg-surface-1);
+  --fractal-ghost-shine: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
+  display: block;
+  min-width: 0;
+  min-height: 1px;
+  background:
+    linear-gradient(
+      105deg,
+      var(--fractal-ghost-base) 20%,
+      var(--fractal-ghost-shine) 44%,
+      var(--fractal-ghost-base) 68%);
+  background-size: 220% 100%;
+  border-radius: var(--radius-sm);
+  animation: fractal-ghost-shine var(--duration-ambient) var(--ease-in-out) infinite;
+}
+.fractal-ghost-line {
+  height: 0.875rem;
+}
+.fractal-ghost-line--sm {
+  height: 0.6875rem;
+}
+.fractal-ghost-line--lg {
+  height: 1.125rem;
+}
+.fractal-ghost-stack {
+  display: grid;
+  gap: var(--space-2);
+}
+.fractal-ghost-button {
+  border-radius: var(--radius-full);
+}
+.fractal-ghost-button--xs {
+  width: 72px;
+  height: 28px;
+}
+.fractal-ghost-button--sm {
+  width: 84px;
+  height: 32px;
+}
+.fractal-ghost-button--md {
+  width: 96px;
+  height: 40px;
+}
+.fractal-ghost-button--lg {
+  width: 108px;
+  height: 44px;
+}
+.fractal-ghost-button--xl {
+  width: 128px;
+  height: 56px;
+}
+.fractal-ghost-button--icon-only {
+  width: var(--fractal-ghost-icon-size, 40px);
+}
+.fractal-ghost-button--xs.fractal-ghost-button--icon-only {
+  --fractal-ghost-icon-size: 28px;
+}
+.fractal-ghost-button--sm.fractal-ghost-button--icon-only {
+  --fractal-ghost-icon-size: 32px;
+}
+.fractal-ghost-button--lg.fractal-ghost-button--icon-only {
+  --fractal-ghost-icon-size: 44px;
+}
+.fractal-ghost-button--xl.fractal-ghost-button--icon-only {
+  --fractal-ghost-icon-size: 56px;
+}
+.fractal-ghost-card {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+}
+.fractal-ghost-table {
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+}
+.fractal-ghost-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.fractal-ghost-table__head-row {
+  background: var(--bg-surface-1);
+}
+.fractal-ghost-table th {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--fg-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: left;
+}
+.fractal-ghost-table td {
+  padding: 14px 16px;
+}
+.fractal-ghost-table__row + .fractal-ghost-table__row td {
+  border-top: 1px solid var(--border-subtle);
+}
+.fractal-ghost-table--sm th {
+  padding: 8px 12px;
+}
+.fractal-ghost-table--sm td {
+  padding: 10px 12px;
+}
+.fractal-ghost-table--lg th {
+  padding: 18px 24px;
+}
+.fractal-ghost-table--lg td {
+  padding: 22px 24px;
+}
+.fractal-ghost-field {
+  display: grid;
+  gap: var(--space-2);
+}
+.fractal-ghost-field__control {
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-field__control--multiline {
+  height: 112px;
+}
+.fractal-ghost-label {
+  border-radius: var(--radius-sm);
+}
+.fractal-ghost-alert {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-choice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.fractal-ghost-choice__control {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-sm);
+}
+.fractal-ghost-chip {
+  border-radius: var(--radius-full);
+}
+.fractal-ghost-link {
+  display: inline-block;
+}
+.fractal-ghost-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 220px;
+  height: 40px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-dropdown__chevron {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+}
+.fractal-ghost-switcher {
+  display: flex;
+  width: fit-content;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-1);
+}
+.fractal-ghost-switcher > .fractal-ghost {
+  width: 76px;
+  height: 32px;
+  border-radius: calc(var(--radius-md) - 2px);
+}
+.fractal-ghost-disclosure {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.fractal-ghost-disclosure__icon {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+}
+.fractal-ghost-pagination {
+  display: flex;
+  gap: var(--space-2);
+}
+.fractal-ghost-pagination > .fractal-ghost {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-dropzone {
+  display: grid;
+  place-items: center;
+  gap: var(--space-3);
+  min-height: 184px;
+  padding: var(--space-6);
+  border: 1px dashed var(--border-default);
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-dropzone__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+}
+.fractal-ghost-prompt-card {
+  min-height: 176px;
+}
+.fractal-ghost-sidebar {
+  display: grid;
+  align-content: start;
+  gap: var(--space-7);
+  width: 248px;
+  min-height: 100%;
+  padding: var(--space-5);
+  border-right: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+}
+.fractal-ghost-sidebar__brand {
+  width: 112px;
+  height: 24px;
+}
+.fractal-ghost-sidebar__items {
+  display: grid;
+  gap: var(--space-2);
+}
+.fractal-ghost-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 36px;
+  padding: 0 var(--space-2);
+}
+.fractal-ghost-sidebar__item > .fractal-ghost {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-sm);
+}
+.fractal-ghost-surface {
+  display: grid;
+  gap: var(--space-5);
+  padding: var(--space-6);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-canvas);
+}
+.fractal-ghost-modal {
+  width: min(100%, 420px);
+}
+.fractal-ghost-side-panel {
+  width: min(100%, 540px);
+  min-height: 480px;
+}
+.fractal-ghost-surface__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fractal-ghost-surface__close {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-md);
+}
+.fractal-ghost-surface__title {
+  color: var(--fg-secondary);
+  font-size: 0.75rem;
+}
+@keyframes fractal-ghost-shine {
+  from {
+    background-position: 110% 0;
+  }
+  to {
+    background-position: -110% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-ghost {
+    animation: none;
+    background: var(--fractal-ghost-base);
+  }
+}
+
+/* src/components/Sidebar/Sidebar.css */
+.fractal-sidebar {
+  --fractal-sidebar-width: 232px;
+  --fractal-sidebar-compact-width: 56px;
+  box-sizing: border-box;
+  display: flex;
+  width: var(--fractal-sidebar-width);
+  min-width: var(--fractal-sidebar-width);
+  min-height: 100%;
+  flex-direction: column;
+  background: var(--bg-surface-1);
+  border-right: 1px solid var(--nav-border);
+  color: var(--fg-primary);
+  font-family: var(--font-sans);
+}
+.fractal-sidebar[data-compact] {
+  z-index: 10;
+  width: var(--fractal-sidebar-compact-width);
+  min-width: var(--fractal-sidebar-compact-width);
+  overflow: hidden;
+  transition:
+    width var(--duration-normal) var(--ease-out),
+    min-width var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
+}
+.fractal-sidebar[data-compact]:hover,
+.fractal-sidebar[data-compact]:focus-within {
+  width: var(--fractal-sidebar-width);
+  min-width: var(--fractal-sidebar-width);
+  box-shadow: var(--shadow-md);
+}
+.fractal-sidebar__header {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  padding: var(--space-2);
   border-bottom: 1px solid var(--border-subtle);
 }
 .fractal-sidebar__brand {
@@ -1180,10 +1909,55 @@
   transform: scale(0.98);
 }
 .fractal-sidebar__brand:focus-visible,
-.fractal-sidebar__nav-item:focus-visible {
+.fractal-sidebar__nav-item:focus-visible,
+.fractal-sidebar__account-trigger:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
+.fractal-sidebar__account {
+  display: block;
+  width: 100%;
+}
+.fractal-sidebar__account-trigger {
+  width: 100%;
+  min-height: 36px;
+  box-sizing: border-box;
+  gap: var(--space-2);
+  padding: 8px 10px;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-md);
+  color: var(--fg-primary);
+  font-weight: 500;
+}
+.fractal-sidebar__account-trigger:hover,
+.fractal-sidebar__account-trigger.fractal-dropdown-trigger--tertiary:hover {
+  background: var(--nav-hover);
+}
+.fractal-sidebar__account-name {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fractal-sidebar__account-icon {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  align-items: center;
+  justify-content: center;
+}
+.fractal-sidebar__account-icon > img,
+.fractal-sidebar__account-icon > svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+.fractal-sidebar__account-panel {
+  min-width: 100%;
+}
 .fractal-sidebar__nav {
   display: flex;
   flex: 1;
@@ -1275,54 +2049,383 @@
   border-top: 1px solid var(--border-subtle);
 }
 @media (prefers-reduced-motion: reduce) {
+  .fractal-sidebar[data-compact],
   .fractal-sidebar__brand,
   .fractal-sidebar__nav-item {
     transition: none;
   }
 }
 
-/* src/components/PageHeader/PageHeader.css */
-.fractal-page-header {
+/* src/components/SidePanel/SidePanel.css */
+.fractal-side-panel-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
   display: flex;
-  min-height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-5);
+  justify-content: flex-end;
+  background: color-mix(in srgb, var(--fg-primary) 16%, transparent);
+  animation: fractal-side-panel-overlay-in 180ms ease-out both;
+}
+.fractal-side-panel {
+  display: flex;
+  width: min(100vw, 540px);
+  height: 100%;
+  flex-direction: column;
+  border-left: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+  box-shadow: var(--shadow-lg);
   color: var(--fg-primary);
   font-family: var(--font-sans);
+  animation: fractal-side-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
-.fractal-page-header__content {
+.fractal-side-panel--sm {
+  width: min(100vw, 420px);
+}
+.fractal-side-panel--md {
+  width: min(100vw, 540px);
+}
+.fractal-side-panel--lg {
+  width: min(100vw, 680px);
+}
+.fractal-side-panel--xl {
+  width: min(100vw, 960px);
+}
+.fractal-side-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6) var(--space-4);
+}
+.fractal-side-panel__heading {
   min-width: 0;
 }
-.fractal-page-header__title {
+.fractal-side-panel__title {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
   margin: 0;
-  color: var(--fg-primary);
-  font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.4;
 }
-.fractal-page-header__description {
+.fractal-side-panel__description {
   margin: var(--space-1) 0 0;
   color: var(--fg-secondary);
   font-size: 0.875rem;
-  font-weight: 400;
   line-height: 1.4;
 }
-.fractal-page-header__actions {
-  display: flex;
+.fractal-side-panel__close {
+  display: grid;
+  width: 32px;
+  height: 32px;
   flex: 0 0 auto;
-  align-items: center;
+  place-items: center;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-side-panel__close:hover {
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-side-panel__close:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-side-panel__body {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-2) var(--space-6) var(--space-6);
+}
+.fractal-side-panel__body--loading {
+  display: grid;
+  place-items: center;
+}
+.fractal-side-panel__footer {
+  display: flex;
+  justify-content: flex-end;
   gap: var(--space-2);
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--border-subtle);
 }
 @media (max-width: 640px) {
-  .fractal-page-header {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-  .fractal-page-header__actions {
+  .fractal-side-panel {
     width: 100%;
   }
+  .fractal-side-panel__header {
+    padding: var(--space-4) var(--space-5) var(--space-3);
+  }
+  .fractal-side-panel__body {
+    padding: var(--space-2) var(--space-5) var(--space-5);
+  }
+  .fractal-side-panel__footer {
+    padding: var(--space-3) var(--space-5);
+  }
+}
+@keyframes fractal-side-panel-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fractal-side-panel-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-side-panel-overlay,
+  .fractal-side-panel {
+    animation-duration: 0.01ms;
+  }
+}
+
+/* src/components/Textarea/Textarea.css */
+.fractal-textarea {
+  display: block;
+  width: 100%;
+  min-height: 120px;
+  resize: vertical;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+  padding: var(--space-3);
+  color: var(--fg-primary);
+  font: 0.8125rem/1.55 var(--font-mono);
+}
+.fractal-textarea::placeholder {
+  color: var(--fg-placeholder);
+}
+.fractal-textarea:hover {
+  border-color: var(--fg-tertiary);
+}
+.fractal-textarea:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--accent-surface);
+}
+.fractal-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: var(--bg-surface-1);
+}
+
+/* src/components/TextButton/TextButton.css */
+.fractal-text-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1.4;
+  padding: 0;
+  text-align: left;
+  transition: color 120ms ease;
+}
+.fractal-text-button--primary {
+  color: var(--fg-primary);
+}
+.fractal-text-button--primary:hover:not(:disabled) {
+  color: var(--fg-secondary);
+}
+.fractal-text-button--secondary {
+  color: var(--fg-secondary);
+}
+.fractal-text-button--secondary:hover:not(:disabled) {
+  color: var(--fg-primary);
+}
+.fractal-text-button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+.fractal-text-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.fractal-text-button--sm {
+  font-size: 0.8125rem;
+}
+.fractal-text-button--md {
+  font-size: 0.875rem;
+}
+.fractal-text-button__icon {
+  display: inline-grid;
+  place-items: center;
+}
+
+/* src/components/FileDropzone/FileDropzone.css */
+.fractal-file-dropzone {
+  display: grid;
+  gap: var(--space-2);
+  color: var(--fg-primary);
+  font-family: var(--font-sans);
+}
+.fractal-file-dropzone__input {
+  display: none;
+}
+.fractal-file-dropzone__target {
+  display: flex;
+  width: 100%;
+  min-height: 92px;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  border: 1px dashed var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+  color: var(--fg-secondary);
+  cursor: pointer;
+  padding: var(--space-4);
+  text-align: left;
+}
+.fractal-file-dropzone__target:hover,
+.fractal-file-dropzone__target[data-dragging] {
+  border-color: var(--border-focus);
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-file-dropzone__target:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-file-dropzone__target:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.fractal-file-dropzone__copy {
+  display: grid;
+  gap: var(--space-1);
+}
+.fractal-file-dropzone__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.fractal-file-dropzone__description {
+  color: var(--fg-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+.fractal-file-dropzone__files {
+  display: grid;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fractal-file-dropzone__file {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+.fractal-file-dropzone__file-name {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fractal-file-dropzone__file-meta {
+  color: var(--fg-secondary);
+  white-space: nowrap;
+}
+.fractal-file-dropzone__remove {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-file-dropzone__remove:hover {
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-file-dropzone__remove:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 1px;
+}
+.fractal-file-dropzone__remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* src/components/Pagination/Pagination.css */
+.fractal-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  color: var(--fg-secondary);
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+.fractal-pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.fractal-pagination__page-size .fractal-dropdown-trigger {
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg-secondary);
+}
+.fractal-pagination__page-size .fractal-dropdown-trigger:hover {
+  background: transparent;
+  color: var(--fg-primary);
+}
+.fractal-pagination__button {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-canvas);
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-pagination__button:hover:not(:disabled) {
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-pagination__button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-pagination__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.fractal-pagination__page {
+  min-width: 44px;
+  text-align: center;
+  white-space: nowrap;
 }
 /*# sourceMappingURL=index.css.map */