@almadar/ui 5.1.5 → 5.1.6

package/dist/avl/index.cjs

@@ -58382,9 +58382,25 @@ function detectScreenSize(viewportWidth) {
 }
 
 // components/molecules/avl/avl-preview-converter.ts
-var OVERVIEW_SPACING = 900;
-var EXPANDED_SPACING_X = 900;
-var EXPANDED_SPACING_Y = 600;
+var OVERVIEW_GAP_X = 160;
+var OVERVIEW_GAP_Y = 240;
+var EXPANDED_GAP_X = 160;
+var EXPANDED_GAP_Y = 240;
+var CARD_CHROME_Y = 120;
+function computeSpacing(screenSize = "wide") {
+  const preset = SCREEN_SIZE_PRESETS[screenSize];
+  return {
+    x: preset.width + OVERVIEW_GAP_X,
+    y: preset.minHeight + CARD_CHROME_Y + OVERVIEW_GAP_Y
+  };
+}
+function computeExpandedSpacing(screenSize = "wide") {
+  const preset = SCREEN_SIZE_PRESETS[screenSize];
+  return {
+    x: preset.width + EXPANDED_GAP_X,
+    y: preset.minHeight + CARD_CHROME_Y + EXPANDED_GAP_Y
+  };
+}
 function getOrbitals(schema) {
   return schema.orbitals ?? [];
 }
@@ -58573,12 +58589,13 @@ function extractTraitWires(orbitals, scope) {
 function findCrossLinks(orbitals) {
   return extractTraitWires(orbitals, "cross-orbital");
 }
-function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
   const count = orbitals.length;
   const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
+  const spacing = computeSpacing(screenSize);
   for (let i = 0; i < orbitals.length; i++) {
     const orb = orbitals[i];
     const entityInfo = getEntityInfo(orb);
@@ -58638,7 +58655,7 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbit
     nodes.push({
       id: orb.name,
       type: "preview",
-      position: { x: col * OVERVIEW_SPACING, y: row * OVERVIEW_SPACING },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName: orb.name,
         patterns: initPatterns,
@@ -58702,9 +58719,10 @@ function collectUITransitions(orbital, filter) {
   }
   return out;
 }
-function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
+function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData, screenSize) {
   const nodes = [];
   const edges = [];
+  const spacing = computeExpandedSpacing(screenSize);
   const stateRepresentativeMap = /* @__PURE__ */ new Map();
   for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
@@ -58730,7 +58748,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     nodes.push({
       id: nodeId,
       type: "preview",
-      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName,
         traitName: entry.traitName,
@@ -58758,7 +58776,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     nodes.push({
       id: nodeId,
       type: "preview",
-      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName,
         traitName: group.representative.traitName,
@@ -58813,7 +58831,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
   }
   return { nodes, edges };
 }
-function orbitalToExpandedGraph(schema, orbitalName, mockData) {
+function orbitalToExpandedGraph(schema, orbitalName, mockData, screenSize) {
   const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
   if (!orbital) return { nodes: [], edges: [] };
   const entityInfo = getEntityInfo(orbital);
@@ -58853,10 +58871,11 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
     entityInfo.name,
     organismTransitions,
     groupedBehaviors,
-    mockData
+    mockData,
+    screenSize
   );
 }
-function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
+function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData, screenSize) {
   const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
   if (!orbital) return { nodes: [], edges: [] };
   const entityInfo = getEntityInfo(orbital);
@@ -58870,7 +58889,8 @@ function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
     entityInfo.name,
     transitions,
     [],
-    mockData
+    mockData,
+    screenSize
   );
 }
 var TRAIT_CARD_SPACING_X = 480;
@@ -63489,9 +63509,9 @@ function FlowCanvasInner({
   const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges, traitExpandedNodes, traitExpandedEdges } = React98.useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
-    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
-    const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
-    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize);
+    const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData, screenSize) : { nodes: [], edges: [] };
+    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData, screenSize) : { nodes: [], edges: [] };
     const traitExpanded = expandedOrbital ? orbitalToTraitGraph(parsedSchema, expandedOrbital) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
@@ -63513,7 +63533,7 @@ function FlowCanvasInner({
       traitExpandedNodes: traitExpanded.nodes,
       traitExpandedEdges: traitExpanded.edges
     };
-  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
+  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus, screenSize]);
   const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : level === "trait-expanded" ? traitExpandedNodes : expandedNodes;
   const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : level === "trait-expanded" ? traitExpandedEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);
@@ -63524,7 +63544,7 @@ function FlowCanvasInner({
     setNodes(activeNodes);
     setEdges(activeEdges);
     requestAnimationFrame(() => {
-      reactFlow.fitView({ duration: 300, padding: 0.15 });
+      reactFlow.fitView({ duration: 300, padding: 0.25 });
     });
   }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
   const visibleEdges = React98.useMemo(() => {
@@ -63705,7 +63725,7 @@ function FlowCanvasInner({
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,
-              fitViewOptions: { padding: 0.15 },
+              fitViewOptions: { padding: 0.25 },
               nodesDraggable: true,
               elementsSelectable: true,
               proOptions: { hideAttribution: true },
@@ -63762,7 +63782,7 @@ function FlowCanvasInner({
                       onClick: () => {
                         pickScreenSize(size);
                         requestAnimationFrame(() => {
-                          reactFlow.fitView({ duration: 300, padding: 0.15 });
+                          reactFlow.fitView({ duration: 300, padding: 0.25 });
                         });
                       },
                       className: `px-2 py-1 text-[11px] font-medium rounded cursor-pointer border-none transition-colors ${active ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,

package/dist/avl/index.d.cts

@@ -846,6 +846,22 @@ declare const AvlBindingEdge: React__default.FC<EdgeProps>;
  *   from the L1 grid. Not used by the canvas tab today.
  */
 type ViewLevel = 'overview' | 'expanded' | 'behavior-expanded' | 'trait-expanded';
+/**
+ * Screen size preset for OrbPreview rendering inside nodes.
+ *
+ * Aligned with the four-breakpoint responsiveness audit:
+ *   mobile  — phone portrait  (≤640px)
+ *   tablet  — iPad / small landscape (641–1024px)
+ *   laptop  — 13–15" notebook (1025–1440px)
+ *   wide    — desktop / monitor (≥1441px)
+ *
+ * Preset widths are representative viewport widths within each range; the
+ * preview renders at exactly this width so the embedded UI experiences
+ * the same media-query / container-query behavior it would at the real
+ * viewport. `minHeight` only floors the preview frame; vertical sizing is
+ * content-driven (BrowserPlayground height="auto").
+ */
+type ScreenSize = 'mobile' | 'tablet' | 'laptop' | 'wide';
 /**
  * An interactive element inside a render-ui pattern that fires an event.
  * For example, a button with `event: "CHECKOUT"` is an event source.
@@ -1041,7 +1057,7 @@ interface EventEdgeData extends Record<string, unknown> {
  */
 declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<string, unknown[]>, behaviorMeta?: Record<string, {
     layer: string;
-}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>): {
+}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>, screenSize?: ScreenSize): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };
@@ -1056,7 +1072,7 @@ declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<
  * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
  * L3 (`orbitalAliasToExpandedGraph`).
  */
-declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>): {
+declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>, screenSize?: ScreenSize): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };

package/dist/avl/index.js

@@ -58333,9 +58333,25 @@ function detectScreenSize(viewportWidth) {
 }
 
 // components/molecules/avl/avl-preview-converter.ts
-var OVERVIEW_SPACING = 900;
-var EXPANDED_SPACING_X = 900;
-var EXPANDED_SPACING_Y = 600;
+var OVERVIEW_GAP_X = 160;
+var OVERVIEW_GAP_Y = 240;
+var EXPANDED_GAP_X = 160;
+var EXPANDED_GAP_Y = 240;
+var CARD_CHROME_Y = 120;
+function computeSpacing(screenSize = "wide") {
+  const preset = SCREEN_SIZE_PRESETS[screenSize];
+  return {
+    x: preset.width + OVERVIEW_GAP_X,
+    y: preset.minHeight + CARD_CHROME_Y + OVERVIEW_GAP_Y
+  };
+}
+function computeExpandedSpacing(screenSize = "wide") {
+  const preset = SCREEN_SIZE_PRESETS[screenSize];
+  return {
+    x: preset.width + EXPANDED_GAP_X,
+    y: preset.minHeight + CARD_CHROME_Y + EXPANDED_GAP_Y
+  };
+}
 function getOrbitals(schema) {
   return schema.orbitals ?? [];
 }
@@ -58524,12 +58540,13 @@ function extractTraitWires(orbitals, scope) {
 function findCrossLinks(orbitals) {
   return extractTraitWires(orbitals, "cross-orbital");
 }
-function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
   const count = orbitals.length;
   const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
+  const spacing = computeSpacing(screenSize);
   for (let i = 0; i < orbitals.length; i++) {
     const orb = orbitals[i];
     const entityInfo = getEntityInfo(orb);
@@ -58589,7 +58606,7 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbit
     nodes.push({
       id: orb.name,
       type: "preview",
-      position: { x: col * OVERVIEW_SPACING, y: row * OVERVIEW_SPACING },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName: orb.name,
         patterns: initPatterns,
@@ -58653,9 +58670,10 @@ function collectUITransitions(orbital, filter) {
   }
   return out;
 }
-function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
+function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData, screenSize) {
   const nodes = [];
   const edges = [];
+  const spacing = computeExpandedSpacing(screenSize);
   const stateRepresentativeMap = /* @__PURE__ */ new Map();
   for (const entry of transitions) {
     const key = `${entry.traitName}:${entry.transition.to}`;
@@ -58681,7 +58699,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     nodes.push({
       id: nodeId,
       type: "preview",
-      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName,
         traitName: entry.traitName,
@@ -58709,7 +58727,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
     nodes.push({
       id: nodeId,
       type: "preview",
-      position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
+      position: { x: col * spacing.x, y: row * spacing.y },
       data: {
         orbitalName,
         traitName: group.representative.traitName,
@@ -58764,7 +58782,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
   }
   return { nodes, edges };
 }
-function orbitalToExpandedGraph(schema, orbitalName, mockData) {
+function orbitalToExpandedGraph(schema, orbitalName, mockData, screenSize) {
   const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
   if (!orbital) return { nodes: [], edges: [] };
   const entityInfo = getEntityInfo(orbital);
@@ -58804,10 +58822,11 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
     entityInfo.name,
     organismTransitions,
     groupedBehaviors,
-    mockData
+    mockData,
+    screenSize
   );
 }
-function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
+function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData, screenSize) {
   const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
   if (!orbital) return { nodes: [], edges: [] };
   const entityInfo = getEntityInfo(orbital);
@@ -58821,7 +58840,8 @@ function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
     entityInfo.name,
     transitions,
     [],
-    mockData
+    mockData,
+    screenSize
   );
 }
 var TRAIT_CARD_SPACING_X = 480;
@@ -63440,9 +63460,9 @@ function FlowCanvasInner({
   const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges, traitExpandedNodes, traitExpandedEdges } = useMemo(() => {
     const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
-    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
-    const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
-    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize);
+    const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData, screenSize) : { nodes: [], edges: [] };
+    const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData, screenSize) : { nodes: [], edges: [] };
     const traitExpanded = expandedOrbital ? orbitalToTraitGraph(parsedSchema, expandedOrbital) : { nodes: [], edges: [] };
     perfEnd("compose-graph", t, {
       composeNodes: compose.nodes.length,
@@ -63464,7 +63484,7 @@ function FlowCanvasInner({
       traitExpandedNodes: traitExpanded.nodes,
       traitExpandedEdges: traitExpanded.edges
     };
-  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
+  }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus, screenSize]);
   const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : level === "trait-expanded" ? traitExpandedNodes : expandedNodes;
   const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : level === "trait-expanded" ? traitExpandedEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
@@ -63475,7 +63495,7 @@ function FlowCanvasInner({
     setNodes(activeNodes);
     setEdges(activeEdges);
     requestAnimationFrame(() => {
-      reactFlow.fitView({ duration: 300, padding: 0.15 });
+      reactFlow.fitView({ duration: 300, padding: 0.25 });
     });
   }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
   const visibleEdges = useMemo(() => {
@@ -63656,7 +63676,7 @@ function FlowCanvasInner({
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,
-              fitViewOptions: { padding: 0.15 },
+              fitViewOptions: { padding: 0.25 },
               nodesDraggable: true,
               elementsSelectable: true,
               proOptions: { hideAttribution: true },
@@ -63713,7 +63733,7 @@ function FlowCanvasInner({
                       onClick: () => {
                         pickScreenSize(size);
                         requestAnimationFrame(() => {
-                          reactFlow.fitView({ duration: 300, padding: 0.15 });
+                          reactFlow.fitView({ duration: 300, padding: 0.25 });
                         });
                       },
                       className: `px-2 py-1 text-[11px] font-medium rounded cursor-pointer border-none transition-colors ${active ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,

package/dist/components/molecules/avl/avl-preview-converter.d.ts

@@ -14,14 +14,14 @@
  */
 import type { Node, Edge } from '@xyflow/react';
 import type { OrbitalSchema } from '@almadar/core';
-import type { PreviewNodeData, EventEdgeData } from './avl-preview-types';
+import type { PreviewNodeData, EventEdgeData, ScreenSize } from './avl-preview-types';
 /**
  * Build a React Flow graph for the overview level.
  * Each orbital gets one node showing its INIT transition's UI.
  */
 export declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<string, unknown[]>, behaviorMeta?: Record<string, {
     layer: string;
-}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>): {
+}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>, screenSize?: ScreenSize): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };
@@ -36,7 +36,7 @@ export declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?:
  * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
  * L3 (`orbitalAliasToExpandedGraph`).
  */
-export declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>): {
+export declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>, screenSize?: ScreenSize): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };
@@ -47,7 +47,7 @@ export declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalNam
  * `orbitalToExpandedGraph` but scoped to traits where
  * `sourceBehavior.alias === alias`. STUDIO-1.
  */
-export declare function orbitalAliasToExpandedGraph(schema: OrbitalSchema, orbitalName: string, alias: string, mockData?: Record<string, unknown[]>): {
+export declare function orbitalAliasToExpandedGraph(schema: OrbitalSchema, orbitalName: string, alias: string, mockData?: Record<string, unknown[]>, screenSize?: ScreenSize): {
     nodes: Node<PreviewNodeData>[];
     edges: Edge<EventEdgeData>[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.1.5",
+  "version": "5.1.6",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [