@crewlethq/ui 0.48.3 → 0.49.0

package/dist/chunk-OEEYL2CM.js

@@ -0,0 +1,73 @@
+import { BrandScope } from './chunk-P3OIM6OC.js';
+import { normalizeHex } from './chunk-UZMNR366.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './BrandSample-G5V7GKR2.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  heading: "Quarterly review",
+  body: "Every team finished the quarter on plan.",
+  link: "See the breakdown",
+  byline: "Prepared by an agent",
+  slideHeading: "The year ahead",
+  slideFooter: "Company review",
+  label: (name, kind, mode) => `A ${kind === "doc" ? "doc" : "slide"} in the ${name} brand, ${mode} mode`
+};
+function BrandSample({
+  kind,
+  mode,
+  name,
+  colors,
+  logo,
+  logoOnDark,
+  mark,
+  headingFamily,
+  bodyFamily,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const modeLogo = (mode === "dark" ? logoOnDark || logo : logo) || null;
+  const secondary = normalizeHex(colors.secondary) !== null;
+  return /* @__PURE__ */ jsx(
+    BrandScope,
+    {
+      colors,
+      headingFamily,
+      bodyFamily,
+      mode,
+      role: "img",
+      "aria-label": text.label(name, kind, mode),
+      className: cx("crewlet-brand-sample", `crewlet-brand-sample--${kind}`, `crewlet-brand-sample--${mode}`, className),
+      children: kind === "doc" ? /* @__PURE__ */ jsxs("div", { className: "crewlet-brand-sample__page", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__brand", children: modeLogo ? /* @__PURE__ */ jsx("img", { src: modeLogo, alt: "", className: "crewlet-brand-sample__logo", draggable: false }) : /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__wordmark", children: name }) }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__heading", children: text.heading }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__rule" }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-brand-sample__body", children: [
+          text.body,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__link", children: text.link })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__byline", children: text.byline })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-brand-sample__slide", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__brand", children: mark || modeLogo ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: (mark || modeLogo) ?? void 0,
+            alt: "",
+            className: cx("crewlet-brand-sample__logo", mark ? "crewlet-brand-sample__logo--mark" : null),
+            draggable: false
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__wordmark", children: name }) }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-brand-sample__bar", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__bar-primary" }),
+          secondary ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__bar-secondary" }) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__heading crewlet-brand-sample__heading--slide", children: text.slideHeading }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-brand-sample__footer", children: `${name} \xB7 ${text.slideFooter}` })
+      ] })
+    }
+  );
+}
+
+export { BrandSample };

package/dist/chunk-P3OIM6OC.js

@@ -0,0 +1,38 @@
+import { safeFontFamily, fontStack } from './chunk-5SGHW42B.js';
+import { normalizeHex } from './chunk-UZMNR366.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import '@crewlethq/tokens/css/brand-scope';
+import './BrandScope-H2KZHGT7.css';
+import { jsx } from 'react/jsx-runtime';
+
+var COLOR_INPUTS = {
+  primary: "--brand-primary",
+  primary_on_dark: "--brand-primary-on-dark",
+  secondary: "--brand-secondary",
+  text: "--brand-text",
+  light_ground: "--brand-light-ground",
+  dark_ground: "--brand-dark-ground"
+};
+function brandScopeInputs(colors, headingFamily, bodyFamily) {
+  const inputs = {};
+  for (const [role, input] of Object.entries(COLOR_INPUTS)) {
+    const value = normalizeHex(colors[role]);
+    if (value !== null) inputs[input] = value;
+  }
+  if (safeFontFamily(headingFamily)) inputs["--brand-font-heading"] = fontStack(headingFamily, "var(--font-family-display)");
+  if (safeFontFamily(bodyFamily)) inputs["--brand-font-body"] = fontStack(bodyFamily, "var(--font-family-sans)");
+  return inputs;
+}
+function BrandScope({ colors, headingFamily, bodyFamily, mode, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "crewlet-brand-scope",
+      "data-mode": mode,
+      style: brandScopeInputs(colors, headingFamily, bodyFamily),
+      children: /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-brand-scope__layer", className), children })
+    }
+  );
+}
+
+export { BrandScope, brandScopeInputs };

package/dist/{chunk-FWBKMPNR.js → chunk-P3QWT5VR.js}

@@ -1,5 +1,5 @@
 import { Document } from './chunk-PWG3VHRQ.js';
-import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
 import './DashboardCover-KYGYMRKW.css';

package/dist/chunk-P5JBDHWC.js

@@ -0,0 +1,206 @@
+import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
+import { Input } from './chunk-EXRRTKWT.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HitArea-QUOS6ZDJ.css';
+import './Combobox-GBCWXWEB.css';
+import { forwardRef, useCallback, useId, useMemo, useRef, useEffect } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var INLINE_ROWS = 6;
+var Combobox = forwardRef(function Combobox2({
+  value,
+  onValueChange,
+  options,
+  renderList,
+  onCommit,
+  label,
+  tabCommits = false,
+  commitOn = "mousedown",
+  mono = false,
+  emptyMessage,
+  id,
+  className,
+  containerClassName,
+  ...props
+}, ref) {
+  const { inline = false, open: openProp, onOpenChange: onOpenChangeProp, rows: rowsProp, chosen, ...rest } = props;
+  const open = inline ? true : Boolean(openProp);
+  const onOpenChange = useCallback(
+    (next) => {
+      if (!inline) onOpenChangeProp?.(next);
+    },
+    [inline, onOpenChangeProp]
+  );
+  const rows = Math.max(1, Math.round(rowsProp ?? INLINE_ROWS));
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const offered = useMemo(() => options ?? [], [options]);
+  const showing = open && (offered.length > 0 || renderList !== void 0 || emptyMessage !== void 0);
+  const lists = open && (offered.length > 0 || renderList !== void 0);
+  const box = useRef(null);
+  const commit = useCallback(
+    (index) => {
+      const option = offered[index];
+      if (!option || option.disabled) return;
+      if (onCommit) onCommit(option, index);
+      else onValueChange(option.value);
+      onOpenChange(false);
+    },
+    [offered, onCommit, onOpenChange, onValueChange]
+  );
+  const listbox = useListbox({
+    id: fieldId,
+    // A list that is showing with nothing in it still owns Escape: the reader
+    // can see it, so dismissing it is what Escape means there too. An inline
+    // list is not a popup: it has nothing to dismiss, and Escape reaches the
+    // surface around it.
+    open: showing,
+    count: offered.length,
+    onCommit: commit,
+    onClose: () => onOpenChange(false),
+    tabCommits,
+    popup: !inline
+  });
+  const isDisabled = useCallback((index) => Boolean(offered[index]?.disabled), [offered]);
+  const optionKeys = useOptionKeys({ listbox, count: offered.length, disabled: isDisabled, ends: value === "" });
+  const chosenIndex = chosen === void 0 ? -1 : offered.findIndex((option) => option.value === chosen);
+  const { opening, step } = optionKeys;
+  const setActive = listbox.setActive;
+  const placed = useRef(false);
+  useEffect(() => {
+    if (!inline) return;
+    if (!placed.current) {
+      placed.current = true;
+      setActive(opening(chosenIndex));
+      return;
+    }
+    setActive(step(0, 1));
+  }, [inline, value]);
+  function onKeyDown(event) {
+    if (inline && optionKeys.onKeyDown(event)) return;
+    if (listbox.onKeyDown(event)) return;
+    if (inline) return;
+    if (!showing && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      onOpenChange(true);
+    }
+  }
+  const handlers = (index) => {
+    const { onMouseDown, onMouseEnter } = listbox.optionHandlers(index);
+    if (commitOn === "click") {
+      return {
+        onMouseEnter,
+        // The press is still swallowed, so the field keeps focus and the value
+        // being completed keeps its caret; only what TAKES the row moves.
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => commit(index)
+      };
+    }
+    return { onMouseDown, onMouseEnter };
+  };
+  const fieldRef = (el) => {
+    box.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
+  const row = (option, index, picked) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: listbox.optionId(index),
+      role: "option",
+      "aria-selected": picked,
+      "aria-disabled": option.disabled || void 0,
+      className: cx(
+        "crewlet-listbox__option",
+        HIT_AREA_CLASS,
+        index === listbox.active && "is-highlight",
+        option.disabled && "is-disabled"
+      ),
+      ...option.disabled ? {} : handlers(index),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-combobox__label", children: option.label ?? option.value }),
+        option.hint ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.hint }) : null,
+        inline && picked ? /* @__PURE__ */ jsx("span", { className: "crewlet-combobox__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) }) : null
+      ]
+    },
+    option.value
+  );
+  if (inline) {
+    const listed = offered.length > 0 || renderList !== void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox", "crewlet-combobox--inline", containerClassName), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...rest,
+          ref: fieldRef,
+          id: fieldId,
+          className,
+          value,
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-expanded": listed,
+          "aria-controls": listed ? listbox.listId : void 0,
+          "aria-activedescendant": offered.length > 0 && listbox.active >= 0 ? listbox.optionId(listbox.active) : void 0,
+          autoComplete: "off",
+          spellCheck: false,
+          onChange: (event) => onValueChange(event.target.value),
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox__list", mono && "is-mono"), style: { "--crewlet-combobox-rows": rows }, children: [
+        listed ? /* @__PURE__ */ jsx("div", { ref: listbox.listRef, className: "crewlet-combobox__options", role: "listbox", id: listbox.listId, "aria-label": label, children: renderList ? renderList({
+          listId: listbox.listId,
+          active: listbox.active,
+          optionId: listbox.optionId,
+          optionHandlers: handlers
+        }) : offered.map((option, index) => row(option, index, index === chosenIndex)) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "crewlet-combobox__empty", role: "status", children: !listed && emptyMessage ? /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage }) : null })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-combobox", containerClassName), ref: listbox.anchorRef, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        ref: fieldRef,
+        id: fieldId,
+        className,
+        value,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": lists,
+        "aria-controls": lists ? listbox.listId : void 0,
+        "aria-activedescendant": lists && offered.length > 0 ? listbox.optionId(listbox.active) : void 0,
+        autoComplete: "off",
+        spellCheck: false,
+        onChange: (event) => onValueChange(event.target.value),
+        onKeyDown
+      }
+    ),
+    showing ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listbox.listRef,
+        className: cx("crewlet-combobox__panel", mono && "is-mono"),
+        role: lists ? "listbox" : void 0,
+        id: lists ? listbox.listId : void 0,
+        "aria-label": lists ? label : void 0,
+        children: renderList ? renderList({
+          listId: listbox.listId,
+          active: listbox.active,
+          optionId: listbox.optionId,
+          optionHandlers: handlers
+        }) : offered.length > 0 ? (
+          // A completion list has no choice of its own: the row the
+          // arrows are on is the one announced as selected.
+          offered.map((option, index) => row(option, index, index === listbox.active))
+        ) : /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage })
+      }
+    ) : null
+  ] });
+});
+
+export { Combobox };

package/dist/{chunk-OKE5YSLD.js → chunk-Q44X36QC.js}

@@ -2,30 +2,32 @@ import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
-import { ArtifactKindGround } from './chunk-UBZDYOCA.js';
+import { ArtifactKindGround } from './chunk-RV6XB5UV.js';
 import { Card } from './chunk-INHXF2CL.js';
+import { Checkbox } from './chunk-NCHKKYPQ.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
-import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactCard-OGTMO2KI.css';
+import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactCard-SOB63NV5.css';
 import { useId } from 'react';
 import { PinGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function ArtifactPreviewGlyph({ kind }) {
   return /* @__PURE__ */ jsx(ArtifactKindGround, { kind });
 }
 var LABELS = {
-  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
+  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet", brand: "Brand" },
   pinned: "Pinned",
   version: (version) => `v${version}`,
   changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
   present: (count) => count === 1 ? "1 here now" : `${count} here now`,
   updated: "Edited",
   by: (name) => `by ${name}`,
-  access: { private: "Private", shared: "Shared", company: "Shared with the company" }
+  access: { private: "Private", shared: "Shared", company: "Shared with the company" },
+  select: (title) => `Select ${title}`
 };
 function ArtifactCard({
   title,
@@ -42,6 +44,10 @@ function ArtifactCard({
   project,
   access,
   actions,
+  selectable = false,
+  selected = false,
+  selecting = false,
+  onSelectedChange,
   trashed = false,
   size = "card",
   className,
@@ -56,6 +62,7 @@ function ArtifactCard({
   };
   const titleId = useId();
   const factsId = useId();
+  const boxId = useId();
   const present = presence && presence.length > 0 ? presence : null;
   const changedBy = updatedBy && updatedBy !== owner?.name ? updatedBy : void 0;
   const edited = /* @__PURE__ */ jsxs("span", { children: [
@@ -108,37 +115,74 @@ function ArtifactCard({
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-artifact-card", "crewlet-artifact-card--card", trashed && "crewlet-artifact-card--trashed", className), children: [
-    /* @__PURE__ */ jsxs("a", { href, className: "crewlet-artifact-card__link", "aria-labelledby": titleId, "aria-describedby": factsId, children: [
-      /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }),
-      /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
-        /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-card__badge", `crewlet-kind--${kind}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
-          /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
-          pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }) }) : null
+  const picking = selectable && selecting;
+  const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
+      /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-card__badge", `crewlet-kind--${kind}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
+        /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
+        pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }) }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
+        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+          text.kinds[kind],
+          pinned ? `, ${text.pinned}` : ""
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line crewlet-artifact-card__meta", children: [
+          access ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__access", title: text.access[access], children: [
+            /* @__PURE__ */ jsx(ArtifactAccessGlyph, { access }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: text.access[access] })
+          ] }) : null,
+          owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
+            /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__owner-name", children: owner.name })
+          ] }) : null,
+          edited
         ] }),
-        /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
-          /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-            text.kinds[kind],
-            pinned ? `, ${text.pinned}` : ""
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line crewlet-artifact-card__meta", children: [
-            access ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__access", title: text.access[access], children: [
-              /* @__PURE__ */ jsx(ArtifactAccessGlyph, { access }),
-              /* @__PURE__ */ jsx(VisuallyHidden, { children: text.access[access] })
-            ] }) : null,
-            owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
-              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
-              /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__owner-name", children: owner.name })
-            ] }) : null,
-            edited
-          ] }),
-          extra
-        ] })
+        extra
       ] })
-    ] }),
-    actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__actions", children: actions }) : null
+    ] })
   ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-artifact-card",
+        "crewlet-artifact-card--card",
+        trashed && "crewlet-artifact-card--trashed",
+        selectable && selected && "is-selected",
+        picking && "crewlet-artifact-card--selecting",
+        className
+      ),
+      children: [
+        picking ? (
+          // WHILE CHOOSING, THE BODY IS THE BOX'S LABEL: one press anywhere
+          // ticks it. It is not a stop of its own; the box is, named for the
+          // card, so a keyboard meets one control per card.
+          /* @__PURE__ */ jsx("label", { htmlFor: boxId, className: "crewlet-artifact-card__link", children: bodyContent })
+        ) : /* @__PURE__ */ jsx("a", { href, className: "crewlet-artifact-card__link", "aria-labelledby": titleId, "aria-describedby": factsId, children: bodyContent }),
+        selectable ? (
+          // THE BOX STANDS ON THE PREVIEW'S FOOT, not over its top: a cover's
+          // own title starts at its top corner, and a box there hid its first
+          // words. The anchor has the preview's shape, so the box sits on the
+          // seam opposite the kind's badge whatever the card's width.
+          /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__select-anchor", children: /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__select", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: boxId,
+              hideLabel: true,
+              label: text.select(title),
+              checked: selected,
+              "aria-describedby": factsId,
+              onChange: (event) => onSelectedChange?.(event.target.checked, { range: event.nativeEvent.shiftKey === true })
+            }
+          ) }) })
+        ) : null,
+        actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__actions", children: actions }) : null
+      ]
+    }
+  );
 }
 function ArtifactCardSkeleton({ className }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-artifact-card", "crewlet-artifact-card--card", "crewlet-artifact-card--skeleton", className), "aria-hidden": true, children: [

package/dist/{chunk-R2IBCEU6.js → chunk-R3BA3C4Y.js}

@@ -1,9 +1,9 @@
-import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactKinds-O3CALPVX.css';
 import './ArtifactMakeRow-6UX2LTF7.css';
 import { useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-CE2THTQR.js → chunk-RSKW25Y5.js}

@@ -1,15 +1,16 @@
-import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph } from '@crewlethq/icons/glyphs';
+import { SwatchBookGlyph, TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 
 // src/ArtifactKindGlyph/ArtifactKindGlyph.tsx
-var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
+var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet", "brand"];
 var KIND_GLYPHS = {
   html: FileCodeGlyph,
   doc: FileTextGlyph,
   slides: PresentationGlyph,
   design: PaletteGlyph,
   dashboard: LayoutDashboardGlyph,
-  sheet: TableGlyph
+  sheet: TableGlyph,
+  brand: SwatchBookGlyph
 };
 function ArtifactKindGlyph({ kind, size = "md" }) {
   const Drawn = KIND_GLYPHS[kind];

package/dist/{chunk-UBZDYOCA.js → chunk-RV6XB5UV.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactKinds-O3CALPVX.css';
 import './ArtifactKindIllustration-KLFL7KBG.css';
 import { useId } from 'react';
 import { CheckGlyph } from '@crewlethq/icons/glyphs';
@@ -87,6 +87,17 @@ var DRAWINGS = {
     /* @__PURE__ */ jsx("rect", { className: "l", x: "108", y: "73", width: "22", height: "4", rx: "2" }),
     /* @__PURE__ */ jsx("rect", { className: "l", x: "30", y: "87", width: "20", height: "4", rx: "2" }),
     /* @__PURE__ */ jsx("rect", { className: "l", x: "68", y: "87", width: "14", height: "4", rx: "2" })
+  ] }),
+  brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "30", y: "16", width: "100", height: "88", rx: "8" }),
+    /* @__PURE__ */ jsx("circle", { className: "m", cx: "48", cy: "36", r: "8" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "30", width: "36", height: "5", rx: "2.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "39", width: "24", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "m", x: "40", y: "54", width: "24", height: "24", rx: "5" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "68", y: "54", width: "24", height: "24", rx: "5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "96", y: "54", width: "24", height: "24", rx: "5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "40", y: "88", width: "42", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "86", y: "88", width: "22", height: "4", rx: "2" })
   ] })
 };
 function ArtifactKindGround({

package/dist/{chunk-E4BOVKNJ.js → chunk-UTESMBPL.js}

@@ -1,8 +1,9 @@
 import { ThemeSwatch } from './chunk-MNFU2RNT.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { useHighlightRest } from './chunk-7KHM2FZH.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ThemeGallery-X35Y25EX.css';
+import './ThemeGallery-UEFZRT6W.css';
 import { useId } from 'react';
 import { themeGroups, themeRegistry } from '@crewlethq/tokens';
 import { CheckGlyph } from '@crewlethq/icons/glyphs';
@@ -69,7 +70,7 @@ function ThemeGallery({
                     type: "button",
                     role: "radio",
                     "aria-checked": chosen,
-                    "aria-label": `${theme.name}, ${theme.tag}`,
+                    "aria-label": theme.tag ? `${theme.name}, ${theme.tag}` : theme.name,
                     "aria-describedby": section.group ? headingId : void 0,
                     tabIndex: at === stop ? 0 : -1,
                     disabled,
@@ -83,7 +84,8 @@ function ThemeGallery({
                       /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-gallery__label", children: [
                         /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__name", children: theme.name }),
                         chosen ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-theme-gallery__check", "aria-hidden": "true" }) : null
-                      ] })
+                      ] }),
+                      theme.tag && theme.tagTone ? theme.tagTone === "brand" ? /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__tag crewlet-theme-gallery__tag--brand", children: /* @__PURE__ */ jsx(Tag, { size: "xs", variant: "brand", children: theme.tag }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__tag", title: theme.tag, children: theme.tag }) : null
                     ]
                   },
                   theme.id

package/dist/chunk-UZMNR366.js

@@ -0,0 +1,9 @@
+import { parseHex } from '@crewlethq/tokens';
+
+// src/utils/hexColour.ts
+function normalizeHex(value) {
+  if (typeof value !== "string") return null;
+  return parseHex(value) === null ? null : value.trim().toLowerCase();
+}
+
+export { normalizeHex };

package/dist/{chunk-CWKWMIIJ.js → chunk-V7GOOXPK.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-6R5BSA36.js';
+import { Composer } from './chunk-GHY63X4C.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-7JED2NYP.js → chunk-VBIM6HFC.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-6AKG2VLR.js';
+import { Modal } from './chunk-YCC2S7DF.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';

package/dist/{chunk-U4HOKU6P.js → chunk-VN47PYUF.js}

@@ -1,14 +1,14 @@
-import { SegmentedControl } from './chunk-6FVGSWLS.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { ArtifactIcon } from './chunk-ILDNJHRU.js';
+import { SegmentedControl } from './chunk-6FVGSWLS.js';
+import { ArtifactIcon } from './chunk-AVL52EME.js';
 import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactBar-6PGWGKN2.css';
+import './ArtifactKinds-O3CALPVX.css';
+import './ArtifactBar-UMZCTARR.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -250,7 +250,7 @@ function BarTitle({
     el?.select();
   }, [editing]);
   if (onRename === void 0) {
-    return /* @__PURE__ */ jsx(Heading, { id, className: "crewlet-artifact-bar__title", title, children: title });
+    return /* @__PURE__ */ jsx(Heading, { id, className: "crewlet-artifact-bar__title", title, children: /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__text", children: title }) });
   }
   const finish = (refocus) => {
     settled.current = true;

package/dist/{chunk-MUQJCH2Y.js → chunk-VTSJMDGP.js}

@@ -2,9 +2,9 @@ import { Select } from './chunk-XQZ6EWOE.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
 import { HueSwatch } from './chunk-34RMTXDZ.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Checkbox } from './chunk-F57N6ZJG.js';
-import { FormField, Input } from './chunk-EXRRTKWT.js';
+import { Checkbox } from './chunk-NCHKKYPQ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { FormField, Input } from './chunk-EXRRTKWT.js';
 import { Menu } from './chunk-TMM32U7D.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';