@crewlethq/ui 0.27.1 → 0.29.0

package/README.md

@@ -51,10 +51,10 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
-| Arranging a page | `ArrangeBoard`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
+| 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` |
 | 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`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `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`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `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`), `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) |
 | 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), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
@@ -204,6 +204,46 @@ 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.29.0
+
+0.29.0 adds the chrome an open artifact sits in: one slim bar over the artifact, and one panel at its side, so a host can give the artifact the screen and open everything else on demand.
+
+**`ArtifactBar`** is the bar, the height of a large row. At its start, the way back (`back`, a link), the kind's glyph (the artifact's own `icon` word where it has one), the title as the heading (renamed in place where `onRename` is given: Enter takes it, Escape puts it back without reaching anything under the field, leaving the field takes it, and a sentence `onRename` answers keeps the field open and says it), and the `version` slot. In its middle, the kind's views (`modes`, one segmented choice, centred while both sides have room). At its end, `presence`, the kind's tools (`kindTools`), every artifact's tools (`tools`) and More (`menu`). A tool is data, not an element (a label, a glyph, its `keys`, `pressed`, a `badge`, `disabledReason`), because the bar draws each one twice: as an icon button with its name and keys in a tooltip and as `aria-keyshortcuts`, and as a row of More. It folds by its own width, a container query: under 860px the presence stack goes (a tool's `badge` comes back in its place), under 720px a `labelled` tool keeps only its glyph, and under 640px the views and every unlabelled tool fold into More as rows with their keys, and the kind's glyph gives the title its room. Both arrangements are drawn and the stylesheet shows one. `renaming` and `onRenamingChange` start a rename from elsewhere (a Rename row); `pending` stands a placeholder in for a title still being read; `as="div"` sits it inside a host's own banner.
+
+**`ArtifactVersionChip`** is the version on show as a quiet chip beside the title that opens a menu of versions (`items`, so the host decides which and what else the menu offers). An older version than `latest` reads `v2 of 3` in the accent, so history never passes for the present.
+
+**`ArtifactPanel`** is a panel at the artifact's side: a complementary region named by its heading, a head with its title, optional `actions`, an expand toggle where `onExpandedChange` is given, and Close, then a body that scrolls under the head. Opening moves focus to the heading unless `focusOnOpen` is false (a panel a link opened); closing with focus inside hands focus back to whatever held it before; Escape from anywhere inside closes it, unless something inside answered the press first. Its body starts headings at level 3, so a `Section` inside it nests under the panel's title. Sizes `sm`, `md` and `lg` rest at 20, 25 and 36rem.
+
+**`ArtifactWorkspace`** lays the artifact's body and its one panel side by side: the panel is a column where the workspace holds two useful columns (960px), slides over the body's end edge under that, and is the whole screen under 640px. `expanded` gives the panel the whole workspace, with the body kept mounted behind it. The body scrolls itself; `bodyRef`, `bodyClassName` and `bodyLabel` are for the host's own listeners, styles and region name.
+
+**`PeopleRail` takes `variant="plain"`**: its list alone, with no border, heading or close, for a host that already frames and names it, such as an `ArtifactPanel`.
+
+**`AppShell` reserves no scrollbar gutter on a `fill` screen.** Its main never scrolls there, so the reserved gutter was a dead strip down the screen's end edge, which an artifact drawn edge to edge showed as a band beside it.
+
+What to change:
+
+- Nothing for an existing host. A `fill` screen's content column is the gutter's width wider than before.
+
+## Changes in 0.28.0
+
+**`ArrangeGrid`** is the page grid a board's blocks stand on: equal columns (twelve unless `columns` says otherwise), the board's own gap, each `ArrangeFrame` spanning the columns it names. A frame writes `grid-column: span N`, which only a grid parent reads, so frames placed straight in an `ArrangeBoard` stacked at full width; every board now lays its blocks on this one grid rather than on a grid of its own. `ArrangeGroup`'s body is the same grid inside the group, so a block is one width on the page and in a group, and while the page is arranged the grid opens its rows a step for each block's toolbar.
+
+**`StackedColumns` keeps its top value inside the figure.** The axis's top tick is centred on the plot's top edge, so half of it stood above the plot; with no head row it fell outside the figure, and a container that clips its content cut the highest value in half. A chart with no head now keeps that half line above its plot, and the tick's line height is the tight step it is measured at.
+
+**`WidgetFrame` stands on the card recipe.** It drew the elevated ground at a 12px inset, so a dashboard's figures were a different object from every card beside them. It now takes the card's ground (`--color-surface-subtle`), its hairline and corner, and the card's 16px inset on every part. The title takes a second line before it gives up a word (cut at one line, a frame three columns wide named "Tokens, last 14 days" as "Tokens, last 14 da"), and the controls stand on its first line. The citation is one line, the dataset's title ending before the time leaves it; in a frame narrower than 18rem it stacks, the title over the time. A stat tile drawn `flush` as the figure takes the frame's inset rather than doubling it. New `flush` lets a table reach the frame's sides: its row rules meet the border, and its cells take the frame's inset, so the first column starts under the title.
+
+**`Note` takes a `heading`**, set at a card title's step in the note's ink, which names the note as a region. A note on a board then reads as one of its cards rather than as a label over loose prose.
+
+**`DataTableColumn.minWidth`** is the narrowest the fit pass shrinks a `defaultWidth` column to. For the one column that gives up room to its box but has to stay readable while it does, a title beside short held columns: the fit took every pixel the box was short down to the table's floor, and a title read "READ…". Past it the table scrolls sideways.
+
+**`DatasetSource` says how its rows are kept current on a line of its own**, under the facts, and sets its title at the medium weight. On the line of facts the refresh wrapped under them and began with the separator, and a rail of semibold titles outweighed the figures it cites.
+
+What to change:
+
+- Wrap a board's page of frames in `ArrangeGrid` (inside `ArrangeBoard`) in place of a grid of your own.
+- Pass `flush` to a `WidgetFrame` whose figure is a table.
+- A host that relied on the frame's elevated ground or its one-line title restyles nothing: both changed for every figure.
+
 ## Changes in 0.27.1
 
 **`useSlideKeys` answers every key with the newest handlers.** It re-added its document listener after each render, so after every step there was a gap, between the new slide's commit and the effect that re-added the listener, in which a quick second press (a clicker held down, two taps) reached the previous slide's handlers and moved to the slide already shown: the press was lost. The hook now keeps one listener for as long as it is `enabled` and reads the handlers from a ref it brings up to date as each render commits, before the browser can dispatch another event. A show whose stage stays mounted across slides, as `SlideStage fit="view"` does, met the gap on almost every quick press.

package/dist/AccessDeniedCard/index.js

@@ -1,8 +1,8 @@
-export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-G3EEUNZQ.js';
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-UB7TJEKZ.js';
 import '../chunk-RA2ULG6H.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Accordion/index.js

@@ -1,6 +1,6 @@
-export { Accordion, AccordionItem } from '../chunk-G2AVKPSL.js';
-import '../chunk-ENJUPIND.js';
-import '../chunk-PQADV6P6.js';
+export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
+import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,9 +1,9 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-BFQK7CYJ.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-EBNI36UQ.js';
 import '../chunk-IG75YMUN.js';
-import '../chunk-UFKUWVMV.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AppShell-APHZKJYH.css → AppShell-GCM4TDVY.css}

@@ -489,9 +489,12 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. */
+   scrolling and the content column takes the height that is left. It
+   reserves no scrollbar gutter either, since nothing in it scrolls: the
+   reserved strip was a dead band down the screen's end edge. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {

package/dist/ArrangeGrid/ArrangeGrid.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ArrangeGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns of the grid, which each block spans a number of. Twelve by default. */
+    columns?: number | undefined;
+    children?: ReactNode;
+}
+/**
+ * The page grid a board's blocks stand on: equal columns, each block
+ * (an `ArrangeFrame`) spanning the number of them it says.
+ *
+ * A FRAME'S WIDTH IS READ ONLY BY A GRID. `ArrangeFrame` writes
+ * `grid-column: span N`, which means nothing to a block parent, so frames
+ * placed straight in an `ArrangeBoard` stack at the page's full width. This is
+ * that grid, once, for every board: the page's blocks stand on it, and an
+ * `ArrangeGroup`'s body is the same grid inside the group, so a block is the
+ * same width on the page and in a group.
+ *
+ * ITS GAP IS THE BOARD'S. The board's column lanes are drawn from
+ * `--crewlet-arrange-board-gap`, and so is this, so a lane is exactly the
+ * column a block snaps to.
+ */
+export declare function ArrangeGrid({ columns, className, style, children, ...rest }: ArrangeGridProps): import("react").JSX.Element;

package/dist/ArrangeGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './ArrangeGrid.css';
+export { ArrangeGrid } from './ArrangeGrid.js';
+export type { ArrangeGridProps } from './ArrangeGrid.js';

package/dist/ArrangeGrid/index.js

@@ -0,0 +1,2 @@
+export { ArrangeGrid } from '../chunk-QBA5B2Z5.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGrid-XM4ZFTED.css

@@ -0,0 +1,17 @@
+/*
+ * ArrangeGrid: the page grid a board's blocks stand on. Equal columns, the
+ * board's gap between them, and each block stretched to its row's height, so
+ * the cards in one row share their bottom edge.
+ */
+.crewlet-arrange-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--crewlet-arrange-board-gap, var(--spacing-4));
+  align-items: stretch;
+}
+
+/* More room between rows while the page is arranged: each block's toolbar
+   sits on its top edge, half in the gap above it. */
+.crewlet-arrange-board.is-editing .crewlet-arrange-grid {
+  row-gap: var(--spacing-5);
+}

package/dist/ArrangeGroup/index.js

@@ -1,4 +1,4 @@
-export { ArrangeGroup } from '../chunk-35XVR5JQ.js';
+export { ArrangeGroup } from '../chunk-B4EBHPK3.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArrangeGroup-SHFHA7BE.css → ArrangeGroup-GY5YMP6E.css}

@@ -132,11 +132,10 @@
   margin-inline-start: auto;
 }
 
+/* The body is the page's grid (ArrangeGrid's `.crewlet-arrange-grid`), inside
+   the group: the same columns and gap, so a block is one width on the page
+   and in a group. */
 .crewlet-arrange-group__body {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
-  gap: var(--spacing-4);
-  align-items: stretch;
   padding: var(--spacing-4);
   min-height: 5rem;
 }

package/dist/ArtifactBar/ArtifactBar.d.ts

@@ -0,0 +1,143 @@
+import { type ReactNode } from 'react';
+import type { ArtifactKind } from '../ArtifactCard/index.js';
+import { type MenuEntry } from '../Menu/index.js';
+/**
+ * One control at the bar's end: a panel it opens, or an action it runs.
+ *
+ * A TOOL IS DATA, NOT AN ELEMENT, because the bar draws each one twice: as an
+ * icon button while the bar has room, and as a row of the More menu once it
+ * does not. An element could only ever be drawn in one of the two.
+ */
+export interface ArtifactBarTool {
+    key: string;
+    /** What it does, in words: the button's name, its tooltip and its menu row. */
+    label: string;
+    /** A glyph from @crewlethq/icons/glyphs. */
+    icon: ReactNode;
+    onSelect: () => void;
+    /** A panel it opens is open: drawn pressed, and said to be. */
+    pressed?: boolean | undefined;
+    /**
+     * The shortcut, as the keys it is pressed with (`['h']`, `['Mod', 'k']`).
+     * Drawn in the tooltip and the menu row and set as `aria-keyshortcuts`;
+     * binding it is the caller's.
+     */
+    keys?: readonly string[] | undefined;
+    /** A small figure on the glyph: how many people are here. Say it in `label` too. */
+    badge?: string | number | undefined;
+    /** Unavailable, and why. The control stays drawn and says it. */
+    disabledReason?: string | undefined;
+    /**
+     * Drawn with its word beside the glyph while the bar is wide, and kept in
+     * the bar as a glyph when it is not, rather than folded into More: Share,
+     * or a kind's primary action such as a doc's Edit.
+     */
+    labelled?: boolean | undefined;
+}
+/** The ways a kind draws itself, as one choice: a deck's Edit, Grid and Present. */
+export interface ArtifactBarModes {
+    /** Names the group: "View". */
+    label: string;
+    value: string;
+    options: readonly {
+        value: string;
+        label: string;
+        icon?: ReactNode;
+    }[];
+    onValueChange: (value: string) => void;
+}
+export interface ArtifactBarLabels {
+    /** The More menu's name. */
+    more: (title: string) => string;
+    /** Said after the title's own name when it can be renamed by pressing it. */
+    renameHint: string;
+    /** The title field's name while renaming. */
+    titleField: string;
+    /** What an empty title is told. */
+    emptyTitle: string;
+}
+export declare const ARTIFACT_BAR_LABELS: ArtifactBarLabels;
+export interface ArtifactBarProps {
+    title: string;
+    kind: ArtifactKind;
+    /** The artifact's own icon word; its kind's glyph where it has none. */
+    icon?: string | null | undefined;
+    /** What the kind is called, said with the glyph: "Slides". */
+    kindLabel: string;
+    /** The way back to where the reader came from, as a link. */
+    back?: {
+        href: string;
+        label: string;
+    } | undefined;
+    /** Before everything, such as an application shell's navigation toggle. */
+    start?: ReactNode;
+    /**
+     * Renames in place. Left out, the title is read only. It answers what went
+     * wrong, in a sentence, to keep the field open and say it; or nothing when
+     * the new title was taken.
+     */
+    onRename?: ((title: string) => Promise<string | null | undefined | void> | string | null | undefined | void) | undefined;
+    /** Whether the title is being renamed now; controlled, for a Rename row elsewhere. */
+    renaming?: boolean | undefined;
+    onRenamingChange?: ((renaming: boolean) => void) | undefined;
+    /** Beside the title: the version chip ([ArtifactVersionChip]). */
+    version?: ReactNode;
+    /** The kind's views, drawn in the middle of the bar. */
+    modes?: ArtifactBarModes | undefined;
+    /** Who else is here, such as a presence stack. Folded away first on a narrower bar. */
+    presence?: ReactNode;
+    /** The kind's own controls, before the panels: a doc's Edit. */
+    kindTools?: readonly ArtifactBarTool[] | undefined;
+    /** The panels and actions every artifact has: details, history, people, share. */
+    tools?: readonly ArtifactBarTool[] | undefined;
+    /** The More menu's own rows. The tools that fold on a narrow bar are added above them. */
+    menu?: readonly MenuEntry[] | undefined;
+    /** `header` stands as the page's banner; `div` sits inside a host's own. */
+    as?: 'header' | 'div' | undefined;
+    /** The title's heading level: 1 where the bar is the page's own head. */
+    headingLevel?: 1 | 2 | 3 | undefined;
+    /** The title is still being read: a placeholder stands in its place. */
+    pending?: boolean | undefined;
+    labels?: Partial<ArtifactBarLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The one slim bar an open artifact sits under, so the artifact keeps the
+ * rest of the screen.
+ *
+ * WHAT IT HOLDS, IN THE ORDER A READER SCANS IT: the way back, what the
+ * artifact is (its glyph and its title, renamed in place by whoever may), the
+ * version on show, then the kind's own views in the middle, and at the end
+ * who else is here, the kind's tools, the panels every artifact has, Share
+ * and More. Everything past the title opens on demand: a panel, a menu or a
+ * dialog, never a second row of chrome.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, a container query rather than the window's, since
+ * a sidebar or a panel beside it is what decides its room. Narrower than a
+ * laptop's sheet the presence stack goes, then the labelled tools' words;
+ * narrower than a phone's two panes, the views and every tool but the
+ * labelled ones fold into More, where each is a row with its shortcut, and
+ * the kind's glyph gives the title its room. Both arrangements are drawn and
+ * the stylesheet shows one, so no control is ever in two places a reader can
+ * see at once and nothing is measured in script.
+ */
+export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, kindTools, tools, menu, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
+export interface ArtifactVersionChipProps {
+    /** The version on show. */
+    version: number;
+    /** The newest version. */
+    latest: number;
+    /** The versions to pick from, newest first, and what else the menu offers. */
+    items: readonly MenuEntry[];
+    /** Names the menu. */
+    label?: string | undefined;
+    /** The chip's words: `v3`, or `v2 of 3` for an older one. */
+    format?: ((version: number, latest: number) => string) | undefined;
+}
+/**
+ * The version on show, as a quiet chip beside the title that opens the
+ * versions. An older version than the newest says so in the chip itself and
+ * takes the accent, so a reader looking at history cannot mistake it for
+ * what everyone else sees.
+ */
+export declare function ArtifactVersionChip({ version, latest, items, label, format, }: ArtifactVersionChipProps): import("react").JSX.Element;

package/dist/ArtifactBar/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactBar.css';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from './ArtifactBar.js';
+export type { ArtifactBarLabels, ArtifactBarModes, ArtifactBarProps, ArtifactBarTool, ArtifactVersionChipProps, } from './ArtifactBar.js';

package/dist/ArtifactBar/index.js

@@ -0,0 +1,25 @@
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-QMBP23BL.js';
+import '../chunk-FQCLKD7U.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-QWOPX2MN.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
+import '../chunk-RKKO7QHH.js';
+import '../chunk-4JUKWWUD.js';
+import '../chunk-GOSQXEZU.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-ACA27MZH.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2HIOJ4YZ.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';