@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/components/organisms/CanvasEditor/CanvasEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type CanvasDocument } from '../../../utils/canvasDocument.js';
+import { type CanvasExportFormat } from '../../../utils/canvasExport.js';
+import type { MediaAsset } from '../../../utils/mediaTracks.js';
+interface CanvasEditorProps {
+    value?: CanvasDocument;
+    assets?: MediaAsset[];
+    class?: string;
+    onchange?: (doc: CanvasDocument) => void;
+    onassetschange?: (assets: MediaAsset[]) => void;
+    onexport?: (payload: {
+        format: CanvasExportFormat;
+        document: CanvasDocument;
+        blob?: Blob;
+    }) => void;
+}
+declare const CanvasEditor: import("svelte").Component<CanvasEditorProps, {}, "value" | "assets">;
+type CanvasEditor = ReturnType<typeof CanvasEditor>;
+export default CanvasEditor;

package/dist/components/organisms/CanvasEditor/CanvasEditorStory.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import CanvasEditor from './CanvasEditor.svelte';
+	import ToastContainer from '../Toast/ToastContainer.svelte';
+	import {
+		createCanvasLayer,
+		defaultSlotFromRect,
+		emptyCanvasDocument,
+		type CanvasExposedProp,
+		type CanvasLayer
+	} from '../../../utils/canvasDocument.js';
+	import { createWidgetDefinition } from '../../../utils/canvasWidget.js';
+	import { uid } from '../../../utils/mediaTracks.js';
+
+	function withId(layer: CanvasLayer, id: string): CanvasLayer {
+		return { ...layer, id };
+	}
+
+	const titleId = uid('layer');
+	const borderId = uid('layer');
+	const overlayId = uid('layer');
+	const imageId = uid('layer');
+	const slotId = uid('layer');
+	const titleExpose: CanvasExposedProp = {
+		id: uid('exp'),
+		targetLayerId: titleId,
+		field: 'text',
+		label: 'Title',
+		exposed: true
+	};
+
+	const cardWidget = createWidgetDefinition({
+		name: 'Card',
+		width: 320,
+		height: 260,
+		background: 'transparent',
+		layers: [
+			withId(
+				createCanvasLayer('border', {
+					name: 'Card Border',
+					fill: '#ffffff',
+					borderRadius: 16,
+					clipChildren: true,
+					parentId: null,
+					rect: { x: 0, y: 0, w: 320, h: 260 },
+					slot: defaultSlotFromRect({ x: 0, y: 0, w: 320, h: 260 }),
+					zIndex: 0
+				}),
+				borderId
+			),
+			withId(
+				createCanvasLayer('overlay', {
+					name: 'Content',
+					fill: 'transparent',
+					clipChildren: true,
+					parentId: borderId,
+					rect: { x: 0, y: 0, w: 320, h: 260 },
+					slot: {
+						anchors: { minX: 0, minY: 0, maxX: 1, maxY: 1 },
+						offsets: { left: 0, top: 0, right: 0, bottom: 0 }
+					},
+					zIndex: 0
+				}),
+				overlayId
+			),
+			withId(
+				createCanvasLayer('image', {
+					name: 'Thumb',
+					src: 'https://picsum.photos/seed/umg-card/320/120',
+					parentId: overlayId,
+					rect: { x: 0, y: 0, w: 320, h: 110 },
+					slot: defaultSlotFromRect({ x: 0, y: 0, w: 320, h: 110 }),
+					zIndex: 0
+				}),
+				imageId
+			),
+			withId(
+				createCanvasLayer('text', {
+					name: 'Title',
+					text: 'Card title',
+					fontSize: 22,
+					fontWeight: 700,
+					color: '#0f172a',
+					parentId: overlayId,
+					rect: { x: 16, y: 122, w: 288, h: 36 },
+					slot: defaultSlotFromRect({ x: 16, y: 122, w: 288, h: 36 }),
+					zIndex: 1
+				}),
+				titleId
+			),
+			withId(
+				createCanvasLayer('namedSlot', {
+					name: 'Footer',
+					slotName: 'Footer',
+					fill: 'rgba(59,130,246,0.06)',
+					parentId: overlayId,
+					rect: { x: 12, y: 168, w: 296, h: 72 },
+					slot: defaultSlotFromRect({ x: 12, y: 168, w: 296, h: 72 }),
+					zIndex: 2
+				}),
+				slotId
+			)
+		],
+		exposed: [titleExpose]
+	});
+
+	const panelId = uid('layer');
+	const hboxId = uid('layer');
+	const wrapId = uid('layer');
+	const gridId = uid('layer');
+	const cardAId = uid('layer');
+
+	let value = $state(
+		emptyCanvasDocument({
+			width: 1280,
+			height: 720,
+			background: '#f1f5f9',
+			widgets: [cardWidget],
+			layers: [
+				withId(
+					createCanvasLayer('canvasPanel', {
+						name: 'Root Canvas',
+						fill: 'transparent',
+						clipChildren: true,
+						rect: { x: 0, y: 0, w: 1280, h: 720 },
+						slot: {
+							anchors: { minX: 0, minY: 0, maxX: 1, maxY: 1 },
+							offsets: { left: 0, top: 0, right: 0, bottom: 0 }
+						},
+						zIndex: 0
+					}),
+					panelId
+				),
+				withId(
+					createCanvasLayer('widget', {
+						name: 'Card A',
+						definitionId: cardWidget.id,
+						parentId: panelId,
+						overrides: { [titleExpose.id]: 'Hello UMG' },
+						rect: { x: 48, y: 48, w: 320, h: 260 },
+						slot: defaultSlotFromRect({ x: 48, y: 48, w: 320, h: 260 }),
+						zIndex: 0
+					}),
+					cardAId
+				),
+				createCanvasLayer('text', {
+					name: 'Footer fill',
+					text: 'Injected via Named Slot',
+					fontSize: 14,
+					fontWeight: 600,
+					color: '#1d4ed8',
+					parentId: cardAId,
+					fillSlot: 'Footer',
+					// Widget-local (named slot is at 12,168 inside the card)
+					rect: { x: 20, y: 176, w: 280, h: 40 },
+					slot: defaultSlotFromRect({ x: 20, y: 176, w: 280, h: 40 }),
+					zIndex: 0
+				}),
+				createCanvasLayer('widget', {
+					name: 'Card B',
+					definitionId: cardWidget.id,
+					parentId: panelId,
+					overrides: { [titleExpose.id]: 'Reusable widget' },
+					rect: { x: 400, y: 48, w: 320, h: 260 },
+					slot: defaultSlotFromRect({ x: 400, y: 48, w: 320, h: 260 }),
+					zIndex: 1
+				}),
+				withId(
+					createCanvasLayer('hBox', {
+						name: 'Toolbar',
+						fill: 'transparent',
+						gap: 12,
+						parentId: panelId,
+						rect: { x: 48, y: 340, w: 480, h: 56 },
+						slot: defaultSlotFromRect({ x: 48, y: 340, w: 480, h: 56 }),
+						zIndex: 2
+					}),
+					hboxId
+				),
+				createCanvasLayer('roundRect', {
+					name: 'Action',
+					fill: '#2563eb',
+					borderRadius: 10,
+					parentId: hboxId,
+					rect: { x: 0, y: 0, w: 120, h: 40 },
+					slot: defaultSlotFromRect({ x: 0, y: 0, w: 120, h: 40 }),
+					zIndex: 0
+				}),
+				createCanvasLayer('roundRect', {
+					name: 'Secondary',
+					fill: '#e2e8f0',
+					borderRadius: 10,
+					parentId: hboxId,
+					rect: { x: 0, y: 0, w: 120, h: 40 },
+					slot: defaultSlotFromRect({ x: 0, y: 0, w: 120, h: 40 }),
+					zIndex: 1
+				}),
+				withId(
+					createCanvasLayer('wrapBox', {
+						name: 'Tags',
+						fill: 'transparent',
+						gap: 8,
+						parentId: panelId,
+						rect: { x: 48, y: 420, w: 320, h: 100 },
+						slot: defaultSlotFromRect({ x: 48, y: 420, w: 320, h: 100 }),
+						zIndex: 3
+					}),
+					wrapId
+				),
+				createCanvasLayer('roundRect', {
+					name: 'Tag A',
+					fill: '#bfdbfe',
+					borderRadius: 999,
+					parentId: wrapId,
+					rect: { x: 0, y: 0, w: 88, h: 28 },
+					zIndex: 0
+				}),
+				createCanvasLayer('roundRect', {
+					name: 'Tag B',
+					fill: '#bbf7d0',
+					borderRadius: 999,
+					parentId: wrapId,
+					rect: { x: 0, y: 0, w: 100, h: 28 },
+					zIndex: 1
+				}),
+				createCanvasLayer('roundRect', {
+					name: 'Tag C',
+					fill: '#fde68a',
+					borderRadius: 999,
+					parentId: wrapId,
+					rect: { x: 0, y: 0, w: 72, h: 28 },
+					zIndex: 2
+				}),
+				createCanvasLayer('roundRect', {
+					name: 'Tag D',
+					fill: '#fbcfe8',
+					borderRadius: 999,
+					parentId: wrapId,
+					rect: { x: 0, y: 0, w: 110, h: 28 },
+					zIndex: 3
+				}),
+				withId(
+					createCanvasLayer('uniformGrid', {
+						name: 'Grid',
+						fill: 'transparent',
+						gap: 10,
+						columns: 2,
+						parentId: panelId,
+						rect: { x: 400, y: 340, w: 280, h: 180 },
+						slot: defaultSlotFromRect({ x: 400, y: 340, w: 280, h: 180 }),
+						zIndex: 4
+					}),
+					gridId
+				),
+				createCanvasLayer('rect', {
+					name: 'Cell 1',
+					fill: '#93c5fd',
+					parentId: gridId,
+					rect: { x: 0, y: 0, w: 80, h: 80 },
+					zIndex: 0
+				}),
+				createCanvasLayer('rect', {
+					name: 'Cell 2',
+					fill: '#86efac',
+					parentId: gridId,
+					rect: { x: 0, y: 0, w: 80, h: 80 },
+					zIndex: 1
+				}),
+				createCanvasLayer('rect', {
+					name: 'Cell 3',
+					fill: '#fcd34d',
+					parentId: gridId,
+					rect: { x: 0, y: 0, w: 80, h: 80 },
+					zIndex: 2
+				}),
+				createCanvasLayer('rect', {
+					name: 'Cell 4',
+					fill: '#c4b5fd',
+					parentId: gridId,
+					rect: { x: 0, y: 0, w: 80, h: 80 },
+					zIndex: 3
+				}),
+				createCanvasLayer('scrollBox', {
+					name: 'Scroll',
+					fill: '#fff',
+					clipChildren: true,
+					borderRadius: 8,
+					parentId: panelId,
+					rect: { x: 720, y: 340, w: 200, h: 180 },
+					slot: defaultSlotFromRect({ x: 720, y: 340, w: 200, h: 180 }),
+					zIndex: 5
+				})
+			]
+		})
+	);
+
+	// Tall content inside scroll box (parentId set after — find scroll by name)
+	const scroll = value.layers.find((l) => l.kind === 'scrollBox');
+	if (scroll) {
+		value = {
+			...value,
+			layers: [
+				...value.layers,
+				createCanvasLayer('text', {
+					name: 'Scroll line 1',
+					text: 'Scrollable content',
+					fontSize: 16,
+					parentId: scroll.id,
+					rect: { x: 12, y: 12, w: 160, h: 32 },
+					zIndex: 0
+				}),
+				createCanvasLayer('text', {
+					name: 'Scroll line 2',
+					text: 'Below the fold…',
+					fontSize: 14,
+					color: '#64748b',
+					parentId: scroll.id,
+					rect: { x: 12, y: 200, w: 160, h: 32 },
+					zIndex: 1
+				})
+			]
+		};
+	}
+</script>
+
+<!-- Edge-to-edge in Storybook fullscreen — no padding / radius gap -->
+<div class="fixed inset-0 overflow-hidden bg-surface">
+	<CanvasEditor bind:value class="h-full" />
+	<ToastContainer />
+</div>

package/dist/components/organisms/CanvasEditor/CanvasEditorStory.svelte.d.ts

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

package/dist/components/organisms/DashboardBuilderPage/DashboardBuilderPage.svelte.d.ts

@@ -40,6 +40,6 @@ interface DashboardBuilderPageProps {
     }) => void;
     onreset?: () => void;
 }
-declare const DashboardBuilderPage: import("svelte").Component<DashboardBuilderPageProps, {}, "gap" | "cols" | "compact" | "density" | "lastSaved" | "layout" | "showGrid" | "rowHeight" | "editable" | "widgets" | "sidebarTab" | "saveStatus">;
+declare const DashboardBuilderPage: import("svelte").Component<DashboardBuilderPageProps, {}, "gap" | "cols" | "widgets" | "compact" | "density" | "lastSaved" | "layout" | "showGrid" | "rowHeight" | "editable" | "sidebarTab" | "saveStatus">;
 type DashboardBuilderPage = ReturnType<typeof DashboardBuilderPage>;
 export default DashboardBuilderPage;

package/dist/components/organisms/DesktopShell/DesktopShell.svelte.d.ts

@@ -71,6 +71,6 @@ interface DesktopShellProps {
     onuseraction?: (id: string) => void;
     onmenu?: (itemId: string, parentId: string) => void;
 }
-declare const DesktopShell: import("svelte").Component<DesktopShellProps, {}, "activeId" | "widgets" | "wallpaper" | "windows" | "showDesktopIcons" | "showWidgets" | "startOpen" | "commandOpen">;
+declare const DesktopShell: import("svelte").Component<DesktopShellProps, {}, "widgets" | "activeId" | "wallpaper" | "windows" | "showDesktopIcons" | "showWidgets" | "startOpen" | "commandOpen">;
 type DesktopShell = ReturnType<typeof DesktopShell>;
 export default DesktopShell;

package/dist/components/organisms/EditorShell/EditorShell.svelte

@@ -8,13 +8,33 @@
 		inspectorTitle?: string;
 		workspaceTitle?: string;
 		bottomTitle?: string;
+		/** Sized-pane value (%, or px when sizeUnit is `px`). */
 		sidebarSize?: number;
 		inspectorSize?: number;
-		/** Height % of the bottom content pane */
+		/** Height of the bottom content pane */
 		bottomSize?: number;
+		sizeUnit?: 'percent' | 'px';
+		sidebarMin?: number;
+		sidebarMax?: number;
+		inspectorMin?: number;
+		inspectorMax?: number;
+		bottomMin?: number;
+		bottomMax?: number;
 		showBottom?: boolean;
 		showInspector?: boolean;
 		showSidebar?: boolean;
+		/**
+		 * Wrap each slot in a Panel chrome. Set false when the slot already
+		 * provides its own panels (e.g. Palette + Variables stacked).
+		 */
+		wrapSidebar?: boolean;
+		wrapInspector?: boolean;
+		wrapWorkspace?: boolean;
+		wrapBottom?: boolean;
+		/** Collapse chrome on dock panels (when wrapped) */
+		collapsiblePanels?: boolean;
+		/** Hide resize grips until hover */
+		revealResizeOnHover?: boolean;
 		fullHeight?: boolean;
 		class?: string;
 		sidebar?: Snippet;
@@ -31,9 +51,22 @@
 		sidebarSize = $bindable(22),
 		inspectorSize = $bindable(28),
 		bottomSize = $bindable(28),
+		sizeUnit = 'percent',
+		sidebarMin = 12,
+		sidebarMax = 40,
+		inspectorMin = 18,
+		inspectorMax = 45,
+		bottomMin = 15,
+		bottomMax = 55,
 		showBottom = true,
 		showInspector = true,
 		showSidebar = true,
+		wrapSidebar = true,
+		wrapInspector = true,
+		wrapWorkspace = true,
+		wrapBottom = true,
+		collapsiblePanels = true,
+		revealResizeOnHover = true,
 		fullHeight = true,
 		class: className = '',
 		sidebar,
@@ -41,6 +74,11 @@
 		bottom,
 		inspector
 	}: EditorShellProps = $props();
+
+	let sidebarCollapsed = $state(false);
+	let inspectorCollapsed = $state(false);
+	let workspaceCollapsed = $state(false);
+	let bottomCollapsed = $state(false);
 </script>
 
 <div
@@ -54,16 +92,30 @@
 		<SplitPane
 			orientation="horizontal"
 			bind:size={sidebarSize}
-			minSize={12}
-			maxSize={40}
+			unit={sizeUnit}
+			minSize={sidebarMin}
+			maxSize={sidebarMax}
+			startCollapsed={wrapSidebar && sidebarCollapsed}
+			revealOnHover={revealResizeOnHover}
 			class="h-full"
 		>
 			{#snippet start()}
-				<Panel title={sidebarTitle}>
-					{#if sidebar}
+				{#if wrapSidebar}
+					<Panel
+						title={sidebarTitle}
+						collapsible={collapsiblePanels}
+						bind:collapsed={sidebarCollapsed}
+						padding="none"
+					>
+						{#if sidebar}
+							{@render sidebar()}
+						{/if}
+					</Panel>
+				{:else if sidebar}
+					<div class="h-full min-h-0 min-w-0">
 						{@render sidebar()}
-					{/if}
-				</Panel>
+					</div>
+				{/if}
 			{/snippet}
 			{#snippet end()}
 				{@render mainAndInspector()}
@@ -75,61 +127,114 @@
 </div>
 
 {#snippet mainAndInspector()}
-	{#if showInspector}
-		<SplitPane
-			orientation="horizontal"
-			bind:size={inspectorSize}
-			sizePane="end"
-			minSize={18}
-			maxSize={45}
-			class="h-full"
-		>
-			{#snippet start()}
-				{@render centerColumn()}
-			{/snippet}
-			{#snippet end()}
-				<Panel title={inspectorTitle} padding="none">
-					{#if inspector}
-						{@render inspector()}
+	<div class="h-full min-h-0 min-w-0">
+		{#if showInspector}
+			<SplitPane
+				orientation="horizontal"
+				bind:size={inspectorSize}
+				sizePane="end"
+				unit={sizeUnit}
+				minSize={inspectorMin}
+				maxSize={inspectorMax}
+				endCollapsed={wrapInspector && inspectorCollapsed}
+				revealOnHover={revealResizeOnHover}
+				class="h-full"
+			>
+				{#snippet start()}
+					{@render centerColumn()}
+				{/snippet}
+				{#snippet end()}
+					{#if wrapInspector}
+						<Panel
+							title={inspectorTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={inspectorCollapsed}
+						>
+							{#if inspector}
+								{@render inspector()}
+							{/if}
+						</Panel>
+					{:else if inspector}
+						<div class="h-full min-h-0 min-w-0">
+							{@render inspector()}
+						</div>
 					{/if}
-				</Panel>
-			{/snippet}
-		</SplitPane>
-	{:else}
-		{@render centerColumn()}
-	{/if}
+				{/snippet}
+			</SplitPane>
+		{:else}
+			{@render centerColumn()}
+		{/if}
+	</div>
 {/snippet}
 
 {#snippet centerColumn()}
-	{#if showBottom}
-		<SplitPane
-			orientation="vertical"
-			bind:size={bottomSize}
-			sizePane="end"
-			minSize={15}
-			maxSize={55}
-			class="h-full"
-		>
-			{#snippet start()}
-				<Panel title={workspaceTitle}>
-					{#if workspace}
-						{@render workspace()}
+	<div class="h-full min-h-0 min-w-0">
+		{#if showBottom}
+			<SplitPane
+				orientation="vertical"
+				bind:size={bottomSize}
+				sizePane="end"
+				unit={sizeUnit}
+				minSize={bottomMin}
+				maxSize={bottomMax}
+				startCollapsed={wrapWorkspace && workspaceCollapsed}
+				endCollapsed={wrapBottom && bottomCollapsed}
+				revealOnHover={revealResizeOnHover}
+				class="h-full"
+			>
+				{#snippet start()}
+					{#if wrapWorkspace}
+						<Panel
+							title={workspaceTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={workspaceCollapsed}
+						>
+							{#if workspace}
+								{@render workspace()}
+							{/if}
+						</Panel>
+					{:else if workspace}
+						<div class="h-full min-h-0 min-w-0">
+							{@render workspace()}
+						</div>
 					{/if}
-				</Panel>
-			{/snippet}
-			{#snippet end()}
-				<Panel title={bottomTitle}>
-					{#if bottom}
-						{@render bottom()}
+				{/snippet}
+				{#snippet end()}
+					{#if wrapBottom}
+						<Panel
+							title={bottomTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={bottomCollapsed}
+						>
+							{#if bottom}
+								{@render bottom()}
+							{/if}
+						</Panel>
+					{:else if bottom}
+						<div class="h-full min-h-0 min-w-0">
+							{@render bottom()}
+						</div>
 					{/if}
-				</Panel>
-			{/snippet}
-		</SplitPane>
-	{:else}
-		<Panel title={workspaceTitle}>
-			{#if workspace}
+				{/snippet}
+			</SplitPane>
+		{:else if wrapWorkspace}
+			<Panel
+				title={workspaceTitle}
+				padding="none"
+				collapsible={collapsiblePanels}
+				bind:collapsed={workspaceCollapsed}
+			>
+				{#if workspace}
+					{@render workspace()}
+				{/if}
+			</Panel>
+		{:else if workspace}
+			<div class="h-full min-h-0 min-w-0">
 				{@render workspace()}
-			{/if}
-		</Panel>
-	{/if}
+			</div>
+		{/if}
+	</div>
 {/snippet}

package/dist/components/organisms/EditorShell/EditorShell.svelte.d.ts

@@ -4,13 +4,33 @@ interface EditorShellProps {
     inspectorTitle?: string;
     workspaceTitle?: string;
     bottomTitle?: string;
+    /** Sized-pane value (%, or px when sizeUnit is `px`). */
     sidebarSize?: number;
     inspectorSize?: number;
-    /** Height % of the bottom content pane */
+    /** Height of the bottom content pane */
     bottomSize?: number;
+    sizeUnit?: 'percent' | 'px';
+    sidebarMin?: number;
+    sidebarMax?: number;
+    inspectorMin?: number;
+    inspectorMax?: number;
+    bottomMin?: number;
+    bottomMax?: number;
     showBottom?: boolean;
     showInspector?: boolean;
     showSidebar?: boolean;
+    /**
+     * Wrap each slot in a Panel chrome. Set false when the slot already
+     * provides its own panels (e.g. Palette + Variables stacked).
+     */
+    wrapSidebar?: boolean;
+    wrapInspector?: boolean;
+    wrapWorkspace?: boolean;
+    wrapBottom?: boolean;
+    /** Collapse chrome on dock panels (when wrapped) */
+    collapsiblePanels?: boolean;
+    /** Hide resize grips until hover */
+    revealResizeOnHover?: boolean;
     fullHeight?: boolean;
     class?: string;
     sidebar?: Snippet;