@crewlethq/ui 0.28.0 → 0.30.0

package/dist/chunk-A4E5YLXO.js

@@ -0,0 +1,85 @@
+import { MARKDOWN_CALLOUT_NAMES } from './chunk-SKOYC2CF.js';
+
+// src/RichEditor/types.ts
+var RICH_EDITOR_LABELS = {
+  description: "Type a slash for blocks. Press Alt and F10 to reach the formatting toolbar.",
+  placeholder: "Write, or type a slash for blocks",
+  emptyLine: "Type / for blocks",
+  slashMenu: "Blocks",
+  slashEmpty: "No block matches",
+  slashGroupBlocks: "Blocks",
+  slashGroupInsert: "Insert",
+  blocks: {
+    paragraph: { label: "Text", description: "A plain paragraph" },
+    heading1: { label: "Heading 1", description: "A section heading" },
+    heading2: { label: "Heading 2", description: "A subsection heading" },
+    heading3: { label: "Heading 3", description: "A smaller heading" },
+    bullet: { label: "Bulleted list", description: "A simple list" },
+    ordered: { label: "Numbered list", description: "A list in order" },
+    task: { label: "Task list", description: "Items with a checkbox" },
+    quote: { label: "Quote", description: "Words set off from the text" },
+    callout: { label: "Callout", description: "A note that stands out" },
+    code: { label: "Code block", description: "Code, with its language" },
+    table: { label: "Table", description: "Rows and columns" },
+    divider: { label: "Divider", description: "A line between sections" },
+    image: { label: "Image", description: "A picture, by its address" }
+  },
+  toolbar: "Formatting",
+  bold: "Bold",
+  italic: "Italic",
+  strike: "Strikethrough",
+  code: "Inline code",
+  link: "Link",
+  heading: (level) => `Heading ${level}`,
+  linkPanel: "Link",
+  linkAddress: "Address",
+  linkText: "Text",
+  linkApply: "Apply",
+  linkRemove: "Remove link",
+  linkOpen: "Open link",
+  linkEdit: "Edit link",
+  linkInvalid: "Use an address that starts with https://, http://, mailto: or #/.",
+  linkRefused: "This address does not open from a page.",
+  imagePanel: "Image",
+  imageAddress: "Image address",
+  imageAlt: "Alt text",
+  imageAltHelp: "Describes the picture for anyone who cannot see it.",
+  imageInsert: "Insert image",
+  imageEdit: "Edit image",
+  imageRemove: "Remove image",
+  tableBar: "Table",
+  tableRow: "Row",
+  tableColumn: "Column",
+  rowAbove: "Insert row above",
+  rowBelow: "Insert row below",
+  rowDelete: "Delete row",
+  columnLeft: "Insert column left",
+  columnRight: "Insert column right",
+  columnDelete: "Delete column",
+  alignStart: "Align left",
+  alignCenter: "Align center",
+  alignEnd: "Align right",
+  tableDelete: "Delete table",
+  codeLanguage: "Code language",
+  codeLanguagePlaceholder: "Language",
+  calloutTone: "Callout type",
+  calloutRemove: "Remove callout",
+  tones: MARKDOWN_CALLOUT_NAMES,
+  taskDone: "Mark as done",
+  taskNotDone: "Mark as not done",
+  loading: "Loading the editor",
+  failed: "The editor did not load",
+  failedDetail: "The page may have been updated while it was open. Try again, or reload the page.",
+  retry: "Try again"
+};
+function richEditorLabels(overrides) {
+  if (!overrides) return RICH_EDITOR_LABELS;
+  return {
+    ...RICH_EDITOR_LABELS,
+    ...overrides,
+    blocks: { ...RICH_EDITOR_LABELS.blocks, ...overrides.blocks },
+    tones: { ...RICH_EDITOR_LABELS.tones, ...overrides.tones }
+  };
+}
+
+export { RICH_EDITOR_LABELS, richEditorLabels };

package/dist/{chunk-WENCSQ47.js → chunk-EBNI36UQ.js}

@@ -4,7 +4,7 @@ import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-APHZKJYH.css';
+import './AppShell-GCM4TDVY.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-6J35F334.js → chunk-GOSQXEZU.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-YZCJ63JF.js';
+import { Card } from './chunk-ACA27MZH.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCard-EXVAEBV6.css';

package/dist/{chunk-M2VJGNCD.js → chunk-GR55WT4R.js}

@@ -1,9 +1,9 @@
-import { Composer } from './chunk-RIEDQSA4.js';
-import { Document } from './chunk-WI6K5M5X.js';
+import { Composer } from './chunk-7DZDSSJS.js';
+import { Document } from './chunk-M3LUNN7F.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
-import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-I3BSQUKN.js

@@ -0,0 +1,121 @@
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactPanel-YFXT5O77.css';
+import { useId, useRef, useLayoutEffect, useEffect } from 'react';
+import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ARTIFACT_PANEL_LABELS = {
+  close: (title) => `Close ${title.toLowerCase()}`,
+  expand: "Expand to the full view",
+  collapse: "Back to the side"
+};
+function ArtifactPanel({
+  title,
+  icon,
+  onClose,
+  size = "md",
+  expanded = false,
+  onExpandedChange,
+  actions,
+  focusOnOpen = true,
+  labels,
+  className,
+  children
+}) {
+  const words = { ...ARTIFACT_PANEL_LABELS, ...labels };
+  const titleId = useId();
+  const root = useRef(null);
+  const heading = useRef(null);
+  const before = useRef(null);
+  const focusing = useRef(focusOnOpen);
+  useLayoutEffect(() => {
+    const panel = root.current;
+    before.current = document.activeElement;
+    if (focusing.current) heading.current?.focus({ preventScroll: true });
+    return () => {
+      const back = before.current;
+      if (panel?.contains(document.activeElement) && back instanceof HTMLElement && back.isConnected) {
+        back.focus({ preventScroll: true });
+      }
+    };
+  }, []);
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const panel = root.current;
+    if (!panel) return void 0;
+    const doc = panel.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      if (!(event.target instanceof Node) || !panel.contains(event.target)) return;
+      event.preventDefault();
+      close.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: root,
+      className: cx("crewlet-artifact-panel", `crewlet-artifact-panel--${size}`, className),
+      "aria-labelledby": titleId,
+      "data-expanded": expanded || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-artifact-panel__head", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-panel__icon", "aria-hidden": true, children: icon }) : null,
+          /* @__PURE__ */ jsx("h2", { ref: heading, id: titleId, className: "crewlet-artifact-panel__title", tabIndex: -1, children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-panel__actions", children: [
+            actions,
+            onExpandedChange ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: expanded ? words.collapse : words.expand,
+                icon: expanded ? /* @__PURE__ */ jsx(MinimizeGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(MaximizeGlyph, { size: "sm" }),
+                size: "sm",
+                variant: "ghost",
+                onClick: () => onExpandedChange(!expanded)
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(IconButton, { label: words.close(title), icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), size: "sm", variant: "ghost", onClick: onClose })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 3, children }) })
+      ]
+    }
+  );
+}
+function ArtifactWorkspace({
+  panel,
+  expanded = false,
+  bodyRef,
+  bodyClassName,
+  bodyLabel,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-artifact-workspace", className),
+      "data-panel": panel ? expanded ? "expanded" : "open" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: bodyRef,
+            className: cx("crewlet-artifact-workspace__body", bodyClassName),
+            role: bodyLabel ? "region" : void 0,
+            "aria-label": bodyLabel,
+            children
+          }
+        ),
+        panel
+      ]
+    }
+  );
+}
+
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace };

package/dist/chunk-IDBHX5SR.js

@@ -0,0 +1,12 @@
+import { readMarkdown, writeMarkdown } from './chunk-YFW4MTK4.js';
+
+// src/RichEditor/roundtrip.ts
+function roundTripMarkdown(markdown) {
+  const { doc, source } = readMarkdown(markdown);
+  return writeMarkdown(doc, source);
+}
+function canonicalMarkdown(markdown) {
+  return writeMarkdown(readMarkdown(markdown).doc);
+}
+
+export { canonicalMarkdown, roundTripMarkdown };

package/dist/{chunk-WI6K5M5X.js → chunk-M3LUNN7F.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Document-PQGXJHB7.css';
+import './Document-G3YTZIUL.css';
 import { jsx } from 'react/jsx-runtime';
 
 function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {

package/dist/{chunk-S4RCG44T.js → chunk-MICH6QSJ.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-ENJUPIND.js';
+import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';

package/dist/chunk-QMBP23BL.js

@@ -0,0 +1,347 @@
+import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
+import { Tooltip } from './chunk-QWOPX2MN.js';
+import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { ArtifactIcon } from './chunk-4JUKWWUD.js';
+import { Menu } from './chunk-2HIOJ4YZ.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 './ArtifactBar-IBWB5POL.css';
+import { useId, useState, useRef, useEffect } from 'react';
+import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ARTIFACT_BAR_LABELS = {
+  more: (title) => `More for \u201C${title}\u201D`,
+  renameHint: "Rename",
+  titleField: "Title",
+  emptyTitle: "A title cannot be empty."
+};
+function ArtifactBar({
+  title,
+  kind,
+  icon,
+  kindLabel,
+  back,
+  start,
+  onRename,
+  renaming,
+  onRenamingChange,
+  version,
+  modes,
+  presence,
+  kindTools = [],
+  tools = [],
+  menu = [],
+  as = "header",
+  headingLevel = 1,
+  pending = false,
+  labels,
+  className
+}) {
+  const words = { ...ARTIFACT_BAR_LABELS, ...labels };
+  const headingId = useId();
+  const Root = as;
+  const apple = isApplePlatform();
+  const folding = [...kindTools, ...tools].filter((t) => !t.labelled);
+  const pinned = [...kindTools, ...tools].filter((t) => t.labelled);
+  const folded = [
+    ...modes ? modes.options.map(
+      (option) => ({
+        key: `mode:${option.value}`,
+        label: option.label,
+        icon: option.icon,
+        checked: option.value === modes.value,
+        onSelect: () => modes.onValueChange(option.value)
+      })
+    ) : [],
+    ...modes && folding.length > 0 ? [{ kind: "separator", key: "sep:modes" }] : [],
+    ...folding.map(
+      (tool) => ({
+        key: `tool:${tool.key}`,
+        label: tool.label,
+        icon: tool.icon,
+        onSelect: tool.onSelect,
+        ...tool.disabledReason !== void 0 ? { disabled: true, description: tool.disabledReason } : {},
+        ...tool.keys ? { hint: /* @__PURE__ */ jsx(Kbd, { keys: tool.keys, subtle: true, apple }) } : {}
+      })
+    )
+  ];
+  const narrowMenu = [
+    ...folded,
+    ...folded.length > 0 && menu.length > 0 ? [{ kind: "separator", key: "sep:menu" }] : [],
+    ...menu
+  ];
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      className: cx("crewlet-artifact-bar", presence ? "crewlet-artifact-bar--present" : null, className),
+      "aria-labelledby": pending ? void 0 : headingId,
+      children: /* @__PURE__ */ jsxs("div", { className: cx("crewlet-artifact-bar__row", modes && "crewlet-artifact-bar__row--centred"), children: [
+        /* @__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" }) }),
+          pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__placeholder", "aria-hidden": true }) : /* @__PURE__ */ jsx(
+            BarTitle,
+            {
+              title,
+              id: headingId,
+              level: headingLevel,
+              onRename,
+              renaming,
+              onRenamingChange,
+              words
+            }
+          ),
+          version ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__version", children: version }) : null
+        ] }),
+        modes ? /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-bar__modes crewlet-artifact-bar__wide", children: /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            label: modes.label,
+            semantics: "radio",
+            size: "sm",
+            options: modes.options.map((o) => ({ value: o.value, label: o.label, ...o.icon ? { icon: o.icon } : {} })),
+            value: modes.value,
+            onValueChange: modes.onValueChange
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-artifact-bar__end", children: [
+          presence ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__presence", children: presence }) : null,
+          kindTools.some((t) => !t.labelled) ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__tools crewlet-artifact-bar__wide", children: kindTools.filter((t) => !t.labelled).map((tool) => /* @__PURE__ */ jsx(ToolButton, { tool, apple }, tool.key)) }) : null,
+          tools.some((t) => !t.labelled) ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-bar__tools crewlet-artifact-bar__wide", children: [
+            kindTools.some((t) => !t.labelled) ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__rule", "aria-hidden": true }) : null,
+            tools.filter((t) => !t.labelled).map((tool) => /* @__PURE__ */ jsx(ToolButton, { tool, apple }, tool.key))
+          ] }) : null,
+          pinned.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__tools", children: pinned.map((tool) => /* @__PURE__ */ jsx(LabelledTool, { tool, apple }, tool.key)) }) : null,
+          menu.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__wide", children: /* @__PURE__ */ jsx(Menu, { label: words.more(title), icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "sm" }), triggerVariant: "ghost", align: "end", items: menu }) }) : null,
+          narrowMenu.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__narrow", children: /* @__PURE__ */ jsx(
+            Menu,
+            {
+              label: words.more(title),
+              icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "sm" }),
+              triggerVariant: "ghost",
+              align: "end",
+              items: narrowMenu
+            }
+          ) }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function ariaKeys(keys, apple) {
+  return keys.map((key) => {
+    if (key === "Mod") return apple ? "Meta" : "Control";
+    return key.length === 1 ? key.toUpperCase() : key;
+  }).join("+");
+}
+function Tip({ tool, apple }) {
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-bar__tip", children: [
+    tool.label,
+    tool.keys ? /* @__PURE__ */ jsx(Kbd, { keys: tool.keys, subtle: true, apple }) : null
+  ] });
+}
+function ToolButton({ tool, apple }) {
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-bar__tool", children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: tool.label,
+        icon: tool.icon,
+        size: "sm",
+        variant: "ghost",
+        title: "",
+        pressed: tool.pressed,
+        disabledReason: tool.disabledReason,
+        "aria-keyshortcuts": tool.keys ? ariaKeys(tool.keys, apple) : void 0,
+        onClick: tool.onSelect
+      }
+    ) }),
+    tool.badge !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__badge", "aria-hidden": true, children: tool.badge }) : null
+  ] });
+}
+function LabelledTool({ tool, apple }) {
+  const shortcut = tool.keys ? ariaKeys(tool.keys, apple) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__roomy", children: /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", disabled: !tool.keys, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "secondary",
+        leadingIcon: tool.icon,
+        pressed: tool.pressed,
+        disabledReason: tool.disabledReason,
+        "aria-keyshortcuts": shortcut,
+        onClick: tool.onSelect,
+        children: tool.label
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__tight", children: /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: tool.label,
+        icon: tool.icon,
+        size: "sm",
+        variant: "ghost",
+        title: "",
+        pressed: tool.pressed,
+        disabledReason: tool.disabledReason,
+        "aria-keyshortcuts": shortcut,
+        onClick: tool.onSelect
+      }
+    ) }) })
+  ] });
+}
+function BarTitle({
+  title,
+  id,
+  level,
+  onRename,
+  renaming,
+  onRenamingChange,
+  words
+}) {
+  const Heading = `h${level}`;
+  const hintId = useId();
+  const errorId = useId();
+  const [own, setOwn] = useState(false);
+  const editing = (renaming ?? own) && onRename !== void 0;
+  const setEditing = (on) => {
+    if (renaming === void 0) setOwn(on);
+    onRenamingChange?.(on);
+  };
+  const [draft, setDraft] = useState(title);
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const field = useRef(null);
+  const button = useRef(null);
+  const settled = useRef(false);
+  useEffect(() => {
+    if (!editing) return;
+    settled.current = false;
+    setDraft(title);
+    setError(null);
+    const el = field.current;
+    el?.focus();
+    el?.select();
+  }, [editing]);
+  if (onRename === void 0) {
+    return /* @__PURE__ */ jsx(Heading, { id, className: "crewlet-artifact-bar__title", title, children: title });
+  }
+  const finish = (refocus) => {
+    settled.current = true;
+    setEditing(false);
+    setError(null);
+    if (refocus) requestAnimationFrame(() => button.current?.focus());
+  };
+  const commit = async (refocus) => {
+    if (settled.current || busy) return;
+    const next = draft.trim();
+    if (next === title) {
+      finish(refocus);
+      return;
+    }
+    if (next === "") {
+      setError(words.emptyTitle);
+      return;
+    }
+    setBusy(true);
+    try {
+      const answer = await onRename(next);
+      if (typeof answer === "string" && answer !== "") {
+        setError(answer);
+        field.current?.focus();
+        return;
+      }
+      finish(refocus);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      void commit(true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      finish(true);
+    }
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsxs(Heading, { id, className: "crewlet-artifact-bar__title crewlet-artifact-bar__title--editing", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__sizer", "data-value": draft || " ", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: field,
+          className: "crewlet-artifact-bar__field",
+          "aria-label": words.titleField,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          "aria-busy": busy || void 0,
+          readOnly: busy,
+          value: draft,
+          size: 1,
+          onChange: (event) => {
+            setDraft(event.target.value);
+            if (error) setError(null);
+          },
+          onKeyDown,
+          onBlur: () => void commit(false)
+        }
+      ) }),
+      error ? /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", className: "crewlet-artifact-bar__error", children: error }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { id, className: "crewlet-artifact-bar__title", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: button,
+        type: "button",
+        className: "crewlet-artifact-bar__rename",
+        title,
+        "aria-describedby": hintId,
+        onClick: () => setEditing(true),
+        children: title
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: words.renameHint })
+  ] });
+}
+function ArtifactVersionChip({
+  version,
+  latest,
+  items,
+  label = "Versions",
+  format = (v, l) => v === l ? `v${v}` : `v${v} of ${l}`
+}) {
+  const older = version !== latest;
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      label,
+      items,
+      align: "start",
+      renderTrigger: (props) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ...props,
+          type: "button",
+          className: cx("crewlet-version-chip", older && "crewlet-version-chip--older"),
+          "aria-label": `${label}: ${format(version, latest)}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-version-chip__words", children: format(version, latest) }),
+            /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip };

package/dist/{chunk-G2AVKPSL.js → chunk-RIAZM6L3.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-ENJUPIND.js';
+import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';