@crewlethq/ui 0.36.0 → 0.37.0

package/README.md

@@ -54,7 +54,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
-| Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
+| Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
 | Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues from `PRESENCE_HUES`, with no React in it) |
 | Presentations | `SlideStage` (a slide laid out at 1920 by 1080 and scaled to its box, with `SLIDE_WIDTH` and `SLIDE_HEIGHT`), `useSlideKeys` (the keys a show and a clicker send), `SlideNav` (Previous, the position and Next, with `SLIDE_NAV_LABELS`), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
@@ -204,6 +204,22 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.37.0
+
+### An artifact list with an identity
+
+**`ArtifactNameCell` names an artifact in a list.** The kind's glyph on the kind's tint (the Make row's tile at a list's size, so a doc started from the tray is found in the list by the same mark in the same colour), the title, and under it the kind's word and the artifact's description (`detail`) on one quiet line, each cut on one line with the whole of it on hover. The kind is printed, so a list needs no Type column of its own. Under the pointer the row's ground moves and the mark's hairline takes the kind's hue; nothing lifts. `pinned` draws and says a pin, and `trashed` draws the mark without its tint. Every word is in `labels`.
+
+**`ArtifactAccessLabel` says who can open an artifact** as its glyph and a word: Private, Shared or Company (`ARTIFACT_ACCESS_LABELS`), or the caller's own `label` and `title`. Access is a fact about reach, never a status, so it takes no colour: the word is a step stronger where others can open it. The glyphs are `ArtifactAccessGlyph`, which `ArtifactCard` now draws its access with too, and the `ArtifactAccess` type has moved to this module (the card's subpath still exports it).
+
+### Previews
+
+**`PreviewScale` fills a box with `fit="fill"`.** The content covers the box edge to edge, centred across and held at the top, wherever that leaves at most a fifth of it outside the box (`PREVIEW_FILL_MAX_CUT`), and is contained whole otherwise. A design's laptop board (16:10) in a gallery card (16:9) was contained, which left an empty strip down each side of the card; filled, it reaches both sides and loses a tenth of its foot. A phone's board is still shown whole. `PreviewFit` names the three fits.
+
+### Wording
+
+**The gallery's tray is "Start a new artifact"** in the stories, the tests and the notes on `ArtifactMakeRow` and `ArtifactKindTile`, where it was "Make something new".
+
 ## Changes in 0.36.0
 
 ### New on a create page and in the gallery

package/dist/AgentHandoffPanel/index.js

@@ -5,8 +5,8 @@ import '../chunk-MICH6QSJ.js';
 import '../chunk-RH2NCQBZ.js';
 import '../chunk-Y5BD4MTE.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactAccess/ArtifactAccess.d.ts

@@ -0,0 +1,40 @@
+import { type GlyphSize } from '@crewlethq/icons/glyphs';
+/**
+ * Who can open an artifact: only its owner (and those they shared it with by
+ * name, which the owner alone sees), people it is shared with, or the whole
+ * company.
+ */
+export type ArtifactAccess = 'private' | 'shared' | 'company';
+/** Every access, from the narrowest to the widest. */
+export declare const ARTIFACT_ACCESSES: readonly ["private", "shared", "company"];
+/**
+ * What each access is called where there is room for a word: a list's column,
+ * a card's hover text. Short, because a column of them is read down.
+ */
+export declare const ARTIFACT_ACCESS_LABELS: Readonly<Record<ArtifactAccess, string>>;
+/**
+ * The glyph an access is drawn with, wherever it is drawn: a lock, people or
+ * the company's building. Decorative: whatever draws it says the word too,
+ * printed or for assistive technology.
+ */
+export declare function ArtifactAccessGlyph({ access, size }: {
+    access: ArtifactAccess;
+    size?: GlyphSize | undefined;
+}): import("react").JSX.Element;
+export interface ArtifactAccessLabelProps {
+    access: ArtifactAccess;
+    /** The word printed beside the glyph. The design system's short word by default. */
+    label?: string | undefined;
+    /** The hover text, where the word is not the whole story: "Shared with 3 people". */
+    title?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Who can open an artifact, as a glyph and its word: a list's Access column.
+ *
+ * QUIET FOR PRIVATE, A STEP UP FOR SHARED. The glyph is the tertiary step,
+ * and an artifact others can open prints its word a step stronger than one
+ * nobody else sees, so a column read down picks out what is shared without
+ * a hue: access is a fact about reach, never a status, and takes no colour.
+ */
+export declare function ArtifactAccessLabel({ access, label, title, className }: ArtifactAccessLabelProps): import("react").JSX.Element;

package/dist/ArtifactAccess/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactAccess.css';
+export { ARTIFACT_ACCESSES, ARTIFACT_ACCESS_LABELS, ArtifactAccessGlyph, ArtifactAccessLabel } from './ArtifactAccess.js';
+export type { ArtifactAccess, ArtifactAccessLabelProps } from './ArtifactAccess.js';

package/dist/ArtifactAccess/index.js

@@ -0,0 +1,2 @@
+export { ARTIFACT_ACCESSES, ARTIFACT_ACCESS_LABELS, ArtifactAccessGlyph, ArtifactAccessLabel } from '../chunk-BGLKLXL3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactAccess-Y53ZTRFS.css

@@ -0,0 +1,31 @@
+/*
+ * An artifact's access as a glyph and its word. No colour of its own: the
+ * glyph is the tertiary step and the word the secondary, one step stronger
+ * where others can open it.
+ */
+
+.crewlet-artifact-access {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  max-width: 100%;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-access__glyph {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-artifact-access__word {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-access--shared,
+.crewlet-artifact-access--company {
+  color: var(--color-text-secondary);
+}

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type ArtifactAccess } from '../ArtifactAccess/index.js';
 import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
 import { type AvatarStackMember } from '../Avatar/index.js';
 import { type Principal } from '../Principal/index.js';
@@ -14,12 +15,6 @@ import { type TimeValue } from '../RelativeTime/index.js';
 export declare function ArtifactPreviewGlyph({ kind }: {
     kind: ArtifactKind;
 }): import("react").JSX.Element;
-/**
- * Who can open an artifact, as its card says it: only its owner (and those
- * they shared it with by name, which the owner alone sees), people it is
- * shared with, or the whole company.
- */
-export type ArtifactAccess = 'private' | 'shared' | 'company';
 export type ArtifactCardSize = 'card' | 'compact';
 export interface ArtifactCardLabels {
     kinds: Record<ArtifactKind, string>;

package/dist/ArtifactCard/index.d.ts

@@ -1,6 +1,7 @@
 import '../ArtifactKindIllustration/ArtifactKinds.css';
 import './ArtifactCard.css';
 export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from './ArtifactCard.js';
-export type { ArtifactAccess, ArtifactCardLabels, ArtifactCardProps, ArtifactCardSize } from './ArtifactCard.js';
+export type { ArtifactCardLabels, ArtifactCardProps, ArtifactCardSize } from './ArtifactCard.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../ArtifactKindGlyph/index.js';
 export type { ArtifactKind } from '../ArtifactKindGlyph/index.js';
+export type { ArtifactAccess } from '../ArtifactAccess/index.js';

package/dist/ArtifactCard/index.js

@@ -1,13 +1,14 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OSZDHN5Z.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OHA6WSAG.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-MJW6SQYB.js';
+import '../chunk-UBZDYOCA.js';
 import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -65,7 +65,7 @@ export interface ArtifactKindTileProps {
  * One kind, or one starting point of a kind, as a tile: the kind's drawing on
  * its tinted ground (or the starting point's own `face`), framed, with its
  * name under it, such as a create page's starting layouts. The whole tile is
- * one link or button named by the name. The gallery's Make something new row
+ * one link or button named by the name. The gallery's "Start a new artifact" row
  * is the quieter `ArtifactMakeRow`, a toolbar of glyphs rather than pictures.
  *
  * A TILE THAT CANNOT START is still a stop on the row, so a reader moving

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-MJW6SQYB.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-UBZDYOCA.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactKindIllustration-5KTP43QS.css → ArtifactKindIllustration-KLFL7KBG.css}

@@ -1,5 +1,5 @@
 /*
- * A kind's drawing, its tinted ground and the Make something new tile.
+ * A kind's drawing, its tinted ground and the "Start a new artifact" 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-*`

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,4 @@
-export { ArtifactMakeRow } from '../chunk-66ADEPFB.js';
+export { ArtifactMakeRow } from '../chunk-EAKC24BW.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactMakeRow-RWUTS5MC.css → ArtifactMakeRow-XBA2MPSY.css}

@@ -1,5 +1,5 @@
 /*
- * The Make something new tray.
+ * The "Start a new artifact" tray.
  *
  * Every colour is a token: the tray's ground, its dots and its hairlines are
  * the surface and border steps, and each kind's mark reads the kind's own

package/dist/ArtifactNameCell/ArtifactNameCell.d.ts

@@ -0,0 +1,37 @@
+import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
+export interface ArtifactNameCellLabels {
+    kinds: Record<ArtifactKind, string>;
+    pinned: string;
+}
+export interface ArtifactNameCellProps {
+    kind: ArtifactKind;
+    title: string;
+    /**
+     * What it is about, in a line under the title after the kind's word: the
+     * artifact's own description. Left out, the kind's word stands alone.
+     */
+    detail?: string | undefined;
+    pinned?: boolean | undefined;
+    /** It is in the trash: its mark is drawn without its kind's tint. */
+    trashed?: boolean | undefined;
+    className?: string | undefined;
+    labels?: Partial<ArtifactNameCellLabels> | undefined;
+}
+/**
+ * An artifact's name in a list: its kind's glyph on the kind's tint, the
+ * title, and under it the kind's word and what it is about.
+ *
+ * THE SAME MARK AS THE MAKE ROW'S, so a reader who started a doc from the
+ * tray finds it in the list by the same tile in the same colour, and the
+ * grid's badge and the list's mark name one kind one way. The mark is the one
+ * coloured thing on the row; the words are the text steps.
+ *
+ * TWO LINES, ONE NAME. The title is the row's name and the line under it is
+ * its description, each cut on one line with the whole of it on hover, so a
+ * list of long titles keeps one row height. The kind's word is printed rather
+ * than only drawn, which is what lets the list drop a Type column of its own.
+ *
+ * Not a link: the row it sits in is. The mark is decorative because the kind
+ * is printed beside it.
+ */
+export declare function ArtifactNameCell({ kind, title, detail, pinned, trashed, className, labels }: ArtifactNameCellProps): import("react").JSX.Element;

package/dist/ArtifactNameCell/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ArtifactNameCell.css';
+export { ArtifactNameCell } from './ArtifactNameCell.js';
+export type { ArtifactNameCellLabels, ArtifactNameCellProps } from './ArtifactNameCell.js';

package/dist/ArtifactNameCell/index.js

@@ -0,0 +1,4 @@
+export { ArtifactNameCell } from '../chunk-P5VGSVWG.js';
+import '../chunk-CE2THTQR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactNameCell-RTVP4LO4.css

@@ -0,0 +1,104 @@
+/*
+ * An artifact's name in a list: the kind's mark on its tint, the title over
+ * one quiet line. Every colour is a token: the mark reads the kind's own Fill,
+ * Line and Ink (`ArtifactKinds.css`), the words the text steps.
+ */
+
+.crewlet-artifact-name {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  max-width: 100%;
+  padding-block: var(--spacing-1);
+}
+
+/* THE MARK, the Make row's tile at a list's size: the kind's glyph on its
+   tint inside the kind's hairline. */
+.crewlet-artifact-name__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* UNDER THE POINTER the row's ground moves (the row's own hover), and the
+   mark's hairline takes the kind's hue, so the one coloured thing on the row
+   answers too. No lift and no movement: a list is read down, not played. */
+:is(tr, [role='row']):hover .crewlet-artifact-name__mark {
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-hue);
+}
+
+.crewlet-artifact-name--trashed .crewlet-artifact-name__mark {
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__detail {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__kind,
+.crewlet-artifact-name__dot {
+  flex: none;
+}
+
+.crewlet-artifact-name__about {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-name__mark {
+    transition: none;
+  }
+}

package/dist/CommandPalette/index.js

@@ -2,8 +2,8 @@ export { CommandPalette } from '../chunk-N5SKHIAP.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';

package/dist/CommentThread/index.js

@@ -1,14 +1,14 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-WNAYQQ6Y.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-44WJLPQS.js';
+import '../chunk-P6WFZDKS.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-P6WFZDKS.js';
 import '../chunk-RH2NCQBZ.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Composer/index.js

@@ -1,7 +1,7 @@
 export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RH2NCQBZ.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataTable/index.js

@@ -1,7 +1,7 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-XMRTFPWX.js';
-import '../chunk-XEGZHHRH.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-JML75PGJ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-XEGZHHRH.js';
 import '../chunk-PJIPUEJ3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DataView/index.js

@@ -1,11 +1,11 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-ES4RKQ7B.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GS7ZTHPF.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-XMRTFPWX.js';
+import '../chunk-JML75PGJ.js';
 import '../chunk-L4WZSVMT.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-F73MC7EZ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-XEGZHHRH.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-K3IJQNB7.js';
@@ -14,8 +14,8 @@ import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BUVCV3WI.js';

package/dist/DocTabsEditor/index.js

@@ -3,11 +3,11 @@ import '../chunk-XJ2QEBMM.js';
 import '../chunk-IUYUS2SO.js';
 import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.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/ListInput/index.js

@@ -1,11 +1,11 @@
-export { ListInput } from '../chunk-IQH3DDZ2.js';
+export { ListInput } from '../chunk-BIQDJOJZ.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-YSGLEHND.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.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/LivePreview/LivePreview.d.ts

@@ -137,6 +137,15 @@ export interface LivePreviewProps {
  * and every scroller between the box and the root clips it at its own edge.
  */
 export declare function scrollRoot(el: Element): Element | null;
+/** How a layer laid out at a size of its own is fitted to its box (`PreviewScaleProps.fit`). */
+export type PreviewFit = 'width' | 'contain' | 'fill';
+/**
+ * The most of a filled layer's content that may fall outside its box, on
+ * either axis, before `fill` contains it instead: a fifth. A laptop's board
+ * (16:10) in a card's 16:9 loses a tenth of its foot; a phone's board would
+ * lose four fifths of itself, and is shown whole.
+ */
+export declare const PREVIEW_FILL_MAX_CUT = 0.2;
 /**
  * A preview whose `snapshot` key changes is another preview: what it holds
  * belongs to the content it drew, so it starts again under the new key.
@@ -150,10 +159,13 @@ export interface PreviewScaleProps {
     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).
+     * page); `contain` scales it to fit inside the box whole, centred; `fill`
+     * covers the box edge to edge, centred across and held at the top, wherever
+     * that leaves at most [PREVIEW_FILL_MAX_CUT] of the content outside it, and
+     * contains it otherwise (a design's board, which may be a laptop's screen
+     * or a phone's). `contain` and `fill` need a `height`.
      */
-    fit?: 'width' | 'contain' | undefined;
+    fit?: PreviewFit | undefined;
 }
 /**
  * Content laid out at a size of its own and scaled to the box it is drawn in,

package/dist/LivePreview/index.d.ts

@@ -1,6 +1,6 @@
 import './LivePreview.css';
-export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_RENDER_MS, LivePreview, LivePreviewBudgetProvider, PreviewScale, useLivePreview } from './LivePreview.js';
-export type { LivePreviewProps, LivePreviewSignals, LivePreviewState, PreviewScaleProps } from './LivePreview.js';
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_RENDER_MS, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, useLivePreview } from './LivePreview.js';
+export type { LivePreviewProps, LivePreviewSignals, LivePreviewState, PreviewFit, PreviewScaleProps } from './LivePreview.js';
 export { createLivePreviewBudget, immediately, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, perFrame } from './budget.js';
 export type { LivePreviewBudget, LivePreviewSchedule, LivePreviewSlot } from './budget.js';
 export { createLivePreviewStills, LIVE_PREVIEW_STILLS_KEPT } from './stills.js';

package/dist/LivePreview/index.js

@@ -1,2 +1,2 @@
-export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from '../chunk-XGBLRDSU.js';
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from '../chunk-WYKWXRJ4.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenterView/index.js

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

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-2DV4THNQ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-EARDAJQY.js';
 import '../chunk-VKKUGZ3G.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-F73MC7EZ.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-XEGZHHRH.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';

package/dist/SheetColumnEditor/index.js

@@ -11,8 +11,8 @@ import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-IUYUS2SO.js';
-import '../chunk-SMBKXWML.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

@@ -13,11 +13,11 @@ import '../chunk-AYKXMIOR.js';
 import '../chunk-6ZJ3N7QI.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.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/index.js

@@ -2,11 +2,11 @@ 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/Switcher/index.js

@@ -1,4 +1,4 @@
-export { Switcher } from '../chunk-MRMHZ437.js';
+export { Switcher } from '../chunk-66NGUD5S.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FYTIJM2T.js';
@@ -7,11 +7,11 @@ 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,11 +1,11 @@
-export { TagsInput } from '../chunk-3PTUDKSR.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-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';