@crewlethq/ui 0.48.3 → 0.49.0

package/README.md

@@ -204,6 +204,62 @@ 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.49.0
+
+The pieces of a company's brand and of the folders artifacts are filed in.
+
+**`@crewlethq/icons` adds four glyphs**: `swatch-book` (`SwatchBookGlyph`) for a company's brand, `blend` (`BlendGlyph`) for its colours, `badge-check` (`BadgeCheckGlyph`) for an artifact drawn in the current brand, and `folder-open` (`FolderOpenGlyph`) for a folder with nothing in it, or nothing the reader can open. Each is vendored from the pinned `lucide-static`; see the icons package's `glyphs/README.md`.
+
+**`ArtifactKind` takes `brand`**, a company's brand kit. `ARTIFACT_KINDS` lists it last, in the engine's order; `ArtifactKindGlyph` draws it with `swatch-book`; `crewlet-kind--brand` tints it in the kind's own orchid (`--color-artifact-kind-brand`, below); `ArtifactKindIllustration` and `ArtifactKindGround` draw a mark over a row of swatches; and `ArtifactCard` and `ArtifactNameCell` label it "Brand". What to change: a `Record<ArtifactKind, ...>` of your own, and a full `kinds` label set passed to either component, needs a `brand` key.
+
+**`@crewlethq/tokens` adds `--color-artifact-kind-brand`** with its `-ink`, `-fill` and `-line` steps: `#cc7bd1` in dark and `#8f3884` in light, an orchid apart from design's purple and HTML's rose. The six node hues each already draw a kind, so brand is the one kind with a hue of its own, declared by every theme; the palette suite now measures every kind's hue as a mark, its ink on its own fill, and every pair of kind hues dE 8 apart. See the tokens README.
+
+**`@crewlethq/tokens` exports the WCAG contrast maths at runtime**: `parseHex` (a `#rrggbb` value as channels, or `null`), `contrast` (the ratio between two colours, 1 to 21, unrounded), `luminance`, the frozen floors `WCAG_CONTRAST` (`aa` 4.5, `aaLarge` 3, `aaa` 7, `aaaLarge` 4.5) and the `Rgb` type. They are the functions the palette suite measures with, not copies, for an interface that shows whether two colours a person chose read on each other.
+
+**`@crewlethq/artifact-kit` reads a company's brand from `--brand-*` input slots.** The kit's own tokens (`--color-brand-accent` and its hover, press, ink, soft fills and deep stop, the selected edge, the label on the accent, the quiet link, the glow, the grounds, the body text and the faces) read `--brand-primary`, `--brand-primary-on-dark`, `--brand-secondary`, `--brand-text`, `--brand-light-ground`, `--brand-dark-ground`, `--brand-font-heading` and `--brand-font-body`, mixing the family from one colour with `color-mix()` in each mode, so a page already written with kit tokens follows the brand. With no slot set every token is the theme's own value, under every theme. The `crewlet-logo` class draws the brand's logo from `--brand-logo-primary`, `--brand-logo-on-dark` or `--brand-logo-mark` (`data-variant`), at its ratio, choosing the on-dark logo in dark mode where there is one and drawing nothing where there is none. An engine-generated brand stylesheet defines only `--brand-*` custom properties and `@font-face` rules. See the kit README.
+
+**`FolderTile` is new**: a folder in a gallery, shorter than an artifact's card and with no preview, the `folder` glyph on a neutral tint, the name on one line (the whole of it on hover), who can see it (`visibility`, an `ArtifactAccessLabel` with the folder's word) and what the reader can open inside (`contents`), with a More menu (`actions`) beside its link. The whole tile is one link. Who can see it and what is inside wrap onto a second line where the tile is narrow (four or three across a laptop's page) and are never cut; only the name is cut to one line, with the whole of it on hover. A folder holding nothing the reader can open says "Nothing you can open yet", never "Empty". `size="row"` is the full width, 44px row a phone takes, and a tile takes that shape by itself under the phone breakpoint. `selected` and `dropTarget` draw the chosen and the drop target states; dragging is the host's to drive. `describeFolderContents` is the one phrasing of the count ("12 artifacts · 2 folders").
+
+**`ArtifactNameCell` takes `kind="folder"`**: a folder's row in the list, the folder glyph on a neutral tint and the word "Folder" over what is inside (`detail`, from `describeFolderContents`).
+
+**`SelectionBar` is new**: what is picked and what can be done to all of it, the count ("3 selected"), the bulk actions as children and Clear, one toolbar in the tab order. It sticks under the top of the scroller (`--crewlet-selection-bar-top`) and docks at the foot of the screen under the phone breakpoint. The count is said politely through the shell's `Announcer` as it changes, and clearing the last pick says so. Nothing is drawn at zero, and `returnFocusRef` is where focus goes once Clear takes the bar away.
+
+**`ArtifactCard` takes `selectable`, `selected`, `selecting` and `onSelectedChange`**: a box on the preview's foot, opposite the kind's badge and drawn as its twin (a cover's own title starts at the top corner, which the box would hide), shown on hover, on focus, on a screen with no hover and always once the card is picked, with the selected edge and fill on a picked card. While the gallery is choosing (`selecting`) every box shows and a press anywhere on the card ticks it rather than opening it. `onSelectedChange` says whether Shift was held (`range`), so the host that keeps the selection draws the range.
+
+**`DataGrid` takes `selection`**: a box before the first column on every row and one in the head over every row drawn, mixed while some are picked, keyed by `rowKey` and controlled. Shift with a box sets every row between it and the box pressed before it, in drawn order. `isSelectable` disables the box of a row the reader cannot act on. A picked row takes the selected fill, apart from `isSelected`, the row the reader is on. The column is the grid's own: it is never in a column set and never gives way.
+
+**`ThemeGallery` can draw a theme's `tag` on its card**, where the theme asks for it with `tagTone`: `'quiet'` draws a caption under the name (cut to one line, the whole of it on hover), and `'brand'` the accent's pill, for the company's own theme among the product's ("Your company brand" on the slides create page). A theme with no `tagTone` keeps its tag in its accessible name only and draws nothing, so the product's own theme picker looks exactly as it did. The card's name carries the tag once either way, so it is never read twice, and `tag` is now optional: a theme without one is its name alone.
+
+**`ArtifactBar`'s read-only title is cut with an ellipsis**: its words sit in a block of their own (`.crewlet-artifact-bar__text`) that takes the ellipsis the flex heading around them could not, so a long title ends in "…" rather than being clipped mid-word, with the whole title on hover. A renamable title is unchanged.
+
+**`Combobox` takes `inline`**: the list is the surface's body rather than a popup, for a picker whose list is the point of the dialog it sits in (Move to…). It is always on screen, in the flow under the field and filtered by it (no popover, no portal), so losing focus closes nothing and the dialog never changes size under the pointer between a press on Cancel and its release. Its box keeps one height, `rows` one-line rows (six by default), whatever the filter leaves in it, and a filter that leaves nothing says `emptyMessage` in its own row, announced politely. The field is an ARIA combobox controlling the inline listbox through `aria-activedescendant`: the arrows step over a disabled row, the highlight lands on the first match as the filter changes, Enter and a press take a row (focus stays in the field), and Home and End reach the ends while the field is empty and are the caret's once it holds text. Escape is never its own, so it reaches the dialog. `chosen` marks the option picked so far as selected, with a tick, and starts the highlight on it. `ComboboxProps` is now a union of `ComboboxPopupProps` (as before, with `open` and `onOpenChange`) and `ComboboxInlineProps`; an `interface` that extended `ComboboxProps` extends `ComboboxPopupProps` instead.
+
+**`Modal` takes `phoneSheet`**: under the phone breakpoint the dialog takes the whole window as a full-height sheet, with 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 (Move to…). It is opt-in, so every other dialog keeps its shape on a phone; a prompt stays a prompt, and a side sheet is already the full width there.
+
+**`Checkbox` takes `hideLabel`**: the box alone on a target the pointer floor allows, its label said and not drawn, for a card or a row that already shows what the box picks.
+
+**`LogoSlot` is new**: one of a brand's logos on the ground it is made for, the brand's own ground colour or the product's sheet for that mode, whatever mode the page is in, with a dashed clear-space guide inked in whichever palette's text reads on that ground. Editable, it takes one file through a `FilePickButton` or a drop on the slot (`FileDrop`), offers Replace and Remove, spins while `uploading`, and draws and announces the engine's refusal (`error`). A reader gets a `download` slot beside its name.
+
+**`ColorField` is new**: a colour a person chooses, a hex field beside a swatch that is the platform's colour picker. It reports a colour only once it reads as `#` and six hex digits, lowercased, and refuses anything else when the reader leaves the field, with a sentence saying what right looks like.
+
+**`ColorSwatch` is new**: one colour of a brand, a chip of it with its own edge, its role, its value and a copy control that says whether the value landed. A role with no colour is the hatch of none.
+
+**`ContrastBadge` is new**: whether one colour reads on another, a sample of the pair, the ratio said as "4.49 to 1", and the level in words and a glyph (AAA, AA, AA large text, Fails). It measures with `@crewlethq/tokens`' `contrast()` and its `WCAG_CONTRAST` floors, compares the ratio unrounded and prints it cut down, so it never claims a floor a pair misses. `scale="large"` holds large text and marks to their own floors. `contrastRatio`, `contrastLevel` and `formatContrastRatio` are exported for a dialog that lists pairs.
+
+**`TypeSpecimen` is new**: a face shown in itself, its label ("Heading") and name in the interface's type, then "Aa" and a line set in the face, always falling back to the package's sans.
+
+**`BrandChip` is new**: the company's brand as a small link, its mark, its name and a chevron, with the brand glyph standing in before a brand exists ("Set up your brand").
+
+**`BrandSample` is new**: a company's brand, drawn, for the preview beside Company › Brand, a brand kit's own view and its gallery cover. `kind="doc"` is a doc's opening (the logo on its ground, a heading in the heading face, an accent rule, a sentence with a drawn link and a quiet byline); `kind="slide"` is a title slide (the mark, an accent bar in the primary and the secondary, a two-line heading and a footer with the company's name). It is a `BrandScope` pinned to its own `mode`, so it draws with the artifact kit's own mapping rather than a second reading of it, and a light and a dark sample sit side by side whatever the page is in; a role it is not given, or given as anything but `#rrggbb`, takes the default theme's value for that mode. `headingFamily` and `bodyFamily` are handed on only when they read as family names. It keeps a 16:9 frame and sets every length against its own width, so the same drawing reads as a cover and as an aside; `--crewlet-brand-sample-radius` sets its corner. It is an image to assistive technology, named by what it shows.
+
+**`BrandScope` is new**: a region of the page in a company's brand (a doc, a board, a preview) while the chrome around it keeps the product's look. It sets the brand mapping's `--brand-*` inputs (each colour only as `#rrggbb`, each family list only when it reads as family names) on an outer element that draws no box, and the public tokens inside its box (the accent and its hover, press, ink and soft fills, the label on it, the selected edge, the grounds, the body text and the two faces) take the brand's values, following the page's light or dark, or a pinned `mode`. The focus ring stays the theme's. The mapping is `@crewlethq/tokens/css/brand-scope`, built from the one source the artifact kit's brand layer is built from, and the component imports it itself; an application that loads this package through `styles.css` alone imports that stylesheet too. `brandScopeInputs` is the gate, exported.
+
+**`@crewlethq/tokens` carries the brand mapping**, which used to live in the artifact kit: `stylesheets/brand.css` is the one source, published as `css/brand` (the kit's root layer, which `@crewlethq/artifact-kit` now bundles from there) and, with its selectors moved onto `.crewlet-brand-scope__layer`, as `css/brand-scope`. The build accepts the mapping under its three root selectors only, so a rule reaches both stylesheets or neither, and `brandSlots`, `brandThemeName` and `parseBrandLayer` read its contract for the kit's build and the suites. A body face alone now sets the headings explicitly (`--brand-font-body` before the theme's display face), and the dark mode names the brand's text step as `initial`, so every mode declares the same steps.
+
+**`TypeSpecimen` refuses a `fontFamily` that is not a list of family names** and draws the face by its name instead, through the same family grammar `BrandSample` and `BrandScope` use. The grammar takes every list the engine writes for a brand's face (the kit faces, the system stacks, and an uploaded family quoted in front of the system sans stack): a bare name may be a vendor identifier such as `-apple-system`, and a list holds up to eleven names, the engine's longest stack with one family registered in front of it. A `var()` other than the package's family tokens, a `url()`, a CSS-wide keyword, a name opening on two hyphens or a digit, and any punctuation are still refused, and the list falls back to the package's face.
+
+Every colour a person chose reaches a stylesheet through one custom property per part, and only after it has passed `#rrggbb`.
+
 ## Changes in 0.48.3
 
 **The account row in a rail's foot is slimmer, its controls stand as tall as it, and the foot gives it room.** In `AppShell.Rail`'s foot, `AccountRow` stands at 42px, half a spacing step under the large control step (`calc(var(--size-control-lg) - var(--spacing-1) / 2)`, exposed as `--crewlet-account-row-height`), where it stood 44px, with half a step above and below its two lines where it had a whole one. The room around it grows instead: the row is held one step off the foot's edge above and below (`--crewlet-account-row-pad`, from none), so the block reads less cramped while the row itself is slimmer. It stops at 42px because the medium badge's ring (1.5px, 2px outside the 32px badge) takes 39px, and 42px keeps it 1.5px clear of the row's hover fill. The controls beside the link (Settings, Preferences, or any `IconButton` or `IconButtonLink` in `actions`) take the row's height and keep their own width and glyph, so their hover fill meets the row's top and bottom where a 26px square floated in its middle. Measured in a 236px rail with Settings and Preferences beside the link: the row is 42px (from 44px), each control 26px by 42px (from 26px by 26px) with its 12px glyph centred, the name and the detail keep 116px, there is 8px between the row and the foot's edge above and below (from 4px), the foot holding the account row alone is 59px (from 53px), and the ring stands 1.5px inside the row's edge (from 2.5px). Every target stays over 24px at every density. Outside a rail's foot the row and its controls are unchanged.

package/dist/AgentHandoffPanel/index.js

@@ -1,12 +1,12 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-CWKWMIIJ.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-V7GOOXPK.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-6R5BSA36.js';
+import '../chunk-GHY63X4C.js';
 import '../chunk-NBDN5JZV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArrangeList/index.js

@@ -1,7 +1,7 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-LIJQT74Y.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-H55D66IK.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-F57N6ZJG.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactBar/index.js

@@ -1,12 +1,12 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-U4HOKU6P.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-VN47PYUF.js';
 import '../chunk-OOC7Q67K.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-6FVGSWLS.js';
 import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-ILDNJHRU.js';
-import '../chunk-CE2THTQR.js';
+import '../chunk-AVL52EME.js';
+import '../chunk-RSKW25Y5.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-TMM32U7D.js';

package/dist/{ArtifactBar-6PGWGKN2.css → ArtifactBar-UMZCTARR.css}

@@ -104,6 +104,15 @@
   overflow: visible;
 }
 
+/* A read-only title's words: the block that takes the ellipsis, which the
+   flex heading around it cannot. */
+.crewlet-artifact-bar__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .crewlet-artifact-bar__rename {
   min-width: 0;
   max-width: 100%;

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -28,6 +28,17 @@ export interface ArtifactCardLabels {
     access: Record<ArtifactAccess, string>;
     /** Who made it, after the time: "by Maya". */
     by: (name: string) => string;
+    /** The selection box's name: "Select Vendor scorecard". */
+    select: (title: string) => string;
+}
+/** How a pick was made, for a host that keeps the selection across a gallery. */
+export interface ArtifactCardSelectionChange {
+    /**
+     * The reader held Shift: they are asking for every card between the one
+     * they picked last and this one. The card cannot see its neighbours, so the
+     * host that holds the selection draws the range.
+     */
+    range: boolean;
 }
 export interface ArtifactCardProps {
     title: string;
@@ -65,6 +76,24 @@ export interface ArtifactCardProps {
      * The `card` size only.
      */
     actions?: ReactNode;
+    /**
+     * The card can be picked for a bulk action: a box on the preview's foot,
+     * opposite the kind's badge, shown on hover, while focus is inside the card,
+     * on a screen with no hover, and always once the card is picked or the
+     * gallery is choosing (`selecting`). The `card` size only.
+     */
+    selectable?: boolean | undefined;
+    /** It is picked: its box is ticked, and the card takes the selected edge and fill. */
+    selected?: boolean | undefined;
+    /**
+     * The gallery is choosing (its Select toggle is on, or something is picked):
+     * every box shows, and the card's body PICKS rather than opens, a label for
+     * its box rather than a link, so a press anywhere on the card ticks it and a
+     * reader is never sent away mid-selection. The More menu stays a menu.
+     */
+    selecting?: boolean | undefined;
+    /** The box was ticked or cleared, with whether the reader asked for a range. */
+    onSelectedChange?: ((selected: boolean, change: ArtifactCardSelectionChange) => void) | undefined;
     /** It is in the trash: the preview is drawn faded. */
     trashed?: boolean | undefined;
     /** `compact` is a row for a narrow rail or a phone, with no preview. */
@@ -93,7 +122,7 @@ export interface ArtifactCardProps {
  * THE COMPACT ROW (`size="compact"`) is a task rail's: the kind's glyph, the
  * title and the facts, with no preview and no actions.
  */
-export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, access, actions, trashed, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;
+export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, access, actions, selectable, selected, selecting, onSelectedChange, trashed, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;
 /**
  * A gallery card while its listing loads: the card's own shape (the preview
  * at its ratio, the badge over its foot, a title line and a meta line), so a

package/dist/ArtifactCard/index.js

@@ -1,16 +1,23 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OKE5YSLD.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-Q44X36QC.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-UBZDYOCA.js';
+import '../chunk-RV6XB5UV.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-NCHKKYPQ.js';
 import '../chunk-BGLKLXL3.js';
-export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
+export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
+import '../chunk-EXRRTKWT.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactCard-OGTMO2KI.css → ArtifactCard-SOB63NV5.css}

@@ -272,9 +272,80 @@
   }
 }
 
+/*
+ * PICKED, as every chosen option in the package is drawn: the selected edge
+ * over the selected fill, laid as an image over the card's own ground so the
+ * card keeps it. Never the accent, which is the focus ring's hue.
+ */
+.crewlet-artifact-card--card.is-selected {
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+/*
+ * THE SELECTION BOX STANDS ON THE PREVIEW'S FOOT, opposite the kind's badge
+ * and drawn as its twin: half over the picture and half over the card, on a
+ * raised square in the badge's own size, hairline and shadow. A cover's own
+ * title starts at its top corner, and a box over that corner hid its first
+ * words; the foot's far corner is where a cover has the least to say.
+ *
+ * Its anchor has the preview's shape (the card's width at 16:9) and takes no
+ * pointer, so the box is placed against the preview's foot at any width
+ * without being nested in the link the preview belongs to. Hidden until the
+ * card is hovered or holds focus, and always there once the card is picked,
+ * while the gallery is choosing, and on a screen with no hover.
+ */
+.crewlet-artifact-card__select-anchor {
+  position: absolute;
+  inset: 0 0 auto 0;
+  aspect-ratio: 16 / 9;
+  pointer-events: none;
+}
+
+.crewlet-artifact-card__select {
+  position: absolute;
+  right: var(--spacing-4);
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(50%);
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover .crewlet-artifact-card__select,
+.crewlet-artifact-card--card:focus-within .crewlet-artifact-card__select,
+.crewlet-artifact-card--card.is-selected .crewlet-artifact-card__select,
+.crewlet-artifact-card--selecting .crewlet-artifact-card__select {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-artifact-card__select {
+    opacity: 1;
+  }
+}
+
+/* WHILE CHOOSING, THE BODY PICKS: the pointer says so, and a Shift-press
+   for a range selects no text on the way. */
+.crewlet-artifact-card--selecting .crewlet-artifact-card__link {
+  cursor: pointer;
+  user-select: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-artifact-card--card,
-  .crewlet-artifact-card__actions {
+  .crewlet-artifact-card__actions,
+  .crewlet-artifact-card__select {
     transition: none;
   }
 }

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-FWBKMPNR.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-P3QWT5VR.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-CE2THTQR.js';
+import '../chunk-RSKW25Y5.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactIcon/index.js

@@ -1,2 +1,2 @@
-export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-ILDNJHRU.js';
-import '../chunk-CE2THTQR.js';
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-AVL52EME.js';
+import '../chunk-RSKW25Y5.js';

package/dist/ArtifactKindGlyph/ArtifactKindGlyph.d.ts

@@ -1,8 +1,12 @@
 import { type GlyphSize } from '@crewlethq/icons/glyphs';
-/** What an artifact is, as the engine names it (`artifacts.Kind`), which decides how it is drawn. */
-export type ArtifactKind = 'html' | 'doc' | 'slides' | 'design' | 'dashboard' | 'sheet';
+/**
+ * What an artifact is, as the engine names it (`artifacts.Kind`), which
+ * decides how it is drawn. `brand` is a company's brand kit: its logos,
+ * colours, type and voice.
+ */
+export type ArtifactKind = 'html' | 'doc' | 'slides' | 'design' | 'dashboard' | 'sheet' | 'brand';
 /** Every kind, in the engine's order (`artifacts.Kinds`). */
-export declare const ARTIFACT_KINDS: readonly ["html", "doc", "slides", "design", "dashboard", "sheet"];
+export declare const ARTIFACT_KINDS: readonly ["html", "doc", "slides", "design", "dashboard", "sheet", "brand"];
 /** The glyph a kind is drawn with, wherever a kind is drawn, at a glyph size step or in px. */
 export declare function ArtifactKindGlyph({ kind, size }: {
     kind: ArtifactKind;

package/dist/ArtifactKindGlyph/index.js

@@ -1 +1 @@
-export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
+export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -3,13 +3,14 @@ import type { ArtifactKind } from '../ArtifactKindGlyph/index.js';
 /**
  * A kind of artifact, pictured: a simple geometric drawing of what the kind
  * is (a page of prose, a slide, a phone screen, a board of bars, a window of
- * code, a grid of cells) in the kind's own hue.
+ * code, a grid of cells, a brand kit's mark over its swatches) in the kind's
+ * own hue.
  *
  * ONE HUE PER KIND, FROM THE TOKENS. Every mark is drawn in
  * `--color-artifact-kind-<kind>` at one of four fixed weights (the body, its
  * lines, a soft block and the one solid accent), so a theme repaints every
- * drawing by repainting the node hue the kind aliases, and nothing here holds
- * a colour of its own.
+ * drawing by repainting the kind's hue (a node hue, or brand's own), and
+ * nothing here holds a colour of its own.
  *
  * DECORATION. The drawing is hidden from assistive technology: the kind's
  * name beside it is what is read.

package/dist/ArtifactKindIllustration/index.js

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

package/dist/{ArtifactKinds-CVD3FCYO.css → ArtifactKinds-O3CALPVX.css}

@@ -12,4 +12,5 @@
 .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--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-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); }

package/dist/ArtifactMakeRow/index.js

@@ -1,5 +1,5 @@
-export { ArtifactMakeRow } from '../chunk-R2IBCEU6.js';
-import '../chunk-CE2THTQR.js';
+export { ArtifactMakeRow } from '../chunk-R3BA3C4Y.js';
+import '../chunk-RSKW25Y5.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactNameCell/ArtifactNameCell.d.ts

@@ -2,9 +2,22 @@ import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
 export interface ArtifactNameCellLabels {
     kinds: Record<ArtifactKind, string>;
     pinned: string;
+    /** The word under a folder's name, where an artifact's says its kind. */
+    folder: string;
 }
+/**
+ * What a list's name cell names: an artifact of a kind, or a folder, which a
+ * folder's page lists first in the same grid as the artifacts it holds.
+ */
+export type ArtifactNameKind = ArtifactKind | 'folder';
 export interface ArtifactNameCellProps {
-    kind: ArtifactKind;
+    /**
+     * The artifact's kind, or `folder` for a folder's row: the folder glyph on
+     * a neutral tint (a folder is not a kind, so it takes no kind's colour) and
+     * the word "Folder", with what is inside as its `detail`
+     * (`describeFolderContents`).
+     */
+    kind: ArtifactNameKind;
     title: string;
     /**
      * What it is about, in a line under the title after the kind's word: the

package/dist/ArtifactNameCell/index.d.ts

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

package/dist/ArtifactNameCell/index.js

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

package/dist/{ArtifactNameCell-RTVP4LO4.css → ArtifactNameCell-3AHLUSE5.css}

@@ -37,6 +37,18 @@
   box-shadow: inset 0 0 0 1px var(--crewlet-kind-hue);
 }
 
+/* A FOLDER'S MARK IS NEUTRAL: a folder is not a kind, so it takes the inset
+   ground and the plain hairline, and its hover takes the hover hairline. */
+.crewlet-artifact-name__mark--folder {
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+:is(tr, [role='row']):hover .crewlet-artifact-name__mark--folder {
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
 .crewlet-artifact-name--trashed .crewlet-artifact-name__mark {
   background: var(--color-surface-inset);
   box-shadow: inset 0 0 0 1px var(--color-border-default);

package/dist/BrandChip/BrandChip.d.ts

@@ -0,0 +1,26 @@
+import type { AnchorHTMLAttributes } from 'react';
+export interface BrandChipProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    /** Where the chip goes: the company's Brand page. */
+    href: string;
+    /** What it says, which is its name: "Acme brand", or "Set up your brand". */
+    label: string;
+    /**
+     * The brand's mark (its square logo), as an address the host has already
+     * validated: the engine's file route through the dashboard's checked blob
+     * path. Left out, the brand glyph stands in, which is also the chip an
+     * administrator sees before a brand exists.
+     */
+    mark?: string | undefined;
+}
+/**
+ * The company's brand, as a small link: its mark, its name and a chevron.
+ *
+ * WHERE IT IS DRAWN: the Make row of the artifacts gallery, the company theme
+ * in the slides picker and the note under the ask-an-agent panel, so the
+ * brand every new artifact follows is named where the artifact is started,
+ * one press from where it is set.
+ *
+ * ONE LINK, NAMED BY ITS WORDS. The mark is decorative (the label says whose
+ * brand it is), and the chevron says it goes somewhere.
+ */
+export declare function BrandChip({ href, label, mark, className, ...rest }: BrandChipProps): import("react").JSX.Element;

package/dist/BrandChip/index.d.ts

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

package/dist/BrandChip/index.js

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

package/dist/BrandChip-SQWBC2WU.css

@@ -0,0 +1,81 @@
+/*
+ * The company's brand as a small link: the mark, the name, a chevron. A quiet
+ * chip at a small control's height, inside the default hairline, that steps
+ * its hairline up under the pointer and moves nothing.
+ */
+.crewlet-brand-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--size-control-sm);
+  box-sizing: border-box;
+  padding: 2px var(--spacing-2) 2px 2px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    color var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-brand-chip:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+.crewlet-brand-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* THE MARK ON ITS OWN PLATE, so a mark drawn for a light ground still reads
+   on a dark theme: the brand's square logo at the chip's inner height. */
+.crewlet-brand-chip__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-control-sm) - 6px);
+  height: calc(var(--size-control-sm) - 6px);
+  overflow: hidden;
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+}
+
+.crewlet-brand-chip__mark--glyph {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brand-chip__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.crewlet-brand-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-brand-chip__chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-brand-chip {
+    transition: none;
+  }
+}