aeon-ui-engine 1.0.3 → 1.1.0

package/packages/core/dist/index.js

@@ -69,7 +69,7 @@ var fieldAnatomy = anatomy("field", [
   "hint"
 ]);
 var scrollAnatomy = anatomy("scroll", ["root", "viewport", "content"]);
-var playSurfaceAnatomy = anatomy("play", ["mat", "table", "dice", "bank"]);
+var playSurfaceAnatomy = anatomy("play", ["root", "mat", "region", "entity"]);
 var selectAnatomy = anatomy("select", [
   "root",
   "trigger",
@@ -117,7 +117,76 @@ var toastAnatomy = anatomy("toast", [
   "description",
   "closeTrigger"
 ]);
-var avatarAnatomy = anatomy("avatar", ["root", "image", "fallback"]);
+var avatarAnatomy = anatomy("avatar", ["root", "image", "fallback", "badge"]);
+var identityAnatomy = anatomy("identity", [
+  "root",
+  "avatar",
+  "title",
+  "subtitle",
+  "meta",
+  "trailing"
+]);
+var profileHeaderAnatomy = anatomy("profileHeader", [
+  "root",
+  "media",
+  "identity",
+  "metrics",
+  "actions",
+  "body"
+]);
+var entryAnatomy = anatomy("entry", [
+  "list",
+  "root",
+  "header",
+  "leading",
+  "heading",
+  "title",
+  "subtitle",
+  "meta",
+  "media",
+  "body",
+  "values",
+  "value",
+  "actions",
+  "footer"
+]);
+var metricStripAnatomy = anatomy("metricStrip", [
+  "root",
+  "chip",
+  "value",
+  "label"
+]);
+var listRowAnatomy = anatomy("listRow", [
+  "root",
+  "leading",
+  "label",
+  "description",
+  "trailing"
+]);
+var conversationAnatomy = anatomy("conversation", [
+  "root",
+  "item",
+  "leading",
+  "body",
+  "title",
+  "preview",
+  "meta",
+  "badge"
+]);
+var threadAnatomy = anatomy("thread", [
+  "root",
+  "list",
+  "item",
+  "bubble",
+  "meta",
+  "day"
+]);
+var composerAnatomy = anatomy("composer", [
+  "root",
+  "input",
+  "actions",
+  "send"
+]);
 var separatorAnatomy = anatomy("separator", ["root"]);
 var progressAnatomy = anatomy("progress", ["root", "track", "range", "label"]);
 var radioGroupAnatomy = anatomy("radioGroup", [
@@ -135,6 +204,55 @@ var sliderAnatomy = anatomy("slider", [
   "valueText"
 ]);
 var pinInputAnatomy = anatomy("pinInput", ["root", "input"]);
+var barAnatomy = anatomy("bar", [
+  "root",
+  "leading",
+  "center",
+  "trailing",
+  "seam"
+]);
+var panelAnatomy = anatomy("panel", [
+  "group",
+  "root",
+  "trigger",
+  "label",
+  "content"
+]);
+var appShellAnatomy = anatomy("appShell", [
+  "root",
+  "header",
+  "subheader",
+  "content",
+  "aside",
+  "footer",
+  "dock",
+  "scrim"
+]);
+var contentAnatomy = anatomy("content", [
+  "root",
+  "toolbar",
+  "body",
+  "pending",
+  "empty",
+  "error",
+  "success",
+  "sentinel"
+]);
+var navAnatomy = anatomy("nav", [
+  "root",
+  "item",
+  "indicator",
+  "label",
+  "icon",
+  "badge"
+]);
+var themeSwitcherAnatomy = anatomy("themeSwitcher", [
+  "root",
+  "modes",
+  "modeBtn",
+  "themeSelect",
+  "themeTrigger"
+]);
 
 // src/attrs.ts
 function stateFields(options) {
@@ -169,6 +287,70 @@ function stateToAttr(value) {
   if (value == null || typeof value === "string") return String(value ?? "");
   return Object.entries(value).map(([k, v]) => `${k}:${stateToAttr(v)}`).join(" ");
 }
+function fieldFace(value) {
+  if (value == null || typeof value !== "object") return "idle";
+  const v = value;
+  if (v.submission === "pending") return "pending";
+  if (v.validation === "invalid") return "invalid";
+  if (v.interaction === "dirty") return "dirty";
+  return "idle";
+}
+function fieldRegions(value) {
+  if (value == null || typeof value !== "object") {
+    return { interaction: "pristine", validation: "valid", submission: "idle" };
+  }
+  const v = value;
+  return {
+    interaction: typeof v.interaction === "string" ? v.interaction : "pristine",
+    validation: typeof v.validation === "string" ? v.validation : "valid",
+    submission: typeof v.submission === "string" ? v.submission : "idle"
+  };
+}
+function getRegionValue(value, region) {
+  if (value == null) return void 0;
+  if (typeof value === "string") return value === region ? value : void 0;
+  if (typeof value === "object") {
+    return value[region];
+  }
+  return void 0;
+}
+function regionPath(value, region) {
+  const path = [];
+  let cur = getRegionValue(value, region);
+  while (cur != null) {
+    if (typeof cur === "string") {
+      path.push(cur);
+      break;
+    }
+    if (typeof cur !== "object") break;
+    const entries = Object.entries(cur);
+    if (entries.length === 0) break;
+    if (entries.length > 1) {
+      path.push(entries.map(([k]) => k).sort().join("+"));
+      break;
+    }
+    const [key, next] = entries[0];
+    path.push(key);
+    cur = next;
+  }
+  return path;
+}
+function regionLeaf(value, region) {
+  const path = regionPath(value, region);
+  return path[path.length - 1];
+}
+function regionMatches(value, region, match) {
+  const path = regionPath(value, region);
+  if (path.length === 0) return false;
+  if (typeof match === "string") {
+    return path.includes(match) || path[path.length - 1] === match;
+  }
+  if (match.length === 0) return false;
+  if (match.length <= path.length) {
+    return match.every((part, i) => path[i] === part);
+  }
+  return false;
+}
 
 // src/scroll.ts
 var EPS = 1;
@@ -325,6 +507,56 @@ function runAeonThemeTransition(apply) {
   }
   apply();
 }
+var STORAGE_THEME = "aeon-theme";
+var STORAGE_MODE = "aeon-mode";
+var DEFAULT_THEME_ID = "default";
+var DEFAULT_MODE = "dark";
+function registerAeonThemes(themes) {
+  const map = Object.fromEntries(themes.map((t) => [t.id, t]));
+  const ids = themes.map((t) => t.id);
+  return { themes, map, ids };
+}
+function isAeonThemeId(value) {
+  return value !== void 0;
+}
+function isAeonMode(value) {
+  return value === "light" || value === "dark";
+}
+function applyAeonTheme(themeId, mode, themeMap) {
+  const root = document.documentElement;
+  root.dataset.aeonTheme = themeId;
+  root.dataset.aeonMode = mode;
+  root.style.colorScheme = mode;
+  if (themeMap && themeMap[themeId]) {
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) {
+      meta.setAttribute("content", themeMap[themeId][mode].bg);
+    }
+  }
+  try {
+    localStorage.setItem(STORAGE_THEME, themeId);
+    localStorage.setItem(STORAGE_MODE, mode);
+  } catch {
+  }
+}
+function initAeonTheme(themeMap) {
+  let themeId = DEFAULT_THEME_ID;
+  let mode = DEFAULT_MODE;
+  try {
+    const storedTheme = localStorage.getItem(STORAGE_THEME);
+    const storedMode = localStorage.getItem(STORAGE_MODE);
+    if (storedTheme) themeId = storedTheme;
+    if (storedMode && isAeonMode(storedMode)) {
+      mode = storedMode;
+    } else if (!storedMode && window.matchMedia("(prefers-color-scheme: light)").matches) {
+      mode = "light";
+    }
+  } catch {
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) mode = "light";
+  }
+  applyAeonTheme(themeId, mode, themeMap);
+  return { themeId, mode };
+}
 export {
   AEON_PRINCIPLE,
   AEON_THEME_TRANSITION_CLASS,
@@ -333,34 +565,57 @@ export {
   UI_IS_FUNCTION_OF_STATE,
   accordionAnatomy,
   anatomy,
+  appShellAnatomy,
+  applyAeonTheme,
   asyncAnatomy,
   avatarAnatomy,
+  barAnatomy,
   buttonAnatomy,
   checkboxAnatomy,
   clampNorm,
   clientFromNorm,
   comboboxAnatomy,
+  composerAnatomy,
+  contentAnatomy,
+  conversationAnatomy,
   setup as createAeonMachine,
   dialogAnatomy,
+  entryAnatomy,
   fieldAnatomy,
+  fieldFace,
+  fieldRegions,
   getCompactMq,
+  getRegionValue,
   getScrollSnapshot,
+  identityAnatomy,
+  initAeonTheme,
   insetNormCluster,
   isAeonColorMode,
+  isAeonMode,
+  isAeonThemeId,
   layoutCompositionForMode,
   layoutModeAttrs,
+  listRowAnatomy,
   matchLayoutMode,
   measureElement,
   menuAnatomy,
+  metricStripAnatomy,
+  navAnatomy,
   normFromClient,
+  panelAnatomy,
   partAttrs,
   partOnlyAttrs,
   pinInputAnatomy,
   playSurfaceAnatomy,
   popoverAnatomy,
+  profileHeaderAnatomy,
   progressAnatomy,
   radioGroupAnatomy,
   regionBoundsForMode,
+  regionLeaf,
+  regionMatches,
+  regionPath,
+  registerAeonThemes,
   resolveAeonColorMode,
   resolveRegionRect,
   runAeonThemeTransition,
@@ -373,6 +628,8 @@ export {
   switchAnatomy,
   syncAeonColorMode,
   tabsAnatomy,
+  themeSwitcherAnatomy,
+  threadAnatomy,
   toastAnatomy,
   tooltipAnatomy
 };

package/packages/core/node_modules/.bin/esbuild

@@ -10,12 +10,12 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/esbuild" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/esbuild" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/esbuild" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/esbuild" "$@"
 fi

package/packages/core/node_modules/.bin/vite

@@ -10,12 +10,12 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vite@6.4.2_@types+node@22.19.19_jiti@2.7.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
 fi

package/packages/core/node_modules/.bin/vitest

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"

package/packages/core/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":2.2672079999999823,"failed":false}],[":src/theme.test.ts",{"duration":1.6362909999999715,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":2.8135839999999916,"failed":false}],[":src/theme.test.ts",{"duration":2.691708999999989,"failed":false}],[":../../apps/demo/src/aeonSchemaCompiler.test.ts",{"duration":7.737041999999974,"failed":false}]]}

package/packages/core/package.json

@@ -8,9 +8,21 @@
     "url": "https://github.com/GenericCPU/aeon-ui.git",
     "directory": "packages/core"
   },
-  "publishConfig": { "access": "public" },
-  "files": ["dist", "theme-transition.css", "README.md"],
-  "keywords": ["aeon-ui", "statechart", "xstate", "headless", "anatomy"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "theme-transition.css",
+    "README.md"
+  ],
+  "keywords": [
+    "aeon-ui",
+    "statechart",
+    "xstate",
+    "headless",
+    "anatomy"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,11 +39,11 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "xstate": "^5.19.2"
+    "xstate": "^5.32.0"
   },
   "devDependencies": {
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   }
 }

package/packages/core/src/anatomy.ts

@@ -81,10 +81,10 @@ export const fieldAnatomy = anatomy('field', [
 export const scrollAnatomy = anatomy('scroll', ['root', 'viewport', 'content'] as const)
 
 /**
- * Play / game surface — mat shell with table, dice, and bank regions.
- * Use with normalized layout coords (@see docs/LAYOUT_COORDINATES.md).
+ * Spatial play surface — universal mat + regions + entities (not a specific game).
+ * App logic names regions; entity labels come from compose `items`. See LAYOUT_COORDINATES.md.
  */
-export const playSurfaceAnatomy = anatomy('play', ['mat', 'table', 'dice', 'bank'] as const)
+export const playSurfaceAnatomy = anatomy('play', ['root', 'mat', 'region', 'entity'] as const)
 
 export const selectAnatomy = anatomy('select', [
   'root',
@@ -140,8 +140,118 @@ export const toastAnatomy = anatomy('toast', [
   'closeTrigger',
 ] as const)
 
-/** Profile image — loaded / loading / error on root `data-aeon-state`. */
-export const avatarAnatomy = anatomy('avatar', ['root', 'image', 'fallback'] as const)
+/** Profile image — loaded / loading / error on root `data-aeon-state`. Badge = presence / status corner. */
+export const avatarAnatomy = anatomy('avatar', ['root', 'image', 'fallback', 'badge'] as const)
+
+/**
+ * Identity strip — avatar + primary/secondary text (items-market AvatarWithName).
+ * Presentational; compose into ProfileHeader / ListRow / AccountCluster.
+ */
+export const identityAnatomy = anatomy('identity', [
+  'root',
+  'avatar',
+  'title',
+  'subtitle',
+  'meta',
+  'trailing',
+] as const)
+
+/**
+ * Profile header — dense account hero (not dating). Media optional; metrics + actions zones.
+ * Spatial: identity leading, metrics inline, actions trailing / bottom leading pair.
+ */
+export const profileHeaderAnatomy = anatomy('profileHeader', [
+  'root',
+  'media',
+  'identity',
+  'metrics',
+  'actions',
+  'body',
+] as const)
+
+/**
+ * Entry — compact multi-value content card (feed post, catalog listing, activity item).
+ * Universal layout only — not a social/marketplace niche.
+ * List stacks cards; Root is one card (idle | selected | muted).
+ * Zones: header (leading · heading · meta) · media · body · values · actions · footer.
+ */
+export const entryAnatomy = anatomy('entry', [
+  'list',
+  'root',
+  'header',
+  'leading',
+  'heading',
+  'title',
+  'subtitle',
+  'meta',
+  'media',
+  'body',
+  'values',
+  'value',
+  'actions',
+  'footer',
+] as const)
+
+/**
+ * Metric strip — ultra-dense value/label chips (items-market im-stat cluster).
+ * Generic stats only — not wallet/currency product niches.
+ */
+export const metricStripAnatomy = anatomy('metricStrip', [
+  'root',
+  'chip',
+  'value',
+  'label',
+] as const)
+
+/**
+ * List row — settings / account menu row (h-12 hit target, leading icon, trailing control).
+ */
+export const listRowAnatomy = anatomy('listRow', [
+  'root',
+  'leading',
+  'label',
+  'description',
+  'trailing',
+] as const)
+
+/**
+ * Conversation — inbox / DM list row (universal messaging chrome, not dating).
+ * Leading avatar · title · preview · meta (time) · badge (unread).
+ * Item state: idle | unread | selected.
+ */
+export const conversationAnatomy = anatomy('conversation', [
+  'root',
+  'item',
+  'leading',
+  'body',
+  'title',
+  'preview',
+  'meta',
+  'badge',
+] as const)
+
+/**
+ * Thread — message stream. Items project mine | theirs | pending | failed.
+ */
+export const threadAnatomy = anatomy('thread', [
+  'root',
+  'list',
+  'item',
+  'bubble',
+  'meta',
+  'day',
+] as const)
+
+/**
+ * Composer — bottom compose chrome for threads (input + send).
+ * Root state: idle | sending | disabled | error.
+ */
+export const composerAnatomy = anatomy('composer', [
+  'root',
+  'input',
+  'actions',
+  'send',
+] as const)
 
 export const separatorAnatomy = anatomy('separator', ['root'] as const)
 
@@ -165,3 +275,84 @@ export const sliderAnatomy = anatomy('slider', [
 ] as const)
 
 export const pinInputAnatomy = anatomy('pinInput', ['root', 'input'] as const)
+
+/**
+ * Bar — horizontal layout primitive for toolbars, headers, footers.
+ * Enforces safe flex behavior: no overlap, responsive collapse via overflow.
+ * Parts: root (flex row), leading, center, trailing, optional seam (sticky stack join).
+ * Drive sticky lifecycle with stickyBarMachine → data-aeon-state on root.
+ */
+export const barAnatomy = anatomy('bar', [
+  'root',
+  'leading',
+  'center',
+  'trailing',
+  'seam',
+] as const)
+
+/**
+ * Panel — collapsible layout region for split views.
+ * Group lays out siblings; Root is expanded|collapsed; Label rails vertically when collapsed.
+ */
+export const panelAnatomy = anatomy('panel', [
+  'group',
+  'root',
+  'trigger',
+  'label',
+  'content',
+] as const)
+
+/**
+ * App shell — layered application chrome (items-market MainLayout pattern).
+ * header / subheader / content / aside / footer / dock / scrim under root.
+ */
+export const appShellAnatomy = anatomy('appShell', [
+  'root',
+  'header',
+  'subheader',
+  'content',
+  'aside',
+  'footer',
+  'dock',
+  'scrim',
+] as const)
+
+/**
+ * Content region — status-slotted body. Every contentRegionMachine state has a part.
+ * Pair with Async for fetch; use slots for idle/pending/empty/error/ready/loadingMore/success.
+ */
+export const contentAnatomy = anatomy('content', [
+  'root',
+  'toolbar',
+  'body',
+  'pending',
+  'empty',
+  'error',
+  'success',
+  'sentinel',
+] as const)
+
+/**
+ * Nav — navigational collection (top links, bottom tabs, side rail).
+ * Selection reuses tabsMachine; items project inactive|active|disabled.
+ */
+export const navAnatomy = anatomy('nav', [
+  'root',
+  'item',
+  'indicator',
+  'label',
+  'icon',
+  'badge',
+] as const)
+
+/**
+ * ThemeSwitcher — mode toggle (light/dark) + theme preset selector.
+ * Parts: root, modes (button group), modeBtn, themeSelect, themeTrigger.
+ */
+export const themeSwitcherAnatomy = anatomy('themeSwitcher', [
+  'root',
+  'modes',
+  'modeBtn',
+  'themeSelect',
+  'themeTrigger',
+] as const)