@r2digisolutions/components 0.1.7 → 0.2.0

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

package/dist/components/atoms/Tooltip/Tooltip.svelte

@@ -76,7 +76,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
 	bind:this={triggerEl}
-	class={['inline-flex min-w-0 max-w-full', className]}
+	class={['inline-flex shrink-0', className]}
 	onmouseenter={show}
 	onmouseleave={hide}
 	onfocusin={show}

package/dist/components/atoms/TrimHandle/TrimHandle.stories.js

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

package/dist/components/atoms/TrimHandle/TrimHandle.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	export type TrimHandleSide = 'start' | 'end';
+
+	interface TrimHandleProps {
+		side?: TrimHandleSide;
+		disabled?: boolean;
+		class?: string;
+		ondragstart?: (e: PointerEvent) => void;
+		ondrag?: (e: PointerEvent) => void;
+		ondragend?: (e: PointerEvent) => void;
+	}
+
+	let {
+		side = 'start',
+		disabled = false,
+		class: className = '',
+		ondragstart,
+		ondrag,
+		ondragend
+	}: TrimHandleProps = $props();
+
+	function onPointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.stopPropagation();
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		ondragstart?.(e);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (disabled) return;
+		if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return;
+		ondrag?.(e);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (disabled) return;
+		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		ondragend?.(e);
+	}
+</script>
+
+<button
+	type="button"
+	aria-label={side === 'start' ? 'Trim start' : 'Trim end'}
+	disabled={disabled}
+	class={[
+		'absolute top-0 z-10 h-full w-2 touch-none border-0 bg-transparent p-0',
+		'cursor-ew-resize hover:bg-white/30',
+		side === 'start' ? 'left-0' : 'right-0',
+		disabled && 'pointer-events-none opacity-40',
+		className
+	]}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<span
+		class="absolute top-1/2 h-4 w-0.5 -translate-y-1/2 rounded-full bg-white/90"
+		style:left={side === 'start' ? '3px' : 'auto'}
+		style:right={side === 'end' ? '3px' : 'auto'}
+		aria-hidden="true"
+	></span>
+</button>

package/dist/components/atoms/TrimHandle/TrimHandle.svelte.d.ts

@@ -0,0 +1,12 @@
+export type TrimHandleSide = 'start' | 'end';
+interface TrimHandleProps {
+    side?: TrimHandleSide;
+    disabled?: boolean;
+    class?: string;
+    ondragstart?: (e: PointerEvent) => void;
+    ondrag?: (e: PointerEvent) => void;
+    ondragend?: (e: PointerEvent) => void;
+}
+declare const TrimHandle: import("svelte").Component<TrimHandleProps, {}, "">;
+type TrimHandle = ReturnType<typeof TrimHandle>;
+export default TrimHandle;

package/dist/components/atoms/TrimHandle/TrimHandleStory.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import TrimHandle from './TrimHandle.svelte';
+</script>
+
+<div class="relative h-10 w-64 rounded-md bg-brand-500">
+	<TrimHandle side="start" />
+	<TrimHandle side="end" />
+	<span class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-white">
+		Clip
+	</span>
+</div>

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

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

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

package/dist/components/molecules/AiAssistPanel/AiAssistPanel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import PromptInput from '../PromptInput/PromptInput.svelte';
+	import ChatBubble from '../ChatBubble/ChatBubble.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+
+	export type AiAssistRole = 'user' | 'assistant' | 'system';
+
+	export interface AiAssistMessage {
+		id: string;
+		role: AiAssistRole;
+		content: string;
+	}
+
+	interface AiAssistPanelProps {
+		messages?: AiAssistMessage[];
+		snippets?: string[];
+		title?: string;
+		loading?: boolean;
+		placeholder?: string;
+		class?: string;
+		onsubmit?: (prompt: string) => void;
+		oninsert?: (text: string) => void;
+		onstop?: () => void;
+	}
+
+	let {
+		messages = $bindable<AiAssistMessage[]>([]),
+		snippets = [],
+		title = 'AI assist',
+		loading = false,
+		placeholder = 'Ask for help with this resource…',
+		class: className = '',
+		onsubmit,
+		oninsert,
+		onstop
+	}: AiAssistPanelProps = $props();
+
+	let draft = $state('');
+
+	function submit(value: string) {
+		const text = value.trim();
+		if (!text) return;
+		messages = [
+			...messages,
+			{ id: `m-${Date.now()}`, role: 'user', content: text }
+		];
+		draft = '';
+		onsubmit?.(text);
+	}
+</script>
+
+<aside
+	class={[
+		'flex h-full min-h-[360px] w-full max-w-md flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated',
+		className
+	]}
+	data-ai-assist-panel
+>
+	<header class="border-b border-border px-3 py-2">
+		<p class="text-sm font-semibold text-primary">{title}</p>
+	</header>
+
+	{#if snippets.length}
+		<div class="flex flex-wrap gap-1 border-b border-border px-3 py-2">
+			{#each snippets as s (s)}
+				<Button size="sm" variant="secondary" onclick={() => oninsert?.(s)}>{s}</Button>
+			{/each}
+		</div>
+	{/if}
+
+	<div class="flex-1 space-y-3 overflow-auto p-3">
+		{#each messages as msg (msg.id)}
+			{#if msg.role === 'assistant'}
+				<div class="flex flex-col items-start gap-1">
+					<ChatBubble content={msg.content} side="left" />
+					{#if oninsert}
+						<Button size="sm" variant="ghost" onclick={() => oninsert?.(msg.content)}>
+							Insert
+						</Button>
+					{/if}
+				</div>
+			{:else if msg.role === 'system'}
+				<p class="text-center text-[11px] text-muted">{msg.content}</p>
+			{:else}
+				<ChatBubble content={msg.content} side="right" />
+			{/if}
+		{/each}
+		{#if !messages.length}
+			<p class="py-8 text-center text-sm text-muted">Ask anything to get started.</p>
+		{/if}
+	</div>
+
+	<div class="border-t border-border p-3">
+		<PromptInput
+			bind:value={draft}
+			{placeholder}
+			{loading}
+			onsubmit={submit}
+			onstop={onstop}
+		/>
+	</div>
+</aside>

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

@@ -0,0 +1,20 @@
+export type AiAssistRole = 'user' | 'assistant' | 'system';
+export interface AiAssistMessage {
+    id: string;
+    role: AiAssistRole;
+    content: string;
+}
+interface AiAssistPanelProps {
+    messages?: AiAssistMessage[];
+    snippets?: string[];
+    title?: string;
+    loading?: boolean;
+    placeholder?: string;
+    class?: string;
+    onsubmit?: (prompt: string) => void;
+    oninsert?: (text: string) => void;
+    onstop?: () => void;
+}
+declare const AiAssistPanel: import("svelte").Component<AiAssistPanelProps, {}, "messages">;
+type AiAssistPanel = ReturnType<typeof AiAssistPanel>;
+export default AiAssistPanel;

package/dist/components/molecules/AiAssistPanel/AiAssistPanelStory.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import AiAssistPanel from './AiAssistPanel.svelte';
+	import type { AiAssistMessage } from './AiAssistPanel.svelte';
+
+	let messages = $state<AiAssistMessage[]>([
+		{ id: '1', role: 'system', content: 'Context: ResourceStudio · customers' },
+		{ id: '2', role: 'user', content: 'Write a filter for active VIP customers' },
+		{
+			id: '3',
+			role: 'assistant',
+			content: 'status:active AND tags:vip'
+		}
+	]);
+
+	function onsubmit(prompt: string) {
+		messages = [
+			...messages,
+			{
+				id: String(Date.now()),
+				role: 'assistant',
+				content: `Suggested: ${prompt.includes('filter') ? 'status:active' : 'Done.'}`
+			}
+		];
+	}
+</script>
+
+<div class="flex justify-center p-4">
+	<AiAssistPanel
+		bind:messages
+		{onsubmit}
+		snippets={['Summarize', 'Fix types', 'Write test']}
+		oninsert={(t) => console.log('insert', t)}
+	/>
+</div>

package/dist/components/molecules/AiAssistPanel/AiAssistPanelStory.svelte.d.ts

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

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'}?`;
 		}
@@ -200,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"
@@ -224,46 +238,48 @@
 					</span>
 				{/if}
 
-				<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 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
@@ -279,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}
@@ -311,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 = {};