@crewlethq/ui 0.33.0 → 0.34.1

package/dist/ArtifactKindIllustration-4NG6IE3C.css

@@ -0,0 +1,211 @@
+/*
+ * 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.
+ */
+
+.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 ---- */
+
+.crewlet-kind-illustration {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* THE FOUR WEIGHTS, each the kind's hue at a fixed opacity: the body is a
+   translucent pane with a hairline edge, lines are content, a soft block is
+   a picture or a bar, and the mark is the one solid thing the eye lands on. */
+.crewlet-kind-illustration .b {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.14;
+  stroke: var(--crewlet-kind-hue);
+  stroke-opacity: 0.5;
+  stroke-width: 1.5;
+}
+
+.crewlet-kind-illustration .l {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.45;
+}
+
+.crewlet-kind-illustration .s {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.62;
+}
+
+.crewlet-kind-illustration .m {
+  fill: var(--crewlet-kind-hue);
+}
+
+/* A rule across the body (a window's bar, a grid's lines). */
+.crewlet-kind-illustration .r {
+  fill: none;
+  stroke: var(--crewlet-kind-hue);
+  stroke-opacity: 0.3;
+  stroke-width: 1.5;
+}
+
+/* A stroke drawn as a glyph: the angle brackets of a page of code. */
+.crewlet-kind-illustration .k {
+  fill: none;
+  stroke: var(--crewlet-kind-hue);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 5;
+}
+
+.crewlet-kind-illustration .k--soft {
+  stroke-opacity: 0.55;
+}
+
+/* Cut out of a solid mark in the ground's colour: a checkbox's tick. */
+.crewlet-kind-illustration .c {
+  fill: none;
+  stroke: var(--color-surface-background);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.4;
+}
+
+.crewlet-kind-illustration .c--fill {
+  fill: var(--crewlet-kind-hue);
+  fill-opacity: 0.4;
+  stroke: none;
+}
+
+/* ---- the ground ---- */
+
+/*
+ * THE KIND'S FILL OVER THE CARD, brightest at the top and settling into the
+ * card at the foot, the way light falls on a tinted pane: a flat fill read as
+ * a coloured box, and a hue strong enough to read on its own fought the
+ * previews beside it.
+ */
+.crewlet-kind-ground {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 8% 10%;
+  background:
+    linear-gradient(180deg, var(--crewlet-kind-fill) 0%, transparent 115%),
+    var(--color-surface-subtle);
+}
+
+.crewlet-kind-ground > .crewlet-kind-illustration {
+  max-width: 12rem;
+  max-height: 100%;
+}
+
+/* ---- the tile ---- */
+
+.crewlet-kind-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  outline: none;
+}
+
+/*
+ * A FRAME AROUND A PANE: the tile is a hairline ring with the tinted ground
+ * set inside it a few pixels in, one radius step tighter, so the pane reads
+ * as sitting in a holder rather than as a coloured rectangle.
+ */
+.crewlet-kind-tile__frame {
+  display: block;
+  box-sizing: border-box;
+  aspect-ratio: 4 / 3;
+  padding: 5px;
+  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);
+}
+
+.crewlet-kind-tile__ground {
+  border-radius: var(--radius-xl);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  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;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding-inline: var(--spacing-1);
+}
+
+.crewlet-kind-tile__name {
+  overflow: hidden;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-kind-tile__badge {
+  flex: none;
+  padding: 1px var(--spacing-2);
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-kind-fill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+a.crewlet-kind-tile:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-hover);
+}
+
+a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+  transform: translateY(-2px) scale(1.03);
+}
+
+.crewlet-kind-tile:focus-visible .crewlet-kind-tile__frame {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-kind-tile--disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-kind-tile--disabled .crewlet-kind-tile__ground,
+.crewlet-kind-tile--disabled .crewlet-kind-tile__name {
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-kind-tile__frame,
+  .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+    transition: none;
+  }
+
+  a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+    transform: none;
+  }
+}

package/dist/Canvas/index.js

@@ -1,7 +1,7 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-22UEIXZE.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-3P4Y5RX6.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CanvasBoard/index.js

@@ -1,11 +1,11 @@
-export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-MDNVHIB2.js';
+export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-WPX6A5BV.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-GLSOD5Z4.js';
+import '../chunk-3Y56GQPM.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-22UEIXZE.js';
+import '../chunk-3P4Y5RX6.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CanvasToolbar/index.js

@@ -1,9 +1,9 @@
-export { CanvasToolbar, toolForKey } from '../chunk-GLSOD5Z4.js';
+export { CanvasToolbar, toolForKey } from '../chunk-3Y56GQPM.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-22UEIXZE.js';
+import '../chunk-3P4Y5RX6.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/ChangeMark/index.js

@@ -1,8 +1,8 @@
-export { ChangeMark } from '../chunk-ZNBLFCQS.js';
-import '../chunk-J6ZSH3F5.js';
+export { ChangeMark } from '../chunk-SGHIAGPR.js';
+import '../chunk-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FactList/index.js

@@ -1,5 +1,5 @@
-export { FactList } from '../chunk-7WHDPLVJ.js';
-import '../chunk-5FYPE5GL.js';
+export { FactList } from '../chunk-HOIZ6MIS.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/LivePreview/LivePreview.d.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from 'react';
+/**
+ * Real content drawn small: a live, scaled-down snapshot of a page, a grid or
+ * a frame inside a fixed box, the way a gallery card previews what it opens.
+ *
+ * LAID OUT AT FULL SIZE, THEN SCALED. The content is given `width` CSS pixels
+ * to lay itself out in, exactly as it would on its own page, and the whole is
+ * scaled down to the box with a CSS transform, so the preview is the page
+ * itself at a smaller size and never a second layout of it. Left out, the
+ * content fills the box unscaled (a slide stage that scales itself).
+ *
+ * DRAWN ONLY WHEN IT CAN BE SEEN, AND ONLY SO MANY AT ONCE. The content is
+ * mounted while the box is within `rootMargin` of the viewport and the
+ * shared budget (`LivePreviewBudgetProvider`, twelve by default) grants it a
+ * slot, and unmounted when it scrolls away, giving the slot back. Until the
+ * content says it has drawn (`useLivePreview().ready()`), while it waits for a
+ * slot, when it failed (`fail()`) and in a browser with no
+ * IntersectionObserver, the box shows `fallback`.
+ *
+ * NEVER INTERACTIVE, NEVER ANNOUNCED. The live layer is `inert`, takes no
+ * pointer and is hidden from assistive technology: nothing in it can be
+ * focused or clicked, and whatever surrounds the preview (a card's link)
+ * names what it shows. The swap from the stand-in to the content is a short
+ * fade, and none under `prefers-reduced-motion`.
+ */
+/**
+ * How long a box stays near the viewport before its content is asked for: a
+ * card a reader scrolls to rests longer than this, and one a fling carries
+ * past does not.
+ */
+export declare const LIVE_PREVIEW_DWELL_MS = 120;
+/** Gives the previews under it a budget of their own, `max` live at once. */
+export declare function LivePreviewBudgetProvider({ max, children }: {
+    max?: number | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface LivePreviewSignals {
+    /** The content has drawn: the stand-in gives way to it. */
+    ready: () => void;
+    /** The content has nothing to draw or could not draw: the stand-in stays, and the slot is given back. */
+    fail: () => void;
+}
+/** What live content tells the preview around it. Outside one, both do nothing. */
+export declare function useLivePreview(): LivePreviewSignals;
+/** Where a preview is in its life. */
+export type LivePreviewState = 'idle' | 'waiting' | 'live' | 'ready' | 'failed';
+export interface LivePreviewProps {
+    /** What is drawn small. Mounted only while the preview is live. */
+    children: ReactNode;
+    /** The stand-in, drawn whenever the content is not. */
+    fallback: ReactNode;
+    /** The width, in CSS pixels, the content lays itself out at before it is scaled to the box. */
+    width?: number | undefined;
+    /** How near the viewport the box comes before its content is mounted. */
+    rootMargin?: string | undefined;
+    /** Nothing live is drawn: the stand-in only (no content to show, or a host that has turned previews off). */
+    disabled?: boolean | undefined;
+    /** How long the box stays near the viewport before its content is asked for, in ms. */
+    dwellMs?: number | undefined;
+    /** Told each time the state moves, for a host that measures. */
+    onStateChange?: ((state: LivePreviewState) => void) | undefined;
+    className?: string | undefined;
+}
+export declare function LivePreview({ children, fallback, width, rootMargin, disabled, dwellMs, onStateChange, className }: LivePreviewProps): import("react").JSX.Element;
+export interface PreviewScaleProps {
+    children: ReactNode;
+    /** The width, in CSS pixels, the content is laid out at. */
+    width: number;
+    /** The height it is laid out at. Left out, as tall as the box allows at the scale its width sets. */
+    height?: number | undefined;
+    /**
+     * `width` scales the content to the box's width from its top (the top of a
+     * page); `contain` scales it to fit inside the box whole, centred (a board
+     * of its own size).
+     */
+    fit?: 'width' | 'contain' | undefined;
+}
+/**
+ * Content laid out at a size of its own and scaled to the box it is drawn in,
+ * with a CSS transform: the layout `LivePreview` gives a page, for content
+ * that knows its own size only once it has loaded (a design's board).
+ */
+export declare function PreviewScale({ children, width, height, fit }: PreviewScaleProps): import("react").JSX.Element;

package/dist/LivePreview/budget.d.ts

@@ -0,0 +1,50 @@
+/**
+ * How many live previews draw at once: the budget a gallery's cards share.
+ *
+ * WHY A BUDGET. A live preview is real content drawn small: a page of prose,
+ * a grid of cells, a slide, or a sandboxed frame running a page of its own. A
+ * gallery of two hundred artifacts that drew every one would run two hundred
+ * of them, most never seen. A preview asks for a slot when it comes near the
+ * viewport and gives it back when it leaves; past the cap it waits, drawing
+ * its stand-in, and is granted a slot the moment one is free, the oldest ask
+ * first.
+ *
+ * Plain bookkeeping with no layout, so it is tested without a browser.
+ */
+/**
+ * The most previews live at once by default. A gallery at 1440 shows two or
+ * three rows of three cards with a row of margin either side, so twelve keeps
+ * everything a reader can scroll to in a moment live, and is the number of
+ * pages a design's canvas already runs at once (`CANVAS_BOARD_MAX_LIVE`).
+ */
+export declare const LIVE_PREVIEW_MAX = 12;
+export interface LivePreviewBudget {
+    /** The most slots granted at once. */
+    readonly max: number;
+    /**
+     * Asks for a slot. `grant` is called once, now or when a slot frees. The
+     * answer gives the slot back, or withdraws the ask if it was never granted;
+     * calling it again does nothing.
+     */
+    request(grant: () => void): () => void;
+    /** Slots held now, for a test or a measurement. */
+    live(): number;
+    /** Asks waiting now. */
+    waiting(): number;
+}
+/**
+ * Runs a grant later, and answers how to call it off. The budget hands out
+ * at most one slot per call, so a burst of asks (a fast scroll bringing a
+ * whole row near at once) mounts one preview per tick rather than all of them
+ * in one long task.
+ */
+export type LivePreviewSchedule = (run: () => void) => () => void;
+/** Grants now: for a test, and for a host that paces nothing. */
+export declare const immediately: LivePreviewSchedule;
+/**
+ * One grant per animation frame, after the frame's own work: the default in a
+ * browser, so mounting a row of previews never costs one frame more than one
+ * preview does.
+ */
+export declare const perFrame: LivePreviewSchedule;
+export declare function createLivePreviewBudget(max?: number, schedule?: LivePreviewSchedule): LivePreviewBudget;

package/dist/LivePreview/index.d.ts

@@ -0,0 +1,5 @@
+import './LivePreview.css';
+export { LIVE_PREVIEW_DWELL_MS, LivePreview, LivePreviewBudgetProvider, PreviewScale, useLivePreview } from './LivePreview.js';
+export type { LivePreviewProps, LivePreviewSignals, LivePreviewState, PreviewScaleProps } from './LivePreview.js';
+export { createLivePreviewBudget, immediately, LIVE_PREVIEW_MAX, perFrame } from './budget.js';
+export type { LivePreviewBudget, LivePreviewSchedule } from './budget.js';

package/dist/LivePreview/index.js

@@ -0,0 +1,2 @@
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MAX, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, immediately, perFrame, useLivePreview } from '../chunk-KF6YGL4B.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LivePreview-SRO7KHO4.css

@@ -0,0 +1,65 @@
+/*
+ * A live preview: the stand-in and the live layer stacked 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;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-live-preview__live {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+/* 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;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__live {
+  opacity: 1;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-live-preview__fallback,
+  .crewlet-live-preview__live {
+    transition: none;
+  }
+}

package/dist/OrgTable/index.js

@@ -5,9 +5,9 @@ import '../chunk-ONQKKHON.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-TROLVEZY.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-TROLVEZY.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

@@ -1,8 +1,8 @@
-export { RichEditor, preloadRichEditor } from '../chunk-MTMKIUWF.js';
+export { RichEditor, preloadRichEditor } from '../chunk-E4NNGC6X.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-4B6LSFDS.js';
-import '../chunk-TEUQWOWZ.js';
 import '../chunk-KK5OYNAF.js';
 import '../chunk-SZZRIHGT.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SandboxedFrame/index.js

@@ -1,8 +1,8 @@
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-3U7S6ZUN.js';
-import '../chunk-TEUQWOWZ.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-356JNSER.js';
 import '../chunk-F6V2PTN6.js';
 import '../chunk-ZXXDZJQN.js';
 import '../chunk-SZZRIHGT.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Select/Select.d.ts

@@ -12,6 +12,8 @@ export type SelectAlign = 'left' | 'right';
  * one question per line, which is not what a filter bar is.
  */
 export type SelectWidth = 'full' | 'auto';
+/** How much chrome a picker draws. See [SelectProps.appearance]. */
+export type SelectAppearance = 'field' | 'quiet';
 /**
  * Which control this is.
  *
@@ -124,6 +126,14 @@ export interface SelectProps extends NativePassthrough {
     active?: boolean;
     /** Marks the value as refused. Sets `aria-invalid`. */
     error?: boolean;
+    /**
+     * `field` (the default) is a bordered picker, a form's. `quiet` draws no
+     * boundary until the pointer is over it, for a toolbar whose pickers
+     * arrange content that is the page's point (a gallery's type and order): a
+     * row of bordered boxes above a grid of cards read as a form to fill in.
+     * A quiet filter that is on takes the accent's soft fill and ink.
+     */
+    appearance?: SelectAppearance;
     ariaLabel?: string;
     searchable?: boolean;
     searchPlaceholder?: string;

package/dist/Select/index.d.ts

@@ -1,3 +1,3 @@
 import './Select.css';
 export { Select } from './Select.js';
-export type { SelectAlign, SelectMode, SelectOption, SelectProps, SelectSize, SelectValue, } from './Select.js';
+export type { SelectAlign, SelectAppearance, SelectMode, SelectOption, SelectProps, SelectSize, SelectValue, } from './Select.js';

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-export { Select } from '../chunk-UQGFHNDI.js';
+export { Select } from '../chunk-BQ7AKL2N.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Select-2P7AWUE4.css → Select-A54YS5EP.css}

@@ -97,6 +97,35 @@
   border-color: var(--color-feedback-danger);
 }
 
+/*
+ * QUIET: no boundary and no fill at rest, the hover overlay under the
+ * pointer, and the ring on focus as every field draws it. It sizes to its
+ * answer with no floor, since a quiet picker in a toolbar reads as its words.
+ * A quiet filter that is on takes the accent's soft fill under its accent ink,
+ * so "this narrows the list" still shows without a box around it.
+ */
+.crewlet-select--quiet {
+  --crewlet-select-auto-min-width: 0px;
+
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.crewlet-select--quiet:hover {
+  border-color: transparent;
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-open {
+  background-color: var(--color-surface-hover);
+}
+
+.crewlet-select--quiet.is-active,
+.crewlet-select--quiet.is-active:hover {
+  border-color: transparent;
+  background-color: var(--color-brand-accent-soft);
+}
+
 /* A refused picker keeps its colour while the reader is in it: the ring
    covers the boundary, so a focus-coloured one would paint out the refusal.
    See Input.css. */

package/dist/ShareDialog/index.js

@@ -1,5 +1,5 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-ORT5IKHP.js';
-import '../chunk-UQGFHNDI.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-CCLNGVCM.js';
+import '../chunk-BQ7AKL2N.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';

package/dist/SheetGrid/SheetGrid.d.ts

@@ -83,8 +83,10 @@ export interface SheetGridProps {
      */
     fit?: 'container' | 'content' | undefined;
     /**
-     * Shows the row actions menu on a row's number (the active row, a hovered
-     * one, and Shift+F10 from any of its cells) with Delete row. The grid only
+     * Shows the row actions menu in a row's number gutter (the number gives way
+     * to the button under the pointer, on the row holding focus, and while the
+     * menu is open; a tap on the number opens it on a touch screen; Shift+F10
+     * opens it from any of the row's cells) with Delete row. The grid only
      * asks: the host confirms with its own dialog before it deletes anything.
      */
     onDeleteRow?: ((rowId: string) => void) | undefined;

package/dist/SheetGrid/index.js

@@ -1,15 +1,15 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-G4ZW7A2W.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-EWAFN2IU.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-ZNBLFCQS.js';
-import '../chunk-J6ZSH3F5.js';
+import '../chunk-SGHIAGPR.js';
+import '../chunk-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-3EB2AV3H.js';