entasis 0.13.5 → 0.13.7

package/dist/components/Form/SignatureInput/signatureInput.strokes.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Strokes of a signature and the images they export to. Pure geometry: no DOM except the
+ * canvas context a caller passes in, so it runs the same in a test, on the pad and on export.
+ */
+/** One sampled pointer position, in CSS pixels of the pad. */
+export type SignaturePoint = {
+    x: number;
+    y: number;
+    /** Pen pressure from 0 to 1. Mouse and touch report 0.5. */
+    pressure: number;
+};
+/** One continuous line, from a pointer down to its pointer up. */
+export type SignatureStroke = readonly SignaturePoint[];
+export type SignatureBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Exported image format: a PNG or an SVG, each as a data URL. */
+export type SignatureFormat = 'png' | 'svg';
+export type SignatureRenderOptions = {
+    /** CSS color of the ink. */
+    color: string;
+    /** Base line width in CSS pixels, at a pressure of 0.5. */
+    width: number;
+};
+/** Width of a segment drawn at `pressure`: half the base at no pressure, 1.5 times at full. */
+export declare const strokeWidthAt: (pressure: number, width: number) => number;
+/**
+ * The segments a stroke is drawn as: quadratic curves through the midpoints of its samples, so
+ * the line is smooth however coarse the pointer events were. Each segment carries the pressure it
+ * is drawn at, so a pen's line thickens and thins along the way.
+ */
+export declare function strokeSegments(stroke: SignatureStroke): {
+    from: SignaturePoint;
+    control: SignaturePoint;
+    to: SignaturePoint;
+    pressure: number;
+}[];
+/** Draws `strokes` on a 2D context already scaled to CSS pixels. A tap draws a dot. */
+export declare function drawStrokes(context: CanvasRenderingContext2D, strokes: readonly SignatureStroke[], { color, width }: SignatureRenderOptions): void;
+/** The box the ink covers, line width included, or null when there is no ink. */
+export declare function strokesBounds(strokes: readonly SignatureStroke[], width: number): SignatureBounds | null;
+/** One drawable piece of a stroke: a dot for a tap, or a path at one line width. */
+export type SignatureShape = {
+    kind: 'dot';
+    x: number;
+    y: number;
+    r: number;
+} | {
+    kind: 'path';
+    d: string;
+    width: number;
+};
+/**
+ * The shapes a stroke draws as, in SVG path syntax, shifted by `offset`. Consecutive segments
+ * at the same width share one path, so a mouse or finger stroke is a single path and only a
+ * pen's changing pressure splits it.
+ */
+export declare function strokeShapes(stroke: SignatureStroke, width: number, offset?: {
+    x: number;
+    y: number;
+}): SignatureShape[];
+/** A standalone SVG of the strokes, cropped to the ink plus `padding`. */
+export declare function strokesToSvg(strokes: readonly SignatureStroke[], { color, width, padding }: SignatureRenderOptions & {
+    padding: number;
+}): string | null;
+/**
+ * Exports the strokes as a data URL cropped to the ink plus `padding`: an SVG, or a PNG drawn at
+ * `scale` device pixels per CSS pixel so it stays sharp in a document. Null when there is no ink.
+ */
+export declare function exportStrokes(strokes: readonly SignatureStroke[], { format, color, width, padding, scale }: SignatureRenderOptions & {
+    format: SignatureFormat;
+    padding: number;
+    scale: number;
+}): string | null;

package/dist/components/Form/SignatureInput/signatureInput.strokes.js

@@ -0,0 +1,149 @@
+/**
+ * Strokes of a signature and the images they export to. Pure geometry: no DOM except the
+ * canvas context a caller passes in, so it runs the same in a test, on the pad and on export.
+ */
+/** Width of a segment drawn at `pressure`: half the base at no pressure, 1.5 times at full. */
+export const strokeWidthAt = (pressure, width) => width * (0.5 + Math.min(Math.max(pressure, 0), 1));
+const midpoint = (a, b) => ({
+    x: (a.x + b.x) / 2,
+    y: (a.y + b.y) / 2,
+    pressure: (a.pressure + b.pressure) / 2
+});
+/**
+ * The segments a stroke is drawn as: quadratic curves through the midpoints of its samples, so
+ * the line is smooth however coarse the pointer events were. Each segment carries the pressure it
+ * is drawn at, so a pen's line thickens and thins along the way.
+ */
+export function strokeSegments(stroke) {
+    const segments = [];
+    if (stroke.length < 2)
+        return segments;
+    let from = stroke[0];
+    for (let index = 1; index < stroke.length - 1; index++) {
+        const control = stroke[index];
+        const to = midpoint(control, stroke[index + 1]);
+        segments.push({ from, control, to, pressure: control.pressure });
+        from = to;
+    }
+    const last = stroke[stroke.length - 1];
+    segments.push({ from, control: last, to: last, pressure: last.pressure });
+    return segments;
+}
+/** Draws `strokes` on a 2D context already scaled to CSS pixels. A tap draws a dot. */
+export function drawStrokes(context, strokes, { color, width }) {
+    context.save();
+    context.strokeStyle = color;
+    context.fillStyle = color;
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    for (const stroke of strokes) {
+        if (stroke.length === 1) {
+            const [dot] = stroke;
+            context.beginPath();
+            context.arc(dot.x, dot.y, strokeWidthAt(dot.pressure, width) / 2, 0, Math.PI * 2);
+            context.fill();
+            continue;
+        }
+        for (const segment of strokeSegments(stroke)) {
+            context.beginPath();
+            context.lineWidth = strokeWidthAt(segment.pressure, width);
+            context.moveTo(segment.from.x, segment.from.y);
+            context.quadraticCurveTo(segment.control.x, segment.control.y, segment.to.x, segment.to.y);
+            context.stroke();
+        }
+    }
+    context.restore();
+}
+/** The box the ink covers, line width included, or null when there is no ink. */
+export function strokesBounds(strokes, width) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const stroke of strokes) {
+        for (const point of stroke) {
+            const half = strokeWidthAt(point.pressure, width) / 2;
+            minX = Math.min(minX, point.x - half);
+            minY = Math.min(minY, point.y - half);
+            maxX = Math.max(maxX, point.x + half);
+            maxY = Math.max(maxY, point.y + half);
+        }
+    }
+    if (minX === Infinity)
+        return null;
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+const round = (value) => Math.round(value * 100) / 100;
+/**
+ * The shapes a stroke draws as, in SVG path syntax, shifted by `offset`. Consecutive segments
+ * at the same width share one path, so a mouse or finger stroke is a single path and only a
+ * pen's changing pressure splits it.
+ */
+export function strokeShapes(stroke, width, offset = { x: 0, y: 0 }) {
+    const x = (value) => round(value - offset.x);
+    const y = (value) => round(value - offset.y);
+    if (stroke.length === 1) {
+        const [dot] = stroke;
+        return [
+            { kind: 'dot', x: x(dot.x), y: y(dot.y), r: round(strokeWidthAt(dot.pressure, width) / 2) }
+        ];
+    }
+    const shapes = [];
+    for (const segment of strokeSegments(stroke)) {
+        const segmentWidth = round(strokeWidthAt(segment.pressure, width));
+        const curve = `Q${x(segment.control.x)} ${y(segment.control.y)} ${x(segment.to.x)} ${y(segment.to.y)}`;
+        const last = shapes.at(-1);
+        if (last?.kind === 'path' && last.width === segmentWidth)
+            last.d += curve;
+        else
+            shapes.push({
+                kind: 'path',
+                d: `M${x(segment.from.x)} ${y(segment.from.y)}${curve}`,
+                width: segmentWidth
+            });
+    }
+    return shapes;
+}
+/** A standalone SVG of the strokes, cropped to the ink plus `padding`. */
+export function strokesToSvg(strokes, { color, width, padding }) {
+    const bounds = strokesBounds(strokes, width);
+    if (!bounds)
+        return null;
+    const offset = { x: bounds.x - padding, y: bounds.y - padding };
+    const boxWidth = round(bounds.width + padding * 2);
+    const boxHeight = round(bounds.height + padding * 2);
+    const shapes = strokes
+        .flatMap((stroke) => strokeShapes(stroke, width, offset))
+        .map((shape) => shape.kind === 'dot'
+        ? `<circle cx="${shape.x}" cy="${shape.y}" r="${shape.r}" fill="${color}"/>`
+        : `<path d="${shape.d}" stroke-width="${shape.width}"/>`);
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${boxWidth}" height="${boxHeight}" viewBox="0 0 ${boxWidth} ${boxHeight}">`,
+        `<g fill="none" stroke="${color}" stroke-linecap="round" stroke-linejoin="round">`,
+        shapes.join(''),
+        '</g></svg>'
+    ].join('');
+}
+/**
+ * Exports the strokes as a data URL cropped to the ink plus `padding`: an SVG, or a PNG drawn at
+ * `scale` device pixels per CSS pixel so it stays sharp in a document. Null when there is no ink.
+ */
+export function exportStrokes(strokes, { format, color, width, padding, scale }) {
+    if (format === 'svg') {
+        const svg = strokesToSvg(strokes, { color, width, padding });
+        return svg ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` : null;
+    }
+    const bounds = strokesBounds(strokes, width);
+    if (!bounds || typeof document === 'undefined')
+        return null;
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.ceil((bounds.width + padding * 2) * scale);
+    canvas.height = Math.ceil((bounds.height + padding * 2) * scale);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return null;
+    context.scale(scale, scale);
+    context.translate(padding - bounds.x, padding - bounds.y);
+    drawStrokes(context, strokes, { color, width });
+    return canvas.toDataURL('image/png');
+}

package/dist/components/Form/SignatureInput/signatureInput.theme.d.ts

@@ -0,0 +1,99 @@
+import { type InferComponentTheme } from '../../../utils/cva/index.js';
+export declare const signatureInputTheme: {
+    frame: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    pad: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        interactive: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+        hasError: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    actions: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+};
+export type SignatureInputTheme = typeof signatureInputTheme;
+export type SignatureInputThemeProps = InferComponentTheme<SignatureInputTheme>;
+export declare const setSignatureInputTheme: (theme: InferComponentTheme<{
+    frame: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    pad: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        interactive: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+        hasError: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    actions: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+}>) => void;
+export declare const useSignatureInputTheme: import("../../../utils/cva/theme.ts").UseComponentTheme<{
+    frame: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    pad: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+        interactive: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string;
+            false: string;
+        };
+        hasError: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    ink: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    image: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    placeholder: (props?: (import("../../../utils/cva/types.ts").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    actions: (props?: import("../../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+}>;

package/dist/components/Form/SignatureInput/signatureInput.theme.js

@@ -0,0 +1,70 @@
+import { cva, setComponentTheme, useComponentTheme } from '../../../utils/cva/index.js';
+// Holds the pad and, over its corner, the buttons: they cannot sit inside the pad, whose image
+// role would hide them from assistive technology.
+const defaultFrame = cva({
+    base: 'relative w-full min-w-0'
+});
+// The pad is the control: it takes focus, so its own ring shows keyboard focus, and the strokes
+// are drawn in its text color (an SVG in `currentColor`), so they follow the theme.
+const defaultPad = cva({
+    base: 'relative w-full min-w-0 touch-none overflow-hidden rounded-md border border-neutral-muted bg-surface-raised text-neutral outline-none select-none focus-visible:ring-2 focus-visible:ring-focus/50',
+    variants: {
+        size: {
+            small: 'h-28',
+            normal: 'h-36',
+            large: 'h-44'
+        },
+        interactive: {
+            true: 'cursor-crosshair',
+            false: ''
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: ''
+        },
+        hasError: {
+            true: 'border-danger focus-visible:ring-danger/50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'normal',
+        interactive: true,
+        disabled: false,
+        hasError: false
+    }
+});
+const defaultInk = cva({
+    base: 'pointer-events-none absolute inset-0 size-full overflow-visible'
+});
+// A value set from outside (a saved signature) shows as an image, scaled to fit the pad.
+const defaultImage = cva({
+    base: 'pointer-events-none absolute inset-0 size-full object-contain p-md'
+});
+// The line to sign on and its hint: decorative, gone as soon as there is ink.
+const defaultPlaceholder = cva({
+    base: 'pointer-events-none absolute inset-x-[var(--space-xl)] bottom-1/4 flex items-end gap-sm border-b border-dashed border-neutral-muted pb-xs text-neutral/45',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-base'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultActions = cva({
+    base: 'absolute end-[var(--space-xs)] top-[var(--space-xs)] flex items-center gap-xs'
+});
+export const signatureInputTheme = {
+    frame: defaultFrame,
+    pad: defaultPad,
+    ink: defaultInk,
+    image: defaultImage,
+    placeholder: defaultPlaceholder,
+    actions: defaultActions
+};
+export const setSignatureInputTheme = setComponentTheme('signature-input');
+export const useSignatureInputTheme = useComponentTheme('signature-input', signatureInputTheme);

package/dist/components/Sidebar/Sidebar.svelte

@@ -266,7 +266,7 @@
 	});
 
 	function hasIcon(entry: SidebarMenuEntry) {
-		return entry.icon != null;
+		return entry.icon != null || entry.media != null;
 	}
 
 	function hasCollapsibleMedia(button: SidebarMenuButtonItem | undefined) {

package/dist/components/Sidebar/SidebarMenuItem.svelte

@@ -28,6 +28,7 @@
 	import SidebarFlyout from './SidebarFlyout.svelte';
 	import SidebarIcon from './SidebarIcon.svelte';
 	import SidebarMenuSubItem from './SidebarMenuSubItem.svelte';
+	import SidebarMenuText from './SidebarMenuText.svelte';
 	import { useSidebarSuffixWidth } from './sidebar.suffix.svelte.js';
 	import { useSidebarMotion, useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 
@@ -82,6 +83,13 @@
 	);
 	const hasSubmenu = $derived(!!item.items?.length);
 	const showBadge = $derived(item.badge != null && !isIconCollapsed);
+	// A description stacks a second line under the label, so the row takes the large height
+	// unless the entry sets its own size.
+	const rowSize = $derived(item.size ?? (item.description != null ? 'large' : undefined));
+	const lead = $derived(item.media ? 'media' : 'icon');
+	// On a two-line row the suffix and the badge sit on the description's line, so the label's
+	// line, and its meta, run to the same end on every row.
+	const twoLine = $derived(item.description != null);
 	// An in-flow chevron or dots after the badge: the row then keeps its action's room at every
 	// width, since the action would otherwise cover that glyph when it shows.
 	const hasTrailingGlyph = $derived(
@@ -94,8 +102,12 @@
 	const endReserve = $derived(
 		item.suffix
 			? item.action
-				? 'suffixAction'
-				: 'suffix'
+				? twoLine
+					? 'suffixLineAction'
+					: 'suffixAction'
+				: twoLine
+					? 'suffixLine'
+					: 'suffix'
 			: !item.action
 				? 'none'
 				: showBadge && !hasTrailingGlyph
@@ -176,7 +188,11 @@
 </script>
 
 {#snippet entryContent()}
-	{#if hasIconSurface}
+	{#if item.media}
+		<span data-slot="sidebar-menu-media" data-sidebar="menu-media" class={classes.menuMedia()}>
+			{@render item.media(api, item)}
+		</span>
+	{:else if hasIconSurface}
 		<span
 			data-slot="sidebar-menu-icon"
 			data-color={item.iconColor}
@@ -187,7 +203,25 @@
 	{:else}
 		<SidebarIcon icon={item.icon} class={back ? 'rtl:-scale-x-100' : undefined} />
 	{/if}
-	<span class={classes.menuLabel()}>{item.label}</span>
+	{#if item.description != null || item.meta != null}
+		<SidebarMenuText
+			label={item.label}
+			description={item.description}
+			meta={isIconCollapsed ? undefined : item.meta}
+			suffix={!!item.suffix}
+			trailing={twoLine ? badge : undefined}
+			{size}
+			{theme}
+		/>
+	{:else}
+		<span class={classes.menuLabel()}>{item.label}</span>
+	{/if}
+	{#if !twoLine}
+		{@render badge()}
+	{/if}
+{/snippet}
+
+{#snippet badge()}
 	{#if showBadge}
 		<span
 			data-slot="sidebar-menu-badge"
@@ -224,7 +258,7 @@
 			role={item.disabled ? 'link' : undefined}
 			data-slot="sidebar-menu-button"
 			data-sidebar="menu-button"
-			data-size={item.size ?? 'normal'}
+			data-size={rowSize ?? 'normal'}
 			data-active={item.isActive ? 'true' : undefined}
 			data-active-variant={activeVariant}
 			aria-current={item.isActive ? 'page' : undefined}
@@ -236,7 +270,8 @@
 				activeVariant,
 				size,
 				density,
-				itemSize: item.size,
+				itemSize: rowSize,
+				lead,
 				endReserve,
 				className: item.class
 			})}
@@ -254,7 +289,7 @@
 			type="button"
 			data-slot="sidebar-menu-button"
 			data-sidebar="menu-button"
-			data-size={item.size ?? 'normal'}
+			data-size={rowSize ?? 'normal'}
 			data-active={item.isActive ? 'true' : undefined}
 			data-active-variant={activeVariant}
 			aria-current={item.isActive ? 'page' : undefined}
@@ -267,7 +302,8 @@
 				activeVariant,
 				size,
 				density,
-				itemSize: item.size,
+				itemSize: rowSize,
+				lead,
 				endReserve,
 				className: item.class
 			})}
@@ -302,7 +338,7 @@
 				type="button"
 				data-slot="sidebar-menu-button"
 				data-sidebar="menu-button"
-				data-size={item.size ?? 'normal'}
+				data-size={rowSize ?? 'normal'}
 				data-active-variant={activeVariant}
 				disabled={item.disabled || undefined}
 				class={classes.menuButton({
@@ -310,7 +346,8 @@
 					activeVariant,
 					size,
 					density,
-					itemSize: item.size,
+					itemSize: rowSize,
+					lead,
 					endReserve,
 					className: ['aria-expanded:bg-neutral-muted', item.class]
 				})}
@@ -339,7 +376,7 @@
 				type="button"
 				data-slot="sidebar-menu-button"
 				data-sidebar="menu-button"
-				data-size={item.size ?? 'normal'}
+				data-size={rowSize ?? 'normal'}
 				data-active={item.isActive ? 'true' : undefined}
 				data-active-variant={activeVariant}
 				class={classes.menuButton({
@@ -347,7 +384,8 @@
 					activeVariant,
 					size,
 					density,
-					itemSize: item.size,
+					itemSize: rowSize,
+					lead,
 					endReserve,
 					className: item.class
 				})}
@@ -434,7 +472,7 @@
 					type="button"
 					data-slot="sidebar-menu-button"
 					data-sidebar="menu-button"
-					data-size={item.size ?? 'normal'}
+					data-size={rowSize ?? 'normal'}
 					data-active={item.isActive ? 'true' : undefined}
 					data-active-variant={activeVariant}
 					disabled={item.disabled || undefined}
@@ -443,7 +481,8 @@
 						activeVariant,
 						size,
 						density,
-						itemSize: item.size,
+						itemSize: rowSize,
+						lead,
 						endReserve,
 						className: item.class
 					})}
@@ -473,7 +512,12 @@
 				data-sidebar="menu-suffix"
 				inert={isIconCollapsed ? true : undefined}
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
-				class={classes.suffix({ size, density, action: item.action ? 'action' : 'none' })}
+				class={classes.suffix({
+					size,
+					density,
+					action: item.action ? 'action' : 'none',
+					line: twoLine ? 'two' : 'one'
+				})}
 				{@attach suffixWidth.measure}
 			>
 				{@render item.suffix(api, item)}