@crewlethq/ui 0.38.0 → 0.39.0

package/dist/Modal/index.js

@@ -1,4 +1,4 @@
-export { ConfirmModal, Modal } from '../chunk-SVGARBDY.js';
+export { ConfirmModal, Modal } from '../chunk-IAGYPTEJ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/{Modal-7MWRCWAI.css → Modal-TOEWHDCQ.css}

@@ -379,6 +379,11 @@
  */
 .crewlet-modal__title {
   margin: 0;
+  /* The text face at its own tracking, never the display face every heading
+     element takes from the baseline: the title is an h1 for the outline, at
+     the dialog's own register. */
+  font-family: var(--font-family-sans);
+  letter-spacing: var(--font-letter-spacing-normal);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-tight);

package/dist/ObjectHeader/index.js

@@ -1,4 +1,4 @@
-export { FactLine, ObjectHeader, SetByLine } from '../chunk-VGE3G3T4.js';
+export { FactLine, ObjectHeader, SetByLine } from '../chunk-ODOJJGXH.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ObjectHeader-D7GU7QNI.css → ObjectHeader-ZOS22FKX.css}

@@ -1,5 +1,10 @@
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
+ *
+ * SENTENCE CASE, both the eyebrow and the fact labels, as `StatCard`'s label
+ * is: the uppercase, tracked-open micro-caps are a table's column head, and
+ * over an object's name ("UNIT", then TYPE, LEAD and SEATS under it) they put
+ * a heading on every fact and read as a form rather than a record.
  */
 .crewlet-object-header {
   display: flex;
@@ -18,9 +23,7 @@
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 
@@ -35,8 +38,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  letter-spacing: normal;
-  text-transform: none;
 }
 
 .crewlet-object-header__id--mono {
@@ -138,9 +139,7 @@
 }
 
 .crewlet-fact-line__label {
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 

package/dist/SettingsTable/SettingsTable.d.ts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** The words the three columns are named by, for assistive technology and the optional header row. */
+export interface SettingsTableColumns {
+    setting?: string | undefined;
+    value?: string | undefined;
+    source?: string | undefined;
+}
+export interface SettingsTableProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Draws the column names as a header row. Off by default: a page that
+     * stacks one table per group (a card each) would repeat the same three
+     * words over every card. The names are always exposed to assistive
+     * technology, drawn or not.
+     */
+    header?: boolean | undefined;
+    /** The column names. Defaults to Setting, Value and Source. */
+    columns?: SettingsTableColumns | undefined;
+    children?: ReactNode;
+}
+/**
+ * A read-only table of settings: what each is called, the value in force and
+ * where that value comes from.
+ *
+ * ONE COLUMN GRID FOR EVERY TABLE ON A PAGE. The tracks are fractions of the
+ * table's own width (`--crewlet-settings-table-columns`), never the width of
+ * the longest label, so a page that stacks a table per group in cards of one
+ * width puts every value and every source on one vertical line down the page.
+ * A term column sized to its own longest term started the values at a
+ * different place in every card, and a fixed one left them floating a third
+ * of the way across a wide card with the rest of the row empty.
+ *
+ * THE SOURCE IS QUIET UNLESS IT IS NEWS. A value that is the default says so
+ * in the tertiary ink, as a word rather than a tag: a tag on every row is
+ * noise that teaches a reader to skip the column. A value that differs from
+ * its default (`changed`) carries a mark before its source, which is the one
+ * row in the table a reader scanning it came to find.
+ *
+ * A TABLE, BECAUSE IT IS ONE. Every row carries the same three fields, so it
+ * is announced as a table with its column names, and each setting's name is
+ * the row's header. The roles are written out rather than taken from table
+ * elements because the row folds into two lines on a narrow table, and a
+ * table element that changes its display loses its semantics in some
+ * browsers.
+ */
+export declare function SettingsTable({ header, columns, className, children, ...rest }: SettingsTableProps): import("react").JSX.Element;
+export declare namespace SettingsTable {
+    var Row: typeof SettingsTableRow;
+}
+export interface SettingsTableRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the setting is called, in a reader's words. */
+    label: ReactNode;
+    /**
+     * The setting's address in the document it is written in
+     * (`turn_engine.max_iterations`), drawn quietly under its name in the
+     * monospace face. For the reader who will go and change it there.
+     */
+    settingKey?: string | undefined;
+    /** The value in force, in its own unit. Drawn in tabular figures. */
+    children?: ReactNode;
+    /** Where the value comes from: "Default", "Set in the company document". */
+    source?: ReactNode;
+    /** The value differs from its default: the source carries a mark. */
+    changed?: boolean | undefined;
+}
+/** One setting: its name (and key), its value and its source. */
+export declare function SettingsTableRow({ label, settingKey, source, changed, className, children, ...rest }: SettingsTableRowProps): import("react").JSX.Element;

package/dist/SettingsTable/index.d.ts

@@ -0,0 +1,3 @@
+import './SettingsTable.css';
+export { SettingsTable, SettingsTableRow } from './SettingsTable.js';
+export type { SettingsTableColumns, SettingsTableProps, SettingsTableRowProps } from './SettingsTable.js';

package/dist/SettingsTable/index.js

@@ -0,0 +1,3 @@
+export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SettingsTable-6DUFAFXG.css

@@ -0,0 +1,160 @@
+/*
+ * SettingsTable: a read-only table of settings, one row each, on one grid.
+ *
+ * THE TRACKS ARE FRACTIONS OF THE TABLE, so every table of one width shares
+ * them: a page that stacks a table per group puts each column on one line
+ * down the page with nothing to coordinate. `--crewlet-settings-table-columns`
+ * is inherited, so a page that wants other proportions sets it once.
+ *
+ * Each row is its own grid on those tracks rather than a subgrid of the
+ * table's, because the tracks are fractions: one row's long label can never
+ * move another row's value, which is what a content-sized track would do.
+ */
+
+.crewlet-settings-table {
+  container: crewlet-settings-table / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  /* The flush-panel recipe, standing on its own: the card's surface, its
+     hairline and its corner. Inside a card it gives them up (below). */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * A TABLE THAT IS A CARD'S CONTENT IS THAT CARD'S TABLE. It draws no edge or
+ * corner of its own inside one, so a card never holds a box inside a box; its
+ * rows' hairlines run to the card's edges under the card's own head rule.
+ */
+.crewlet-card > .crewlet-settings-table,
+.crewlet-card__body > .crewlet-settings-table {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+.crewlet-settings-table__row {
+  display: grid;
+  grid-template-columns: var(
+    --crewlet-settings-table-columns,
+    minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr)
+  );
+  column-gap: var(--spacing-6);
+  /* ONE BASELINE PER ROW: the name, the value and the source sit on the
+     first line's baseline, whatever the name's key adds under it. */
+  align-items: baseline;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.crewlet-settings-table__body > .crewlet-settings-table__row + .crewlet-settings-table__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * The column names, in the micro-label register a table's header takes
+ * across the system, on the panel's own ground. Hidden by default (see the
+ * component): still the table's column headers for assistive technology.
+ */
+.crewlet-settings-table__head .crewlet-settings-table__row {
+  min-height: 0;
+  padding-block: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-settings-table__name {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__head--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__setting {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-settings-table__label {
+  color: var(--color-text-primary);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE KEY IS FOR THE READER WHO WILL GO AND CHANGE IT, so it is there and
+ * quiet: the monospace face at the smallest step, in the tertiary ink, and
+ * free to break anywhere, since a dotted path is one word to a line breaker.
+ */
+.crewlet-settings-table__key {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+/* Tabular figures, so a column of numbers reads down its digits. */
+.crewlet-settings-table__value {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-settings-table__source {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* A value that differs from its default is the row a reader came to find. */
+.crewlet-settings-table__source--changed {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-settings-table__source--changed .crewlet-status-dot {
+  align-self: center;
+}
+
+/*
+ * NARROW: the name takes the row's first line, and the value and its source
+ * share the second. Three columns at this width leave a name column a word
+ * wide, which wraps every name into a stack of single words.
+ */
+@container crewlet-settings-table (width < 32rem) {
+  .crewlet-settings-table__row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-settings-table__setting {
+    grid-column: 1 / -1;
+  }
+
+  .crewlet-settings-table__source {
+    justify-self: end;
+  }
+}

package/dist/ShareDialog/index.js

@@ -1,9 +1,9 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-UWRBD2YO.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-KNHUBHFX.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.js';

package/dist/SheetColumnEditor/index.js

@@ -1,4 +1,4 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-4L2BWSHR.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-F3WZ5AKM.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
@@ -6,12 +6,12 @@ import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-F4LPQA4E.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-AXS6MBNH.js';
 import '../chunk-2QZ2VPHR.js';
 import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-AXS6MBNH.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-XO7PUL4F.js';
+export { StatCard } from '../chunk-YPTTSJPM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-4T7TMWMN.css → StatCard-HAA3F5GX.css}

@@ -186,6 +186,12 @@
  * tiles where only some carry one still stands at one height: its leading is
  * set here and the reserve is exactly one line of it, where a reserve in `em`
  * was a line shorter than the one a sub actually draws.
+ *
+ * IT WRAPS, balanced, rather than ending in an ellipsis. The line qualifies
+ * the number, so its end is the half that says what the number means, and
+ * `nowrap` cut it: "6 seats idle and waiting for ..." on a phone, a caption
+ * mid-clause at 1440. A grid of tiles (a StatGroup, or a caller's own) gives
+ * every tile in a row one height, so a second line costs no alignment.
  */
 .crewlet-statcard__sub {
   min-height: calc(1em * var(--font-line-height-body));
@@ -194,9 +200,8 @@
   /* The quiet step, with the label. The line qualifies the number rather than
      being a second one. */
   color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 /*

package/dist/StatGroup/index.js

@@ -1,2 +1,2 @@
-export { StatGroup } from '../chunk-BT5H2THK.js';
+export { StatGroup } from '../chunk-OUD75UB2.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatGroup-DOFHX5QJ.css → StatGroup-ZMW7VQWP.css}

@@ -75,6 +75,33 @@
   border-radius: var(--radius-none);
 }
 
+/*
+ * A ROW OF TILES SHARES ITS LINES. A tile stacks its label, its number and its
+ * sub in a column of its own, so a label that wrapped pushed its own number
+ * down and no other: beside a node's peek at 1440, "Behind on config" broke
+ * over two lines and its figure sat 18px below the other three. Inside a row
+ * each tile is a SUBGRID over the row's lines, one per line the tile renders
+ * (StatCard always renders three, an absent sub included), so a line is as
+ * tall as the tallest of it across the row and every figure starts together.
+ *
+ * A LABEL SITS ON ITS NUMBER: where one label in the row takes two lines, the
+ * others end at the foot of the label row, one gap above their figure, rather
+ * than floating at its top a line away from what they name.
+ *
+ * These were the engine dashboard's own rules over this component, held there
+ * with a note that the kit should carry them; they are the kit's now, with the
+ * sub's wrap (see StatCard), which the engine applied to every tile.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+}
+
+.crewlet-stat-group > .crewlet-statcard > .crewlet-statcard__label {
+  align-self: end;
+}
+
 /*
  * Each tile spans its share of the twelve tracks: the row's `columns`, set on
  * it as `--crewlet-stat-group-cols`, a row.

package/dist/Switcher/index.js

@@ -1,5 +1,5 @@
-export { Switcher } from '../chunk-6NNY5WBF.js';
-import '../chunk-SVGARBDY.js';
+export { Switcher } from '../chunk-JKAGN4V4.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';

package/dist/TileGrid/TileGrid.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** The most tracks a grid draws; it folds to fewer by its own width. */
+export type TileGridColumns = 2 | 3 | 4;
+export interface TileGridProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The tracks at full width. `3` (the default) folds straight to one, never
+     * to two, so a set of three or six tiles never leaves a lone tile on a row
+     * of its own; `4` folds to two and then one; `2` folds to one.
+     */
+    columns?: TileGridColumns | undefined;
+    /** The element the tiles stand in: a `ul` for tiles that are `li`s. */
+    as?: 'div' | 'ul' | 'ol' | undefined;
+    children?: ReactNode;
+}
+/**
+ * Tiles on a fixed number of tracks that folds by the grid's own width.
+ *
+ * GRIDS ON ONE PAGE LINE UP. Two sections of tiles (a catalogue's built-in
+ * services over its third-party apps) each laid out on a track count of its
+ * own put their tile edges in different places, and an `auto-fill` grid left
+ * a hole at the end of a short section. A tile grid's tracks are a count, the
+ * same in every grid given the same count and the same width, so every tile
+ * edge on the page lines up.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's: a grid beside a rail and a
+ * settings column is as narrow as a phone's at a wide window. The outer
+ * element is the size container, and the track list inside it is the grid,
+ * because a container query styles what is inside the container and never
+ * the container itself. `className` goes on that outer box, where a page
+ * places the grid; every other attribute (an `id`, an `aria-label`) goes on
+ * the track, which is the list a `ul` grid is.
+ */
+export declare function TileGrid({ columns, as: Track, className, children, ...rest }: TileGridProps): import("react").JSX.Element;

package/dist/TileGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './TileGrid.css';
+export { TileGrid } from './TileGrid.js';
+export type { TileGridColumns, TileGridProps } from './TileGrid.js';

package/dist/TileGrid/index.js

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

package/dist/TileGrid-I6LNYD2H.css

@@ -0,0 +1,52 @@
+/*
+ * TileGrid: tiles on a fixed track count that folds by the grid's own width.
+ *
+ * Equal tracks, so two grids of one count and one width put every tile edge
+ * on the same line; the tiles in a row stretch to the tallest of them. The
+ * folds are steps of the grid's own width (see the component): three tracks
+ * go straight to one, so a set of three never strands a tile.
+ */
+
+.crewlet-tile-grid {
+  container: crewlet-tile-grid / inline-size;
+  min-width: 0;
+}
+
+.crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 3;
+
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-tile-grid-tracks), minmax(0, 1fr));
+  gap: var(--spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-tile-grid[data-columns='2'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 2;
+}
+
+.crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 4;
+}
+
+/* Four tracks fold to two where a tile would be narrower than its content. */
+@container crewlet-tile-grid (width < 56rem) {
+  .crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 2;
+  }
+}
+
+/* Three fold to one: two up would leave the third tile alone on a row. */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}

package/dist/{chunk-XBURIXHO.js → chunk-3TXY3PJZ.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-3TFDQLW3.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
-import { Composer } from './chunk-ETVEGR2Y.js';
+import { Composer } from './chunk-ISA2O2BK.js';
 import { ArtifactPanel } from './chunk-Y5BD4MTE.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-4RKTZSEW.js

@@ -0,0 +1,64 @@
+import { StatusDot } from './chunk-WIATRXEJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SettingsTable-6DUFAFXG.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var COLUMNS = { setting: "Setting", value: "Value", source: "Source" };
+function SettingsTable({ header = false, columns, className, children, ...rest }) {
+  const names = { ...COLUMNS, ...columns };
+  return /* @__PURE__ */ jsxs("div", { ...rest, role: "table", className: cx("crewlet-settings-table", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: cx("crewlet-settings-table__head", !header && "crewlet-settings-table__head--hidden"),
+        children: /* @__PURE__ */ jsxs("div", { role: "row", className: "crewlet-settings-table__row", children: [
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "crewlet-settings-table__name", children: names.setting }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "crewlet-settings-table__name", children: names.value }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", className: "crewlet-settings-table__name", children: names.source })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-settings-table__body", children })
+  ] });
+}
+function SettingsTableRow({
+  label,
+  settingKey,
+  source,
+  changed = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: "row",
+      "data-changed": changed ? "" : void 0,
+      className: cx("crewlet-settings-table__row", className),
+      children: [
+        /* @__PURE__ */ jsxs("span", { role: "rowheader", className: "crewlet-settings-table__setting", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-settings-table__label", children: label }),
+          settingKey === void 0 ? null : /* @__PURE__ */ jsx("code", { className: "crewlet-settings-table__key", children: settingKey })
+        ] }),
+        /* @__PURE__ */ jsx("span", { role: "cell", className: "crewlet-settings-table__value", children }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "cell",
+            className: cx("crewlet-settings-table__source", changed && "crewlet-settings-table__source--changed"),
+            children: [
+              changed ? /* @__PURE__ */ jsx(StatusDot, { tone: "brand" }) : null,
+              source
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+SettingsTable.Row = SettingsTableRow;
+
+export { SettingsTable, SettingsTableRow };

package/dist/{chunk-A23KDROH.js → chunk-FXBGEANQ.js}

@@ -1,5 +1,5 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-SVGARBDY.js';
+import { Modal } from './chunk-IAGYPTEJ.js';
 import { Checkbox } from './chunk-AXS6MBNH.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';

package/dist/{chunk-IPWU6ERC.js → chunk-HQJ24WPM.js}

@@ -58,8 +58,10 @@ function DatasetSource({
   const summary = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__head", children: [
       /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-dataset-source__title", children: title }),
-      " ",
-      /* @__PURE__ */ jsx(Tag, { size: "xs", appearance: "outline", className: "crewlet-dataset-source__kind", children: text.kinds[kind] })
+      kind === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx(Tag, { size: "xs", appearance: "outline", className: "crewlet-dataset-source__kind", children: text.kinds[kind] })
+      ] })
     ] }),
     " ",
     /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__definition", children: definition }),

package/dist/{chunk-SVGARBDY.js → chunk-IAGYPTEJ.js}

@@ -4,7 +4,7 @@ import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.j
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-7MWRCWAI.css';
+import './Modal-TOEWHDCQ.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
@@ -124,7 +124,7 @@ function ModalFrame({
           given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
           /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
             given(title) ? /* @__PURE__ */ jsx(
-              "p",
+              "h1",
               {
                 className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
                 id: titleId,