@crewlethq/ui 0.18.0 → 0.19.0

package/dist/chunk-DEJHAOC5.js

@@ -0,0 +1,279 @@
+import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeFrame-3PLZAG22.css';
+import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
+import { TrashGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function gridOf(node) {
+  const grid = node.parentElement;
+  const own = node.getBoundingClientRect();
+  if (!grid) return { columns: 12, step: own.width, gap: 0, left: 0, width: own.width };
+  const style = getComputedStyle(grid);
+  const tracks = style.gridTemplateColumns.split(" ").map(parseFloat).filter((n) => !Number.isNaN(n));
+  const gap = parseFloat(style.columnGap) || 0;
+  const track = tracks[0] ?? grid.clientWidth / 12;
+  const box = grid.getBoundingClientRect();
+  const padLeft = parseFloat(style.paddingLeft) || 0;
+  const padRight = parseFloat(style.paddingRight) || 0;
+  return {
+    columns: tracks.length || 12,
+    step: track + gap,
+    gap,
+    left: box.left + padLeft - own.left,
+    width: box.width - padLeft - padRight
+  };
+}
+function useGridResize(frame, { name, size, rowHeight, minColumns = 1, maxColumns, minRows = 2, maxRows = 60, vertical = true, onResize }) {
+  const [live, setLive] = useState(null);
+  const [guides, setGuides] = useState(null);
+  const drag = useRef(null);
+  const say = useCallback(
+    (next, columns) => {
+      const height = next.rows === null ? "its height fits its content" : `${next.rows * rowHeight} pixels tall`;
+      announce(`${name}: ${next.columns} of ${columns} columns wide, ${height}.`);
+    },
+    [name, rowHeight]
+  );
+  const cancel = useCallback(() => {
+    drag.current = null;
+    setLive(null);
+    setGuides(null);
+  }, []);
+  useEffect(() => {
+    if (!live) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [live, cancel]);
+  const sizeAt = (d, x, y) => {
+    const hi = Math.min(maxColumns ?? d.columns, d.columns);
+    const columns = clamp(Math.round((d.width + (x - d.x) + d.gap) / d.step), Math.min(minColumns, hi), hi);
+    const dy = y - d.y;
+    const rows = !vertical ? size.rows : size.rows === null && Math.abs(dy) < rowHeight / 2 ? null : clamp(Math.round((d.height + dy) / rowHeight), minRows, maxRows);
+    return { columns, rows };
+  };
+  const handleProps = {
+    "aria-label": `Resize ${name}`,
+    "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Enter",
+    onPointerDown: (event) => {
+      if (event.button !== 0 || !frame.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      try {
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+      } catch {
+      }
+      const rect = frame.current.getBoundingClientRect();
+      const grid = gridOf(frame.current);
+      drag.current = {
+        pointer: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        width: rect.width,
+        height: rect.height,
+        step: grid.step,
+        gap: grid.gap,
+        columns: grid.columns
+      };
+      setGuides({ left: grid.left, width: grid.width, columns: grid.columns, gap: grid.gap });
+      setLive(size);
+    },
+    onPointerMove: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      setLive((was) => was && was.columns === next.columns && was.rows === next.rows ? was : next);
+    },
+    onPointerUp: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      drag.current = null;
+      setLive(null);
+      setGuides(null);
+      if (next.columns !== size.columns || next.rows !== size.rows) {
+        onResize(next);
+        say(next, d.columns);
+      }
+    },
+    onPointerCancel: cancel,
+    onKeyDown: (event) => {
+      if (!frame.current || event.altKey || event.ctrlKey || event.metaKey) return;
+      const grid = gridOf(frame.current);
+      const hi = Math.min(maxColumns ?? grid.columns, grid.columns);
+      const rowsNow = size.rows ?? Math.round(frame.current.getBoundingClientRect().height / rowHeight);
+      let next = null;
+      if (event.key === "ArrowLeft") next = { ...size, columns: clamp(size.columns - 1, Math.min(minColumns, hi), hi) };
+      if (event.key === "ArrowRight") next = { ...size, columns: clamp(size.columns + 1, Math.min(minColumns, hi), hi) };
+      if (vertical && event.key === "ArrowUp") next = { ...size, rows: clamp(rowsNow - 1, minRows, maxRows) };
+      if (vertical && event.key === "ArrowDown") next = { ...size, rows: clamp(rowsNow + 1, minRows, maxRows) };
+      if (vertical && event.key === "Enter") next = { ...size, rows: null };
+      if (!next) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (next.columns === size.columns && next.rows === size.rows) return;
+      onResize(next);
+      say(next, grid.columns);
+    },
+    onDoubleClick: () => {
+      if (!vertical || size.rows === null) return;
+      const next = { ...size, rows: null };
+      onResize(next);
+      say(next, frame.current ? gridOf(frame.current).columns : 12);
+    }
+  };
+  return { live, guides, handleProps };
+}
+var FIELDS = 'input, textarea, select, [contenteditable="true"]';
+function assign(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var ArrangeFrame = forwardRef(function ArrangeFrame2({
+  name,
+  editing,
+  columns,
+  rows = null,
+  rowHeight = 24,
+  handle,
+  resize,
+  actions,
+  onRemove,
+  fixed,
+  container = false,
+  bare = false,
+  selected = false,
+  fresh,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const node = useRef(null);
+  const setNode = useCallback(
+    (el) => {
+      node.current = el;
+      assign(ref, el);
+    },
+    [ref]
+  );
+  const vertical = resize?.vertical !== false;
+  const { live, guides, handleProps: resizeProps } = useGridResize(node, {
+    name,
+    size: { columns, rows },
+    rowHeight,
+    minColumns: resize?.minColumns,
+    maxColumns: resize?.maxColumns,
+    minRows: resize?.minRows,
+    maxRows: resize?.maxRows,
+    vertical,
+    onResize: (next) => resize?.onResize(next)
+  });
+  const shown = live ?? { columns, rows };
+  const placed = {
+    ...style,
+    gridColumn: `span ${shown.columns}`,
+    ...shown.rows !== null ? { height: `${shown.rows * rowHeight}px` } : {}
+  };
+  const onField = useRef(false);
+  const surface = editing && handle ? {
+    draggable: true,
+    tabIndex: 0,
+    role: "group",
+    "aria-label": name,
+    "aria-describedby": handle["aria-describedby"],
+    onPointerDownCapture: (event) => {
+      onField.current = event.target.closest(FIELDS) !== null;
+    },
+    onDragStart: (event) => {
+      if (onField.current) event.preventDefault();
+      else handle.onDragStart(event);
+    },
+    onDragEnd: handle.onDragEnd,
+    // The block's own keys only: arrows typed in a group's name move the caret.
+    onKeyDown: (event) => {
+      if (event.target === event.currentTarget) handle.onKeyDown(event);
+    }
+  } : {};
+  const resizeName = vertical ? `Resize ${name}` : `Change the width of ${name}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNode,
+      className: cx(
+        "crewlet-arrange-frame",
+        editing && "is-editing",
+        container && "is-container",
+        bare && "is-bare",
+        editing && selected && "is-selected",
+        live && "is-resizing",
+        shown.rows !== null && "is-fixed-height",
+        fresh && "is-fresh",
+        className
+      ),
+      style: placed,
+      "data-columns": shown.columns,
+      ...surface,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-arrange-frame__content", inert: editing && !container || void 0, children }),
+        editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-arrange-frame__bar", role: "group", "aria-label": `Tools for ${name}`, children: [
+            actions,
+            onRemove || fixed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__sep", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost-danger",
+                  label: `Remove ${name}`,
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  ...fixed ? { disabledReason: fixed } : {},
+                  onClick: () => onRemove?.()
+                }
+              )
+            ] }) : null
+          ] }),
+          resize ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("crewlet-arrange-frame__resize", vertical ? "is-corner" : "is-edge"),
+              title: vertical ? `${resizeName}. Double click to fit the height to its content.` : resizeName,
+              draggable: false,
+              ...resizeProps,
+              "aria-label": resizeName,
+              children: /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__grip", "aria-hidden": "true" })
+            }
+          ) : null,
+          guides ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "crewlet-arrange-frame__guides",
+              "aria-hidden": "true",
+              style: {
+                left: `${guides.left}px`,
+                width: `${guides.width}px`,
+                gridTemplateColumns: `repeat(${guides.columns}, minmax(0, 1fr))`,
+                columnGap: `${guides.gap}px`
+              },
+              children: Array.from({ length: guides.columns }, (_, i) => /* @__PURE__ */ jsx("span", {}, i))
+            }
+          ) : null,
+          live ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-frame__size", "aria-hidden": "true", children: [
+            `${live.columns} ${live.columns === 1 ? "column" : "columns"}`,
+            vertical ? ` \xB7 ${live.rows === null ? "Height fits content" : `${live.rows * rowHeight} px tall`}` : ""
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+
+export { ArrangeFrame, useGridResize };

package/dist/{chunk-ERV5BUS3.js → chunk-EIGEIT4O.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Input } from './chunk-4GB57WIT.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Input } from './chunk-Q55TXPA3.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-BZ5HHATU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/chunk-FFMCMSJB.js

@@ -0,0 +1 @@
+import './HuePicker-PAIGH6LR.css';

package/dist/{chunk-LFZ45HV2.js → chunk-G3EEUNZQ.js}

@@ -1,5 +1,5 @@
 import { EmptyState } from './chunk-RA2ULG6H.js';
-import { Card } from './chunk-EG6NYWVK.js';
+import { Card } from './chunk-YZCJ63JF.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AccessDeniedCard-WXM5DBDZ.css';
 import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-2YR5ZPQ3.js → chunk-HTCJSUIZ.js}

@@ -1,12 +1,12 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Modal } from './chunk-2TZATTIU.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ShareDialog-YZ4F37MW.css';
 import { useState, useId } from 'react';

package/dist/{chunk-75CLJNDQ.js → chunk-I6NZKJGK.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-4GB57WIT.js';
+import { FormField } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-KT7RS6QQ.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';

package/dist/chunk-IXJHTFXG.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './IconTile-4GNWTLAW.css';
+import { jsx } from 'react/jsx-runtime';
+
+function IconTile({ children, hue, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      ...rest,
+      className: cx("crewlet-icon-tile", `crewlet-icon-tile--${size}`, hue && `crewlet-icon-tile--${hue}`, className),
+      children
+    }
+  );
+}
+
+export { IconTile };

package/dist/{chunk-3UAA4IWJ.js → chunk-JEDWC3GI.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-ZFH7H7GS.js';
+import { Combobox } from './chunk-LOLELDBW.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/{chunk-QVAFL2LE.js → chunk-JXRI5YD2.js}

@@ -1,13 +1,13 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-HVG6O62W.css';
+import './StatGroup-PADTJCUQ.css';
 import { jsx } from 'react/jsx-runtime';
 
-function StatGroup({ columns = 4, className, children, ...rest }) {
+function StatGroup({ columns = 4, flush = false, className, children, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
-      className: cx("crewlet-stat-group", className),
+      className: cx("crewlet-stat-group", flush && "crewlet-stat-group--flush", className),
       style: { "--crewlet-stat-group-cols": columns, ...rest.style },
       children
     }

package/dist/{chunk-ZFH7H7GS.js → chunk-LOLELDBW.js}

@@ -1,5 +1,5 @@
 import { useListbox } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-4GB57WIT.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-KVT3TJVG.js → chunk-OIMAK5AE.js}

@@ -1,16 +1,16 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-76FXDZAZ.js';
-import { Menu } from './chunk-NS7BVLL3.js';
-import { DateTimePicker } from './chunk-5NVKTB6E.js';
+import { DataTable } from './chunk-AJESMWJS.js';
+import { Menu } from './chunk-JULMZNGT.js';
+import { DateTimePicker } from './chunk-L4H7SSWF.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-4GB57WIT.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';

package/dist/chunk-QO7QEQKV.js

@@ -0,0 +1,24 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeBoard-MQE35P6Z.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ArrangeBoard({
+  editing,
+  columns = 12,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-arrange-board", editing && "is-editing", className),
+      style: { ...style, "--crewlet-arrange-board-columns": columns },
+      ...rest,
+      children
+    }
+  );
+}
+
+export { ArrangeBoard };

package/dist/{chunk-A7EBCHEG.js → chunk-RT323I4I.js}

@@ -1,4 +1,4 @@
-import { ConfirmModal } from './chunk-2TZATTIU.js';
+import { ConfirmModal } from './chunk-7IJARUIF.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import './LinkInterstitial-ET4MSVSV.css';

package/dist/{chunk-BOW2VUCH.js → chunk-T7ICFXEC.js}

@@ -1,4 +1,4 @@
-import { HuePicker } from './chunk-PA4CYTBY.js';
+import { HuePicker } from './chunk-XU4ZUGLE.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-5PSXBL73.js';

package/dist/{chunk-2OLCUNG7.js → chunk-TBIZSQHB.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-AMH67MLM.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-TXAFKH2A.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-4U3GQ7D2.js → chunk-TODND5AD.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { AvatarStack } from './chunk-UAN5NE7M.js';
-import { Card } from './chunk-EG6NYWVK.js';
+import { Card } from './chunk-YZCJ63JF.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCard-EXVAEBV6.css';

package/dist/{chunk-IFKBDRNJ.js → chunk-UXELEORU.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-2TZATTIU.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-4GB57WIT.js';
-import { isComposing } from './chunk-R25RGPUB.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CommandPalette-HBTNKHZQ.css';

package/dist/{chunk-6NIMZ5XC.js → chunk-VJLYGPPE.js}

@@ -1,5 +1,5 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Textarea } from './chunk-4GB57WIT.js';
+import { Textarea } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-ABGJIAIR.css';
 import { forwardRef } from 'react';

package/dist/{chunk-7QFAORCY.js → chunk-WHZFDS62.js}

@@ -1,5 +1,5 @@
 import { BrandLockup } from './chunk-7KBNFFM3.js';
-import { Card } from './chunk-EG6NYWVK.js';
+import { Card } from './chunk-YZCJ63JF.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AuthLayout-ODHBUPHQ.css';
 import { useId } from 'react';