@crewlethq/ui 0.34.1 → 0.35.0

package/dist/{chunk-XTOVADJU.js → chunk-7UYONN6K.js}

@@ -1,29 +1,18 @@
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { ArtifactKindGround } from './chunk-W7QBBKUE.js';
 import { Card } from './chunk-ACA27MZH.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
-import { ArtifactKindGround } from './chunk-UDQW6UK7.js';
+import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactCard-XHRLAL7C.css';
+import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactCard-OGTMO2KI.css';
 import { useId } from 'react';
-import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph, BuildingComplexGlyph, UsersGlyph, LockGlyph } from '@crewlethq/icons/glyphs';
+import { PinGlyph, BuildingComplexGlyph, UsersGlyph, LockGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
-var KIND_GLYPHS = {
-  html: FileCodeGlyph,
-  doc: FileTextGlyph,
-  slides: PresentationGlyph,
-  design: PaletteGlyph,
-  dashboard: LayoutDashboardGlyph,
-  sheet: TableGlyph
-};
-function ArtifactKindGlyph({ kind, size = "md" }) {
-  const Drawn = KIND_GLYPHS[kind];
-  return /* @__PURE__ */ jsx(Drawn, { size });
-}
 function ArtifactPreviewGlyph({ kind }) {
   return /* @__PURE__ */ jsx(ArtifactKindGround, { kind });
 }
@@ -128,7 +117,7 @@ function ArtifactCard({
     /* @__PURE__ */ jsxs("a", { href, className: "crewlet-artifact-card__link", "aria-labelledby": titleId, "aria-describedby": factsId, children: [
       /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }),
       /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
-        /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-card__badge", `crewlet-kind--${kind}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "md" }) }),
+        /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-card__badge", `crewlet-kind--${kind}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
         /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
           /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
           pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }) }) : null
@@ -167,4 +156,4 @@ function ArtifactCardSkeleton({ className }) {
   ] });
 }
 
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactCardSkeleton, ArtifactKindGlyph, ArtifactPreviewGlyph };
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph };

package/dist/{chunk-CFAJP777.js → chunk-AXBRWRGV.js}

@@ -1,5 +1,5 @@
 import { Document } from './chunk-TYKQ33CL.js';
-import { ArtifactKindGlyph } from './chunk-XTOVADJU.js';
+import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
 import './DashboardCover-KYGYMRKW.css';

package/dist/{chunk-KK5OYNAF.js → chunk-BAKPMH3S.js}

@@ -20,12 +20,16 @@ function safeHref(raw) {
 var HEADING = /^(#{1,6})\s+(.*)$/;
 var FENCE = /^(```|~~~)\s*([A-Za-z0-9_+-]*)\s*$/;
 var RULE = /^(?:\s*(?:-{3,}|\*{3,}|_{3,})\s*)$/;
-var BULLET = /^(\s*)([-*+])\s+(.*)$/;
-var ORDERED = /^(\s*)(\d{1,9})([.)])\s+(.*)$/;
+var BULLET = /^(\s*)([-*+])(?:\s+(.*))?$/;
+var ORDERED = /^(\s*)(\d{1,9})([.)])(?:\s+(.*))?$/;
 var QUOTE = /^\s{0,3}>\s?(.*)$/;
 var TABLE_RULE = /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/;
 var CALLOUT = /^\[!(note|tip|important|warning|caution)\]\s*$/i;
-var TASK = /^\[([ xX])\]\s+(.*)$/;
+var TASK = /^\[([ xX])\](?:\s+(.*))?$/;
+function bareMarker(line) {
+  const found = BULLET.exec(line) ?? ORDERED.exec(line);
+  return found !== null && (found[found.length - 1] ?? "").trim() === "";
+}
 var FENCE_CLOSE = {
   "```": /^`{3,}[ \t]*$/,
   "~~~": /^~{3,}[ \t]*$/
@@ -140,7 +144,7 @@ function blocksOf(lines) {
       out.push({ block: { kind: "table", head, align, rows }, start, end: i });
       continue;
     }
-    if (BULLET.test(line) || ORDERED.test(line)) {
+    if ((BULLET.test(line) || ORDERED.test(line)) && !(paragraph.length > 0 && bareMarker(line))) {
       flush();
       const [list, next] = parseList(lines, i);
       out.push({ block: list, start, end: next });

package/dist/{chunk-3EB2AV3H.js → chunk-BUVCV3WI.js}

@@ -279,7 +279,7 @@ function Menu({
     onKeyDown: onTriggerKeyDown
   };
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
-    renderTrigger ? renderTrigger(shared) : trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, trailingIcon, children: trigger }),
+    renderTrigger ? renderTrigger(shared) : trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, "aria-label": label, variant: triggerVariant, size: "small", leadingIcon: icon, trailingIcon, children: trigger }),
     list && container ? createPortal(list, container) : null
   ] });
 }

package/dist/chunk-CE2THTQR.js

@@ -0,0 +1,19 @@
+import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ArtifactKindGlyph/ArtifactKindGlyph.tsx
+var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
+var KIND_GLYPHS = {
+  html: FileCodeGlyph,
+  doc: FileTextGlyph,
+  slides: PresentationGlyph,
+  design: PaletteGlyph,
+  dashboard: LayoutDashboardGlyph,
+  sheet: TableGlyph
+};
+function ArtifactKindGlyph({ kind, size = "md" }) {
+  const Drawn = KIND_GLYPHS[kind];
+  return /* @__PURE__ */ jsx(Drawn, { size });
+}
+
+export { ARTIFACT_KINDS, ArtifactKindGlyph };

package/dist/{chunk-4B6LSFDS.js → chunk-CSQTDGTS.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_NAMES } from './chunk-KK5OYNAF.js';
+import { MARKDOWN_CALLOUT_NAMES } from './chunk-BAKPMH3S.js';
 
 // src/RichEditor/types.ts
 var RICH_EDITOR_LABELS = {

package/dist/{chunk-WPX6A5BV.js → chunk-E35CMI5D.js}

@@ -5,7 +5,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-5NNSKY6A.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
-import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
+import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, FrameGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/CanvasBoard/budget.ts
@@ -65,12 +65,14 @@ var LABELS = {
   tools: "Tools",
   moveTool: "Move",
   handTool: "Hand",
+  frameTool: "Frame",
   textTool: "Text",
   stickyTool: "Sticky note"
 };
 var TOOL_CURSOR = {
   move: "pointer",
   hand: "hand",
+  frame: "crosshair",
   text: "text",
   sticky: "crosshair"
 };
@@ -228,6 +230,8 @@ function CanvasBoard({
   onNoteChange,
   onNoteRemove,
   onNoteCreate,
+  onBoardCreate,
+  onBoardRemove,
   onOpen,
   onActivate,
   selected: heldSelection,
@@ -256,9 +260,11 @@ function CanvasBoard({
   const canvas = useRef(null);
   useImperativeHandle(canvasRef, () => canvas.current, []);
   const creates = editable && onNoteCreate !== void 0;
+  const frames = editable && onBoardCreate !== void 0;
   const tools = [
     { id: "move", label: text.moveTool, icon: /* @__PURE__ */ jsx(MousePointer2Glyph, {}), shortcut: "V" },
     { id: "hand", label: text.handTool, icon: /* @__PURE__ */ jsx(HandGlyph, {}), shortcut: "H" },
+    ...frames ? [{ id: "frame", label: text.frameTool, icon: /* @__PURE__ */ jsx(FrameGlyph, {}), shortcut: "F" }] : [],
     ...creates ? [
       { id: "text", label: text.textTool, icon: /* @__PURE__ */ jsx(TypeGlyph, {}), shortcut: "T" },
       { id: "sticky", label: text.stickyTool, icon: /* @__PURE__ */ jsx(StickyNoteGlyph, {}), shortcut: "S" }
@@ -328,11 +334,14 @@ function CanvasBoard({
       if (!event.repeat) setSpaceHeld(true);
       return;
     }
-    if ((event.key === "Delete" || event.key === "Backspace") && editable && shownSelection?.kind === "note") {
-      event.preventDefault();
-      onNoteRemove?.(shownSelection.id);
-      setSelected(null);
-      return;
+    if ((event.key === "Delete" || event.key === "Backspace") && editable && shownSelection !== null) {
+      const remove = shownSelection.kind === "note" ? onNoteRemove : onBoardRemove;
+      if (remove) {
+        event.preventDefault();
+        remove(shownSelection.id);
+        setSelected(null);
+        return;
+      }
     }
     const picked = toolForKey(tools, event);
     if (picked !== void 0) {
@@ -344,6 +353,13 @@ function CanvasBoard({
     const target = event.target instanceof Element ? event.target : null;
     if (!target?.closest(".crewlet-canvas__viewport")) return;
     if (target.closest(".crewlet-canvas-board__board, .crewlet-canvas-board__note")) return;
+    if (acting === "frame" && onBoardCreate && canvas.current) {
+      const at = canvas.current.worldAt({ x: event.clientX, y: event.clientY });
+      const id = onBoardCreate({ x: Math.round(at.x), y: Math.round(at.y) });
+      setTool("move");
+      if (id !== void 0) setSelected({ kind: "board", id });
+      return;
+    }
     if ((acting === "text" || acting === "sticky") && onNoteCreate && canvas.current) {
       const at = canvas.current.worldAt({ x: event.clientX, y: event.clientY });
       const id = onNoteCreate(acting === "text" ? "title" : "sticky", {

package/dist/{chunk-EBCHVFCS.js → chunk-FJJHD73S.js}

@@ -1,7 +1,7 @@
-import { HuePicker } from './chunk-GPHWCK7M.js';
+import { HuePicker } from './chunk-SUXP4OBT.js';
 import { Popover } from './chunk-K3IJQNB7.js';
-import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-YEVG2X5R.js';
+import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-SGHIAGPR.js → chunk-HAKTRTRP.js}

@@ -1,4 +1,4 @@
-import { changeText, sheetLabels } from './chunk-VI5FWDZW.js';
+import { changeText, sheetLabels } from './chunk-OOMXLJ3S.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChangeMark-3VMTW7MT.css';

package/dist/{chunk-PLDUNXAO.js → chunk-ILDNJHRU.js}

@@ -1,4 +1,4 @@
-import { ArtifactKindGlyph } from './chunk-XTOVADJU.js';
+import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { ShieldGlyph, ActivityGlyph, GaugeGlyph, PackageGlyph, FolderGlyph, ClockGlyph, DatabaseGlyph, Settings2Glyph, BookOpenGlyph, FlagGlyph, StarGlyph, WandSparklesGlyph, BugGlyph, TargetGlyph, ImageGlyph, CodeGlyph, CoinsGlyph, UserGlyph, UsersGlyph, ChartNoAxesGanttGlyph, SquareKanbanGlyph, ListChecksGlyph, ListGlyph, GlobeGlyph, CompassGlyph, FileTextGlyph, TableGlyph, CalendarGlyph, LayoutDashboardGlyph, ChartPieGlyph, ChartColumnGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-MAD6WPER.js

@@ -0,0 +1,342 @@
+import { Select } from './chunk-BQ7AKL2N.js';
+import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue } from './chunk-OOMXLJ3S.js';
+import { HueSwatch } from './chunk-SUXP4OBT.js';
+import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
+import { FormField, Input } from './chunk-6QFAK2WV.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Menu } from './chunk-BUVCV3WI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SheetColumnEditor-BO2HKFRB.css';
+import { useId, useRef, useState, useEffect } from 'react';
+import { StarGlyph, LinkGlyph, CalendarGlyph, UserGlyph, CircleCheckGlyph, ListChecksGlyph, ListGlyph, CheckGlyph, HashGlyph, TextAlignStartGlyph, TypeGlyph, XGlyph, ChevronLeftGlyph, ChevronRightGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SheetColumnTypeGlyph({ type, size = "sm" }) {
+  const Glyph = TYPE_GLYPHS[type];
+  return /* @__PURE__ */ jsx(Glyph, { size });
+}
+var TYPE_GLYPHS = {
+  text: TypeGlyph,
+  longtext: TextAlignStartGlyph,
+  number: HashGlyph,
+  checkbox: CheckGlyph,
+  select: ListGlyph,
+  multiselect: ListChecksGlyph,
+  status: CircleCheckGlyph,
+  person: UserGlyph,
+  date: CalendarGlyph,
+  url: LinkGlyph,
+  rating: StarGlyph
+};
+var CATEGORIES = ["todo", "in_progress", "done", "blocked"];
+var SHEET_COLUMN_EDITOR_LABELS = {
+  name: "Name",
+  nameMissing: "Give the column a name.",
+  type: "Type",
+  types: SHEET_LABELS.types,
+  typeDetails: {
+    text: "One line of text",
+    longtext: "Paragraphs and notes",
+    number: "A figure, a count or an amount",
+    checkbox: "Yes or no",
+    select: "One choice from a list",
+    multiselect: "Any choices from a list",
+    status: "Where a row stands",
+    person: "A person or an agent",
+    date: "A calendar date",
+    url: "A web address",
+    rating: "A score in stars"
+  },
+  suggestion: (type) => `Looks like ${type.toLowerCase()}`,
+  useType: (type) => `Use ${type}`,
+  choices: "Choices",
+  addChoice: "Add a choice",
+  choiceName: (index) => `Choice ${index}`,
+  choiceColor: (choice) => `Color of ${choice}`,
+  noColor: "Plain",
+  choiceCategory: (choice) => `Category of ${choice}`,
+  categories: { todo: "To do", in_progress: "In progress", done: "Done", blocked: "Blocked" },
+  removeChoice: (choice) => `Remove ${choice}`,
+  noChoices: "Add at least one choice.",
+  duplicateChoice: (choice) => `There is already a choice called \u201C${choice}\u201D.`,
+  statusStarters: [
+    { label: "Not started", category: "todo" },
+    { label: "In progress", category: "in_progress" },
+    { label: "Done", category: "done" }
+  ],
+  required: "Required",
+  requiredDetail: "A row is not saved with this left empty.",
+  stars: "Stars",
+  moveBefore: "Move left",
+  moveAfter: "Move right",
+  deleteColumn: "Delete column",
+  done: "Done"
+};
+function defaultOptionId(label, taken) {
+  const base = label.normalize("NFKD").replace(/\p{M}+/gu, "").replace(/[^A-Za-z0-9_-]+/g, "_").replace(/^_+|_+$/g, "").toLowerCase().slice(0, 56) || "option";
+  if (!taken.includes(base)) return base;
+  for (let n = 2; ; n += 1) {
+    const id = `${base}_${n}`;
+    if (!taken.includes(id)) return id;
+  }
+}
+var hasChoices = (type) => type === "select" || type === "multiselect" || type === "status";
+function nextHue(options) {
+  const used = new Set(options.map((option) => optionHue(option.color)));
+  return NODE_HUES.find((hue) => !used.has(hue)) ?? NODE_HUES[options.length % NODE_HUES.length];
+}
+function SheetColumnEditor({
+  column,
+  onChange,
+  onDone,
+  onDelete,
+  deleteDisabledReason,
+  onMove,
+  canMoveBefore = true,
+  canMoveAfter = true,
+  types = SHEET_COLUMN_TYPES,
+  typeLockedReason,
+  suggestedType,
+  nameError,
+  optionId = defaultOptionId,
+  selectName = false,
+  labels: overrides,
+  className
+}) {
+  const labels = {
+    ...SHEET_COLUMN_EDITOR_LABELS,
+    ...overrides,
+    types: { ...SHEET_COLUMN_EDITOR_LABELS.types, ...overrides?.types },
+    typeDetails: { ...SHEET_COLUMN_EDITOR_LABELS.typeDetails, ...overrides?.typeDetails },
+    categories: { ...SHEET_COLUMN_EDITOR_LABELS.categories, ...overrides?.categories }
+  };
+  const id = useId();
+  const nameRef = useRef(null);
+  const addRef = useRef(null);
+  const [name, setName] = useState(column.label);
+  const [draft, setDraft] = useState("");
+  const [choiceError, setChoiceError] = useState(null);
+  const options = column.options ?? [];
+  useEffect(() => {
+    setName((now) => now.trim() === column.label ? now : column.label);
+  }, [column.label]);
+  useEffect(() => {
+    if (!selectName) return;
+    nameRef.current?.focus({ preventScroll: true });
+    nameRef.current?.select();
+  }, [selectName]);
+  const change = (patch) => onChange({ ...column, ...patch });
+  const setType = (type) => {
+    if (type === column.type) return;
+    const { options: _options, min: _min, max: _max, maxItems: _maxItems, precision: _precision, numberStyle: _style, currency: _currency, ...rest } = column;
+    const next = { ...rest, type };
+    if (hasChoices(type)) {
+      const kept = hasChoices(column.type) ? options : [];
+      next.options = type === "status" ? kept.length > 0 ? kept.map((option) => ({ ...option, category: option.category ?? "todo" })) : starters(labels.statusStarters, optionId) : kept.map(({ category: _category, ...option }) => ({ ...option, color: option.color ?? nextHue(kept) }));
+    }
+    if (type === "rating") next.max = 5;
+    if (type === "checkbox") delete next.required;
+    onChange(next);
+    if (hasChoices(type) && type !== "status") window.requestAnimationFrame(() => addRef.current?.focus({ preventScroll: true }));
+  };
+  const setOption = (index, patch) => change({ options: options.map((option, at) => at === index ? { ...option, ...patch } : option) });
+  const addChoice = () => {
+    const label = draft.trim();
+    if (label === "") return;
+    if (options.some((option) => option.label.trim().toLowerCase() === label.toLowerCase())) {
+      setChoiceError(labels.duplicateChoice(label));
+      return;
+    }
+    const added = column.type === "status" ? { id: optionId(label, options.map((option) => option.id)), label, category: "todo" } : { id: optionId(label, options.map((option) => option.id)), label, color: nextHue(options) };
+    change({ options: [...options, added] });
+    setDraft("");
+    setChoiceError(null);
+  };
+  const onNameKey = (event) => {
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      onDone?.();
+    }
+  };
+  const typeName = (type) => labels.types[type];
+  const offered = types.includes(column.type) ? types : [column.type, ...types];
+  const suggestion = suggestedType && suggestedType !== column.type && !typeLockedReason && types.includes(suggestedType) ? suggestedType : void 0;
+  const nameMissing = name.trim() === "";
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-column-editor", className), children: [
+    /* @__PURE__ */ jsx(FormField, { label: labels.name, error: nameMissing ? labels.nameMissing : nameError, children: (field) => /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: nameRef,
+        id: field.id,
+        "aria-describedby": field.describedBy,
+        error: field.invalid,
+        inputSize: "sm",
+        width: "full",
+        value: name,
+        maxLength: 120,
+        onChange: (event) => {
+          setName(event.target.value);
+          if (event.target.value.trim() !== "") change({ label: event.target.value.trim() });
+        },
+        onBlur: () => {
+          if (nameMissing) setName(column.label);
+        },
+        onKeyDown: onNameKey
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FormField, { label: labels.type, helper: typeLockedReason, children: (field) => /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: field.id,
+        "aria-describedby": field.describedBy,
+        size: "sm",
+        width: "full",
+        disabled: typeLockedReason !== void 0,
+        value: column.type,
+        onChange: (value) => {
+          if (typeof value === "string" && SHEET_COLUMN_TYPES.includes(value)) setType(value);
+        },
+        options: offered.map((type) => ({
+          value: type,
+          label: typeName(type),
+          description: labels.typeDetails[type],
+          leading: /* @__PURE__ */ jsx(SheetColumnTypeGlyph, { type }),
+          text: typeName(type)
+        }))
+      }
+    ) }),
+    suggestion ? /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-column-editor__suggestion", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-sheet-column-editor__suggestion-text", children: [
+        /* @__PURE__ */ jsx(SheetColumnTypeGlyph, { type: suggestion, size: "xs" }),
+        labels.suggestion(typeName(suggestion))
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: () => setType(suggestion), children: labels.useType(typeName(suggestion)) })
+    ] }) : null,
+    hasChoices(column.type) ? /* @__PURE__ */ jsxs(FormField, { as: "fieldset", label: labels.choices, error: options.length === 0 ? labels.noChoices : choiceError ?? void 0, children: [
+      /* @__PURE__ */ jsx("ul", { className: "crewlet-sheet-column-editor__choices", "aria-label": labels.choices, children: options.map((option, index) => /* @__PURE__ */ jsxs("li", { className: "crewlet-sheet-column-editor__choice", children: [
+        column.type === "status" ? null : /* @__PURE__ */ jsx(
+          Menu,
+          {
+            label: labels.choiceColor(option.label),
+            renderTrigger: (trigger) => /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ...trigger,
+                label: labels.choiceColor(option.label),
+                icon: /* @__PURE__ */ jsx(HueSwatch, { hue: optionHue(option.color) === "neutral" ? "none" : optionHue(option.color) }),
+                size: "sm"
+              }
+            ),
+            items: [
+              { key: "none", label: labels.noColor, icon: /* @__PURE__ */ jsx(HueSwatch, { hue: "none" }), checked: optionHue(option.color) === "neutral", onSelect: () => setOption(index, { color: "neutral" }) },
+              ...NODE_HUES.map((hue) => ({
+                key: hue,
+                label: NODE_HUE_NAMES[hue],
+                icon: /* @__PURE__ */ jsx(HueSwatch, { hue }),
+                checked: optionHue(option.color) === hue,
+                onSelect: () => setOption(index, { color: hue })
+              }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": labels.choiceName(index + 1),
+            inputSize: "sm",
+            width: "full",
+            value: option.label,
+            maxLength: 120,
+            onChange: (event) => setOption(index, { label: event.target.value }),
+            onBlur: (event) => {
+              if (event.target.value.trim() === "") setOption(index, { label: option.id });
+            }
+          }
+        ),
+        column.type === "status" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}-category-${index}`, children: labels.choiceCategory(option.label) }) }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              id: `${id}-category-${index}`,
+              size: "sm",
+              width: "auto",
+              value: option.category ?? "todo",
+              onChange: (value) => setOption(index, { category: value }),
+              options: CATEGORIES.map((category) => ({ value: category, label: labels.categories[category] }))
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: labels.removeChoice(option.label),
+            icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }),
+            size: "sm",
+            variant: "ghost-danger",
+            onClick: () => change({ options: options.filter((_, at) => at !== index) })
+          }
+        )
+      ] }, option.id)) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: addRef,
+          "aria-label": labels.addChoice,
+          placeholder: labels.addChoice,
+          inputSize: "sm",
+          width: "full",
+          value: draft,
+          maxLength: 120,
+          trailing: draft.trim() ? /* @__PURE__ */ jsx(Kbd, { subtle: true, children: "Enter" }) : void 0,
+          onChange: (event) => {
+            setDraft(event.target.value);
+            setChoiceError(null);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+              event.preventDefault();
+              addChoice();
+            }
+          }
+        }
+      )
+    ] }) : null,
+    column.type === "rating" ? /* @__PURE__ */ jsx(FormField, { label: labels.stars, children: (field) => /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: field.id,
+        size: "sm",
+        width: "auto",
+        value: String(column.max ?? 5),
+        onChange: (value) => change({ max: Number(value) }),
+        options: [3, 4, 5, 6, 7, 8, 9, 10].map((n) => ({ value: String(n), label: String(n) }))
+      }
+    ) }) : null,
+    column.type === "checkbox" ? null : /* @__PURE__ */ jsx(Checkbox, { size: "sm", label: labels.required, description: labels.requiredDetail, checked: column.required ?? false, onChange: (event) => change({ required: event.target.checked || void 0 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-column-editor__foot", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-column-editor__foot-start", children: [
+        onMove ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconButton, { label: labels.moveBefore, icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "sm" }), size: "sm", disabledReason: canMoveBefore ? void 0 : labels.moveBefore, onClick: () => onMove(-1) }),
+          /* @__PURE__ */ jsx(IconButton, { label: labels.moveAfter, icon: /* @__PURE__ */ jsx(ChevronRightGlyph, { size: "sm" }), size: "sm", disabledReason: canMoveAfter ? void 0 : labels.moveAfter, onClick: () => onMove(1) })
+        ] }) : null,
+        onDelete ? /* @__PURE__ */ jsx(IconButton, { label: labels.deleteColumn, icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }), size: "sm", variant: "ghost-danger", disabledReason: deleteDisabledReason, onClick: onDelete }) : null
+      ] }),
+      onDone ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: onDone, children: labels.done }) : null
+    ] })
+  ] });
+}
+function starters(list, optionId) {
+  const taken = [];
+  return list.map(({ label, category }) => {
+    const id = optionId(label, taken);
+    taken.push(id);
+    return { id, label, category };
+  });
+}
+
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph };

package/dist/{chunk-IUD5VA2Z.js → chunk-NKZCJRKO.js}

@@ -1,12 +1,13 @@
 import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { SegmentedControl } from './chunk-CCAXYHQS.js';
-import { ArtifactIcon } from './chunk-PLDUNXAO.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { ArtifactIcon } from './chunk-ILDNJHRU.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactBar-C462VD4C.css';
+import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactBar-HV5AT4RG.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -82,7 +83,7 @@ function ArtifactBar({
         /* @__PURE__ */ jsxs("div", { className: "crewlet-artifact-bar__lead", children: [
           start,
           back ? /* @__PURE__ */ jsx(Tooltip, { content: back.label, placement: "bottom", children: /* @__PURE__ */ jsx(IconButton, { asChild: true, label: back.label, size: "sm", variant: "ghost", title: "", children: /* @__PURE__ */ jsx("a", { href: back.href, children: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "sm" }) }) }) }) : null,
-          /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__glyph", role: "img", "aria-label": kindLabel, title: kindLabel, children: /* @__PURE__ */ jsx(ArtifactIcon, { icon: icon ?? void 0, kind, size: "sm" }) }),
+          /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-bar__glyph", `crewlet-kind--${kind}`), role: "img", "aria-label": kindLabel, title: kindLabel, children: /* @__PURE__ */ jsx(ArtifactIcon, { icon: icon ?? void 0, kind, size: "sm" }) }),
           pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__placeholder", "aria-hidden": true }) : /* @__PURE__ */ jsx(
             BarTitle,
             {
@@ -175,8 +176,12 @@ function LabelledTool({ tool, apple }) {
         leadingIcon: tool.icon,
         disabledReason: tool.disabledReason,
         "aria-keyshortcuts": shortcut,
+        "aria-label": tool.shortLabel ? tool.label : void 0,
         onClick: tool.onSelect,
-        children: tool.label
+        children: tool.shortLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__word-full", children: tool.label }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__word-short", children: tool.shortLabel })
+        ] }) : tool.label
       }
     ) });
   }