@crewlethq/ui 0.24.0 → 0.26.0

package/dist/utils/csv.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One table as RFC 4180 CSV: a header row, then one record a row, every line
+ * ended by CRLF.
+ *
+ * A field is quoted when it holds a comma, a double quote, a carriage return or
+ * a line feed, and a quote inside it is doubled. `null` and `undefined` are an
+ * empty field, a number is its `String` form, a boolean is `true` or `false`, a
+ * `Date` is its ISO 8601 instant, and any other object is its JSON.
+ *
+ * TEXT THAT WOULD RUN AS A FORMULA IS DEFUSED. A CSV a reader exports is
+ * opened in a spreadsheet, and a spreadsheet runs a cell that starts with `=`,
+ * `+`, `-` or `@` as a formula, which is how a value somebody else wrote (a
+ * task title, a datastore row) becomes a hyperlink that sends data off the
+ * machine or a command the application asks to run (CSV injection). Such a
+ * TEXT cell is prefixed with an apostrophe, which every spreadsheet reads as
+ * "this is text". A NUMBER is never prefixed: `-3` is a value, and stays one.
+ */
+export declare function toCsv(header: readonly string[], rows: readonly (readonly unknown[])[]): string;

package/dist/utils/elementToPng.d.ts

@@ -0,0 +1,49 @@
+/** Why an element could not be turned into an image. */
+export type ElementToPngReason = 'unsupported' | 'tainted' | 'empty';
+/**
+ * The refusal [elementToPng] answers, with a reason a host maps to its own
+ * words: `unsupported` (this browser has no canvas, or could not draw the
+ * element), `tainted` (the browser drew it and then refused to read the pixels
+ * back, which Safari does to anything drawn through `foreignObject`), and
+ * `empty` (the element has no size, so there is nothing to draw).
+ */
+export declare class ElementToPngError extends Error {
+    readonly reason: ElementToPngReason;
+    constructor(reason: ElementToPngReason, message: string);
+}
+export interface ElementToPngOptions {
+    /** The colour painted under the element. Unset, the element's own computed background, else transparent. */
+    background?: string | undefined;
+    /** Device pixels per CSS pixel. Unset, the screen's own ratio. Clamped to 1 to 3. */
+    scale?: number | undefined;
+    /** Space around the element, in CSS pixels. */
+    padding?: number | undefined;
+}
+/**
+ * Turns a drawn element (a chart) into a PNG, in the reader's own browser.
+ *
+ * WHY IN THE BROWSER: the engine renders nothing. A server that drew author
+ * content into images would be a new place for that content to execute, and it
+ * would draw one reader's figures into a file every other reader sees, where a
+ * dashboard's numbers are decided per reader. The reader already holds exactly
+ * what they are allowed to see, drawn; this copies it.
+ *
+ * TWO PATHS. An element that is, or holds nothing visible but, one `<svg>` is
+ * serialised as that SVG with every node's computed style written onto it,
+ * which every engine draws onto a canvas faithfully. Anything else (a chart
+ * drawn in HTML and CSS) is cloned with its computed styles inlined into an
+ * SVG `foreignObject`, which Chrome and Firefox draw and Safari refuses to
+ * read back: that answers `tainted`, so the host can say this browser cannot
+ * save this chart as an image rather than offering a blank file.
+ */
+export declare function elementToPng(el: Element, options?: ElementToPngOptions): Promise<Blob>;
+/**
+ * The element as one standalone SVG document of `width` by `height` CSS
+ * pixels, its content `padding` in from the edge. Exported for a host that
+ * wants the vector form itself, and for the suites.
+ */
+export declare function serializeElement(el: Element, { width, height, padding }: {
+    width: number;
+    height: number;
+    padding?: number;
+}): string;

package/dist/utils/index.d.ts

@@ -3,7 +3,10 @@ export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
 export { useOutcome } from './useOutcome.js';
 export type { Outcome, OutcomeOptions, OutcomeState } from './useOutcome.js';
-export { downloadText, safeFilename, useDownload } from './useDownload.js';
+export { downloadBlob, downloadText, safeFilename, useDownload } from './useDownload.js';
+export { toCsv } from './csv.js';
+export { ElementToPngError, elementToPng, serializeElement } from './elementToPng.js';
+export type { ElementToPngOptions, ElementToPngReason } from './elementToPng.js';
 export type { Download, DownloadState } from './useDownload.js';
 export type { Tone } from './tone.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './nodeHue.js';

package/dist/utils/index.js

@@ -1,5 +1,5 @@
-import '../chunk-U5LQ2AS5.js';
-export { downloadText, safeFilename, useDownload } from '../chunk-F6NZOVWL.js';
+export { ElementToPngError, elementToPng, serializeElement, toCsv } from '../chunk-UOR7TOAU.js';
+export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.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

@@ -26,21 +26,31 @@ export declare function useDownload(options?: OutcomeOptions): Download;
  * it, with the name it was offered under ([safeFilename] of `filename`).
  *
  * For a control that cannot say so on itself, such as a menu item that
- * closes on the press: the caller raises a toast from the answer.
+ * closes on the press: the caller raises a toast from the answer. The save
+ * itself is [downloadBlob]'s, so text and binary files share one path.
+ */
+export declare function downloadText(text: string, filename: string, mime?: string): {
+    started: boolean;
+    name: string;
+};
+/**
+ * Saves `blob` on the reader's machine and reports whether the browser took
+ * it, with the name it was offered under ([safeFilename] of `filename`): a
+ * chart rasterised to PNG, an archive, any bytes the page already holds.
  *
  * TWO THINGS ARE CHECKED UP FRONT rather than assumed. Without
  * `URL.createObjectURL` there is nothing to point a saveable link at, and a
  * `data:` URL is the wrong fallback because several engines cap it near two
  * megabytes, so it would fail silently on exactly the large files. Without the
- * `download` attribute the click NAVIGATES to the text instead of saving it,
+ * `download` attribute the click NAVIGATES to the file instead of saving it,
  * which looks enough like something happening that nobody checks.
  *
  * The blob URL is revoked on the NEXT macrotask: the click only queues the
  * download, and freeing the entry inside the same task races the fetch that is
  * about to read it. Never revoking is the other failure, a second copy of the
- * text held for the life of the tab.
+ * bytes held for the life of the tab.
  */
-export declare function downloadText(text: string, filename: string, mime?: string): {
+export declare function downloadBlob(blob: Blob, filename: string): {
     started: boolean;
     name: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.24.0",
+  "version": "0.26.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.24.0",
-    "@crewlethq/tokens": "0.24.0",
+    "@crewlethq/icons": "0.26.0",
+    "@crewlethq/tokens": "0.26.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/chunk-E6UWRXNM.js

@@ -1,52 +0,0 @@
-import { useAnnouncer } from './chunk-RSAQOKH3.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './TagGroup-BCQZD7ZD.css';
-import { useState, useRef, Children } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function TagGroup({
-  label,
-  max = 6,
-  moreLabel = (hidden) => `+${hidden} more`,
-  expandedMessage = (total) => `Showing all ${total}.`,
-  className,
-  children
-}) {
-  const [open, setOpen] = useState(false);
-  const announce = useAnnouncer();
-  const list = useRef(null);
-  const all = Children.toArray(children);
-  const shown = open ? all : all.slice(0, max);
-  const hidden = all.length - shown.length;
-  return /* @__PURE__ */ jsxs(
-    "ul",
-    {
-      ref: list,
-      tabIndex: -1,
-      className: cx("crewlet-tag-group", className),
-      "aria-label": `${label}, ${all.length}`,
-      children: [
-        shown.map((tag, index) => (
-          // Keyed by position: the list only ever grows at the end, as the tail
-          // is revealed, so no item ever changes the index it sits at.
-          /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: tag }, index)
-        )),
-        hidden > 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-tag-group__more",
-            onClick: () => {
-              setOpen(true);
-              list.current?.focus();
-              announce(expandedMessage(all.length));
-            },
-            children: moreLabel(hidden)
-          }
-        ) }) : null
-      ]
-    }
-  );
-}
-
-export { TagGroup };

package/dist/chunk-M54K52ZU.js

@@ -1,2 +0,0 @@
-import './Tabs-CJGO35BH.css';
-import './SegmentedControl-PKBLJVSA.css';

package/dist/chunk-U5LQ2AS5.js

@@ -1 +0,0 @@
-

package/dist/{chunk-KG6XRG5Z.js → chunk-5OY4LJFH.js}

@@ -1,9 +1,9 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
 import { Modal } from './chunk-F4DPAJCN.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
+import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Popover } from './chunk-BWRGFKJP.js';
-import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';

package/dist/{chunk-ZM7HLFOA.js → chunk-L2OQRPXJ.js}

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

package/dist/{chunk-MUGM7SEG.js → chunk-LFNUH4GY.js}

@@ -1,5 +1,5 @@
-import { Tag } from './chunk-GFV4LJHH.js';
 import { Link } from './chunk-FBSEJO2C.js';
+import { Tag } from './chunk-GFV4LJHH.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Avatar } from './chunk-5OM447RW.js';

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

@@ -1,5 +1,5 @@
-import { Document } from './chunk-WI6K5M5X.js';
 import { Composer } from './chunk-RIEDQSA4.js';
+import { Document } from './chunk-WI6K5M5X.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';