@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/components/molecules/CanvasInspector/CanvasInspector.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type CanvasAlign, type CanvasDocument, type CanvasLayer, type CanvasWidgetDefinition } from '../../../utils/canvasDocument.js';
+import type { Component } from 'svelte';
+interface CanvasInspectorProps {
+    document?: CanvasDocument | null;
+    layer?: CanvasLayer | null;
+    selectionCount?: number;
+    /** When editing inside a User Widget definition — enables eye toggles. */
+    widgetDefinition?: CanvasWidgetDefinition | null;
+    class?: string;
+    ondocumentchange?: (doc: CanvasDocument) => void;
+    onchange?: (layer: CanvasLayer) => void;
+    onalign?: (align: CanvasAlign) => void;
+    onexpose?: (payload: {
+        layerId: string;
+        field: string;
+        exposed: boolean;
+        label: string;
+    }) => void;
+    onoverride?: (payload: {
+        propId: string;
+        value: unknown;
+    }) => void;
+    oneditwidget?: (definitionId: string) => void;
+    onbreakwidget?: () => void;
+}
+declare const CanvasInspector: Component<CanvasInspectorProps, {}, "">;
+type CanvasInspector = ReturnType<typeof CanvasInspector>;
+export default CanvasInspector;

package/dist/components/molecules/CanvasInspector/CanvasInspectorStory.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import CanvasInspector from './CanvasInspector.svelte';
+	import { createCanvasLayer, emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+
+	let layer = $state(
+		createCanvasLayer('text', { name: 'Title', text: 'Hello', rect: { x: 10, y: 20, w: 200, h: 60 } })
+	);
+	let doc = $state(emptyCanvasDocument());
+</script>
+
+<div class="w-72 rounded-lg border border-border bg-surface-elevated">
+	<CanvasInspector
+		document={doc}
+		{layer}
+		ondocumentchange={(d) => (doc = d)}
+		onchange={(l) => {
+			layer = l;
+		}}
+	/>
+</div>

package/dist/components/molecules/CanvasInspector/CanvasInspectorStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CanvasInspectorStory: import("svelte").Component<Record<string, never>, {}, "">;
+type CanvasInspectorStory = ReturnType<typeof CanvasInspectorStory>;
+export default CanvasInspectorStory;

package/dist/components/molecules/ColorPicker/ColorPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+	type ColorPickerSize = 'sm' | 'md' | 'lg';
 
 	interface ColorPickerProps {
 		value?: string;
@@ -11,6 +12,7 @@
 		format?: ColorFormat;
 		/** Show preset swatches. */
 		showSwatches?: boolean;
+		size?: ColorPickerSize;
 		disabled?: boolean;
 		open?: boolean;
 		class?: string;
@@ -37,12 +39,37 @@
 		alpha = false,
 		format = 'hex',
 		showSwatches = true,
+		size = 'md',
 		disabled = false,
 		open = $bindable(false),
 		class: className = '',
 		onchange
 	}: ColorPickerProps = $props();
 
+	const triggerSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-8 gap-2 rounded-lg px-2',
+		md: 'h-10 gap-2.5 rounded-xl px-2.5',
+		lg: 'h-12 gap-3 rounded-xl px-3'
+	};
+
+	const swatchSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-5 w-5 rounded-md',
+		md: 'h-7 w-7 rounded-lg',
+		lg: 'h-8 w-8 rounded-lg'
+	};
+
+	const valueSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'text-sm',
+		md: 'text-sm',
+		lg: 'text-base'
+	};
+
+	const chevronSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-3.5 w-3.5',
+		md: 'h-4 w-4',
+		lg: 'h-4 w-4'
+	};
+
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let svEl = $state<HTMLDivElement | null>(null);
 	let triggerEl = $state<HTMLButtonElement | null>(null);
@@ -222,7 +249,7 @@
 
 <svelte:document onkeydown={onKey} onpointermove={onPointer} onpointerup={onPointerUp} />
 
-<div class={['relative w-full max-w-xs', className]} bind:this={rootEl}>
+<div class={['relative w-full min-w-0', className]} bind:this={rootEl}>
 	{#if label}
 		<span class="mb-1.5 block text-sm font-medium text-primary">{label}</span>
 	{/if}
@@ -236,17 +263,31 @@
 		aria-haspopup="dialog"
 		onclick={togglePanel}
 		class={[
-			'flex h-10 w-full items-center gap-2.5 rounded-xl border border-border bg-surface-elevated px-2.5 text-left transition-colors',
+			'flex w-full items-center border border-border bg-surface-elevated text-left transition-colors',
+			triggerSizeClasses[size],
 			'hover:bg-surface-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/20',
 			open && 'border-brand-500 ring-2 ring-brand-500/20',
 			disabled && 'cursor-not-allowed opacity-60'
 		]}
 	>
-		<span class="cp-checker relative h-7 w-7 shrink-0 overflow-hidden rounded-lg border border-border">
+		<span
+			class={[
+				'cp-checker relative shrink-0 overflow-hidden border border-border',
+				swatchSizeClasses[size]
+			]}
+		>
 			<span class="absolute inset-0" style:background={preview}></span>
 		</span>
-		<span class="min-w-0 flex-1 truncate font-mono text-sm text-primary">{value}</span>
-		<svg class="h-4 w-4 shrink-0 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+		<span class={['min-w-0 flex-1 truncate font-mono text-primary', valueSizeClasses[size]]}>
+			{value}
+		</span>
+		<svg
+			class={['shrink-0 text-muted', chevronSizeClasses[size]]}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 		</svg>
 	</button>

package/dist/components/molecules/ColorPicker/ColorPicker.svelte.d.ts

@@ -1,4 +1,5 @@
 export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+type ColorPickerSize = 'sm' | 'md' | 'lg';
 interface ColorPickerProps {
     value?: string;
     swatches?: string[];
@@ -9,6 +10,7 @@ interface ColorPickerProps {
     format?: ColorFormat;
     /** Show preset swatches. */
     showSwatches?: boolean;
+    size?: ColorPickerSize;
     disabled?: boolean;
     open?: boolean;
     class?: string;

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.stories.js

@@ -0,0 +1,8 @@
+import ColumnVisibilityMenuStory from './ColumnVisibilityMenuStory.svelte';
+const meta = {
+    title: 'Molecules/ColumnVisibilityMenu',
+    component: ColumnVisibilityMenuStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import Checkbox from '../../atoms/Checkbox/Checkbox.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+
+	export interface ColumnVisibilityItem {
+		id: string;
+		label: string;
+		visible?: boolean;
+		locked?: boolean;
+	}
+
+	interface ColumnVisibilityMenuProps {
+		columns?: ColumnVisibilityItem[];
+		/** Alternative API: ids that are hidden */
+		hiddenIds?: string[];
+		title?: string;
+		class?: string;
+		onchange?: (columns: ColumnVisibilityItem[]) => void;
+		onhiddenchange?: (hiddenIds: string[]) => void;
+	}
+
+	let {
+		columns = $bindable<ColumnVisibilityItem[]>([]),
+		hiddenIds = $bindable<string[]>([]),
+		title = 'Columns',
+		class: className = '',
+		onchange,
+		onhiddenchange
+	}: ColumnVisibilityMenuProps = $props();
+
+	const items = $derived.by(() => {
+		if (columns.length) {
+			return columns.map((c) => ({
+				...c,
+				visible: hiddenIds.length
+					? !hiddenIds.includes(c.id)
+					: (c.visible ?? true)
+			}));
+		}
+		return [];
+	});
+
+	function emit(next: ColumnVisibilityItem[]) {
+		columns = next;
+		const hidden = next.filter((c) => c.visible === false).map((c) => c.id);
+		hiddenIds = hidden;
+		onchange?.(next);
+		onhiddenchange?.(hidden);
+	}
+
+	function toggle(id: string) {
+		const next = items.map((c) =>
+			c.id === id && !c.locked ? { ...c, visible: !(c.visible ?? true) } : c
+		);
+		emit(next);
+	}
+
+	function showAll() {
+		emit(items.map((c) => (c.locked ? c : { ...c, visible: true })));
+	}
+
+	function hideOptional() {
+		emit(items.map((c) => (c.locked ? c : { ...c, visible: false })));
+	}
+</script>
+
+<div
+	class={[
+		'w-56 overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-lg',
+		className
+	]}
+	data-column-visibility-menu
+	role="group"
+	aria-label={title}
+>
+	<div class="flex items-center justify-between border-b border-border px-3 py-2">
+		<span class="text-xs font-semibold uppercase tracking-wide text-muted">{title}</span>
+		<div class="flex gap-1">
+			<Button size="sm" variant="ghost" onclick={showAll}>All</Button>
+			<Button size="sm" variant="ghost" onclick={hideOptional}>None</Button>
+		</div>
+	</div>
+	<ul class="max-h-64 overflow-auto p-1">
+		{#each items as col (col.id)}
+			<li>
+				<label
+					class={[
+						'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-primary hover:bg-surface-overlay',
+						col.locked ? 'opacity-60' : ''
+					]}
+				>
+					<Checkbox
+						checked={col.visible !== false}
+						disabled={!!col.locked}
+						onchange={(checked) => {
+							if (checked === (col.visible !== false)) return;
+							toggle(col.id);
+						}}
+					/>
+					<span class="truncate">{col.label}</span>
+				</label>
+			</li>
+		{/each}
+		{#if !items.length}
+			<li class="px-2 py-4 text-center text-xs text-muted">No columns</li>
+		{/if}
+	</ul>
+</div>

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface ColumnVisibilityItem {
+    id: string;
+    label: string;
+    visible?: boolean;
+    locked?: boolean;
+}
+interface ColumnVisibilityMenuProps {
+    columns?: ColumnVisibilityItem[];
+    /** Alternative API: ids that are hidden */
+    hiddenIds?: string[];
+    title?: string;
+    class?: string;
+    onchange?: (columns: ColumnVisibilityItem[]) => void;
+    onhiddenchange?: (hiddenIds: string[]) => void;
+}
+declare const ColumnVisibilityMenu: import("svelte").Component<ColumnVisibilityMenuProps, {}, "columns" | "hiddenIds">;
+type ColumnVisibilityMenu = ReturnType<typeof ColumnVisibilityMenu>;
+export default ColumnVisibilityMenu;

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenuStory.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import ColumnVisibilityMenu from './ColumnVisibilityMenu.svelte';
+	import type { ColumnVisibilityItem } from './ColumnVisibilityMenu.svelte';
+
+	let columns = $state<ColumnVisibilityItem[]>([
+		{ id: 'name', label: 'Name', locked: true },
+		{ id: 'email', label: 'Email', visible: true },
+		{ id: 'role', label: 'Role', visible: true },
+		{ id: 'created', label: 'Created', visible: false }
+	]);
+</script>
+
+<div class="p-6">
+	<ColumnVisibilityMenu bind:columns />
+</div>

package/dist/components/molecules/ColumnVisibilityMenu/ColumnVisibilityMenuStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ColumnVisibilityMenuStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ColumnVisibilityMenuStory = ReturnType<typeof ColumnVisibilityMenuStory>;
+export default ColumnVisibilityMenuStory;

package/dist/components/molecules/ConflictResolver/ConflictResolver.stories.js

@@ -0,0 +1,8 @@
+import ConflictResolverStory from './ConflictResolverStory.svelte';
+const meta = {
+    title: 'Molecules/ConflictResolver',
+    component: ConflictResolverStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ConflictResolver/ConflictResolver.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import DiffViewer from '../DiffViewer/DiffViewer.svelte';
+	import Textarea from '../../atoms/Textarea/Textarea.svelte';
+
+	export type ConflictResolution = 'mine' | 'theirs' | 'manual';
+
+	interface ConflictResolverProps {
+		mine?: string;
+		theirs?: string;
+		mineLabel?: string;
+		theirsLabel?: string;
+		title?: string;
+		class?: string;
+		onresolve?: (result: { resolution: ConflictResolution; value: string }) => void;
+	}
+
+	let {
+		mine = '',
+		theirs = '',
+		mineLabel = 'Yours',
+		theirsLabel = 'Theirs',
+		title = 'Resolve conflict',
+		class: className = '',
+		onresolve
+	}: ConflictResolverProps = $props();
+
+	let manual = $state(mine);
+	let mode = $state<'diff' | 'manual'>('diff');
+
+	function resolve(resolution: ConflictResolution) {
+		const value = resolution === 'mine' ? mine : resolution === 'theirs' ? theirs : manual;
+		onresolve?.({ resolution, value });
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-conflict-resolver
+>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<div>
+			<h3 class="text-sm font-semibold text-primary">{title}</h3>
+			<p class="text-xs text-muted">Choose a side or edit a merged version.</p>
+		</div>
+		<div class="flex flex-wrap gap-2">
+			<Button size="sm" variant="secondary" onclick={() => resolve('mine')}>Keep mine</Button>
+			<Button size="sm" variant="secondary" onclick={() => resolve('theirs')}>Keep theirs</Button>
+			<Button
+				size="sm"
+				variant={mode === 'manual' ? 'primary' : 'ghost'}
+				onclick={() => (mode = mode === 'manual' ? 'diff' : 'manual')}
+			>
+				Manual merge
+			</Button>
+		</div>
+	</div>
+
+	{#if mode === 'diff'}
+		<DiffViewer
+			before={theirs}
+			after={mine}
+			beforeLabel={theirsLabel}
+			afterLabel={mineLabel}
+			mode="split"
+		/>
+	{:else}
+		<Textarea bind:value={manual} rows={12} class="font-mono text-xs" />
+		<div class="flex justify-end">
+			<Button size="sm" onclick={() => resolve('manual')}>Apply merge</Button>
+		</div>
+	{/if}
+</div>

package/dist/components/molecules/ConflictResolver/ConflictResolver.svelte.d.ts

@@ -0,0 +1,16 @@
+export type ConflictResolution = 'mine' | 'theirs' | 'manual';
+interface ConflictResolverProps {
+    mine?: string;
+    theirs?: string;
+    mineLabel?: string;
+    theirsLabel?: string;
+    title?: string;
+    class?: string;
+    onresolve?: (result: {
+        resolution: ConflictResolution;
+        value: string;
+    }) => void;
+}
+declare const ConflictResolver: import("svelte").Component<ConflictResolverProps, {}, "">;
+type ConflictResolver = ReturnType<typeof ConflictResolver>;
+export default ConflictResolver;

package/dist/components/molecules/ConflictResolver/ConflictResolverStory.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ConflictResolver from './ConflictResolver.svelte';
+</script>
+
+<div class="p-4">
+	<ConflictResolver
+		mine={`export function greet() {\n  return 'hola';\n}`}
+		theirs={`export function greet() {\n  return 'hello';\n}`}
+		onresolve={(r) => console.log(r)}
+	/>
+</div>

package/dist/components/molecules/ConflictResolver/ConflictResolverStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConflictResolverStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConflictResolverStory = InstanceType<typeof ConflictResolverStory>;
+export default ConflictResolverStory;