@r2digisolutions/components 0.6.9 → 0.7.0

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+export interface TreePanelNode {
+    id: string;
+    label: string;
+    /** Emoji or short glyph shown instead of the default folder / branch icon. */
+    icon?: string | null;
+    /** Extra column value (sort order, count, …). */
+    meta?: string | number | null;
+    children?: TreePanelNode[];
+}
+interface TreePanelProps {
+    items?: TreePanelNode[];
+    collapsedIds?: string[];
+    emptyMessage?: string;
+    hierarchyLabel?: string;
+    metaLabel?: string;
+    actionsLabel?: string;
+    showMeta?: boolean;
+    addChildLabel?: string;
+    editLabel?: string;
+    deleteLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    onAddChild?: (node: TreePanelNode) => void;
+    onEdit?: (node: TreePanelNode) => void;
+    onDelete?: (node: TreePanelNode) => void;
+    /** Extra content after the label (badges, counts). */
+    meta?: Snippet<[TreePanelNode, number]>;
+    /** Replaces the default add / edit / delete buttons. */
+    trailing?: Snippet<[TreePanelNode, number]>;
+    leading?: Snippet<[TreePanelNode, number]>;
+    empty?: Snippet;
+    class?: string;
+}
+declare const TreePanel: import("svelte").Component<TreePanelProps, {}, "collapsedIds">;
+type TreePanel = ReturnType<typeof TreePanel>;
+export default TreePanel;

package/dist/components/molecules/TreePanel/TreePanelStory.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import TreePanel, { type TreePanelNode } from './TreePanel.svelte';
+
+	let {
+		showMeta = false,
+		empty = false
+	}: {
+		showMeta?: boolean;
+		empty?: boolean;
+	} = $props();
+
+	const catalog: TreePanelNode[] = [
+		{
+			id: 'products',
+			label: 'Productos',
+			children: [
+				{ id: 'lighting', label: 'Iluminación', meta: 1 },
+				{ id: 'furniture', label: 'Mobiliario', meta: 2 }
+			]
+		},
+		{
+			id: 'services',
+			label: 'Servicios',
+			children: [
+				{ id: 'consulting', label: 'Consultoría', meta: 1 },
+				{ id: 'renovation', label: 'Reforma', meta: 2 }
+			]
+		}
+	];
+
+	let collapsedIds = $state<string[]>([]);
+	let lastAction = $state('—');
+</script>
+
+<div class="max-w-2xl">
+	<TreePanel
+		items={empty ? [] : catalog}
+		bind:collapsedIds
+		{showMeta}
+		emptyMessage="No hay categorías todavía."
+		hierarchyLabel="Jerarquía"
+		metaLabel="Orden"
+		actionsLabel="Acciones"
+		addChildLabel="Añadir subcategoría"
+		editLabel="Editar"
+		deleteLabel="Eliminar"
+		onAddChild={(node) => (lastAction = `Añadir hijo de ${node.label}`)}
+		onEdit={(node) => (lastAction = `Editar ${node.label}`)}
+		onDelete={(node) => (lastAction = `Eliminar ${node.label}`)}
+	/>
+	<p class="mt-3 text-xs text-secondary">
+		Última acción: <span class="font-medium text-primary">{lastAction}</span>
+	</p>
+</div>

package/dist/components/molecules/TreePanel/TreePanelStory.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    showMeta?: boolean;
+    empty?: boolean;
+};
+declare const TreePanelStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type TreePanelStory = ReturnType<typeof TreePanelStory>;
+export default TreePanelStory;

package/dist/index.d.ts

@@ -227,6 +227,8 @@ export { default as Carousel } from './components/molecules/Carousel/Carousel.sv
 export type { CarouselItem } from './components/molecules/Carousel/Carousel.svelte';
 export { default as TreeView } from './components/molecules/TreeView/TreeView.svelte';
 export type { TreeNode } from './components/molecules/TreeView/TreeView.svelte';
+export { default as TreePanel } from './components/molecules/TreePanel/TreePanel.svelte';
+export type { TreePanelNode } from './components/molecules/TreePanel/TreePanel.svelte';
 export { default as TreeSelect } from './components/molecules/TreeSelect/TreeSelect.svelte';
 export { default as Cascader } from './components/molecules/Cascader/Cascader.svelte';
 export type { CascaderOption } from './components/molecules/Cascader/Cascader.svelte';
@@ -818,7 +820,7 @@ export { default as CanvasEditorTemplate } from './components/templates/CanvasEd
 export { default as VideoEditorTemplate } from './components/templates/VideoEditorTemplate/VideoEditorTemplate.svelte';
 export { default as AudioEditorTemplate } from './components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte';
 export { themeStore } from './utils/theme.svelte.js';
-export type { Theme } from './utils/theme.svelte.js';
+export type { Theme, ThemePalette } from './utils/theme.svelte.js';
 export { createId } from './utils/id.js';
 export { resolveAccessor, accessorPatchKey, resolveRowKey } from './utils/columnAccessor.js';
 export type { ColumnAccessor, RowKey } from './utils/columnAccessor.js';

package/dist/index.js

@@ -176,6 +176,7 @@ export { default as ConfirmDialog } from './components/molecules/ConfirmDialog/C
 export { default as ContextMenu } from './components/molecules/ContextMenu/ContextMenu.svelte';
 export { default as Carousel } from './components/molecules/Carousel/Carousel.svelte';
 export { default as TreeView } from './components/molecules/TreeView/TreeView.svelte';
+export { default as TreePanel } from './components/molecules/TreePanel/TreePanel.svelte';
 export { default as TreeSelect } from './components/molecules/TreeSelect/TreeSelect.svelte';
 export { default as Cascader } from './components/molecules/Cascader/Cascader.svelte';
 export { default as MaskedInput } from './components/molecules/MaskedInput/MaskedInput.svelte';

package/dist/styles.css

@@ -10,51 +10,72 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* Brand colors */
-  --color-brand-50: oklch(97% 0.02 265);
-  --color-brand-100: oklch(93% 0.05 265);
-  --color-brand-200: oklch(86% 0.1 265);
-  --color-brand-300: oklch(76% 0.15 265);
-  --color-brand-400: oklch(65% 0.2 265);
-  --color-brand-500: oklch(55% 0.25 265);
-  --color-brand-600: oklch(47% 0.26 265);
-  --color-brand-700: oklch(39% 0.24 265);
-  --color-brand-800: oklch(31% 0.2 265);
-  --color-brand-900: oklch(22% 0.14 265);
-  --color-brand-950: oklch(15% 0.08 265);
-
-  /* Semantic surface tokens */
-  --color-surface: var(--surface);
-  --color-surface-elevated: var(--surface-elevated);
-  --color-surface-overlay: var(--surface-overlay);
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-text-primary: var(--text-primary);
-  --color-text-secondary: var(--text-secondary);
-  --color-text-muted: var(--text-muted);
-  --color-text-inverse: var(--text-inverse);
-
-  /* Typography */
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-
-  /* Radii */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-full: 9999px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
-  --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.08);
-  --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.12), 0 4px 6px -4px oklch(0% 0 0 / 0.08);
-  --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.14), 0 8px 10px -6px oklch(0% 0 0 / 0.08);
-
-  /* Transitions */
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+	/* Brand colors */
+	--color-brand-50: oklch(97% 0.02 265);
+	--color-brand-100: oklch(93% 0.05 265);
+	--color-brand-200: oklch(86% 0.1 265);
+	--color-brand-300: oklch(76% 0.15 265);
+	--color-brand-400: oklch(65% 0.2 265);
+	--color-brand-500: oklch(55% 0.25 265);
+	--color-brand-600: oklch(47% 0.26 265);
+	--color-brand-700: oklch(39% 0.24 265);
+	--color-brand-800: oklch(31% 0.2 265);
+	--color-brand-900: oklch(22% 0.14 265);
+	--color-brand-950: oklch(15% 0.08 265);
+
+	/* Semantic surface tokens */
+	--color-surface: var(--surface);
+	--color-surface-elevated: var(--surface-elevated);
+	--color-surface-overlay: var(--surface-overlay);
+	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
+	--color-text-primary: var(--text-primary);
+	--color-text-secondary: var(--text-secondary);
+	--color-text-muted: var(--text-muted);
+	--color-text-inverse: var(--text-inverse);
+
+	/* Typography */
+	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+	/* Radii */
+	--radius-sm: 0.375rem;
+	--radius-md: 0.5rem;
+	--radius-lg: 0.75rem;
+	--radius-xl: 1rem;
+	--radius-2xl: 1.5rem;
+	--radius-full: 9999px;
+
+	/* Shadows */
+	--shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
+	--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.08);
+	--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.12), 0 4px 6px -4px oklch(0% 0 0 / 0.08);
+	--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.14), 0 8px 10px -6px oklch(0% 0 0 / 0.08);
+
+	/* Transitions */
+	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Gray palette — <html data-theme="slate" | "neutral">
+   slate (default): cool indigo cast (hue 265)
+   neutral: chroma 0, same family as Tailwind `neutral`
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root {
+	--r2-gray-h: 265;
+	--r2-gray-c: 0.02;
+}
+
+:root[data-theme='slate'] {
+	--r2-gray-h: 265;
+	--r2-gray-c: 0.02;
+}
+
+:root[data-theme='neutral'] {
+	--r2-gray-h: 0;
+	--r2-gray-c: 0;
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -62,46 +83,46 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 :root {
-  color-scheme: light;
-
-  --surface: oklch(99% 0.005 265);
-  --surface-elevated: oklch(100% 0 0);
-  --surface-overlay: oklch(97% 0.01 265);
-  --border: oklch(88% 0.02 265);
-  --border-strong: oklch(75% 0.04 265);
-  --text-primary: oklch(15% 0.02 265);
-  --text-secondary: oklch(35% 0.03 265);
-  --text-muted: oklch(45% 0.02 265);
-  --text-inverse: oklch(99% 0 0);
-
-  /* Alert tones */
-  --alert-info-bg: oklch(96% 0.03 240);
-  --alert-info-border: oklch(82% 0.06 240);
-  --alert-info-fg: oklch(28% 0.08 240);
-  --alert-info-muted: oklch(40% 0.06 240);
-  --alert-info-icon: oklch(52% 0.14 240);
-  --alert-info-accent: oklch(55% 0.16 240);
-
-  --alert-success-bg: oklch(96% 0.04 150);
-  --alert-success-border: oklch(82% 0.07 150);
-  --alert-success-fg: oklch(28% 0.08 150);
-  --alert-success-muted: oklch(38% 0.06 150);
-  --alert-success-icon: oklch(50% 0.14 150);
-  --alert-success-accent: oklch(55% 0.16 150);
-
-  --alert-warning-bg: oklch(96% 0.05 85);
-  --alert-warning-border: oklch(84% 0.1 85);
-  --alert-warning-fg: oklch(30% 0.08 75);
-  --alert-warning-muted: oklch(42% 0.07 75);
-  --alert-warning-icon: oklch(58% 0.15 75);
-  --alert-warning-accent: oklch(68% 0.16 75);
-
-  --alert-error-bg: oklch(96% 0.03 25);
-  --alert-error-border: oklch(84% 0.08 25);
-  --alert-error-fg: oklch(30% 0.1 25);
-  --alert-error-muted: oklch(42% 0.08 25);
-  --alert-error-icon: oklch(55% 0.18 25);
-  --alert-error-accent: oklch(58% 0.2 25);
+	color-scheme: light;
+
+	--surface: oklch(99% calc(var(--r2-gray-c) * 0.25) var(--r2-gray-h));
+	--surface-elevated: oklch(100% 0 0);
+	--surface-overlay: oklch(97% calc(var(--r2-gray-c) * 0.5) var(--r2-gray-h));
+	--border: oklch(88% var(--r2-gray-c) var(--r2-gray-h));
+	--border-strong: oklch(75% calc(var(--r2-gray-c) * 2) var(--r2-gray-h));
+	--text-primary: oklch(15% var(--r2-gray-c) var(--r2-gray-h));
+	--text-secondary: oklch(35% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h));
+	--text-muted: oklch(45% var(--r2-gray-c) var(--r2-gray-h));
+	--text-inverse: oklch(99% 0 0);
+
+	/* Alert tones */
+	--alert-info-bg: oklch(96% 0.03 240);
+	--alert-info-border: oklch(82% 0.06 240);
+	--alert-info-fg: oklch(28% 0.08 240);
+	--alert-info-muted: oklch(40% 0.06 240);
+	--alert-info-icon: oklch(52% 0.14 240);
+	--alert-info-accent: oklch(55% 0.16 240);
+
+	--alert-success-bg: oklch(96% 0.04 150);
+	--alert-success-border: oklch(82% 0.07 150);
+	--alert-success-fg: oklch(28% 0.08 150);
+	--alert-success-muted: oklch(38% 0.06 150);
+	--alert-success-icon: oklch(50% 0.14 150);
+	--alert-success-accent: oklch(55% 0.16 150);
+
+	--alert-warning-bg: oklch(96% 0.05 85);
+	--alert-warning-border: oklch(84% 0.1 85);
+	--alert-warning-fg: oklch(30% 0.08 75);
+	--alert-warning-muted: oklch(42% 0.07 75);
+	--alert-warning-icon: oklch(58% 0.15 75);
+	--alert-warning-accent: oklch(68% 0.16 75);
+
+	--alert-error-bg: oklch(96% 0.03 25);
+	--alert-error-border: oklch(84% 0.08 25);
+	--alert-error-fg: oklch(30% 0.1 25);
+	--alert-error-muted: oklch(42% 0.08 25);
+	--alert-error-icon: oklch(55% 0.18 25);
+	--alert-error-accent: oklch(58% 0.2 25);
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -109,46 +130,46 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 :root.dark {
-  color-scheme: dark;
-
-  --surface: oklch(14% 0.02 265);
-  --surface-elevated: oklch(18% 0.025 265);
-  --surface-overlay: oklch(20% 0.03 265);
-  --border: oklch(28% 0.03 265);
-  --border-strong: oklch(40% 0.04 265);
-  --text-primary: oklch(96% 0.01 265);
-  --text-secondary: oklch(75% 0.03 265);
-  --text-muted: oklch(55% 0.03 265);
-  --text-inverse: oklch(15% 0.02 265);
-
-  /* Alert tones */
-  --alert-info-bg: oklch(24% 0.04 240);
-  --alert-info-border: oklch(38% 0.06 240);
-  --alert-info-fg: oklch(92% 0.03 240);
-  --alert-info-muted: oklch(78% 0.04 240);
-  --alert-info-icon: oklch(72% 0.12 240);
-  --alert-info-accent: oklch(65% 0.14 240);
-
-  --alert-success-bg: oklch(24% 0.04 150);
-  --alert-success-border: oklch(38% 0.06 150);
-  --alert-success-fg: oklch(92% 0.03 150);
-  --alert-success-muted: oklch(78% 0.04 150);
-  --alert-success-icon: oklch(72% 0.12 150);
-  --alert-success-accent: oklch(65% 0.14 150);
-
-  --alert-warning-bg: oklch(25% 0.04 85);
-  --alert-warning-border: oklch(40% 0.07 85);
-  --alert-warning-fg: oklch(93% 0.03 85);
-  --alert-warning-muted: oklch(80% 0.04 85);
-  --alert-warning-icon: oklch(78% 0.12 85);
-  --alert-warning-accent: oklch(72% 0.14 85);
-
-  --alert-error-bg: oklch(24% 0.05 25);
-  --alert-error-border: oklch(40% 0.08 25);
-  --alert-error-fg: oklch(93% 0.03 25);
-  --alert-error-muted: oklch(80% 0.04 25);
-  --alert-error-icon: oklch(72% 0.14 25);
-  --alert-error-accent: oklch(65% 0.18 25);
+	color-scheme: dark;
+
+	--surface: oklch(14% var(--r2-gray-c) var(--r2-gray-h));
+	--surface-elevated: oklch(18% calc(var(--r2-gray-c) * 1.25) var(--r2-gray-h));
+	--surface-overlay: oklch(20% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h));
+	--border: oklch(28% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h));
+	--border-strong: oklch(40% calc(var(--r2-gray-c) * 2) var(--r2-gray-h));
+	--text-primary: oklch(96% calc(var(--r2-gray-c) * 0.5) var(--r2-gray-h));
+	--text-secondary: oklch(75% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h));
+	--text-muted: oklch(55% calc(var(--r2-gray-c) * 1.5) var(--r2-gray-h));
+	--text-inverse: oklch(15% var(--r2-gray-c) var(--r2-gray-h));
+
+	/* Alert tones */
+	--alert-info-bg: oklch(24% 0.04 240);
+	--alert-info-border: oklch(38% 0.06 240);
+	--alert-info-fg: oklch(92% 0.03 240);
+	--alert-info-muted: oklch(78% 0.04 240);
+	--alert-info-icon: oklch(72% 0.12 240);
+	--alert-info-accent: oklch(65% 0.14 240);
+
+	--alert-success-bg: oklch(24% 0.04 150);
+	--alert-success-border: oklch(38% 0.06 150);
+	--alert-success-fg: oklch(92% 0.03 150);
+	--alert-success-muted: oklch(78% 0.04 150);
+	--alert-success-icon: oklch(72% 0.12 150);
+	--alert-success-accent: oklch(65% 0.14 150);
+
+	--alert-warning-bg: oklch(25% 0.04 85);
+	--alert-warning-border: oklch(40% 0.07 85);
+	--alert-warning-fg: oklch(93% 0.03 85);
+	--alert-warning-muted: oklch(80% 0.04 85);
+	--alert-warning-icon: oklch(78% 0.12 85);
+	--alert-warning-accent: oklch(72% 0.14 85);
+
+	--alert-error-bg: oklch(24% 0.05 25);
+	--alert-error-border: oklch(40% 0.08 25);
+	--alert-error-fg: oklch(93% 0.03 25);
+	--alert-error-muted: oklch(80% 0.04 25);
+	--alert-error-icon: oklch(72% 0.14 25);
+	--alert-error-accent: oklch(65% 0.18 25);
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -156,41 +177,41 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 @layer base {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html {
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    margin: 0;
-    background-color: var(--surface);
-    color: var(--text-primary);
-    font-family: var(--font-sans);
-    line-height: 1.6;
-    transition:
-      background-color 0.2s var(--ease-smooth),
-      color 0.2s var(--ease-smooth);
-  }
-
-  /* Focus visible styles */
-  :focus-visible {
-    outline: 2px solid oklch(55% 0.25 265);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
-
-  /* Selection */
-  ::selection {
-    background-color: oklch(55% 0.25 265 / 0.25);
-  }
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	html {
+		-webkit-text-size-adjust: 100%;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		scroll-behavior: smooth;
+	}
+
+	body {
+		margin: 0;
+		background-color: var(--surface);
+		color: var(--text-primary);
+		font-family: var(--font-sans);
+		line-height: 1.6;
+		transition:
+			background-color 0.2s var(--ease-smooth),
+			color 0.2s var(--ease-smooth);
+	}
+
+	/* Focus visible styles */
+	:focus-visible {
+		outline: 2px solid oklch(55% 0.25 265);
+		outline-offset: 2px;
+		border-radius: var(--radius-sm);
+	}
+
+	/* Selection */
+	::selection {
+		background-color: oklch(55% 0.25 265 / 0.25);
+	}
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -198,46 +219,70 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 @layer utilities {
-  /* Touch-friendly minimum tap target */
-  .touch-target {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  /* Smooth transitions */
-  .transition-smooth {
-    transition: all 0.2s var(--ease-smooth);
-  }
-
-  .transition-spring {
-    transition: all 0.3s var(--ease-spring);
-  }
-
-  /* Glass morphism */
-  .glass {
-    backdrop-filter: blur(12px) saturate(180%);
-    background-color: oklch(100% 0 0 / 0.08);
-    border: 1px solid oklch(100% 0 0 / 0.12);
-  }
-
-  .dark .glass {
-    background-color: oklch(0% 0 0 / 0.2);
-    border-color: oklch(100% 0 0 / 0.08);
-  }
-
-  /* Surface utilities */
-  .bg-surface { background-color: var(--surface); }
-  .bg-surface-elevated { background-color: var(--surface-elevated); }
-  .bg-surface-overlay { background-color: var(--surface-overlay); }
-  .border-border { border-color: var(--border); }
-  .border-border-strong { border-color: var(--border-strong); }
-  .text-primary { color: var(--text-primary); }
-  .text-secondary { color: var(--text-secondary); }
-  .text-muted { color: var(--text-muted); }
-
-  /* SVG chart labels — Tailwind fill-* needs these (text-* alone does not paint <text>) */
-  .fill-primary { fill: var(--text-primary); }
-  .fill-secondary { fill: var(--text-secondary); }
-  .fill-muted { fill: var(--text-muted); }
-  .stroke-border { stroke: var(--border); }
+	/* Touch-friendly minimum tap target */
+	.touch-target {
+		min-height: 44px;
+		min-width: 44px;
+	}
+
+	/* Smooth transitions */
+	.transition-smooth {
+		transition: all 0.2s var(--ease-smooth);
+	}
+
+	.transition-spring {
+		transition: all 0.3s var(--ease-spring);
+	}
+
+	/* Glass morphism */
+	.glass {
+		backdrop-filter: blur(12px) saturate(180%);
+		background-color: oklch(100% 0 0 / 0.08);
+		border: 1px solid oklch(100% 0 0 / 0.12);
+	}
+
+	.dark .glass {
+		background-color: oklch(0% 0 0 / 0.2);
+		border-color: oklch(100% 0 0 / 0.08);
+	}
+
+	/* Surface utilities */
+	.bg-surface {
+		background-color: var(--surface);
+	}
+	.bg-surface-elevated {
+		background-color: var(--surface-elevated);
+	}
+	.bg-surface-overlay {
+		background-color: var(--surface-overlay);
+	}
+	.border-border {
+		border-color: var(--border);
+	}
+	.border-border-strong {
+		border-color: var(--border-strong);
+	}
+	.text-primary {
+		color: var(--text-primary);
+	}
+	.text-secondary {
+		color: var(--text-secondary);
+	}
+	.text-muted {
+		color: var(--text-muted);
+	}
+
+	/* SVG chart labels — Tailwind fill-* needs these (text-* alone does not paint <text>) */
+	.fill-primary {
+		fill: var(--text-primary);
+	}
+	.fill-secondary {
+		fill: var(--text-secondary);
+	}
+	.fill-muted {
+		fill: var(--text-muted);
+	}
+	.stroke-border {
+		stroke: var(--border);
+	}
 }

package/dist/utils/theme.svelte.d.ts

@@ -1,19 +1,33 @@
 /**
- * Theme store — Light/Dark mode management for R2DigiSolutions components.
+ * Theme store — light/dark + gray palette for R2DigiSolutions components.
+ *
+ * Mode: `class="dark"` on `<html>`
+ * Palette: `data-theme="slate" | "neutral"` on `<html>`
  *
  * - Persists preference to localStorage
  * - Detects system preference via prefers-color-scheme
- * - Applies 'dark' class to <html> element
  * - Reactive via Svelte 5 runes ($state)
  */
 export type Theme = 'light' | 'dark' | 'system';
+export type ThemePalette = 'slate' | 'neutral';
 declare class ThemeStore {
     #private;
     constructor();
     get theme(): Theme;
+    get palette(): ThemePalette;
     get resolved(): 'light' | 'dark';
     get isDark(): boolean;
     set(theme: Theme): void;
+    /**
+     * Gray family for surfaces, borders and body text.
+     * `slate` = cool (hue 265). `neutral` = chroma 0, no blue cast.
+     *
+     * Pass `{ persist: false }` for a page-level override that does not
+     * stick in localStorage.
+     */
+    setPalette(palette: ThemePalette, opts?: {
+        persist?: boolean;
+    }): void;
     toggle(): void;
 }
 export declare const themeStore: ThemeStore;