@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilder.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Select from '../Select/Select.svelte';
+	import type { FieldType, ResourceField } from '../../organisms/ResourceStudio/types.js';
+
+	export type { ResourceField, FieldType };
+
+	const FIELD_TYPES: { value: FieldType; label: string }[] = [
+		{ value: 'string', label: 'String' },
+		{ value: 'text', label: 'Text' },
+		{ value: 'number', label: 'Number' },
+		{ value: 'boolean', label: 'Boolean' },
+		{ value: 'date', label: 'Date' },
+		{ value: 'datetime', label: 'DateTime' },
+		{ value: 'enum', label: 'Enum' },
+		{ value: 'json', label: 'JSON' },
+		{ value: 'relation', label: 'Relation' },
+		{ value: 'file', label: 'File' },
+		{ value: 'custom', label: 'Custom' }
+	];
+
+	interface SchemaFieldBuilderProps {
+		fields?: ResourceField[];
+		class?: string;
+		onchange?: (fields: ResourceField[]) => void;
+	}
+
+	let {
+		fields = $bindable<ResourceField[]>([]),
+		class: className = '',
+		onchange
+	}: SchemaFieldBuilderProps = $props();
+
+	function emit(next: ResourceField[]) {
+		fields = next;
+		onchange?.(next);
+	}
+
+	function addField() {
+		const id = `field_${fields.length + 1}`;
+		emit([
+			...fields,
+			{ id, label: `Field ${fields.length + 1}`, type: 'string', required: false }
+		]);
+	}
+
+	function update(id: string, patch: Partial<ResourceField>) {
+		emit(fields.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+	}
+
+	function remove(id: string) {
+		emit(fields.filter((f) => f.id !== id));
+	}
+
+	function move(id: string, dir: -1 | 1) {
+		const idx = fields.findIndex((f) => f.id === id);
+		const nextIdx = idx + dir;
+		if (idx < 0 || nextIdx < 0 || nextIdx >= fields.length) return;
+		const next = [...fields];
+		const [item] = next.splice(idx, 1);
+		next.splice(nextIdx, 0, item);
+		emit(next);
+	}
+
+	function setOptions(id: string, raw: string) {
+		const options = raw
+			.split('\n')
+			.map((l) => l.trim())
+			.filter(Boolean)
+			.map((line) => {
+				const [value, label] = line.split('|');
+				return { value: value.trim(), label: (label ?? value).trim() };
+			});
+		update(id, { options });
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-schema-field-builder
+>
+	<div class="flex items-center justify-between gap-2">
+		<div>
+			<p class="text-sm font-semibold text-primary">Schema fields</p>
+			<p class="text-xs text-muted">{fields.length} fields</p>
+		</div>
+		<Button size="sm" onclick={addField}>Add field</Button>
+	</div>
+
+	{#if !fields.length}
+		<p class="rounded-lg border border-dashed border-border px-3 py-8 text-center text-sm text-muted">
+			No fields yet.
+		</p>
+	{:else}
+		<ul class="flex flex-col gap-2">
+			{#each fields as field, i (field.id)}
+				<li class="rounded-xl border border-border p-3">
+					<div class="mb-2 flex items-center justify-between gap-2">
+						<span class="font-mono text-[11px] text-muted">{field.id}</span>
+						<div class="flex gap-1">
+							<Button size="sm" variant="ghost" disabled={i === 0} onclick={() => move(field.id, -1)}>
+								↑
+							</Button>
+							<Button
+								size="sm"
+								variant="ghost"
+								disabled={i === fields.length - 1}
+								onclick={() => move(field.id, 1)}
+							>
+								↓
+							</Button>
+							<Button size="sm" variant="ghost" onclick={() => remove(field.id)}>Remove</Button>
+						</div>
+					</div>
+					<div class="grid gap-2 sm:grid-cols-2">
+						<Input
+							value={field.id}
+							placeholder="id"
+							oninput={(e) => update(field.id, { id: (e.currentTarget as HTMLInputElement).value })}
+						/>
+						<Input
+							value={field.label}
+							placeholder="Label"
+							oninput={(e) => update(field.id, { label: (e.currentTarget as HTMLInputElement).value })}
+						/>
+						<Select
+							value={field.type}
+							options={FIELD_TYPES}
+							onchange={(v) => update(field.id, { type: v as FieldType })}
+						/>
+						<label class="flex items-center gap-2 text-sm text-secondary">
+							<input
+								type="checkbox"
+								checked={!!field.required}
+								onchange={(e) =>
+									update(field.id, { required: (e.currentTarget as HTMLInputElement).checked })}
+							/>
+							Required
+						</label>
+						{#if field.type === 'enum'}
+							<textarea
+								class="col-span-full min-h-[72px] w-full rounded-lg border border-border bg-surface px-3 py-2 font-mono text-xs text-primary"
+								placeholder={'value|Label (one per line)'}
+								value={(field.options ?? []).map((o) => `${o.value}|${o.label}`).join('\n')}
+								oninput={(e) => setOptions(field.id, (e.currentTarget as HTMLTextAreaElement).value)}
+							></textarea>
+						{/if}
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { ResourceField } from '../../organisms/ResourceStudio/types.js';
+interface SchemaFieldBuilderProps {
+    fields?: ResourceField[];
+    class?: string;
+    onchange?: (fields: ResourceField[]) => void;
+}
+declare const SchemaFieldBuilder: import("svelte").Component<SchemaFieldBuilderProps, {
+    ResourceField: typeof ResourceField;
+    FieldType: typeof FieldType;
+}, "fields">;
+type SchemaFieldBuilder = ReturnType<typeof SchemaFieldBuilder>;
+export default SchemaFieldBuilder;

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilderStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import SchemaFieldBuilder from './SchemaFieldBuilder.svelte';
+	import type { ResourceField } from '../../organisms/ResourceStudio/types.js';
+
+	let fields = $state<ResourceField[]>([
+		{ id: 'name', label: 'Name', type: 'string', required: true },
+		{ id: 'status', label: 'Status', type: 'enum', options: [
+			{ value: 'active', label: 'Active' },
+			{ value: 'draft', label: 'Draft' }
+		]}
+	]);
+</script>
+
+<div class="mx-auto max-w-xl p-4">
+	<SchemaFieldBuilder bind:fields />
+</div>

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilderStory.svelte.d.ts

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

package/dist/components/molecules/SecretField/SecretField.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/SecretField/SecretField.stories.js

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

package/dist/components/molecules/SecretField/SecretField.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Input from '../../atoms/Input/Input.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import CopyButton from '../CopyButton/CopyButton.svelte';
+
+	interface SecretFieldProps {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		revealLabel?: string;
+		hideLabel?: string;
+		class?: string;
+		onchange?: (value: string) => void;
+		onreveal?: () => void;
+		oncopy?: () => void;
+	}
+
+	let {
+		value = $bindable(''),
+		label = 'Secret',
+		placeholder = '••••••••••••',
+		disabled = false,
+		revealLabel = 'Reveal',
+		hideLabel = 'Hide',
+		class: className = '',
+		onchange,
+		onreveal,
+		oncopy
+	}: SecretFieldProps = $props();
+
+	let revealed = $state(false);
+
+	function toggle() {
+		revealed = !revealed;
+		if (revealed) onreveal?.();
+	}
+</script>
+
+<div class={['flex flex-col gap-1.5', className]} data-secret-field>
+	{#if label}
+		<span class="text-xs font-medium text-secondary">{label}</span>
+	{/if}
+	<div class="flex items-center gap-2">
+		<Input
+			type={revealed ? 'text' : 'password'}
+			bind:value
+			{placeholder}
+			{disabled}
+			class="flex-1 font-mono"
+			oninput={(e) => onchange?.((e.currentTarget as HTMLInputElement).value)}
+		/>
+		<Button size="sm" variant="secondary" {disabled} onclick={toggle}>
+			{revealed ? hideLabel : revealLabel}
+		</Button>
+		<CopyButton {value} size="sm" oncopy={oncopy} />
+	</div>
+</div>

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

@@ -0,0 +1,15 @@
+interface SecretFieldProps {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    revealLabel?: string;
+    hideLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onreveal?: () => void;
+    oncopy?: () => void;
+}
+declare const SecretField: import("svelte").Component<SecretFieldProps, {}, "value">;
+type SecretField = ReturnType<typeof SecretField>;
+export default SecretField;

package/dist/components/molecules/SecretField/SecretFieldStory.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import SecretField from './SecretField.svelte';
+	let value = $state('sk_live_51Hx…demo');
+</script>
+
+<div class="mx-auto max-w-md p-4">
+	<SecretField bind:value label="API key" />
+</div>

package/dist/components/molecules/SecretField/SecretFieldStory.svelte.d.ts

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

package/dist/components/molecules/SplitPane/SplitPane.svelte

@@ -5,13 +5,21 @@
 
 	interface SplitPaneProps {
 		orientation?: SplitOrientation;
-		/** Size of the sized pane as percentage (bindable) */
+		/** Size of the sized pane (bindable). Unit controlled by `unit`. */
 		size?: number;
 		defaultSize?: number;
 		minSize?: number;
 		maxSize?: number;
-		/** Which pane the size percentage applies to */
+		/** Which pane the size applies to */
 		sizePane?: 'start' | 'end';
+		/** `percent` (default) or absolute `px` relative to the container. */
+		unit?: 'percent' | 'px';
+		/**
+		 * Collapse a pane to its content intrinsic size (e.g. Panel header).
+		 * The sibling fills the remaining space; the handle is hidden.
+		 */
+		startCollapsed?: boolean;
+		endCollapsed?: boolean;
 		/**
 		 * Idle: thin accent line. Hover / focus / drag: full grip.
 		 * Pass-through to SplitHandle.
@@ -29,6 +37,9 @@
 		minSize = 15,
 		maxSize = 85,
 		sizePane = 'start',
+		unit = 'percent',
+		startCollapsed = false,
+		endCollapsed = false,
 		revealOnHover = false,
 		class: className = '',
 		start,
@@ -44,6 +55,15 @@
 	const isHorizontal = $derived(orientation === 'horizontal');
 	const currentSize = $derived(size ?? internalSize);
 	const sizeEnd = $derived(sizePane === 'end');
+	const isPx = $derived(unit === 'px');
+	const eitherCollapsed = $derived(startCollapsed || endCollapsed);
+	const bothCollapsed = $derived(startCollapsed && endCollapsed);
+
+	function containerSpan(): number {
+		if (!containerEl) return isPx ? 1000 : 100;
+		const rect = containerEl.getBoundingClientRect();
+		return isHorizontal ? rect.width : rect.height;
+	}
 
 	function setSize(next: number) {
 		const clamped = Math.min(maxSize, Math.max(minSize, next));
@@ -55,18 +75,21 @@
 	}
 
 	function applyPointer(e: PointerEvent) {
-		if (!containerEl) return;
+		if (!containerEl || eitherCollapsed) return;
 		const rect = containerEl.getBoundingClientRect();
-		let pct: number;
-		if (isHorizontal) {
-			pct = ((e.clientX - rect.left) / rect.width) * 100;
-		} else {
-			pct = ((e.clientY - rect.top) / rect.height) * 100;
+		const span = isHorizontal ? rect.width : rect.height;
+		const offset = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top;
+		if (isPx) {
+			const fromStart = offset;
+			setSize(sizeEnd ? span - fromStart : fromStart);
+			return;
 		}
+		const pct = (offset / span) * 100;
 		setSize(sizeEnd ? 100 - pct : pct);
 	}
 
 	function startDrag(e: PointerEvent) {
+		if (eitherCollapsed) return;
 		if (e.button !== 0 && e.pointerType === 'mouse') return;
 		e.preventDefault();
 		isDragging = true;
@@ -91,27 +114,61 @@
 	}
 
 	function onAdjust(delta: number) {
-		// Handle value is always the separator position from the start edge
+		if (eitherCollapsed) return;
+		if (isPx) {
+			const span = containerSpan();
+			const separator = sizeEnd ? span - currentSize : currentSize;
+			const nextSep = separator + delta * 4;
+			setSize(sizeEnd ? span - nextSep : nextSep);
+			return;
+		}
 		const separator = sizeEnd ? 100 - currentSize : currentSize;
 		const nextSep = separator + delta;
 		setSize(sizeEnd ? 100 - nextSep : nextSep);
 	}
 
-	const separatorValue = $derived(sizeEnd ? 100 - currentSize : currentSize);
-	const separatorMin = $derived(sizeEnd ? 100 - maxSize : minSize);
-	const separatorMax = $derived(sizeEnd ? 100 - minSize : maxSize);
-
-	const startStyle = $derived(
-		sizeEnd
-			? 'flex:1;min-width:0;min-height:0;'
-			: `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`
-	);
-
-	const endStyle = $derived(
-		sizeEnd
-			? `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`
-			: 'flex:1;min-width:0;min-height:0;'
-	);
+	const separatorValue = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - currentSize : currentSize;
+		const span = containerSpan() || 1;
+		const fromStart = sizeEnd ? span - currentSize : currentSize;
+		return (fromStart / span) * 100;
+	});
+	const separatorMin = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - maxSize : minSize;
+		const span = containerSpan() || 1;
+		const fromStartMin = sizeEnd ? span - maxSize : minSize;
+		return (fromStartMin / span) * 100;
+	});
+	const separatorMax = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - minSize : maxSize;
+		const span = containerSpan() || 1;
+		const fromStartMax = sizeEnd ? span - minSize : maxSize;
+		return (fromStartMax / span) * 100;
+	});
+
+	/** Collapsed panes shrink to content (Panel header); sibling fills. */
+	const collapsedStyle = 'flex:none;align-self:stretch;';
+	const fillStyle = 'flex:1;min-width:0;min-height:0;';
+
+	function sizedStyle(): string {
+		return isPx
+			? `${isHorizontal ? 'width' : 'height'}:${currentSize}px;flex:none;`
+			: `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`;
+	}
+
+	const startStyle = $derived.by(() => {
+		if (bothCollapsed) return collapsedStyle;
+		if (startCollapsed) return collapsedStyle;
+		if (endCollapsed) return fillStyle;
+		return sizeEnd ? fillStyle : sizedStyle();
+	});
+
+	const endStyle = $derived.by(() => {
+		if (bothCollapsed) return collapsedStyle;
+		if (endCollapsed) return collapsedStyle;
+		if (startCollapsed) return fillStyle;
+		return sizeEnd ? sizedStyle() : fillStyle;
+	});
 </script>
 
 <div
@@ -123,27 +180,29 @@
 		className
 	]}
 >
-	<div class="min-h-0 min-w-0 overflow-hidden" style={startStyle}>
+	<div class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden" style={startStyle}>
 		{#if start}
 			{@render start()}
 		{/if}
 	</div>
 
-	<SplitHandle
-		{orientation}
-		value={separatorValue}
-		min={separatorMin}
-		max={separatorMax}
-		dragging={isDragging}
-		{revealOnHover}
-		onpointerdown={startDrag}
-		onpointermove={onPointerMove}
-		onpointerup={stopDrag}
-		onpointercancel={stopDrag}
-		onadjust={onAdjust}
-	/>
-
-	<div class="min-h-0 min-w-0 overflow-hidden" style={endStyle}>
+	{#if !eitherCollapsed}
+		<SplitHandle
+			{orientation}
+			value={separatorValue}
+			min={separatorMin}
+			max={separatorMax}
+			dragging={isDragging}
+			{revealOnHover}
+			onpointerdown={startDrag}
+			onpointermove={onPointerMove}
+			onpointerup={stopDrag}
+			onpointercancel={stopDrag}
+			onadjust={onAdjust}
+		/>
+	{/if}
+
+	<div class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden" style={endStyle}>
 		{#if end}
 			{@render end()}
 		{/if}

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

@@ -2,13 +2,21 @@ import type { Snippet } from 'svelte';
 import type { SplitOrientation } from '../../atoms/SplitHandle/SplitHandle.svelte';
 interface SplitPaneProps {
     orientation?: SplitOrientation;
-    /** Size of the sized pane as percentage (bindable) */
+    /** Size of the sized pane (bindable). Unit controlled by `unit`. */
     size?: number;
     defaultSize?: number;
     minSize?: number;
     maxSize?: number;
-    /** Which pane the size percentage applies to */
+    /** Which pane the size applies to */
     sizePane?: 'start' | 'end';
+    /** `percent` (default) or absolute `px` relative to the container. */
+    unit?: 'percent' | 'px';
+    /**
+     * Collapse a pane to its content intrinsic size (e.g. Panel header).
+     * The sibling fills the remaining space; the handle is hidden.
+     */
+    startCollapsed?: boolean;
+    endCollapsed?: boolean;
     /**
      * Idle: thin accent line. Hover / focus / drag: full grip.
      * Pass-through to SplitHandle.

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

@@ -23,6 +23,6 @@ interface TableToolbarProps {
     oncolumnschange?: (columns: TableColumnOption[]) => void;
     onexport?: (format: 'csv' | 'json') => void;
 }
-declare const TableToolbar: import("svelte").Component<TableToolbarProps, {}, "search" | "density" | "columns">;
+declare const TableToolbar: import("svelte").Component<TableToolbarProps, {}, "search" | "columns" | "density">;
 type TableToolbar = ReturnType<typeof TableToolbar>;
 export default TableToolbar;

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

@@ -0,0 +1,20 @@
+import TerminalStory from './TerminalStory.svelte';
+const meta = {
+    title: 'Molecules/Terminal',
+    component: TerminalStory,
+    tags: ['autodocs'],
+    argTypes: {
+        tone: {
+            control: 'select',
+            options: ['adaptive', 'contrast']
+        }
+    },
+    args: {
+        tone: 'adaptive'
+    }
+};
+export default meta;
+export const Adaptive = {};
+export const Contrast = {
+    args: { tone: 'contrast' }
+};