@crewlethq/ui 0.45.0 → 0.46.0

package/dist/chunk-7P336RA5.js

@@ -0,0 +1,147 @@
+import { EditingStatus } from './chunk-MULOZYHL.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './InlineEditor-W55DDKML.css';
+import { useRef, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var INLINE_EDITOR_LABELS = {
+  save: "Save",
+  cancel: "Cancel",
+  unchanged: "Nothing has changed yet.",
+  invalid: "Fix the highlighted field first.",
+  saving: "Saving. Wait for it to finish.",
+  shortcut: "to save"
+};
+function firstField(root) {
+  return root.querySelector(
+    'textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [contenteditable="true"]'
+  );
+}
+function InlineEditor({
+  label,
+  children,
+  onSave,
+  onCancel,
+  dirty,
+  saving = false,
+  invalid = false,
+  error,
+  notice,
+  focusOnMount = true,
+  shortcutHint = true,
+  secondaryActions,
+  labels: overrides,
+  className,
+  onKeyDown,
+  ...rest
+}) {
+  const labels = { ...INLINE_EDITOR_LABELS, ...overrides };
+  const form = useRef(null);
+  const focusAtMount = useRef(focusOnMount);
+  useLayoutEffect(() => {
+    if (!focusAtMount.current || !form.current) return;
+    const field = firstField(form.current);
+    if (!field) return;
+    field.focus();
+    if (field instanceof HTMLTextAreaElement || field instanceof HTMLInputElement) {
+      const end = field.value.length;
+      try {
+        field.setSelectionRange(end, end);
+      } catch {
+      }
+    }
+  }, []);
+  const blocked = saving ? labels.saving : invalid ? labels.invalid : !dirty ? labels.unchanged : null;
+  const save = () => {
+    if (blocked === null) onSave();
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    save();
+  };
+  const keys = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || isComposing(event)) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (!saving) onCancel();
+      return;
+    }
+    if (event.key !== "Enter") return;
+    if ((event.metaKey || event.ctrlKey) && !event.altKey) {
+      event.preventDefault();
+      save();
+      return;
+    }
+    if (event.target instanceof HTMLInputElement) event.preventDefault();
+  };
+  return (
+    /*
+     * THE FORM LISTENS FOR ITS TWO KEYS, as React's own handler rather than a
+     * native one, because React's runs after every handler inside it: that is
+     * what lets an open menu's Escape close the menu and stop there. A
+     * native listener on the form would hear the key first, before anything
+     * inside had the chance to claim it.
+     */
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- see above
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ...rest,
+        ref: form,
+        "aria-label": label,
+        "aria-busy": saving || void 0,
+        noValidate: true,
+        className: cx("crewlet-inline-editor", className),
+        onSubmit: submit,
+        onKeyDown: keys,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__fields", children }),
+          notice ? /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__notice", children: notice }) : null,
+          error ? /* @__PURE__ */ jsx("div", { className: "crewlet-inline-editor__error", role: "alert", children: error }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-inline-editor__bar", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__start", children: [
+              /* @__PURE__ */ jsx(EditingStatus, { dirty, saving, labels: labels.status }),
+              secondaryActions
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__end", children: [
+              shortcutHint ? /* @__PURE__ */ jsxs("span", { className: "crewlet-inline-editor__hint", children: [
+                /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
+                " ",
+                labels.shortcut
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  ...saving ? { disabledReason: labels.saving } : {},
+                  onClick: () => {
+                    if (!saving) onCancel();
+                  },
+                  children: labels.cancel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "primary",
+                  type: "submit",
+                  loading: saving,
+                  ...blocked !== null && !saving ? { disabledReason: blocked } : {},
+                  children: labels.save
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  );
+}
+
+export { INLINE_EDITOR_LABELS, InlineEditor };

package/dist/{chunk-KKUJSMLF.js → chunk-DY4DQ7EB.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { ConfirmModal } from './chunk-FYINAYAJ.js';
+import { ConfirmModal } from './chunk-6AKG2VLR.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-4DIKLY53.js → chunk-HBSR5DL6.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-MVGCZ655.js';
+import { Combobox } from './chunk-2UVMIM2J.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/{chunk-KA75QPFM.js → chunk-ILFEWRLG.js}

@@ -1,7 +1,7 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-Y4GXCKOC.js → chunk-KOJKX3U6.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { DateTimePicker } from './chunk-UFXLNC2N.js';
-import { DataTable } from './chunk-GI3S6RMM.js';
+import { DataTable } from './chunk-PWZT6CZY.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Input } from './chunk-ZI5G5RS7.js';
+import { Input } from './chunk-Z734SV4E.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-FG243QHY.js → chunk-KZDMAQNJ.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { FormField, Input } from './chunk-ZI5G5RS7.js';
+import { FormField, Input } from './chunk-Z734SV4E.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {

package/dist/{chunk-TC7DJTXI.js → chunk-MULOZYHL.js}

@@ -1,3 +1,4 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-NNA2CKIL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -19,6 +20,7 @@ function EditingStatus({ dirty, saving = false, labels, className }) {
       children: [
         /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),
+        state && /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
         state && /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__state", children: state })
       ]
     }

package/dist/{chunk-ZUTUI27P.js → chunk-N4GBDK4L.js}

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

package/dist/{chunk-7CXGSS7D.js → chunk-O6H5XXVK.js}

@@ -1,4 +1,4 @@
-import { Textarea } from './chunk-ZI5G5RS7.js';
+import { Textarea } from './chunk-Z734SV4E.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';

package/dist/{chunk-GI3S6RMM.js → chunk-PWZT6CZY.js}

@@ -1,9 +1,9 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-FYINAYAJ.js';
-import { Checkbox } from './chunk-EY7LACIR.js';
+import { Modal } from './chunk-6AKG2VLR.js';
+import { Checkbox } from './chunk-RWET7W22.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-NNTO3TNC.js → chunk-Q6CQMS6R.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './TileGrid-I6LNYD2H.css';
+import './TileGrid-UYMVVVJK.css';
 import { jsx } from 'react/jsx-runtime';
 
 function TileGrid({ columns = 3, as: Track = "div", className, children, ...rest }) {

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

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Text-S3Q4O3IG.css';
+import './Text-XOCOU34C.css';
 import { jsx } from 'react/jsx-runtime';
 
 function Text({

package/dist/{chunk-W53CWWX3.js → chunk-RCKRJXFV.js}

@@ -1,6 +1,6 @@
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Input } from './chunk-ZI5G5RS7.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Input } from './chunk-Z734SV4E.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-U44WGRFW.js → chunk-RFPCHMSX.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-BF5WV7NM.js';
+import { SegmentedControl } from './chunk-6FVGSWLS.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-X6IJ7DAX.js → chunk-RL75QTNT.js}

@@ -1,9 +1,9 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { Input } from './chunk-ZI5G5RS7.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { Input } from './chunk-Z734SV4E.js';
 import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-N3SHQ3VU.js → chunk-RRPQMMCZ.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-JQ7IFSF6.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
-import { Composer } from './chunk-7CXGSS7D.js';
+import { Composer } from './chunk-O6H5XXVK.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-EY7LACIR.js → chunk-RWET7W22.js}

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

package/dist/{chunk-JF3TJUBU.js → chunk-RWWLVDRE.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-AMO2B54T.js').then(
+  loading ??= import('./Editor-6FXHMW64.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-LSRQJDGR.js → chunk-SEPSXOGJ.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-BF5WV7NM.js';
+import { SegmentedControl } from './chunk-6FVGSWLS.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-MCOC3KQA.js → chunk-SQ4JFHO7.js}

@@ -1,7 +1,7 @@
 import { SlideStage } from './chunk-RMEBFYL7.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
-import { Menu } from './chunk-PCI7ZJ6Z.js';
+import { Menu } from './chunk-TMM32U7D.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideFilmstrip-PAT7P4OG.css';