@crewlethq/ui 0.34.2 → 0.35.1

package/dist/chunk-J6YZ4IYV.js

@@ -0,0 +1,341 @@
+import { Select } from './chunk-BQ7AKL2N.js';
+import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.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 next = retypeColumn(column, 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-VI5FWDZW.js → chunk-LFSIKGRQ.js}

@@ -17,6 +17,18 @@ var SHEET_COLUMN_TYPES = [
 ];
 var isSheetColumnType = (value) => typeof value === "string" && SHEET_COLUMN_TYPES.includes(value);
 
+// src/SheetModel/columns.ts
+var capsLength = (type) => type === "text" || type === "longtext";
+function retypeColumn(column, type) {
+  const next = { field: column.field, label: column.label, type };
+  if (column.width !== void 0) next.width = column.width;
+  if (column.frozen !== void 0) next.frozen = column.frozen;
+  if (column.readOnly !== void 0) next.readOnly = column.readOnly;
+  if (column.required !== void 0) next.required = column.required;
+  if (column.maxLength !== void 0 && capsLength(column.type) && capsLength(type)) next.maxLength = column.maxLength;
+  return next;
+}
+
 // src/SheetModel/labels.ts
 var TYPE_NAMES = {
   text: "Text",
@@ -83,7 +95,10 @@ var SHEET_LABELS = {
   noOptions: "No matching options",
   clear: "Clear",
   keyboardHelp: "Arrow keys move between cells. Enter or F2 edits a cell, Escape cancels, and typing replaces its value. Space toggles a checkbox. Control or Command with C and V copies and pastes. Control or Command with Alt and H opens the history of a cell.",
-  sortBy: (column) => `Sort by ${column}`
+  sortBy: (column) => `Sort by ${column}`,
+  columnSettings: (column) => `Column settings for ${column}`,
+  columnSettingsHelp: "Enter on a column header opens the settings of that column.",
+  addColumn: "Add column"
 };
 function sheetLabels(overrides) {
   return { ...SHEET_LABELS, ...overrides, types: { ...SHEET_LABELS.types, ...overrides?.types } };
@@ -883,4 +898,4 @@ function cellSpeech(column, row, context) {
   return spokenText(column, normalizeValue(column, row.values[column.field]), context);
 }
 
-export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows };
+export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, retypeColumn, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows };

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

@@ -2,11 +2,12 @@ import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { ArtifactIcon } from './chunk-ILDNJHRU.js';
-import { Menu } from './chunk-3EB2AV3H.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
       }
     ) });
   }

package/dist/chunk-NTB5LRRD.js

@@ -0,0 +1,52 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FindingList-PMYA2R6Q.css';
+import { CircleAlertGlyph, TriangleAlertGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TONE_LABELS = {
+  danger: "Problem",
+  warning: "Advice"
+};
+function FindingList({
+  findings,
+  label,
+  toneLabels,
+  className
+}) {
+  const words = { ...TONE_LABELS, ...toneLabels };
+  const ordered = [
+    ...findings.filter((f) => f.tone === "danger"),
+    ...findings.filter((f) => f.tone === "warning")
+  ];
+  return /* @__PURE__ */ jsx("ul", { className: cx("crewlet-finding-list", className), "aria-label": label, children: ordered.map((f) => {
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx("crewlet-finding-list__glyph", `is-${f.tone}`),
+          "aria-hidden": "true",
+          children: f.tone === "danger" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "sm" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-finding-list__text", children: [
+        f.location ? /* @__PURE__ */ jsx("span", { className: "crewlet-finding-list__location", children: f.location }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-finding-list__message", children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: `${words[f.tone]}: ` }),
+          f.message
+        ] })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsx("li", { className: "crewlet-finding-list__item", children: f.onSelect ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-finding-list__row",
+        onClick: f.onSelect,
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "crewlet-finding-list__row", children: body }) }, f.key);
+  }) });
+}
+
+export { FindingList };

package/dist/{chunk-UOR7TOAU.js → chunk-OSFA5ROT.js}

@@ -22,6 +22,91 @@ function text(value) {
 function quote(written) {
   return /[",\r\n]/.test(written) ? `"${written.replace(/"/g, '""')}"` : written;
 }
+var DELIMITERS = [",", ";", "	"];
+function parseCsv(text2, options = {}) {
+  const source = text2.charCodeAt(0) === 65279 ? text2.slice(1) : text2;
+  const delimiter = options.delimiter ?? sniffDelimiter(source);
+  const maxRows = options.maxRows ?? Number.POSITIVE_INFINITY;
+  const rows = [];
+  let record = [];
+  let value = "";
+  let quoted = false;
+  let wasQuoted = false;
+  let line = 1;
+  let quoteLine = 1;
+  let i = 0;
+  const endField = () => {
+    record.push(undefused(value));
+    value = "";
+    wasQuoted = false;
+  };
+  const endRecord = () => {
+    endField();
+    rows.push(record);
+    record = [];
+    return rows.length <= maxRows;
+  };
+  while (i < source.length) {
+    const ch = source[i];
+    if (quoted) {
+      if (ch === '"') {
+        if (source[i + 1] === '"') {
+          value += '"';
+          i += 2;
+          continue;
+        }
+        quoted = false;
+        i += 1;
+        continue;
+      }
+      if (ch === "\n" || ch === "\r" && source[i + 1] !== "\n") line += 1;
+      value += ch;
+      i += 1;
+      continue;
+    }
+    if (ch === '"' && value === "" && !wasQuoted) {
+      quoted = true;
+      wasQuoted = true;
+      quoteLine = line;
+      i += 1;
+      continue;
+    }
+    if (ch === delimiter) {
+      endField();
+      i += 1;
+      continue;
+    }
+    if (ch === "\r" || ch === "\n") {
+      const step = ch === "\r" && source[i + 1] === "\n" ? 2 : 1;
+      if (!endRecord()) return { ok: false, problem: "too_many_rows", line };
+      line += 1;
+      i += step;
+      continue;
+    }
+    value += ch;
+    i += 1;
+  }
+  if (quoted) return { ok: false, problem: "unterminated_quote", line: quoteLine };
+  if (value !== "" || wasQuoted || record.length > 0) {
+    if (!endRecord()) return { ok: false, problem: "too_many_rows", line };
+  }
+  return { ok: true, rows, delimiter };
+}
+function sniffDelimiter(source) {
+  const counts = new Map(DELIMITERS.map((d) => [d, 0]));
+  let quoted = false;
+  for (const ch of source) {
+    if (ch === '"') quoted = !quoted;
+    else if (!quoted && (ch === "\n" || ch === "\r")) break;
+    else if (!quoted && counts.has(ch)) counts.set(ch, counts.get(ch) + 1);
+  }
+  let best = ",";
+  for (const d of DELIMITERS) if (counts.get(d) > counts.get(best)) best = d;
+  return best;
+}
+function undefused(field2) {
+  return field2.length > 1 && field2[0] === "'" && FORMULA_LEAD.test(field2.slice(1)) ? field2.slice(1) : field2;
+}
 
 // src/utils/elementToPng.ts
 var ElementToPngError = class extends Error {
@@ -188,4 +273,4 @@ function toBlob(canvas) {
   });
 }
 
-export { ElementToPngError, elementToPng, serializeElement, toCsv };
+export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv };

package/dist/{chunk-T46NR3WP.js → chunk-PGZ2R3ON.js}

@@ -1,5 +1,5 @@
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';