@k2b/ui 0.18.0 → 0.20.0

package/dist/browser/inputs/signature.js

@@ -0,0 +1,208 @@
+/**
+ * A signature as the field reports it. `kind` records how it was given, so the
+ * application can keep that fact next to the image. `svg` is a standalone SVG
+ * document whose ink uses `currentColor`, so it renders black as an image. A
+ * value that arrives from a browser is untrusted input: read it with
+ * `parseSignature` before storing or embedding it.
+ */
+
+/** One sampled pointer position in drawing units, with a pressure from 0 to 1. */
+
+/** The drawing space as an SVG viewBox and one closed outline path per stroke. */
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+/** Typed names are laid out at this size; the SVG scales as a whole. */
+const TYPED_FONT_SIZE = 48;
+const TYPED_PADDING = 12;
+const round = value => Math.round(value * 10) / 10;
+const point = (x, y) => `${round(x)} ${round(y)}`;
+
+/** Control characters, lone surrogates, and the two noncharacters XML forbids, which a strict XML parser rejects. */
+const NOT_XML_TEXT = /[\p{Cc}\p{Cs}\uFFFE\uFFFF]/gu;
+
+/** Escapes text for XML content or attributes and drops characters XML cannot hold, so the document stays well-formed. */
+export const escapeXml = text => text.replace(NOT_XML_TEXT, "").replace(/[&<>"']/g, char => ({
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&apos;"
+})[char] ?? char);
+const unescapeXml = text => text.replace(/&(amp|lt|gt|quot|apos);/g, (_, name) => ({
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'"
+})[name] ?? "");
+
+/** The name as a typed signature stores it: without characters an SVG cannot hold and without surrounding space. */
+export const signatureName = name => name.replace(NOT_XML_TEXT, "").trim();
+
+/** Stroke width in drawing units at a pressure: light pressure still leaves a readable line. */
+export const strokeWidth = (size, pressure) => size * (0.35 + 0.65 * Math.min(1, Math.max(0, pressure)));
+
+/**
+ * Turns sampled points into one filled outline: both edges follow the points at
+ * half the local stroke width and are smoothed through their midpoints, and
+ * round caps close the ends. A filled outline, unlike a stroked path, can change
+ * width along the line, so pen pressure and drawing speed show in the ink.
+ */
+export const strokeOutline = (points, size) => {
+  const first = points[0];
+  if (!first) return "";
+  if (points.length === 1) {
+    const radius = round(strokeWidth(size, first.pressure) / 2);
+    const arc = x => `A${radius} ${radius} 0 1 0 ${point(x, first.y)}`;
+    return `M${point(first.x - radius, first.y)}${arc(first.x + radius)}${arc(first.x - radius)}Z`;
+  }
+  const left = [];
+  const right = [];
+  points.forEach((current, index) => {
+    const before = points[index - 1] ?? current;
+    const after = points[index + 1] ?? current;
+    const dx = after.x - before.x;
+    const dy = after.y - before.y;
+    const length = Math.hypot(dx, dy) || 1;
+    const radius = strokeWidth(size, current.pressure) / 2;
+    const nx = -dy / length * radius;
+    const ny = dx / length * radius;
+    left.push({
+      x: current.x + nx,
+      y: current.y + ny,
+      radius
+    });
+    right.push({
+      x: current.x - nx,
+      y: current.y - ny,
+      radius
+    });
+  });
+  right.reverse();
+  // Quadratic segments through the midpoints of neighbouring edge points keep the outline smooth without overshoot.
+  const edge = side => side.map((current, index) => {
+    if (index === 0) return "";
+    const next = side[index + 1];
+    if (!next) return `L${point(current.x, current.y)}`;
+    return `Q${point(current.x, current.y)} ${point((current.x + next.x) / 2, (current.y + next.y) / 2)}`;
+  }).join("");
+  const cap = (from, to) => `A${round(from.radius)} ${round(from.radius)} 0 0 0 ${point(to.x, to.y)}`;
+  const start = left[0] ?? right[0];
+  const end = left[left.length - 1];
+  const back = right[0];
+  const backEnd = right[right.length - 1];
+  if (!start || !end || !back || !backEnd) return "";
+  return `M${point(start.x, start.y)}${edge(left)}${cap(end, back)}${edge(right)}${cap(backEnd, start)}Z`;
+};
+
+/** Serializes a drawing as a standalone SVG document; an empty drawing has no value. */
+export const drawingToSvg = drawing => {
+  if (drawing.strokes.length === 0) return null;
+  const width = round(drawing.width);
+  const height = round(drawing.height);
+  const paths = drawing.strokes.map(stroke => `<path d="${escapeXml(stroke)}"/>`).join("");
+  return `<svg xmlns="${SVG_NS}" viewBox="${round(drawing.x)} ${round(drawing.y)} ${width} ${height}" width="${width}" height="${height}"><g fill="currentColor">${paths}</g></svg>`;
+};
+const NUMBER = String.raw`-?\d+(?:\.\d+)?`;
+const SVG_NS_PATTERN = String.raw`http://www\.w3\.org/2000/svg`;
+// Exactly the markup drawingToSvg and typedToSvg write. Path data may only hold the commands and numbers strokeOutline
+// emits, and no attribute or text may hold markup, so a match cannot carry scripts, links, or other elements.
+const DRAWN_SVG = new RegExp(`^<svg xmlns="${SVG_NS_PATTERN}" viewBox="(${NUMBER}) (${NUMBER}) (${NUMBER}) (${NUMBER})" width="${NUMBER}" height="${NUMBER}">` + `<g fill="currentColor">((?:<path d="[MLQAZ\\d .-]+"/>)+)</g></svg>$`);
+const TYPED_SVG = new RegExp(`^<svg xmlns="${SVG_NS_PATTERN}" viewBox="0 0 (\\d+) \\d+" width="\\d+" height="\\d+">` + `<text x="\\d+" y="\\d+" font-family="([^"<>]*)" font-size="\\d+" fill="currentColor">[^<>]*</text></svg>$`);
+
+/** Reads the drawing space and strokes back from an SVG drawingToSvg wrote, so a stored signature can be extended or undone. */
+export const svgToDrawing = svg => {
+  const match = DRAWN_SVG.exec(svg);
+  if (!match) return null;
+  const [x = 0, y = 0, width = 0, height = 0] = match.slice(1, 5).map(Number);
+  if (width <= 0 || height <= 0) return null;
+  const strokes = [...(match[5] ?? "").matchAll(/<path d="([^"]+)"\/>/g)].flatMap(path => path[1] ? [path[1]] : []);
+  return {
+    x,
+    y,
+    width,
+    height,
+    strokes
+  };
+};
+
+/**
+ * Lays out a typed name as an SVG document in the given font family. `measure`
+ * returns the text width at `TYPED_FONT_SIZE`; without one, the width is estimated.
+ */
+export const typedToSvg = (name, fontFamily, measure) => {
+  const font = `${TYPED_FONT_SIZE}px ${fontFamily}`;
+  const textWidth = measure?.(name, font) ?? name.length * TYPED_FONT_SIZE * 0.5;
+  const width = Math.ceil(textWidth + TYPED_PADDING * 2);
+  const height = Math.ceil(TYPED_FONT_SIZE * 1.6);
+  const baseline = Math.round(TYPED_FONT_SIZE * 1.15);
+  return `<svg xmlns="${SVG_NS}" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">` + `<text x="${TYPED_PADDING}" y="${baseline}" font-family="${escapeXml(fontFamily)}" font-size="${TYPED_FONT_SIZE}" fill="currentColor">${escapeXml(name)}</text></svg>`;
+};
+
+/**
+ * Reads a submitted signature on the server: the JSON string of the field's
+ * hidden input, or a value the browser sent as JSON. It accepts only markup
+ * the field writes and returns it rebuilt, so the result is safe to store and
+ * to embed. An empty or invalid value returns `null`.
+ */
+export const parseSignature = input => {
+  let value = input;
+  if (typeof input === "string") {
+    if (!input) return null;
+    try {
+      value = JSON.parse(input);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof value !== "object" || value === null || !("kind" in value) || !("svg" in value) || typeof value.svg !== "string") return null;
+  if (value.kind === "drawn") {
+    const drawing = svgToDrawing(value.svg);
+    const svg = drawing && drawingToSvg(drawing);
+    return svg ? {
+      kind: "drawn",
+      svg
+    } : null;
+  }
+  if (value.kind !== "typed" || !("name" in value) || typeof value.name !== "string") return null;
+  const name = signatureName(value.name);
+  const match = TYPED_SVG.exec(value.svg);
+  if (!name || !match) return null;
+  const textWidth = Number(match[1]) - TYPED_PADDING * 2;
+  return {
+    kind: "typed",
+    name,
+    svg: typedToSvg(name, unescapeXml(match[2] ?? ""), () => Math.max(0, textWidth))
+  };
+};
+/**
+ * Rasterizes a signature into a PNG data URL in the browser, for a document or
+ * service that needs a bitmap. A typed signature renders with the fonts
+ * installed on this device: an SVG image cannot use the page's web fonts.
+ */
+export const signatureToPng = async (value, options = {}) => {
+  const viewBox = /viewBox="-?[\d.]+ -?[\d.]+ ([\d.]+) ([\d.]+)"/.exec(value.svg);
+  if (!viewBox) throw new Error("The signature SVG has no drawing size.");
+  const scale = options.scale ?? 2;
+  const width = Math.max(1, Math.round(Number(viewBox[1]) * scale));
+  const height = Math.max(1, Math.round(Number(viewBox[2]) * scale));
+  const svg = value.svg.replace("<svg ", `<svg color="${escapeXml(options.color ?? "#000000")}" `);
+  const image = new Image();
+  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  await image.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("This browser cannot draw a signature image.");
+  if (options.background) {
+    context.fillStyle = options.background;
+    context.fillRect(0, 0, width, height);
+  }
+  context.drawImage(image, 0, 0, width, height);
+  const url = canvas.toDataURL("image/png");
+  // A canvas beyond the browser's size limit returns "data:," instead of failing.
+  if (!url.startsWith("data:image/png")) throw new Error("The signature is too large for a PNG at this scale.");
+  return url;
+};
+//# sourceMappingURL=signature.js.map

package/dist/browser/inputs/signature.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/signature.ts"],"sourcesContent":["/**\n * A signature as the field reports it. `kind` records how it was given, so the\n * application can keep that fact next to the image. `svg` is a standalone SVG\n * document whose ink uses `currentColor`, so it renders black as an image. A\n * value that arrives from a browser is untrusted input: read it with\n * `parseSignature` before storing or embedding it.\n */\nexport type SignatureValue = { kind: \"drawn\"; svg: string } | { kind: \"typed\"; name: string; svg: string };\n\n/** One sampled pointer position in drawing units, with a pressure from 0 to 1. */\nexport type SignaturePoint = { x: number; y: number; pressure: number };\n\n/** The drawing space as an SVG viewBox and one closed outline path per stroke. */\nexport type SignatureDrawing = { x: number; y: number; width: number; height: number; strokes: readonly string[] };\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\n/** Typed names are laid out at this size; the SVG scales as a whole. */\nconst TYPED_FONT_SIZE = 48;\nconst TYPED_PADDING = 12;\n\nconst round = (value: number) => Math.round(value * 10) / 10;\nconst point = (x: number, y: number) => `${round(x)} ${round(y)}`;\n\n/** Control characters, lone surrogates, and the two noncharacters XML forbids, which a strict XML parser rejects. */\nconst NOT_XML_TEXT = /[\\p{Cc}\\p{Cs}\\uFFFE\\uFFFF]/gu;\n\n/** Escapes text for XML content or attributes and drops characters XML cannot hold, so the document stays well-formed. */\nexport const escapeXml = (text: string): string =>\n  text\n    .replace(NOT_XML_TEXT, \"\")\n    .replace(/[&<>\"']/g, (char) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&apos;\" })[char] ?? char);\n\nconst unescapeXml = (text: string): string =>\n  text.replace(/&(amp|lt|gt|quot|apos);/g, (_, name: string) => ({ amp: \"&\", lt: \"<\", gt: \">\", quot: '\"', apos: \"'\" })[name] ?? \"\");\n\n/** The name as a typed signature stores it: without characters an SVG cannot hold and without surrounding space. */\nexport const signatureName = (name: string): string => name.replace(NOT_XML_TEXT, \"\").trim();\n\n/** Stroke width in drawing units at a pressure: light pressure still leaves a readable line. */\nexport const strokeWidth = (size: number, pressure: number): number => size * (0.35 + 0.65 * Math.min(1, Math.max(0, pressure)));\n\n/**\n * Turns sampled points into one filled outline: both edges follow the points at\n * half the local stroke width and are smoothed through their midpoints, and\n * round caps close the ends. A filled outline, unlike a stroked path, can change\n * width along the line, so pen pressure and drawing speed show in the ink.\n */\nexport const strokeOutline = (points: readonly SignaturePoint[], size: number): string => {\n  const first = points[0];\n  if (!first) return \"\";\n  if (points.length === 1) {\n    const radius = round(strokeWidth(size, first.pressure) / 2);\n    const arc = (x: number) => `A${radius} ${radius} 0 1 0 ${point(x, first.y)}`;\n    return `M${point(first.x - radius, first.y)}${arc(first.x + radius)}${arc(first.x - radius)}Z`;\n  }\n  type Edge = { x: number; y: number; radius: number };\n  const left: Edge[] = [];\n  const right: Edge[] = [];\n  points.forEach((current, index) => {\n    const before = points[index - 1] ?? current;\n    const after = points[index + 1] ?? current;\n    const dx = after.x - before.x;\n    const dy = after.y - before.y;\n    const length = Math.hypot(dx, dy) || 1;\n    const radius = strokeWidth(size, current.pressure) / 2;\n    const nx = (-dy / length) * radius;\n    const ny = (dx / length) * radius;\n    left.push({ x: current.x + nx, y: current.y + ny, radius });\n    right.push({ x: current.x - nx, y: current.y - ny, radius });\n  });\n  right.reverse();\n  // Quadratic segments through the midpoints of neighbouring edge points keep the outline smooth without overshoot.\n  const edge = (side: readonly Edge[]) =>\n    side\n      .map((current, index) => {\n        if (index === 0) return \"\";\n        const next = side[index + 1];\n        if (!next) return `L${point(current.x, current.y)}`;\n        return `Q${point(current.x, current.y)} ${point((current.x + next.x) / 2, (current.y + next.y) / 2)}`;\n      })\n      .join(\"\");\n  const cap = (from: Edge, to: Edge) => `A${round(from.radius)} ${round(from.radius)} 0 0 0 ${point(to.x, to.y)}`;\n  const start = left[0] ?? right[0];\n  const end = left[left.length - 1];\n  const back = right[0];\n  const backEnd = right[right.length - 1];\n  if (!start || !end || !back || !backEnd) return \"\";\n  return `M${point(start.x, start.y)}${edge(left)}${cap(end, back)}${edge(right)}${cap(backEnd, start)}Z`;\n};\n\n/** Serializes a drawing as a standalone SVG document; an empty drawing has no value. */\nexport const drawingToSvg = (drawing: SignatureDrawing): string | null => {\n  if (drawing.strokes.length === 0) return null;\n  const width = round(drawing.width);\n  const height = round(drawing.height);\n  const paths = drawing.strokes.map((stroke) => `<path d=\"${escapeXml(stroke)}\"/>`).join(\"\");\n  return `<svg xmlns=\"${SVG_NS}\" viewBox=\"${round(drawing.x)} ${round(drawing.y)} ${width} ${height}\" width=\"${width}\" height=\"${height}\"><g fill=\"currentColor\">${paths}</g></svg>`;\n};\n\nconst NUMBER = String.raw`-?\\d+(?:\\.\\d+)?`;\nconst SVG_NS_PATTERN = String.raw`http://www\\.w3\\.org/2000/svg`;\n// Exactly the markup drawingToSvg and typedToSvg write. Path data may only hold the commands and numbers strokeOutline\n// emits, and no attribute or text may hold markup, so a match cannot carry scripts, links, or other elements.\nconst DRAWN_SVG = new RegExp(\n  `^<svg xmlns=\"${SVG_NS_PATTERN}\" viewBox=\"(${NUMBER}) (${NUMBER}) (${NUMBER}) (${NUMBER})\" width=\"${NUMBER}\" height=\"${NUMBER}\">` +\n    `<g fill=\"currentColor\">((?:<path d=\"[MLQAZ\\\\d .-]+\"/>)+)</g></svg>$`,\n);\nconst TYPED_SVG = new RegExp(\n  `^<svg xmlns=\"${SVG_NS_PATTERN}\" viewBox=\"0 0 (\\\\d+) \\\\d+\" width=\"\\\\d+\" height=\"\\\\d+\">` +\n    `<text x=\"\\\\d+\" y=\"\\\\d+\" font-family=\"([^\"<>]*)\" font-size=\"\\\\d+\" fill=\"currentColor\">[^<>]*</text></svg>$`,\n);\n\n/** Reads the drawing space and strokes back from an SVG drawingToSvg wrote, so a stored signature can be extended or undone. */\nexport const svgToDrawing = (svg: string): SignatureDrawing | null => {\n  const match = DRAWN_SVG.exec(svg);\n  if (!match) return null;\n  const [x = 0, y = 0, width = 0, height = 0] = match.slice(1, 5).map(Number);\n  if (width <= 0 || height <= 0) return null;\n  const strokes = [...(match[5] ?? \"\").matchAll(/<path d=\"([^\"]+)\"\\/>/g)].flatMap((path) => (path[1] ? [path[1]] : []));\n  return { x, y, width, height, strokes };\n};\n\n/**\n * Lays out a typed name as an SVG document in the given font family. `measure`\n * returns the text width at `TYPED_FONT_SIZE`; without one, the width is estimated.\n */\nexport const typedToSvg = (name: string, fontFamily: string, measure?: (text: string, font: string) => number | undefined): string => {\n  const font = `${TYPED_FONT_SIZE}px ${fontFamily}`;\n  const textWidth = measure?.(name, font) ?? name.length * TYPED_FONT_SIZE * 0.5;\n  const width = Math.ceil(textWidth + TYPED_PADDING * 2);\n  const height = Math.ceil(TYPED_FONT_SIZE * 1.6);\n  const baseline = Math.round(TYPED_FONT_SIZE * 1.15);\n  return (\n    `<svg xmlns=\"${SVG_NS}\" viewBox=\"0 0 ${width} ${height}\" width=\"${width}\" height=\"${height}\">` +\n    `<text x=\"${TYPED_PADDING}\" y=\"${baseline}\" font-family=\"${escapeXml(fontFamily)}\" font-size=\"${TYPED_FONT_SIZE}\" fill=\"currentColor\">${escapeXml(name)}</text></svg>`\n  );\n};\n\n/**\n * Reads a submitted signature on the server: the JSON string of the field's\n * hidden input, or a value the browser sent as JSON. It accepts only markup\n * the field writes and returns it rebuilt, so the result is safe to store and\n * to embed. An empty or invalid value returns `null`.\n */\nexport const parseSignature = (input: unknown): SignatureValue | null => {\n  let value: unknown = input;\n  if (typeof input === \"string\") {\n    if (!input) return null;\n    try {\n      value = JSON.parse(input);\n    } catch {\n      return null;\n    }\n  }\n  if (typeof value !== \"object\" || value === null || !(\"kind\" in value) || !(\"svg\" in value) || typeof value.svg !== \"string\") return null;\n  if (value.kind === \"drawn\") {\n    const drawing = svgToDrawing(value.svg);\n    const svg = drawing && drawingToSvg(drawing);\n    return svg ? { kind: \"drawn\", svg } : null;\n  }\n  if (value.kind !== \"typed\" || !(\"name\" in value) || typeof value.name !== \"string\") return null;\n  const name = signatureName(value.name);\n  const match = TYPED_SVG.exec(value.svg);\n  if (!name || !match) return null;\n  const textWidth = Number(match[1]) - TYPED_PADDING * 2;\n  return { kind: \"typed\", name, svg: typedToSvg(name, unescapeXml(match[2] ?? \"\"), () => Math.max(0, textWidth)) };\n};\n\nexport type SignaturePngOptions = {\n  /** Device pixels per SVG unit. Defaults to `2`. */\n  scale?: number;\n  /** Ink colour. Defaults to `\"#000000\"`. */\n  color?: string;\n  /** Background fill. Defaults to transparent. */\n  background?: string;\n};\n\n/**\n * Rasterizes a signature into a PNG data URL in the browser, for a document or\n * service that needs a bitmap. A typed signature renders with the fonts\n * installed on this device: an SVG image cannot use the page's web fonts.\n */\nexport const signatureToPng = async (value: SignatureValue, options: SignaturePngOptions = {}): Promise<string> => {\n  const viewBox = /viewBox=\"-?[\\d.]+ -?[\\d.]+ ([\\d.]+) ([\\d.]+)\"/.exec(value.svg);\n  if (!viewBox) throw new Error(\"The signature SVG has no drawing size.\");\n  const scale = options.scale ?? 2;\n  const width = Math.max(1, Math.round(Number(viewBox[1]) * scale));\n  const height = Math.max(1, Math.round(Number(viewBox[2]) * scale));\n  const svg = value.svg.replace(\"<svg \", `<svg color=\"${escapeXml(options.color ?? \"#000000\")}\" `);\n  const image = new Image();\n  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;\n  await image.decode();\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"This browser cannot draw a signature image.\");\n  if (options.background) {\n    context.fillStyle = options.background;\n    context.fillRect(0, 0, width, height);\n  }\n  context.drawImage(image, 0, 0, width, height);\n  const url = canvas.toDataURL(\"image/png\");\n  // A canvas beyond the browser's size limit returns \"data:,\" instead of failing.\n  if (!url.startsWith(\"data:image/png\")) throw new Error(\"The signature is too large for a PNG at this scale.\");\n  return url;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/internal/render-error.js

@@ -0,0 +1,49 @@
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ErrorBoundary, untrack } from "solid-js";
+import { Button } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
+import Placeholder from "../surfaces/Placeholder";
+
+/**
+ * Guards a Solid root that @k2b/ui creates itself, such as a dialog or a floating window. These roots are mostly
+ * opened from a click handler, outside any owner and any island boundary. Without a boundary of their own, content
+ * that throws on an update throws into the code that wrote the signal and leaves other parts of the page stale.
+ * The content is created untracked, as `render()` and components create it, so a signal it reads directly does not
+ * rebuild it. `onClose` adds a Close button for a root whose content draws its own close control.
+ */
+export function RenderErrorBoundary(props) {
+  return _$createComponent(ErrorBoundary, {
+    fallback: error => {
+      globalThis.reportError(error);
+      props.onError?.();
+      return _$createComponent(RenderErrorNotice, {
+        get onClose() {
+          return props.onClose;
+        }
+      });
+    },
+    get children() {
+      return untrack(props.content);
+    }
+  });
+}
+function RenderErrorNotice(props) {
+  const messages = useUiMessages();
+  return _$createComponent(Placeholder, {
+    state: "error",
+    get title() {
+      return messages().couldNotDisplayContent;
+    },
+    get action() {
+      return _$memo(() => !!props.onClose)() ? _$createComponent(Button, {
+        variant: "secondary",
+        onClick: () => props.onClose?.(),
+        get children() {
+          return messages().close;
+        }
+      }) : undefined;
+    }
+  });
+}
+//# sourceMappingURL=render-error.js.map

package/dist/browser/internal/render-error.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["internal/render-error.tsx"],"sourcesContent":["import { ErrorBoundary, type JSX, untrack } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport Placeholder from \"../surfaces/Placeholder\";\n\n/**\n * Guards a Solid root that @k2b/ui creates itself, such as a dialog or a floating window. These roots are mostly\n * opened from a click handler, outside any owner and any island boundary. Without a boundary of their own, content\n * that throws on an update throws into the code that wrote the signal and leaves other parts of the page stale.\n * The content is created untracked, as `render()` and components create it, so a signal it reads directly does not\n * rebuild it. `onClose` adds a Close button for a root whose content draws its own close control.\n */\nexport function RenderErrorBoundary(props: { content: () => JSX.Element; onClose?: () => void; onError?: () => void }): JSX.Element {\n  return (\n    <ErrorBoundary\n      fallback={(error: unknown) => {\n        globalThis.reportError(error);\n        props.onError?.();\n        return <RenderErrorNotice onClose={props.onClose} />;\n      }}\n    >\n      {untrack(props.content)}\n    </ErrorBoundary>\n  );\n}\n\nfunction RenderErrorNotice(props: { onClose?: () => void }): JSX.Element {\n  const messages = useUiMessages();\n  return (\n    <Placeholder\n      state=\"error\"\n      title={messages().couldNotDisplayContent}\n      action={\n        props.onClose ? (\n          <Button variant=\"secondary\" onClick={() => props.onClose?.()}>\n            {messages().close}\n          </Button>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"mappings":";;AAAA,SAAS,aAAa,EAAY,OAAO,QAAQ,UAAU;AAC3D,SAAS,MAAM,QAAQ,mBAAmB;AAC1C,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,yBAAyB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,mBAAmB,CAAC,KAAiF,EAAe;EAClI,yBACG,aAAa;IACZ,QAAQ,EAAG,KAAc,IAAK;MAC5B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC;MAC7B,KAAK,CAAC,OAAO,GAAG,CAAC;MACjB,yBAAQ,iBAAiB;QAAA,IAAC,OAAO;UAAA,OAAE,KAAK,CAAC,OAAO;QAAA;MAAA;IAClD,CAAC;IAAA;MAAA,OAEA,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;IAAA;EAAA;AAG7B;AAEA,SAAS,iBAAiB,CAAC,KAA+B,EAAe;EACvE,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,yBACG,WAAW;IACV,KAAK;IAAA,IACL,KAAK;MAAA,OAAE,QAAQ,CAAC,CAAC,CAAC,sBAAsB;IAAA;IAAA,IACxC,MAAM;MAAA,OACJ,oBAAK,CAAC,OAAO,wBACV,MAAM;QAAC,OAAO;QAAa,OAAO,EAAE,MAAM,KAAK,CAAC,OAAO,GAAG,CAAC;QAAA;UAAA,OACzD,QAAQ,CAAC,CAAC,CAAC,KAAK;QAAA;MAAA,KAEjB,SAAS;IAAA;EAAA;AAIrB","ignoreList":[]}

package/dist/browser/intl/messages.js

@@ -54,6 +54,7 @@ const uiMessages = i18n.define({
       copy: "Copy",
       closeLightbox: "Close lightbox",
       couldNotLoadData: "Could not load this data",
+      couldNotDisplayContent: "This content could not be displayed.",
       datePicker: "Date picker",
       dataTable: "Data table",
       datePresets: "Date presets",
@@ -200,6 +201,28 @@ const uiMessages = i18n.define({
         start,
         end
       }) => `${title}, ${start} to ${end}`,
+      timeline: "Timeline",
+      timelineHint: "Arrow keys move between items, Page Up and Page Down between days, Home and End to the first and last item of a day, T to now.",
+      timelineTimeRange: ({
+        start,
+        end
+      }) => `${start} to ${end}`,
+      timelineDone: "done",
+      timelineOpen: "open",
+      timelineNight: ({
+        start,
+        end
+      }) => `Night · ${start}–${end}`,
+      timelineNothingPlanned: "Nothing planned",
+      timelineFree: ({
+        duration
+      }) => `${duration} free`,
+      timelineMore: ({
+        count
+      }) => `${count} more`,
+      timelineNow: ({
+        time
+      }) => `Now, ${time}`,
       today: "Today",
       day: "Day",
       week: "Week",
@@ -263,6 +286,10 @@ const uiMessages = i18n.define({
         time
       }) => `Last reply ${time}`,
       messageStop: "Stop",
+      resourceUntitled: "Untitled",
+      resourceNoAccess: "No access",
+      resourceDeleted: "Item deleted",
+      resourceUnavailable: "Not available right now",
       conversationMessages: ({
         label
       }) => `${label} messages`,
@@ -410,6 +437,13 @@ const uiMessages = i18n.define({
         label
       }) => `Move ${label} up`,
       rowAction: "Row action",
+      sidebarUnread: ({
+        count
+      }) => `${count} unread`,
+      sidebarUnreadMany: "more than 99 unread",
+      sidebarNewActivity: "new activity",
+      sidebarMentioned: "mentions you",
+      sidebarMuted: "muted",
       addToNamed: ({
         name
       }) => `Add to ${name}`,
@@ -446,6 +480,8 @@ const uiMessages = i18n.define({
         status
       }) => `PDF preview failed with HTTP ${status}`,
       pdfPreviewTabBlocked: "The browser blocked the new tab. Allow pop-ups and try again.",
+      pdfPreviewNoViewer: "This PDF cannot be shown here",
+      pdfPreviewNoViewerDescription: "Your browser cannot show PDFs inside a page. Open the document to view it.",
       pdfPreviewRendering: "Rendering PDF preview…",
       pickIcon: "Pick an icon...",
       postMessage: "Post message",
@@ -457,6 +493,21 @@ const uiMessages = i18n.define({
       sending: "Sending",
       steering: "Steering",
       writeMessage: "Write a message or type / ...",
+      writeConversationMessage: "Write a message",
+      composerFormatting: "Formatting",
+      insertEmoji: "Insert emoji",
+      emojiSuggestions: "Emoji suggestions",
+      dictate: "Dictate",
+      dictateOrHold: "Dictate. Hold to record a voice message.",
+      stopDictation: "Stop dictation",
+      microphoneOptions: "Microphone options",
+      recordVoiceMessage: "Record voice message",
+      dictationListening: "Dictating …",
+      dictationRefining: "Refining the text …",
+      dictationRefined: "Text refined",
+      dictationUnrefined: "Text not refined",
+      dictationInterrupted: "Dictation interrupted",
+      restoreOriginal: "Restore original",
       openInNewTab: ({
         name
       }) => `Open ${name} in a new tab`,
@@ -655,6 +706,7 @@ const uiMessages = i18n.define({
       copy: "Kopieren",
       closeLightbox: "Bildansicht schließen",
       couldNotLoadData: "Diese Daten konnten nicht geladen werden",
+      couldNotDisplayContent: "Dieser Inhalt konnte nicht angezeigt werden.",
       datePicker: "Datumsauswahl",
       dataTable: "Datentabelle",
       datePresets: "Datumsvorgaben",
@@ -801,6 +853,28 @@ const uiMessages = i18n.define({
         start,
         end
       }) => `${title}, ${start} bis ${end}`,
+      timeline: "Zeitleiste",
+      timelineHint: "Pfeiltasten wechseln den Eintrag, Bild auf und Bild ab den Tag, Pos1 und Ende springen zum ersten und letzten Eintrag des Tages, T zu jetzt.",
+      timelineTimeRange: ({
+        start,
+        end
+      }) => `${start} bis ${end}`,
+      timelineDone: "erledigt",
+      timelineOpen: "offen",
+      timelineNight: ({
+        start,
+        end
+      }) => `Nacht · ${start}–${end}`,
+      timelineNothingPlanned: "Nichts geplant",
+      timelineFree: ({
+        duration
+      }) => `${duration} frei`,
+      timelineMore: ({
+        count
+      }) => `${count} weitere`,
+      timelineNow: ({
+        time
+      }) => `Jetzt, ${time}`,
       today: "Heute",
       day: "Tag",
       week: "Woche",
@@ -864,6 +938,10 @@ const uiMessages = i18n.define({
         time
       }) => `Letzte Antwort ${time}`,
       messageStop: "Stoppen",
+      resourceUntitled: "Ohne Titel",
+      resourceNoAccess: "Kein Zugriff",
+      resourceDeleted: "Element gelöscht",
+      resourceUnavailable: "Gerade nicht verfügbar",
       conversationMessages: ({
         label
       }) => `Nachrichten in ${label}`,
@@ -1011,6 +1089,13 @@ const uiMessages = i18n.define({
         label
       }) => `${label} nach oben verschieben`,
       rowAction: "Zeilenaktion",
+      sidebarUnread: ({
+        count
+      }) => `${count} ungelesen`,
+      sidebarUnreadMany: "mehr als 99 ungelesen",
+      sidebarNewActivity: "neue Aktivität",
+      sidebarMentioned: "erwähnt dich",
+      sidebarMuted: "stummgeschaltet",
       addToNamed: ({
         name
       }) => `Zu ${name} hinzufügen`,
@@ -1047,6 +1132,8 @@ const uiMessages = i18n.define({
         status
       }) => `PDF-Vorschau ist mit HTTP ${status} fehlgeschlagen`,
       pdfPreviewTabBlocked: "Der Browser hat den neuen Tab blockiert. Erlaube Pop-ups und versuche es erneut.",
+      pdfPreviewNoViewer: "Dieses PDF kann hier nicht angezeigt werden",
+      pdfPreviewNoViewerDescription: "Dein Browser kann PDFs nicht innerhalb einer Seite anzeigen. Öffne das Dokument, um es anzusehen.",
       pdfPreviewRendering: "PDF-Vorschau wird erstellt…",
       pickIcon: "Symbol auswählen...",
       postMessage: "Nachricht posten",
@@ -1058,6 +1145,21 @@ const uiMessages = i18n.define({
       sending: "Wird gesendet",
       steering: "Wird gesteuert",
       writeMessage: "Nachricht schreiben oder / eingeben ...",
+      writeConversationMessage: "Nachricht schreiben",
+      composerFormatting: "Formatierung",
+      insertEmoji: "Emoji einfügen",
+      emojiSuggestions: "Emoji-Vorschläge",
+      dictate: "Diktieren",
+      dictateOrHold: "Diktieren. Halten nimmt eine Sprachnachricht auf.",
+      stopDictation: "Diktat beenden",
+      microphoneOptions: "Mikrofon-Optionen",
+      recordVoiceMessage: "Sprachnachricht aufnehmen",
+      dictationListening: "Diktat läuft …",
+      dictationRefining: "Text wird verfeinert …",
+      dictationRefined: "Text verfeinert",
+      dictationUnrefined: "Text nicht verfeinert",
+      dictationInterrupted: "Diktat unterbrochen",
+      restoreOriginal: "Original wiederherstellen",
       openInNewTab: ({
         name
       }) => `${name} in neuem Tab öffnen`,