@almadar/ui 2.20.0 → 2.20.1

package/dist/avl/index.cjs

@@ -5171,6 +5171,14 @@ function zoomReducer(state, action) {
       }
       return state;
     }
+    case "SWITCH_TRAIT": {
+      if (state.level !== "trait" || state.animating) return state;
+      return {
+        ...state,
+        selectedTrait: action.trait,
+        selectedTransition: null
+      };
+    }
     case "RESET": {
       return initialZoomState;
     }
@@ -5378,12 +5386,15 @@ var AvlApplicationScene = ({
 AvlApplicationScene.displayName = "AvlApplicationScene";
 var CX = 300;
 var CY = 200;
+var VIEWBOX_H = 400;
 var ORBITAL_R2 = 130;
 var ENTITY_R2 = 24;
 var AvlOrbitalScene = ({
   data,
   color = "var(--color-primary)",
-  onTraitClick
+  highlightedTrait,
+  onTraitClick,
+  onTraitHighlight
 }) => {
   const traitAngleStart = -Math.PI / 3;
   const traitAngleStep = data.traits.length > 1 ? Math.PI * 1.2 / (data.traits.length - 1) : 0;
@@ -5409,7 +5420,7 @@ var AvlOrbitalScene = ({
             rotation: rotationDeg,
             label: trait.name,
             color,
-            opacity: 0.7
+            opacity: highlightedTrait ? highlightedTrait === trait.name ? 1 : 0.25 : 0.7
           }
         ),
         onTraitClick && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5482,6 +5493,54 @@ var AvlOrbitalScene = ({
       const py = CY + (ORBITAL_R2 + 15) * Math.sin(angle);
       return /* @__PURE__ */ jsxRuntime.jsx(AvlPage, { x: px, y: py, label: page.route, color }, page.name);
     }),
+    data.traits.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("g", { children: data.traits.map((trait, i) => {
+      const pillW = 70;
+      const gap = 8;
+      const totalW = data.traits.length * pillW + (data.traits.length - 1) * gap;
+      const startX = CX - totalW / 2;
+      const px = startX + i * (pillW + gap);
+      const py = VIEWBOX_H - 30;
+      const isHighlighted = highlightedTrait === trait.name;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          style: { cursor: "pointer" },
+          onClick: () => onTraitClick?.(trait.name, { x: CX, y: CY }),
+          onMouseEnter: () => onTraitHighlight?.(trait.name),
+          onMouseLeave: () => onTraitHighlight?.(null),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: px,
+                y: py,
+                width: pillW,
+                height: 22,
+                rx: 11,
+                fill: isHighlighted ? color : "transparent",
+                stroke: color,
+                strokeWidth: isHighlighted ? 1.5 : 0.8,
+                opacity: isHighlighted ? 0.15 : 0.3
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: px + pillW / 2,
+                y: py + 14,
+                textAnchor: "middle",
+                fill: color,
+                fontSize: 8,
+                fontWeight: isHighlighted ? "bold" : "normal",
+                opacity: isHighlighted ? 1 : 0.6,
+                children: trait.name.length > 10 ? trait.name.slice(0, 9) + "\u2026" : trait.name
+              }
+            )
+          ]
+        },
+        `tab-${trait.name}`
+      );
+    }) }),
     data.externalLinks.map((link, i) => {
       const isOut = link.direction === "out";
       const edgeX = isOut ? 580 : 20;
@@ -6147,7 +6206,7 @@ var AvlLegend = ({
 };
 AvlLegend.displayName = "AvlLegend";
 var VIEWBOX_W = 600;
-var VIEWBOX_H = 400;
+var VIEWBOX_H2 = 400;
 var ANIMATION_DURATION = 600;
 var AvlCosmicZoom = ({
   schema: schemaProp,
@@ -6176,11 +6235,11 @@ var AvlCosmicZoom = ({
   const [transitionStyle, setTransitionStyle] = React6.useState({});
   React6.useEffect(() => {
     if (initialOrbital) {
-      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
       if (initialTrait) {
         setTimeout(() => {
-          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
           setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
         }, 10);
       }
@@ -6204,7 +6263,7 @@ var AvlCosmicZoom = ({
     if (!target) return;
     if (state.animationDirection === "in") {
       setTransitionStyle({
-        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H / 2)}px)`,
+        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H2 / 2)}px)`,
         transformOrigin: `${target.x}px ${target.y}px`,
         transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${ANIMATION_DURATION}ms ease`,
         opacity: 0.3
@@ -6234,6 +6293,10 @@ var AvlCosmicZoom = ({
   const handleTraitClick = React6.useCallback((name, pos) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: pos });
   }, []);
+  const handleTraitSwitch = React6.useCallback((name) => {
+    dispatch({ type: "SWITCH_TRAIT", trait: name });
+  }, []);
+  const [highlightedTrait, setHighlightedTrait] = React6__default.default.useState(null);
   const handleTransitionClick = React6.useCallback((index, pos) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: pos });
   }, []);
@@ -6267,7 +6330,9 @@ var AvlCosmicZoom = ({
           {
             data,
             color,
-            onTraitClick: handleTraitClick
+            highlightedTrait,
+            onTraitClick: handleTraitClick,
+            onTraitHighlight: setHighlightedTrait
           }
         );
       }
@@ -6299,7 +6364,7 @@ var AvlCosmicZoom = ({
       default:
         return null;
     }
-  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick]);
+  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick, highlightedTrait, setHighlightedTrait]);
   const breadcrumbs = getBreadcrumbs(state);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
@@ -6329,6 +6394,28 @@ var AvlCosmicZoom = ({
             ] }, crumb.level))
           }
         ),
+        state.level === "trait" && state.selectedOrbital && (() => {
+          const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
+          if (!orbData || orbData.traits.length <= 1) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-1.5 py-1",
+              children: orbData.traits.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+                Box,
+                {
+                  as: "button",
+                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"}`,
+                  onClick: () => handleTraitSwitch(t.name),
+                  children: t.name
+                },
+                t.name
+              ))
+            }
+          );
+        })(),
         state.level !== "application" && /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
@@ -6341,7 +6428,7 @@ var AvlCosmicZoom = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
-            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H}`,
+            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H2}`,
             xmlns: "http://www.w3.org/2000/svg",
             className: "w-full h-full",
             role: "img",

package/dist/avl/index.d.cts

@@ -513,10 +513,14 @@ declare const AvlApplicationScene: React.FC<AvlApplicationSceneProps>;
 interface AvlOrbitalSceneProps {
     data: OrbitalLevelData;
     color?: string;
+    /** Currently highlighted trait (before zooming in) */
+    highlightedTrait?: string | null;
     onTraitClick?: (traitName: string, position: {
         x: number;
         y: number;
     }) => void;
+    /** Called when a trait tab is hovered/selected (highlight without zoom) */
+    onTraitHighlight?: (traitName: string | null) => void;
 }
 declare const AvlOrbitalScene: React.FC<AvlOrbitalSceneProps>;
 

package/dist/avl/index.js

@@ -5164,6 +5164,14 @@ function zoomReducer(state, action) {
       }
       return state;
     }
+    case "SWITCH_TRAIT": {
+      if (state.level !== "trait" || state.animating) return state;
+      return {
+        ...state,
+        selectedTrait: action.trait,
+        selectedTransition: null
+      };
+    }
     case "RESET": {
       return initialZoomState;
     }
@@ -5371,12 +5379,15 @@ var AvlApplicationScene = ({
 AvlApplicationScene.displayName = "AvlApplicationScene";
 var CX = 300;
 var CY = 200;
+var VIEWBOX_H = 400;
 var ORBITAL_R2 = 130;
 var ENTITY_R2 = 24;
 var AvlOrbitalScene = ({
   data,
   color = "var(--color-primary)",
-  onTraitClick
+  highlightedTrait,
+  onTraitClick,
+  onTraitHighlight
 }) => {
   const traitAngleStart = -Math.PI / 3;
   const traitAngleStep = data.traits.length > 1 ? Math.PI * 1.2 / (data.traits.length - 1) : 0;
@@ -5402,7 +5413,7 @@ var AvlOrbitalScene = ({
             rotation: rotationDeg,
             label: trait.name,
             color,
-            opacity: 0.7
+            opacity: highlightedTrait ? highlightedTrait === trait.name ? 1 : 0.25 : 0.7
           }
         ),
         onTraitClick && /* @__PURE__ */ jsx(
@@ -5475,6 +5486,54 @@ var AvlOrbitalScene = ({
       const py = CY + (ORBITAL_R2 + 15) * Math.sin(angle);
       return /* @__PURE__ */ jsx(AvlPage, { x: px, y: py, label: page.route, color }, page.name);
     }),
+    data.traits.length > 1 && /* @__PURE__ */ jsx("g", { children: data.traits.map((trait, i) => {
+      const pillW = 70;
+      const gap = 8;
+      const totalW = data.traits.length * pillW + (data.traits.length - 1) * gap;
+      const startX = CX - totalW / 2;
+      const px = startX + i * (pillW + gap);
+      const py = VIEWBOX_H - 30;
+      const isHighlighted = highlightedTrait === trait.name;
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          style: { cursor: "pointer" },
+          onClick: () => onTraitClick?.(trait.name, { x: CX, y: CY }),
+          onMouseEnter: () => onTraitHighlight?.(trait.name),
+          onMouseLeave: () => onTraitHighlight?.(null),
+          children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: px,
+                y: py,
+                width: pillW,
+                height: 22,
+                rx: 11,
+                fill: isHighlighted ? color : "transparent",
+                stroke: color,
+                strokeWidth: isHighlighted ? 1.5 : 0.8,
+                opacity: isHighlighted ? 0.15 : 0.3
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: px + pillW / 2,
+                y: py + 14,
+                textAnchor: "middle",
+                fill: color,
+                fontSize: 8,
+                fontWeight: isHighlighted ? "bold" : "normal",
+                opacity: isHighlighted ? 1 : 0.6,
+                children: trait.name.length > 10 ? trait.name.slice(0, 9) + "\u2026" : trait.name
+              }
+            )
+          ]
+        },
+        `tab-${trait.name}`
+      );
+    }) }),
     data.externalLinks.map((link, i) => {
       const isOut = link.direction === "out";
       const edgeX = isOut ? 580 : 20;
@@ -6140,7 +6199,7 @@ var AvlLegend = ({
 };
 AvlLegend.displayName = "AvlLegend";
 var VIEWBOX_W = 600;
-var VIEWBOX_H = 400;
+var VIEWBOX_H2 = 400;
 var ANIMATION_DURATION = 600;
 var AvlCosmicZoom = ({
   schema: schemaProp,
@@ -6169,11 +6228,11 @@ var AvlCosmicZoom = ({
   const [transitionStyle, setTransitionStyle] = useState({});
   useEffect(() => {
     if (initialOrbital) {
-      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
       if (initialTrait) {
         setTimeout(() => {
-          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
           setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
         }, 10);
       }
@@ -6197,7 +6256,7 @@ var AvlCosmicZoom = ({
     if (!target) return;
     if (state.animationDirection === "in") {
       setTransitionStyle({
-        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H / 2)}px)`,
+        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H2 / 2)}px)`,
         transformOrigin: `${target.x}px ${target.y}px`,
         transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${ANIMATION_DURATION}ms ease`,
         opacity: 0.3
@@ -6227,6 +6286,10 @@ var AvlCosmicZoom = ({
   const handleTraitClick = useCallback((name, pos) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: pos });
   }, []);
+  const handleTraitSwitch = useCallback((name) => {
+    dispatch({ type: "SWITCH_TRAIT", trait: name });
+  }, []);
+  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
   const handleTransitionClick = useCallback((index, pos) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: pos });
   }, []);
@@ -6260,7 +6323,9 @@ var AvlCosmicZoom = ({
           {
             data,
             color,
-            onTraitClick: handleTraitClick
+            highlightedTrait,
+            onTraitClick: handleTraitClick,
+            onTraitHighlight: setHighlightedTrait
           }
         );
       }
@@ -6292,7 +6357,7 @@ var AvlCosmicZoom = ({
       default:
         return null;
     }
-  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick]);
+  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick, highlightedTrait, setHighlightedTrait]);
   const breadcrumbs = getBreadcrumbs(state);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -6322,6 +6387,28 @@ var AvlCosmicZoom = ({
             ] }, crumb.level))
           }
         ),
+        state.level === "trait" && state.selectedOrbital && (() => {
+          const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
+          if (!orbData || orbData.traits.length <= 1) return null;
+          return /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-1.5 py-1",
+              children: orbData.traits.map((t) => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "button",
+                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"}`,
+                  onClick: () => handleTraitSwitch(t.name),
+                  children: t.name
+                },
+                t.name
+              ))
+            }
+          );
+        })(),
         state.level !== "application" && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -6334,7 +6421,7 @@ var AvlCosmicZoom = ({
         /* @__PURE__ */ jsxs(
           "svg",
           {
-            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H}`,
+            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H2}`,
             xmlns: "http://www.w3.org/2000/svg",
             className: "w-full h-full",
             role: "img",

package/dist/components/organisms/avl/AvlOrbitalScene.d.ts

@@ -9,9 +9,13 @@ import type { OrbitalLevelData } from './avl-schema-parser';
 export interface AvlOrbitalSceneProps {
     data: OrbitalLevelData;
     color?: string;
+    /** Currently highlighted trait (before zooming in) */
+    highlightedTrait?: string | null;
     onTraitClick?: (traitName: string, position: {
         x: number;
         y: number;
     }) => void;
+    /** Called when a trait tab is hovered/selected (highlight without zoom) */
+    onTraitHighlight?: (traitName: string | null) => void;
 }
 export declare const AvlOrbitalScene: React.FC<AvlOrbitalSceneProps>;

package/dist/components/organisms/avl/avl-zoom-state.d.ts

@@ -47,6 +47,9 @@ export type ZoomAction = {
     type: 'ANIMATION_COMPLETE';
 } | {
     type: 'RESET';
+} | {
+    type: 'SWITCH_TRAIT';
+    trait: string;
 };
 export declare const initialZoomState: ZoomState;
 export declare function zoomReducer(state: ZoomState, action: ZoomAction): ZoomState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",