@crewlethq/ui 0.34.1 → 0.35.0

package/dist/styles.css

@@ -2041,7 +2041,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-C462VD4C.css */
+/* ArtifactBar-HV5AT4RG.css */
 /*
  * One row, one hairline under it, the height of a large row. The lead (the
  * way back, the glyph, the title, the version) takes what the end leaves it
@@ -2108,6 +2108,9 @@ button.crewlet-account-row__who:focus-visible {
   align-items: center;
 }
 
+/* THE KIND'S GLYPH IN THE KIND'S INK, as the gallery's badge and the Make
+   row draw it, so an open artifact and a create page say what they are in the
+   same colour the reader picked it by. */
 .crewlet-artifact-bar__glyph {
   display: inline-flex;
   flex: none;
@@ -2115,7 +2118,7 @@ button.crewlet-account-row__who:focus-visible {
   justify-content: center;
   width: var(--size-control-sm);
   height: var(--size-control-sm);
-  color: var(--color-text-secondary);
+  color: var(--crewlet-kind-ink, var(--color-text-secondary));
 }
 
 /* THE TITLE. Read only, it is text; renamable, its words are a button drawn
@@ -2306,7 +2309,8 @@ button.crewlet-account-row__who:focus-visible {
 
 /* Both arrangements are drawn; the bar's width says which one shows. */
 .crewlet-artifact-bar__narrow,
-.crewlet-artifact-bar__tight {
+.crewlet-artifact-bar__tight,
+.crewlet-artifact-bar__word-short {
   display: none;
 }
 
@@ -2353,6 +2357,39 @@ button.crewlet-account-row__who:focus-visible {
     display: inline-flex;
   }
 
+  /* A PRIMARY ACTION TAKES ITS SHORT WORD, where it has one, so "Create and
+     ask SRE Lead" does not push the title out of a phone's bar. */
+  .crewlet-artifact-bar__word-full {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__word-short {
+    display: inline;
+  }
+
+  /* THE STATUS GIVES WAY BEFORE THE TITLE: the end may shrink, and the
+     status is the part of it that does, cut to an ellipsis rather than drawn
+     over the title. Its words stay whole for a screen reader. */
+  .crewlet-artifact-bar__end {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .crewlet-artifact-bar__end > * {
+    flex: none;
+  }
+
+  .crewlet-artifact-bar__end > .crewlet-artifact-bar__status {
+    display: block;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 30cqi;
+    margin-inline-end: var(--spacing-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* The views have folded, so there is nothing to centre: the title takes
      the room. */
   .crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
@@ -2414,7 +2451,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-XHRLAL7C.css */
+/* ArtifactCard-OGTMO2KI.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
  * lines up whatever each preview is, the kind's badge over its foot, then the
@@ -2536,7 +2573,12 @@ button.crewlet-account-row__who:focus-visible {
  * A SOFT PANE WITH A GENEROUS CORNER. The card is the card rung with its
  * hairline, rounded a step past a plain card's because the preview inside it
  * is a picture, and a picture in a tight corner reads as a screenshot pasted
- * into a box. Hover lifts the edge and the shadow, never the colour.
+ * into a box.
+ *
+ * HOVER IS A STEP, NEVER A MOVE: the hairline darkens and a hairline shadow
+ * settles under the card, quickly and with the standard ease. A card that rose
+ * and cast a wide shadow made a gallery ripple as the pointer crossed it, and
+ * the preview inside it never moves.
  */
 .crewlet-artifact-card--card {
   position: relative;
@@ -2547,15 +2589,13 @@ button.crewlet-account-row__who:focus-visible {
   border-radius: var(--radius-xl);
   background: var(--color-surface-subtle);
   transition:
-    border-color var(--motion-duration-base) var(--motion-easing-out),
-    box-shadow var(--motion-duration-base) var(--motion-easing-out),
-    transform var(--motion-duration-base) var(--motion-easing-out);
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 .crewlet-artifact-card--card:hover {
   border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-card);
-  transform: translateY(-1px);
+  box-shadow: var(--shadow-xs);
 }
 
 .crewlet-artifact-card--card:has(.crewlet-artifact-card__link:focus-visible) {
@@ -2595,7 +2635,7 @@ button.crewlet-account-row__who:focus-visible {
 
 .crewlet-artifact-card--card .crewlet-artifact-card__body {
   gap: var(--spacing-1);
-  padding: 0 var(--spacing-5) var(--spacing-5);
+  padding: 0 var(--spacing-4) var(--spacing-4);
 }
 
 /*
@@ -2610,19 +2650,19 @@ button.crewlet-account-row__who:focus-visible {
   align-items: center;
   justify-content: center;
   align-self: flex-start;
-  width: 40px;
-  height: 40px;
-  margin-top: -22px;
+  width: 32px;
+  height: 32px;
+  margin-top: -18px;
   margin-bottom: var(--spacing-2);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   background: var(--color-surface-background);
   box-shadow: var(--shadow-sm);
   color: var(--crewlet-kind-ink, var(--color-text-secondary));
 }
 
 .crewlet-artifact-card--card .crewlet-artifact-card__title {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
   line-height: 1.35;
 }
@@ -2691,10 +2731,6 @@ button.crewlet-account-row__who:focus-visible {
   .crewlet-artifact-card__actions {
     transition: none;
   }
-
-  .crewlet-artifact-card--card:hover {
-    transform: none;
-  }
 }
 
 .crewlet-artifact-card--skeleton {
@@ -2776,22 +2812,16 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactKindIllustration-4NG6IE3C.css */
+/* ArtifactKindIllustration-5FPRJQ3P.css */
 /*
  * A kind's drawing, its tinted ground and the Make something new tile.
  *
  * Every colour is the kind's token, `--color-artifact-kind-<kind>` and its
- * Fill and Line steps, set once per kind on `--crewlet-kind-*` and read by
- * every rule below, so the drawing, the ground and the tile repaint together
- * with the theme.
+ * Fill and Line steps, set once per kind on `--crewlet-kind-*`
+ * (`ArtifactKinds.css`) and read by every rule below, so the drawing, the
+ * ground and the tile repaint together with the theme.
  */
 
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
-.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
-.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
-.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
-.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 /* ---- the drawing ---- */
 
@@ -2914,9 +2944,7 @@ button.crewlet-account-row__who:focus-visible {
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-2xl);
   background: var(--color-surface-subtle);
-  transition:
-    border-color var(--motion-duration-base) var(--motion-easing-out),
-    box-shadow var(--motion-duration-base) var(--motion-easing-out);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 .crewlet-kind-tile__ground {
@@ -2925,10 +2953,6 @@ button.crewlet-account-row__who:focus-visible {
   overflow: hidden;
 }
 
-.crewlet-kind-tile__ground > .crewlet-kind-illustration {
-  transition: transform var(--motion-duration-base) var(--motion-easing-out);
-}
-
 .crewlet-kind-tile__label {
   display: flex;
   align-items: center;
@@ -2956,12 +2980,35 @@ button.crewlet-account-row__who:focus-visible {
   font-weight: var(--font-weight-medium);
 }
 
-a.crewlet-kind-tile:hover .crewlet-kind-tile__frame {
-  border-color: var(--color-border-hover);
+/* A tile that starts something in place is a button, drawn as the link is. */
+.crewlet-kind-tile--button {
+  /* A button shrinks to its content where a link in a grid cell fills it. */
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* What the tile starts, under its name, in the quiet ink. */
+.crewlet-kind-tile__detail {
+  margin-top: calc(-1 * var(--spacing-1));
+  padding-inline: var(--spacing-1);
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
-  transform: translateY(-2px) scale(1.03);
+/* HOVER IS THE FRAME'S STEP ALONE: the drawing inside stays still, as a
+   card's preview does, so a row of tiles never ripples under the pointer. */
+a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
+.crewlet-kind-tile--button:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-hover);
 }
 
 .crewlet-kind-tile:focus-visible .crewlet-kind-tile__frame {
@@ -2979,17 +3026,30 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustratio
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-kind-tile__frame,
-  .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+  .crewlet-kind-tile__frame {
     transition: none;
   }
-
-  a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
-    transform: none;
-  }
 }
 
 
+/* ArtifactKinds-CVD3FCYO.css */
+/*
+ * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
+ * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
+ * glyph is drawn in. Every surface that tints by kind reads these, so a kind
+ * glyph in a bar, a card's badge and a Make row's tile repaint together with
+ * the theme, and no surface spells a kind's colour of its own. A sheet of
+ * its own, imported by each surface that tints, because the glyph's module
+ * carries no stylesheet (a frame that draws one glyph takes nothing else).
+ */
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
+
+
 /* ArtifactPanel-HW3SU7CP.css */
 /*
  * The workspace is a row: the artifact's body, then at most one panel. The
@@ -7388,13 +7448,15 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* ChoiceList-2PQJS4DX.css */
+/* ChoiceList-RBL7FNQL.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
  * accent's soft fill, so the answer reads at a glance without the radio.
  */
 .crewlet-choice-list {
+  /* The platform's radio, sized here so a panel can line up with the text beside it. */
+  --crewlet-choice-list-radio-size: 13px;
   display: grid;
   gap: var(--spacing-1);
   padding: var(--spacing-1);
@@ -7434,6 +7496,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* A choice with a picture: the radio, the picture, the words, the tag. The
+   picture centres on the label and its detail together. */
+.crewlet-choice-list__row.has-media {
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.crewlet-choice-list__row.has-media .crewlet-choice-list__radio {
+  margin-top: 0;
+}
+
+.crewlet-choice-list__media {
+  display: inline-flex;
+  flex: none;
+}
+
 .crewlet-choice-list__row:hover {
   background: var(--color-surface-hover);
 }
@@ -7447,6 +7525,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-choice-list__radio {
+  width: var(--crewlet-choice-list-radio-size);
+  height: var(--crewlet-choice-list-radio-size);
   margin: 3px 0 0;
   accent-color: var(--color-brand-accent);
   cursor: inherit;
@@ -7486,6 +7566,25 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   white-space: nowrap;
 }
 
+/* A SELECTED CHOICE'S PANEL is part of the choice: it continues the row's
+   fill under it, and its content starts where the label does, not under the
+   radio. */
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) {
+  gap: 0;
+}
+
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) > .crewlet-choice-list__row {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.crewlet-choice-list__panel {
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
+  border-end-start-radius: var(--radius-sm);
+  border-end-end-radius: var(--radius-sm);
+  background: var(--color-brand-accent-soft);
+}
+
 .crewlet-choice-list__footer {
   display: flex;
   justify-content: flex-end;
@@ -13131,6 +13230,89 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* FileDrop-WE7BNZGV.css */
+/*
+ * Where files are dropped. A target of its own is a dashed, quiet area with a
+ * heading, a hint and the pickers; a region wrapping content draws nothing
+ * until files are held over it, then an accent overlay saying what dropping
+ * does. The overlay takes no pointer, so the drop lands on the region.
+ */
+.crewlet-file-drop {
+  position: relative;
+  min-width: 0;
+}
+
+.crewlet-file-drop.is-target {
+  display: grid;
+  justify-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-6) var(--spacing-4);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  text-align: center;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-file-drop.is-target.is-over {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-file-drop.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-file-drop__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-file-drop__hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-file-drop__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+}
+
+.crewlet-file-drop__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: var(--spacing-1);
+  border: 1px dashed var(--color-brand-accent);
+  border-radius: var(--radius-md);
+  /* Floats over the region's content, so it takes the frosted ground. */
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  pointer-events: none;
+  text-align: center;
+}
+
+/* The input the picker opens is never drawn or reached: the button is. */
+.crewlet-file-drop__input {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-file-drop.is-target {
+    transition: none;
+  }
+}
+
+
 /* FilterChip-EZ4QMW4E.css */
 /*
  * The filter chip: neutral until it is on, and then the accent.
@@ -13244,6 +13426,80 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* FindingList-PMYA2R6Q.css */
+/*
+ * What a checker found: a quiet list, one row each, the tone's glyph in its
+ * ink, the location in mono over the sentence. A row that goes somewhere takes
+ * the hover ground and the focus ring as a whole.
+ */
+.crewlet-finding-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-finding-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-2);
+  align-items: start;
+  width: 100%;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: start;
+}
+
+button.crewlet-finding-list__row {
+  cursor: pointer;
+}
+
+button.crewlet-finding-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+button.crewlet-finding-list__row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
+.crewlet-finding-list__glyph {
+  display: inline-flex;
+  padding-top: 2px;
+}
+
+.crewlet-finding-list__glyph.is-danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-finding-list__glyph.is-warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-finding-list__text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-finding-list__location {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-finding-list__message {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+
 /* Highlight-DXLV2R6L.css */
 /*
  * Words a search matched (Highlight.tsx).
@@ -21730,7 +21986,83 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-GDPCCZ4V.css */
+/* SheetColumnEditor-BO2HKFRB.css */
+/*
+ * A sheet column's settings (SheetColumnEditor.tsx): a column of fields at
+ * the compact step, the choices as rows of a swatch, a name and a remove
+ * control, and a foot with the column's own actions at the start and Done at
+ * the end. It sits in a popover, so it sets no surface of its own.
+ */
+
+.crewlet-sheet-column-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: 0;
+}
+
+/* The suggestion: a quiet line naming the type, and the press that takes it. */
+.crewlet-sheet-column-editor__suggestion {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) * -1);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-sheet-column-editor__suggestion-text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-column-editor__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0 0 var(--spacing-1);
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-sheet-column-editor__choices:empty {
+  display: none;
+}
+
+.crewlet-sheet-column-editor__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-column-editor__choice > .crewlet-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The foot: a hairline above it, the column's own actions, then Done. */
+.crewlet-sheet-column-editor__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-sheet-column-editor__foot-start {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+
+/* SheetGrid-YRDXTIIZ.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -22159,6 +22491,54 @@ svg.crewlet-select__chevron {
   font-size: var(--font-size-xs);
 }
 
+/* A HEADER THAT OPENS ITS COLUMN'S SETTINGS reads as pressable: the pointer,
+   and the hover tint the open header keeps while its popover is up. */
+.crewlet-sheet-grid__header--settings {
+  cursor: pointer;
+}
+
+.crewlet-sheet-grid__header--settings:hover,
+.crewlet-sheet-grid__header--open {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* A COLUMN'S SETTINGS: the popover holds a short form, so it is padded as a
+   panel and given the room a list of choices needs before it scrolls. */
+.crewlet-popover.crewlet-sheet-grid__column-settings {
+  width: 300px;
+  max-height: min(560px, 80vh);
+  padding: var(--spacing-3);
+}
+
+/* ADD COLUMN stands beside the header row, outside the grid's roles: the
+   scroller lays the grid and the control side by side, the grid's last track
+   still takes the slack up to the control, and the control sticks to the top
+   with the header while the rows scroll under it. */
+.crewlet-sheet-grid__scroller--add-column {
+  --crewlet-sheet-add-column-width: var(--size-target-min);
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-sheet-grid__scroller--add-column > .crewlet-sheet-grid__grid {
+  flex: 0 0 auto;
+  min-width: calc(100% - var(--crewlet-sheet-add-column-width));
+}
+
+.crewlet-sheet-grid__add-column {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex: 0 0 var(--crewlet-sheet-add-column-width);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
 .crewlet-sheet-grid__sync {
   display: inline-flex;
   align-items: center;
@@ -23490,7 +23870,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideFilmstrip-5U6Z55GS.css */
+/* SlideFilmstrip-4ITZLMO4.css */
 /*
  * SlideFilmstrip: the column of slide thumbnails beside a deck's stage, or
  * the row under it on a phone.
@@ -23661,6 +24041,55 @@ svg.crewlet-select__chevron {
   box-shadow: var(--spacing-1) 0 0 var(--color-brand-accent);
 }
 
+/* A SLIDE'S CONTROLS, beside its thumbnail: the handle over the actions menu,
+   one column, so a thumbnail keeps the strip's full width beside them. The
+   menu's trigger shows on the selected slide and under the pointer or focus,
+   so a strip of twelve slides is not twelve rows of ellipses. */
+.crewlet-slide-filmstrip__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-0);
+}
+
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor {
+  opacity: 0;
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-menu-anchor,
+.crewlet-slide-filmstrip__item:hover .crewlet-menu-anchor,
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor:focus-within,
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-slide-filmstrip__controls .crewlet-menu-anchor {
+    opacity: 1;
+  }
+}
+
+/* What follows the slides (a New slide control), aligned with the thumbnails
+   rather than with the numbers beside them. */
+.crewlet-slide-filmstrip__footer {
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-2) calc(var(--spacing-5) + var(--spacing-2));
+}
+
+.crewlet-slide-filmstrip--horizontal {
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__controls {
+  grid-area: handle;
+  flex-direction: row;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__footer {
+  flex: none;
+  padding: var(--spacing-1) var(--spacing-2);
+}
+
 
 /* SlideGrid-S4LTJ4UU.css */
 /*
@@ -23881,6 +24310,169 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SourceEditor-G2C3STPX.css */
+/*
+ * Source text written in place: a gutter of line numbers beside a real
+ * textarea, and the marks a checker placed drawn behind the text. The gutter,
+ * the marks and the field share one font, one line height and one top inset,
+ * so a number and a mark always sit on the line they name; the layers follow
+ * the field's scroll by a transform.
+ *
+ * The BOX takes the focus ring, as the Composer's does.
+ */
+.crewlet-source-editor {
+  --crewlet-source-inset: var(--spacing-2);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-source-editor:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-source-editor:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-source-editor.is-fill {
+  height: 100%;
+}
+
+.crewlet-source-editor__gutter {
+  position: relative;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+  user-select: none;
+}
+
+.crewlet-source-editor__numbers {
+  display: grid;
+  padding: var(--crewlet-source-inset) 0;
+  will-change: transform;
+}
+
+.crewlet-source-editor__number {
+  /* Wide enough for the longest number, so the text never shifts as lines are added. */
+  min-width: calc(var(--crewlet-source-digits, 2) * 1ch + var(--spacing-2) * 2);
+  padding: 0 var(--spacing-2);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-source-editor__number.is-danger {
+  color: var(--color-feedback-danger-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-source-editor__number.is-warning {
+  color: var(--color-feedback-warning-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-warning-ink);
+}
+
+.crewlet-source-editor__body {
+  position: relative;
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-source-editor__marks {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.crewlet-source-editor__marks > div {
+  position: relative;
+  will-change: transform;
+}
+
+.crewlet-source-editor__mark {
+  position: absolute;
+  top: calc(var(--crewlet-source-inset) + var(--crewlet-source-line) * 1lh);
+  left: 0;
+  right: 0;
+  height: 1lh;
+}
+
+.crewlet-source-editor__mark.is-danger {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-source-editor__mark.is-warning {
+  background: var(--color-feedback-warning-soft);
+}
+
+.crewlet-source-editor .crewlet-source-editor__field {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: var(--crewlet-source-inset) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  white-space: pre;
+  overflow: auto;
+  resize: none;
+  tab-size: 2;
+  caret-color: var(--color-brand-accent);
+}
+
+.crewlet-source-editor.is-fill .crewlet-source-editor__field {
+  height: 100%;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-source-editor .crewlet-source-editor__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field[readonly] {
+  color: var(--color-text-secondary);
+}
+
+@media (forced-colors: active) {
+  .crewlet-source-editor__mark {
+    background: Highlight;
+    opacity: 0.25;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-source-editor {
+    transition: none;
+  }
+}
+
+
 /* StatCard-4T7TMWMN.css */
 /*
  * The stat tile.
@@ -26731,7 +27323,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThemeGallery-NITASULQ.css */
+/* ThemeGallery-HSUKBDWY.css */
 /*
  * The gallery of themes: each group's heading over a grid of cards.
  *
@@ -26826,6 +27418,15 @@ b.crewlet-switcher__match {
   }
 }
 
+/* A THUMBNAIL THE CALLER DRAWS (`renderPreview`) fills the card's width, as
+   the swatch does, and is clipped to the card's inner corner. */
+.crewlet-theme-gallery__preview {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+}
+
 
 /* ThemeSwatch-4DL457ZB.css */
 /*