@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/components/molecules/BulkActionBar/BulkActionBar.svelte

@@ -2,6 +2,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import Button from '../../atoms/Button/Button.svelte';
 	import CloseButton from '../../atoms/CloseButton/CloseButton.svelte';
+	import Tooltip from '../../atoms/Tooltip/Tooltip.svelte';
 	import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte';
 	import type { DropdownItem } from '../DropdownMenu/DropdownMenu.svelte';
 	import Divider from '../../atoms/Divider/Divider.svelte';
@@ -45,6 +46,8 @@
 		sticky?: boolean;
 		/** Cap visible primary actions; rest go to More */
 		maxPrimary?: number;
+		/** Tight icon toolbar — badge + icon actions, no selection copy */
+		compact?: boolean;
 		showSelectAll?: boolean;
 		showClear?: boolean;
 		showHint?: boolean;
@@ -77,6 +80,7 @@
 		tone = 'brand',
 		sticky = true,
 		maxPrimary = 3,
+		compact = false,
 		showSelectAll = true,
 		showClear = true,
 		showHint = true,
@@ -95,9 +99,11 @@
 
 	let pendingConfirm = $state<string | null>(null);
 
-	const btnSize = $derived(size);
-	const closeSize = $derived(size === 'xs' ? 'sm' : 'sm');
-	const iconPx = $derived(size === 'xs' ? 'h-3.5 w-3.5' : 'h-3.5 w-3.5');
+	const btnSize = $derived(compact ? 'xs' : size);
+	const closeSize = $derived(btnSize === 'xs' ? 'sm' : 'sm');
+	const iconPx = $derived(btnSize === 'xs' ? 'h-3.5 w-3.5' : 'h-3.5 w-3.5');
+	const showCopy = $derived(!compact);
+	const hintEnabled = $derived(showHint && !compact);
 
 	/** Split by overflow flag, then by maxPrimary */
 	const split = $derived.by(() => {
@@ -129,11 +135,13 @@
 	});
 
 	const allSelected = $derived(total != null && total > 0 && count >= total);
-	const canSelectAll = $derived(showSelectAll && !!onselectall && total != null && count > 0 && !allSelected);
-	const canSelectNone = $derived(!!onselectnone && allSelected);
+	const canSelectAll = $derived(
+		showCopy && showSelectAll && !!onselectall && total != null && count > 0 && !allSelected
+	);
+	const canSelectNone = $derived(showCopy && !!onselectnone && allSelected);
 
 	const resolvedHint = $derived.by(() => {
-		if (!showHint) return '';
+		if (!hintEnabled) return '';
 		if (pendingConfirm) {
 			return `Confirm ${actions.find((a) => a.id === pendingConfirm)?.label ?? 'action'}?`;
 		}
@@ -169,15 +177,29 @@
 			onclear?.();
 		}
 	}
+
+	/** Dock sticks to the viewport bottom; portal avoids parent transform/overflow traps. */
+	function portalDock(node: HTMLElement) {
+		if (!(placement === 'dock' && sticky)) return {};
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				node.remove();
+			}
+		};
+	}
+
+	const dockFixed = $derived(placement === 'dock' && sticky);
 </script>
 
 <svelte:window onkeydown={onKeydown} />
 
 {#if count > 0}
 	<div
+		use:portalDock
 		class={[
 			placement === 'dock' && 'pointer-events-none z-30 flex justify-center',
-			placement === 'dock' && sticky && 'sticky bottom-3 px-3',
+			dockFixed && 'fixed inset-x-0 bottom-3 z-50 px-3',
 			placement === 'inline' && sticky && 'sticky bottom-0 z-20',
 			className
 		]}
@@ -186,22 +208,28 @@
 	>
 		<div
 			class={[
-				'pointer-events-auto flex w-full flex-col gap-2 border shadow-lg backdrop-blur-md',
+				'pointer-events-auto flex border shadow-lg backdrop-blur-md',
 				'ring-1 ring-black/5 dark:ring-white/10',
-				placement === 'dock' &&
+				compact
+					? 'w-auto max-w-[min(100%,36rem)] flex-row items-center gap-1.5 rounded-full border-border bg-surface-elevated/95 px-2 py-1.5'
+					: 'w-full flex-col gap-2',
+				!compact &&
+					placement === 'dock' &&
 					'max-w-2xl rounded-xl border-border bg-surface-elevated/95 px-3 py-2 sm:flex-row sm:items-center sm:gap-3 sm:px-3.5',
-				placement === 'inline' &&
+				!compact &&
+					placement === 'inline' &&
 					'rounded-none border-x-0 border-b-0 border-border bg-surface-elevated/95 px-3 py-2 sm:flex-row sm:items-center'
 			]}
 		>
-			<div class="flex min-w-0 flex-1 items-center gap-2.5">
+			<div class={['flex min-w-0 items-center gap-2.5', compact ? 'shrink-0' : 'flex-1']}>
 				{#if leading}
 					{@render leading()}
 				{:else}
 					<span
 						class={[
 							'inline-flex shrink-0 items-center justify-center rounded-lg font-bold tabular-nums shadow-sm',
-							size === 'xs' ? 'h-7 min-w-7 px-1.5 text-xs' : 'h-8 min-w-8 px-2 text-xs',
+							btnSize === 'xs' ? 'h-7 min-w-7 px-1.5 text-xs' : 'h-8 min-w-8 px-2 text-xs',
+							compact && 'rounded-full',
 							countBadgeClass
 						]}
 						aria-hidden="true"
@@ -210,46 +238,48 @@
 					</span>
 				{/if}
 
-				<div class="min-w-0 flex-1">
-					<p class="truncate text-xs font-semibold text-primary sm:text-sm">{selectionText}</p>
-					{#if description}
-						<p class="truncate text-[11px] text-muted">{description}</p>
-					{:else if canSelectAll}
-						<button
-							type="button"
-							class="mt-0.5 text-[11px] font-medium text-brand-600 hover:underline dark:text-brand-400"
-							onclick={() => onselectall?.()}
-						>
-							Select all {total}
-						</button>
-					{:else if canSelectNone}
-						<button
-							type="button"
-							class="mt-0.5 text-[11px] font-medium text-secondary hover:underline"
-							onclick={() => onselectnone?.()}
-						>
-							Clear selection
-						</button>
-					{:else if resolvedHint}
-						<p
-							class={[
-								'mt-0.5 text-[11px]',
-								pendingConfirm ? 'text-amber-700 dark:text-amber-300' : 'text-muted'
-							]}
-						>
-							{resolvedHint}
-						</p>
-					{/if}
-				</div>
+				{#if showCopy}
+					<div class="flex min-w-0 flex-1 flex-col leading-tight">
+						<p class="truncate text-xs font-semibold text-primary sm:text-sm">{selectionText}</p>
+						{#if description}
+							<p class="truncate text-[11px] text-muted">{description}</p>
+						{:else if canSelectAll}
+							<button
+								type="button"
+								class="w-fit text-left text-[11px] font-medium text-brand-600 hover:underline dark:text-brand-400"
+								onclick={() => onselectall?.()}
+							>
+								Select all {total}
+							</button>
+						{:else if canSelectNone}
+							<button
+								type="button"
+								class="w-fit text-left text-[11px] font-medium text-secondary hover:underline"
+								onclick={() => onselectnone?.()}
+							>
+								Clear selection
+							</button>
+						{:else if resolvedHint}
+							<p
+								class={[
+									'text-[11px]',
+									pendingConfirm ? 'text-amber-700 dark:text-amber-300' : 'text-muted'
+								]}
+							>
+								{resolvedHint}
+							</p>
+						{/if}
+					</div>
+				{/if}
 
 				{#if extra}
-					<div class="hidden items-center gap-1.5 sm:flex">
+					<div class={['items-center gap-1.5', compact ? 'flex' : 'hidden sm:flex']}>
 						{@render extra()}
 					</div>
 				{/if}
 			</div>
 
-			<div class="flex flex-wrap items-center gap-1.5 sm:justify-end">
+			<div class={['flex items-center gap-1', compact ? 'shrink-0' : 'flex-wrap gap-1.5 sm:justify-end']}>
 				{#if pendingConfirm}
 					<Button size={btnSize} variant="ghost" {disabled} onclick={() => (pendingConfirm = null)}>
 						Cancel
@@ -265,22 +295,42 @@
 				{:else}
 					{#each split.primary as action (action.id)}
 						{@const Icon = action.icon}
-						<Button
-							size={btnSize}
-							variant={action.variant ?? 'secondary'}
-							disabled={disabled || action.disabled}
-							loading={action.loading}
-							aria-label={action.iconOnly ? action.label : undefined}
-							title={action.tooltip ?? (action.iconOnly ? action.label : undefined)}
-							onclick={() => run(action.id)}
-						>
-							{#if Icon}
-								<Icon class={iconPx} strokeWidth={2} />
-							{/if}
-							{#if !action.iconOnly}
-								{action.label}
-							{/if}
-						</Button>
+						{@const onlyIcon = compact ? !!Icon : !!action.iconOnly}
+						{@const tip = action.tooltip ?? (onlyIcon ? action.label : '')}
+						{#if tip}
+							<Tooltip content={tip} side="top">
+								<Button
+									size={btnSize}
+									variant={action.variant ?? 'secondary'}
+									disabled={disabled || action.disabled}
+									loading={action.loading}
+									aria-label={onlyIcon ? action.label : undefined}
+									onclick={() => run(action.id)}
+								>
+									{#if Icon}
+										<Icon class={iconPx} strokeWidth={2} />
+									{/if}
+									{#if !onlyIcon}
+										{action.label}
+									{/if}
+								</Button>
+							</Tooltip>
+						{:else}
+							<Button
+								size={btnSize}
+								variant={action.variant ?? 'secondary'}
+								disabled={disabled || action.disabled}
+								loading={action.loading}
+								onclick={() => run(action.id)}
+							>
+								{#if Icon}
+									<Icon class={iconPx} strokeWidth={2} />
+								{/if}
+								{#if !onlyIcon}
+									{action.label}
+								{/if}
+							</Button>
+						{/if}
 					{/each}
 
 					{#if overflowItems.length > 0}
@@ -297,7 +347,7 @@
 								<span
 									class={[
 										'inline-flex items-center justify-center rounded-lg text-secondary hover:bg-surface-overlay hover:text-primary',
-										size === 'xs' ? 'h-7 w-7' : 'h-8 w-8'
+										size === 'xs' || btnSize === 'xs' ? 'h-7 w-7' : 'h-8 w-8'
 									]}
 									aria-hidden="true"
 								>

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

@@ -40,6 +40,8 @@ interface BulkActionBarProps {
     sticky?: boolean;
     /** Cap visible primary actions; rest go to More */
     maxPrimary?: number;
+    /** Tight icon toolbar — badge + icon actions, no selection copy */
+    compact?: boolean;
     showSelectAll?: boolean;
     showClear?: boolean;
     showHint?: boolean;

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

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

package/dist/components/molecules/BulkEditPanel/BulkEditPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Select from '../Select/Select.svelte';
+	import Toggle from '../../atoms/Toggle/Toggle.svelte';
+
+	export type BulkEditFieldType = 'text' | 'number' | 'select' | 'boolean';
+
+	export interface BulkEditField {
+		id: string;
+		label: string;
+		type: BulkEditFieldType;
+		options?: { value: string; label: string }[];
+	}
+
+	interface BulkEditPanelProps {
+		fields?: BulkEditField[];
+		selectedCount?: number;
+		values?: Record<string, unknown>;
+		enabled?: Record<string, boolean>;
+		applyLabel?: string;
+		class?: string;
+		onchange?: (values: Record<string, unknown>) => void;
+		onapply?: (values: Record<string, unknown>) => void;
+	}
+
+	let {
+		fields = [],
+		selectedCount = 0,
+		values = $bindable<Record<string, unknown>>({}),
+		enabled = $bindable<Record<string, boolean>>({}),
+		applyLabel = 'Apply to selection',
+		class: className = '',
+		onchange,
+		onapply
+	}: BulkEditPanelProps = $props();
+
+	function setEnabled(id: string, on: boolean) {
+		enabled = { ...enabled, [id]: on };
+	}
+
+	function setValue(id: string, v: unknown) {
+		values = { ...values, [id]: v };
+		onchange?.(activeValues());
+	}
+
+	function activeValues(): Record<string, unknown> {
+		const out: Record<string, unknown> = {};
+		for (const f of fields) {
+			if (enabled[f.id]) out[f.id] = values[f.id];
+		}
+		return out;
+	}
+
+	function apply() {
+		onapply?.(activeValues());
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-bulk-edit-panel
+>
+	<div class="flex items-center justify-between gap-2">
+		<div>
+			<p class="text-sm font-semibold text-primary">Bulk edit</p>
+			<p class="text-xs text-muted">
+				{selectedCount} selected · enable fields to overwrite
+			</p>
+		</div>
+		<Button size="sm" disabled={!selectedCount || !Object.values(enabled).some(Boolean)} onclick={apply}>
+			{applyLabel}
+		</Button>
+	</div>
+
+	<ul class="flex flex-col gap-2">
+		{#each fields as field (field.id)}
+			<li class="flex flex-wrap items-center gap-3 rounded-lg border border-border px-3 py-2">
+				<label class="flex min-w-[8rem] items-center gap-2 text-sm text-primary">
+					<input
+						type="checkbox"
+						checked={!!enabled[field.id]}
+						onchange={(e) => setEnabled(field.id, (e.currentTarget as HTMLInputElement).checked)}
+					/>
+					{field.label}
+				</label>
+				<div class="min-w-[12rem] flex-1" class:opacity-40={!enabled[field.id]}>
+					{#if field.type === 'boolean'}
+						<Toggle
+							checked={!!values[field.id]}
+							disabled={!enabled[field.id]}
+							onchange={(v) => setValue(field.id, v)}
+						/>
+					{:else if field.type === 'select'}
+						<Select
+							value={String(values[field.id] ?? '')}
+							options={field.options ?? []}
+							disabled={!enabled[field.id]}
+							onchange={(v) => setValue(field.id, v)}
+							size="sm"
+						/>
+					{:else}
+						<Input
+							type={field.type === 'number' ? 'number' : 'text'}
+							value={String(values[field.id] ?? '')}
+							disabled={!enabled[field.id]}
+							oninput={(e) => {
+								const raw = (e.currentTarget as HTMLInputElement).value;
+								setValue(field.id, field.type === 'number' ? Number(raw) : raw);
+							}}
+						/>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>

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

@@ -0,0 +1,23 @@
+export type BulkEditFieldType = 'text' | 'number' | 'select' | 'boolean';
+export interface BulkEditField {
+    id: string;
+    label: string;
+    type: BulkEditFieldType;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+interface BulkEditPanelProps {
+    fields?: BulkEditField[];
+    selectedCount?: number;
+    values?: Record<string, unknown>;
+    enabled?: Record<string, boolean>;
+    applyLabel?: string;
+    class?: string;
+    onchange?: (values: Record<string, unknown>) => void;
+    onapply?: (values: Record<string, unknown>) => void;
+}
+declare const BulkEditPanel: import("svelte").Component<BulkEditPanelProps, {}, "values" | "enabled">;
+type BulkEditPanel = ReturnType<typeof BulkEditPanel>;
+export default BulkEditPanel;

package/dist/components/molecules/BulkEditPanel/BulkEditPanelStory.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import BulkEditPanel from './BulkEditPanel.svelte';
+</script>
+
+<div class="mx-auto max-w-lg p-4">
+	<BulkEditPanel
+		selectedCount={12}
+		fields={[
+			{ id: 'status', label: 'Status', type: 'select', options: [
+				{ value: 'active', label: 'Active' },
+				{ value: 'draft', label: 'Draft' }
+			]},
+			{ id: 'priority', label: 'Priority', type: 'number' },
+			{ id: 'featured', label: 'Featured', type: 'boolean' }
+		]}
+		onapply={(v) => console.log(v)}
+	/>
+</div>

package/dist/components/molecules/BulkEditPanel/BulkEditPanelStory.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 BulkEditPanelStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BulkEditPanelStory = InstanceType<typeof BulkEditPanelStory>;
+export default BulkEditPanelStory;

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

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