@r2digisolutions/components 0.1.1

package/dist/utils/formValidate.js

@@ -0,0 +1,113 @@
+import { formatMessage, getDictionary } from './i18n.js';
+function isEmpty(value) {
+    if (value === null || value === undefined)
+        return true;
+    if (typeof value === 'string')
+        return value.trim().length === 0;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'boolean')
+        return false;
+    return false;
+}
+function msg(options, key, params) {
+    if (options?.t)
+        return options.t(key, params);
+    const dict = getDictionary(options?.locale ?? 'en', options?.messages);
+    return formatMessage(dict[key], params);
+}
+function runBuiltin(rule, value, options) {
+    if (rule === 'required') {
+        return isEmpty(value) ? msg(options, 'fieldRequired') : undefined;
+    }
+    if (isEmpty(value))
+        return undefined;
+    const str = String(value);
+    if (rule === 'email') {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str)
+            ? undefined
+            : msg(options, 'invalidEmail');
+    }
+    if (rule === 'url') {
+        try {
+            new URL(str);
+            return undefined;
+        }
+        catch {
+            return msg(options, 'invalidUrl');
+        }
+    }
+    if (rule.startsWith('minLength:')) {
+        const min = Number(rule.slice('minLength:'.length));
+        return str.length >= min ? undefined : msg(options, 'minLength', { min });
+    }
+    if (rule.startsWith('maxLength:')) {
+        const max = Number(rule.slice('maxLength:'.length));
+        return str.length <= max ? undefined : msg(options, 'maxLength', { max });
+    }
+    if (rule.startsWith('min:')) {
+        const min = Number(rule.slice('min:'.length));
+        const n = Number(value);
+        return !Number.isNaN(n) && n >= min ? undefined : msg(options, 'minValue', { min });
+    }
+    if (rule.startsWith('max:')) {
+        const max = Number(rule.slice('max:'.length));
+        const n = Number(value);
+        return !Number.isNaN(n) && n <= max ? undefined : msg(options, 'maxValue', { max });
+    }
+    return undefined;
+}
+function runRule(rule, value, data, options) {
+    if (typeof rule === 'string') {
+        return runBuiltin(rule, value, options);
+    }
+    if (typeof rule === 'function') {
+        return rule(value, data) || undefined;
+    }
+    if (rule && typeof rule === 'object' && 'pattern' in rule) {
+        if (isEmpty(value))
+            return undefined;
+        return rule.pattern.test(String(value))
+            ? undefined
+            : (rule.message ?? msg(options, 'patternMismatch'));
+    }
+    return undefined;
+}
+/**
+ * Declarative validation → `FormErrors` for `<Form bind:errors>`.
+ *
+ * @example
+ * ```ts
+ * errors = validateForm(data, {
+ *   email: ['required', 'email'],
+ *   password: ['required', 'minLength:8'],
+ *   age: ['min:18']
+ * }, { locale: 'es' });
+ * ```
+ */
+export function validateForm(data, rules, options) {
+    const errors = {};
+    for (const key of Object.keys(rules)) {
+        const fieldRules = rules[key];
+        if (!fieldRules)
+            continue;
+        const list = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+        const value = data[key];
+        for (const rule of list) {
+            const message = runRule(rule, value, data, options);
+            if (message) {
+                errors[key] = message;
+                break;
+            }
+        }
+    }
+    return errors;
+}
+/** True when `current` differs from `initial` (shallow JSON compare). */
+export function isFormDirty(current, initial) {
+    return JSON.stringify(current) !== JSON.stringify(initial);
+}
+/** First error message, or `undefined` when valid. */
+export function firstFormError(errors) {
+    return Object.values(errors).find(Boolean);
+}

package/dist/utils/i18n.d.ts

@@ -0,0 +1,34 @@
+export type LocaleCode = 'en' | 'es' | 'pt' | 'fr' | 'de' | (string & {});
+/** Built-in UI / form / validation strings. Apps can merge overrides. */
+export interface UiMessages {
+    save: string;
+    cancel: string;
+    delete: string;
+    reset: string;
+    submit: string;
+    close: string;
+    optional: string;
+    required: string;
+    loading: string;
+    errorSummary: string;
+    addItem: string;
+    removeItem: string;
+    noItems: string;
+    /** Validation */
+    fieldRequired: string;
+    invalidEmail: string;
+    invalidUrl: string;
+    minLength: string;
+    maxLength: string;
+    minValue: string;
+    maxValue: string;
+    patternMismatch: string;
+}
+export type MessageKey = keyof UiMessages;
+export type MessageParams = Record<string, string | number>;
+/** Built-in dictionaries keyed by primary language subtag (`es-MX` → `es`). */
+export declare const UI_DICTIONARIES: Record<string, UiMessages>;
+export declare function resolveLocaleTag(locale: string): string;
+export declare function getDictionary(locale: string, overrides?: Partial<UiMessages>): UiMessages;
+/** Interpolate `{name}` placeholders in a message template. */
+export declare function formatMessage(template: string, params?: MessageParams): string;

package/dist/utils/i18n.js

@@ -0,0 +1,137 @@
+const en = {
+    save: 'Save',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    reset: 'Reset',
+    submit: 'Submit',
+    close: 'Close',
+    optional: 'Optional',
+    required: 'Required',
+    loading: 'Loading…',
+    errorSummary: 'Please fix the following',
+    addItem: 'Add item',
+    removeItem: 'Remove item',
+    noItems: 'No items yet',
+    fieldRequired: 'This field is required',
+    invalidEmail: 'Enter a valid email address',
+    invalidUrl: 'Enter a valid URL',
+    minLength: 'Use at least {min} characters',
+    maxLength: 'Use at most {max} characters',
+    minValue: 'Must be at least {min}',
+    maxValue: 'Must be at most {max}',
+    patternMismatch: 'Invalid format'
+};
+const es = {
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    delete: 'Eliminar',
+    reset: 'Restablecer',
+    submit: 'Enviar',
+    close: 'Cerrar',
+    optional: 'Opcional',
+    required: 'Obligatorio',
+    loading: 'Cargando…',
+    errorSummary: 'Corrige lo siguiente',
+    addItem: 'Añadir elemento',
+    removeItem: 'Eliminar elemento',
+    noItems: 'Sin elementos todavía',
+    fieldRequired: 'Este campo es obligatorio',
+    invalidEmail: 'Introduce un email válido',
+    invalidUrl: 'Introduce una URL válida',
+    minLength: 'Usa al menos {min} caracteres',
+    maxLength: 'Usa como máximo {max} caracteres',
+    minValue: 'Debe ser al menos {min}',
+    maxValue: 'Debe ser como máximo {max}',
+    patternMismatch: 'Formato no válido'
+};
+const pt = {
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    delete: 'Eliminar',
+    reset: 'Repor',
+    submit: 'Enviar',
+    close: 'Fechar',
+    optional: 'Opcional',
+    required: 'Obrigatório',
+    loading: 'A carregar…',
+    errorSummary: 'Corrija o seguinte',
+    addItem: 'Adicionar item',
+    removeItem: 'Remover item',
+    noItems: 'Ainda sem itens',
+    fieldRequired: 'Este campo é obrigatório',
+    invalidEmail: 'Introduza um email válido',
+    invalidUrl: 'Introduza um URL válido',
+    minLength: 'Use pelo menos {min} caracteres',
+    maxLength: 'Use no máximo {max} caracteres',
+    minValue: 'Deve ser pelo menos {min}',
+    maxValue: 'Deve ser no máximo {max}',
+    patternMismatch: 'Formato inválido'
+};
+const fr = {
+    save: 'Enregistrer',
+    cancel: 'Annuler',
+    delete: 'Supprimer',
+    reset: 'Réinitialiser',
+    submit: 'Envoyer',
+    close: 'Fermer',
+    optional: 'Facultatif',
+    required: 'Obligatoire',
+    loading: 'Chargement…',
+    errorSummary: 'Veuillez corriger ce qui suit',
+    addItem: 'Ajouter un élément',
+    removeItem: 'Supprimer l’élément',
+    noItems: 'Aucun élément pour l’instant',
+    fieldRequired: 'Ce champ est obligatoire',
+    invalidEmail: 'Saisissez une adresse e-mail valide',
+    invalidUrl: 'Saisissez une URL valide',
+    minLength: 'Utilisez au moins {min} caractères',
+    maxLength: 'Utilisez au plus {max} caractères',
+    minValue: 'Doit être au moins {min}',
+    maxValue: 'Doit être au plus {max}',
+    patternMismatch: 'Format non valide'
+};
+const de = {
+    save: 'Speichern',
+    cancel: 'Abbrechen',
+    delete: 'Löschen',
+    reset: 'Zurücksetzen',
+    submit: 'Senden',
+    close: 'Schließen',
+    optional: 'Optional',
+    required: 'Pflichtfeld',
+    loading: 'Wird geladen…',
+    errorSummary: 'Bitte korrigieren Sie Folgendes',
+    addItem: 'Element hinzufügen',
+    removeItem: 'Element entfernen',
+    noItems: 'Noch keine Elemente',
+    fieldRequired: 'Dieses Feld ist erforderlich',
+    invalidEmail: 'Geben Sie eine gültige E-Mail-Adresse ein',
+    invalidUrl: 'Geben Sie eine gültige URL ein',
+    minLength: 'Mindestens {min} Zeichen verwenden',
+    maxLength: 'Höchstens {max} Zeichen verwenden',
+    minValue: 'Muss mindestens {min} sein',
+    maxValue: 'Darf höchstens {max} sein',
+    patternMismatch: 'Ungültiges Format'
+};
+/** Built-in dictionaries keyed by primary language subtag (`es-MX` → `es`). */
+export const UI_DICTIONARIES = {
+    en,
+    es,
+    pt,
+    fr,
+    de
+};
+export function resolveLocaleTag(locale) {
+    const base = locale.toLowerCase().split('-')[0] ?? 'en';
+    return UI_DICTIONARIES[base] ? base : UI_DICTIONARIES[locale] ? locale : 'en';
+}
+export function getDictionary(locale, overrides) {
+    const tag = resolveLocaleTag(locale);
+    return { ...UI_DICTIONARIES[tag], ...overrides };
+}
+/** Interpolate `{name}` placeholders in a message template. */
+export function formatMessage(template, params) {
+    if (!params)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (_, key) => params[key] !== undefined ? String(params[key]) : `{${key}}`);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * i18n store — locale + UI/form/validation strings for R2DigiSolutions components.
+ *
+ * - Singleton: `import { i18n } from '@r2digisolutions/components'`
+ * - Reactive via Svelte 5 runes (`$state` / `$derived`)
+ * - Persists locale to localStorage
+ *
+ * @example
+ * ```ts
+ * i18n.set('es');
+ * i18n.t('save'); // → "Guardar"
+ * i18n.t('minLength', { min: 8 });
+ * ```
+ */
+import { type LocaleCode, type MessageKey, type MessageParams, type UiMessages } from './i18n.js';
+export type { LocaleCode, MessageKey, MessageParams, UiMessages };
+declare class I18nStore {
+    #private;
+    constructor();
+    get locale(): LocaleCode;
+    /** Active dictionary (built-in + overrides). */
+    get messages(): UiMessages;
+    /** Available built-in language tags. */
+    get locales(): string[];
+    /** Translate a built-in UI / validation key. */
+    t(key: MessageKey, params?: MessageParams): string;
+    /** Change active locale (`es`, `en-US`, …). */
+    set(locale: LocaleCode): void;
+    /** Merge message overrides on top of the active dictionary. */
+    extend(messages: Partial<UiMessages>): void;
+    /** Replace all overrides. */
+    setOverrides(messages?: Partial<UiMessages>): void;
+    /** One-shot setup (locale + optional overrides). */
+    configure(options: {
+        locale?: LocaleCode;
+        messages?: Partial<UiMessages>;
+    }): void;
+}
+export declare const i18n: I18nStore;

package/dist/utils/i18n.svelte.js

@@ -0,0 +1,76 @@
+/**
+ * i18n store — locale + UI/form/validation strings for R2DigiSolutions components.
+ *
+ * - Singleton: `import { i18n } from '@r2digisolutions/components'`
+ * - Reactive via Svelte 5 runes (`$state` / `$derived`)
+ * - Persists locale to localStorage
+ *
+ * @example
+ * ```ts
+ * i18n.set('es');
+ * i18n.t('save'); // → "Guardar"
+ * i18n.t('minLength', { min: 8 });
+ * ```
+ */
+import { UI_DICTIONARIES, formatMessage, getDictionary, resolveLocaleTag } from './i18n.js';
+const STORAGE_KEY = 'r2-locale';
+function getStoredLocale() {
+    if (typeof localStorage === 'undefined')
+        return 'en';
+    return localStorage.getItem(STORAGE_KEY) ?? 'en';
+}
+function applyDocumentLang(locale) {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.lang = resolveLocaleTag(locale);
+}
+class I18nStore {
+    #locale = $state('en');
+    #overrides = $state({});
+    #messages = $derived(getDictionary(this.#locale, this.#overrides));
+    constructor() {
+        if (typeof window !== 'undefined') {
+            this.#locale = getStoredLocale();
+            applyDocumentLang(this.#locale);
+        }
+    }
+    get locale() {
+        return this.#locale;
+    }
+    /** Active dictionary (built-in + overrides). */
+    get messages() {
+        return this.#messages;
+    }
+    /** Available built-in language tags. */
+    get locales() {
+        return Object.keys(UI_DICTIONARIES);
+    }
+    /** Translate a built-in UI / validation key. */
+    t(key, params) {
+        return formatMessage(this.#messages[key], params);
+    }
+    /** Change active locale (`es`, `en-US`, …). */
+    set(locale) {
+        this.#locale = locale;
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, locale);
+        }
+        applyDocumentLang(locale);
+    }
+    /** Merge message overrides on top of the active dictionary. */
+    extend(messages) {
+        this.#overrides = { ...this.#overrides, ...messages };
+    }
+    /** Replace all overrides. */
+    setOverrides(messages = {}) {
+        this.#overrides = { ...messages };
+    }
+    /** One-shot setup (locale + optional overrides). */
+    configure(options) {
+        if (options.messages)
+            this.setOverrides(options.messages);
+        if (options.locale)
+            this.set(options.locale);
+    }
+}
+export const i18n = new I18nStore();

package/dist/utils/layoutGrid.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Pure helpers for editable dashboard grid layouts (react-grid-layout style).
+ */
+export interface GridItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+    static?: boolean;
+}
+export interface LayoutGridOptions {
+    cols?: number;
+    /** Vertical compaction after move/resize */
+    compact?: boolean;
+}
+export declare const DEFAULT_COLS = 12;
+export declare const DEFAULT_ROW_HEIGHT = 80;
+export declare const DEFAULT_GAP = 12;
+export declare function clampItem(item: GridItem, cols?: number): GridItem;
+export declare function rectsOverlap(a: GridItem, b: GridItem): boolean;
+export declare function findCollisions(layout: GridItem[], item: GridItem): GridItem[];
+/** Push colliding items down (simple collision resolution). */
+export declare function resolveCollisions(layout: GridItem[], moved: GridItem, cols?: number): GridItem[];
+/** Compact items upward to remove vertical gaps. */
+export declare function compactLayout(layout: GridItem[], cols?: number): GridItem[];
+export declare function updateItem(layout: GridItem[], id: string, patch: Partial<GridItem>, options?: LayoutGridOptions): GridItem[];
+export declare function addItem(layout: GridItem[], item: GridItem, options?: LayoutGridOptions): GridItem[];
+export declare function removeItem(layout: GridItem[], id: string, options?: LayoutGridOptions): GridItem[];
+export declare function serializeLayout(layout: GridItem[]): string;
+export declare function parseLayout(json: string): GridItem[];
+export declare function layoutBounds(layout: GridItem[]): {
+    cols: number;
+    rows: number;
+};
+export type GridResizeEdge = 'se' | 'e' | 's' | 'sw' | 'w' | 'ne' | 'n' | 'nw';
+/**
+ * Compute next x/y/w/h when dragging a resize edge/corner.
+ * Anchors the opposite side for west/north edges.
+ */
+export declare function resizeItemByEdge(item: Pick<GridItem, 'x' | 'y' | 'w' | 'h' | 'minW' | 'minH' | 'maxW' | 'maxH'>, edge: GridResizeEdge, dx: number, dy: number, cols?: number): Pick<GridItem, 'x' | 'y' | 'w' | 'h'>;
+/**
+ * Scale X/W when the column count changes so widgets keep relative proportions.
+ */
+export declare function rescaleLayout(layout: GridItem[], fromCols: number, toCols: number, options?: LayoutGridOptions): GridItem[];
+export type GridDensity = 'comfortable' | 'default' | 'compact' | 'dense';
+export declare const GRID_DENSITY: Record<GridDensity, {
+    cols: number;
+    rowHeight: number;
+    gap: number;
+}>;

package/dist/utils/layoutGrid.js

@@ -0,0 +1,228 @@
+/**
+ * Pure helpers for editable dashboard grid layouts (react-grid-layout style).
+ */
+export const DEFAULT_COLS = 12;
+export const DEFAULT_ROW_HEIGHT = 80;
+export const DEFAULT_GAP = 12;
+export function clampItem(item, cols = DEFAULT_COLS) {
+    const minW = item.minW ?? 1;
+    const minH = item.minH ?? 1;
+    const maxW = item.maxW ?? cols;
+    const maxH = item.maxH ?? 50;
+    const w = Math.max(minW, Math.min(maxW, item.w, cols));
+    const h = Math.max(minH, Math.min(maxH, item.h));
+    const x = Math.max(0, Math.min(item.x, cols - w));
+    const y = Math.max(0, item.y);
+    return { ...item, x, y, w, h, minW, minH, maxW, maxH };
+}
+export function rectsOverlap(a, b) {
+    return !(a.x + a.w <= b.x ||
+        b.x + b.w <= a.x ||
+        a.y + a.h <= b.y ||
+        b.y + b.h <= a.y);
+}
+export function findCollisions(layout, item) {
+    return layout.filter((other) => other.id !== item.id && rectsOverlap(item, other));
+}
+/** Push colliding items down (simple collision resolution). */
+export function resolveCollisions(layout, moved, cols = DEFAULT_COLS) {
+    const next = layout.map((it) => (it.id === moved.id ? clampItem(moved, cols) : { ...it }));
+    const idx = next.findIndex((it) => it.id === moved.id);
+    if (idx < 0)
+        return next;
+    const sorted = [...next].sort((a, b) => a.y - b.y || a.x - b.x);
+    const result = [];
+    for (const item of sorted) {
+        let current = clampItem(item, cols);
+        if (current.static) {
+            result.push(current);
+            continue;
+        }
+        let safety = 0;
+        while (result.some((other) => rectsOverlap(current, other)) && safety < 200) {
+            const blocker = result.find((other) => rectsOverlap(current, other));
+            current = { ...current, y: blocker.y + blocker.h };
+            safety++;
+        }
+        result.push(current);
+    }
+    return result;
+}
+/** Compact items upward to remove vertical gaps. */
+export function compactLayout(layout, cols = DEFAULT_COLS) {
+    const sorted = [...layout]
+        .map((it) => clampItem(it, cols))
+        .sort((a, b) => a.y - b.y || a.x - b.x);
+    const placed = [];
+    for (const item of sorted) {
+        if (item.static) {
+            placed.push(item);
+            continue;
+        }
+        let y = 0;
+        let candidate = { ...item, y };
+        while (placed.some((other) => rectsOverlap(candidate, other))) {
+            y++;
+            candidate = { ...item, y };
+        }
+        placed.push(candidate);
+    }
+    return placed;
+}
+export function updateItem(layout, id, patch, options = {}) {
+    const cols = options.cols ?? DEFAULT_COLS;
+    const current = layout.find((it) => it.id === id);
+    if (!current)
+        return layout;
+    const moved = clampItem({ ...current, ...patch, id }, cols);
+    let next = resolveCollisions(layout, moved, cols);
+    if (options.compact !== false)
+        next = compactLayout(next, cols);
+    return next;
+}
+export function addItem(layout, item, options = {}) {
+    const cols = options.cols ?? DEFAULT_COLS;
+    const next = [...layout, clampItem(item, cols)];
+    return options.compact === false ? next : compactLayout(next, cols);
+}
+export function removeItem(layout, id, options = {}) {
+    const cols = options.cols ?? DEFAULT_COLS;
+    const next = layout.filter((it) => it.id !== id);
+    return options.compact === false ? next : compactLayout(next, cols);
+}
+export function serializeLayout(layout) {
+    return JSON.stringify(layout);
+}
+export function parseLayout(json) {
+    try {
+        const data = JSON.parse(json);
+        if (!Array.isArray(data))
+            return [];
+        return data
+            .filter((it) => typeof it === 'object' &&
+            it !== null &&
+            typeof it.id === 'string' &&
+            typeof it.x === 'number' &&
+            typeof it.y === 'number' &&
+            typeof it.w === 'number' &&
+            typeof it.h === 'number')
+            .map((it) => clampItem(it));
+    }
+    catch {
+        return [];
+    }
+}
+export function layoutBounds(layout) {
+    let cols = 0;
+    let rows = 0;
+    for (const it of layout) {
+        cols = Math.max(cols, it.x + it.w);
+        rows = Math.max(rows, it.y + it.h);
+    }
+    return { cols, rows };
+}
+/**
+ * Compute next x/y/w/h when dragging a resize edge/corner.
+ * Anchors the opposite side for west/north edges.
+ */
+export function resizeItemByEdge(item, edge, dx, dy, cols = DEFAULT_COLS) {
+    const minW = item.minW ?? 1;
+    const minH = item.minH ?? 1;
+    const maxW = item.maxW ?? cols;
+    const maxH = item.maxH ?? 50;
+    let x = item.x;
+    let y = item.y;
+    let w = item.w;
+    let h = item.h;
+    const fromEast = edge === 'e' || edge === 'ne' || edge === 'se';
+    const fromWest = edge === 'w' || edge === 'nw' || edge === 'sw';
+    const fromSouth = edge === 's' || edge === 'se' || edge === 'sw';
+    const fromNorth = edge === 'n' || edge === 'ne' || edge === 'nw';
+    if (fromEast)
+        w = item.w + dx;
+    if (fromWest) {
+        w = item.w - dx;
+        x = item.x + dx;
+    }
+    if (fromSouth)
+        h = item.h + dy;
+    if (fromNorth) {
+        h = item.h - dy;
+        y = item.y + dy;
+    }
+    // Keep min size by pinning the opposite edge
+    if (w < minW) {
+        if (fromWest)
+            x = item.x + item.w - minW;
+        w = minW;
+    }
+    if (h < minH) {
+        if (fromNorth)
+            y = item.y + item.h - minH;
+        h = minH;
+    }
+    if (w > maxW) {
+        if (fromWest)
+            x = item.x + item.w - maxW;
+        w = maxW;
+    }
+    if (h > maxH) {
+        if (fromNorth)
+            y = item.y + item.h - maxH;
+        h = maxH;
+    }
+    // Clamp to grid bounds while preserving the anchored edge
+    if (x < 0) {
+        if (fromWest)
+            w += x;
+        x = 0;
+    }
+    if (y < 0) {
+        if (fromNorth)
+            h += y;
+        y = 0;
+    }
+    if (x + w > cols) {
+        if (fromEast)
+            w = cols - x;
+        else if (fromWest) {
+            x = cols - w;
+            if (x < 0) {
+                w += x;
+                x = 0;
+            }
+        }
+        else {
+            w = cols - x;
+        }
+    }
+    w = Math.max(minW, Math.min(maxW, w, cols));
+    h = Math.max(minH, Math.min(maxH, h));
+    x = Math.max(0, Math.min(x, cols - w));
+    y = Math.max(0, y);
+    return { x, y, w, h };
+}
+/**
+ * Scale X/W when the column count changes so widgets keep relative proportions.
+ */
+export function rescaleLayout(layout, fromCols, toCols, options = {}) {
+    if (toCols <= 0)
+        return layout;
+    if (fromCols <= 0 || fromCols === toCols) {
+        const clamped = layout.map((it) => clampItem(it, toCols));
+        return options.compact === false ? clamped : compactLayout(clamped, toCols);
+    }
+    const scale = toCols / fromCols;
+    const next = layout.map((it) => {
+        const w = Math.max(it.minW ?? 1, Math.round(it.w * scale));
+        const x = Math.round(it.x * scale);
+        return clampItem({ ...it, x, w }, toCols);
+    });
+    return options.compact === false ? next : compactLayout(next, toCols);
+}
+export const GRID_DENSITY = {
+    comfortable: { cols: 12, rowHeight: 96, gap: 16 },
+    default: { cols: 12, rowHeight: 80, gap: 12 },
+    compact: { cols: 12, rowHeight: 64, gap: 8 },
+    dense: { cols: 12, rowHeight: 52, gap: 6 }
+};