@mirror-physics/fractal-ui 0.1.1

package/dist/index.css

@@ -0,0 +1,1273 @@
+/* src/components/Button/Button.css */
+.fractal-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-weight: 400;
+  font-family: var(--font-sans);
+  line-height: 1;
+  text-decoration: none;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fractal-button--primary:active:not(:disabled),
+.fractal-button--secondary:active:not(:disabled),
+.fractal-button--ghost:active:not(:disabled),
+.fractal-button--danger:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.fractal-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus, var(--blue-500));
+}
+.fractal-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-button {
+    transition-duration: 0.01ms;
+  }
+}
+
+/* src/components/Card/Card.css */
+.fractal-card {
+  border-radius: var(--radius-lg, 8px);
+  border: 1px solid var(--border-subtle);
+  background-color: var(--bg-surface-1);
+  color: var(--fg-primary);
+  box-shadow: var(--shadow-xs);
+  font-family: var(--font-sans);
+}
+.fractal-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--space-6, 24px);
+}
+.fractal-card-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--fg-primary);
+}
+.fractal-card-description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--fg-secondary);
+}
+.fractal-card-content {
+  padding: 0 var(--space-6, 24px) var(--space-6, 24px);
+}
+.fractal-card-footer {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-6, 24px) var(--space-6, 24px);
+}
+.fractal-feature-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--bg-canvas);
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-sans);
+  transition: background 200ms ease;
+}
+.fractal-feature-card:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-feature-card__icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--fg-primary);
+  margin-bottom: 24px;
+}
+.fractal-feature-card__title {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--fg-primary);
+}
+.fractal-feature-card__description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--fg-secondary);
+}
+.fractal-folder-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--bg-canvas);
+  cursor: pointer;
+  text-align: left;
+  overflow: hidden;
+  font-family: var(--font-sans);
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fractal-folder-card:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-folder-card:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.fractal-folder-card--selected {
+  border-color: var(--accent-default);
+}
+.fractal-folder-card--selected:hover {
+  background: var(--accent-surface);
+}
+.fractal-folder-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--accent-default, var(--blue-500));
+}
+.fractal-folder-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+}
+.fractal-folder-card__icon {
+  flex-shrink: 0;
+  color: var(--fg-secondary);
+}
+.fractal-folder-card__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--fg-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fractal-folder-card__footer {
+  padding: 8px 16px;
+}
+.fractal-folder-card__sessions {
+  font-size: 0.75rem;
+  color: var(--fg-secondary);
+}
+
+/* src/components/PromptCard/PromptCard.css */
+.fractal-prompt-card {
+  --prompt-card-bg: var(--accent-surface);
+  --prompt-card-bg-hover: var(--accent-subtle);
+  --prompt-card-stroke: var(--accent-surface-stroke);
+  --prompt-card-icon-bg: var(--accent-subtle);
+  --prompt-card-icon-color: var(--accent-default);
+  --prompt-card-text: var(--accent-text);
+  width: 100%;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--prompt-card-stroke);
+  border-radius: var(--radius-lg, 8px);
+  background-color: var(--prompt-card-bg);
+  color: var(--prompt-card-text);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  text-align: left;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition:
+    background-color 200ms ease-out,
+    border-color 200ms ease-out,
+    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 150ms ease;
+}
+.fractal-prompt-card:hover,
+.fractal-prompt-card--highlighted {
+  background-color: var(--prompt-card-bg-hover);
+}
+.fractal-prompt-card:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.fractal-prompt-card:disabled {
+  --prompt-card-bg: var(--bg-surface-1);
+  --prompt-card-bg-hover: var(--bg-surface-1);
+  --prompt-card-stroke: var(--border-subtle);
+  --prompt-card-icon-bg: var(--bg-surface-2);
+  --prompt-card-icon-color: var(--fg-tertiary);
+  --prompt-card-text: var(--fg-tertiary);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+.fractal-prompt-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus, var(--blue-500));
+}
+.fractal-prompt-card__icon {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 4px);
+  background-color: var(--prompt-card-icon-bg);
+  color: var(--prompt-card-icon-color);
+  transition: background-color 200ms ease-out, color 200ms ease-out;
+}
+.fractal-prompt-card:hover:not(:disabled) .fractal-prompt-card__icon,
+.fractal-prompt-card--highlighted:not(:disabled) .fractal-prompt-card__icon {
+  background-color: var(--prompt-card-icon-color);
+  color: var(--fg-inverse);
+}
+.fractal-prompt-card__title {
+  min-width: 0;
+  color: var(--prompt-card-text);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.fractal-prompt-card--blue {
+  --prompt-card-bg: var(--accent-surface);
+  --prompt-card-bg-hover: var(--accent-subtle);
+  --prompt-card-stroke: var(--accent-surface-stroke);
+  --prompt-card-icon-bg: var(--accent-subtle);
+  --prompt-card-icon-color: var(--accent-default);
+  --prompt-card-text: var(--accent-text);
+}
+.fractal-prompt-card--pink {
+  --prompt-card-bg: var(--pink-surface);
+  --prompt-card-bg-hover: var(--pink-subtle);
+  --prompt-card-stroke: var(--pink-surface-stroke);
+  --prompt-card-icon-bg: var(--pink-subtle);
+  --prompt-card-icon-color: var(--pink-default);
+  --prompt-card-text: var(--pink-text);
+}
+.fractal-prompt-card--orange {
+  --prompt-card-bg: var(--orange-surface);
+  --prompt-card-bg-hover: var(--orange-subtle);
+  --prompt-card-stroke: var(--orange-surface-stroke);
+  --prompt-card-icon-bg: var(--orange-subtle);
+  --prompt-card-icon-color: var(--orange-default);
+  --prompt-card-text: var(--orange-text);
+}
+.fractal-prompt-card--green {
+  --prompt-card-bg: var(--success-surface);
+  --prompt-card-bg-hover: var(--success-subtle);
+  --prompt-card-stroke: var(--success-surface-stroke);
+  --prompt-card-icon-bg: var(--success-subtle);
+  --prompt-card-icon-color: var(--success-default);
+  --prompt-card-text: var(--success-text);
+}
+.fractal-prompt-card--purple {
+  --prompt-card-bg: var(--purple-surface);
+  --prompt-card-bg-hover: var(--purple-subtle);
+  --prompt-card-stroke: var(--purple-surface-stroke);
+  --prompt-card-icon-bg: var(--purple-subtle);
+  --prompt-card-icon-color: var(--purple-default);
+  --prompt-card-text: var(--purple-text);
+}
+.fractal-prompt-card--red {
+  --prompt-card-bg: var(--error-surface);
+  --prompt-card-bg-hover: var(--error-subtle);
+  --prompt-card-stroke: var(--error-surface-stroke);
+  --prompt-card-icon-bg: var(--error-subtle);
+  --prompt-card-icon-color: var(--error-default);
+  --prompt-card-text: var(--error-text);
+}
+.fractal-prompt-card--yellow {
+  --prompt-card-bg: var(--warning-surface);
+  --prompt-card-bg-hover: var(--warning-subtle);
+  --prompt-card-stroke: var(--warning-surface-stroke);
+  --prompt-card-icon-bg: var(--warning-subtle);
+  --prompt-card-icon-color: var(--warning-default);
+  --prompt-card-text: var(--warning-text);
+}
+.fractal-prompt-card--neutral {
+  --prompt-card-bg: var(--bg-canvas);
+  --prompt-card-bg-hover: var(--bg-surface-1);
+  --prompt-card-stroke: var(--border-subtle);
+  --prompt-card-icon-bg: var(--bg-surface-2);
+  --prompt-card-icon-color: var(--fg-tertiary);
+  --prompt-card-text: var(--fg-primary);
+}
+.fractal-prompt-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+.fractal-prompt-grid--padded {
+  padding: 0.5rem calc(1rem + 1px) 2rem;
+}
+.fractal-prompt-grid--compact {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.fractal-prompt-grid--compact > :nth-child(n+5) {
+  display: none;
+}
+@media (max-width: 639px) {
+  .fractal-prompt-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 419px) {
+  .fractal-prompt-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-prompt-card {
+    transition-duration: 0.01ms;
+  }
+}
+
+/* src/components/Input/Input.css */
+.fractal-input {
+  display: flex;
+  height: 40px;
+  width: 100%;
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid var(--border-default);
+  background-color: var(--bg-canvas);
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  line-height: 1.5;
+  color: var(--fg-primary);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+}
+.fractal-input::placeholder {
+  color: var(--fg-placeholder);
+}
+.fractal-input:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--accent-surface);
+}
+.fractal-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: var(--bg-surface-1);
+}
+.fractal-input[type=file] {
+  border: 0;
+  background: transparent;
+  font-size: 0.875rem;
+  height: auto;
+  padding: 0;
+}
+
+/* src/components/Label/Label.css */
+.fractal-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--fg-primary);
+}
+.fractal-label[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* src/components/Alert/Alert.css */
+.fractal-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid;
+  padding: var(--space-3, 12px) var(--space-4, 16px);
+  font-family: var(--font-sans);
+}
+.fractal-alert-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 50%;
+  margin-top: 1px;
+}
+.fractal-alert-content {
+  flex: 1;
+  min-width: 0;
+}
+.fractal-alert-title {
+  margin: 0 0 4px 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.fractal-alert-description {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.fractal-alert--default {
+  background-color: var(--bg-canvas);
+  border-color: var(--border-default);
+  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);
+  color: var(--fg-primary);
+}
+.fractal-alert--info .fractal-alert-icon {
+  background: var(--accent-default);
+  color: var(--fg-inverse);
+}
+.fractal-alert--success {
+  background-color: var(--success-surface);
+  border-color: var(--success-default);
+  color: var(--fg-primary);
+}
+.fractal-alert--success .fractal-alert-icon {
+  background: var(--success-default);
+  color: var(--fg-inverse);
+}
+.fractal-alert--warning {
+  background-color: var(--warning-surface);
+  border-color: var(--warning-default);
+  color: var(--fg-primary);
+}
+.fractal-alert--warning .fractal-alert-icon {
+  background: var(--warning-default);
+  color: var(--fg-inverse);
+}
+.fractal-alert--error {
+  background-color: var(--error-surface);
+  border-color: var(--error-default);
+  color: var(--fg-primary);
+}
+.fractal-alert--error .fractal-alert-icon {
+  background: var(--error-default);
+  color: var(--fg-inverse);
+}
+
+/* src/components/Toggle/Toggle.css */
+.fractal-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2, 8px);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: var(--font-sans);
+}
+.fractal-toggle-track {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  border-radius: var(--radius-full, 9999px);
+  background-color: var(--bg-surface-2);
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+.fractal-toggle-track--checked {
+  background-color: var(--accent-default);
+}
+.fractal-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: left 0.2s;
+}
+.fractal-toggle-thumb--checked {
+  left: 16px;
+}
+.fractal-toggle-label {
+  font-size: 0.8125rem;
+  color: var(--fg-primary);
+  user-select: none;
+}
+
+/* src/components/Modal/Modal.css */
+.fractal-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlay, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9998;
+}
+.fractal-modal-panel {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg, 8px);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-6, 24px);
+  max-width: 90vw;
+  font-family: var(--font-sans);
+}
+.fractal-modal-panel--sm {
+  width: 420px;
+}
+.fractal-modal-panel--md {
+  width: 756px;
+}
+.fractal-modal-panel--lg {
+  width: calc(100vw - 4rem);
+  height: calc(100vh - 4rem);
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.fractal-modal-panel--danger {
+  border-color: var(--error-subtle);
+}
+.fractal-modal-panel--warn {
+  border-color: var(--warning-subtle);
+}
+.fractal-modal-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-4, 16px);
+}
+.fractal-modal-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--fg-primary);
+}
+.fractal-modal-title--danger {
+  color: var(--error-default);
+}
+.fractal-modal-title--warn {
+  color: var(--warning-default);
+}
+.fractal-modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--fg-secondary);
+  padding: 4px;
+  border-radius: var(--radius-sm, 4px);
+  display: flex;
+  align-items: center;
+}
+.fractal-modal-close:hover {
+  color: var(--fg-primary);
+  background: var(--bg-surface-1);
+}
+.fractal-modal-body {
+  font-size: 0.875rem;
+  color: var(--fg-secondary);
+}
+.fractal-modal-body--lg {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.fractal-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2, 8px);
+  margin-top: var(--space-4, 16px);
+}
+
+/* src/components/DataTable/DataTable.css */
+.fractal-datatable {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-datatable-surface {
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--bg-canvas);
+}
+.fractal-datatable-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+}
+.fractal-datatable-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-7, 32px) var(--space-4, 16px);
+  font-size: 0.875rem;
+  color: var(--fg-secondary);
+  background: var(--bg-canvas);
+}
+.fractal-datatable-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-datatable-thead-row {
+  background: var(--bg-surface-1);
+}
+.fractal-datatable-th {
+  text-align: left;
+  padding: 12px 16px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  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;
+}
+.fractal-datatable-row:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-datatable-td {
+  padding: 14px 16px;
+  color: var(--fg-primary);
+  line-height: 1.55;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+.fractal-datatable-td + .fractal-datatable-td {
+  border-left: 1px solid var(--border-subtle);
+}
+.fractal-datatable-row + .fractal-datatable-row .fractal-datatable-td {
+  border-top: 1px solid var(--border-subtle);
+}
+.fractal-datatable--sm .fractal-datatable-th {
+  padding: 8px 12px;
+}
+.fractal-datatable--sm .fractal-datatable-td {
+  padding: 10px 12px;
+}
+.fractal-datatable--lg .fractal-datatable-th {
+  padding: 18px 24px;
+}
+.fractal-datatable--lg .fractal-datatable-td {
+  padding: 22px 24px;
+}
+
+/* src/components/Dropdown/Dropdown.css */
+.fractal-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.fractal-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--radius-md, 6px);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  color: var(--fg-primary);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.fractal-dropdown-trigger--sm {
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+.fractal-dropdown-trigger--tertiary {
+  border-color: transparent;
+  background: transparent;
+}
+.fractal-dropdown-trigger:hover,
+.fractal-dropdown-trigger--tertiary:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-dropdown-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus);
+}
+.fractal-dropdown-icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--fg-primary);
+}
+.fractal-dropdown-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.fractal-dropdown-icon--trigger svg {
+  width: 16px;
+  height: 16px;
+}
+.fractal-dropdown-selected-text {
+  color: var(--fg-primary);
+}
+.fractal-dropdown-chevron {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--fg-secondary);
+}
+.fractal-dropdown-panel {
+  position: absolute;
+  z-index: 999999;
+  overflow: hidden;
+  border-radius: var(--radius-md, 6px);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+  white-space: nowrap;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+}
+.fractal-dropdown-label {
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  box-sizing: border-box;
+}
+.fractal-dropdown-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  text-align: left;
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  color: var(--fg-primary);
+  transition: background-color 0.1s;
+}
+.fractal-dropdown-panel--sm .fractal-dropdown-label,
+.fractal-dropdown-panel--sm .fractal-dropdown-option {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+.fractal-dropdown-panel--sm .fractal-dropdown-option {
+  gap: 6px;
+}
+.fractal-dropdown-option:hover,
+.fractal-dropdown-option:focus-visible {
+  background: var(--hover-canvas, var(--bg-surface-2));
+  outline: none;
+}
+.fractal-dropdown-separator {
+  height: 1px;
+  margin: 4px -4px;
+  background: var(--border-subtle);
+}
+.fractal-dropdown-option-text {
+  color: var(--fg-primary);
+}
+.fractal-dropdown-trailing {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  color: var(--accent-default);
+}
+
+/* src/components/Link/Link.css */
+.fractal-link {
+  display: inline;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+.fractal-link:hover {
+  opacity: 0.7;
+}
+.fractal-link:active {
+  opacity: 0.5;
+}
+.fractal-link--default {
+  color: var(--fg-primary);
+}
+.fractal-link--muted {
+  color: var(--fg-secondary);
+}
+.fractal-link--accent {
+  color: var(--accent-default);
+}
+.fractal-link--sm {
+  font-size: 0.75rem;
+}
+.fractal-link--md {
+  font-size: 0.875rem;
+}
+.fractal-link--lg {
+  font-size: 1rem;
+}
+
+/* src/components/Chip/Chip.css */
+.fractal-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  padding: 1px 8px;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  line-height: 1.5;
+  white-space: nowrap;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border-subtle);
+  color: var(--fg-secondary);
+}
+.fractal-chip--neutral {
+  background: var(--bg-surface-2);
+  border-color: var(--border-subtle);
+  color: var(--fg-secondary);
+}
+.fractal-chip--success {
+  background: var(--success-surface);
+  border-color: var(--success-subtle);
+  color: var(--success-default);
+}
+.fractal-chip--warning {
+  background: var(--warning-surface);
+  border-color: var(--warning-subtle);
+  color: var(--warning-default);
+}
+.fractal-chip--error {
+  background: var(--error-surface);
+  border-color: var(--error-subtle);
+  color: var(--error-default);
+}
+.fractal-chip--info {
+  background: var(--accent-surface);
+  border-color: var(--accent-subtle);
+  color: var(--accent-default);
+}
+
+/* src/components/SortableTable/SortableTable.css */
+.fractal-sortable-table {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-sortable-table-surface {
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--bg-canvas);
+}
+.fractal-sortable-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+}
+.fractal-sortable-table-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-7, 32px) var(--space-4, 16px);
+  font-size: 0.875rem;
+  color: var(--fg-secondary);
+  background: var(--bg-canvas);
+}
+.fractal-sortable-table-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-sortable-table-thead-row {
+  background: var(--bg-surface-1);
+}
+.fractal-sortable-table-th {
+  text-align: left;
+  padding: 12px 16px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+  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;
+}
+.fractal-sortable-table-sort-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  background: none;
+  border: 0;
+  padding: 12px 16px;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.fractal-sortable-table-sort-button:hover {
+  color: var(--fg-primary);
+  background: var(--hover-surface);
+}
+.fractal-sortable-table-sort-button--active {
+  color: var(--accent-default);
+}
+.fractal-sortable-table-sort-button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.fractal-sortable-table-sort-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-tertiary, var(--fg-secondary));
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+.fractal-sortable-table-sort-button:hover .fractal-sortable-table-sort-icon,
+.fractal-sortable-table-sort-button:focus-visible .fractal-sortable-table-sort-icon {
+  opacity: 1;
+}
+.fractal-sortable-table-sort-button--active .fractal-sortable-table-sort-icon {
+  opacity: 1;
+  color: var(--accent-default);
+}
+.fractal-sortable-table-row {
+  background: var(--bg-canvas);
+  transition: background 120ms ease;
+}
+.fractal-sortable-table-row:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-sortable-table-row + .fractal-sortable-table-row .fractal-sortable-table-td {
+  border-top: 1px solid var(--border-subtle);
+}
+.fractal-sortable-table-row--highlighted {
+  background: var(--bg-surface-1);
+}
+.fractal-sortable-table-row--highlighted:hover {
+  background: var(--bg-surface-2);
+}
+.fractal-sortable-table-td {
+  padding: 14px 16px;
+  color: var(--fg-primary);
+  line-height: 1.55;
+  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-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-sort-button {
+  padding: 18px 24px;
+}
+.fractal-sortable-table--lg .fractal-sortable-table-td {
+  padding: 22px 24px;
+}
+
+/* src/components/Tabs/Tabs.css */
+.fractal-tabs {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-tabs-list {
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 16px;
+}
+.fractal-tabs-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  font-size: 0.875rem;
+  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;
+  margin-bottom: -1px;
+}
+.fractal-tabs-trigger:hover:not(.fractal-tabs-trigger--active):not(.fractal-tabs-trigger--disabled) {
+  color: var(--fg-primary);
+}
+.fractal-tabs-trigger:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.fractal-tabs-trigger--active {
+  color: var(--accent-default);
+  font-weight: 500;
+  box-shadow: inset 0 -1px 0 var(--accent-default);
+}
+.fractal-tabs-trigger--disabled {
+  color: var(--fg-disabled, var(--fg-secondary));
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fractal-tabs-panel {
+  font-size: 0.875rem;
+  color: var(--fg-primary);
+}
+.fractal-tabs-panel[hidden] {
+  display: none;
+}
+
+/* src/components/Disclosure/Disclosure.css */
+.fractal-disclosure {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-disclosure--card {
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-canvas);
+  overflow: hidden;
+}
+.fractal-disclosure-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--fg-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.fractal-disclosure-trigger:hover {
+  background: var(--bg-surface-1);
+}
+.fractal-disclosure-trigger:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+.fractal-disclosure--open .fractal-disclosure-trigger {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.fractal-disclosure-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-secondary);
+  flex-shrink: 0;
+}
+.fractal-disclosure-title {
+  flex: 1;
+  min-width: 0;
+}
+.fractal-disclosure-meta {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--fg-secondary);
+  flex-shrink: 0;
+}
+.fractal-disclosure-panel[hidden] {
+  display: none;
+}
+.fractal-disclosure-panel-inner {
+  padding: 16px;
+  color: var(--fg-primary);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.fractal-disclosure:not(.fractal-disclosure--card) .fractal-disclosure-trigger {
+  padding: 8px 0;
+}
+.fractal-disclosure:not(.fractal-disclosure--card).fractal-disclosure--open .fractal-disclosure-trigger {
+  border-bottom: 0;
+}
+.fractal-disclosure:not(.fractal-disclosure--card) .fractal-disclosure-panel-inner {
+  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 {
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.fractal-sidebar__brand {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-primary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+}
+.fractal-sidebar__brand:hover {
+  background: var(--nav-hover);
+}
+.fractal-sidebar__brand:active {
+  transform: scale(0.98);
+}
+.fractal-sidebar__brand:focus-visible,
+.fractal-sidebar__nav-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-sidebar__nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-4);
+  overflow-y: auto;
+  padding: var(--space-3) var(--space-2);
+}
+.fractal-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.fractal-sidebar__section + .fractal-sidebar__section {
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border-subtle);
+}
+.fractal-sidebar__nav-item {
+  display: flex;
+  width: 100%;
+  min-height: 36px;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  text-align: left;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
+}
+.fractal-sidebar__nav-item:hover {
+  background: var(--nav-hover);
+  color: var(--fg-primary);
+}
+.fractal-sidebar__nav-item[data-active] {
+  background: var(--nav-selected);
+  color: var(--fg-primary);
+  font-weight: 500;
+}
+.fractal-sidebar__nav-item:active {
+  transform: scale(0.99);
+}
+.fractal-sidebar__nav-item-icon {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  align-items: center;
+  justify-content: center;
+}
+.fractal-sidebar__nav-item-icon > svg {
+  width: 18px;
+  height: 18px;
+}
+.fractal-sidebar__nav-item-label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fractal-sidebar__nav-item-end {
+  color: var(--fg-tertiary);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  line-height: 1;
+}
+.fractal-sidebar__footer {
+  padding: var(--space-2);
+  border-top: 1px solid var(--border-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-sidebar__brand,
+  .fractal-sidebar__nav-item {
+    transition: none;
+  }
+}
+/*# sourceMappingURL=index.css.map */