@almadar/ui 5.1.5 → 5.2.0

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.2.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [

package/themes/_base.css

@@ -0,0 +1,124 @@
+/**
+ * _base.css — Shared Typography + Density base
+ *
+ * Lifted from `atelier.css` so the editorial type rhythm and generous
+ * 10pt spacing scale are the default across every theme that doesn't
+ * deliberately opt out. Themes can still override any token by declaring
+ * it in their own [data-theme="..."] block — that selector is more
+ * specific than :root and wins via the CSS cascade.
+ *
+ * Personality themes that DO opt out today (keep their own typography
+ * and/or density): terminal (monospace), wireframe (chunky), neon (tight
+ * glow), kiosk (oversized), gazette (serif), minimalist (compact),
+ * trait-wars (gamer). All others inherit from this file.
+ *
+ * Loaded FIRST in themes/index.css so individual theme blocks override
+ * cleanly. The contract reference is `themes/_contract.md`.
+ */
+:root {
+    /* ----------------------------------------------------------------
+     * Typography
+     * ----------------------------------------------------------------
+     * Inter for body + UI, JetBrains Mono for code, optional display
+     * family for hero numerics. Mid-weight 500 reads as confident but
+     * not heavy; tight letter-spacing + 1.625 line-height give the
+     * editorial feel.
+     */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-display:
+        "Söhne", "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-family-body:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono:
+        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.625;
+
+    /* Type scale */
+    --text-xs: 12px;
+    --leading-xs: 18px;
+    --text-sm: 14px;
+    --leading-sm: 22px;
+    --text-base: 16px;
+    --leading-base: 26px;
+    --text-lg: 20px;
+    --leading-lg: 30px;
+    --text-xl: 24px;
+    --leading-xl: 32px;
+    --text-2xl: 32px;
+    --leading-2xl: 38px;
+    --text-3xl: 40px;
+    --leading-3xl: 44px;
+    --text-4xl: 52px;
+    --leading-4xl: 56px;
+    --text-display-1: 64px;
+    --leading-display-1: 68px;
+    --text-display-2: 80px;
+    --leading-display-2: 84px;
+
+    /* Intent mapping — what component variants resolve to. */
+    --intent-heading-major-size: var(--text-3xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-3xl);
+    --intent-heading-minor-size: var(--text-xl);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-xl);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-base);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-base);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-medium);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-4xl);
+    --intent-numeric-weight: var(--font-weight-bold);
+    --intent-numeric-leading: var(--leading-4xl);
+    --intent-numeric-family: var(--font-family-display);
+
+    /* ----------------------------------------------------------------
+     * Density — generous 10pt rhythm
+     * ----------------------------------------------------------------
+     * Slightly larger than Tailwind defaults so cards / dialogs / rows
+     * read as airy without feeling sparse. Per-element heights tuned to
+     * comfortable click targets (44px md is also the iOS HIG minimum).
+     */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 6px;
+    --space-3: 10px;
+    --space-4: 14px;
+    --space-5: 20px;
+    --space-6: 28px;
+    --space-7: 36px;
+    --space-8: 44px;
+    --space-9: 52px;
+    --space-10: 60px;
+    --space-11: 68px;
+    --space-12: 80px;
+
+    --button-height-sm: 36px;
+    --button-height-md: 44px;
+    --button-height-lg: 56px;
+    --input-height-sm: 36px;
+    --input-height-md: 44px;
+    --input-height-lg: 56px;
+    --row-height-compact: 48px;
+    --row-height-normal: 64px;
+    --row-height-spacious: 80px;
+
+    --card-padding-sm: 20px;
+    --card-padding-md: 28px;
+    --card-padding-lg: 40px;
+    --dialog-padding: 40px;
+    --section-gap: 64px;
+}