@crewlethq/ui 0.32.0 → 0.34.0

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,13 +1,15 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-6AH2XJ3Q.js';
-import '../chunk-M3LUNN7F.js';
-import '../chunk-GOSQXEZU.js';
-import '../chunk-4KP4RC3O.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-CFAJP777.js';
+import '../chunk-TYKQ33CL.js';
+import '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
+import '../chunk-CI3VPIJN.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-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,12 +1,14 @@
-export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-4JUKWWUD.js';
-import '../chunk-GOSQXEZU.js';
-import '../chunk-4KP4RC3O.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';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
 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';

package/dist/ArtifactKindIllustration-4NG6IE3C.css

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

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -1,6 +1,10 @@
 import { type ReactNode, type Ref } from 'react';
-/** How wide a panel rests beside the artifact: facts, a list, or a table. */
-export type ArtifactPanelSize = 'sm' | 'md' | 'lg';
+/**
+ * How wide a panel rests beside the artifact: text (facts, a list, a form) or
+ * a table. ONE WIDTH FOR TEXT, so moving from one text panel to another never
+ * moves the artifact's edge under the reader.
+ */
+export type ArtifactPanelSize = 'md' | 'lg';
 export interface ArtifactPanelLabels {
     close: (title: string) => string;
     expand: string;

package/dist/ArtifactPanel/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-I3BSQUKN.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-HUVG2FFT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArtifactPanel-YFXT5O77.css → ArtifactPanel-HW3SU7CP.css}

@@ -28,7 +28,9 @@
 }
 
 .crewlet-artifact-panel {
-  --crewlet-artifact-panel-width: 25rem;
+  /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
+     those moved the artifact's edge 80px between Details and History. */
+  --crewlet-artifact-panel-width: 22.5rem;
   display: flex;
   flex: none;
   flex-direction: column;
@@ -38,10 +40,6 @@
   background: var(--color-surface-background);
 }
 
-.crewlet-artifact-panel--sm {
-  --crewlet-artifact-panel-width: 20rem;
-}
-
 .crewlet-artifact-panel--lg {
   --crewlet-artifact-panel-width: 36rem;
 }
@@ -94,10 +92,27 @@
   gap: var(--spacing-1);
 }
 
+/* THE BODY'S INSET IS PUBLISHED (--crewlet-artifact-panel-inset) for content
+   that sticks to its scrollport: a sticky edge stops at the padding, so a
+   foot with `bottom: 0` left a band under it that the content scrolled
+   through; such a foot offsets itself by the inset to sit on the edge. */
 .crewlet-artifact-panel__body {
+  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
+     rather than the window's; and its sections head at the panel title's
+     step, a level under it and never louder than it. */
+  container: crewlet-artifact-panel / inline-size;
+  --crewlet-section-title-size: var(--font-size-sm);
+  --crewlet-artifact-panel-inset: var(--spacing-4);
+
+  /* A COLUMN, so content that should fit the panel rather than scroll it
+     can: a child that sets `min-height: 0` shrinks to the room the body has
+     (a sheet's rows, whose grid then scrolls itself), and every other child
+     keeps its content's height and scrolls the body as before. */
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
-  padding: var(--spacing-4);
+  padding: var(--crewlet-artifact-panel-inset);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -111,7 +126,10 @@
     inset-inline-end: 0;
     z-index: var(--z-index-overlay);
     width: min(var(--crewlet-artifact-panel-width), 100%);
-    box-shadow: var(--shadow-lg);
+    /* THE DRAWER'S LIFT, the shell's own rail drawer's: the large step falls
+       below a box and left the panel's start edge reading as a cut through
+       the artifact rather than a sheet over it. */
+    box-shadow: var(--shadow-xl);
   }
 
   .crewlet-artifact-panel[data-expanded] {