@crewlethq/ui 0.34.2 → 0.35.0

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';

package/dist/chunk-PI7HKLIT.js

@@ -0,0 +1,245 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SourceEditor-G2C3STPX.css';
+import { forwardRef, useRef, useId, useState, useImperativeHandle, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SOURCE_EDITOR_KEYS = "Tab indents and Shift+Tab outdents. Press Escape, then Tab, to move to the next control.";
+function lineStart(text, line) {
+  let at = 0;
+  for (let n = 1; n < line; n++) {
+    const next = text.indexOf("\n", at);
+    if (next < 0) return text.length;
+    at = next + 1;
+  }
+  return at;
+}
+function insert(field, text, start, end) {
+  field.setSelectionRange(start, end);
+  const done = typeof document.execCommand === "function" && document.execCommand("insertText", false, text);
+  if (!done) field.setRangeText(text, start, end, "end");
+  return field.value;
+}
+var SourceEditor = forwardRef(
+  function SourceEditor2({
+    value,
+    onChange,
+    label,
+    marks = [],
+    onSubmit,
+    indent = 2,
+    fill = false,
+    rows = 12,
+    className,
+    fieldClassName,
+    onKeyDown,
+    onScroll,
+    "aria-describedby": describedBy,
+    ...rest
+  }, ref) {
+    const field = useRef(null);
+    const tabLeaves = useRef(false);
+    const keysId = useId();
+    const [scrollTop, setScrollTop] = useState(0);
+    const lines = countLines(value);
+    const tone = toneByLine(marks, lines);
+    useImperativeHandle(
+      ref,
+      () => ({
+        revealLine(line) {
+          const el = field.current;
+          if (!el) return;
+          const at = lineStart(el.value, Math.max(1, line));
+          el.focus();
+          el.setSelectionRange(at, at);
+          const height = parseFloat(getComputedStyle(el).lineHeight) || 20;
+          const top = (Math.max(1, line) - 1) * height;
+          if (top < el.scrollTop || top + height > el.scrollTop + el.clientHeight) {
+            el.scrollTop = Math.max(0, top - el.clientHeight / 3);
+          }
+        },
+        focus() {
+          field.current?.focus();
+        },
+        get element() {
+          return field.current;
+        }
+      }),
+      []
+    );
+    useLayoutEffect(() => {
+      const el = field.current;
+      if (el && el.scrollTop !== scrollTop) setScrollTop(el.scrollTop);
+    }, [value, scrollTop]);
+    const keyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const el = event.currentTarget;
+      if (event.key === "Escape") {
+        tabLeaves.current = true;
+        return;
+      }
+      if (event.key === "Tab") {
+        if (tabLeaves.current || event.altKey || event.metaKey || event.ctrlKey) {
+          tabLeaves.current = false;
+          return;
+        }
+        event.preventDefault();
+        onChange(
+          event.shiftKey ? outdent(el, indent) : indentLines(el, indent)
+        );
+        return;
+      }
+      tabLeaves.current = false;
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        if (!onSubmit) return;
+        event.preventDefault();
+        onSubmit();
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey && !event.altKey) {
+        const before = el.value.slice(0, el.selectionStart);
+        const lead = /^[\t ]*/.exec(before.slice(before.lastIndexOf("\n") + 1))?.[0] ?? "";
+        if (!lead) return;
+        event.preventDefault();
+        onChange(insert(el, `
+${lead}`, el.selectionStart, el.selectionEnd));
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("crewlet-source-editor", fill && "is-fill", className),
+        style: {
+          "--crewlet-source-digits": String(String(lines).length)
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-source-editor__gutter", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "crewlet-source-editor__numbers",
+              style: { transform: `translateY(${-scrollTop}px)` },
+              children: Array.from({ length: lines }, (_, i) => {
+                const line = i + 1;
+                const mark = tone.get(line);
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "crewlet-source-editor__number",
+                      mark && `is-${mark.tone}`
+                    ),
+                    title: mark?.message,
+                    children: line
+                  },
+                  line
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-source-editor__body", children: [
+            /* @__PURE__ */ jsx("div", { className: "crewlet-source-editor__marks", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${-scrollTop}px)` }, children: [...tone.entries()].map(([line, mark]) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(
+                  "crewlet-source-editor__mark",
+                  `is-${mark.tone}`
+                ),
+                style: {
+                  "--crewlet-source-line": String(line - 1)
+                }
+              },
+              line
+            )) }) }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: field,
+                className: cx("crewlet-source-editor__field", fieldClassName),
+                "aria-label": label,
+                "aria-describedby": cx(keysId, describedBy) || void 0,
+                "aria-invalid": [...tone.values()].some((m) => m.tone === "danger") || void 0,
+                value,
+                rows,
+                wrap: "off",
+                spellCheck: false,
+                autoCapitalize: "off",
+                autoComplete: "off",
+                autoCorrect: "off",
+                onChange: (event) => onChange(event.target.value),
+                onKeyDown: keyDown,
+                onBlur: () => {
+                  tabLeaves.current = false;
+                },
+                onScroll: (event) => {
+                  onScroll?.(event);
+                  setScrollTop(event.currentTarget.scrollTop);
+                },
+                ...rest
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { id: keysId, children: SOURCE_EDITOR_KEYS })
+        ]
+      }
+    );
+  }
+);
+function countLines(text) {
+  let n = 1;
+  for (let i = text.indexOf("\n"); i >= 0; i = text.indexOf("\n", i + 1)) n++;
+  return n;
+}
+function toneByLine(marks, lines) {
+  const out = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    if (!Number.isInteger(mark.line) || mark.line < 1 || mark.line > lines)
+      continue;
+    const held = out.get(mark.line);
+    if (!held || held.tone === "warning" && mark.tone === "danger")
+      out.set(mark.line, mark);
+  }
+  return out;
+}
+function selectedLines(el) {
+  const text = el.value;
+  const from = text.lastIndexOf("\n", el.selectionStart - 1) + 1;
+  const endAt = el.selectionEnd > el.selectionStart && text[el.selectionEnd - 1] === "\n" ? el.selectionEnd - 1 : el.selectionEnd;
+  const next = text.indexOf("\n", endAt);
+  return { from, to: next < 0 ? text.length : next };
+}
+function indentLines(el, size) {
+  const pad = " ".repeat(size);
+  if (el.selectionStart === el.selectionEnd) {
+    const column = el.selectionStart - (el.value.lastIndexOf("\n", el.selectionStart - 1) + 1);
+    return insert(
+      el,
+      " ".repeat(size - column % size),
+      el.selectionStart,
+      el.selectionEnd
+    );
+  }
+  const { from, to } = selectedLines(el);
+  const block = el.value.slice(from, to).replace(/^/gm, pad);
+  const value = insert(el, block, from, to);
+  el.setSelectionRange(from, from + block.length);
+  return value;
+}
+function outdent(el, size) {
+  const { from, to } = selectedLines(el);
+  const strip = new RegExp(`^(?: {1,${size}}|\\t)`, "gm");
+  const original = el.value.slice(from, to);
+  const block = original.replace(strip, "");
+  if (block === original) return el.value;
+  const caret = el.selectionStart === el.selectionEnd;
+  const at = el.selectionStart;
+  const removed = (/^(?: +|\t)/.exec(original)?.[0].length ?? 0) - (/^(?: +|\t)/.exec(block)?.[0].length ?? 0);
+  const value = insert(el, block, from, to);
+  if (caret) {
+    const back = Math.max(from, at - removed);
+    el.setSelectionRange(back, back);
+  } else el.setSelectionRange(from, from + block.length);
+  return value;
+}
+
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart };

package/dist/{chunk-YZFLH463.js → chunk-QEFHYUCY.js}

@@ -1,6 +1,6 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Input } from './chunk-6QFAK2WV.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-NPQWKZTB.js → chunk-QFNWMWWY.js}

@@ -1,5 +1,5 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DataTable } from './chunk-UXXJDIYE.js';
+import { DataTable } from './chunk-22CQQDFW.js';
 import { DateTimePicker } from './chunk-73A7D5CE.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
@@ -8,7 +8,7 @@ import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.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 { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-C7DKX453.js → chunk-QH6VYJ3X.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-KK5OYNAF.js';
+import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-BAKPMH3S.js';
 import { Schema, Fragment } from 'prosemirror-model';
 
 function headingTag(level) {

package/dist/{chunk-XV32RKQZ.js → chunk-QIXMNOBD.js}

@@ -1,18 +1,24 @@
 import { SlideStage } from './chunk-LV4APO72.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
+import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideFilmstrip-5U6Z55GS.css';
-import { useRef, useLayoutEffect } from 'react';
-import { EyeOffGlyph, GripVerticalGlyph } from '@crewlethq/icons/glyphs';
+import './SlideFilmstrip-4ITZLMO4.css';
+import { useRef, useLayoutEffect, useState } from 'react';
+import { EyeOffGlyph, GripVerticalGlyph, EllipsisGlyph, CopyGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LABELS = {
   list: "Slides",
   slide: (position, title) => `Slide ${position}, ${title}`,
   hidden: "Hidden when presenting",
-  untitled: "Untitled"
+  untitled: "Untitled",
+  actions: (position, title) => `Actions for slide ${position}, ${title}`,
+  duplicate: "Duplicate slide",
+  delete: "Delete slide"
 };
+var DELETE_KEY = () => isApplePlatform() ? "Backspace" : "Delete";
 var STEP_KEYS = {
   vertical: { back: "ArrowUp", forward: "ArrowDown" },
   horizontal: { back: "ArrowLeft", forward: "ArrowRight" }
@@ -24,6 +30,10 @@ function SlideFilmstrip({
   renderSlide,
   onReorder,
   orientation = "vertical",
+  onDuplicate,
+  onDelete,
+  actions,
+  footer,
   className,
   labels
 }) {
@@ -53,7 +63,43 @@ function SlideFilmstrip({
     onSelect(id);
     options.current.get(id)?.focus();
   };
+  const [menuFor, setMenuFor] = useState(null);
+  const menuOf = (id) => [
+    ...onDuplicate ? [{
+      key: "duplicate",
+      label: text.duplicate,
+      icon: /* @__PURE__ */ jsx(CopyGlyph, { size: "sm" }),
+      onSelect: () => onDuplicate(id),
+      hint: /* @__PURE__ */ jsx(Kbd, { subtle: true, keys: ["Mod", "D"] })
+    }] : [],
+    ...onDelete ? [{
+      key: "delete",
+      label: text.delete,
+      icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+      onSelect: () => onDelete(id),
+      danger: true,
+      hint: /* @__PURE__ */ jsx(Kbd, { subtle: true, keys: [DELETE_KEY()] })
+    }] : [],
+    ...actions?.(id) ?? []
+  ];
   const onKeyDown = (event) => {
+    const mod = event.metaKey || event.ctrlKey;
+    if (onDuplicate && mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "d") {
+      event.preventDefault();
+      onDuplicate(selected);
+      return;
+    }
+    if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+      if (menuOf(selected).length === 0) return;
+      event.preventDefault();
+      setMenuFor(selected);
+      return;
+    }
+    if (onDelete && !mod && !event.altKey && (event.key === "Delete" || event.key === "Backspace")) {
+      event.preventDefault();
+      onDelete(selected);
+      return;
+    }
     const at = order.indexOf(selected);
     const step = STEP_KEYS[orientation];
     const to = {
@@ -82,6 +128,7 @@ function SlideFilmstrip({
             children: order.map((id, i) => {
               const slide = byId.get(id);
               const isSelected = id === selected;
+              const menu = menuOf(id);
               return /* @__PURE__ */ jsxs(
                 "li",
                 {
@@ -111,14 +158,28 @@ function SlideFilmstrip({
                         ]
                       }
                     ),
-                    onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null
+                    onReorder || menu.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-filmstrip__controls", children: [
+                      onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null,
+                      menu.length > 0 ? /* @__PURE__ */ jsx(
+                        Menu,
+                        {
+                          label: text.actions(i + 1, titleOf(id)),
+                          icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "sm" }),
+                          triggerTabIndex: -1,
+                          items: menu,
+                          open: menuFor === id,
+                          onOpenChange: (open) => setMenuFor(open ? id : null)
+                        }
+                      ) : null
+                    ] }) : null
                   ]
                 },
                 id
               );
             })
           }
-        )
+        ),
+        footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-slide-filmstrip__footer", children: footer }) : null
       ]
     }
   );

package/dist/{chunk-GPHWCK7M.js → chunk-SUXP4OBT.js}

@@ -3,10 +3,13 @@ import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 
+function HueSwatch({ hue, className }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("crewlet-hue-picker__swatch", `crewlet-hue-picker__swatch--${hue}`, className) });
+}
 var optionsFor = (disabled) => NODE_HUES.map((hue) => ({
   value: hue,
   label: NODE_HUE_NAMES[hue],
-  icon: /* @__PURE__ */ jsx("span", { className: `crewlet-hue-picker__swatch crewlet-hue-picker__swatch--${hue}` }),
+  icon: /* @__PURE__ */ jsx(HueSwatch, { hue }),
   disabled
 }));
 var ENABLED = optionsFor(false);
@@ -18,7 +21,7 @@ function HuePicker(props) {
     {
       value: "none",
       label: props.none,
-      icon: /* @__PURE__ */ jsx("span", { className: "crewlet-hue-picker__swatch crewlet-hue-picker__swatch--none" }),
+      icon: /* @__PURE__ */ jsx(HueSwatch, { hue: "none" }),
       disabled
     },
     ...hues
@@ -42,4 +45,4 @@ function HuePicker(props) {
   );
 }
 
-export { HuePicker };
+export { HuePicker, HueSwatch };

package/dist/{chunk-TRQCHF2F.js → chunk-SWD4QBL6.js}

@@ -1,4 +1,4 @@
-import { readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
+import { readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
 
 // src/RichEditor/roundtrip.ts
 function roundTripMarkdown(markdown) {