@mrintel/villain-ui 0.7.9 → 0.8.0

package/dist/components/overlays/toast.store.js

@@ -0,0 +1,34 @@
+import { atom } from 'nanostores';
+import { createId } from '../../lib/internal/id';
+/** Active toasts, oldest first. Rendered by `<ToastHost />`. */
+export const toasts = atom([]);
+export function dismissToast(id) {
+    toasts.set(toasts.get().filter((t) => t.id !== id));
+}
+function push(message, options = {}) {
+    const item = {
+        id: createId('toast'),
+        message,
+        variant: options.variant ?? 'info',
+        duration: options.duration ?? 3000,
+        dismissible: options.dismissible ?? true
+    };
+    toasts.set([...toasts.get(), item]);
+    return item.id;
+}
+/**
+ * Show a toast. Requires a single `<ToastHost />` mounted in the app's root
+ * layout. Returns the toast id (usable with `dismissToast`).
+ *
+ * ```ts
+ * toast('Saved');
+ * toast.success('Added to cart');
+ * toast.error('Could not save', { duration: 0 });
+ * ```
+ */
+export const toast = Object.assign(push, {
+    info: (message, options) => push(message, { ...options, variant: 'info' }),
+    success: (message, options) => push(message, { ...options, variant: 'success' }),
+    warning: (message, options) => push(message, { ...options, variant: 'warning' }),
+    error: (message, options) => push(message, { ...options, variant: 'error' })
+});

package/dist/components/typography/Heading.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">"use strict";
-let { level = 1, glow = false, variant = 'default', as, children } = $props();
+let { level = 1, glow = false, variant = 'default', as, children, class: className = '', ...restProps } = $props();
 const element = $derived(as ?? `h${level}`);
 const variantClasses = {
     default: '',
     accent: 'text-accent',
     gradient: 'text-gradient'
 };
-const baseClasses = $derived(`transition-all duration-300 ${glow ? 'text-glow' : ''} ${variantClasses[variant]}`);
+const baseClasses = $derived(`transition-all duration-300 ${glow ? 'text-glow' : ''} ${variantClasses[variant]} ${className}`);
 const styles = $derived(`font-size: var(--text-h${level}-size); line-height: var(--text-h${level}-line-height); font-weight: var(--text-h${level}-weight); letter-spacing: var(--text-h${level}-letter-spacing); font-family: var(--font-heading); color: var(--color-text);`);
 </script>
 
-<svelte:element this={element} class={baseClasses} style={styles}>
+<svelte:element this={element} class={baseClasses} style={styles} {...restProps}>
 	{@render children?.()}
 </svelte:element>

package/dist/components/typography/Heading.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     variant?: 'default' | 'accent' | 'gradient';
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     children?: import('svelte').Snippet;
+    class?: string;
 }
 declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;

package/dist/components/typography/Text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">"use strict";
-let { variant = 'body', color = 'default', weight = 'normal', as = 'p', children } = $props();
+let { variant = 'body', color = 'default', weight = 'normal', as = 'p', children, class: className = '', ...restProps } = $props();
 const colorMap = {
     default: 'var(--color-text)',
     soft: 'var(--color-text-soft)',
@@ -16,6 +16,6 @@ const weightMap = {
 const styles = $derived(`font-size: var(--text-${variant}-size); line-height: var(--text-${variant}-line-height); font-weight: ${weightMap[weight] || '400'}; letter-spacing: var(--text-${variant}-letter-spacing); font-family: var(--font-body); color: ${colorMap[color]};`);
 </script>
 
-<svelte:element this={as} class="transition-colors duration-300" style={styles}>
+<svelte:element this={as} class="transition-colors duration-300 {className}" style={styles} {...restProps}>
 	{@render children?.()}
 </svelte:element>

package/dist/components/typography/Text.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     weight?: 'normal' | 'bold' | 'semibold';
     as?: 'p' | 'span' | 'div';
     children?: import('svelte').Snippet;
+    class?: string;
 }
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;

package/dist/components/wizard/StepForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { createStepController } from './step.service';
 // No-op action fallback when enhance is not provided
 const noop = () => { };
-let { steps: stepDefs, controller: externalController, orientation = 'horizontal', initialStepId, controllerOptions = {}, enhance = noop, method = 'POST', action: formAction, rail, step: stepSnippet, actions, class: className = '', ...restProps } = $props();
+let { steps: stepDefs, controller: externalController, orientation = 'horizontal', initialStepId, controllerOptions = {}, enhance = noop, method = 'POST', action: formAction, rail, step: stepSnippet, actions, error: errorSnippet, showErrors = true, class: className = '', ...restProps } = $props();
 // Create or use external controller (captured once at init)
 const ctrl = externalController ??
     createStepController({
@@ -14,10 +14,12 @@ const ctrl = externalController ??
 const stepsStore = ctrl.steps;
 const currentStore = ctrl.current;
 const indexStore = ctrl.currentIndex;
+const errorsStore = ctrl.stepErrors;
 // Use $ prefix to subscribe to nanostores (Svelte store contract)
 const runtimeSteps = $derived($stepsStore);
 const currentStep = $derived($currentStore);
 const currentIndex = $derived($indexStore);
+const currentErrors = $derived($errorsStore[currentStep.id] ?? []);
 // Computed loading state
 const isLoading = $derived($currentStore.state === 'loading');
 // Check if on first/last step
@@ -36,6 +38,7 @@ const railContext = $derived({
 const stepContext = $derived({
     step: currentStep,
     isLoading: isLoading,
+    errors: currentErrors,
 });
 const actionsContext = $derived({
     loading: isLoading,
@@ -80,6 +83,23 @@ const layoutClasses = $derived(() => {
 			</div>
 		{/if}
 
+		<!-- Error Section -->
+		{#if currentErrors.length > 0}
+			{#if errorSnippet}
+				{@render errorSnippet({ step: currentStep, errors: currentErrors })}
+			{:else if showErrors}
+				<div
+					class="mt-4 rounded-[var(--radius-lg)] border-l-4 border-[var(--color-error)] bg-[var(--color-error-overlay-10)] px-4 py-3"
+					role="alert"
+					aria-live="polite"
+				>
+					{#each currentErrors as message (message)}
+						<p class="text-sm text-[var(--color-error)]">{message}</p>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+
 		<!-- Actions Section -->
 		{#if actions}
 			<div class="flex justify-between items-center gap-4 mt-6 pt-6 border-t border-[var(--color-border)]">

package/dist/components/wizard/StepForm.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Action } from 'svelte/action';
-import type { StepDefinition, StepOrientation, StepController, StepControllerOptions, StepRailSnippetContext, StepPanelSnippetContext, StepActionsSnippetContext } from './step.types';
+import type { StepDefinition, StepOrientation, StepController, StepControllerOptions, StepRailSnippetContext, StepPanelSnippetContext, StepActionsSnippetContext, StepRuntime } from './step.types';
 type TId = string;
 interface Props {
     /** Step definitions */
@@ -25,6 +25,13 @@ interface Props {
     step?: Snippet<[StepPanelSnippetContext<TId>]>;
     /** Actions snippet */
     actions?: Snippet<[StepActionsSnippetContext<TId>]>;
+    /** Custom error rendering between step content and actions. */
+    error?: Snippet<[{
+        step: StepRuntime<TId>;
+        errors: string[];
+    }]>;
+    /** Render the default error block when no `error` snippet given. Default true. */
+    showErrors?: boolean;
     /** Additional CSS classes */
     class?: string;
 }

package/dist/components/wizard/step.service.js

@@ -1,5 +1,4 @@
 import { atom, computed } from 'nanostores';
-import { arrayHasValueInArray } from '../../lib/internal/util';
 /**
  * Creates a headless step controller using nanostores.
  * This service owns all step state, transitions, and guards.
@@ -18,6 +17,10 @@ export function createStepController(options) {
      * Internal loading state.
      */
     const $loading = atom(false);
+    /**
+     * Per-step error messages, keyed by step id.
+     */
+    const $stepErrors = atom({});
     /**
      * Base step store (authoritative mutable data).
      */
@@ -102,6 +105,20 @@ export function createStepController(options) {
      * @param step Runtime step
      * @returns Whether validation passed
      */
+    /**
+     * Assigns a step's validator to the attached form's options.validators.
+     * Steps without a validator leave whatever is currently set — matches the
+     * behavior for wizards that configure a single schema up front.
+     *
+     * @param step Step whose validator should become active
+     */
+    function applyStepValidator(step) {
+        if (!formIntegration?.options)
+            return;
+        if (step.validator !== undefined) {
+            formIntegration.options.validators = step.validator;
+        }
+    }
     async function validateStep(step) {
         setLoading(true);
         try {
@@ -155,6 +172,7 @@ export function createStepController(options) {
             .get()
             .map((s) => s.index === current.index ? { ...s, visited: true } : s));
         $currentIndex.set(targetIndex);
+        applyStepValidator(target);
         onStepChange?.(target);
         return true;
     }
@@ -173,7 +191,16 @@ export function createStepController(options) {
         }
         // Validate current step before proceeding only if not a submit step
         // Submit steps are expected to handle validation via form submission (user handled but we react to it)
-        if (!(await validateStep(current))) {
+        // Validate against the step being LEFT, with its own validator active.
+        const shouldValidate = current.validateOnNext ?? current.validator !== undefined;
+        if (shouldValidate) {
+            applyStepValidator(current);
+            if (!(await validateStep(current))) {
+                onError?.(current);
+                return false;
+            }
+        }
+        else if (!(await validateStep(current))) {
             onError?.(current);
             return false;
         }
@@ -254,6 +281,33 @@ export function createStepController(options) {
             .get()
             .map((s) => s.id === id ? { ...s, stateOverride: undefined } : s));
     }
+    /**
+     * Sets human-readable error messages on a step and flips its rail state.
+     *
+     * @param id Step identifier
+     * @param error Message or list of messages
+     */
+    function setStepError(id, error) {
+        $stepErrors.set({
+            ...$stepErrors.get(),
+            [id]: Array.isArray(error) ? error : [error],
+        });
+        setStepState(id, 'error');
+        const step = $runtimeSteps.get().find((s) => s.id === id);
+        if (step)
+            onError?.(step, $stepErrors.get()[id]);
+    }
+    /**
+     * Clears a step's error messages and its rail error state.
+     *
+     * @param id Step identifier
+     */
+    function clearStepError(id) {
+        const next = { ...$stepErrors.get() };
+        delete next[id];
+        $stepErrors.set(next);
+        clearStepState(id);
+    }
     /**
      * Marks a step as completed.
      *
@@ -277,6 +331,7 @@ export function createStepController(options) {
             completed: false,
             active: false,
         })));
+        $stepErrors.set({});
         if (toStepId) {
             const idx = stepDefs.findIndex((s) => s.id === toStepId);
             $currentIndex.set(idx >= 0 ? idx : 0);
@@ -296,41 +351,51 @@ export function createStepController(options) {
         current,
         steps,
     }));
-    const hasErrors = (value) => {
+    /**
+     * Flattens a superforms nested error object into dot-path keys → messages.
+     * e.g. { user: { email: ['Invalid'] } } → { 'user.email': ['Invalid'] }.
+     */
+    const flattenErrorMessages = (value, prefix = '') => {
         if (Array.isArray(value)) {
-            return value.length > 0;
+            return value.length > 0 && prefix ? { [prefix]: value } : {};
         }
         if (value && typeof value === 'object') {
-            return Object.values(value).some(hasErrors);
+            return Object.entries(value).reduce((acc, [key, child]) => {
+                const path = prefix ? `${prefix}.${key}` : key;
+                return { ...acc, ...flattenErrorMessages(child, path) };
+            }, {});
         }
-        return false;
+        return {};
     };
     const attachFormIntegration = (form) => {
         // Implementation for attaching form integration
         formIntegration = form;
+        // Apply the initial step's validator so the first next() validates
+        // against the right schema even before any step change fires.
+        applyStepValidator($currentStep.get());
         // Subscribe to form submitting state
         unsubSubmitting = formIntegration.submitting.subscribe((submitting) => {
-            // Clear any error state on submit start
+            // Clear any error on submit start (user is fixing things)
             if (submitting) {
-                clearStepState($currentStep.get().id);
+                clearStepError($currentStep.get().id);
             }
             setLoading(submitting);
         });
         unsubErrors = formIntegration.errors.subscribe((errors) => {
-            // If there are errors, set current step to error state
-            const keys = Object.keys(errors || {});
-            if (!hasErrors(errors)) {
-                stepDefs.forEach((step) => {
-                    clearStepState(step.id);
-                });
-            }
-            else {
-                stepDefs.forEach((step) => {
-                    if (arrayHasValueInArray(keys, step.data || [])) {
-                        setStepState(step.id, 'error');
-                    }
-                });
+            const flat = flattenErrorMessages(errors);
+            if (Object.keys(flat).length === 0) {
+                stepDefs.forEach((step) => clearStepError(step.id));
+                return;
             }
+            stepDefs.forEach((step) => {
+                const messages = Object.entries(flat)
+                    .filter(([key]) => (step.data ?? []).includes(key.split('.')[0]))
+                    .flatMap(([, msgs]) => msgs);
+                if (messages.length > 0)
+                    setStepError(step.id, messages);
+                else
+                    clearStepError(step.id);
+            });
         });
     };
     return {
@@ -339,6 +404,7 @@ export function createStepController(options) {
         current: $currentStep,
         currentIndex: $currentIndex,
         isLastStep: $isLastStep,
+        stepErrors: $stepErrors,
         debug: $debug,
         /** Navigation */
         next,
@@ -350,6 +416,8 @@ export function createStepController(options) {
         /** State control */
         setStepState,
         clearStepState,
+        setStepError,
+        clearStepError,
         markCompleted,
         setLoading,
         reset,

package/dist/components/wizard/step.types.d.ts

@@ -46,6 +46,15 @@ export interface StepDefinition<TId extends string = string> {
     data?: string[];
     /** Handles jump policy logic */
     jumpPolicy?: JumpPolicy;
+    /**
+     * Validation adapter for this step (e.g. zod4(step1Schema)).
+     * When set, the controller assigns it to the attached superForm's
+     * options.validators on entering the step, and next() validates the
+     * CURRENT step against it before navigating.
+     */
+    validator?: unknown;
+    /** Validate on next(). Default true when `validator` is set. */
+    validateOnNext?: boolean;
 }
 /**
  * Derived runtime step containing both definition and computed state.
@@ -114,6 +123,9 @@ export interface StepCallbacks<TId extends string = string> {
 /**
  * Validator configuration for a step.
  * Used for Superforms integration.
+ *
+ * @deprecated Use {@link StepDefinition.validator} / {@link StepDefinition.validateOnNext}
+ * on the step definition instead; the controller wires per-step validators automatically.
  */
 export interface StepValidator {
     /** Adapter-specific validator (zod4, valibot, etc.) */
@@ -149,6 +161,8 @@ export interface StepController<TId extends string = string> {
     currentIndex: ReadableAtom<number>;
     /** Whether the current step is the last step */
     isLastStep: ReadableAtom<boolean>;
+    /** Reactive map of step id → error messages */
+    stepErrors: ReadableAtom<Partial<Record<TId, string[]>>>;
     /** Debug info store */
     debug: ReadableAtom<any>;
     /**
@@ -190,6 +204,17 @@ export interface StepController<TId extends string = string> {
      * @param id - The step ID
      */
     clearStepState(id: TId): void;
+    /**
+     * Set a human-readable error on a step (also flips its rail state to 'error').
+     * @param id - The step ID
+     * @param error - A message or list of messages
+     */
+    setStepError(id: TId, error: string | string[]): void;
+    /**
+     * Clear a step's error messages and rail error state.
+     * @param id - The step ID
+     */
+    clearStepError(id: TId): void;
     /**
      * Mark a step as completed.
      * @param id - The step ID to mark completed
@@ -238,6 +263,8 @@ export interface StepPanelSnippetContext<TId extends string = string> {
     /** The current step being displayed */
     step: StepRuntime<TId>;
     isLoading: boolean;
+    /** Current step's error messages ([] when none) */
+    errors: string[];
 }
 /**
  * Context passed to step actions snippet for custom navigation controls.
@@ -280,6 +307,10 @@ export type SuperFormLike<T = any, M = any> = {
     }) => Promise<{
         valid: boolean;
     }>;
+    /** superforms options bag; the controller only touches .validators */
+    options?: {
+        validators?: unknown;
+    } & Record<string, unknown>;
 };
 type Nested<T, V> = T extends object ? {
     [K in keyof T]: Nested<T[K], V>;

package/dist/index.d.ts

@@ -4,15 +4,16 @@
  * This is the main entry point for the component library.
  */
 import './theme.css';
-export declare const version = "0.7.1";
+export declare const version = "0.7.9";
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
 export { Input, Textarea, Select, SelectMenu, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker } from './components/forms';
 export { Card, Panel, Grid, Container, SectionHeader, Divider } from './components/cards';
 export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu } from './components/navigation';
-export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
+export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, ToastHost, toast, toasts, dismissToast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
+export type { ToastItem, ToastOptions, ToastVariant } from './components/overlays';
 export { Heading, Text, Code } from './components/typography';
-export { Table, Pagination, Badge, Tag, List, Avatar, CodeBlock, Stat, CalendarGrid, Sparkline } from './components/data';
-export type { TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem } from './components/data';
+export { Table, Pagination, Badge, Tag, List, Avatar, CodeBlock, Stat, CalendarGrid, Sparkline, EmptyState, WeekHeatmap } from './components/data';
+export type { TableColumn, SortDirection, RowKey, SelectionState, CalendarEvent, ListItem, WeekHeatmapCell } from './components/data';
 export { Portal, Collapse, Accordion, Carousel, ScrollArea, Hero, SystemConsole, SystemInterface } from './components/utilities';
 export type { ConsoleMessage, SystemMessage, MessageContentType } from './components/utilities';
 export { StepForm, StepRail, createStepController, } from './components/wizard';
@@ -40,6 +41,7 @@ import type Alert from './components/overlays/Alert.svelte';
 import type Tooltip from './components/overlays/Tooltip.svelte';
 import type Accordion from './components/utilities/Accordion.svelte';
 import type Sparkline from './components/data/Sparkline.svelte';
+import type WeekHeatmap from './components/data/WeekHeatmap.svelte';
 import type StepForm from './components/wizard/StepForm.svelte';
 import type StepRail from './components/wizard/StepRail.svelte';
 export type ButtonProps = ComponentProps<Button>;
@@ -64,5 +66,6 @@ export type AlertProps = ComponentProps<Alert>;
 export type TooltipProps = ComponentProps<Tooltip>;
 export type AccordionProps = ComponentProps<Accordion>;
 export type SparklineProps = ComponentProps<Sparkline>;
+export type WeekHeatmapProps = ComponentProps<WeekHeatmap>;
 export type StepFormProps = ComponentProps<StepForm>;
 export type StepRailProps = ComponentProps<StepRail>;

package/dist/index.js

@@ -5,7 +5,7 @@
  */
 // Import theme CSS to ensure it's bundled
 import './theme.css';
-export const version = '0.7.1';
+export const version = '0.7.9';
 // ===== Button Components =====
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
 // ===== Form Components =====
@@ -15,11 +15,11 @@ export { Card, Panel, Grid, Container, SectionHeader, Divider } from './componen
 // ===== Navigation Components =====
 export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu } from './components/navigation';
 // ===== Overlay & Feedback Components =====
-export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
+export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, ToastHost, toast, toasts, dismissToast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
 // ===== Typography Components =====
 export { Heading, Text, Code } from './components/typography';
 // ===== Data Display Components =====
-export { Table, Pagination, Badge, Tag, List, Avatar, CodeBlock, Stat, CalendarGrid, Sparkline } from './components/data';
+export { Table, Pagination, Badge, Tag, List, Avatar, CodeBlock, Stat, CalendarGrid, Sparkline, EmptyState, WeekHeatmap } from './components/data';
 // ===== Utility Components =====
 export { Portal, Collapse, Accordion, Carousel, ScrollArea, Hero, SystemConsole, SystemInterface } from './components/utilities';
 // ===== Wizard Components =====