@r2digisolutions/components 0.1.1

package/dist/components/molecules/RoleCard/RoleCard.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import type { AccessLevel } from '../AccessLevelToggle/AccessLevelToggle.svelte';
+	import Shield from '@lucide/svelte/icons/shield';
+	import Users from '@lucide/svelte/icons/users';
+
+	export interface RolePermissionSummary {
+		resource: string;
+		levels: AccessLevel[];
+	}
+
+	interface RoleCardProps {
+		id?: string;
+		name: string;
+		description?: string;
+		memberCount?: number;
+		/** System roles cannot be deleted */
+		system?: boolean;
+		selected?: boolean;
+		permissions?: RolePermissionSummary[];
+		class?: string;
+		onclick?: () => void;
+		onedit?: () => void;
+	}
+
+	let {
+		id,
+		name,
+		description,
+		memberCount,
+		system = false,
+		selected = false,
+		permissions = [],
+		class: className = '',
+		onclick,
+		onedit
+	}: RoleCardProps = $props();
+
+	const preview = $derived(permissions.slice(0, 4));
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	data-id={id}
+	role={onclick ? 'button' : undefined}
+	tabindex={onclick ? 0 : undefined}
+	onclick={() => onclick?.()}
+	onkeydown={(e) => {
+		if (!onclick) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick();
+		}
+	}}
+	class={[
+		'w-full rounded-2xl border bg-surface-elevated p-4 text-left shadow-sm transition-colors',
+		selected
+			? 'border-brand-500/50 ring-2 ring-brand-500/20'
+			: 'border-border hover:border-border-strong',
+		onclick && 'cursor-pointer',
+		className
+	]}
+>
+	<div class="flex items-start gap-3">
+		<span
+			class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-500/10 text-brand-600 dark:text-brand-400"
+		>
+			<Shield class="h-5 w-5" strokeWidth={2} />
+		</span>
+		<div class="min-w-0 flex-1 space-y-1">
+			<div class="flex flex-wrap items-center gap-2">
+				<p class="text-sm font-semibold text-primary">{name}</p>
+				{#if system}
+					<Badge size="sm" variant="secondary">System</Badge>
+				{/if}
+			</div>
+			{#if description}
+				<p class="text-xs leading-relaxed text-muted">{description}</p>
+			{/if}
+			{#if memberCount !== undefined}
+				<p class="inline-flex items-center gap-1 text-[11px] text-muted">
+					<Users class="h-3 w-3" strokeWidth={2} />
+					{memberCount} {memberCount === 1 ? 'member' : 'members'}
+				</p>
+			{/if}
+		</div>
+		{#if onedit}
+			<Button
+				size="xs"
+				variant="ghost"
+				onclick={(e) => {
+					e.stopPropagation();
+					onedit?.();
+				}}
+			>
+				Edit
+			</Button>
+		{/if}
+	</div>
+
+	{#if preview.length}
+		<ul class="mt-3 space-y-1.5 border-t border-border pt-3">
+			{#each preview as perm (perm.resource)}
+				<li class="flex items-center justify-between gap-2 text-[11px]">
+					<span class="truncate text-secondary">{perm.resource}</span>
+					<span class="shrink-0 font-mono uppercase tracking-wide text-muted">
+						{perm.levels.length ? perm.levels.map((l) => l[0]).join('') : '—'}
+					</span>
+				</li>
+			{/each}
+			{#if permissions.length > preview.length}
+				<li class="text-[11px] text-muted">+{permissions.length - preview.length} more</li>
+			{/if}
+		</ul>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { AccessLevel } from '../AccessLevelToggle/AccessLevelToggle.svelte';
+export interface RolePermissionSummary {
+    resource: string;
+    levels: AccessLevel[];
+}
+interface RoleCardProps {
+    id?: string;
+    name: string;
+    description?: string;
+    memberCount?: number;
+    /** System roles cannot be deleted */
+    system?: boolean;
+    selected?: boolean;
+    permissions?: RolePermissionSummary[];
+    class?: string;
+    onclick?: () => void;
+    onedit?: () => void;
+}
+declare const RoleCard: import("svelte").Component<RoleCardProps, {}, "">;
+type RoleCard = ReturnType<typeof RoleCard>;
+export default RoleCard;

package/dist/components/molecules/RoleCard/RoleCardStory.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import RoleCard from './RoleCard.svelte';
+
+	let selected = $state('admin');
+</script>
+
+<div class="mx-auto grid max-w-2xl gap-3 p-4 sm:grid-cols-2">
+	<RoleCard
+		id="owner"
+		name="Owner"
+		description="Full control including billing and destructive actions."
+		memberCount={1}
+		system
+		selected={selected === 'owner'}
+		permissions={[
+			{ resource: 'Projects', levels: ['read', 'write', 'admin'] },
+			{ resource: 'Billing', levels: ['read', 'write', 'admin'] },
+			{ resource: 'Members', levels: ['read', 'write', 'admin'] }
+		]}
+		onclick={() => (selected = 'owner')}
+	/>
+	<RoleCard
+		id="admin"
+		name="Admin"
+		description="Manage workspace content and members."
+		memberCount={3}
+		selected={selected === 'admin'}
+		permissions={[
+			{ resource: 'Projects', levels: ['read', 'write'] },
+			{ resource: 'Billing', levels: ['read'] },
+			{ resource: 'Members', levels: ['read', 'write'] },
+			{ resource: 'API keys', levels: ['read', 'write'] },
+			{ resource: 'Settings', levels: ['read'] }
+		]}
+		onclick={() => (selected = 'admin')}
+		onedit={() => (selected = 'admin')}
+	/>
+</div>

package/dist/components/molecules/RoleCard/RoleCardStory.svelte.d.ts

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

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

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

package/dist/components/molecules/SavedSearchRow/SavedSearchRow.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import CountBadge from '../../atoms/CountBadge/CountBadge.svelte';
+
+	interface SavedSearchRowProps {
+		name: string;
+		query?: string;
+		count?: number;
+		pinned?: boolean;
+		class?: string;
+		onselect?: () => void;
+		onpin?: (pinned: boolean) => void;
+		ondelete?: () => void;
+	}
+
+	let {
+		name,
+		query = '',
+		count,
+		pinned = $bindable(false),
+		class: className = '',
+		onselect,
+		onpin,
+		ondelete
+	}: SavedSearchRowProps = $props();
+
+	function togglePin(e: MouseEvent) {
+		e.stopPropagation();
+		pinned = !pinned;
+		onpin?.(pinned);
+	}
+
+	function handleDelete(e: MouseEvent) {
+		e.stopPropagation();
+		ondelete?.();
+	}
+</script>
+
+<button
+	type="button"
+	class={[
+		'group flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-colors',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+		pinned
+			? 'border-brand-500/25 bg-brand-50/60 dark:bg-brand-950/30'
+			: 'border-border bg-surface-elevated hover:bg-surface-overlay',
+		className
+	]}
+	onclick={() => onselect?.()}
+>
+	<span
+		class={[
+			'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
+			pinned
+				? 'bg-brand-500/15 text-brand-600 dark:text-brand-400'
+				: 'bg-surface-overlay text-muted'
+		]}
+		aria-hidden="true"
+	>
+		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
+			<circle cx="11" cy="11" r="7" />
+			<path stroke-linecap="round" d="M16 16l4 4" />
+		</svg>
+	</span>
+
+	<span class="min-w-0 flex-1">
+		<span class="flex items-center gap-2">
+			<span class="truncate text-sm font-medium text-primary">{name}</span>
+			{#if pinned}
+				<Badge size="sm" variant="secondary">Pinned</Badge>
+			{/if}
+		</span>
+		{#if query}
+			<span class="mt-0.5 block truncate font-mono text-xs text-muted">{query}</span>
+		{/if}
+	</span>
+
+	{#if count != null}
+		<CountBadge count={count} class="shrink-0" />
+	{/if}
+
+	<span class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+		{#if onpin}
+			<IconButton
+				label={pinned ? 'Unpin search' : 'Pin search'}
+				size="sm"
+				variant="ghost"
+				onclick={togglePin}
+			>
+				<svg
+					viewBox="0 0 24 24"
+					fill={pinned ? 'currentColor' : 'none'}
+					stroke="currentColor"
+					stroke-width="2"
+					class="h-4 w-4"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 2l2.4 7.4H22l-6 4.6 2.3 7L12 17.8 5.7 21l2.3-7-6-4.6h7.6L12 2z"
+					/>
+				</svg>
+			</IconButton>
+		{/if}
+		{#if ondelete}
+			<IconButton label="Delete search" size="sm" variant="ghost" onclick={handleDelete}>
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</IconButton>
+		{/if}
+	</span>
+</button>

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

@@ -0,0 +1,13 @@
+interface SavedSearchRowProps {
+    name: string;
+    query?: string;
+    count?: number;
+    pinned?: boolean;
+    class?: string;
+    onselect?: () => void;
+    onpin?: (pinned: boolean) => void;
+    ondelete?: () => void;
+}
+declare const SavedSearchRow: import("svelte").Component<SavedSearchRowProps, {}, "pinned">;
+type SavedSearchRow = ReturnType<typeof SavedSearchRow>;
+export default SavedSearchRow;

package/dist/components/molecules/SavedSearchRow/SavedSearchRowStory.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import SavedSearchRow from './SavedSearchRow.svelte';
+	import Stack from '../../atoms/Stack/Stack.svelte';
+
+	let pinned1 = $state(true);
+	let pinned2 = $state(false);
+	let last = $state('');
+</script>
+
+<div class="max-w-md space-y-3">
+	<p class="text-sm font-semibold text-primary">Saved searches</p>
+	<Stack gap="sm">
+		<SavedSearchRow
+			name="Open bugs in prod"
+			query="status:open env:production"
+			count={12}
+			bind:pinned={pinned1}
+			onselect={() => (last = 'Open bugs in prod')}
+			onpin={() => {}}
+			ondelete={() => (last = 'deleted: Open bugs')}
+		/>
+		<SavedSearchRow
+			name="My reviews"
+			query="reviewer:@me is:pending"
+			count={3}
+			bind:pinned={pinned2}
+			onselect={() => (last = 'My reviews')}
+			onpin={() => {}}
+			ondelete={() => (last = 'deleted: My reviews')}
+		/>
+	</Stack>
+	{#if last}
+		<p class="text-[11px] text-muted">Last action: {last}</p>
+	{/if}
+</div>

package/dist/components/molecules/SavedSearchRow/SavedSearchRowStory.svelte.d.ts

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

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

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

package/dist/components/molecules/ScatterChart/ScatterChart.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { formatTick, DEFAULT_PAD, scaleDomain } from '../../../utils/chart.js';
+	import type { ChartPad } from '../../../utils/chart.js';
+
+	export interface ScatterPoint {
+		x: number;
+		y: number;
+		label?: string;
+		size?: number;
+		color?: string;
+		group?: string;
+	}
+
+	interface ScatterChartProps {
+		data?: ScatterPoint[];
+		width?: number;
+		height?: number;
+		pad?: ChartPad;
+		xLabel?: string;
+		yLabel?: string;
+		unitX?: string;
+		unitY?: string;
+		dotRadius?: number;
+		showGrid?: boolean;
+		class?: string;
+		onselect?: (point: ScatterPoint) => void;
+	}
+
+	const palette = [
+		'var(--color-brand-500, #6366f1)',
+		'#22c55e',
+		'#f59e0b',
+		'#0ea5e9',
+		'#a855f7',
+		'#ef4444'
+	];
+
+	let {
+		data = [],
+		width = 420,
+		height = 280,
+		pad = DEFAULT_PAD,
+		xLabel = '',
+		yLabel = '',
+		unitX = '',
+		unitY = '',
+		dotRadius = 5,
+		showGrid = true,
+		class: className = '',
+		onselect
+	}: ScatterChartProps = $props();
+
+	let tip = $state<{ label: string; x: number; y: number } | null>(null);
+	let active = $state<number | null>(null);
+
+	const groups = $derived([...new Set(data.map((d) => d.group).filter(Boolean))] as string[]);
+	const groupColor = $derived(
+		Object.fromEntries(groups.map((g, i) => [g, palette[i % palette.length]]))
+	);
+
+	const xDom = $derived(scaleDomain(data.map((d) => d.x)));
+	const yDom = $derived(scaleDomain(data.map((d) => d.y)));
+
+	const plotW = $derived(width - pad.l - pad.r);
+	const plotH = $derived(height - pad.t - pad.b);
+
+	function sx(v: number) {
+		const { min, max } = xDom;
+		return pad.l + ((v - min) / (max - min || 1)) * plotW;
+	}
+	function sy(v: number) {
+		const { min, max } = yDom;
+		return pad.t + plotH - ((v - min) / (max - min || 1)) * plotH;
+	}
+
+	const xTicks = $derived(
+		[0, 0.25, 0.5, 0.75, 1].map((t) => xDom.min + t * (xDom.max - xDom.min))
+	);
+	const yTicks = $derived(
+		[0, 0.25, 0.5, 0.75, 1].map((t) => yDom.min + t * (yDom.max - yDom.min))
+	);
+</script>
+
+<div class={['relative', className]} style:width={`${width}px`}>
+	{#if tip}
+		<div
+			class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full rounded-md bg-zinc-900 px-2 py-1 text-[11px] text-white shadow-md"
+			style:left={`${tip.x}px`}
+			style:top={`${tip.y}px`}
+		>
+			{tip.label}
+		</div>
+	{/if}
+
+	<svg {width} {height} class="overflow-visible" role="img" aria-label="Scatter chart">
+		{#if showGrid}
+			{#each xTicks as tick (tick)}
+				<line
+					x1={sx(tick)}
+					x2={sx(tick)}
+					y1={pad.t}
+					y2={height - pad.b}
+					stroke="var(--border, #e4e4e7)"
+					stroke-width="1"
+				/>
+			{/each}
+			{#each yTicks as tick (tick)}
+				<line
+					x1={pad.l}
+					x2={width - pad.r}
+					y1={sy(tick)}
+					y2={sy(tick)}
+					stroke="var(--border, #e4e4e7)"
+					stroke-width="1"
+				/>
+			{/each}
+		{/if}
+
+		{#each yTicks as tick (tick)}
+			<text
+				x={pad.l - 8}
+				y={sy(tick) + 3}
+				text-anchor="end"
+				style="font-size: 10px; fill: var(--text-muted, #71717a)"
+			>
+				{formatTick(tick)}{unitY}
+			</text>
+		{/each}
+		{#each xTicks as tick (tick)}
+			<text
+				x={sx(tick)}
+				y={height - pad.b + 16}
+				text-anchor="middle"
+				style="font-size: 10px; fill: var(--text-muted, #71717a)"
+			>
+				{formatTick(tick)}{unitX}
+			</text>
+		{/each}
+
+		{#if yLabel}
+			<text
+				x={14}
+				y={height / 2}
+				text-anchor="middle"
+				transform={`rotate(-90 14 ${height / 2})`}
+				style="font-size: 11px; fill: var(--text-secondary, #52525b)"
+			>
+				{yLabel}
+			</text>
+		{/if}
+		{#if xLabel}
+			<text
+				x={pad.l + plotW / 2}
+				y={height - 4}
+				text-anchor="middle"
+				style="font-size: 11px; fill: var(--text-secondary, #52525b)"
+			>
+				{xLabel}
+			</text>
+		{/if}
+
+		{#each data as point, i (i)}
+			{@const cx = sx(point.x)}
+			{@const cy = sy(point.y)}
+			{@const r = point.size ?? dotRadius}
+			{@const color =
+				point.color ?? (point.group ? groupColor[point.group] : palette[0])}
+			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+			<circle
+				cx={cx}
+				cy={cy}
+				r={active === i ? r + 2 : r}
+				fill={color}
+				fill-opacity={active === null || active === i ? 0.85 : 0.35}
+				stroke="var(--surface-elevated, #fff)"
+				stroke-width="1.5"
+				class={onselect ? 'cursor-pointer' : undefined}
+				onmouseenter={() => {
+					active = i;
+					tip = {
+						label:
+							point.label ??
+							`${formatTick(point.x)}${unitX}, ${formatTick(point.y)}${unitY}`,
+						x: cx,
+						y: cy - r - 4
+					};
+				}}
+				onmouseleave={() => {
+					active = null;
+					tip = null;
+				}}
+				onclick={() => onselect?.(point)}
+			/>
+		{/each}
+	</svg>
+
+	{#if groups.length > 0}
+		<div class="mt-2 flex flex-wrap gap-3">
+			{#each groups as g (g)}
+				<span class="inline-flex items-center gap-1.5 text-xs text-secondary">
+					<span class="h-2.5 w-2.5 rounded-full" style:background={groupColor[g]}></span>
+					{g}
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { ChartPad } from '../../../utils/chart.js';
+export interface ScatterPoint {
+    x: number;
+    y: number;
+    label?: string;
+    size?: number;
+    color?: string;
+    group?: string;
+}
+interface ScatterChartProps {
+    data?: ScatterPoint[];
+    width?: number;
+    height?: number;
+    pad?: ChartPad;
+    xLabel?: string;
+    yLabel?: string;
+    unitX?: string;
+    unitY?: string;
+    dotRadius?: number;
+    showGrid?: boolean;
+    class?: string;
+    onselect?: (point: ScatterPoint) => void;
+}
+declare const ScatterChart: import("svelte").Component<ScatterChartProps, {}, "">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

package/dist/components/molecules/ScatterChart/ScatterChartStory.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import ScatterChart from './ScatterChart.svelte';
+</script>
+
+<div class="inline-block rounded-2xl border border-border bg-surface-elevated p-4">
+	<p class="mb-3 text-sm font-semibold text-primary">Engagement vs revenue</p>
+	<ScatterChart
+		xLabel="Sessions"
+		yLabel="Revenue"
+		unitY="k"
+		data={[
+			{ x: 12, y: 4.2, group: 'Free', label: 'Acme' },
+			{ x: 28, y: 8.1, group: 'Free' },
+			{ x: 45, y: 14.5, group: 'Pro' },
+			{ x: 62, y: 22.0, group: 'Pro' },
+			{ x: 18, y: 3.5, group: 'Free' },
+			{ x: 88, y: 41.2, group: 'Enterprise' },
+			{ x: 71, y: 33.8, group: 'Enterprise' },
+			{ x: 35, y: 11.2, group: 'Pro' },
+			{ x: 95, y: 48.0, group: 'Enterprise' },
+			{ x: 8, y: 1.8, group: 'Free' }
+		]}
+	/>
+</div>

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