@crisp-ui-kit/crisp 0.54.1 → 0.54.2

package/dist/savedviews.css

@@ -0,0 +1,78 @@
+
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-menuRow); flex-shrink: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); color: var(--crisp-fg-muted); }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: var(--crisp-weight-semibold); }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: var(--crisp-fg-muted); }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: var(--crisp-space-1); margin: 0;
+      border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
+  
+.crisp-savedviews {
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
+      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-savedviews, .crisp-savedviews * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/savedviews.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface SavedviewsVariants {
+
+}
+
+export declare const savedviewsRecipe: RecipeFn<{  }>;

package/dist/savedviews.layered.css

@@ -0,0 +1,80 @@
+@layer crisp-components {
+
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-menuRow); flex-shrink: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); color: var(--crisp-fg-muted); }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: var(--crisp-weight-semibold); }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: var(--crisp-fg-muted); }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: var(--crisp-space-1); margin: 0;
+      border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
+  
+.crisp-savedviews {
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
+      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-savedviews, .crisp-savedviews * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

package/dist/styles.css

@@ -7,6 +7,7 @@
   --crisp-bg-raised: #f4f4f5;
   --crisp-border-default: #e4e4e7;
   --crisp-border-subtle: #eeeff1;
+  --crisp-border-dropzone: #e6e7ea;
   --crisp-ring-neutral: transparent;
   --crisp-ring-field: rgba(0,0,0,0.06);
   --crisp-ring-switch: #d9dade;
@@ -25,6 +26,7 @@
   --crisp-fg-muted: #71717a;
   --crisp-bg-danger: #e5484d;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #eb3b3b;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -59,6 +61,7 @@
   --crisp-bg-raised: #101112;
   --crisp-border-default: #212224;
   --crisp-border-subtle: #1c1d1f;
+  --crisp-border-dropzone: #212224;
   --crisp-ring-neutral: #212224;
   --crisp-ring-field: #212224;
   --crisp-ring-switch: #212224;
@@ -77,6 +80,7 @@
   --crisp-fg-muted: #9a9aa2;
   --crisp-bg-danger: #ff5a5f;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #ff5a5f;
   --crisp-stroke-field-focus: #f3f4f5;
   --crisp-fg-disabled: #5b606a;
   --crisp-bg-neutral-weak: #1d2025;
@@ -97,9 +101,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
-  --crisp-bg-purple-soft: #f5f0ff;
-  --crisp-fg-purple-soft: #6238b5;
-  --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-bg-purple-soft: #2f1e5a;
+  --crisp-fg-purple-soft: #d8c4ff;
+  --crisp-ring-purple-soft: #45297d;
 }
 
 :root {
@@ -601,6 +605,9 @@
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
@@ -618,23 +625,25 @@
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
-    /* The rejection's message, beside the cell's own content -- a sibling in the TableCell, never nested inside a column's own render output, so a
-       hover-only wrapper (a Tooltip, say) around a custom render can't hide it. Block-level: the row grows to fit it rather than floating over the row below, so it can never end up clipped by the scroll container's overflow the way a position:fixed escape would need
-       guarding against. */
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so
-       the cell IS the picker: same chromeless-fill treatment as
-       RecordsTable's own --picker cells (measured there already; DataTable shares RecordsTable's grid, Golden Rule 0). */
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* reference picker: a leading 16px avatar per option, plus a trailing
-       "Create X" row when the consumer supplies one (#449) -- same measured
-       values as RecordsTable's own .crisp-recordstable-refoption*. */
+    /* reference picker: a leading 16px avatar per option, plus a trailing "Create X" row when the consumer supplies one (#449) -- same measured values as RecordsTable's own .crisp-recordstable-refoption*. */
     & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
@@ -651,12 +660,7 @@
     & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -669,11 +673,10 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -1118,6 +1121,10 @@
     & .crisp-linechart-axis-title { margin-top: var(--crisp-space-1); padding-inline-start: var(--crisp-linechart-yaxis-width); text-align: center; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
 }
 
+.crisp-mention-chip {
+  display: inline; border-radius: var(--crisp-radius-chip); padding-inline: var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default;
+}
+
 
     /* pointer-events: auto (#375): a modal Dialog sets pointer-events: none
        on document.body while open (Zag re-enables it only on layers IT
@@ -1626,17 +1633,26 @@
 }
 
 .crisp-table {
-  display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
-    & .crisp-table-scroll { overflow-x: auto; }
+  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps` (style/className on this element), and the header/footer below pin inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, `overflow: auto`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
-       (padding: 0 12px) and independently on a body cell's text inset (getBoundingClientRect delta from the cell edge). Matches ColumnCalc's own already-correct 12px trigger inset. */
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell (padding: 0 12px) and independently on a body cell's text inset
+       (getBoundingClientRect delta from the cell edge). Matches
+       ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
+    /* #554: sticky on the vertical axis, mirroring RecordsTable's own
+       `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
+       and below a sticky-column corner cell (DataTable's `th[data-sticky]`, z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid var(--crisp-border-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    /* #554: sticky to the bottom, mirroring `.crisp-recordstable-sum`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--crisp-border-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
     & caption { padding: var(--crisp-space-2) var(--crisp-space-2); text-align: start; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }
@@ -2063,6 +2079,13 @@
     & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
 }
 
+.crisp-formdialog {
+  & .crisp-formdialog-createfoot { display: flex; align-items: center; gap: var(--crisp-space-4); }
+    & .crisp-formdialog-more-label { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-formdialog-error { font-size: var(--crisp-text-md); color: var(--crisp-fg-danger); margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: var(--crisp-space-3); }
+}
+
 .crisp-headerbar {
   box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
@@ -2071,6 +2094,45 @@
     & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
 }
 
+.crisp-importdialog {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; border-radius: 0; background: var(--crisp-bg-surface); box-shadow: none; transform: none; opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-6); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-importdialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-importdialog-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; padding: var(--crisp-space-4) var(--crisp-space-6) 0; }
+    & .crisp-importdialog-step { display: inline-flex; align-items: center; height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: default; transition: background-color .12s, color .12s; }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 1px; }
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--crisp-space-6); }
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--crisp-space-3); flex-shrink: 0; min-height: 56px; padding: 0 var(--crisp-space-6); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-importdialog-dropzone { box-sizing: border-box; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); width: 100%; border: 1px dashed var(--crisp-border-dropzone); border-radius: 20px; background: var(--crisp-bg-subtle); text-align: center; transition: background-color .12s, border-color .12s; }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: var(--crisp-bg-brand-solid); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: var(--crisp-bg-danger); }
+    & .crisp-importdialog-dropzone-title { color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
+    & .crisp-importdialog-dropzone-or { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose { border: none; background: none; padding: 0; margin: 0; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid); cursor: pointer; }
+    & .crisp-importdialog-dropzone-choose:hover { color: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; border-radius: var(--crisp-radius-sm); }
+    & .crisp-importdialog-dropzone-learnmore { color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-importdialog, .crisp-importdialog * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-inbox {
   display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
@@ -2708,6 +2770,85 @@
   }
 }
 
+
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-menuRow); flex-shrink: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); color: var(--crisp-fg-muted); }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: var(--crisp-weight-semibold); }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: var(--crisp-fg-muted); }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: var(--crisp-space-1); margin: 0;
+      border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
+  
+.crisp-savedviews {
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
+      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-savedviews, .crisp-savedviews * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-settingssection {
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
@@ -2830,6 +2971,58 @@
   }
 }
 
+.crisp-taskstable {
+  display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: var(--crisp-font-sans); color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-taskstable-colhead { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-height: 49px; max-height: 49px; padding: var(--crisp-space-2-5) var(--crisp-space-3); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-taskstable-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); }
+    & .crisp-taskstable-cell { display: flex; align-items: center; min-width: 0; }
+    & .crisp-taskstable-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
+    & .crisp-taskstable-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
+    & .crisp-taskstable-check:checked { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    & .crisp-taskstable-check:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-taskstable-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-taskstable-due { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); white-space: nowrap; }
+    & .crisp-taskstable-due[data-overdue] { color: var(--crisp-fg-danger); }
+    & .crisp-taskstable-empty { padding: var(--crisp-space-8) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-taskstable, .crisp-taskstable * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.crisp-themepicker {
+  display: flex; gap: var(--crisp-space-2); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-themepicker-option { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); width: 224px; padding: var(--crisp-space-1); border: 1px solid var(--crisp-border-subtle); border-radius: 16px; background: var(--crisp-bg-surface); cursor: pointer; font-family: inherit; }
+    & .crisp-themepicker-option[data-selected] { border-color: var(--crisp-bg-brand-solid); }
+    & .crisp-themepicker-preview { box-sizing: border-box; display: flex; width: 100%; height: 114px; padding: var(--crisp-space-2); gap: var(--crisp-space-1-5); border-radius: var(--crisp-radius-xl); overflow: hidden; }
+    & .crisp-themepicker-preview-side { flex-shrink: 0; width: 28%; display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-themepicker-preview-bar { height: 4px; border-radius: var(--crisp-radius-full); }
+    & .crisp-themepicker-preview-bar:nth-child(1) { width: 70%; background: var(--crisp-bg-brand-solid); }
+    & .crisp-themepicker-preview-bar:nth-child(2) { width: 90%; }
+    & .crisp-themepicker-preview-bar:nth-child(3) { width: 60%; }
+    & .crisp-themepicker-preview-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1-5); border-radius: var(--crisp-radius-md); }
+    /* Light / System (default) swatch colours. */
+    & .crisp-themepicker-preview[data-swatch="light"], & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #eeeff1; background: #fbfbfb; }
+    & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)), & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main, & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
+    & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar, & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
+    /* Dark swatch colours -- always for "dark", and for "system" only when the OS itself reports dark. */
+    & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }
+    & [data-swatch="dark"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; }
+    @media (prefers-color-scheme: dark) { & .crisp-themepicker-preview[data-swatch="system"] { border: 1px solid #1c1d1f; background: #0e0f10; } & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; } & [data-swatch="system"] .crisp-themepicker-preview-main { background: #0a0a0a; } & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #1c1d1f; } }
+    & .crisp-themepicker-label { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-label { color: var(--crisp-fg-primary); }
+    & .crisp-themepicker-radio { flex-shrink: 0; width: 14px; height: 14px; border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-default); box-sizing: border-box; }
+    & .crisp-themepicker-option[data-selected] .crisp-themepicker-radio { border: 4px solid var(--crisp-bg-brand-solid); }
+}
+
 .crisp-trialbanner {
   display: flex; align-items: center; gap: var(--crisp-space-1-5); box-sizing: border-box; min-height: 28px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-lg); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-trialbanner-icon { display: inline-flex; flex-shrink: 0; color: var(--crisp-fg-muted); }