@mirror-physics/fractal-ui 0.2.0-next.76 → 0.2.0-next.78

package/dist/index.css

@@ -1326,6 +1326,224 @@
   border-top: 1px solid var(--border-subtle);
 }
 
+/* src/components/TableLayout/TableLayout.css */
+.fractal-table-layout {
+  container: fractal-table / inline-size;
+  min-width: 0;
+  max-width: 100%;
+}
+.fractal-table-layout .fractal-datatable-surface,
+.fractal-table-layout .fractal-sortable-table-surface {
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.fractal-table-layout[data-table-layout=fill] .fractal-datatable-surface,
+.fractal-table-layout[data-table-layout=fill] .fractal-sortable-table-surface {
+  width: 100%;
+}
+.fractal-table-viewport {
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+}
+.fractal-table-layout table {
+  width: max-content;
+  table-layout: auto;
+  height: 1px;
+}
+.fractal-table-layout[data-table-layout=fill] table {
+  min-width: 100%;
+}
+.fractal-table-layout th,
+.fractal-table-layout td {
+  --table-cell-padding: var(--space-4);
+  white-space: nowrap;
+  overflow-wrap: normal;
+  box-sizing: border-box;
+}
+.fractal-datatable--sm :is(th, td),
+.fractal-sortable-table--sm :is(th, td) {
+  --table-cell-padding: var(--space-3);
+}
+.fractal-datatable--lg :is(th, td),
+.fractal-sortable-table--lg :is(th, td) {
+  --table-cell-padding: var(--space-6);
+}
+.fractal-table-cell-scroll {
+  --table-default-cap: var(--table-column-max-wide);
+  --table-cap: var(--table-column-max, var(--table-default-cap));
+  width: var(--table-column-width, auto);
+  height: 100%;
+  min-width: max(100%, calc(min(var(--table-column-min, 0px), var(--table-cap)) - 1px));
+  max-width: max(0px, calc(var(--table-cap) - 1px));
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+}
+.fractal-table-cell-scroll::-webkit-scrollbar {
+  display: none;
+}
+.fractal-table-layout :is(th, td):has(> .fractal-table-cell-scroll) {
+  padding: 0;
+  height: 100%;
+}
+.fractal-table-cell-content {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  min-height: 100%;
+  padding: var(--table-cell-block-padding) var(--table-cell-padding);
+  gap: var(--space-1);
+  white-space: nowrap;
+}
+.fractal-table-cell-content > * {
+  flex-shrink: 0;
+}
+.fractal-table-cell-scroll {
+  overscroll-behavior-x: auto;
+}
+.fractal-table-viewport:focus-visible,
+.fractal-table-cell-scroll:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+.fractal-table-layout .fractal-sortable-table-th--sortable .fractal-table-cell-content {
+  padding: 0;
+}
+.fractal-table-layout .fractal-sortable-table-sort-button {
+  width: max-content;
+  min-width: 100%;
+  align-self: stretch;
+  white-space: nowrap;
+}
+@container fractal-table (max-width: 1024px) {
+  .fractal-table-cell-scroll {
+    --table-default-cap: var(--table-column-max-medium);
+  }
+}
+@container fractal-table (max-width: 640px) {
+  .fractal-table-cell-scroll {
+    --table-default-cap: var(--table-column-max-compact);
+  }
+}
+.fractal-table-layout[data-sticky-first=true] [data-pinned-column=data] .fractal-table-cell-scroll {
+  --table-cap: min(var(--table-column-max, var(--table-default-cap)), 55cqi);
+}
+.fractal-table-layout[data-sticky-first=true] :is([data-pinned-column=data], [data-pinned-column=selection]) {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 2;
+  background: inherit;
+}
+.fractal-table-layout[data-sticky-first=true][data-table-selection=true] [data-pinned-column=data] {
+  inset-inline-start: 52px;
+}
+.fractal-table-layout[data-sticky-header=true] thead th {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: var(--bg-surface-1);
+}
+.fractal-table-layout[data-sticky-first=true] thead [data-pinned-column] {
+  background: var(--bg-surface-1);
+}
+.fractal-table-layout[data-sticky-header=true][data-sticky-first=true] thead [data-pinned-column] {
+  z-index: 4;
+}
+.fractal-table-layout [data-column-align=right] .fractal-table-cell-content {
+  justify-content: flex-end;
+}
+.fractal-table-layout .fractal-table-overflow-cell {
+  position: sticky;
+  inset-inline-end: 0;
+  z-index: 2;
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: var(--space-2);
+  vertical-align: middle;
+  background: inherit;
+}
+.fractal-table-layout thead .fractal-table-overflow-cell {
+  background: var(--bg-surface-1);
+}
+.fractal-table-layout[data-sticky-header=true] thead .fractal-table-overflow-cell {
+  z-index: 4;
+}
+.fractal-table-layout[data-overflow-menu=true] {
+  --table-trailing-reserve: 48px;
+}
+.fractal-table-layout[data-table-selection=true] {
+  --table-leading-reserve: 52px;
+}
+.fractal-table-layout[data-sticky-first=true] [data-pinned-column=data] .fractal-table-cell-scroll {
+  --table-cap: min(var(--table-column-max, var(--table-default-cap)), 55cqi, max(0px, calc(100cqi - var(--table-leading-reserve, 0px) - var(--table-trailing-reserve, 0px) - 64px)));
+}
+.fractal-table-overflow-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fractal-table-overflow-menu {
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  min-width: min(160px, calc(100vw - 16px));
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  padding: var(--space-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-canvas);
+  box-shadow: var(--shadow-md);
+  color: var(--fg-primary);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+}
+.fractal-table-overflow-menu > button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.fractal-table-overflow-menu > button:hover:not(:disabled) {
+  background: var(--hover-surface);
+}
+.fractal-table-overflow-menu > button:focus-visible {
+  background: var(--hover-surface);
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+.fractal-table-overflow-menu > button:disabled {
+  color: var(--fg-disabled);
+  cursor: not-allowed;
+}
+.fractal-table-overflow-menu > button > span {
+  display: inline-flex;
+}
+.fractal-table-layout[data-sticky-first=true] [data-pinned-column=data]::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -1px;
+  width: 1px;
+  background: var(--border-subtle);
+  pointer-events: none;
+}
+
 /* src/components/DataTable/DataTable.css */
 .fractal-datatable {
   font-family: var(--font-sans);
@@ -1367,7 +1585,9 @@
 .fractal-datatable-th {
   text-align: left;
   padding: 12px 16px;
-  font-size: 0.75rem;
+  --table-cell-block-padding: 12px;
+  font-size: inherit;
+  line-height: 1.55;
   font-weight: 500;
   color: var(--fg-secondary);
   border-bottom: 1px solid var(--border-subtle);
@@ -1382,9 +1602,10 @@
 }
 .fractal-datatable-td {
   padding: 14px 16px;
+  --table-cell-block-padding: 14px;
   color: var(--fg-primary);
   line-height: 1.55;
-  vertical-align: top;
+  vertical-align: middle;
   overflow-wrap: anywhere;
 }
 .fractal-datatable-td .fractal-dropdown-trigger--icon-only.fractal-dropdown-trigger--tertiary:hover {
@@ -1395,15 +1616,23 @@
 }
 .fractal-datatable--sm .fractal-datatable-th {
   padding: 8px 12px;
+  --table-cell-block-padding: 8px;
 }
 .fractal-datatable--sm .fractal-datatable-td {
   padding: 10px 12px;
+  --table-cell-block-padding: 10px;
 }
 .fractal-datatable--lg .fractal-datatable-th {
   padding: 18px 24px;
+  --table-cell-block-padding: 18px;
 }
 .fractal-datatable--lg .fractal-datatable-td {
   padding: 22px 24px;
+  --table-cell-block-padding: 22px;
+}
+.fractal-datatable-th + .fractal-datatable-th,
+.fractal-datatable-td + .fractal-datatable-td {
+  border-inline-start: 1px solid var(--border-subtle);
 }
 
 /* src/components/Dropdown/Dropdown.css */
@@ -1495,13 +1724,18 @@
 .fractal-dropdown-panel {
   position: absolute;
   z-index: 999999;
-  min-width: 100%;
-  overflow: hidden;
+  width: max-content;
+  max-height: 320px;
+  max-width: calc(100vw - 16px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   box-sizing: border-box;
   border-radius: var(--radius-md, 6px);
   border: 1px solid var(--border-subtle);
   background: var(--bg-canvas);
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   padding: 4px;
 }
@@ -1542,6 +1776,7 @@
   background: var(--border-subtle);
 }
 .fractal-dropdown-option-text {
+  min-width: 0;
   color: var(--fg-primary);
 }
 .fractal-dropdown-trailing {
@@ -1600,41 +1835,36 @@
   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;
+  padding: var(--space-1) var(--space-2);
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  line-height: 1rem;
   white-space: nowrap;
-  background: var(--bg-surface-2);
-  border: 1px solid var(--border-subtle);
-  color: var(--fg-secondary);
+  border: 0;
+  background: var(--tag-neutral-bg);
+  color: var(--tag-neutral-fg);
 }
 .fractal-chip--neutral {
-  background: var(--bg-surface-2);
-  border-color: var(--border-subtle);
-  color: var(--fg-secondary);
+  background: var(--tag-neutral-bg);
+  color: var(--tag-neutral-fg);
 }
 .fractal-chip--success {
-  background: var(--success-surface);
-  border-color: var(--success-subtle);
-  color: var(--success-default);
+  background: var(--tag-success-bg);
+  color: var(--tag-success-fg);
 }
 .fractal-chip--warning {
-  background: var(--warning-surface);
-  border-color: var(--warning-subtle);
-  color: var(--warning-default);
+  background: var(--tag-warning-bg);
+  color: var(--tag-warning-fg);
 }
 .fractal-chip--error {
-  background: var(--error-surface);
-  border-color: var(--error-subtle);
-  color: var(--error-default);
+  background: var(--tag-error-bg);
+  color: var(--tag-error-fg);
 }
 .fractal-chip--info {
-  background: var(--accent-surface);
-  border-color: var(--accent-subtle);
-  color: var(--accent-default);
+  background: var(--tag-info-bg);
+  color: var(--tag-info-fg);
 }
 
 /* src/components/Checkbox/Checkbox.css */
@@ -1801,7 +2031,9 @@
 .fractal-sortable-table-th {
   text-align: left;
   padding: 12px 16px;
-  font-size: 0.75rem;
+  --table-cell-block-padding: 12px;
+  font-size: inherit;
+  line-height: 1.55;
   font-weight: 500;
   color: var(--fg-secondary);
   border-bottom: 1px solid var(--border-subtle);
@@ -1947,24 +2179,37 @@
 }
 .fractal-sortable-table-td {
   padding: 14px 16px;
+  --table-cell-block-padding: 14px;
   color: var(--fg-primary);
   line-height: 1.55;
-  vertical-align: top;
+  vertical-align: middle;
   overflow-wrap: anywhere;
 }
-.fractal-sortable-table--sm .fractal-sortable-table-th:not(.fractal-sortable-table-th--sortable),
+.fractal-sortable-table--sm .fractal-sortable-table-th {
+  --table-cell-block-padding: 8px;
+}
 .fractal-sortable-table--sm .fractal-sortable-table-sort-button {
   padding: 8px 12px;
+  --table-cell-block-padding: 8px;
 }
 .fractal-sortable-table--sm .fractal-sortable-table-td {
   padding: 10px 12px;
+  --table-cell-block-padding: 10px;
+}
+.fractal-sortable-table--lg .fractal-sortable-table-th {
+  --table-cell-block-padding: 18px;
 }
-.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;
+  --table-cell-block-padding: 18px;
 }
 .fractal-sortable-table--lg .fractal-sortable-table-td {
   padding: 22px 24px;
+  --table-cell-block-padding: 22px;
+}
+.fractal-sortable-table-th + .fractal-sortable-table-th,
+.fractal-sortable-table-td + .fractal-sortable-table-td {
+  border-inline-start: 1px solid var(--border-subtle);
 }
 
 /* src/components/Tabs/Tabs.css */
@@ -2650,13 +2895,27 @@
   min-width: var(--fractal-sidebar-width);
   box-shadow: var(--shadow-md);
 }
+.fractal-shell-header,
 .fractal-sidebar__header {
+  box-sizing: border-box;
   display: flex;
-  min-height: 48px;
+  block-size: var(--shell-header-height);
+  min-block-size: var(--shell-header-height);
+  max-block-size: var(--shell-header-height);
+  min-inline-size: 0;
+  flex-shrink: 0;
   align-items: center;
-  padding: var(--space-2);
+  padding-block: 0;
   border-bottom: 1px solid var(--border-subtle);
 }
+.fractal-shell-header {
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-inline: var(--space-4);
+}
+.fractal-sidebar__header {
+  padding-inline: var(--space-2);
+}
 .fractal-sidebar__brand {
   display: inline-flex;
   min-width: 0;
@@ -2834,7 +3093,7 @@
   display: flex;
   justify-content: flex-end;
   background: color-mix(in srgb, var(--fg-primary) 16%, transparent);
-  animation: fractal-side-panel-overlay-in 180ms ease-out both;
+  animation: fractal-side-panel-overlay-in var(--duration-normal) var(--ease-out) both;
 }
 .fractal-side-panel {
   display: flex;
@@ -2846,7 +3105,7 @@
   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;
+  animation: fractal-side-panel-in var(--duration-normal) var(--ease-out) both;
 }
 .fractal-side-panel--sm {
   width: min(100vw, 420px);
@@ -2920,7 +3179,33 @@
   justify-content: flex-end;
   gap: var(--space-2);
   padding: var(--space-4) var(--space-6);
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid transparent;
+}
+.fractal-side-panel__header,
+.fractal-side-panel__footer {
+  position: relative;
+  flex-shrink: 0;
+}
+.fractal-side-panel__header::after,
+.fractal-side-panel__footer::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  height: 1px;
+  background: var(--border-subtle);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+.fractal-side-panel__header::after {
+  bottom: 0;
+}
+.fractal-side-panel__footer::before {
+  top: -1px;
+}
+.fractal-side-panel__header[data-scroll-divider=true]::after,
+.fractal-side-panel__footer[data-scroll-divider=true]::before {
+  opacity: 1;
 }
 @media (max-width: 640px) {
   .fractal-side-panel {
@@ -2955,7 +3240,11 @@
 @media (prefers-reduced-motion: reduce) {
   .fractal-side-panel-overlay,
   .fractal-side-panel {
-    animation-duration: 0.01ms;
+    animation: none;
+  }
+  .fractal-side-panel__header::after,
+  .fractal-side-panel__footer::before {
+    transition: none;
   }
 }
 
@@ -3198,4 +3487,137 @@
   text-align: center;
   white-space: nowrap;
 }
+
+/* src/components/ColumnEditor/ColumnEditor.css */
+.fractal-column-editor {
+  position: relative;
+}
+.fractal-column-editor__panel {
+  position: absolute;
+  z-index: 60;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  width: min(440px, calc(100vw - var(--space-7)));
+  box-sizing: border-box;
+  padding: var(--space-4);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-canvas);
+  box-shadow: var(--shadow-md);
+  max-height: 72dvh;
+  overflow-y: auto;
+  font-family: var(--font-sans);
+  font-size: .875rem;
+}
+.fractal-column-editor__panel:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-column-editor__list {
+  display: grid;
+  gap: var(--space-2);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  min-height: var(--space-4);
+}
+.fractal-column-editor__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--fg-primary);
+  background: var(--bg-canvas);
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
+}
+.fractal-column-editor__row[data-hidden] {
+  color: var(--fg-disabled);
+  background: var(--bg-surface-1);
+}
+.fractal-column-editor__row:hover {
+  background: var(--hover-surface);
+}
+.fractal-column-editor__row[data-dragging] {
+  cursor: grabbing;
+  background: var(--nav-selected);
+  border-color: var(--border-focus);
+}
+.fractal-column-editor__grip {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: inherit;
+  pointer-events: none;
+}
+.fractal-column-editor__name {
+  min-width: 0;
+  pointer-events: none;
+}
+.fractal-column-editor__actions {
+  display: flex;
+  flex-shrink: 0;
+  margin-left: auto;
+  cursor: default;
+}
+.fractal-column-editor__actions .fractal-button {
+  cursor: pointer !important;
+  color: var(--fg-secondary);
+}
+.fractal-column-editor__actions .fractal-button:hover:not(:disabled) {
+  background: var(--bg-surface-2) !important;
+}
+.fractal-column-editor__actions .fractal-button:disabled {
+  pointer-events: auto;
+  cursor: pointer !important;
+}
+.fractal-column-editor__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-block: var(--space-6);
+  color: var(--fg-tertiary);
+}
+.fractal-column-editor__divider::before,
+.fractal-column-editor__divider::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--border-subtle);
+}
+.fractal-column-editor__divider > span {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  white-space: nowrap;
+}
+.fractal-column-editor__divider svg {
+  width: 20px;
+  height: 20px;
+}
+.fractal-column-editor__empty {
+  margin: 0;
+  padding-block: var(--space-4);
+  color: var(--fg-tertiary);
+}
+.fractal-column-editor__announcement {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-column-editor__row {
+    transition: none;
+  }
+}
+.fractal-column-editor__panel[data-dragging],
+.fractal-column-editor__panel[data-dragging] .fractal-column-editor__row {
+  cursor: grabbing;
+}
 /*# sourceMappingURL=index.css.map */