@crewlethq/ui 0.35.1 → 0.37.0

package/dist/LivePreview/stills.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Still copies: what a live preview drew, kept as plain DOM with nothing live
+ * behind it, and where they are kept between one mount and the next.
+ *
+ * A COPY IS THE DRAWN DOM, CLONED. It holds no React tree, no subscription,
+ * no observer and no timer: it is what the content looked like the moment it
+ * said it had drawn, and it never changes after. Nothing in it loads or runs:
+ * a canvas is copied as an image of what it drew, and anything that would
+ * load again (a frame, a video, audio, an embedded object) is left out of
+ * the copy, since a clone of one starts again from nothing.
+ *
+ * KEPT BY KEY for as long as the store lives. A gallery's cards mount and
+ * unmount as its filters, shape and pages change; a card that comes back
+ * under the same key is given the copy it already drew, so it reads nothing
+ * and draws nothing again until the page is loaded afresh.
+ */
+/** A still copy: the nodes, and the width they were laid out at before they were scaled. */
+export interface LivePreviewStill {
+    nodes: Node[];
+    /** The layout width the content was given, or undefined where it filled the box at its own size. */
+    width: number | undefined;
+    /** The box's size when it was drawn: a copy with no layout width is good at this size only. */
+    size: {
+        w: number;
+        h: number;
+    };
+}
+/** What a key holds: a still copy, or a preview that had nothing to draw. */
+export type LivePreviewKept = LivePreviewStill | 'failed';
+export interface LivePreviewStills {
+    get(key: string): LivePreviewKept | undefined;
+    put(key: string, kept: LivePreviewKept): void;
+    forget(key: string): void;
+    /**
+     * Tells `told` the box's size whenever it changes, and answers how to stop.
+     * ONE ResizeObserver for every copy the store's previews show: a copy is
+     * scaled to its box when the box changes size (a window resized, a panel
+     * opened), and a gallery holds one observer rather than one per card.
+     */
+    watch(el: Element, told: (size: {
+        w: number;
+        h: number;
+    }) => void): () => void;
+}
+/**
+ * The most still copies a store keeps, the oldest dropped first. Two hundred
+ * is four pages of a listing at fifty, the size a gallery asks the engine
+ * for; a preview whose copy was dropped draws again when it comes back.
+ */
+export declare const LIVE_PREVIEW_STILLS_KEPT = 200;
+export declare function createLivePreviewStills(kept?: number): LivePreviewStills;
+/**
+ * A still copy of `nodes`: cloned, each canvas replaced by an image of what
+ * it drew (or left blank where its pixels cannot be read), and every element
+ * that would load again left out.
+ */
+export declare function copyOf(nodes: readonly Node[]): Node[];

package/dist/LivePreview-BROGKR4N.css

@@ -0,0 +1,113 @@
+/*
+ * A live preview: the stand-in, the still copy of what the content drew and
+ * the live layer it is drawn in, stacked in that order in one box. The box
+ * takes its size from its parent (a card's preview area), so it fills it and
+ * clips whatever the content lays out past its edge.
+ */
+
+.crewlet-live-preview {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: layout paint;
+}
+
+.crewlet-live-preview__fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+}
+
+/* THE STILL COPY: static DOM over the stand-in, which it hides. A copy just
+   taken fades in; one the preview was given back from its store is simply
+   there, so a card scrolled or filtered back to is as it was. */
+.crewlet-live-preview__still {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+.crewlet-live-preview[data-fresh] > .crewlet-live-preview__still {
+  animation: crewlet-live-preview-arrive var(--motion-duration-base) var(--motion-easing-out);
+}
+
+@keyframes crewlet-live-preview-arrive {
+  from {
+    opacity: 0;
+  }
+}
+
+/* A COPY IS FROZEN: what it drew never moves, so nothing in it animates or
+   transitions, whatever the content's own styles ask of the elements it
+   copied (a skeleton's shimmer, a chart's entrance). */
+.crewlet-live-preview__still *,
+.crewlet-live-preview__still *::before,
+.crewlet-live-preview__still *::after {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* THE LIVE LAYER renders out of sight: content that is copied is never seen
+   live, only its copy is. A frame's page is kept rather than copied, so a
+   framed preview's live layer is what fades in once it has drawn. */
+.crewlet-live-preview__live {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.crewlet-live-preview[data-frame] > .crewlet-live-preview__live {
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-live-preview[data-frame][data-state='ready'] > .crewlet-live-preview__live {
+  opacity: 1;
+}
+
+/* LAID OUT AT ITS OWN SIZE from the top left corner, and scaled from there:
+   to the box's width, its top left the box's, or whole and centred. */
+.crewlet-preview-scale {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.crewlet-preview-scale__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: hidden;
+  transform-origin: 0 0;
+}
+
+/* WHAT IS UNDER A DRAWING is hidden only once it has faded in. Fading the
+   stand-in out at the same time showed both at half strength halfway
+   through: a double exposure. */
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+  visibility: hidden;
+  /* Visibility is discrete and stays visible for the whole of a transition
+     to hidden, so this holds it exactly as long as the fade above. A copy
+     given back from the store is ready from its first style, which runs no
+     transition, so its stand-in is never shown at all. */
+  transition: visibility var(--motion-duration-base) linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-live-preview[data-fresh] > .crewlet-live-preview__still,
+  .crewlet-live-preview[data-frame] > .crewlet-live-preview__live,
+  .crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/PresenterView/index.js

@@ -1,6 +1,6 @@
-export { PresenterView, formatStopwatch } from '../chunk-THROPJZC.js';
+export { PresenterView, formatStopwatch } from '../chunk-F23N4MVU.js';
 import '../chunk-6VOS2GMB.js';
-import '../chunk-LV4APO72.js';
+import '../chunk-NQGPD6NX.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';

package/dist/PrincipalPicker/index.js

@@ -1,10 +1,11 @@
-export { PrincipalPicker } from '../chunk-AYB6AYNH.js';
-import '../chunk-QS4ZGTEU.js';
+export { PrincipalPicker } from '../chunk-GMLAKNFY.js';
+import '../chunk-PPFX6GRK.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-6QFAK2WV.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-3VD3G3IL.js';
+export { RichEditor, preloadRichEditor } from '../chunk-T5RQGI6O.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-SZZRIHGT.js';

package/dist/Select/index.js

@@ -1,5 +1,6 @@
-export { Select } from '../chunk-BQ7AKL2N.js';
+export { Select } from '../chunk-VKKUGZ3G.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-A54YS5EP.css → Select-W3CHTZXP.css}

@@ -71,10 +71,16 @@
  * leave the other bare.
  */
 .crewlet-select:focus-within {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-select:focus-within {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 /*
  * A FILTER THAT IS ON. The accent border says where the reader is and the
  * accent INK says what it is set to. It used to be the accent FILL with the
@@ -133,6 +139,10 @@
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-select.is-error:focus-within {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-select.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -426,10 +436,16 @@ svg.crewlet-select__chevron {
  * outset ring on the input would be cut by the menu's own `overflow: hidden`.
  */
 .crewlet-select__search:focus-within {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-select__search:focus-within {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-select__search {
   display: flex;
   align-items: center;

package/dist/ShareDialog/index.js

@@ -1,5 +1,5 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-CCLNGVCM.js';
-import '../chunk-BQ7AKL2N.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-EARDAJQY.js';
+import '../chunk-VKKUGZ3G.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
@@ -9,6 +9,7 @@ import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';

package/dist/SheetColumnEditor/index.js

@@ -1,17 +1,18 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-J6YZ4IYV.js';
-import '../chunk-BQ7AKL2N.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-FG4O64DV.js';
+import '../chunk-VKKUGZ3G.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-SUXP4OBT.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-PJIPUEJ3.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BUVCV3WI.js';

package/dist/SheetGrid/index.js

@@ -1,10 +1,10 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-FF5OZV77.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-W3HYWD63.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-GFV4LJHH.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
+import '../chunk-GFV4LJHH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-47JQAGRV.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';

package/dist/SlideCompare/index.js

@@ -1,5 +1,5 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-LL5AFXU7.js';
-import '../chunk-LV4APO72.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-5RT5O4JR.js';
+import '../chunk-NQGPD6NX.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/SlideFilmstrip/index.js

@@ -1,5 +1,5 @@
-export { SlideFilmstrip } from '../chunk-QIXMNOBD.js';
-import '../chunk-LV4APO72.js';
+export { SlideFilmstrip } from '../chunk-KYZMN6I6.js';
+import '../chunk-NQGPD6NX.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BUVCV3WI.js';

package/dist/{SlideFilmstrip-4ITZLMO4.css → SlideFilmstrip-PAT7P4OG.css}

@@ -2,8 +2,13 @@
  * SlideFilmstrip: the column of slide thumbnails beside a deck's stage, or
  * the row under it on a phone.
  *
- * The selected slide is ringed in the brand accent rather than filled, so its
- * thumbnail still shows the slide's own colours.
+ * The selected slide is ringed rather than filled, so its thumbnail still
+ * shows the slide's own colours: the selected edge (a tint of the accent) on
+ * the thumbnail's own line, the selected fill as a soft band outside it, and
+ * its number in the accent ink. It was a 2px ring in the full accent, the
+ * same weight and colour as the focus ring beside it, so the slide being
+ * edited and the slide the keyboard was on could not be told apart. The
+ * number is the mark that clears 3:1, so the state never rests on the tint.
  *
  * THE STRIP IS ITS OWN SCROLLER: a host bounds it (a column's max-height, a
  * row's width) and the strip scrolls inside that, keeping the selected slide
@@ -48,24 +53,38 @@
   border: 0;
   background: transparent;
   border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+  /* THE STRONG LINE AT REST: a deck's slides are mostly dark, and on the dark
+     page the plain hairline sat within a few steps of both the page and the
+     slide, so a strip of them had no edges at all. Under the pointer it takes
+     the strong line's own hover step, so pointing still moves the edge. */
+  outline: 1px solid var(--color-border-strong);
   cursor: pointer;
   overflow: hidden;
 }
 
 .crewlet-slide-filmstrip__thumb:hover {
-  outline-color: var(--color-border-hover);
+  outline-color: var(--color-border-strong-hover);
 }
 
 .crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__thumb {
-  outline: 2px solid var(--color-brand-accent);
+  outline-color: var(--color-border-selected);
+  box-shadow: 0 0 0 3px var(--color-surface-selected);
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__number {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ONE RING, OVER THE THUMBNAIL'S OWN EDGE: the focus outline takes the place
-   of the edge rather than standing off it as a second one. */
+   of the edge rather than standing off it as a second one, and grows OUTWARD
+   from it onto the strip's ground. It used to sit on the inset offset, inside
+   the thumbnail, where a dark slide (most of a deck's themes) swallowed it:
+   the focus colour measured close to the slide's own ground, and tabbing
+   through the strip showed nothing at all. The list's own padding holds it. */
 .crewlet-slide-filmstrip__thumb:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline-offset: 0;
 }
 
 .crewlet-slide-filmstrip__item[data-hidden='true'] .crewlet-slide-stage {

package/dist/SlideGrid/index.js

@@ -1,5 +1,5 @@
-export { SlideGrid } from '../chunk-ILAEBSLJ.js';
-import '../chunk-LV4APO72.js';
+export { SlideGrid } from '../chunk-H5NOLRGH.js';
+import '../chunk-NQGPD6NX.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideGrid-S4LTJ4UU.css → SlideGrid-FJA33DV4.css}

@@ -42,8 +42,18 @@
   outline-color: var(--color-border-hover);
 }
 
+/* THE CURRENT SLIDE, drawn as the filmstrip draws it: the selected edge on
+   the slide's own line, the selected fill as a soft band outside it, and its
+   number in the accent ink, the mark that clears 3:1. Never the full accent
+   at 2px, which is the focus ring's weight and colour. */
 .crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-stage {
-  outline: 2px solid var(--color-brand-accent);
+  outline-color: var(--color-border-selected);
+  box-shadow: 0 0 0 3px var(--color-surface-selected);
+}
+
+.crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-grid__number {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ONE RING, round the whole card (its slide and its caption), on the inset

package/dist/SlideStage/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-LV4APO72.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-NQGPD6NX.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideStage-S2FISF4C.css → SlideStage-ZTTEQSS2.css}

@@ -19,10 +19,12 @@
 /* THE SLIDE'S OWN EDGE: the box is the slide (or, for a show in the page,
    the room it was measured into), so its outline is the slide's edge, drawn over the slide's corners rather than outside them. A host that
    marks a stage (selected, current) recolours this outline rather than adding
-   a second line. */
+   a second line. It takes the STRONG border, not the default one: most decks
+   are dark, and in the dark theme the default border is a step off the page,
+   so a dark slide on a dark page had no edge at all. */
 .crewlet-slide-stage--framed {
   border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+  outline: 1px solid var(--color-border-strong);
 }
 
 :fullscreen .crewlet-slide-stage--framed,

package/dist/SourceEditor/index.js

@@ -1,3 +1,4 @@
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-PI7HKLIT.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-D7GNNID2.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SourceEditor-G2C3STPX.css → SourceEditor-QAYE2JS6.css}

@@ -5,7 +5,11 @@
  * 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.
+ * The BOX takes the focus ring every field draws (see Input.css): 2px in the
+ * focus colour for the keyboard, one pixel of the selected edge where a
+ * pointer put the caret. It used to recolour its border to the accent and lay
+ * a 2px soft halo outside it, two highlights for one state, as the Composer's
+ * did.
  */
 .crewlet-source-editor {
   --crewlet-source-inset: var(--spacing-2);
@@ -21,18 +25,21 @@
   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);
+  transition: border-color 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:has(.crewlet-source-editor__field:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
 }
 
 .crewlet-source-editor.is-fill {
@@ -135,11 +142,11 @@
   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;
+/* The ring is the box's, above, an outline that forced colours repaint, so
+   the field inside draws none of its own. Stated at rest, as the Composer's
+   field is. */
+.crewlet-source-editor .crewlet-source-editor__field {
+  outline: none;
 }
 
 .crewlet-source-editor .crewlet-source-editor__field[readonly] {

package/dist/Switcher/index.js

@@ -1,10 +1,11 @@
-export { Switcher } from '../chunk-GMU6SQ6B.js';
+export { Switcher } from '../chunk-66NGUD5S.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-K3IJQNB7.js';
 import '../chunk-FYTIJM2T.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-TEUQWOWZ.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';

package/dist/TagsInput/index.js

@@ -1,7 +1,8 @@
-export { TagsInput } from '../chunk-2CQLNML5.js';
+export { TagsInput } from '../chunk-AOLCZDZ6.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';

package/dist/{TagsInput-XMXTI5Q4.css → TagsInput-7EGBBXHS.css}

@@ -72,10 +72,16 @@
  * the whole reason they sit above the field instead of inside it.
  */
 .crewlet-tags-input__box:focus-visible {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-tags-input__box:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-tags-input.is-disabled {
   opacity: 0.6;
 }

package/dist/ThemeGallery/index.js

@@ -1,4 +1,4 @@
-export { ThemeGallery } from '../chunk-W3UVOZKL.js';
+export { ThemeGallery } from '../chunk-IPAU6FLH.js';
 import '../chunk-MNFU2RNT.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-RKKO7QHH.js';

package/dist/{ThemeGallery-HSUKBDWY.css → ThemeGallery-X35Y25EX.css}

@@ -33,8 +33,15 @@
 
 /*
  * A CARD IS ITS BORDER. Resting, the plain hairline; under the pointer, the
- * strong one; chosen, the accent. One line round the card in every state, so
- * the chosen card is never a card inside a frame.
+ * strong one; chosen, the selected edge (the accent mixed toward the card)
+ * over the selected fill, with a check beside the name. One line round the
+ * card in every state, so the chosen card is never a card inside a frame.
+ *
+ * THE CHOSEN CARD IS CALM ON PURPOSE. It was the full accent, which on a grid
+ * of six read as the loudest edge on the page and as a second focus ring. The
+ * tint and the fill say which card is on at a glance; the check says it at
+ * the 3:1 a state mark clears, so the state never rests on the tint alone;
+ * and the focus ring stays the one 2px accent line, for the keyboard only.
  */
 .crewlet-theme-gallery__card {
   display: flex;
@@ -51,14 +58,15 @@
   cursor: pointer;
 }
 
-/* Not on the chosen card: under the pointer it keeps the accent, or the one
-   card that says "this one" would stop saying it while it is being pointed at. */
+/* Not on the chosen card: under the pointer it keeps its selected edge, or the
+   one card that says "this one" would stop saying it while it is pointed at. */
 .crewlet-theme-gallery__card:hover:not(:disabled):not(.is-chosen) {
   border-color: var(--color-border-strong);
 }
 
 .crewlet-theme-gallery__card.is-chosen {
-  border-color: var(--color-brand-accent);
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
 }
 
 /* The ring is drawn OVER the border, inset by its width, never a second line outside it. */
@@ -72,6 +80,19 @@
   opacity: 0.5;
 }
 
+.crewlet-theme-gallery__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-theme-gallery__check {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-brand-accent-ink);
+}
+
 .crewlet-theme-gallery__name {
   overflow: hidden;
   font-size: var(--font-size-xs);

package/dist/TimeWindowPicker/index.js

@@ -1,9 +1,10 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-F2KY4RLI.js';
-import '../chunk-BQ7AKL2N.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-TVRBQMIX.js';
+import '../chunk-VKKUGZ3G.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-K3IJQNB7.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';