@jsswift/ui 1.0.45 → 1.0.47

package/src/20-display-content.js

@@ -1,48 +1,48 @@
   UI.Icon = (...args) => {
-    let props = {};
-    let children = [];
-    let name = "home";
-    let hasName = false;
-    const a = args[0];
-    const b = args[1];
-    const isPlainObject = (v) => v && typeof v === "object" && !v.nodeType && !Array.isArray(v) && !(v instanceof Function);
-
-    if (typeof a === "string") {
-      name = a;
-      hasName = true;
-      if (isPlainObject(b)) {
-        props = b;
-        if (args.length > 2) children = args.slice(2);
-      } else if (args.length > 1) {
-        children = args.slice(1);
-      }
-    } else if (isPlainObject(a)) {
-      props = a;
-      if (a.name != null) {
-        name = a.name;
-        hasName = true;
-      }
-      if (args.length > 1) children = args.slice(1);
-    } else if (args.length) {
-      children = args;
-    }
-
-    if (!hasName && children.length) {
-      name = children.length === 1 ? children[0] : children;
-    }
-    applyCommonProps(props);
-
-    const slots = props.slots || {};
-
-    const size = uiUnwrap(props.size);
-    const color = uiUnwrap(props.color);
-    const isFill = String(name).endsWith("-fill");
-    const style = { ...(props.style || {}) };
-    const sizeClass = uiComputed(props.size, () => {
-      const v = uiUnwrap(props.size);
-      return (typeof v === "string" && sizeMap[v]) ? v : "";
-    });
-
+    let props = {};
+    let children = [];
+    let name = "home";
+    let hasName = false;
+    const a = args[0];
+    const b = args[1];
+    const isPlainObject = (v) => v && typeof v === "object" && !v.nodeType && !Array.isArray(v) && !(v instanceof Function);
+
+    if (typeof a === "string") {
+      name = a;
+      hasName = true;
+      if (isPlainObject(b)) {
+        props = b;
+        if (args.length > 2) children = args.slice(2);
+      } else if (args.length > 1) {
+        children = args.slice(1);
+      }
+    } else if (isPlainObject(a)) {
+      props = a;
+      if (a.name != null) {
+        name = a.name;
+        hasName = true;
+      }
+      if (args.length > 1) children = args.slice(1);
+    } else if (args.length) {
+      children = args;
+    }
+
+    if (!hasName && children.length) {
+      name = children.length === 1 ? children[0] : children;
+    }
+    applyCommonProps(props);
+
+    const slots = props.slots || {};
+
+    const size = uiUnwrap(props.size);
+    const color = uiUnwrap(props.color);
+    const isFill = String(name).endsWith("-fill");
+    const style = { ...(props.style || {}) };
+    const sizeClass = uiComputed(props.size, () => {
+      const v = uiUnwrap(props.size);
+      return (typeof v === "string" && sizeMap[v]) ? v : "";
+    });
+
     const hasVisualSurface = !!(props.color || props.clickable || props.border || props.glossy || props.glow || props.glass || props.shadow || props.outline || props.gradient || props.textGradient || props.lightShadow || props.radius);
     const builtInSpriteIcons = {
       "chevron-down": {
@@ -86,7 +86,7 @@
       setPropertyProps(icon, props);
       return wrapIcon(icon);
     }
-
+
     const nameStr = String(name);
     const useHref = nameStr.includes("#") ? nameStr : "";
     let icon = null;
@@ -107,422 +107,351 @@
         );
       if (isFill) svg.style.fill = "currentColor";
       icon = _.span({ ...p, "data-icon": nameStr }, svg, ...children);
-    } else {
-      icon = _.span({ ...p, "data-icon": nameStr }, nameStr, ...children);
-    }
-
-    if (size != null) {
-      let v = size;
-      if (JSswift.uiSizes.includes(size)) {
-        v = `var(--cms-icon-size-${size})`;
-      }
-      v = typeof v === "number" ? v + "px" : String(v);
-      icon.style.setProperty("--set-icon-size", v);
-    }
+    } else {
+      icon = _.span({ ...p, "data-icon": nameStr }, nameStr, ...children);
+    }
+
+    if (size != null) {
+      let v = size;
+      if (JSswift.uiSizes.includes(size)) {
+        v = `var(--cms-icon-size-${size})`;
+      }
+      v = typeof v === "number" ? v + "px" : String(v);
+      icon.style.setProperty("--set-icon-size", v);
+    }
 
     setPropertyProps(icon, props);
     return wrapIcon(icon);
   };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Icon = {
-      signature: "UI.Icon(name) | UI.Icon(props) | UI.Icon(props, ...children)",
-      props: {
-        name: "string|Node|Function",
-        size: "number|string",
-        color: "string",
-        shadow: "boolean|string",
-        lightShadow: "boolean",
-        clickable: "boolean",
-        border: "boolean",
-        glossy: "boolean",
-        glow: "boolean",
-        glass: "boolean",
-        gradient: "boolean|number",
-        outline: "boolean",
-        textGradient: "boolean",
-        radius: "number|string",
-        spriteUrl: "string",
-        tooltip: "String|Node|Function|Object",
-        tooltipProps: "object",
-        slots: "{ default? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        default: "Custom icon content"
-      },
-      returns: "HTMLSpanElement",
-      description: "Sprite- or text-based icon with configurable size/color."
-    };
-  }
-  // Esempio: JSswift.ui.Icon({ name: "home", size: 18 })
-
-  UI.Badge = (...args) => {
-    const { props, children } = JSswift.uiNormalizeArgs(args);
-    const slots = props.slots || {};
-    const sizeClass = uiComputed(props.size, () => {
-      const v = uiUnwrap(props.size);
-      return (typeof v === "string" && sizeMap[v]) ? `cms-size-${v}` : "";
-    });
-    const cls = uiClass([
-      "cms-clear-set",
-      "cms-badge",
-      "cms-singularity",
-      sizeClass,
-      uiWhen(props.outline, "outline"),
-      props.class
-    ]);
-    const p = JSswift.omit(props, [
-      "label",
-      "color",
-      "outline",
-      "size",
-      "slots",
-      "notification",
-      "iconSize",
-      "topLeft",
-      "topRight",
-      "bottomLeft",
-      "bottomRight",
-      "left",
-      "right"
-    ]);
-    p.class = cls;
-
-    const style = {
-      ...(props.style || {})
-    };
-    if (props.size) {
-      const size = uiUnwrap(props.size);
-      if (!(typeof size === "string" && sizeMap[size])) {
-        style.fontSize = toCssSize(props.size);
-      }
-    }
-    p.style = style;
-
-    const renderNamedSlotToArray = (names, ctx, fallback) => {
-      const list = Array.isArray(names) ? names : [names];
-      for (const name of list) {
-        if (JSswift.ui.getSlot(slots, name) != null) {
-          return renderSlotToArray(slots, name, ctx, fallback);
-        }
-      }
-      return fallback == null || fallback === false || fallback === ""
-        ? []
-        : renderSlotToArray(null, "default", ctx, fallback);
-    };
-
-    const resolveIconSize = () => {
-      const raw = uiUnwrap(props.iconSize ?? props.size);
-      if (typeof raw === "number") return Math.max(10, Math.round(raw * 0.85));
-      if (typeof raw === "string") {
-        const map = {
-          xxs: 10,
-          xs: 11,
-          sm: 12,
-          md: 13,
-          lg: 14,
-          xl: 16,
-          xxl: 18,
-          xxxl: 20
-        };
-        return map[raw] || 14;
-      }
-      return 14;
-    };
-
-    const resolveIconFallback = (source, as) => {
-      const raw = uiUnwrap(source);
-      if (raw == null || raw === false || raw === "") return null;
-      if (typeof raw === "string") return UI.Icon({ name: raw, size: resolveIconSize() });
-      return JSswift.ui.slot(raw, { as });
-    };
-
-    const renderIconAnchor = (slotNames, propKey, position) => _.dynamic(() => {
-      const iconFallback = resolveIconFallback(props[propKey], position);
-      const nodes = renderNamedSlotToArray(slotNames, { position }, iconFallback);
-      if (!nodes.length) return null;
-      return _.span({
-        class: `cms-badge-anchor cms-badge-anchor-${position}`,
-        "data-badge-slot": position
-      }, ...nodes);
-    });
-
-    const content = _.dynamic(() => {
-      const labelFallback = uiUnwrap(props.label);
-      let labelNodes = renderNamedSlotToArray(["label"], {}, labelFallback);
-      if (!labelNodes.length) labelNodes = renderNamedSlotToArray(["default"], {}, children);
-      return _.span(
-        { class: "cms-badge-content" },
-        _.span({ class: "cms-badge-label" }, ...(labelNodes.length ? labelNodes : [""]))
-      );
-    });
-
-    const notification = _.dynamic(() => {
-      const rawNotification = uiUnwrap(props.notification);
-      const fallback = rawNotification == null || rawNotification === false || rawNotification === ""
-        ? null
-        : rawNotification;
-      const nodes = renderNamedSlotToArray(["notification"], { notification: rawNotification }, fallback);
-      if (!nodes.length) return null;
-      return _.span({
-        class: "cms-badge-notification",
-        "data-badge-slot": "notification",
-        "aria-label": typeof rawNotification === "number" ? `${rawNotification} notifications` : null
-      }, ...nodes);
-    });
-
-    const wrap = _.span(
-      renderIconAnchor(["left"], "left", "left"),
-      renderIconAnchor(["centerLeft", "center-left"], "centerLeft", "center-left"),
-      p,
-      content,
-      renderIconAnchor(["topLeft", "top-left"], "topLeft", "top-left"),
-      renderIconAnchor(["topRight", "top-right"], "topRight", "top-right"),
-      renderIconAnchor(["bottomLeft", "bottom-left"], "bottomLeft", "bottom-left"),
-      renderIconAnchor(["bottomRight", "bottom-right"], "bottomRight", "bottom-right"),
-      renderIconAnchor(["centerRight", "center-right"], "centerRight", "center-right"),
-      renderIconAnchor(["right"], "right", "right"),
-      notification
-    );
-    // se esiste un props con left o right
-    if (props.topLeft || props.centerLeft || props.bottomLeft) {
-      wrap.style.setProperty("padding-left", "15px");
-    }
-    if (props.topRight || props.centerRight || props.bottomRight) {
-      wrap.style.setProperty("padding-right", "15px");
-    }
-
-    setPropertyProps(wrap, props);
-    return wrap;
-  };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Badge = {
-      signature: "UI.Badge(...children) | UI.Badge(props, ...children)",
-      props: {
-        label: "String|Node|Function|Array",
-        color: "string",
-        size: "string|number",
-        outline: "boolean",
-        notification: "string|number|Node|Function|[get,set] signal",
-        iconSize: "string|number",
-        topLeft: "String|Node|Function|Array",
-        topRight: "String|Node|Function|Array",
-        bottomLeft: "String|Node|Function|Array",
-        bottomRight: "String|Node|Function|Array",
-        centerLeft: "String|Node|Function|Array",
-        centerRight: "String|Node|Function|Array",
-        left: "String|Node|Function|Array",
-        right: "String|Node|Function|Array",
-        slots: "{ label?, default?, notification?, topLeft?, topRight?, bottomLeft?, bottomRight?, left?, right? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        label: "Badge label content",
-        default: "Fallback content",
-        notification: "Notification badge content",
-        topLeft: "Icon anchored top-left",
-        topRight: "Icon anchored top-right",
-        bottomLeft: "Icon anchored bottom-left",
-        bottomRight: "Icon anchored bottom-right",
-        centerLeft: "Icon anchored center-left",
-        centerRight: "Icon anchored center-right",
-        left: "Icon anchored left",
-        right: "Icon anchored right"
-      },
-      returns: "HTMLSpanElement",
-      description: "Inline badge with reactive notification and 6 positionable icon slots."
-    };
-  }
-  // Esempio: JSswift.ui.Badge({ label: "New" })
-
-  const avatarGetInitials = (value) => {
-    if (value == null || value === false) return "";
-    const text = String(value)
-      .replace(/[._-]+/g, " ")
-      .replace(/\s+/g, " ")
-      .trim();
-    if (!text) return "";
-    const words = text.split(" ").filter(Boolean);
-    if (!words.length) return "";
-    if (words.length === 1) {
-      const token = words[0].replace(/[^a-z0-9]/gi, "");
-      return token.slice(0, 2).toUpperCase();
-    }
-    return words.slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
-  };
-
-  const avatarStatusState = (value, fallback) => {
-    const raw = value == null || value === true ? fallback : value;
-    if (raw == null || raw === false) return normalizeState(fallback);
-    const token = String(raw).toLowerCase();
-    if (token === "online" || token === "available" || token === "active") return "success";
-    if (token === "away" || token === "pending") return "warning";
-    if (token === "busy" || token === "dnd" || token === "blocked") return "danger";
-    if (token === "offline" || token === "idle") return "secondary";
-    return normalizeState(token) || normalizeState(fallback);
-  };
-
-  const avatarPrimitiveBadge = (value, className = "cms-avatar-badge") => {
-    if (value == null || value === false) return null;
-    if (value instanceof Node || Array.isArray(value)) return value;
-    if (typeof value === "function") return value;
-    if (value === true) return _.span({ class: className });
-    return _.span({ class: className }, String(value));
-  };
-
-  const avatarPrimitiveStatus = (value, color) => {
-    if (value == null || value === false) {
-      if (!color) return null;
-      const fallbackState = avatarStatusState(null, color);
-      return _.span({ class: uiClass(["cms-avatar-status", fallbackState ? `cms-state-${fallbackState}` : ""]) });
-    }
-    if (value instanceof Node || Array.isArray(value)) return value;
-    if (typeof value === "function") return value;
-    const state = avatarStatusState(value, color);
-    if (value === true || state) {
-      return _.span({ class: uiClass(["cms-avatar-status", state ? `cms-state-${state}` : ""]) });
-    }
-    return avatarPrimitiveBadge(value, "cms-avatar-badge");
-  };
-
-  const avatarRenderAnchor = (className, nodes) => {
-    if (!nodes || !nodes.length) return null;
-    return _.span({ class: uiClass(["cms-avatar-anchor", className]) }, ...nodes);
-  };
-
-  UI.Avatar = (...args) => {
-    const { props, children } = JSswift.uiNormalizeArgs(args);
-    const slots = props.slots || {};
-    const sizeClass = uiComputed(props.size, () => {
-      const v = uiUnwrap(props.size);
-      return (typeof v === "string" && JSswift.uiSizes?.includes(v)) ? `cms-size-${v}` : "";
-    });
-    const stateClass = uiComputed([props.color, props.state], () => {
-      const v = uiUnwrap(props.color) || uiUnwrap(props.state) || "";
-      const state = normalizeState(v);
-      return state ? `cms-state-${state}` : "";
-    });
-    const cls = uiClass([
-      "cms-clear-set",
-      "cms-avatar",
-      "cms-singularity",
-      sizeClass,
-      stateClass,
-      uiWhen(props.square, "cms-avatar-square"),
-      uiWhen(props.elevated, "elevated"),
-      props.class
-    ]);
-
-    const p = JSswift.omit(props, [
-      "src", "srcset", "srcSet", "sizes", "alt", "label", "name", "initials", "text",
-      "size", "fontSize", "textSize", "radius", "rounded", "square", "elevated",
-      "icon", "iconSize", "media", "fit", "badge", "notification", "status",
-      "statusColor", "presence", "topLeft", "topRight", "bottomLeft", "bottomRight",
-      "slots"
-    ]);
-    p.class = cls;
-
-    const style = { ...(props.style || {}) };
-    const sizeStyle = uiStyleValue(props.size, (value) => {
-      if (typeof value === "string" && JSswift.uiSizes?.includes(value)) return "";
-      return toCssSize(value);
-    }, "");
-    if (sizeStyle != null) {
-      style.width = sizeStyle;
-      style.height = sizeStyle;
-    }
-
-    const fontSizeValue = props.fontSize ?? props.textSize;
-    const fontSizeStyle = fontSizeValue != null
-      ? uiStyleValue(fontSizeValue, toCssSize)
-      : uiStyleValue(props.size, (value) => {
-        if (typeof value === "string" && JSswift.uiSizes?.includes(value)) return "";
-        return `clamp(11px, calc(${toCssSize(value)} * 0.34), 28px)`;
-      }, "");
-    if (fontSizeStyle != null) style.fontSize = fontSizeStyle;
-
-    const radiusStyle = uiStyleValue(props.radius, (value) => {
-      const normalized = normalizeRadius(value);
-      if (normalized === "xxxl") return "999px";
-      if (normalized) return `var(--cms-r-${normalized})`;
-      if (typeof value === "number") return `${value}px`;
-      return String(value);
-    });
-    if (radiusStyle != null) style["--set-border-radius"] = radiusStyle;
-    p.style = style;
-
-    const ctx = { props };
-    const altText = uiComputed([props.alt, props.label, props.name, props.text], () => {
-      const raw = uiUnwrap(props.alt) || uiUnwrap(props.label) || uiUnwrap(props.name) || uiUnwrap(props.text) || "avatar";
-      return String(raw);
-    });
-    const iconFallback = props.icon != null
-      ? (typeof props.icon === "string"
-        ? UI.Icon({ name: props.icon, size: props.iconSize || props.size || "sm" })
-        : JSswift.ui.slot(props.icon, { as: "icon" }))
-      : null;
-    const labelFallback = uiComputed([props.initials, props.text, props.label, props.name], () => {
-      const explicit = uiUnwrap(props.initials) ?? uiUnwrap(props.text);
-      if (explicit != null) return explicit;
-      const rawLabel = uiUnwrap(props.label) ?? uiUnwrap(props.name);
-      if (typeof rawLabel === "string") return avatarGetInitials(rawLabel);
-      return rawLabel;
-    });
-    const badgeFallback = avatarPrimitiveBadge(uiUnwrap(props.badge ?? props.notification));
-    const statusFallback = avatarPrimitiveStatus(
-      uiUnwrap(props.status ?? props.presence),
-      uiUnwrap(props.statusColor)
-    );
-
-    let mediaNodes = renderSlotToArray(slots, "media", ctx, props.media);
-    if (!mediaNodes.length && props.src) {
-      const imgProps = {
-        class: "cms-avatar-img",
-        src: props.src,
-        alt: altText,
-        sizes: props.sizes,
-        style: {}
-      };
-      if (props.srcset != null) imgProps.srcset = props.srcset;
-      if (props.srcSet != null) imgProps.srcset = props.srcSet;
-      const fitStyle = uiStyleValue(props.fit);
-      if (fitStyle != null) imgProps.style.objectFit = fitStyle;
-      mediaNodes = [_.img(imgProps)];
-    }
-
-    const defaultNodes = renderSlotToArray(slots, "default", ctx, children);
-    const fallbackNodes = renderSlotToArray(slots, "fallback", ctx, null);
-    const labelNodes = renderSlotToArray(slots, "label", ctx, labelFallback);
-    const iconNodes = renderSlotToArray(slots, "icon", ctx, iconFallback);
-    const mainNodes = mediaNodes.length
-      ? mediaNodes
-      : (defaultNodes.length
-        ? defaultNodes
-        : (fallbackNodes.length
-          ? fallbackNodes
-          : (labelNodes.length
-            ? labelNodes
-            : (iconNodes.length ? iconNodes : ["?"]))));
-
-    const bodyClass = mediaNodes.length ? "cms-avatar-media" : "cms-avatar-fallback";
-    const body = _.span({ class: "cms-avatar-body" },
-      _.span({ class: bodyClass }, ...mainNodes)
-    );
-
-    let topLeftNodes = renderSlotToArray(slots, "topLeft", ctx, props.topLeft);
-    let topRightNodes = renderSlotToArray(slots, "topRight", ctx, props.topRight);
-    let bottomLeftNodes = renderSlotToArray(slots, "bottomLeft", ctx, props.bottomLeft);
-    let bottomRightNodes = renderSlotToArray(slots, "bottomRight", ctx, props.bottomRight);
-    const badgeNodes = renderSlotToArray(slots, "badge", ctx, badgeFallback);
-    const statusNodes = renderSlotToArray(slots, "status", ctx, statusFallback);
-
-    if (!topRightNodes.length && badgeNodes.length) topRightNodes = badgeNodes;
-    if (!bottomRightNodes.length && statusNodes.length) bottomRightNodes = statusNodes;
-
+
+  // Esempio: JSswift.ui.Icon({ name: "home", size: 18 })
+
+  UI.Badge = (...args) => {
+    const { props, children } = JSswift.uiNormalizeArgs(args);
+    const slots = props.slots || {};
+    const sizeClass = uiComputed(props.size, () => {
+      const v = uiUnwrap(props.size);
+      return (typeof v === "string" && sizeMap[v]) ? `cms-size-${v}` : "";
+    });
+    const cls = uiClass([
+      "cms-clear-set",
+      "cms-badge",
+      "cms-singularity",
+      sizeClass,
+      uiWhen(props.outline, "outline"),
+      props.class
+    ]);
+    const p = JSswift.omit(props, [
+      "label",
+      "color",
+      "outline",
+      "size",
+      "slots",
+      "notification",
+      "iconSize",
+      "topLeft",
+      "topRight",
+      "bottomLeft",
+      "bottomRight",
+      "left",
+      "right"
+    ]);
+    p.class = cls;
+
+    const style = {
+      ...(props.style || {})
+    };
+    if (props.size) {
+      const size = uiUnwrap(props.size);
+      if (!(typeof size === "string" && sizeMap[size])) {
+        style.fontSize = toCssSize(props.size);
+      }
+    }
+    p.style = style;
+
+    const renderNamedSlotToArray = (names, ctx, fallback) => {
+      const list = Array.isArray(names) ? names : [names];
+      for (const name of list) {
+        if (JSswift.ui.getSlot(slots, name) != null) {
+          return renderSlotToArray(slots, name, ctx, fallback);
+        }
+      }
+      return fallback == null || fallback === false || fallback === ""
+        ? []
+        : renderSlotToArray(null, "default", ctx, fallback);
+    };
+
+    const resolveIconSize = () => {
+      const raw = uiUnwrap(props.iconSize ?? props.size);
+      if (typeof raw === "number") return Math.max(10, Math.round(raw * 0.85));
+      if (typeof raw === "string") {
+        const map = {
+          xxs: 10,
+          xs: 11,
+          sm: 12,
+          md: 13,
+          lg: 14,
+          xl: 16,
+          xxl: 18,
+          xxxl: 20
+        };
+        return map[raw] || 14;
+      }
+      return 14;
+    };
+
+    const resolveIconFallback = (source, as) => {
+      const raw = uiUnwrap(source);
+      if (raw == null || raw === false || raw === "") return null;
+      if (typeof raw === "string") return UI.Icon({ name: raw, size: resolveIconSize() });
+      return JSswift.ui.slot(raw, { as });
+    };
+
+    const renderIconAnchor = (slotNames, propKey, position) => _.dynamic(() => {
+      const iconFallback = resolveIconFallback(props[propKey], position);
+      const nodes = renderNamedSlotToArray(slotNames, { position }, iconFallback);
+      if (!nodes.length) return null;
+      return _.span({
+        class: `cms-badge-anchor cms-badge-anchor-${position}`,
+        "data-badge-slot": position
+      }, ...nodes);
+    });
+
+    const content = _.dynamic(() => {
+      const labelFallback = uiUnwrap(props.label);
+      let labelNodes = renderNamedSlotToArray(["label"], {}, labelFallback);
+      if (!labelNodes.length) labelNodes = renderNamedSlotToArray(["default"], {}, children);
+      return _.span(
+        { class: "cms-badge-content" },
+        _.span({ class: "cms-badge-label" }, ...(labelNodes.length ? labelNodes : [""]))
+      );
+    });
+
+    const notification = _.dynamic(() => {
+      const rawNotification = uiUnwrap(props.notification);
+      const fallback = rawNotification == null || rawNotification === false || rawNotification === ""
+        ? null
+        : rawNotification;
+      const nodes = renderNamedSlotToArray(["notification"], { notification: rawNotification }, fallback);
+      if (!nodes.length) return null;
+      return _.span({
+        class: "cms-badge-notification",
+        "data-badge-slot": "notification",
+        "aria-label": typeof rawNotification === "number" ? `${rawNotification} notifications` : null
+      }, ...nodes);
+    });
+
+    const wrap = _.span(
+      renderIconAnchor(["left"], "left", "left"),
+      renderIconAnchor(["centerLeft", "center-left"], "centerLeft", "center-left"),
+      p,
+      content,
+      renderIconAnchor(["topLeft", "top-left"], "topLeft", "top-left"),
+      renderIconAnchor(["topRight", "top-right"], "topRight", "top-right"),
+      renderIconAnchor(["bottomLeft", "bottom-left"], "bottomLeft", "bottom-left"),
+      renderIconAnchor(["bottomRight", "bottom-right"], "bottomRight", "bottom-right"),
+      renderIconAnchor(["centerRight", "center-right"], "centerRight", "center-right"),
+      renderIconAnchor(["right"], "right", "right"),
+      notification
+    );
+    // se esiste un props con left o right
+    if (props.topLeft || props.centerLeft || props.bottomLeft) {
+      wrap.style.setProperty("padding-left", "15px");
+    }
+    if (props.topRight || props.centerRight || props.bottomRight) {
+      wrap.style.setProperty("padding-right", "15px");
+    }
+
+    setPropertyProps(wrap, props);
+    return wrap;
+  };
+
+  // Esempio: JSswift.ui.Badge({ label: "New" })
+
+  const avatarGetInitials = (value) => {
+    if (value == null || value === false) return "";
+    const text = String(value)
+      .replace(/[._-]+/g, " ")
+      .replace(/\s+/g, " ")
+      .trim();
+    if (!text) return "";
+    const words = text.split(" ").filter(Boolean);
+    if (!words.length) return "";
+    if (words.length === 1) {
+      const token = words[0].replace(/[^a-z0-9]/gi, "");
+      return token.slice(0, 2).toUpperCase();
+    }
+    return words.slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+  };
+
+  const avatarStatusState = (value, fallback) => {
+    const raw = value == null || value === true ? fallback : value;
+    if (raw == null || raw === false) return normalizeState(fallback);
+    const token = String(raw).toLowerCase();
+    if (token === "online" || token === "available" || token === "active") return "success";
+    if (token === "away" || token === "pending") return "warning";
+    if (token === "busy" || token === "dnd" || token === "blocked") return "danger";
+    if (token === "offline" || token === "idle") return "secondary";
+    return normalizeState(token) || normalizeState(fallback);
+  };
+
+  const avatarPrimitiveBadge = (value, className = "cms-avatar-badge") => {
+    if (value == null || value === false) return null;
+    if (value instanceof Node || Array.isArray(value)) return value;
+    if (typeof value === "function") return value;
+    if (value === true) return _.span({ class: className });
+    return _.span({ class: className }, String(value));
+  };
+
+  const avatarPrimitiveStatus = (value, color) => {
+    if (value == null || value === false) {
+      if (!color) return null;
+      const fallbackState = avatarStatusState(null, color);
+      return _.span({ class: uiClass(["cms-avatar-status", fallbackState ? `cms-state-${fallbackState}` : ""]) });
+    }
+    if (value instanceof Node || Array.isArray(value)) return value;
+    if (typeof value === "function") return value;
+    const state = avatarStatusState(value, color);
+    if (value === true || state) {
+      return _.span({ class: uiClass(["cms-avatar-status", state ? `cms-state-${state}` : ""]) });
+    }
+    return avatarPrimitiveBadge(value, "cms-avatar-badge");
+  };
+
+  const avatarRenderAnchor = (className, nodes) => {
+    if (!nodes || !nodes.length) return null;
+    return _.span({ class: uiClass(["cms-avatar-anchor", className]) }, ...nodes);
+  };
+
+  UI.Avatar = (...args) => {
+    const { props, children } = JSswift.uiNormalizeArgs(args);
+    const slots = props.slots || {};
+    const sizeClass = uiComputed(props.size, () => {
+      const v = uiUnwrap(props.size);
+      return (typeof v === "string" && JSswift.uiSizes?.includes(v)) ? `cms-size-${v}` : "";
+    });
+    const stateClass = uiComputed([props.color, props.state], () => {
+      const v = uiUnwrap(props.color) || uiUnwrap(props.state) || "";
+      const state = normalizeState(v);
+      return state ? `cms-state-${state}` : "";
+    });
+    const cls = uiClass([
+      "cms-clear-set",
+      "cms-avatar",
+      "cms-singularity",
+      sizeClass,
+      stateClass,
+      uiWhen(props.square, "cms-avatar-square"),
+      uiWhen(props.elevated, "elevated"),
+      props.class
+    ]);
+
+    const p = JSswift.omit(props, [
+      "src", "srcset", "srcSet", "sizes", "alt", "label", "name", "initials", "text",
+      "size", "fontSize", "textSize", "radius", "rounded", "square", "elevated",
+      "icon", "iconSize", "media", "fit", "badge", "notification", "status",
+      "statusColor", "presence", "topLeft", "topRight", "bottomLeft", "bottomRight",
+      "slots"
+    ]);
+    p.class = cls;
+
+    const style = { ...(props.style || {}) };
+    const sizeStyle = uiStyleValue(props.size, (value) => {
+      if (typeof value === "string" && JSswift.uiSizes?.includes(value)) return "";
+      return toCssSize(value);
+    }, "");
+    if (sizeStyle != null) {
+      style.width = sizeStyle;
+      style.height = sizeStyle;
+    }
+
+    const fontSizeValue = props.fontSize ?? props.textSize;
+    const fontSizeStyle = fontSizeValue != null
+      ? uiStyleValue(fontSizeValue, toCssSize)
+      : uiStyleValue(props.size, (value) => {
+        if (typeof value === "string" && JSswift.uiSizes?.includes(value)) return "";
+        return `clamp(11px, calc(${toCssSize(value)} * 0.34), 28px)`;
+      }, "");
+    if (fontSizeStyle != null) style.fontSize = fontSizeStyle;
+
+    const radiusStyle = uiStyleValue(props.radius, (value) => {
+      const normalized = normalizeRadius(value);
+      if (normalized === "xxxl") return "999px";
+      if (normalized) return `var(--cms-r-${normalized})`;
+      if (typeof value === "number") return `${value}px`;
+      return String(value);
+    });
+    if (radiusStyle != null) style["--set-border-radius"] = radiusStyle;
+    p.style = style;
+
+    const ctx = { props };
+    const altText = uiComputed([props.alt, props.label, props.name, props.text], () => {
+      const raw = uiUnwrap(props.alt) || uiUnwrap(props.label) || uiUnwrap(props.name) || uiUnwrap(props.text) || "avatar";
+      return String(raw);
+    });
+    const iconFallback = props.icon != null
+      ? (typeof props.icon === "string"
+        ? UI.Icon({ name: props.icon, size: props.iconSize || props.size || "sm" })
+        : JSswift.ui.slot(props.icon, { as: "icon" }))
+      : null;
+    const labelFallback = uiComputed([props.initials, props.text, props.label, props.name], () => {
+      const explicit = uiUnwrap(props.initials) ?? uiUnwrap(props.text);
+      if (explicit != null) return explicit;
+      const rawLabel = uiUnwrap(props.label) ?? uiUnwrap(props.name);
+      if (typeof rawLabel === "string") return avatarGetInitials(rawLabel);
+      return rawLabel;
+    });
+    const badgeFallback = avatarPrimitiveBadge(uiUnwrap(props.badge ?? props.notification));
+    const statusFallback = avatarPrimitiveStatus(
+      uiUnwrap(props.status ?? props.presence),
+      uiUnwrap(props.statusColor)
+    );
+
+    let mediaNodes = renderSlotToArray(slots, "media", ctx, props.media);
+    if (!mediaNodes.length && props.src) {
+      const imgProps = {
+        class: "cms-avatar-img",
+        src: props.src,
+        alt: altText,
+        sizes: props.sizes,
+        style: {}
+      };
+      if (props.srcset != null) imgProps.srcset = props.srcset;
+      if (props.srcSet != null) imgProps.srcset = props.srcSet;
+      const fitStyle = uiStyleValue(props.fit);
+      if (fitStyle != null) imgProps.style.objectFit = fitStyle;
+      mediaNodes = [_.img(imgProps)];
+    }
+
+    const defaultNodes = renderSlotToArray(slots, "default", ctx, children);
+    const fallbackNodes = renderSlotToArray(slots, "fallback", ctx, null);
+    const labelNodes = renderSlotToArray(slots, "label", ctx, labelFallback);
+    const iconNodes = renderSlotToArray(slots, "icon", ctx, iconFallback);
+    const mainNodes = mediaNodes.length
+      ? mediaNodes
+      : (defaultNodes.length
+        ? defaultNodes
+        : (fallbackNodes.length
+          ? fallbackNodes
+          : (labelNodes.length
+            ? labelNodes
+            : (iconNodes.length ? iconNodes : ["?"]))));
+
+    const bodyClass = mediaNodes.length ? "cms-avatar-media" : "cms-avatar-fallback";
+    const body = _.span({ class: "cms-avatar-body" },
+      _.span({ class: bodyClass }, ...mainNodes)
+    );
+
+    let topLeftNodes = renderSlotToArray(slots, "topLeft", ctx, props.topLeft);
+    let topRightNodes = renderSlotToArray(slots, "topRight", ctx, props.topRight);
+    let bottomLeftNodes = renderSlotToArray(slots, "bottomLeft", ctx, props.bottomLeft);
+    let bottomRightNodes = renderSlotToArray(slots, "bottomRight", ctx, props.bottomRight);
+    const badgeNodes = renderSlotToArray(slots, "badge", ctx, badgeFallback);
+    const statusNodes = renderSlotToArray(slots, "status", ctx, statusFallback);
+
+    if (!topRightNodes.length && badgeNodes.length) topRightNodes = badgeNodes;
+    if (!bottomRightNodes.length && statusNodes.length) bottomRightNodes = statusNodes;
+
     const wrap = _.div(
       p,
       body,
@@ -534,140 +463,57 @@
     setPropertyProps(wrap, props);
     return wrap;
   };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Avatar = {
-      signature: "UI.Avatar(...children) | UI.Avatar(props, ...children)",
-      props: {
-        src: "string",
-        srcset: "string",
-        sizes: "string",
-        alt: "string",
-        label: "String|Node|Function|Array",
-        name: "string",
-        initials: "string|Node|Function|Array",
-        text: "string|Node|Function|Array",
-        size: "number|string",
-        fontSize: "number|string",
-        radius: "number|string",
-        square: "boolean",
-        elevated: "boolean",
-        color: "string",
-        state: "string",
-        icon: "string|Node|Function|Array",
-        iconSize: "number|string",
-        media: "Node|Function|Array",
-        fit: "cover|contain|fill|scale-down|none",
-        badge: "string|number|Node|Function|Array",
-        notification: "string|number|Node|Function|Array",
-        status: "boolean|string|number|Node|Function|Array",
-        statusColor: "success|warning|danger|info|primary|secondary|dark|light|string",
-        topLeft: "Node|Function|Array",
-        topRight: "Node|Function|Array",
-        bottomLeft: "Node|Function|Array",
-        bottomRight: "Node|Function|Array",
-        slots: "{ media?, default?, fallback?, label?, icon?, badge?, status?, topLeft?, topRight?, bottomLeft?, bottomRight? }",
-        mobile: "{ width?, height?, minWidth?, maxWidth?, padding?, margin?, radius? }",
-        tablet: "{ width?, height?, minWidth?, maxWidth?, padding?, margin?, radius? }",
-        pc: "{ width?, height?, minWidth?, maxWidth?, padding?, margin?, radius? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        media: "Custom main media",
-        default: "Custom main content instead of image or fallback",
-        fallback: "Fallback custom quando non c'e immagine",
-        label: "Fallback testuale / initials",
-        icon: "Fallback icon",
-        badge: "Badge overlay, di default top-right",
-        status: "Presence dot or overlay content, bottom-right by default",
-        topLeft: "Top-left overlay content",
-        topRight: "Top-right overlay content",
-        bottomLeft: "Bottom-left overlay content",
-        bottomRight: "Bottom-right overlay content"
-      },
-      returns: "HTMLDivElement",
-      description: "Flexible avatar with image, smart fallbacks, states, badge, and overlay slots."
-    };
-  }
-  // Esempio: JSswift.ui.Avatar({ label: "CM" })
-
-  UI.Chip = (...args) => {
-    const { props, children } = JSswift.uiNormalizeArgs(args);
-    const slots = props.slots || {};
-    const sizeClass = uiComputed(props.size, () => {
-      const v = uiUnwrap(props.size);
-      return (typeof v === "string" && sizeMap[v]) ? v : "";
-    });
-    const cls = uiClass([
-      "cms-clear-set",
-      "cms-chip",
-      "cms-singularity",
-      sizeClass,
-      props.class
-    ]);
-    const p = JSswift.omit(props, ["label", "border", "color", "icon", "iconRight", "removable", "onRemove", "dense", "flat", "glossy", "outline", "slots"]);
-    p.class = cls;
-    p.style = {
-      ...(props.style || {})
-    };
-
-    const iconFallback = props.icon
-      ? (typeof props.icon === "string" ? UI.Icon({ name: props.icon, size: props?.size ?? null }) : JSswift.ui.slot(props.icon, { as: "icon" }))
-      : null;
-    const iconRightFallback = props.iconRight
-      ? (typeof props.iconRight === "string" ? UI.Icon({ name: props.iconRight, size: props?.size ?? null }) : JSswift.ui.slot(props.iconRight, { as: "iconRight" }))
-      : null;
-    const iconNode = JSswift.ui.renderSlot(slots, "icon", {}, iconFallback);
-    const iconRightNode = JSswift.ui.renderSlot(slots, "iconRight", {}, iconRightFallback);
-    const labelNodes = renderSlotToArray(slots, "label", {}, props.label);
-    const labelNode = labelNodes.length ? labelNodes : renderSlotToArray(slots, "default", {}, children);
-
-    const iconNodes = renderSlotToArray(null, "default", {}, iconNode);
-    const iconRightNodes = renderSlotToArray(null, "default", {}, iconRightNode);
-    const wrap = _.span(p, ...iconNodes, ...(labelNode.length ? labelNode : [""]), ...iconRightNodes);
-    if (props.removable) {
-      const btn = UI.Btn({ class: "cms-chip-remove", onClick: props.onRemove, size: props?.size ?? null }, UI.Icon({ size: props?.size ?? null, name: "close" }));
-      wrap.appendChild(btn);
-      btn.onclick = () => {
-        if (props.onRemove) {
-          props.onRemove();
-        }
-        wrap.remove();
-      }
-    }
-    setPropertyProps(wrap, props);
-    return wrap;
-  };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Chip = {
-      signature: "UI.Chip(...children) | UI.Chip(props, ...children)",
-      props: {
-        label: "String|Node|Function|Array",
-        icon: "String|Node|Function|Array",
-        iconRight: "String|Node|Function|Array",
-        removable: "boolean",
-        onRemove: "function",
-        dense: "boolean",
-        outline: "boolean|string|number",
-        slots: "{ icon?, label?, default? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        icon: "Chip icon content",
-        iconRight: "Chip right icon content",
-        label: "Chip label content",
-        default: "Fallback content"
-      },
-      events: {
-        onRemove: "MouseEvent"
-      },
-      returns: "HTMLSpanElement",
-      description: "Chip with optional icon and removal."
-    };
-  }
+
+  // Esempio: JSswift.ui.Avatar({ label: "CM" })
+
+  UI.Chip = (...args) => {
+    const { props, children } = JSswift.uiNormalizeArgs(args);
+    const slots = props.slots || {};
+    const sizeClass = uiComputed(props.size, () => {
+      const v = uiUnwrap(props.size);
+      return (typeof v === "string" && sizeMap[v]) ? v : "";
+    });
+    const cls = uiClass([
+      "cms-clear-set",
+      "cms-chip",
+      "cms-singularity",
+      sizeClass,
+      props.class
+    ]);
+    const p = JSswift.omit(props, ["label", "border", "color", "icon", "iconRight", "removable", "onRemove", "dense", "flat", "glossy", "outline", "slots"]);
+    p.class = cls;
+    p.style = {
+      ...(props.style || {})
+    };
+
+    const iconFallback = props.icon
+      ? (typeof props.icon === "string" ? UI.Icon({ name: props.icon, size: props?.size ?? null }) : JSswift.ui.slot(props.icon, { as: "icon" }))
+      : null;
+    const iconRightFallback = props.iconRight
+      ? (typeof props.iconRight === "string" ? UI.Icon({ name: props.iconRight, size: props?.size ?? null }) : JSswift.ui.slot(props.iconRight, { as: "iconRight" }))
+      : null;
+    const iconNode = JSswift.ui.renderSlot(slots, "icon", {}, iconFallback);
+    const iconRightNode = JSswift.ui.renderSlot(slots, "iconRight", {}, iconRightFallback);
+    const labelNodes = renderSlotToArray(slots, "label", {}, props.label);
+    const labelNode = labelNodes.length ? labelNodes : renderSlotToArray(slots, "default", {}, children);
+
+    const iconNodes = renderSlotToArray(null, "default", {}, iconNode);
+    const iconRightNodes = renderSlotToArray(null, "default", {}, iconRightNode);
+    const wrap = _.span(p, ...iconNodes, ...(labelNode.length ? labelNode : [""]), ...iconRightNodes);
+    if (props.removable) {
+      const btn = UI.Btn({ class: "cms-chip-remove", onClick: props.onRemove, size: props?.size ?? null }, UI.Icon({ size: props?.size ?? null, name: "close" }));
+      wrap.appendChild(btn);
+      btn.onclick = () => {
+        if (props.onRemove) {
+          props.onRemove();
+        }
+        wrap.remove();
+      }
+    }
+    setPropertyProps(wrap, props);
+    return wrap;
+  };
+
   // Esempio: JSswift.ui.Chip({ label: "Tag", removable: true })
 
   UI.Stat = (...args) => {
@@ -777,46 +623,7 @@
     setPropertyProps(stat, rawProps);
     return stat;
   };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Stat = {
-      signature: "UI.Stat(...children) | UI.Stat(props, ...children)",
-      props: {
-        eyebrow: "String|Node|Function|Array",
-        label: "String|Node|Function|Array",
-        title: "Alias of label",
-        value: "String|Number|Node|Function|Array",
-        delta: "String|Node|Function|Array",
-        trend: "up|down|flat|positive|negative|neutral",
-        note: "String|Node|Function|Array",
-        subtitle: "Alias of note",
-        meta: "Node|Function|Array",
-        icon: "String|Node|Function|Array",
-        aside: "Node|Function|Array",
-        footer: "Node|Function|Array",
-        actions: "Node|Function|Array",
-        state: "primary|secondary|success|warning|danger|info|light|dark",
-        slots: "{ eyebrow?, label?, value?, delta?, note?, meta?, icon?, aside?, footer?, actions?, default? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        eyebrow: "Small kicker above the stat label",
-        label: "Main stat label",
-        value: "Primary metric value",
-        delta: "Trend / delta content",
-        note: "Supporting note",
-        meta: "Extra meta badges or info",
-        icon: "Leading icon or avatar",
-        aside: "Right-side support content",
-        footer: "Footer/supporting bottom content",
-        actions: "Footer actions cluster",
-        default: "Extra body content"
-      },
-      returns: "HTMLElement",
-      description: "Compact surface for single metrics, trends, and operational metadata."
-    };
-  }
+
   // Esempio: JSswift.ui.Stat({ label: "Revenue", value: "€ 128k", delta: "+18%" })
 
   UI.Kpi = (...args) => {
@@ -922,93 +729,52 @@
     setPropertyProps(kpi, rawProps);
     return kpi;
   };
-  if (JSswift.isDev?.()) {
-    UI.meta = UI.meta || {};
-    UI.meta.Kpi = {
-      signature: "UI.Kpi(...children) | UI.Kpi(props, ...children)",
-      props: {
-        eyebrow: "String|Node|Function|Array",
-        title: "String|Node|Function|Array",
-        label: "Alias of title",
-        value: "String|Number|Node|Function|Array",
-        delta: "String|Node|Function|Array",
-        trend: "up|down|flat|positive|negative|neutral",
-        note: "String|Node|Function|Array",
-        subtitle: "Alias of note",
-        meta: "Node|Function|Array",
-        media: "Node|Function|Array",
-        icon: "String|Node|Function|Array",
-        aside: "Node|Function|Array",
-        footer: "Node|Function|Array",
-        actions: "Node|Function|Array",
-        state: "primary|secondary|success|warning|danger|info|light|dark",
-        slots: "{ eyebrow?, title?, value?, delta?, note?, meta?, media?, icon?, aside?, footer?, actions?, default? }",
-        class: "string",
-        style: "object"
-      },
-      slots: {
-        eyebrow: "Kicker content",
-        title: "KPI title content",
-        value: "Primary KPI value",
-        delta: "Delta/trend content",
-        note: "Supporting note",
-        meta: "Extra meta badges or inline info",
-        media: "Secondary data view or mini-visual content",
-        icon: "Leading icon or avatar",
-        aside: "Top-right support content",
-        footer: "Bottom support content",
-        actions: "Footer actions cluster",
-        default: "Extra body content"
-      },
-      returns: "HTMLElement",
-      description: "Richer surface for KPIs, headline metrics, and mini dashboard summaries."
-    };
-  }
+
   // Esempio: JSswift.ui.Kpi({ title: "Orders", value: "342", delta: "+12%" })
 
   const overlayAnimDuration = (el, fallback = 180) => {
-    const d = getComputedStyle(el).transitionDuration;
-    if (!d) return fallback;
-    const first = d.split(",")[0].trim();
-    if (!first) return fallback;
-    const ms = first.includes("ms") ? parseFloat(first) : parseFloat(first) * 1000;
-    return Number.isFinite(ms) ? ms : fallback;
-  };
-
-  const overlayEnter = (entry) => {
-    if (!entry?.overlay || !entry?.panel) return;
-    entry.overlay.classList.add("enter");
-    entry.panel.classList.add("enter");
-    requestAnimationFrame(() => {
-      if (!entry?.overlay || !entry?.panel) return;
-      entry.overlay.classList.add("entered");
-      entry.panel.classList.add("entered");
-      entry.overlay.classList.remove("enter");
-      entry.panel.classList.remove("enter");
-    });
-  };
-
-  const overlayLeave = (entry, done) => {
-    if (!entry?.overlay || !entry?.panel) {
-      done?.();
-      return;
-    }
-    if (entry._closing) return;
-    entry._closing = true;
-    entry.overlay.classList.add("leave");
-    entry.panel.classList.add("leave");
-    const finish = () => {
-      if (entry._closed) return;
-      entry._closed = true;
-      done?.();
-    };
-    const onEnd = (e) => {
-      if (e.target !== entry.panel) return;
-      entry.panel.removeEventListener("transitionend", onEnd);
-      finish();
-    };
-    entry.panel.addEventListener("transitionend", onEnd);
-    const ms = overlayAnimDuration(entry.panel, 180);
-    setTimeout(finish, ms + 40);
-  };
-
+    const d = getComputedStyle(el).transitionDuration;
+    if (!d) return fallback;
+    const first = d.split(",")[0].trim();
+    if (!first) return fallback;
+    const ms = first.includes("ms") ? parseFloat(first) : parseFloat(first) * 1000;
+    return Number.isFinite(ms) ? ms : fallback;
+  };
+
+  const overlayEnter = (entry) => {
+    if (!entry?.overlay || !entry?.panel) return;
+    entry.overlay.classList.add("enter");
+    entry.panel.classList.add("enter");
+    requestAnimationFrame(() => {
+      if (!entry?.overlay || !entry?.panel) return;
+      entry.overlay.classList.add("entered");
+      entry.panel.classList.add("entered");
+      entry.overlay.classList.remove("enter");
+      entry.panel.classList.remove("enter");
+    });
+  };
+
+  const overlayLeave = (entry, done) => {
+    if (!entry?.overlay || !entry?.panel) {
+      done?.();
+      return;
+    }
+    if (entry._closing) return;
+    entry._closing = true;
+    entry.overlay.classList.add("leave");
+    entry.panel.classList.add("leave");
+    const finish = () => {
+      if (entry._closed) return;
+      entry._closed = true;
+      done?.();
+    };
+    const onEnd = (e) => {
+      if (e.target !== entry.panel) return;
+      entry.panel.removeEventListener("transitionend", onEnd);
+      finish();
+    };
+    entry.panel.addEventListener("transitionend", onEnd);
+    const ms = overlayAnimDuration(entry.panel, 180);
+    setTimeout(finish, ms + 40);
+  };
+