@crewlethq/ui 0.85.0 → 0.86.1

package/dist/RailList-N2ZBPRM2.css

@@ -0,0 +1,97 @@
+/*
+ * RailList: a directory in a card, a rail of groups beside the chosen
+ * group's list, folding into a picker where the card is narrow
+ * (RailList.tsx).
+ *
+ * SIZED BY ITS OWN WIDTH, NOT THE WINDOW'S, because the same directory stands
+ * in a page and in a sheet: the root is an inline-size container, and under
+ * the rail's room (44rem) the rail goes and the picker shows. Both are always
+ * rendered and the stylesheet decides, so the fold costs no measurement and
+ * never draws the wrong one first.
+ */
+.crewlet-rail-list {
+  container: crewlet-rail-list / inline-size;
+  min-width: 0;
+}
+
+/* The bar across the card's top: the caller's search and chips, and the folded picker. */
+.crewlet-rail-list__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/* Wide, the rail is the choice: the picker and a bar that holds nothing else are not drawn. */
+.crewlet-rail-list__picker,
+.crewlet-rail-list__bar--picker-only {
+  display: none;
+}
+
+/* The rail at a fixed width (13rem by default), the list taking the rest. */
+.crewlet-rail-list__body {
+  display: grid;
+  grid-template-columns: var(--crewlet-rail-list-rail, 13rem) minmax(0, 1fr);
+  min-width: 0;
+}
+
+/* The rail on a hairline of its own, its note a step under its rows. */
+.crewlet-rail-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+/* The note starts on the rows' words, inside the dense rail's own inset. */
+.crewlet-rail-list__note {
+  margin: 0;
+  padding-inline: var(--spacing-2);
+}
+
+.crewlet-rail-list__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* What the chosen group holds, over its list on a hairline, at the list's own inset. */
+.crewlet-rail-list__about {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/*
+ * A GRID AT THE LIST'S TOP TAKES NO RULE OF ITS OWN. A grid in a card draws
+ * one rule above its head to part it from the card's head (DataGrid.css);
+ * here the bar's hairline, the description's or the card's own edge is
+ * already that rule, and the grid's drew a second line under it.
+ */
+.crewlet-rail-list__list > .crewlet-data-grid:first-child,
+.crewlet-rail-list__about + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* Under the rail's room the list takes the card, and the picker takes the rail's place in the bar. */
+@container crewlet-rail-list (width < 44rem) {
+  .crewlet-rail-list__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-rail-list__rail {
+    display: none;
+  }
+
+  .crewlet-rail-list__picker {
+    display: inline-flex;
+  }
+
+  .crewlet-rail-list__bar--picker-only {
+    display: flex;
+  }
+}

package/dist/RelatedRow/index.js

@@ -1,5 +1,5 @@
-export { RelatedRow } from '../chunk-EAHEJNVJ.js';
-import '../chunk-QP2P6GDQ.js';
+export { RelatedRow } from '../chunk-CL3FWLDO.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-ZAC7SKUN.js';
 import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';

package/dist/SetupWizard/index.js

@@ -1,6 +1,6 @@
-export { SetupWizard } from '../chunk-3BVNNQZY.js';
-import '../chunk-FPDIHEM4.js';
+export { SetupWizard } from '../chunk-WRZPO4YL.js';
 import '../chunk-TMML7BHT.js';
+import '../chunk-FPDIHEM4.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-NAHA62WD.js';

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Y7PPKQFQ.js';
 import '../chunk-3IWZVEXA.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-YTLWOHOY.js';

package/dist/TableCells/TableCells.d.ts

@@ -151,3 +151,63 @@ export type TableTextCellProps = {
  * would draw the column's answer over the row's.
  */
 export declare function TableTextCell({ children, icon, mark }: TableTextCellProps): import("react").JSX.Element;
+/** Which of a two-line cell's lines is a literal, set in the mono face. */
+export type TableTwoLineCellMono = 'value' | 'detail' | 'both';
+export type TableTwoLineCellProps = {
+    /** The value, in the cell's own register: a name, a key, a short state. */
+    value: ReactNode;
+    /**
+     * The quieter line under it, a caption in the secondary ink: where it runs,
+     * the id it resolves to, when it last answered. Left out, the cell is the
+     * value's one line, at the same place a row of two-line cells puts it.
+     */
+    detail?: ReactNode;
+    /**
+     * Which line is a literal (a command, an id, a key), set in the mono face:
+     * in the sans face `--` and `=` read as prose.
+     */
+    mono?: TableTwoLineCellMono | undefined;
+    /**
+     * The whole cell's hover text, where the two lines are not the whole story
+     * (a model's CLI, key and id in one line). Given, neither line adds its own.
+     */
+    title?: string | undefined;
+    /**
+     * Whether a cut line carries its whole words as its title (`Text`'s
+     * `titleWhenCut`). On by default. Off where something else already shows
+     * them, a `Tooltip` around the cell.
+     */
+    titleWhenCut?: boolean | undefined;
+} & ({
+    /**
+     * A mark every row of the column wears, centred against the two lines.
+     * The header carries the meaning, so it is drawn as decoration.
+     */
+    icon?: ReactNode;
+    mark?: never;
+} | {
+    icon?: never;
+    /**
+     * A mark that varies per row and states a fact of its own (a vendor, the
+     * CLI a model runs on), centred against the two lines. It brings its own
+     * accessible name and is read.
+     */
+    mark: ReactNode;
+});
+/**
+ * A value over a quieter line, each cut on one line: a name over where it
+ * runs, a key over the id it resolves to, a short state over when it began.
+ *
+ * TWO LINES IN TWO REGISTERS, ALWAYS THE SAME TWO, so every two-line cell in a
+ * table reads alike: the value in the cell's own register (it inherits the
+ * grid's size and ink), the line under it a caption in the secondary ink. A
+ * row of them is as tall as two lines whatever they hold, because each line
+ * is cut with an ellipsis rather than wrapped, and its whole words are on its
+ * title while it is cut (`Text`'s `truncate`).
+ *
+ * A MARK STANDS CENTRED AGAINST BOTH LINES, the way a vendor's mark stands
+ * beside a service's name and host. In a grid's stacked rows the lines, not
+ * the mark, give the row its baseline, so a column's label stands on the
+ * value's line (DataGrid.css).
+ */
+export declare function TableTwoLineCell({ value, detail, mono, title, titleWhenCut, icon, mark, }: TableTwoLineCellProps): import("react").JSX.Element;

package/dist/TableCells/index.d.ts

@@ -1,3 +1,3 @@
 import './TableCells.css';
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, } from './TableCells.js';
-export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, } from './TableCells.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell, } from './TableCells.js';
+export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, TableTwoLineCellMono, TableTwoLineCellProps, } from './TableCells.js';

package/dist/TableCells/index.js

@@ -1,4 +1,5 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-AFLS26AC.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell } from '../chunk-3CALM534.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-QF5UNP4T.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EJNJMHQG.js';

package/dist/{TableCells-TKSNLRK3.css → TableCells-ZALZLLEF.css}

@@ -112,3 +112,31 @@
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
+
+/*
+ * A VALUE OVER A QUIETER LINE (TableTwoLineCell), each line its own block cut
+ * on one line. A column of boxes rather than two runs of text, so neither
+ * line takes the line box of the words around it, and the cell is exactly
+ * the two lines tall. `min-width: 0` lets the column shrink inside a grid's
+ * cell, which is what cuts the lines rather than pushing the column wider.
+ */
+.crewlet-table-cell__lines {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark is centred against both lines, as an entity's badge is against its name. */
+.crewlet-table-cell__two-line {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark keeps its size: the lines give way to the column, never the mark. */
+.crewlet-table-cell__two-line > :first-child {
+  flex: none;
+}

package/dist/Text/Text.d.ts

@@ -57,10 +57,22 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
      * it on every push, because the proportional digits have different widths.
      */
     numeric?: boolean | undefined;
-    /** One line, cut with an ellipsis. */
+    /**
+     * One line, cut with an ellipsis: a name in a narrow column, a caption
+     * under it. While the words are cut, the pointer's title carries them whole
+     * (see `titleWhenCut`).
+     */
     truncate?: boolean | undefined;
-    /** Two or three lines, then an ellipsis. */
+    /** Two or three lines, then an ellipsis, with the whole words on the title while they are cut. */
     clamp?: 2 | 3 | undefined;
+    /**
+     * Whether words cut by `truncate` or `clamp` carry their whole text as the
+     * element's title while they are cut. On by default. Turn it off where
+     * something else already shows the whole words, a `Tooltip` around the
+     * text or a title on the element around it, so the reader is not shown
+     * them twice. A `title` the caller passes always wins.
+     */
+    titleWhenCut?: boolean | undefined;
     /** Bounds the line length, for anything a reader reads rather than scans. */
     measure?: TextMeasure | undefined;
 }
@@ -77,5 +89,15 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
  * `variant` sets the size, the weight, the tracking and the ink together,
  * because those four move as one. `tone` overrides only the ink, for the case
  * where the same register carries a quieter fact.
+ *
+ * CUT WORDS ARE STILL READABLE WHOLE. A line cut with an ellipsis hid the
+ * end of a name from a sighted reader, who had no way to read it short of
+ * widening the window, while a screen reader read it whole (the cut is
+ * paint, not content). So a cut Text puts its whole words on its title. It
+ * is MEASURED AT THE MOMENT THE POINTER ARRIVES, which is the only moment a
+ * title is read: the words and the column are what they are then, so a title
+ * never goes stale after a resize or a new value, and a table of a thousand
+ * cut cells costs nothing until one is hovered. Words that fit carry no
+ * title, since a tooltip that repeats what is on the screen is noise.
  */
-export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, className, children, ...rest }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, titleWhenCut, className, children, ...rest }: TextProps): import("react").JSX.Element;

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-export { Text } from '../chunk-QP2P6GDQ.js';
+export { Text } from '../chunk-O5CEG7TQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-AFLS26AC.js → chunk-3CALM534.js}

@@ -1,3 +1,4 @@
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Link } from './chunk-QF5UNP4T.js';
 import { Tag } from './chunk-LBGKLYBY.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
@@ -5,7 +6,7 @@ import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { Avatar } from './chunk-XZY6S3UC.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TableCells-TKSNLRK3.css';
+import './TableCells-ZALZLLEF.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function TableKeyCell({ value, text, href, emptyLabel = "Not set" }) {
@@ -84,5 +85,38 @@ function TableTextCell({ children, icon, mark }) {
     /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children })
   ] });
 }
+function TableTwoLineCell({
+  value,
+  detail,
+  mono,
+  title,
+  titleWhenCut = true,
+  icon,
+  mark
+}) {
+  const ownTitles = titleWhenCut && title === void 0;
+  const hasDetail = detail !== void 0 && detail !== null && detail !== false && detail !== "";
+  const leading = mark ?? (icon !== void 0 && icon !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__icon", "aria-hidden": "true", children: icon }) : null);
+  const leads = leading !== null && leading !== void 0 && leading !== false;
+  const lines = /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__lines", title: leads ? void 0 : title, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "inherit", truncate: true, mono: mono === "value" || mono === "both", titleWhenCut: ownTitles, children: value }),
+    hasDetail ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "caption",
+        tone: "secondary",
+        truncate: true,
+        mono: mono === "detail" || mono === "both",
+        titleWhenCut: ownTitles,
+        children: detail
+      }
+    ) : null
+  ] });
+  if (!leads) return lines;
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__two-line", title, children: [
+    leading,
+    lines
+  ] });
+}
 
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell };
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell };

package/dist/{chunk-EAHEJNVJ.js → chunk-CL3FWLDO.js}

@@ -1,4 +1,4 @@
-import { Text } from './chunk-QP2P6GDQ.js';
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Inline, Stack, Spacer } from './chunk-ZAC7SKUN.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-QP2P6GDQ.js → chunk-O5CEG7TQ.js}

@@ -11,14 +11,22 @@ function Text({
   truncate = false,
   clamp,
   measure,
+  titleWhenCut = true,
   className,
   children,
   ...rest
 }) {
+  const cuts = truncate || clamp !== void 0;
+  const measures = cuts && titleWhenCut && rest.title === void 0;
+  const { onMouseEnter } = rest;
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...rest,
+      onMouseEnter: measures ? (event) => {
+        titleIfCut(event.currentTarget, truncate ? "inline" : "block");
+        onMouseEnter?.(event);
+      } : onMouseEnter,
       className: cx(
         "crewlet-text",
         `crewlet-text--${variant}`,
@@ -34,5 +42,11 @@ function Text({
     }
   );
 }
+function titleIfCut(element, axis) {
+  const cut = axis === "inline" ? element.scrollWidth > element.clientWidth : element.scrollHeight > element.clientHeight;
+  const words = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (cut && words !== "") element.setAttribute("title", words);
+  else element.removeAttribute("title");
+}
 
 export { Text };

package/dist/{chunk-SNJM5KPV.js → chunk-P33VNG7Q.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './ListDetail-Q7SFVKSO.css';
+import './ListDetail-WXBCLONL.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function ListDetail({ list, children, showing = "list", className, ...rest }) {

package/dist/chunk-REWKR3S4.js

@@ -0,0 +1,73 @@
+import { SidebarNav, NavItem } from './chunk-BRK3HXGZ.js';
+import { Select } from './chunk-3IWZVEXA.js';
+import { Text } from './chunk-O5CEG7TQ.js';
+import { Card } from './chunk-U2IQNDDR.js';
+import './RailList-N2ZBPRM2.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RAIL_LIST_LABELS = {
+  counted: "items",
+  option: (label, count) => count === void 0 ? label : `${label} (${count.toLocaleString()})`
+};
+var elsewhere = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+function RailList({
+  label,
+  items,
+  value,
+  onChange,
+  toolbar,
+  note,
+  children,
+  renderLink,
+  labels: overrides,
+  className
+}) {
+  const words = overrides ? { ...RAIL_LIST_LABELS, ...overrides } : RAIL_LIST_LABELS;
+  const chosen = items.find((item) => item.key === value);
+  const about = chosen?.description;
+  const picker = /* @__PURE__ */ jsx("span", { className: "crewlet-rail-list__picker", children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ariaLabel: label,
+      size: "sm",
+      width: "auto",
+      value,
+      options: items.map((item) => ({ value: item.key, label: words.option(item.label, item.count), text: item.label })),
+      onChange: (next) => onChange(String(next))
+    }
+  ) });
+  const bar = toolbar === void 0 || toolbar === null ? /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar crewlet-rail-list__bar--picker-only", children: picker }) : /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar", children: typeof toolbar === "function" ? toolbar(picker) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    picker,
+    toolbar
+  ] }) });
+  return /* @__PURE__ */ jsx(Card, { padding: "none", className, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list", children: [
+    bar,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__rail", children: [
+        /* @__PURE__ */ jsx(SidebarNav, { label, dense: true, children: items.map((item) => /* @__PURE__ */ jsx(
+          NavItem,
+          {
+            label: item.label,
+            href: item.href,
+            current: item.key === value,
+            count: item.count === void 0 ? void 0 : { value: item.count.toLocaleString(), label: words.counted },
+            renderLink,
+            onClick: (event) => {
+              if (item.href !== void 0 && elsewhere(event)) return;
+              event.preventDefault();
+              onChange(item.key);
+            }
+          },
+          item.key
+        )) }),
+        note !== void 0 && note !== null && note !== false ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "tertiary", className: "crewlet-rail-list__note", children: note }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__list", children: [
+        about !== void 0 && about !== null && about !== false && about !== "" ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "secondary", className: "crewlet-rail-list__about", children: about }) : null,
+        children
+      ] })
+    ] })
+  ] }) });
+}
+
+export { RAIL_LIST_LABELS, RailList };

package/dist/chunk-TRZS7DLB.js

@@ -0,0 +1,159 @@
+import { FormField, Label, Input } from './chunk-O7N6W52M.js';
+import { Button } from './chunk-DGXZ635L.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { announce } from './chunk-2G355KDJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './KeyValueRows-US5KW7JK.css';
+import { useId, useRef, useEffect } from 'react';
+import { TrashGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function keyValueRowsLabels(keyLabel, valueLabel = "Value") {
+  const item = keyLabel.toLocaleLowerCase();
+  return {
+    key: (position) => `${keyLabel} ${position}`,
+    value: (key, position) => key ? `${valueLabel} for ${key}` : `${valueLabel} for ${item} ${position}`,
+    remove: (key, position) => key ? `Remove ${key}` : `Remove ${item} ${position}`,
+    add: `Add ${item}`,
+    removed: (key, position) => key ? `Removed ${key}` : `Removed ${item} ${position}`
+  };
+}
+function KeyValueRows(props) {
+  const {
+    label,
+    hideLabel = false,
+    keyLabel,
+    valueLabel = "Value",
+    value: rows,
+    onChange,
+    keyPlaceholder,
+    valuePlaceholder,
+    secret = false,
+    keyReadOnly,
+    keyError,
+    valueError,
+    empty,
+    helper,
+    error,
+    disabled = false,
+    labels: overrides,
+    className,
+    createRow
+  } = props;
+  const words = { ...keyValueRowsLabels(keyLabel, valueLabel), ...overrides };
+  const base = useId();
+  const minted = useRef(0);
+  const keyFields = useRef(/* @__PURE__ */ new Map());
+  const addButton = useRef(null);
+  const focusNext = useRef(null);
+  useEffect(() => {
+    const want = focusNext.current;
+    if (want === null) return;
+    focusNext.current = null;
+    if (want === "add") addButton.current?.focus();
+    else keyFields.current.get(want.id)?.focus();
+  });
+  const blank = () => createRow ? createRow() : { id: `${base}-${minted.current += 1}`, key: "", value: "" };
+  const edit = (id, change) => onChange(rows.map((row) => row.id === id ? { ...row, ...change } : row));
+  const add = () => {
+    const row = blank();
+    focusNext.current = { id: row.id };
+    onChange([...rows, row]);
+  };
+  const remove = (index) => {
+    const gone = rows[index];
+    const next = rows.filter((_, i) => i !== index);
+    const neighbour = next[index] ?? next[index - 1];
+    focusNext.current = neighbour ? { id: neighbour.id } : "add";
+    onChange(next);
+    announce(words.removed(gone.key.trim(), index + 1));
+  };
+  const placeholderFor = (row) => typeof valuePlaceholder === "function" ? valuePlaceholder(row) : valuePlaceholder;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      as: "fieldset",
+      label,
+      hideLabel,
+      helper,
+      error,
+      className: cx("crewlet-key-value-rows", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__body", children: [
+        rows.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__table", children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__head", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(Label, { as: "span", children: keyLabel }),
+            /* @__PURE__ */ jsx(Label, { as: "span", children: valueLabel })
+          ] }),
+          rows.map((row, index) => {
+            const position = index + 1;
+            const key = row.key.trim();
+            return /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__row", children: [
+              /* @__PURE__ */ jsx(FormField, { label: words.key(position), hideLabel: true, error: keyError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: (element) => {
+                    if (element) keyFields.current.set(row.id, element);
+                    else keyFields.current.delete(row.id);
+                  },
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  appearance: "reference",
+                  value: row.key,
+                  placeholder: keyPlaceholder,
+                  readOnly: keyReadOnly?.(row) ?? false,
+                  disabled,
+                  autoComplete: "off",
+                  spellCheck: false,
+                  onChange: (event) => edit(row.id, { key: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormField, { label: words.value(key, position), hideLabel: true, error: valueError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  type: secret ? "password" : "text",
+                  autoComplete: secret ? "new-password" : "off",
+                  spellCheck: false,
+                  value: row.value,
+                  placeholder: placeholderFor(row),
+                  disabled,
+                  onChange: (event) => edit(row.id, { value: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost-danger",
+                  label: words.remove(key, position),
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  disabled,
+                  onClick: () => remove(index)
+                }
+              )
+            ] }, row.id);
+          })
+        ] }) : empty !== void 0 && empty !== null && empty !== false ? /* @__PURE__ */ jsx("p", { className: "crewlet-key-value-rows__empty", children: empty }) : null,
+        /* @__PURE__ */ jsx("div", { className: "crewlet-key-value-rows__add", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: addButton,
+            variant: "ghost",
+            size: "small",
+            flush: true,
+            leadingIcon: /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }),
+            disabled,
+            onClick: add,
+            children: words.add
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+export { KeyValueRows, keyValueRowsLabels };