@crewlethq/ui 0.35.1 → 0.36.0

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,12 +1,12 @@
-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-RSAQOKH3.js';
 import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.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,16 +1,17 @@
-export { Switcher } from '../chunk-GMU6SQ6B.js';
+export { Switcher } from '../chunk-MRMHZ437.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-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,10 +1,11 @@
-export { TagsInput } from '../chunk-2CQLNML5.js';
+export { TagsInput } from '../chunk-3PTUDKSR.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-YSGLEHND.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.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';

package/dist/{TimeWindowPicker-T763GLXH.css → TimeWindowPicker-DEFDV77Z.css}

@@ -47,10 +47,17 @@
  */
 .crewlet-time-window:focus-visible,
 .crewlet-time-window.is-open {
-  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-time-window:focus-visible,
+:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window.is-disabled,
 .crewlet-time-window:disabled {
   opacity: 0.55;
@@ -318,10 +325,16 @@ svg.crewlet-time-window__tick {
  * own boundary (see Input.css), keyed on the box's own input.
  */
 .crewlet-time-window__masked:has(.crewlet-time-window__masked-input: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-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window__masked-input {
   min-width: 0;
   /* The `size` attribute the component sets is what holds the width open in

package/dist/TreeCanvas/index.js

@@ -1,9 +1,9 @@
-export { TreeCanvas } from '../chunk-UHJQDFKQ.js';
+export { TreeCanvas } from '../chunk-4ZJLOKSS.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-3P4Y5RX6.js';
+import '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-VHZ3AXJD.js';
-import '../chunk-AUQPBL4O.js';
+export { VersionTimeline } from '../chunk-NQCY44B3.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-AUQPBL4O.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-V43UVX4H.js → chunk-27GD7LVR.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-CPEPST4S.js';
+import { Checkbox } from './chunk-PJIPUEJ3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-CCLNGVCM.js → chunk-2DV4THNQ.js}

@@ -1,6 +1,6 @@
-import { Select } from './chunk-BQ7AKL2N.js';
-import { CopyButton } from './chunk-W46LPU4R.js';
+import { Select } from './chunk-VKKUGZ3G.js';
 import { Modal } from './chunk-XEGZHHRH.js';
+import { CopyButton } from './chunk-W46LPU4R.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-2CQLNML5.js → chunk-3PTUDKSR.js}

@@ -1,10 +1,11 @@
 import { Tag } from './chunk-GFV4LJHH.js';
 import { useListbox } from './chunk-F73MC7EZ.js';
-import { isComposing } from './chunk-R25RGPUB.js';
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TagsInput-XMXTI5Q4.css';
+import './TagsInput-7EGBBXHS.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';
 import { CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -40,6 +41,7 @@ var TagsInput = forwardRef(function TagsInput2({
   "aria-describedby": describedBy,
   "aria-invalid": invalid
 }, ref) {
+  useFocusModality();
   const [draft, setDraft] = useState("");
   const [open, setOpen] = useState(false);
   const field = useRef(null);

package/dist/{chunk-ONL54WMH.js → chunk-46RL3E54.js}

@@ -1,6 +1,6 @@
 import { useRoving } from './chunk-RKKO7QHH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './LayersList-NQZEIPZB.css';
+import './LayersList-TBNF4XGL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LAYERS_LIST_LABELS = {

package/dist/{chunk-UHJQDFKQ.js → chunk-4ZJLOKSS.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-3P4Y5RX6.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-4BYHAOHH.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-ACA27MZH.js → chunk-5QXRI35B.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-KJOYHDTJ.css';
+import './Card-QOVASQNU.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-LL5AFXU7.js → chunk-5RT5O4JR.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-LV4APO72.js';
+import { SlideStage } from './chunk-NQGPD6NX.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-66ADEPFB.js

@@ -0,0 +1,51 @@
+import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactMakeRow-RWUTS5MC.css';
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ArtifactMakeRow({
+  items,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-make-row", className), children: /* @__PURE__ */ jsx("ul", { className: "crewlet-make-row__list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "crewlet-make-row__cell", children: /* @__PURE__ */ jsx(MakeItem, { item }) }, item.kind)) }) });
+}
+function MakeItem({ item }) {
+  const { kind, label, detail, href, disabledReason } = item;
+  const detailId = useId();
+  const reasonId = useId();
+  const off = disabledReason !== void 0 || href === void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cx("crewlet-make-row__mark", `crewlet-kind--${kind}`), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-make-row__words", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-make-row__name", children: label }),
+      detail ? /* @__PURE__ */ jsx("span", { id: detailId, className: "crewlet-make-row__detail", children: detail }) : null
+    ] })
+  ] });
+  const describedBy = detail ? detailId : void 0;
+  if (off) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "link",
+          tabIndex: 0,
+          "aria-label": label,
+          "aria-disabled": "true",
+          "aria-describedby": disabledReason ? reasonId : describedBy,
+          title: disabledReason,
+          className: "crewlet-make-row__item crewlet-make-row__item--disabled",
+          children: body
+        }
+      ),
+      disabledReason ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx("a", { href, "aria-label": label, "aria-describedby": describedBy, className: "crewlet-make-row__item", children: body });
+}
+
+export { ArtifactMakeRow };

package/dist/{chunk-3Y56GQPM.js → chunk-7VAUGG6B.js}

@@ -1,5 +1,5 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { ShortcutTip } from './chunk-3P4Y5RX6.js';
+import { ShortcutTip } from './chunk-4BYHAOHH.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';

package/dist/{chunk-NKZCJRKO.js → chunk-APDKUGSH.js}

@@ -1,13 +1,13 @@
-import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { ArtifactIcon } from './chunk-ILDNJHRU.js';
+import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactBar-HV5AT4RG.css';
+import './ArtifactBar-FWPBBKQ5.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-YSJC7AZC.js → chunk-BWOIUOO3.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-DJ5EOGUA.css';
+import './ChoiceButtons-FLIFXFFS.css';
 import { useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-PI7HKLIT.js → chunk-D7GNNID2.js}

@@ -1,6 +1,7 @@
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SourceEditor-G2C3STPX.css';
+import './SourceEditor-QAYE2JS6.css';
 import { forwardRef, useRef, useId, useState, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -37,6 +38,7 @@ var SourceEditor = forwardRef(
     "aria-describedby": describedBy,
     ...rest
   }, ref) {
+    useFocusModality();
     const field = useRef(null);
     const tabLeaves = useRef(false);
     const keysId = useId();

package/dist/{chunk-THROPJZC.js → chunk-DEMALFHY.js}

@@ -1,5 +1,5 @@
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-NQGPD6NX.js';
 import { SlideNav } from './chunk-6VOS2GMB.js';
-import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-LV4APO72.js';
 import { Eyebrow } from './chunk-RK4XPHVG.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';