@x33025/sveltely 0.1.1 → 0.1.2

package/dist/components/Library/ImageMask/contour.js

@@ -0,0 +1,152 @@
+function pointKey(point) {
+    return `${point.x.toFixed(3)}:${point.y.toFixed(3)}`;
+}
+function distanceToSegmentSquared(point, start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (dx === 0 && dy === 0)
+        return (point.x - start.x) ** 2 + (point.y - start.y) ** 2;
+    const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy)));
+    const projected = { x: start.x + t * dx, y: start.y + t * dy };
+    return (point.x - projected.x) ** 2 + (point.y - projected.y) ** 2;
+}
+function simplifyPoints(points, epsilon) {
+    if (points.length <= 2)
+        return points;
+    const keep = new Array(points.length).fill(false);
+    const stack = [[0, points.length - 1]];
+    const epsilonSquared = epsilon * epsilon;
+    keep[0] = true;
+    keep[points.length - 1] = true;
+    while (stack.length > 0) {
+        const [start, end] = stack.pop();
+        let maxDistance = 0;
+        let indexToKeep = start;
+        for (let index = start + 1; index < end; index += 1) {
+            const distance = distanceToSegmentSquared(points[index], points[start], points[end]);
+            if (distance > maxDistance) {
+                maxDistance = distance;
+                indexToKeep = index;
+            }
+        }
+        if (maxDistance > epsilonSquared) {
+            keep[indexToKeep] = true;
+            stack.push([start, indexToKeep], [indexToKeep, end]);
+        }
+    }
+    return points.filter((_, index) => keep[index]);
+}
+export function buildContourPaths({ surfaceCanvas, surfaceContext, viewportWidth, viewportHeight, dpr, step = Math.max(0.25, 1 / Math.max(1, dpr)), simplify = 0.12, threshold = 127 }) {
+    const columns = Math.max(2, Math.ceil(viewportWidth / step) + 2);
+    const rows = Math.max(2, Math.ceil(viewportHeight / step) + 2);
+    const image = surfaceContext.getImageData(0, 0, surfaceCanvas.width, surfaceCanvas.height);
+    const alphaAt = (x, y) => {
+        const clampedX = Math.min(surfaceCanvas.width - 1, Math.max(0, x));
+        const clampedY = Math.min(surfaceCanvas.height - 1, Math.max(0, y));
+        const x0 = Math.floor(clampedX);
+        const y0 = Math.floor(clampedY);
+        const x1 = Math.min(surfaceCanvas.width - 1, x0 + 1);
+        const y1 = Math.min(surfaceCanvas.height - 1, y0 + 1);
+        const tx = clampedX - x0;
+        const ty = clampedY - y0;
+        const offset = (sampleX, sampleY) => image.data[(sampleY * surfaceCanvas.width + sampleX) * 4 + 3];
+        const top = offset(x0, y0) * (1 - tx) + offset(x1, y0) * tx;
+        const bottom = offset(x0, y1) * (1 - tx) + offset(x1, y1) * tx;
+        return top * (1 - ty) + bottom * ty;
+    };
+    const alpha = Array.from({ length: rows }, (_, y) => Array.from({ length: columns }, (_, x) => {
+        return alphaAt(x * step * dpr, y * step * dpr);
+    }));
+    const segments = [];
+    const interpolate = (from, to) => {
+        if (from === to)
+            return 0.5;
+        return Math.max(0, Math.min(1, (threshold - from) / (to - from)));
+    };
+    const edgePoint = (x, y, edge) => {
+        const topLeft = alpha[y][x];
+        const topRight = alpha[y][x + 1];
+        const bottomRight = alpha[y + 1][x + 1];
+        const bottomLeft = alpha[y + 1][x];
+        if (edge === 'top') {
+            const t = interpolate(topLeft, topRight);
+            return { x: (x + t) * step, y: y * step };
+        }
+        if (edge === 'right') {
+            const t = interpolate(topRight, bottomRight);
+            return { x: (x + 1) * step, y: (y + t) * step };
+        }
+        if (edge === 'bottom') {
+            const t = interpolate(bottomLeft, bottomRight);
+            return { x: (x + t) * step, y: (y + 1) * step };
+        }
+        const t = interpolate(topLeft, bottomLeft);
+        return { x: x * step, y: (y + t) * step };
+    };
+    const addSegment = (x, y, from, to) => segments.push([edgePoint(x, y, from), edgePoint(x, y, to)]);
+    for (let y = 0; y < rows - 1; y += 1) {
+        for (let x = 0; x < columns - 1; x += 1) {
+            const value = (alpha[y][x] >= threshold ? 8 : 0) |
+                (alpha[y][x + 1] >= threshold ? 4 : 0) |
+                (alpha[y + 1][x + 1] >= threshold ? 2 : 0) |
+                (alpha[y + 1][x] >= threshold ? 1 : 0);
+            if (value === 1 || value === 14)
+                addSegment(x, y, 'left', 'bottom');
+            else if (value === 2 || value === 13)
+                addSegment(x, y, 'bottom', 'right');
+            else if (value === 3 || value === 12)
+                addSegment(x, y, 'left', 'right');
+            else if (value === 4 || value === 11)
+                addSegment(x, y, 'top', 'right');
+            else if (value === 6 || value === 9)
+                addSegment(x, y, 'top', 'bottom');
+            else if (value === 7 || value === 8)
+                addSegment(x, y, 'left', 'top');
+            else if (value === 5) {
+                addSegment(x, y, 'top', 'left');
+                addSegment(x, y, 'bottom', 'right');
+            }
+            else if (value === 10) {
+                addSegment(x, y, 'left', 'bottom');
+                addSegment(x, y, 'top', 'right');
+            }
+        }
+    }
+    const adjacency = new Map();
+    segments.forEach(([start, end], index) => {
+        const startKey = pointKey(start);
+        const endKey = pointKey(end);
+        adjacency.set(startKey, [...(adjacency.get(startKey) ?? []), index]);
+        adjacency.set(endKey, [...(adjacency.get(endKey) ?? []), index]);
+    });
+    const unused = new Set(segments.map((_, index) => index));
+    const contours = [];
+    const takeConnectedSegment = (key) => (adjacency.get(key) ?? []).find((index) => unused.has(index));
+    while (unused.size > 0) {
+        const firstSegmentIndex = unused.values().next().value;
+        unused.delete(firstSegmentIndex);
+        const [start, end] = segments[firstSegmentIndex];
+        const points = [start, end];
+        let currentKey = pointKey(end);
+        let closed = false;
+        while (true) {
+            const nextSegmentIndex = takeConnectedSegment(currentKey);
+            if (nextSegmentIndex === undefined)
+                break;
+            unused.delete(nextSegmentIndex);
+            const [nextStart, nextEnd] = segments[nextSegmentIndex];
+            const nextPoint = pointKey(nextStart) === currentKey ? nextEnd : nextStart;
+            const nextKey = pointKey(nextPoint);
+            if (nextKey === pointKey(points[0])) {
+                closed = true;
+                break;
+            }
+            points.push(nextPoint);
+            currentKey = nextKey;
+        }
+        const prepared = simplifyPoints(points, simplify);
+        if (prepared.length > 2)
+            contours.push({ points: prepared, closed });
+    }
+    return contours;
+}

package/dist/components/Library/ImageMask/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageMask.svelte';
+export type { ImageMaskValue } from './types';

package/dist/components/Library/ImageMask/index.js

@@ -0,0 +1 @@
+export { default } from './ImageMask.svelte';

package/dist/components/Library/ImageMask/marchingAnts.d.ts

@@ -0,0 +1,8 @@
+import type { ContourPath } from './types';
+export declare function drawMarchingAnts({ context, contours, viewportWidth, viewportHeight, dashOffset }: {
+    context: CanvasRenderingContext2D | null;
+    contours: ContourPath[];
+    viewportWidth: number;
+    viewportHeight: number;
+    dashOffset: number;
+}): void;

package/dist/components/Library/ImageMask/marchingAnts.js

@@ -0,0 +1,29 @@
+function contourPath(context, contour) {
+    const { points, closed } = contour;
+    if (points.length === 0)
+        return;
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (const point of points.slice(1)) {
+        context.lineTo(point.x, point.y);
+    }
+    if (closed)
+        context.closePath();
+}
+export function drawMarchingAnts({ context, contours, viewportWidth, viewportHeight, dashOffset }) {
+    if (!context)
+        return;
+    context.clearRect(0, 0, viewportWidth, viewportHeight);
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = 2;
+    context.strokeStyle = 'rgb(0 0 0)';
+    context.setLineDash([8, 6]);
+    context.lineDashOffset = -dashOffset;
+    for (const contour of contours) {
+        contourPath(context, contour);
+        context.stroke();
+    }
+    context.restore();
+}

package/dist/components/Library/ImageMask/maskSurface.d.ts

@@ -0,0 +1,5 @@
+import type { ImageMaskValue, MaskPoint, MaskStroke } from './types';
+export declare function configureMaskContext(context: CanvasRenderingContext2D, dpr: number): void;
+export declare function rebuildMaskSurface(context: CanvasRenderingContext2D | null, strokes: MaskStroke[], width: number, height: number): void;
+export declare function drawMaskStrokeSegment(context: CanvasRenderingContext2D | null, previous: MaskPoint | null, from: MaskPoint, to: MaskPoint, stroke: Pick<MaskStroke, 'tool' | 'brushSize'>): void;
+export declare function exportMaskValue(exportCanvas: HTMLCanvasElement | null, exportContext: CanvasRenderingContext2D | null, surfaceCanvas: HTMLCanvasElement | null, exportSize: number): ImageMaskValue | null;

package/dist/components/Library/ImageMask/maskSurface.js

@@ -0,0 +1,94 @@
+export function configureMaskContext(context, dpr) {
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+}
+function smoothPath(context, points) {
+    if (points.length === 0)
+        return;
+    if (points.length < 3) {
+        context.beginPath();
+        context.moveTo(points[0].x, points[0].y);
+        for (const point of points.slice(1))
+            context.lineTo(point.x, point.y);
+        return;
+    }
+    context.beginPath();
+    context.moveTo(points[0].x, points[0].y);
+    for (let index = 0; index < points.length - 1; index += 1) {
+        const current = points[index];
+        const next = points[index + 1];
+        const previous = points[index - 1] ?? current;
+        const afterNext = points[index + 2] ?? next;
+        context.bezierCurveTo(current.x + (next.x - previous.x) / 6, current.y + (next.y - previous.y) / 6, next.x - (afterNext.x - current.x) / 6, next.y - (afterNext.y - current.y) / 6, next.x, next.y);
+    }
+}
+export function rebuildMaskSurface(context, strokes, width, height) {
+    if (!context)
+        return;
+    context.clearRect(0, 0, width, height);
+    for (const stroke of strokes) {
+        smoothPath(context, stroke.points);
+        context.lineWidth = stroke.brushSize;
+        context.globalCompositeOperation =
+            stroke.tool === 'erase' ? 'destination-out' : 'source-over';
+        context.strokeStyle = 'rgb(0 0 0)';
+        context.stroke();
+    }
+    context.globalCompositeOperation = 'source-over';
+}
+export function drawMaskStrokeSegment(context, previous, from, to, stroke) {
+    if (!context)
+        return;
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = stroke.brushSize;
+    context.globalCompositeOperation = stroke.tool === 'erase' ? 'destination-out' : 'source-over';
+    context.strokeStyle = 'rgb(0 0 0)';
+    if (from.x === to.x && from.y === to.y) {
+        context.beginPath();
+        context.arc(from.x, from.y, stroke.brushSize / 2, 0, Math.PI * 2);
+        context.fillStyle = 'rgb(0 0 0)';
+        context.fill();
+        context.restore();
+        return;
+    }
+    const start = previous
+        ? { x: (previous.x + from.x) / 2, y: (previous.y + from.y) / 2 }
+        : from;
+    const end = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+    context.beginPath();
+    context.moveTo(start.x, start.y);
+    context.quadraticCurveTo(from.x, from.y, end.x, end.y);
+    context.stroke();
+    context.restore();
+}
+export function exportMaskValue(exportCanvas, exportContext, surfaceCanvas, exportSize) {
+    if (!exportCanvas || !exportContext || !surfaceCanvas)
+        return null;
+    const outputSize = Math.max(1, Math.round(exportSize));
+    exportCanvas.width = outputSize;
+    exportCanvas.height = outputSize;
+    exportContext.save();
+    exportContext.setTransform(1, 0, 0, 1, 0, 0);
+    exportContext.globalCompositeOperation = 'source-over';
+    exportContext.clearRect(0, 0, outputSize, outputSize);
+    exportContext.drawImage(surfaceCanvas, 0, 0, outputSize, outputSize);
+    exportContext.globalCompositeOperation = 'source-in';
+    exportContext.fillStyle = 'rgb(255 255 255)';
+    exportContext.fillRect(0, 0, outputSize, outputSize);
+    exportContext.globalCompositeOperation = 'destination-over';
+    exportContext.fillStyle = 'rgb(0 0 0)';
+    exportContext.fillRect(0, 0, outputSize, outputSize);
+    exportContext.restore();
+    return {
+        dataUrl: exportCanvas.toDataURL('image/png'),
+        width: outputSize,
+        height: outputSize,
+        mimeType: 'image/png',
+        format: 'black-white',
+        maskedColor: 'white',
+        unmaskedColor: 'black'
+    };
+}

package/dist/components/Library/ImageMask/types.d.ts

@@ -0,0 +1,23 @@
+export type ImageMaskValue = {
+    dataUrl: string;
+    width: number;
+    height: number;
+    mimeType: 'image/png';
+    format: 'black-white';
+    maskedColor: 'white';
+    unmaskedColor: 'black';
+};
+export type MaskPoint = {
+    x: number;
+    y: number;
+};
+export type MaskTool = 'paint' | 'erase';
+export type MaskStroke = {
+    tool: MaskTool;
+    points: MaskPoint[];
+    brushSize: number;
+};
+export type ContourPath = {
+    points: MaskPoint[];
+    closed: boolean;
+};

package/dist/components/Library/ImageMask/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Library/Label/Label.demo.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Label',
+		description: 'Form label wrapper with top and left orientation.',
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { HashIcon, UserIcon } from '@lucide/svelte';
+	import HStack from '../HStack';
+	import NumberField from '../NumberField';
+	import TextField from '../TextField';
+	import Label from './Label.svelte';
+
+	let name = $state('');
+	let amount = $state<number | null>(35);
+</script>
+
+<HStack gap={1} align="center">
+	<Label label="Name" icon={UserIcon} orientation="top">
+		<TextField bind:value={name} placeholder="Sveltely" />
+	</Label>
+
+	<Label label="Amount" icon={HashIcon} orientation="left">
+		<NumberField bind:value={amount} min={0} max={100} />
+	</Label>
+</HStack>

package/dist/components/Library/Label/Label.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+};
+import Label from './Label.svelte';
+declare const Label: import("svelte").Component<Record<string, never>, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/Library/Label/Label.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { LabelOrientation } from '../../../style/label';
+	import { layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		label?: string;
+		icon?: Component<{ class?: string; size?: number | string }>;
+		iconSize?: number | string;
+		iconColor?: string;
+		orientation?: LabelOrientation;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		label,
+		icon,
+		iconSize,
+		iconColor,
+		orientation = 'top',
+		size,
+		width,
+		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
+		grow,
+		shrink,
+		basis,
+		border,
+		overflow,
+		align,
+		justify,
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const layoutProps = $derived({
+		size,
+		width,
+		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
+		grow,
+		shrink,
+		basis,
+		border,
+		overflow,
+		align,
+		justify
+	});
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'label')].filter(Boolean).join(' ')
+	);
+
+	const iconStyle = $derived.by(() => {
+		const declarations: string[] = [];
+
+		if (iconColor !== undefined) {
+			declarations.push(`color: ${iconColor};`);
+		}
+
+		if (iconSize !== undefined) {
+			const sizeValue = typeof iconSize === 'number' ? `${iconSize}rem` : iconSize;
+			declarations.push(`width: ${sizeValue};`, `height: ${sizeValue};`);
+		}
+
+		return declarations.join(' ');
+	});
+</script>
+
+<div class="label" data-orientation={orientation} style={rootStyle}>
+	{#if icon || label}
+		<span class="label-heading">
+			{#if icon}
+				{@const Icon = icon}
+				<span class="label-icon-frame" style={iconStyle}>
+					<Icon class="label-icon" />
+				</span>
+			{/if}
+
+			{#if label}
+				<span class="label-text">{label}</span>
+			{/if}
+		</span>
+	{/if}
+
+	{#if children}
+		<div class="label-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.label {
+		--label-font-size: var(--sveltely-font-size);
+		--label-icon-size: calc(var(--label-font-size) * 1.143);
+		display: inline-flex;
+		width: 100%;
+		min-width: min-content;
+		min-height: min-content;
+		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
+		border-radius: var(--label-border-radius, 0px);
+		color: var(--label-color, var(--color-zinc-700));
+		font-size: var(--label-font-size);
+		padding:
+			var(--label-padding-y, 0px)
+			var(--label-padding-x, 0px);
+	}
+
+	.label[data-orientation='top'] {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.label[data-orientation='left'] {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.label-heading {
+		display: inline-flex;
+		min-width: max-content;
+		flex-shrink: 0;
+		align-items: center;
+		gap: calc(var(--label-gap, var(--sveltely-gap)) * 0.67);
+		font-weight: 500;
+		line-height: 1.25;
+	}
+
+	.label-content {
+		display: inline-flex;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
+	.label-icon-frame {
+		display: inline-flex;
+		width: var(--label-icon-size);
+		height: var(--label-icon-size);
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		color: var(--label-icon-color, currentColor);
+	}
+
+	.label-icon-frame :global(.label-icon) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/Label/Label.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Component, Snippet } from 'svelte';
+import type { LabelOrientation } from '../../../style/label';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    label?: string;
+    icon?: Component<{
+        class?: string;
+        size?: number | string;
+    }>;
+    iconSize?: number | string;
+    iconColor?: string;
+    orientation?: LabelOrientation;
+} & LayoutProps & StyleProps;
+declare const Label: Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/Library/Label/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Label.svelte';

package/dist/components/Library/Label/index.js

@@ -0,0 +1 @@
+export { default } from './Label.svelte';

package/dist/components/Library/NumberField/NumberField.demo.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'NumberField',
+		description: 'Token-aware numeric input with min, max, and step support.'
+	};
+</script>
+
+<script lang="ts">
+	import NumberField from './NumberField.svelte';
+
+	let value = $state<number | null>(35);
+</script>
+
+<NumberField
+	bind:value
+	min={0}
+	max={100}
+	step={1}
+	placeholder="0"
+	help={`Value: ${value ?? 'empty'}`}
+/>

package/dist/components/Library/NumberField/NumberField.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import NumberField from './NumberField.svelte';
+declare const NumberField: import("svelte").Component<Record<string, never>, {}, "">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;