@crewlethq/ui 0.48.2 → 0.49.0

package/dist/ListInput/index.js

@@ -1,14 +1,14 @@
-export { ListInput, withDraft } from '../chunk-WQJSOTEO.js';
+export { ListInput, withDraft } from '../chunk-PGR2PKH6.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LogoSlot/LogoSlot.d.ts

@@ -0,0 +1,84 @@
+import { type ReactNode } from 'react';
+/** The ground a logo is drawn on: the light one it is usually made for, or a dark one. */
+export type LogoSlotGround = 'light' | 'dark';
+/** A wide logo (a wordmark, a lockup) or a square mark. */
+export type LogoSlotShape = 'wide' | 'square';
+export interface LogoSlotLabels {
+    /** The picker's label while the slot is empty. */
+    choose: string;
+    /** The picker's label once the slot holds a logo. */
+    replace: string;
+    remove: string;
+    /** What the overlay says while a file is held over the slot. */
+    drop: string;
+    /** Said and shown while a file is uploading. */
+    uploading: string;
+    /** Printed under an empty slot for a reader who cannot fill it. */
+    empty: string;
+    /** What may be brought, under the picker. */
+    hint: string;
+}
+export interface LogoSlotProps {
+    /** The slot's name: "Primary", "For dark grounds", "Mark". */
+    label: string;
+    /** One line under it: "On a light ground". */
+    description?: ReactNode;
+    /** The ground the logo is drawn on. */
+    ground: LogoSlotGround;
+    /**
+     * The brand's own colour for that ground, `#rrggbb`. Left out (or not a
+     * colour), the slot draws the product's own ground for that mode.
+     */
+    groundColor?: string | undefined;
+    shape?: LogoSlotShape | undefined;
+    /**
+     * The logo, as an address the host has already validated (the engine's file
+     * route, through the dashboard's checked blob path). Empty, the slot shows
+     * where a logo would go.
+     */
+    src?: string | null | undefined;
+    /** What the logo says, for a reader who cannot see it: "Acme logo". */
+    alt: string;
+    /** The clear-space guide: a dashed line round the logo at the space it keeps. On by default. */
+    guide?: boolean | undefined;
+    /** A file is uploading: the picker spins and the slot takes no new file until it lands. */
+    uploading?: boolean | undefined;
+    /** Why the last file was refused, with what to do about it. Drawn under the slot and announced. */
+    error?: ReactNode;
+    /** The reader may change the logo: a picker, Remove, and dropping a file on the slot. */
+    editable?: boolean | undefined;
+    /** A file was picked or dropped. One file: a slot holds one logo. */
+    onFile?: ((file: File) => void) | undefined;
+    /** Remove was pressed. Offered only while the slot holds a logo. */
+    onRemove?: (() => void) | undefined;
+    /** The types the picker offers, as the input's `accept` takes them. The engine still checks every file. */
+    accept?: string | undefined;
+    /** A reader's action beside the slot's name: a download of the logo. */
+    download?: ReactNode;
+    /**
+     * Said under an empty slot in place of `empty`: what an empty slot means
+     * here ("The primary logo is used on dark grounds until one is added").
+     */
+    emptyNote?: ReactNode;
+    className?: string | undefined;
+    labels?: Partial<LogoSlotLabels> | undefined;
+}
+/**
+ * One of a brand's logos, drawn on the ground it is made for, with the space
+ * it keeps round it.
+ *
+ * ON ITS OWN GROUND, NOT THE PAGE'S. A logo for a light ground is shown on a
+ * light ground in a dark theme too, and one for dark grounds on a dark one:
+ * the brand's own ground colour when it has one, the product's sheet for that
+ * mode when it has not. The guide and the placeholder are inked in whichever
+ * of the two palettes' text reads better on that ground.
+ *
+ * THE CLEAR-SPACE GUIDE is a dashed line round the logo at the space it keeps,
+ * so an administrator sees how it will sit in a header before it is in one.
+ *
+ * BRINGING A FILE IS NEVER ONLY A DROP. An editable slot carries a picker
+ * (`FilePickButton`), and the slot itself is a `FileDrop` region for a pointer.
+ * The engine checks every file; a refusal comes back as `error`, drawn under
+ * the slot and announced, saying what to change.
+ */
+export declare function LogoSlot({ label, description, ground, groundColor, shape, src, alt, guide, uploading, error, editable, onFile, onRemove, accept, download, emptyNote, className, labels, }: LogoSlotProps): import("react").JSX.Element;

package/dist/LogoSlot/index.d.ts

@@ -0,0 +1,3 @@
+import './LogoSlot.css';
+export { LogoSlot } from './LogoSlot.js';
+export type { LogoSlotGround, LogoSlotLabels, LogoSlotProps, LogoSlotShape } from './LogoSlot.js';

package/dist/LogoSlot/index.js

@@ -0,0 +1,9 @@
+export { LogoSlot } from '../chunk-ITI2Z44C.js';
+import '../chunk-THDGBD6Y.js';
+import '../chunk-B235ANDO.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LogoSlot-T2UFOJXU.css

@@ -0,0 +1,159 @@
+/*
+ * One of a brand's logos on the ground it is made for. The ground and the ink
+ * of its guide are the only values here that are not tokens: they arrive
+ * through `--crewlet-logo-slot-ground` (the brand's own `#rrggbb`, or a
+ * palette's sheet read from the tokens package) and `--crewlet-logo-slot-ink`
+ * (whichever palette's text reads better on that ground).
+ */
+.crewlet-logo-slot {
+  /* Every stage is one height, so three slots side by side line up whatever
+     their logos' shapes. */
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 3);
+  --crewlet-logo-slot-padding: var(--spacing-5);
+  --crewlet-logo-slot-clear: var(--spacing-3);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-logo-slot__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-logo-slot__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot__download {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * THE STAGE: the logo's own ground, at one height, inside the page's hairline
+ * so a ground that matches the page is still a stage. An empty one draws its
+ * edge dashed, a place waiting to be filled.
+ */
+.crewlet-logo-slot__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--crewlet-logo-slot-height);
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-padding);
+  overflow: hidden;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-logo-slot-ground);
+  color: var(--crewlet-logo-slot-ink);
+}
+
+.crewlet-logo-slot__stage.is-empty {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+}
+
+/*
+ * THE SPACE THE LOGO KEEPS: padding round it at the clear space, and with the
+ * guide on, a dashed line at that edge in the ground's ink, half strength so
+ * it reads as a guide and never as part of the logo.
+ */
+.crewlet-logo-slot__space {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-clear);
+}
+
+.crewlet-logo-slot__space.has-guide::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px dashed var(--crewlet-logo-slot-ink);
+  border-radius: var(--radius-xs);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.crewlet-logo-slot__image {
+  display: block;
+  max-width: 100%;
+  max-height: calc(var(--crewlet-logo-slot-height) - 2 * var(--crewlet-logo-slot-padding) - 2 * var(--crewlet-logo-slot-clear));
+  object-fit: contain;
+}
+
+/* WHERE A LOGO WOULD GO, at the shape it would take: a wordmark's band or a
+   mark's square, with the image glyph in the ground's ink. */
+.crewlet-logo-slot__placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-row-lg) * 3);
+  height: var(--size-row-lg);
+  opacity: 0.7;
+}
+
+.crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-lg);
+}
+
+.crewlet-logo-slot__stage.is-uploading .crewlet-logo-slot__space {
+  opacity: 0.5;
+}
+
+.crewlet-logo-slot__empty {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* A REFUSAL, in the danger ink with its glyph, so it never rests on the hue. */
+.crewlet-logo-slot__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  margin: 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-logo-slot__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+.crewlet-logo-slot__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-logo-slot__hint {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}

package/dist/MarkdownEditor/index.js

@@ -1,17 +1,17 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-F45VSK2M.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-SS4XCUUJ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-SMVWDO72.js';
-import '../chunk-GKRPPSWY.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-3JIZ2A6K.js';
-import '../chunk-2YTOOH3A.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,8 +1,8 @@
-export { Menu } from '../chunk-3JIZ2A6K.js';
+export { Menu } from '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MergeConflicts/index.js

@@ -1,16 +1,16 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-PZZHO6OS.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-XS2FJVMT.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-SMVWDO72.js';
-import '../chunk-GKRPPSWY.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-3JIZ2A6K.js';
-import '../chunk-2YTOOH3A.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/Modal.d.ts

@@ -102,6 +102,19 @@ export interface ModalProps extends FrameAttributes {
     variant?: ModalVariant | undefined;
     shape?: ModalShape | undefined;
     placement?: ModalPlacement | undefined;
+    /**
+     * On a phone (strictly under the phone breakpoint), the dialog takes the
+     * whole window as a full-height sheet: no inset and no corners, the head
+     * and the foot standing still while the body scrolls between them, and the
+     * foot clear of the home indicator. For a dialog whose body is a long list
+     * a thumb works through, such as a folder picker, where a dialog inset from
+     * every edge leaves a few rows of it on the screen at a time.
+     *
+     * OPT-IN, so every other dialog keeps its shape on a phone. It reshapes the
+     * framed dialog only: a prompt is one sentence and stays a prompt, and a
+     * side sheet is already the full width there.
+     */
+    phoneSheet?: boolean | undefined;
     role?: ModalRole | undefined;
     /**
      * False while a request is in flight: Escape, the veil and the close

package/dist/Modal/index.js

@@ -1,9 +1,9 @@
-export { ConfirmModal, Modal } from '../chunk-6AKG2VLR.js';
+export { ConfirmModal, Modal } from '../chunk-YCC2S7DF.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-TOEWHDCQ.css → Modal-3HMP7WAZ.css}

@@ -112,6 +112,32 @@
   animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE PHONE SHEET (`phoneSheet`), strictly under the phone breakpoint as the
+ * package switches there everywhere else: the dialog takes the whole window,
+ * with no inset and no corners, so a long list in its body has the screen's
+ * height to scroll in between a head and a foot that stay put. It rises from
+ * the bottom edge as the bottom sheet does, and its foot stays clear of the
+ * home indicator. Above the breakpoint nothing here applies, and the dialog
+ * keeps its placement.
+ */
+@media (width < 640px) {
+  .crewlet-modal-overlay--dialog.crewlet-modal-overlay--phone-sheet {
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border: none;
+    border-radius: 0;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
+  }
+}
+
 /*
  * The sheet's veil fades over the same span the sheet itself travels, so the
  * two are one movement rather than a ground that lands and a panel that
@@ -584,4 +610,8 @@
   .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
     animation: none;
   }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    animation: none;
+  }
 }

package/dist/OrgTable/index.js

@@ -8,7 +8,7 @@ import '../chunk-PZKHBB7D.js';
 import '../chunk-TROLVEZY.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenterView/index.js

@@ -1,11 +1,11 @@
-export { PresenterView, formatStopwatch } from '../chunk-ISDEXIXH.js';
-import '../chunk-RMEBFYL7.js';
+export { PresenterView, formatStopwatch } from '../chunk-E6HXFFWO.js';
 import '../chunk-RRO7UEYU.js';
+import '../chunk-RMEBFYL7.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,16 +1,16 @@
-export { PrincipalPicker } from '../chunk-WT5UPL6P.js';
-import '../chunk-LOBV4QON.js';
+export { PrincipalPicker } from '../chunk-KHZYAEGZ.js';
+import '../chunk-P5JBDHWC.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-D4EOPIFL.js';
+import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

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

package/dist/SegmentedControl/index.js

@@ -1,15 +1,15 @@
 import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-SMVWDO72.js';
-import '../chunk-GKRPPSWY.js';
+export { SegmentedControl } from '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-3JIZ2A6K.js';
-import '../chunk-2YTOOH3A.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Select/index.js

@@ -1,7 +1,7 @@
-export { Select } from '../chunk-LD3GEVQU.js';
+export { Select } from '../chunk-XQZ6EWOE.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-2YTOOH3A.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar/SelectionBar.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode, type RefObject } from 'react';
+export interface SelectionBarLabels {
+    /** The count, printed and said: "3 selected". */
+    count: (count: number) => string;
+    /** Said once the last pick is cleared, since the bar it was printed in goes. */
+    cleared: string;
+    /** The control that clears every pick. */
+    clear: string;
+    /** Names the bar: a toolbar is announced by its name. */
+    label: string;
+}
+export interface SelectionBarProps {
+    /** How many items are picked. At zero the bar draws nothing. */
+    count: number;
+    /** Clears every pick. */
+    onClear: () => void;
+    /**
+     * The bulk actions, as `Button`s ("Move to…"). An action only some of the
+     * picks allow is drawn with `disabledReason` ("You own 2 of 3"), never
+     * applied to the part it can be applied to without saying so.
+     */
+    children?: ReactNode;
+    /**
+     * Where focus goes once Clear has emptied the selection and the bar has
+     * gone with it: the gallery's Select toggle, or the list. Without it focus
+     * would fall to the page body with the button that held it.
+     */
+    returnFocusRef?: RefObject<HTMLElement | null> | undefined;
+    className?: string | undefined;
+    labels?: Partial<SelectionBarLabels> | undefined;
+}
+/**
+ * What is picked, and what can be done to all of it: the count, the bulk
+ * actions, and Clear.
+ *
+ * STICKY OVER THE LIST, DOCKED TO THE FOOT ON A PHONE. Over a long gallery the
+ * bar stays under the top of the scroller (`--crewlet-selection-bar-top` for a
+ * scroller that carries a bar of its own); under the phone breakpoint it
+ * floats at the bottom edge, where a thumb reaches it and the list it acts on
+ * stays in view; the host keeps the list's last row clear of it.
+ *
+ * THE COUNT IS SAID, POLITELY, AS IT CHANGES, through the shell's one polite
+ * region (`Announcer`): ticking a box changes nothing a screen reader reads on
+ * its own, and the bar appearing is not news a reader hears unless something
+ * says it. Clearing the last pick says so, since the bar goes with it.
+ *
+ * ONE STOP IN THE TAB ORDER: the actions and Clear are a `Toolbar`, walked
+ * with the arrows.
+ */
+export declare function SelectionBar({ count, onClear, children, returnFocusRef, className, labels }: SelectionBarProps): import("react").JSX.Element | null;

package/dist/SelectionBar/index.d.ts

@@ -0,0 +1,3 @@
+import './SelectionBar.css';
+export { SelectionBar } from './SelectionBar.js';
+export type { SelectionBarLabels, SelectionBarProps } from './SelectionBar.js';

package/dist/SelectionBar/index.js

@@ -0,0 +1,9 @@
+export { SelectionBar } from '../chunk-OCRVY42T.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar-XPWKUOSC.css

@@ -0,0 +1,61 @@
+/*
+ * What is picked and what can be done to it: the count, the bulk actions and
+ * Clear, on the raised rung inside the strong hairline so it reads as a bar
+ * laid over the list rather than a row of it.
+ *
+ * ON TOP OF TOOLBAR, so the rules that change Toolbar's own layout carry
+ * Toolbar's class too: the bundle orders the two sheets by file name.
+ */
+.crewlet-toolbar.crewlet-selection-bar {
+  position: sticky;
+  top: var(--crewlet-selection-bar-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+  flex-wrap: nowrap;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-sm);
+}
+
+.crewlet-selection-bar__count {
+  flex: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-selection-bar__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-selection-bar__spacer {
+  flex: 1 1 auto;
+}
+
+/*
+ * DOCKED TO THE FOOT ON A PHONE, strictly under the phone breakpoint: over the
+ * list at the bottom edge, inside the safe area, where a thumb reaches it and
+ * the picks it acts on stay in view above it.
+ */
+@media (width < 640px) {
+  .crewlet-toolbar.crewlet-selection-bar {
+    position: fixed;
+    top: auto;
+    right: var(--spacing-3);
+    bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
+    left: var(--spacing-3);
+    z-index: var(--z-index-overlay);
+    gap: var(--spacing-2);
+    padding-inline-start: var(--spacing-3);
+    box-shadow: var(--shadow-lg);
+  }
+}

package/dist/ShareDialog/index.js

@@ -1,21 +1,21 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-2FDTSARB.js';
-import '../chunk-LD3GEVQU.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JFDIMO3A.js';
+import '../chunk-XQZ6EWOE.js';
+import '../chunk-YCC2S7DF.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-7SHAFLEX.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-6AKG2VLR.js';
-import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-2YTOOH3A.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';