@asteby/metacore-runtime-react 35.0.0 → 36.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @asteby/metacore-runtime-react
 
+## 36.0.0
+
+### Patch Changes
+
+- Updated dependencies [6fb08b7]
+  - @asteby/metacore-ui@2.17.0
+
+## 35.1.0
+
+### Minor Changes
+
+- 431f813: Role chips: Lucide icon + modern HSL color picker (popover SV plane / hue / hex) in PermissionsManager; ColorPickerField also used for DynamicForm color fields.
+
 ## 35.0.0
 
 ### Minor Changes

package/dist/color-picker-field.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_ROLE_COLOR = "#3b82f6";
+export interface ColorPickerFieldProps {
+    value?: string;
+    onChange: (hex: string) => void;
+    /** Optional label for a11y on the trigger. */
+    'aria-label'?: string;
+    className?: string;
+    disabled?: boolean;
+}
+/** Normalize to #rrggbb or '' if invalid. */
+export declare function normalizeHex(raw: unknown): string;
+export declare function ColorPickerField({ value, onChange, 'aria-label': ariaLabel, className, disabled, }: ColorPickerFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=color-picker-field.d.ts.map

package/dist/color-picker-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-field.d.ts","sourceRoot":"","sources":["../src/color-picker-field.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,kBAAkB,YAAY,CAAA;AAE3C,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAQD,6CAA6C;AAC7C,wBAAgB,YAAY,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAajD;AAwED,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAmB,EACjC,SAAS,EACT,QAAQ,GACX,EAAE,qBAAqB,+BA4KvB"}

package/dist/color-picker-field.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ColorPickerField — modern popover color control (SV plane + hue + hex).
+// Used by PermissionsManager role dialog and DynamicForm `type: "color"`.
+// Value is always a #rrggbb string (empty → falls back to DEFAULT_HEX visually).
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pipette } from 'lucide-react';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
+export const DEFAULT_ROLE_COLOR = '#3b82f6';
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
+/** Normalize to #rrggbb or '' if invalid. */
+export function normalizeHex(raw) {
+    if (typeof raw !== 'string')
+        return '';
+    let s = raw.trim();
+    if (!s)
+        return '';
+    if (s[0] !== '#')
+        s = `#${s}`;
+    if (/^#[0-9a-fA-F]{3}$/.test(s)) {
+        const r = s[1], g = s[2], b = s[3];
+        s = `#${r}${r}${g}${g}${b}${b}`;
+    }
+    if (!/^#[0-9a-fA-F]{6}$/.test(s))
+        return '';
+    return s.toLowerCase();
+}
+function hexToRgb(hex) {
+    const n = normalizeHex(hex);
+    if (!n)
+        return null;
+    return {
+        r: parseInt(n.slice(1, 3), 16),
+        g: parseInt(n.slice(3, 5), 16),
+        b: parseInt(n.slice(5, 7), 16),
+    };
+}
+function rgbToHex(r, g, b) {
+    const h = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+function rgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === r)
+            h = ((g - b) / d) % 6;
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else
+            h = (r - g) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const s = max === 0 ? 0 : d / max;
+    return { h, s, v: max };
+}
+function hsvToRgb(h, s, v) {
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+    let rp = 0, gp = 0, bp = 0;
+    if (h < 60)
+        [rp, gp, bp] = [c, x, 0];
+    else if (h < 120)
+        [rp, gp, bp] = [x, c, 0];
+    else if (h < 180)
+        [rp, gp, bp] = [0, c, x];
+    else if (h < 240)
+        [rp, gp, bp] = [0, x, c];
+    else if (h < 300)
+        [rp, gp, bp] = [x, 0, c];
+    else
+        [rp, gp, bp] = [c, 0, x];
+    return {
+        r: (rp + m) * 255,
+        g: (gp + m) * 255,
+        b: (bp + m) * 255,
+    };
+}
+function hexToHsv(hex) {
+    const rgb = hexToRgb(hex) || hexToRgb(DEFAULT_ROLE_COLOR);
+    return rgbToHsv(rgb.r, rgb.g, rgb.b);
+}
+function hsvToHex(hsv) {
+    const { r, g, b } = hsvToRgb(hsv.h, hsv.s, hsv.v);
+    return rgbToHex(r, g, b);
+}
+function hueCss(h) {
+    const { r, g, b } = hsvToRgb(h, 1, 1);
+    return rgbToHex(r, g, b);
+}
+export function ColorPickerField({ value, onChange, 'aria-label': ariaLabel = 'Color', className, disabled, }) {
+    const hex = normalizeHex(value) || DEFAULT_ROLE_COLOR;
+    const [open, setOpen] = useState(false);
+    const [hsv, setHsv] = useState(() => hexToHsv(hex));
+    const [hexDraft, setHexDraft] = useState(hex);
+    const svRef = useRef(null);
+    const dragging = useRef(false);
+    // Sync from external value when popover closed (or first open).
+    useEffect(() => {
+        if (dragging.current)
+            return;
+        const next = normalizeHex(value) || DEFAULT_ROLE_COLOR;
+        setHsv(hexToHsv(next));
+        setHexDraft(next);
+    }, [value, open]);
+    const commit = useCallback((next) => {
+        setHsv(next);
+        const out = hsvToHex(next);
+        setHexDraft(out);
+        onChange(out);
+    }, [onChange]);
+    const setFromPointer = useCallback((clientX, clientY) => {
+        const el = svRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const s = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const v = clamp(1 - (clientY - rect.top) / rect.height, 0, 1);
+        commit({ ...hsv, s, v });
+    }, [commit, hsv]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onMove = (e) => {
+            if (!dragging.current)
+                return;
+            setFromPointer(e.clientX, e.clientY);
+        };
+        const onUp = () => {
+            dragging.current = false;
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+    }, [open, setFromPointer]);
+    const svStyle = useMemo(() => ({
+        background: `
+        linear-gradient(to top, #000, transparent),
+        linear-gradient(to right, #fff, ${hueCss(hsv.h)})
+      `,
+    }), [hsv.h]);
+    const applyHexDraft = () => {
+        const n = normalizeHex(hexDraft);
+        if (!n) {
+            setHexDraft(hsvToHex(hsv));
+            return;
+        }
+        setHsv(hexToHsv(n));
+        setHexDraft(n);
+        onChange(n);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: disabled, "aria-label": ariaLabel, className: cn('h-10 w-full justify-start gap-3 px-2.5 font-normal', className), children: [_jsx("span", { className: "h-6 w-6 shrink-0 rounded-md border border-black/10 shadow-sm ring-1 ring-black/5 dark:border-white/10", style: { background: hex }, "aria-hidden": true }), _jsx("span", { className: "font-mono text-sm uppercase tracking-wide text-foreground", children: hex }), _jsx(Pipette, { className: "ml-auto h-3.5 w-3.5 text-muted-foreground" })] }) }), _jsx(PopoverContent, { className: "w-[260px] p-3", align: "start", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { ref: svRef, role: "slider", "aria-label": "Saturaci\u00F3n y brillo", tabIndex: 0, className: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-lg border border-border/60", style: svStyle, onPointerDown: (e) => {
+                                dragging.current = true;
+                                e.target.setPointerCapture?.(e.pointerId);
+                                setFromPointer(e.clientX, e.clientY);
+                            }, children: _jsx("span", { className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md ring-1 ring-black/30", style: {
+                                    left: `${hsv.s * 100}%`,
+                                    top: `${(1 - hsv.v) * 100}%`,
+                                    background: hsvToHex(hsv),
+                                } }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Tono" }), _jsx("input", { type: "range", min: 0, max: 360, step: 1, value: Math.round(hsv.h), "aria-label": "Tono", onChange: (e) => commit({ ...hsv, h: Number(e.target.value) }), className: "h-3 w-full cursor-pointer appearance-none rounded-full", style: {
+                                        background: 'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
+                                    } })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-9 w-9 shrink-0 rounded-md border border-black/10 shadow-inner ring-1 ring-black/5", style: { background: hsvToHex(hsv) }, "aria-hidden": true }), _jsx(Input, { value: hexDraft, spellCheck: false, "aria-label": "Hexadecimal", className: "h-9 font-mono uppercase", onChange: (e) => setHexDraft(e.target.value), onBlur: applyHexDraft, onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            applyHexDraft();
+                                        }
+                                    } })] })] }) })] }));
+}

package/dist/dynamic-form.d.ts

@@ -7,6 +7,7 @@ export { DynamicSelectField } from './dynamic-select-field';
 export { DynamicDateField } from './dynamic-date-field';
 export { UploadField } from './upload-field';
 export { IconPickerField } from './icon-picker-field';
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field';
 export interface DynamicFormProps {
     fields: ActionFieldDef[];
     initialValues?: Record<string, any>;

package/dist/dynamic-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAOhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CAC1B;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,EAChB,UAAU,GACb,EAAE,gBAAgB,+BA8LlB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAcrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAOhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEzF,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;CAC1B;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,EAChB,UAAU,GACb,EAAE,gBAAgB,+BA8LlB"}

package/dist/dynamic-form.js

@@ -15,12 +15,14 @@ import { DynamicSelectField } from './dynamic-select-field';
 import { DynamicDateField } from './dynamic-date-field';
 import { UploadField } from './upload-field';
 import { IconPickerField } from './icon-picker-field';
+import { ColorPickerField } from './color-picker-field';
 export { buildZodSchema, resolveWidget };
 export { DynamicLineItems } from './dynamic-line-items';
 export { DynamicSelectField } from './dynamic-select-field';
 export { DynamicDateField } from './dynamic-date-field';
 export { UploadField } from './upload-field';
 export { IconPickerField } from './icon-picker-field';
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field';
 export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitLabel = 'Guardar', cancelLabel = 'Cancelar', disabled = false, formLayout, }) {
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
@@ -230,7 +232,7 @@ function FieldRenderer({ field, value, onChange, initialValues, effectiveOptions
             // / future MDX editor pick it up without breaking the contract.
             return _jsx(Textarea, { id: field.key, "data-widget": "richtext", value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
         case 'color':
-            return _jsx(Input, { id: field.key, type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value) });
+            return (_jsx(ColorPickerField, { "aria-label": field.label || field.key, value: typeof value === 'string' ? value : '', onChange: onChange }));
         case 'select':
             return (_jsxs(Select, { value: value || '', onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: (effectiveOptions ?? field.options)?.map((opt) => _jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })] }));
         case 'switch':

package/dist/index.d.ts

@@ -28,7 +28,8 @@ export * from './slot';
 export * from './capability-gate';
 export { PermissionsProvider, useCan, usePermissionsActive, makeCan, capabilityForActionKey, modelCapability, gateTableMetadata, resolveRowActions, type CanFn, type PermissionsProviderProps, } from './permissions-context';
 export { useDynamicRowActions, type UseDynamicRowActionsParams, type DynamicRowActions, } from './dynamic-row-actions';
-export { PermissionsManager, moduleActionCapability, moduleCapabilities, grantedCountForModule, capabilitySetsEqual, defaultActionIcon, normalizeCatalogGroups, flattenGroups, filterModuleGroups, groupModuleActions, type PermissionsManagerProps, type PermissionsCatalog, type GroupedPermissionsCatalog, type FlatPermissionsCatalog, type ModuleGroup, type PermissionModuleDef, type PermissionActionDef, type GeneralPermissionDef, type RoleDef, type RoleInput, } from './permissions-manager';
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field';
+export { PermissionsManager, moduleActionCapability, moduleCapabilities, grantedCountForModule, capabilitySetsEqual, defaultActionIcon, suggestRoleIcon, normalizeCatalogGroups, flattenGroups, filterModuleGroups, groupModuleActions, type PermissionsManagerProps, type PermissionsCatalog, type GroupedPermissionsCatalog, type FlatPermissionsCatalog, type ModuleGroup, type PermissionModuleDef, type PermissionActionDef, type GeneralPermissionDef, type RoleDef, type RoleInput, } from './permissions-manager';
 export * from './org-runtime-context';
 export * from './org-runtime-provider';
 export * from './navigation-builder';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -33,7 +33,8 @@ export * from './slot';
 export * from './capability-gate';
 export { PermissionsProvider, useCan, usePermissionsActive, makeCan, capabilityForActionKey, modelCapability, gateTableMetadata, resolveRowActions, } from './permissions-context';
 export { useDynamicRowActions, } from './dynamic-row-actions';
-export { PermissionsManager, moduleActionCapability, moduleCapabilities, grantedCountForModule, capabilitySetsEqual, defaultActionIcon, normalizeCatalogGroups, flattenGroups, filterModuleGroups, groupModuleActions, } from './permissions-manager';
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field';
+export { PermissionsManager, moduleActionCapability, moduleCapabilities, grantedCountForModule, capabilitySetsEqual, defaultActionIcon, suggestRoleIcon, normalizeCatalogGroups, flattenGroups, filterModuleGroups, groupModuleActions, } from './permissions-manager';
 export * from './org-runtime-context';
 export * from './org-runtime-provider';
 export * from './navigation-builder';

package/dist/permissions-manager.d.ts

@@ -91,11 +91,14 @@ export interface RoleDef {
     label?: string;
     /** Accent color (hex) for the role chip. */
     color?: string;
+    /** Lucide PascalCase name (or image path) for the role chip. */
+    icon?: string;
 }
 export interface RoleInput {
     name: string;
     label?: string;
     color?: string;
+    icon?: string;
 }
 export interface PermissionsManagerProps {
     /** Loads the module×action universe + general flags (grouped or flat). */
@@ -136,6 +139,8 @@ export declare function grantedCountForModule(granted: ReadonlySet<string>, modu
 export declare function capabilitySetsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean;
 /** Default lucide icon when the manifest action doesn't declare one. */
 export declare function defaultActionIcon(actionKey: string, kind?: string): string;
+/** Suggest a Lucide icon from the role label (create-dialog default). */
+export declare function suggestRoleIcon(label: string): string;
 /**
  * Normalize whatever `loadModules` returned into the canonical grouped shape.
  *

package/dist/permissions-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"permissions-manager.d.ts","sourceRoot":"","sources":["../src/permissions-manager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"permissions-manager.d.ts","sourceRoot":"","sources":["../src/permissions-manager.tsx"],"names":[],"mappings":"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"}

package/dist/permissions-manager.js

@@ -30,6 +30,8 @@ import { toast } from 'sonner';
 import { cn } from '@asteby/metacore-ui/lib';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Popover, PopoverContent, PopoverTrigger, Separator, Skeleton, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
 import { DynamicIcon } from './dynamic-icon';
+import { IconPickerField } from './icon-picker-field';
+import { ColorPickerField, DEFAULT_ROLE_COLOR } from './color-picker-field';
 // ---------------------------------------------------------------------------
 // Pure helpers (exported for hosts/tests)
 // ---------------------------------------------------------------------------
@@ -133,17 +135,29 @@ function slugify(label) {
         .replace(/[^a-z0-9]+/g, '_')
         .replace(/^_+|_+$/g, '');
 }
-const ROLE_COLORS = [
-    '#ef4444',
-    '#f97316',
-    '#eab308',
-    '#22c55e',
-    '#06b6d4',
-    '#3b82f6',
-    '#8b5cf6',
-    '#ec4899',
-    '#6b7280',
-];
+/** Suggest a Lucide icon from the role label (create-dialog default). */
+export function suggestRoleIcon(label) {
+    const s = fold(label);
+    const rules = [
+        [/cajer|cash|teller|bank/, 'Banknote'],
+        [/vend|seller|sales|shop|mostrador/, 'ShoppingBag'],
+        [/mecanic|technic|wrench|taller/, 'Wrench'],
+        [/jefe|lead|manager|gerente|supervisor/, 'HardHat'],
+        [/almacen|ware|stock|invent/, 'Warehouse'],
+        [/compr|purch|buyer/, 'Truck'],
+        [/contad|account|ledger/, 'Calculator'],
+        [/nomina|payroll|sueldo/, 'Wallet'],
+        [/rh|hr|human|emplead|people/, 'Users'],
+        [/fleet|flota|vehic/, 'Car'],
+        [/admin|dueño|owner/, 'ShieldCheck'],
+        [/view|observa|lectura|read/, 'Eye'],
+    ];
+    for (const [re, icon] of rules) {
+        if (re.test(s))
+            return icon;
+    }
+    return 'Shield';
+}
 /**
  * Normalize whatever `loadModules` returned into the canonical grouped shape.
  *
@@ -237,7 +251,14 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
     const [moduleOpen, setModuleOpen] = React.useState(false);
     // Pending role switch while there are unsaved changes.
     const [pendingRoleId, setPendingRoleId] = React.useState(null);
-    const [roleDialog, setRoleDialog] = React.useState({ open: false, mode: 'create', label: '', color: ROLE_COLORS[5], grantAll: false });
+    const [roleDialog, setRoleDialog] = React.useState({
+        open: false,
+        mode: 'create',
+        label: '',
+        color: DEFAULT_ROLE_COLOR,
+        icon: 'Shield',
+        grantAll: false,
+    });
     const [roleSaving, setRoleSaving] = React.useState(false);
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     const [deleting, setDeleting] = React.useState(false);
@@ -389,6 +410,7 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
                     name: slugify(label),
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 });
                 const rs = await loadRoles();
                 setRoles(rs);
@@ -412,6 +434,7 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
                     name: activeRole.name,
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 });
                 await refreshRoles(activeRole.id);
                 toast.success('Rol actualizado');
@@ -451,7 +474,8 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
             open: true,
             mode: 'edit',
             label: activeRole.label || activeRole.name,
-            color: activeRole.color || ROLE_COLORS[5],
+            color: activeRole.color || DEFAULT_ROLE_COLOR,
+            icon: activeRole.icon || suggestRoleIcon(activeRole.label || activeRole.name),
             grantAll: false,
         });
     };
@@ -476,18 +500,21 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
                                     open: true,
                                     mode: 'create',
                                     label: '',
-                                    color: ROLE_COLORS[5],
+                                    color: DEFAULT_ROLE_COLOR,
+                                    icon: 'Shield',
                                     grantAll: false,
-                                }), children: [_jsx(Plus, { className: "mr-1.5 h-4 w-4" }), " Nuevo rol"] })), _jsxs(Button, { variant: "outline", onClick: () => setAllPermissions(true), disabled: checksDisabled || !allCatalogCapabilities.length, title: "Marca todos los permisos de todos los m\u00F3dulos", children: [_jsx(CheckCheck, { className: "mr-1.5 h-4 w-4" }), " Otorgar todo"] }), _jsxs(Button, { variant: "outline", onClick: () => setAllPermissions(false), disabled: checksDisabled || !draft?.size, title: "Quita todos los permisos del rol", children: [_jsx(Eraser, { className: "mr-1.5 h-4 w-4" }), " Quitar todo"] }), _jsxs(Button, { onClick: handleSave, disabled: !dirty || saving || !activeRole, className: "bg-emerald-600 text-white hover:bg-emerald-700", children: [_jsx(Save, { className: "mr-1.5 h-4 w-4" }), saving ? 'Guardando…' : 'Guardar permisos'] })] })] }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[340px_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "Rol" }), _jsx(CardDescription, { children: "Selecciona el rol a configurar." })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Popover, { open: roleOpen, onOpenChange: setRoleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": roleOpen, className: "min-w-0 flex-1 justify-between font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [activeRole && (_jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: {
-                                                                                        background: activeRole.color || '#6b7280',
-                                                                                    }, "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: activeRole
+                                }), children: [_jsx(Plus, { className: "mr-1.5 h-4 w-4" }), " Nuevo rol"] })), _jsxs(Button, { variant: "outline", onClick: () => setAllPermissions(true), disabled: checksDisabled || !allCatalogCapabilities.length, title: "Marca todos los permisos de todos los m\u00F3dulos", children: [_jsx(CheckCheck, { className: "mr-1.5 h-4 w-4" }), " Otorgar todo"] }), _jsxs(Button, { variant: "outline", onClick: () => setAllPermissions(false), disabled: checksDisabled || !draft?.size, title: "Quita todos los permisos del rol", children: [_jsx(Eraser, { className: "mr-1.5 h-4 w-4" }), " Quitar todo"] }), _jsxs(Button, { onClick: handleSave, disabled: !dirty || saving || !activeRole, className: "bg-emerald-600 text-white hover:bg-emerald-700", children: [_jsx(Save, { className: "mr-1.5 h-4 w-4" }), saving ? 'Guardando…' : 'Guardar permisos'] })] })] }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[340px_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "Rol" }), _jsx(CardDescription, { children: "Selecciona el rol a configurar." })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Popover, { open: roleOpen, onOpenChange: setRoleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": roleOpen, className: "min-w-0 flex-1 justify-between font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [activeRole && (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md", style: {
+                                                                                        background: `${activeRole.color || '#64748b'}22`,
+                                                                                        color: activeRole.color || '#64748b',
+                                                                                    }, "aria-hidden": "true", children: _jsx(DynamicIcon, { name: activeRole.icon || 'Shield', className: "h-3.5 w-3.5" }) })), _jsx("span", { className: "truncate", children: activeRole
                                                                                         ? activeRole.label || activeRole.name
                                                                                         : 'Seleccionar rol…' })] }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[280px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Buscar rol\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "Sin resultados." }), _jsx(CommandGroup, { children: (roles ?? []).map((role) => (_jsxs(CommandItem, { value: `${role.label || ''} ${role.name}`, onSelect: () => {
                                                                                             requestRoleSwitch(role.id);
                                                                                             setRoleOpen(false);
-                                                                                        }, children: [_jsx("span", { className: "mr-2 h-2 w-2 shrink-0 rounded-full", style: {
-                                                                                                    background: role.color || '#6b7280',
-                                                                                                }, "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: role.label || role.name }), role.id === activeRoleId && (_jsx(Check, { className: "ml-auto h-4 w-4" }))] }, role.id))) })] })] }) })] }), updateRole && (_jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0", "aria-label": "Editar rol", disabled: !activeRole, onClick: openEditRole, children: _jsx(Pencil, { className: "h-4 w-4" }) })), deleteRole && (_jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0 text-destructive hover:text-destructive", "aria-label": "Eliminar rol", disabled: !activeRole, onClick: () => setDeleteOpen(true), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), (general?.length ?? 0) > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold", children: "Permisos Generales" }), _jsx("div", { className: "flex flex-col gap-2", children: general.map((g) => (_jsx(CapabilityCheck, { checked: draft?.has(g.key) ?? false, disabled: checksDisabled, onToggle: () => toggleCapability(g.key), label: g.label, description: g.description }, g.key))) })] })] }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "M\u00F3dulo" }), _jsx(CardDescription, { children: "Elige el m\u00F3dulo cuyas acciones quieres configurar." })] }), _jsx(CardContent, { children: _jsxs(Popover, { open: moduleOpen, onOpenChange: setModuleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": moduleOpen, className: "w-full justify-between font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [activeModule && (_jsx(DynamicIcon, { name: activeModule.icon ||
+                                                                                        }, children: [_jsx("span", { className: "mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md", style: {
+                                                                                                    background: `${role.color || '#64748b'}22`,
+                                                                                                    color: role.color || '#64748b',
+                                                                                                }, "aria-hidden": "true", children: _jsx(DynamicIcon, { name: role.icon || 'Shield', className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "truncate", children: role.label || role.name }), role.id === activeRoleId && (_jsx(Check, { className: "ml-auto h-4 w-4" }))] }, role.id))) })] })] }) })] }), updateRole && (_jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0", "aria-label": "Editar rol", disabled: !activeRole, onClick: openEditRole, children: _jsx(Pencil, { className: "h-4 w-4" }) })), deleteRole && (_jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0 text-destructive hover:text-destructive", "aria-label": "Eliminar rol", disabled: !activeRole, onClick: () => setDeleteOpen(true), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), (general?.length ?? 0) > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold", children: "Permisos Generales" }), _jsx("div", { className: "flex flex-col gap-2", children: general.map((g) => (_jsx(CapabilityCheck, { checked: draft?.has(g.key) ?? false, disabled: checksDisabled, onToggle: () => toggleCapability(g.key), label: g.label, description: g.description }, g.key))) })] })] }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: "M\u00F3dulo" }), _jsx(CardDescription, { children: "Elige el m\u00F3dulo cuyas acciones quieres configurar." })] }), _jsx(CardContent, { children: _jsxs(Popover, { open: moduleOpen, onOpenChange: setModuleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": moduleOpen, className: "w-full justify-between font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [activeModule && (_jsx(DynamicIcon, { name: activeModule.icon ||
                                                                             (activeModule.kind === 'screen'
                                                                                 ? 'Eye'
                                                                                 : 'Square'), className: "h-4 w-4 shrink-0 opacity-70" })), _jsx("span", { className: "truncate", children: activeModule
@@ -506,9 +533,26 @@ export function PermissionsManager({ loadModules, loadRoles, loadRolePermissions
                                                         : 'Configura los permisos del módulo seleccionado.' })] }), activeRole && activeModule && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Badge, { variant: "secondary", className: "tabular-nums", children: [moduleGranted, "/", moduleTotal] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8", disabled: checksDisabled || moduleGranted === moduleTotal, onClick: () => setModuleAll(true), children: [_jsx(CheckCheck, { className: "mr-1.5 h-3.5 w-3.5" }), " Marcar todo"] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8", disabled: checksDisabled || moduleGranted === 0, onClick: () => setModuleAll(false), children: [_jsx(Eraser, { className: "mr-1.5 h-3.5 w-3.5" }), " Limpiar"] })] }))] }) }), _jsx(CardContent, { children: !activeRole ? (_jsx(EmptyHint, { text: "Selecciona un rol para configurar sus permisos." })) : loadingPerms ? (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { className: "h-14 w-full" }, i))) })) : !activeModule ? (_jsx(EmptyHint, { text: "Selecciona un m\u00F3dulo de la lista para ver sus acciones." })) : (_jsx(ModuleActionsPanel, { module: activeModule, draft: draft, checksDisabled: checksDisabled, onToggle: toggleCapability })) })] })] }), _jsx(AlertDialog, { open: pendingRoleId !== null, onOpenChange: (open) => !open && setPendingRoleId(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Cambios sin guardar" }), _jsx(AlertDialogDescription, { children: "Tienes cambios sin guardar en este rol. Si cambias de rol se descartar\u00E1n." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancelar" }), _jsx(AlertDialogAction, { onClick: () => {
                                         setActiveRoleId(pendingRoleId);
                                         setPendingRoleId(null);
-                                    }, children: "Descartar y cambiar" })] })] }) }), _jsx(Dialog, { open: roleDialog.open, onOpenChange: (open) => setRoleDialog((d) => ({ ...d, open })), children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol' }) }), _jsxs("div", { className: "flex flex-col gap-4 py-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "pm-role-name", children: "Nombre del rol" }), _jsx(Input, { id: "pm-role-name", value: roleDialog.label, placeholder: "Ej. Cajero", onChange: (e) => setRoleDialog((d) => ({ ...d, label: e.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Color" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ROLE_COLORS.map((c) => (_jsx("button", { type: "button", "aria-label": `Color ${c}`, onClick: () => setRoleDialog((d) => ({ ...d, color: c })), className: cn('h-7 w-7 rounded-full border-2 transition-transform', roleDialog.color === c
-                                                    ? 'scale-110 border-foreground'
-                                                    : 'border-transparent hover:scale-105'), style: { background: c } }, c))) })] }), roleDialog.mode === 'create' && (_jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-sm hover:bg-muted/40", children: [_jsx("input", { type: "checkbox", className: "mt-0.5 size-4 accent-emerald-600", checked: roleDialog.grantAll, onChange: (e) => setRoleDialog((d) => ({
+                                    }, children: "Descartar y cambiar" })] })] }) }), _jsx(Dialog, { open: roleDialog.open, onOpenChange: (open) => setRoleDialog((d) => ({ ...d, open })), children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol' }) }), _jsxs("div", { className: "flex flex-col gap-4 py-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "pm-role-name", children: "Nombre del rol" }), _jsx(Input, { id: "pm-role-name", value: roleDialog.label, placeholder: "Ej. Cajero", onChange: (e) => {
+                                                const label = e.target.value;
+                                                setRoleDialog((d) => ({
+                                                    ...d,
+                                                    label,
+                                                    icon: d.icon === suggestRoleIcon(d.label) ||
+                                                        d.icon === 'Shield' ||
+                                                        !d.icon
+                                                        ? suggestRoleIcon(label)
+                                                        : d.icon,
+                                                }));
+                                            } })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "\u00CDcono" }), _jsx(IconPickerField, { field: {
+                                                key: 'icon',
+                                                label: 'Ícono',
+                                                type: 'text',
+                                                widget: 'icon',
+                                            }, value: roleDialog.icon, onChange: (v) => setRoleDialog((d) => ({
+                                                ...d,
+                                                icon: typeof v === 'string' && v ? v : 'Shield',
+                                            })) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Color" }), _jsx(ColorPickerField, { "aria-label": "Color del rol", value: roleDialog.color, onChange: (color) => setRoleDialog((d) => ({ ...d, color })) })] }), roleDialog.mode === 'create' && (_jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-sm hover:bg-muted/40", children: [_jsx("input", { type: "checkbox", className: "mt-0.5 size-4 accent-emerald-600", checked: roleDialog.grantAll, onChange: (e) => setRoleDialog((d) => ({
                                                 ...d,
                                                 grantAll: e.target.checked,
                                             })) }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: "Otorgar todos los permisos" }), _jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: "Acceso completo a todos los m\u00F3dulos del cat\u00E1logo (como un admin). Puedes quitar permisos despu\u00E9s." })] })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setRoleDialog((d) => ({ ...d, open: false })), disabled: roleSaving, children: "Cancelar" }), _jsx(Button, { onClick: handleRoleSubmit, disabled: roleSaving || !roleDialog.label.trim(), children: roleSaving

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "35.0.0",
+  "version": "36.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.6.0",
-    "@asteby/metacore-ui": "^2.16.0"
+    "@asteby/metacore-ui": "^2.17.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.6.0",
-    "@asteby/metacore-ui": "2.16.0"
+    "@asteby/metacore-ui": "2.17.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/color-picker-field.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeHex, DEFAULT_ROLE_COLOR } from '../color-picker-field'
+
+describe('normalizeHex', () => {
+    it('accepts #rgb and expands', () => {
+        expect(normalizeHex('#0af')).toBe('#00aaff')
+    })
+    it('lowercases #rrggbb', () => {
+        expect(normalizeHex('#3B82F6')).toBe('#3b82f6')
+    })
+    it('rejects garbage', () => {
+        expect(normalizeHex('blue')).toBe('')
+        expect(normalizeHex('#gg0000')).toBe('')
+    })
+    it('default constant is valid', () => {
+        expect(normalizeHex(DEFAULT_ROLE_COLOR)).toBe('#3b82f6')
+    })
+})

package/src/color-picker-field.tsx

@@ -0,0 +1,296 @@
+// ColorPickerField — modern popover color control (SV plane + hue + hex).
+// Used by PermissionsManager role dialog and DynamicForm `type: "color"`.
+// Value is always a #rrggbb string (empty → falls back to DEFAULT_HEX visually).
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Pipette } from 'lucide-react'
+import { cn } from '@asteby/metacore-ui/lib'
+import {
+    Button,
+    Input,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@asteby/metacore-ui/primitives'
+
+export const DEFAULT_ROLE_COLOR = '#3b82f6'
+
+export interface ColorPickerFieldProps {
+    value?: string
+    onChange: (hex: string) => void
+    /** Optional label for a11y on the trigger. */
+    'aria-label'?: string
+    className?: string
+    disabled?: boolean
+}
+
+type HSV = { h: number; s: number; v: number }
+
+function clamp(n: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, n))
+}
+
+/** Normalize to #rrggbb or '' if invalid. */
+export function normalizeHex(raw: unknown): string {
+    if (typeof raw !== 'string') return ''
+    let s = raw.trim()
+    if (!s) return ''
+    if (s[0] !== '#') s = `#${s}`
+    if (/^#[0-9a-fA-F]{3}$/.test(s)) {
+        const r = s[1],
+            g = s[2],
+            b = s[3]
+        s = `#${r}${r}${g}${g}${b}${b}`
+    }
+    if (!/^#[0-9a-fA-F]{6}$/.test(s)) return ''
+    return s.toLowerCase()
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const n = normalizeHex(hex)
+    if (!n) return null
+    return {
+        r: parseInt(n.slice(1, 3), 16),
+        g: parseInt(n.slice(3, 5), 16),
+        b: parseInt(n.slice(5, 7), 16),
+    }
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+    const h = (n: number) =>
+        clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0')
+    return `#${h(r)}${h(g)}${h(b)}`
+}
+
+function rgbToHsv(r: number, g: number, b: number): HSV {
+    r /= 255
+    g /= 255
+    b /= 255
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const d = max - min
+    let h = 0
+    if (d !== 0) {
+        if (max === r) h = ((g - b) / d) % 6
+        else if (max === g) h = (b - r) / d + 2
+        else h = (r - g) / d + 4
+        h *= 60
+        if (h < 0) h += 360
+    }
+    const s = max === 0 ? 0 : d / max
+    return { h, s, v: max }
+}
+
+function hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let rp = 0,
+        gp = 0,
+        bp = 0
+    if (h < 60) [rp, gp, bp] = [c, x, 0]
+    else if (h < 120) [rp, gp, bp] = [x, c, 0]
+    else if (h < 180) [rp, gp, bp] = [0, c, x]
+    else if (h < 240) [rp, gp, bp] = [0, x, c]
+    else if (h < 300) [rp, gp, bp] = [x, 0, c]
+    else [rp, gp, bp] = [c, 0, x]
+    return {
+        r: (rp + m) * 255,
+        g: (gp + m) * 255,
+        b: (bp + m) * 255,
+    }
+}
+
+function hexToHsv(hex: string): HSV {
+    const rgb = hexToRgb(hex) || hexToRgb(DEFAULT_ROLE_COLOR)!
+    return rgbToHsv(rgb.r, rgb.g, rgb.b)
+}
+
+function hsvToHex(hsv: HSV): string {
+    const { r, g, b } = hsvToRgb(hsv.h, hsv.s, hsv.v)
+    return rgbToHex(r, g, b)
+}
+
+function hueCss(h: number): string {
+    const { r, g, b } = hsvToRgb(h, 1, 1)
+    return rgbToHex(r, g, b)
+}
+
+export function ColorPickerField({
+    value,
+    onChange,
+    'aria-label': ariaLabel = 'Color',
+    className,
+    disabled,
+}: ColorPickerFieldProps) {
+    const hex = normalizeHex(value) || DEFAULT_ROLE_COLOR
+    const [open, setOpen] = useState(false)
+    const [hsv, setHsv] = useState<HSV>(() => hexToHsv(hex))
+    const [hexDraft, setHexDraft] = useState(hex)
+    const svRef = useRef<HTMLDivElement>(null)
+    const dragging = useRef(false)
+
+    // Sync from external value when popover closed (or first open).
+    useEffect(() => {
+        if (dragging.current) return
+        const next = normalizeHex(value) || DEFAULT_ROLE_COLOR
+        setHsv(hexToHsv(next))
+        setHexDraft(next)
+    }, [value, open])
+
+    const commit = useCallback(
+        (next: HSV) => {
+            setHsv(next)
+            const out = hsvToHex(next)
+            setHexDraft(out)
+            onChange(out)
+        },
+        [onChange],
+    )
+
+    const setFromPointer = useCallback(
+        (clientX: number, clientY: number) => {
+            const el = svRef.current
+            if (!el) return
+            const rect = el.getBoundingClientRect()
+            const s = clamp((clientX - rect.left) / rect.width, 0, 1)
+            const v = clamp(1 - (clientY - rect.top) / rect.height, 0, 1)
+            commit({ ...hsv, s, v })
+        },
+        [commit, hsv],
+    )
+
+    useEffect(() => {
+        if (!open) return
+        const onMove = (e: PointerEvent) => {
+            if (!dragging.current) return
+            setFromPointer(e.clientX, e.clientY)
+        }
+        const onUp = () => {
+            dragging.current = false
+        }
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+        return () => {
+            window.removeEventListener('pointermove', onMove)
+            window.removeEventListener('pointerup', onUp)
+        }
+    }, [open, setFromPointer])
+
+    const svStyle = useMemo(
+        () => ({
+            background: `
+        linear-gradient(to top, #000, transparent),
+        linear-gradient(to right, #fff, ${hueCss(hsv.h)})
+      `,
+        }),
+        [hsv.h],
+    )
+
+    const applyHexDraft = () => {
+        const n = normalizeHex(hexDraft)
+        if (!n) {
+            setHexDraft(hsvToHex(hsv))
+            return
+        }
+        setHsv(hexToHsv(n))
+        setHexDraft(n)
+        onChange(n)
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    disabled={disabled}
+                    aria-label={ariaLabel}
+                    className={cn(
+                        'h-10 w-full justify-start gap-3 px-2.5 font-normal',
+                        className,
+                    )}
+                >
+                    <span
+                        className="h-6 w-6 shrink-0 rounded-md border border-black/10 shadow-sm ring-1 ring-black/5 dark:border-white/10"
+                        style={{ background: hex }}
+                        aria-hidden
+                    />
+                    <span className="font-mono text-sm uppercase tracking-wide text-foreground">
+                        {hex}
+                    </span>
+                    <Pipette className="ml-auto h-3.5 w-3.5 text-muted-foreground" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[260px] p-3" align="start">
+                <div className="flex flex-col gap-3">
+                    <div
+                        ref={svRef}
+                        role="slider"
+                        aria-label="Saturación y brillo"
+                        tabIndex={0}
+                        className="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-lg border border-border/60"
+                        style={svStyle}
+                        onPointerDown={(e) => {
+                            dragging.current = true
+                            ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
+                            setFromPointer(e.clientX, e.clientY)
+                        }}
+                    >
+                        <span
+                            className="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md ring-1 ring-black/30"
+                            style={{
+                                left: `${hsv.s * 100}%`,
+                                top: `${(1 - hsv.v) * 100}%`,
+                                background: hsvToHex(hsv),
+                            }}
+                        />
+                    </div>
+
+                    <div className="flex flex-col gap-1.5">
+                        <label className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            Tono
+                        </label>
+                        <input
+                            type="range"
+                            min={0}
+                            max={360}
+                            step={1}
+                            value={Math.round(hsv.h)}
+                            aria-label="Tono"
+                            onChange={(e) =>
+                                commit({ ...hsv, h: Number(e.target.value) })
+                            }
+                            className="h-3 w-full cursor-pointer appearance-none rounded-full"
+                            style={{
+                                background:
+                                    'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)',
+                            }}
+                        />
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <span
+                            className="h-9 w-9 shrink-0 rounded-md border border-black/10 shadow-inner ring-1 ring-black/5"
+                            style={{ background: hsvToHex(hsv) }}
+                            aria-hidden
+                        />
+                        <Input
+                            value={hexDraft}
+                            spellCheck={false}
+                            aria-label="Hexadecimal"
+                            className="h-9 font-mono uppercase"
+                            onChange={(e) => setHexDraft(e.target.value)}
+                            onBlur={applyHexDraft}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault()
+                                    applyHexDraft()
+                                }
+                            }}
+                        />
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/src/dynamic-form.tsx

@@ -35,6 +35,7 @@ import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
 import { IconPickerField } from './icon-picker-field'
+import { ColorPickerField } from './color-picker-field'
 
 export { buildZodSchema, resolveWidget }
 export { DynamicLineItems } from './dynamic-line-items'
@@ -42,6 +43,7 @@ export { DynamicSelectField } from './dynamic-select-field'
 export { DynamicDateField } from './dynamic-date-field'
 export { UploadField } from './upload-field'
 export { IconPickerField } from './icon-picker-field'
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field'
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -399,7 +401,13 @@ function FieldRenderer({
             // / future MDX editor pick it up without breaking the contract.
             return <Textarea id={field.key} data-widget="richtext" value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
         case 'color':
-            return <Input id={field.key} type="color" value={value || '#000000'} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
+            return (
+                <ColorPickerField
+                    aria-label={field.label || field.key}
+                    value={typeof value === 'string' ? value : ''}
+                    onChange={onChange}
+                />
+            )
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>

package/src/index.ts

@@ -178,6 +178,7 @@ export {
     type UseDynamicRowActionsParams,
     type DynamicRowActions,
 } from './dynamic-row-actions'
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field'
 export {
     PermissionsManager,
     moduleActionCapability,
@@ -185,6 +186,7 @@ export {
     grantedCountForModule,
     capabilitySetsEqual,
     defaultActionIcon,
+    suggestRoleIcon,
     normalizeCatalogGroups,
     flattenGroups,
     filterModuleGroups,

package/src/permissions-manager.tsx

@@ -79,6 +79,9 @@ import {
     CollapsibleTrigger,
 } from '@asteby/metacore-ui/primitives'
 import { DynamicIcon } from './dynamic-icon'
+import { IconPickerField } from './icon-picker-field'
+import { ColorPickerField, DEFAULT_ROLE_COLOR } from './color-picker-field'
+import type { ActionFieldDef } from './types'
 
 // ---------------------------------------------------------------------------
 // Types (mirror of `GET /api/permissions/modules` + the host sidebar nav)
@@ -183,12 +186,15 @@ export interface RoleDef {
     label?: string
     /** Accent color (hex) for the role chip. */
     color?: string
+    /** Lucide PascalCase name (or image path) for the role chip. */
+    icon?: string
 }
 
 export interface RoleInput {
     name: string
     label?: string
     color?: string
+    icon?: string
 }
 
 export interface PermissionsManagerProps {
@@ -330,17 +336,28 @@ function slugify(label: string): string {
         .replace(/^_+|_+$/g, '')
 }
 
-const ROLE_COLORS = [
-    '#ef4444',
-    '#f97316',
-    '#eab308',
-    '#22c55e',
-    '#06b6d4',
-    '#3b82f6',
-    '#8b5cf6',
-    '#ec4899',
-    '#6b7280',
-]
+/** Suggest a Lucide icon from the role label (create-dialog default). */
+export function suggestRoleIcon(label: string): string {
+    const s = fold(label)
+    const rules: Array<[RegExp, string]> = [
+        [/cajer|cash|teller|bank/, 'Banknote'],
+        [/vend|seller|sales|shop|mostrador/, 'ShoppingBag'],
+        [/mecanic|technic|wrench|taller/, 'Wrench'],
+        [/jefe|lead|manager|gerente|supervisor/, 'HardHat'],
+        [/almacen|ware|stock|invent/, 'Warehouse'],
+        [/compr|purch|buyer/, 'Truck'],
+        [/contad|account|ledger/, 'Calculator'],
+        [/nomina|payroll|sueldo/, 'Wallet'],
+        [/rh|hr|human|emplead|people/, 'Users'],
+        [/fleet|flota|vehic/, 'Car'],
+        [/admin|dueño|owner/, 'ShieldCheck'],
+        [/view|observa|lectura|read/, 'Eye'],
+    ]
+    for (const [re, icon] of rules) {
+        if (re.test(s)) return icon
+    }
+    return 'Shield'
+}
 
 /**
  * Normalize whatever `loadModules` returned into the canonical grouped shape.
@@ -548,8 +565,16 @@ export function PermissionsManager({
         mode: 'create' | 'edit'
         label: string
         color: string
+        icon: string
         grantAll: boolean
-    }>({ open: false, mode: 'create', label: '', color: ROLE_COLORS[5], grantAll: false })
+    }>({
+        open: false,
+        mode: 'create',
+        label: '',
+        color: DEFAULT_ROLE_COLOR,
+        icon: 'Shield',
+        grantAll: false,
+    })
     const [roleSaving, setRoleSaving] = React.useState(false)
     const [deleteOpen, setDeleteOpen] = React.useState(false)
     const [deleting, setDeleting] = React.useState(false)
@@ -711,6 +736,7 @@ export function PermissionsManager({
                     name: slugify(label),
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 })
                 const rs = await loadRoles()
                 setRoles(rs)
@@ -732,6 +758,7 @@ export function PermissionsManager({
                     name: activeRole.name,
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 })
                 await refreshRoles(activeRole.id)
                 toast.success('Rol actualizado')
@@ -769,7 +796,8 @@ export function PermissionsManager({
             open: true,
             mode: 'edit',
             label: activeRole.label || activeRole.name,
-            color: activeRole.color || ROLE_COLORS[5],
+            color: activeRole.color || DEFAULT_ROLE_COLOR,
+            icon: activeRole.icon || suggestRoleIcon(activeRole.label || activeRole.name),
             grantAll: false,
         })
     }
@@ -843,7 +871,8 @@ export function PermissionsManager({
                                     open: true,
                                     mode: 'create',
                                     label: '',
-                                    color: ROLE_COLORS[5],
+                                    color: DEFAULT_ROLE_COLOR,
+                                    icon: 'Shield',
                                     grantAll: false,
                                 })
                             }
@@ -901,12 +930,18 @@ export function PermissionsManager({
                                             <span className="flex min-w-0 items-center gap-2">
                                                 {activeRole && (
                                                     <span
-                                                        className="h-2.5 w-2.5 shrink-0 rounded-full"
+                                                        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                         style={{
-                                                            background: activeRole.color || '#6b7280',
+                                                            background: `${activeRole.color || '#64748b'}22`,
+                                                            color: activeRole.color || '#64748b',
                                                         }}
                                                         aria-hidden="true"
-                                                    />
+                                                    >
+                                                        <DynamicIcon
+                                                            name={activeRole.icon || 'Shield'}
+                                                            className="h-3.5 w-3.5"
+                                                        />
+                                                    </span>
                                                 )}
                                                 <span className="truncate">
                                                     {activeRole
@@ -933,12 +968,18 @@ export function PermissionsManager({
                                                             }}
                                                         >
                                                             <span
-                                                                className="mr-2 h-2 w-2 shrink-0 rounded-full"
+                                                                className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                                 style={{
-                                                                    background: role.color || '#6b7280',
+                                                                    background: `${role.color || '#64748b'}22`,
+                                                                    color: role.color || '#64748b',
                                                                 }}
                                                                 aria-hidden="true"
-                                                            />
+                                                            >
+                                                                <DynamicIcon
+                                                                    name={role.icon || 'Shield'}
+                                                                    className="h-3.5 w-3.5"
+                                                                />
+                                                            </span>
                                                             <span className="truncate">
                                                                 {role.label || role.name}
                                                             </span>
@@ -1224,30 +1265,48 @@ export function PermissionsManager({
                                 id="pm-role-name"
                                 value={roleDialog.label}
                                 placeholder="Ej. Cajero"
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    setRoleDialog((d) => ({ ...d, label: e.target.value }))
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    const label = e.target.value
+                                    setRoleDialog((d) => ({
+                                        ...d,
+                                        label,
+                                        icon:
+                                            d.icon === suggestRoleIcon(d.label) ||
+                                            d.icon === 'Shield' ||
+                                            !d.icon
+                                                ? suggestRoleIcon(label)
+                                                : d.icon,
+                                    }))
+                                }}
+                            />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                            <Label>Ícono</Label>
+                            <IconPickerField
+                                field={
+                                    {
+                                        key: 'icon',
+                                        label: 'Ícono',
+                                        type: 'text',
+                                        widget: 'icon',
+                                    } as ActionFieldDef
+                                }
+                                value={roleDialog.icon}
+                                onChange={(v) =>
+                                    setRoleDialog((d) => ({
+                                        ...d,
+                                        icon: typeof v === 'string' && v ? v : 'Shield',
+                                    }))
                                 }
                             />
                         </div>
                         <div className="flex flex-col gap-2">
                             <Label>Color</Label>
-                            <div className="flex flex-wrap gap-2">
-                                {ROLE_COLORS.map((c) => (
-                                    <button
-                                        key={c}
-                                        type="button"
-                                        aria-label={`Color ${c}`}
-                                        onClick={() => setRoleDialog((d) => ({ ...d, color: c }))}
-                                        className={cn(
-                                            'h-7 w-7 rounded-full border-2 transition-transform',
-                                            roleDialog.color === c
-                                                ? 'scale-110 border-foreground'
-                                                : 'border-transparent hover:scale-105',
-                                        )}
-                                        style={{ background: c }}
-                                    />
-                                ))}
-                            </div>
+                            <ColorPickerField
+                                aria-label="Color del rol"
+                                value={roleDialog.color}
+                                onChange={(color) => setRoleDialog((d) => ({ ...d, color }))}
+                            />
                         </div>
                         {roleDialog.mode === 'create' && (
                             <label className="flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-sm hover:bg-muted/40">