@crewlethq/ui 0.54.1 → 0.56.0

package/dist/utils/index.js

@@ -1,5 +1,5 @@
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
-export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.js';
+export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-YNRKVY7X.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';

package/dist/utils/useDownload.d.ts

@@ -10,6 +10,12 @@ export interface Download {
      * text may be a thunk, resolved on the press.
      */
     download: (text: string | (() => string), filename: string, mime?: string) => Promise<boolean>;
+    /**
+     * Offers a file the caller fetches on the press (an export the server
+     * builds), and answers whether the browser took it. A fetch that rejects is
+     * a refusal, never an uncaught error: the control says the download failed.
+     */
+    downloadFile: (file: () => Promise<Blob>, filename: string) => Promise<boolean>;
 }
 /**
  * Handing text to the reader as a file, and saying whether it landed: the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.54.1",
+  "version": "0.56.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.54.1",
-    "@crewlethq/tokens": "0.54.1",
+    "@crewlethq/icons": "0.56.0",
+    "@crewlethq/tokens": "0.56.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/ArtifactPanel-KKUUIPEU.css

@@ -1,159 +0,0 @@
-/*
- * The workspace is a row: the artifact's body, then at most one panel. The
- * body scrolls itself, so a panel beside it stays in view however far the
- * artifact is read; the panel's own body scrolls under its head.
- *
- * ONE HAIRLINE between the two, the panel's start edge, and none at the
- * workspace's own edges: whatever frames the workspace already draws those.
- */
-
-.crewlet-artifact-workspace {
-  container: crewlet-artifact-workspace / inline-size;
-  position: relative;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-}
-
-.crewlet-artifact-workspace__body {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
-.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
-  display: none;
-}
-
-.crewlet-artifact-panel {
-  /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
-     those moved the artifact's edge 80px between Details and History. */
-  --crewlet-artifact-panel-width: 22.5rem;
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  width: var(--crewlet-artifact-panel-width);
-  min-height: 0;
-  border-left: 1px solid var(--color-border-default);
-  background: var(--color-surface-background);
-}
-
-.crewlet-artifact-panel--lg {
-  --crewlet-artifact-panel-width: 36rem;
-}
-
-.crewlet-artifact-panel[data-expanded] {
-  flex: 1 1 auto;
-  width: auto;
-  border-left: 0;
-}
-
-.crewlet-artifact-panel__head {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-2);
-  height: var(--size-row-lg);
-  padding: 0 var(--spacing-2) 0 var(--spacing-4);
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-.crewlet-artifact-panel__icon {
-  display: inline-flex;
-  flex: none;
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-artifact-panel__title {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-artifact-panel__title:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-  border-radius: var(--radius-sm);
-}
-
-.crewlet-artifact-panel__actions {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-/* THE BODY'S INSET IS PUBLISHED (--crewlet-artifact-panel-inset) for content
-   that sticks to its scrollport: a sticky edge stops at the padding, so a
-   foot with `bottom: 0` left a band under it that the content scrolled
-   through; such a foot offsets itself by the inset to sit on the edge. */
-.crewlet-artifact-panel__body {
-  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
-     rather than the window's; and its sections head at the panel title's
-     step, a level under it and never louder than it. */
-  container: crewlet-artifact-panel / inline-size;
-  --crewlet-section-title-size: var(--font-size-sm);
-  --crewlet-artifact-panel-inset: var(--spacing-4);
-
-  /* A COLUMN, so content that should fit the panel rather than scroll it
-     can: a child that sets `min-height: 0` shrinks to the room the body has
-     (a sheet's rows, whose grid then scrolls itself), and every other child
-     keeps its content's height and scrolls the body as before. */
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: var(--crewlet-artifact-panel-inset);
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
-   stays in reach at every scroll. Its inset is the body's. */
-.crewlet-artifact-panel__foot {
-  flex: none;
-  padding: var(--spacing-3) var(--spacing-4);
-  border-top: 1px solid var(--color-border-default);
-  background: var(--color-surface-background);
-}
-
-/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
-   raised off it, rather than squeezing the artifact under a useful width. */
-@container crewlet-artifact-workspace (width < 960px) {
-  .crewlet-artifact-panel {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    z-index: var(--z-index-overlay);
-    width: min(var(--crewlet-artifact-panel-width), 100%);
-    /* THE DRAWER'S LIFT, the shell's own rail drawer's: the large step falls
-       below a box and left the panel's start edge reading as a cut through
-       the artifact rather than a sheet over it. */
-    box-shadow: var(--shadow-xl);
-  }
-
-  .crewlet-artifact-panel[data-expanded] {
-    inset-inline-start: 0;
-    width: auto;
-    box-shadow: none;
-  }
-}
-
-/* A PHONE: the panel is the screen until it is closed. */
-@container crewlet-artifact-workspace (width < 640px) {
-  .crewlet-artifact-panel {
-    inset-inline-start: 0;
-    width: auto;
-    border-left: 0;
-    box-shadow: none;
-  }
-}

package/dist/Composer-TXULCPPV.css

@@ -1,99 +0,0 @@
-/*
- * A message written in place: the field and its footer strip in one box. The
- * BOX takes the focus ring every field in the package draws (see Input.css):
- * an outline over its boundary, 2px for the keyboard and the hairline for a
- * pointer, so the field inside draws no border or outline of its own and the
- * footer reads as part of what is being written. It used to recolour the
- * border to the accent AND lay a 2px soft halo outside it: two highlights for
- * one state, and the loudest edge on a page whose field was focused on load.
- */
-.crewlet-composer {
-  display: grid;
-  overflow: hidden;
-  border: 1px solid var(--color-border-strong);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-background);
-  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-composer:hover {
-  border-color: var(--color-border-strong-hover);
-}
-
-/* Keyed on the FIELD, not :focus-within: the footer holds the send action,
-   and a reader tabbing onto it is shown that button's ring, not the box's. */
-.crewlet-composer:has(.crewlet-composer__field:focus-visible) {
-  outline: 2px solid var(--color-focus);
-  outline-offset: -1px;
-}
-
-:where(:root[data-crewlet-focus='pointer']) .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
-  outline-width: 1px;
-  outline-color: var(--color-border-selected);
-}
-
-.crewlet-composer .crewlet-composer__field {
-  min-height: 68px;
-  max-height: 220px;
-  padding: var(--spacing-2) var(--spacing-3);
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  resize: none;
-}
-
-/* The ring is the box's, above, so the field inside never draws one: left to
-   the textarea's own rule it would be a second ring inside the box's, and in
-   forced colours the box's outline is the one the system repaints. Stated on
-   the field at rest, at a weight the textarea's focus rule cannot outrank. */
-.crewlet-composer .crewlet-composer__field.crewlet-textarea {
-  outline: none;
-}
-
-/* Past its cap the field scrolls rather than pushing the page. */
-.crewlet-composer .crewlet-composer__field.is-auto-resize {
-  overflow-y: auto;
-}
-
-.crewlet-composer__footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
-  border-top: 1px solid var(--color-border-default);
-  background: var(--color-surface-subtle);
-}
-
-.crewlet-composer__hint {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  font-size: var(--font-size-2xs);
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-composer__counter {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-feedback-warning-ink);
-}
-
-.crewlet-composer__spacer {
-  flex: 1;
-}
-
-/* On a phone the hint goes, and a footer that held only the hint goes with it. */
-@media (width < 640px) {
-  .crewlet-composer__hint,
-  .crewlet-composer__footer[data-hint-only] {
-    display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-composer {
-    transition: none;
-  }
-}

package/dist/chunk-FZVJDJFN.js

@@ -1,54 +0,0 @@
-import { Count } from './chunk-BHHIIK3M.js';
-import { headingTag } from './chunk-PQADV6P6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function DisclosureAnatomy({
-  open,
-  onToggle,
-  title,
-  meta,
-  count,
-  mono = false,
-  actions,
-  disabled = false,
-  headingLevel,
-  triggerId,
-  panelId,
-  triggerClassName,
-  onKeyDown
-}) {
-  const trigger = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      id: triggerId,
-      className: cx("crewlet-disclosure__trigger", triggerClassName),
-      "aria-expanded": open,
-      "aria-controls": panelId,
-      disabled,
-      onClick: onToggle,
-      onKeyDown,
-      children: [
-        /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-disclosure__chevron", size: "sm" }),
-        /* @__PURE__ */ jsx("span", { className: cx("crewlet-disclosure__title", mono && "crewlet-disclosure__title--mono"), children: title }),
-        meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "crewlet-disclosure__meta", children: meta })
-        ] }),
-        count === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx(Count, { value: count })
-        ] })
-      ]
-    }
-  );
-  const Heading = headingLevel === "none" ? null : headingTag(headingLevel);
-  return /* @__PURE__ */ jsxs("div", { className: "crewlet-disclosure__bar", children: [
-    Heading === null ? trigger : /* @__PURE__ */ jsx(Heading, { className: "crewlet-disclosure__heading", children: trigger }),
-    actions === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-disclosure__actions", children: actions })
-  ] });
-}
-
-export { DisclosureAnatomy };

package/dist/chunk-IXJHTFXG.js

@@ -1,17 +0,0 @@
-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-NBDN5JZV.js

@@ -1,123 +0,0 @@
-import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
-import { IconButton } from './chunk-LACA4JGC.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactPanel-KKUUIPEU.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,
-  footer,
-  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 }) }),
-        footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__foot", children: footer }) : null
-      ]
-    }
-  );
-}
-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-UJ4VVK7R.js

@@ -1,48 +0,0 @@
-import { Kbd } from './chunk-SMBKXWML.js';
-import { Textarea } from './chunk-LJHH4WWB.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './Composer-TXULCPPV.css';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var COMPOSER_COUNTER_AT = 0.8;
-var Composer = forwardRef(function Composer2({ value, onChange, onSubmit, label, actions, maxLength, className, rows = 3, onKeyDown, ...rest }, ref) {
-  const near = maxLength !== void 0 && value.length >= maxLength * COMPOSER_COUNTER_AT;
-  const hasActions = actions !== void 0 && actions !== null && actions !== false;
-  const keyDown = (event) => {
-    onKeyDown?.(event);
-    if (event.defaultPrevented || !onSubmit) return;
-    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-      event.preventDefault();
-      onSubmit();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-composer", className), children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        ref,
-        className: "crewlet-composer__field",
-        "aria-label": label,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        onKeyDown: keyDown,
-        maxLength,
-        rows,
-        autoResize: true,
-        ...rest
-      }
-    ),
-    onSubmit || near || hasActions ? /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__footer", "data-hint-only": !near && !hasActions || void 0, children: [
-      onSubmit ? /* @__PURE__ */ jsxs("span", { className: "crewlet-composer__hint", children: [
-        /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
-        " to send"
-      ] }) : null,
-      near ? /* @__PURE__ */ jsx("span", { className: "crewlet-composer__counter", "aria-live": "polite", children: `${value.length.toLocaleString()} / ${maxLength.toLocaleString()}` }) : null,
-      /* @__PURE__ */ jsx("span", { className: "crewlet-composer__spacer" }),
-      actions
-    ] }) : null
-  ] });
-});
-
-export { COMPOSER_COUNTER_AT, Composer };

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

@@ -1,6 +1,6 @@
 import { ThemeSwatch } from './chunk-MNFU2RNT.js';
-import { Tag } from './chunk-KYIAFNU7.js';
 import { useHighlightRest } from './chunk-7KHM2FZH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ThemeGallery-UEFZRT6W.css';