@crewlethq/ui 0.33.0 → 0.34.1

package/README.md

@@ -204,6 +204,24 @@ 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.34.0
+
+**`ArtifactCard` is redesigned as a gallery card.** The `card` size draws a large preview on top with a generous corner, the kind's glyph on a badge standing over the preview's foot in the kind's ink, the title at the large step on one line, and one quiet line under it: who can open it (`access`: `private` a lock, `shared` people, `company` a building, each said in words to assistive technology through `labels.access`), the owner when the reader is not the owner, and when it was last edited. The default change word is "Edited" ("Edited 20h ago by Maya"), in both sizes. `actions` (a More menu) is drawn beside the link rather than inside it, over the preview's top corner, shown on hover, while focus is inside the card and while its menu is open, and always on a screen with no hover; a keyboard reaches it after the link. `trashed` fades the preview. Hover lifts the card's edge and shadow (not under `prefers-reduced-motion`), and focus rings the whole card. The `compact` row is unchanged but for "Edited". **`ArtifactCardSkeleton`** is the card's own shape while a gallery loads. **`ArtifactPreviewGlyph`** now draws the kind's illustration on its tinted ground (`ArtifactKindGround`) rather than a lone glyph.
+
+**`ArtifactKindIllustration`, `ArtifactKindGround` and `ArtifactKindTile` picture each kind of artifact.** The illustration is a simple geometric drawing per kind (a page of prose with a checklist, a slide with a picture, a phone screen, a board of bars, a window of code, a grid of cells), hidden from assistive technology and drawn entirely in the kind's tokens at four fixed weights, so it holds no colour of its own. The ground sets it on the kind's fill falling into the card, as a preview's stand-in. The tile is a "Make something new" entry: the ground framed in a hairline holder, the kind's name under it, one link named by the name (and an optional `badge`, read after it); with `disabledReason` it stays a focusable stop that says why it cannot start one.
+
+**`LivePreview`, `LivePreviewBudgetProvider` and `PreviewScale` draw real content small.** `LivePreview` lays its content out at `width` CSS pixels and scales it to its box with a transform (`PreviewScale`, which also fits a board of its own size whole with `fit="contain"`), mounts it only while the box is within `rootMargin` of the viewport, has stayed there for `dwellMs` (120ms by default, so a fling mounts nothing) and holds a slot of the shared budget (`LIVE_PREVIEW_MAX`, twelve, granted one per animation frame so a row arriving at once never costs one long task), and draws `fallback` otherwise: off screen, waiting for a slot, until the content calls `useLivePreview().ready()`, after it calls `fail()` (which gives its slot back for good) and in a browser with no IntersectionObserver. The live layer is `inert`, takes no pointer and is hidden from assistive technology; the swap is a short fade, and none under `prefers-reduced-motion`. `createLivePreviewBudget` is the bookkeeping, exported for a host that measures.
+
+**`Select` takes `appearance="quiet"`**: no boundary or fill until the pointer is over it, for a toolbar whose pickers arrange content that is the page's point. A quiet filter that is on takes the accent's soft fill under its accent ink, and a quiet picker sizes to its answer with no floor.
+
+**Tokens: `--color-artifact-kind-<kind>` with its `-ink`, `-fill` and `-line` steps** for `doc`, `slides`, `design`, `dashboard`, `html` and `sheet`. Each is an alias of a node hue (doc blue, slides amber, design purple, dashboard cyan, HTML rose, sheet green), so every theme, light and dark, repaints them with no value of its own.
+
+**`SheetGrid`'s row gutter puts the number and the row's actions in one place.** The number sits centred in the fixed-width gutter, in the tertiary ink and tabular figures, so row 9 and row 1000 stand in one column. Where the host takes row actions (`onDeleteRow`), the number gives way, in the same place and with no shift, to the actions button at the small `IconButton` step, centred, with a `Tooltip` and the name "Actions for row N" (`labels.rowActions`, which read "Row actions for row N"). It shows under the pointer, on the row holding focus and while its menu is open; the button is drawn in every row with actions, clear until then, so a tap on the number opens the menu on a touch screen, where there is no hover. It sat pinned to the gutter's trailing border, half over the number ("2 ⋯"), was drawn only on the active or hovered row, and carried only the native tooltip. The tip opens above the button from its leading edge, so it never hangs past the grid's own edge or is pushed off the button at a page's edge. The row header is named by its row alone (`aria-labelledby`), not by the button inside it, and keys pressed on the button stay the menu button's rather than also moving the active cell. A selection marks its rows' numbers as it marks its cells; in forced colours the number takes the selection's ink on the page's ground.
+
+**`Tooltip` takes `align="start"`**, which lines the panel up with the trigger's leading edge (its right edge in a right-to-left page) rather than centring it, for a control at the leading edge of what it belongs to. `center` stays the default.
+
+**A selected frozen cell stays opaque when the sheet scrolls sideways.** The selection's translucent tint replaced the cell's ground, so the values passing under a frozen column showed through a selected cell in it. The tint is now laid over the cell's own ground, as it is in the gutter.
+
 ## Changes in 0.33.0
 
 **`ArtifactPanel` rests every panel of text at one width, and its `sm` size is removed.** Details at `sm` and History at `md` moved the artifact's edge by 80px between two panels of text. There are two sizes now: `md`, at 22.5rem, for every panel of text (facts, a list, a form), so moving between them never moves the artifact's edge, and `lg`, at 36rem, for a table. Where there is no room for two columns, a panel that slides over the artifact takes the drawer's lift, the one the shell's rail drawer wears, so its start edge reads as a sheet over the artifact rather than a cut through it. The body publishes its padding as `--crewlet-artifact-panel-inset`, which a sticky foot offsets itself by to sit on the panel's edge, and it is a flex column, so a child that sets `min-height: 0` can fit the panel rather than scroll it. A `Section` inside it heads at the panel's register: its title reads `--crewlet-section-title-size`, which the panel's body sets to the small step, and its sentence stacks under the title (the actions kept on the title's line) when the column it sits in is narrow.

package/dist/ArtifactBar/index.js

@@ -1,12 +1,13 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-Z6GFMI2Z.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-IUD5VA2Z.js';
 import '../chunk-WKEPORNM.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-HH2GKAAE.js';
-import '../chunk-DFZMYB5X.js';
+import '../chunk-PLDUNXAO.js';
+import '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
@@ -14,6 +15,7 @@ import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-3EB2AV3H.js';

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -13,15 +13,22 @@ export declare function ArtifactKindGlyph({ kind, size }: {
     size?: GlyphSize | undefined;
 }): import("react").JSX.Element;
 /**
- * What a card's preview draws when there is no cover: the kind's glyph,
- * centred in the preview. Exported for a host whose cover has nothing to draw
- * YET (its outline still loading) or at all (a sheet with no columns): a cover
- * that rendered nothing left an empty box where every other card has a
- * picture, since the card cannot know that a cover it was given drew nothing.
+ * What a card's preview draws when there is no cover: the kind's drawing on
+ * its tinted ground (`ArtifactKindGround`). Exported for a host whose cover
+ * has nothing to draw YET (its content still loading) or at all (a sheet with
+ * no columns): a cover that rendered nothing left an empty box where every
+ * other card has a picture, since the card cannot know that a cover it was
+ * given drew nothing.
  */
 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>;
@@ -29,8 +36,10 @@ export interface ArtifactCardLabels {
     version: (version: number) => string;
     changes: (count: number) => string;
     present: (count: number) => string;
-    /** The change's time, opening the line: "Updated" before "4m ago". */
+    /** The change's time, opening the line: "Edited" before "4m ago". */
     updated: string;
+    /** Who can open it, said to assistive technology beside its glyph. */
+    access: Record<ArtifactAccess, string>;
     /** Who made it, after the time: "by Maya". */
     by: (name: string) => string;
 }
@@ -61,6 +70,17 @@ export interface ArtifactCardProps {
     version?: number | undefined;
     /** The project or task it belongs to, as its key ("OPS", "ENG-412"). */
     project?: string | undefined;
+    /** Who can open it, drawn as a glyph opening the card's line. Left out, nothing is said about it. */
+    access?: ArtifactAccess | undefined;
+    /**
+     * The card's own controls (a More menu), drawn OUTSIDE its link in the
+     * preview's top corner and shown on hover and while focus is inside the
+     * card, so they are reachable by keyboard and never nested in the link.
+     * The `card` size only.
+     */
+    actions?: ReactNode;
+    /** 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. */
     size?: ArtifactCardSize | undefined;
     className?: string | undefined;
@@ -69,12 +89,32 @@ export interface ArtifactCardProps {
     labels?: Partial<ArtifactCardLabels> | undefined;
 }
 /**
- * One artifact, as a card in a gallery, a row in a task's rail or an embed.
+ * One artifact, as a card in a gallery or a row in a task's rail.
+ *
+ * THE CARD (`size="card"`) is a gallery's: a large preview of the artifact's
+ * own content on top, the kind's glyph on a badge over the preview's foot,
+ * then the title on one line and one quiet line under it, who can open it
+ * and when it was last edited ("Edited 20h ago"), with the owner named when
+ * the reader is not the owner.
  *
  * THE WHOLE CARD IS ONE LINK, named by the title alone and described by the
  * rest, so a reader moving through a gallery by link hears "Vendor scorecard"
- * and then, if they wait, what it is and who changed it. Nothing inside is a
- * second control: a pin or a menu inside a link is a control nobody can reach
- * without opening the artifact. Those live on the gallery row's own menu.
+ * and then, if they wait, what it is and who changed it. The card's own
+ * controls (`actions`, a More menu) are drawn beside the link rather than
+ * inside it, over the preview's corner, so they are real controls a keyboard
+ * reaches in turn after the link.
+ *
+ * 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;
+/**
+ * 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
+ * gallery that arrives replaces each placeholder in place rather than
+ * reflowing the page. Decorative: the host says once what is loading
+ * (`Skeleton`'s `label`, or its own status line).
  */
-export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;
+export declare function ArtifactCardSkeleton({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/ArtifactCard/index.d.ts

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

package/dist/ArtifactCard/index.js

@@ -1,4 +1,5 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph, ArtifactPreviewGlyph } from '../chunk-DFZMYB5X.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactCardSkeleton, ArtifactKindGlyph, ArtifactPreviewGlyph } from '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
@@ -6,6 +7,7 @@ import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArtifactCard-XHRLAL7C.css

@@ -0,0 +1,289 @@
+/*
+ * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
+ * lines up whatever each preview is, the kind's badge over its foot, then the
+ * title and one quiet line. `compact` is a row with the kind's glyph in place
+ * of the preview, drawn on Card.
+ */
+
+/*
+ * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
+ * class too. The two sheets meet at equal weight and the bundle orders them
+ * by file name, which puts this one first: `.crewlet-card` and
+ * `.crewlet-card--p-none` then won, and the compact row was drawn as a
+ * padless column with its glyph on a line of its own.
+ */
+.crewlet-card.crewlet-artifact-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+}
+
+.crewlet-card.crewlet-artifact-card--compact {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card__glyph {
+  display: inline-flex;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__glyph--compact {
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-artifact-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card--compact .crewlet-artifact-card__body {
+  padding: 0;
+}
+
+.crewlet-artifact-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__title {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-card__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__facts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-artifact-card__line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE FACTS OF ONE LINE ARE A RUN, "Sheet · OPS · v12", each after the first
+   opened by a quiet dot, so two short words never read as one phrase. */
+.crewlet-artifact-card__line > * + *::before {
+  content: '·';
+  margin-inline-end: var(--spacing-2);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__owner,
+.crewlet-artifact-card__presence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__changes {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ---- the gallery card ---- */
+
+/*
+ * A SOFT PANE WITH A GENEROUS CORNER. The card is the card rung with its
+ * hairline, rounded a step past a plain card's because the preview inside it
+ * is a picture, and a picture in a tight corner reads as a screenshot pasted
+ * into a box. Hover lifts the edge and the shadow, never the colour.
+ */
+.crewlet-artifact-card--card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-subtle);
+  transition:
+    border-color var(--motion-duration-base) var(--motion-easing-out),
+    box-shadow var(--motion-duration-base) var(--motion-easing-out),
+    transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-card);
+  transform: translateY(-1px);
+}
+
+.crewlet-artifact-card--card:has(.crewlet-artifact-card__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-artifact-card__link {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: inherit;
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.crewlet-artifact-card__preview {
+  position: relative;
+  display: flex;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: var(--color-surface-inset);
+}
+
+.crewlet-artifact-card__preview > * {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.crewlet-artifact-card--trashed .crewlet-artifact-card__preview > * {
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__body {
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-5) var(--spacing-5);
+}
+
+/*
+ * THE KIND'S BADGE STANDS ON THE PREVIEW'S FOOT, half over the picture and
+ * half over the card, the glyph in the kind's ink: what the artifact is, read
+ * before its title, in the one place every card has it.
+ */
+.crewlet-artifact-card__badge {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  width: 40px;
+  height: 40px;
+  margin-top: -22px;
+  margin-bottom: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  color: var(--crewlet-kind-ink, var(--color-text-secondary));
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-card--card .crewlet-artifact-card__facts {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-artifact-card__meta {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-card__access {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-artifact-card__meta > .crewlet-artifact-card__owner {
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+.crewlet-artifact-card__owner-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-artifact-card__meta > :last-child {
+  flex: none;
+}
+
+/*
+ * THE CARD'S OWN CONTROLS, over the preview's top corner and outside the
+ * link: hidden until the card is hovered or holds focus, so a gallery rests
+ * as pictures, and always there on a screen with no hover.
+ */
+.crewlet-artifact-card__actions {
+  position: absolute;
+  top: var(--spacing-3);
+  right: var(--spacing-3);
+  display: inline-flex;
+  gap: var(--spacing-1);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover .crewlet-artifact-card__actions,
+.crewlet-artifact-card--card:focus-within .crewlet-artifact-card__actions,
+.crewlet-artifact-card__actions:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-artifact-card__actions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-card--card,
+  .crewlet-artifact-card__actions {
+    transition: none;
+  }
+
+  .crewlet-artifact-card--card:hover {
+    transform: none;
+  }
+}
+
+.crewlet-artifact-card--skeleton {
+  pointer-events: none;
+}
+
+.crewlet-artifact-card--skeleton .crewlet-artifact-card__badge {
+  box-shadow: none;
+}

package/dist/ArtifactCover/index.js

@@ -1,6 +1,7 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-UNXLTJU7.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-CFAJP777.js';
 import '../chunk-TYKQ33CL.js';
-import '../chunk-DFZMYB5X.js';
+import '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
@@ -8,6 +9,7 @@ import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArtifactIcon/index.js

@@ -1,5 +1,6 @@
-export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-HH2GKAAE.js';
-import '../chunk-DFZMYB5X.js';
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-PLDUNXAO.js';
+import '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
@@ -7,6 +8,7 @@ import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import type { ArtifactKind } from '../ArtifactCard/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.
+ *
+ * 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.
+ *
+ * DECORATION. The drawing is hidden from assistive technology: the kind's
+ * name beside it is what is read.
+ */
+export declare function ArtifactKindIllustration({ kind, className }: {
+    kind: ArtifactKind;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * A kind's drawing on its tinted ground: the stand-in a preview shows while
+ * nothing live is drawn (off screen, still loading, over the live budget,
+ * failed or empty), and the face of a Make something new tile.
+ */
+export declare function ArtifactKindGround({ kind, className, children, }: {
+    kind: ArtifactKind;
+    className?: string | undefined;
+    /** Drawn over the ground in place of the kind's drawing. */
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export interface ArtifactKindTileProps {
+    kind: ArtifactKind;
+    /** The kind's name, under the tile: "Docs". */
+    label: string;
+    /** Where starting one goes. Left out with `disabledReason`, the tile starts nothing. */
+    href?: string | undefined;
+    /** A short tag after the name ("New", "Beta"), for a kind that is genuinely new. */
+    badge?: string | undefined;
+    /** Why this reader cannot start one. The tile stays focusable and says so. */
+    disabledReason?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * One kind on a "Make something new" row: the kind's drawing on its tinted
+ * ground, framed, with its name under it. The whole tile is one link named by
+ * the kind's name.
+ *
+ * A TILE THAT CANNOT START is still a stop on the row, so a reader moving
+ * through it by keyboard hears why (`disabledReason`) rather than finding a
+ * kind missing.
+ */
+export declare function ArtifactKindTile({ kind, label, href, badge, disabledReason, className }: ArtifactKindTileProps): import("react").JSX.Element;

package/dist/ArtifactKindIllustration/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactKindIllustration.css';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from './ArtifactKindIllustration.js';
+export type { ArtifactKindTileProps } from './ArtifactKindIllustration.js';

package/dist/ArtifactKindIllustration/index.js

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