aeon-ui-engine 1.0.2 → 1.1.0

package/packages/core/dist/index.js

@@ -0,0 +1,635 @@
+// src/philosophy.ts
+var AEON_PRINCIPLE = "State is defined first. UI represents the totality of that definition.";
+var UI_IS_FUNCTION_OF_STATE = "UI = f(state)";
+
+// src/anatomy.ts
+function anatomy(scope, parts) {
+  return Object.fromEntries(parts.map((p) => [p, p]));
+}
+var buttonAnatomy = anatomy("button", [
+  "root",
+  "group",
+  "label",
+  "icon"
+]);
+var switchAnatomy = anatomy("switch", [
+  "root",
+  "control",
+  "thumb",
+  "label",
+  "hiddenInput"
+]);
+var checkboxAnatomy = anatomy("checkbox", [
+  "root",
+  "control",
+  "indicator",
+  "label",
+  "hiddenInput"
+]);
+var dialogAnatomy = anatomy("dialog", [
+  "root",
+  "trigger",
+  "portal",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+]);
+var tabsAnatomy = anatomy("tabs", [
+  "root",
+  "list",
+  "trigger",
+  "content",
+  "indicator"
+]);
+var accordionAnatomy = anatomy("accordion", [
+  "root",
+  "item",
+  "itemTrigger",
+  "itemContent",
+  "itemIndicator"
+]);
+var asyncAnatomy = anatomy("async", [
+  "root",
+  "track",
+  "segment",
+  "readout",
+  "readoutRail",
+  "readoutBody",
+  "actions"
+]);
+var fieldAnatomy = anatomy("field", [
+  "root",
+  "label",
+  "control",
+  "textarea",
+  "message",
+  "hint"
+]);
+var scrollAnatomy = anatomy("scroll", ["root", "viewport", "content"]);
+var playSurfaceAnatomy = anatomy("play", ["root", "mat", "region", "entity"]);
+var selectAnatomy = anatomy("select", [
+  "root",
+  "trigger",
+  "value",
+  "icon",
+  "positioner",
+  "content",
+  "item"
+]);
+var comboboxAnatomy = anatomy("combobox", [
+  "root",
+  "input",
+  "icon",
+  "content",
+  "item",
+  "empty"
+]);
+var popoverAnatomy = anatomy("popover", [
+  "root",
+  "trigger",
+  "positioner",
+  "content",
+  "arrow",
+  "closeTrigger"
+]);
+var menuAnatomy = anatomy("menu", [
+  "root",
+  "trigger",
+  "positioner",
+  "content",
+  "item",
+  "separator"
+]);
+var tooltipAnatomy = anatomy("tooltip", [
+  "root",
+  "trigger",
+  "positioner",
+  "content",
+  "arrow"
+]);
+var toastAnatomy = anatomy("toast", [
+  "viewport",
+  "root",
+  "title",
+  "description",
+  "closeTrigger"
+]);
+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", [
+  "root",
+  "item",
+  "itemControl",
+  "itemIndicator",
+  "itemLabel"
+]);
+var sliderAnatomy = anatomy("slider", [
+  "root",
+  "track",
+  "range",
+  "thumb",
+  "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) {
+  const states = options?.state ? Array.isArray(options.state) ? options.state.join(" ") : options.state : void 0;
+  return {
+    ...states ? { "data-aeon-state": states } : {},
+    ...options?.disabled ? { "data-disabled": "" } : {},
+    ...options?.focus ? { "data-focus": "" } : {},
+    ...options?.highlighted ? { "data-highlighted": "" } : {}
+  };
+}
+function scopeAttrs(scope, part = "root", options) {
+  return {
+    "data-aeon-scope": scope,
+    "data-aeon-part": part,
+    ...stateFields(options)
+  };
+}
+function partOnlyAttrs(part, options) {
+  return {
+    "data-aeon-part": part,
+    ...stateFields(options)
+  };
+}
+function partAttrs(scope, part, options) {
+  return scopeAttrs(scope, part, options);
+}
+
+// src/machine.ts
+import { setup } from "xstate";
+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;
+function canScrollY(el) {
+  return el.scrollHeight > el.clientHeight + EPS;
+}
+function canScrollX(el) {
+  return el.scrollWidth > el.clientWidth + EPS;
+}
+function getScrollSnapshot(el) {
+  const scrollY = canScrollY(el);
+  const scrollX = canScrollX(el);
+  let overflow = "none";
+  if (scrollY && scrollX) overflow = "both";
+  else if (scrollY) overflow = "y";
+  else if (scrollX) overflow = "x";
+  const atStartY = !scrollY || el.scrollTop <= EPS;
+  const atEndY = !scrollY || el.scrollTop + el.clientHeight >= el.scrollHeight - EPS;
+  const betweenY = scrollY && !atStartY && !atEndY;
+  const atStartX = !scrollX || el.scrollLeft <= EPS;
+  const atEndX = !scrollX || el.scrollLeft + el.clientWidth >= el.scrollWidth - EPS;
+  const betweenX = scrollX && !atStartX && !atEndX;
+  const parts = [];
+  if (overflow === "none") parts.push("idle");
+  else parts.push(`overflow-${overflow}`);
+  if (scrollY) {
+    if (atStartY && atEndY) parts.push("at-start-y", "at-end-y");
+    else if (atStartY) parts.push("at-start-y");
+    else if (atEndY) parts.push("at-end-y");
+    else parts.push("between-y");
+  }
+  if (scrollX) {
+    if (atStartX && atEndX) parts.push("at-start-x", "at-end-x");
+    else if (atStartX) parts.push("at-start-x");
+    else if (atEndX) parts.push("at-end-x");
+    else parts.push("between-x");
+  }
+  return {
+    overflow,
+    stateAttr: parts.join(" "),
+    atStartY,
+    atEndY,
+    betweenY,
+    atStartX,
+    atEndX,
+    betweenX
+  };
+}
+
+// src/layout.ts
+var NORM_PLANE = {
+  bottomLeft: "bottom-left",
+  topLeft: "top-left"
+};
+var DEFAULT_COMPACT_MQ = "(max-width: 39.99rem)";
+function clampNorm(point, bounds) {
+  return {
+    x: Math.min(bounds.xMax, Math.max(bounds.xMin, point.x)),
+    y: Math.min(bounds.yMax, Math.max(bounds.yMin, point.y))
+  };
+}
+function normFromClient(rect, clientX, clientY, options) {
+  const origin = options?.origin ?? NORM_PLANE.bottomLeft;
+  const w = rect.width || 1;
+  const h = rect.height || 1;
+  const x = (clientX - rect.left) / w * 100;
+  const yFromTop = (clientY - rect.top) / h;
+  const y = origin === NORM_PLANE.bottomLeft ? (1 - yFromTop) * 100 : yFromTop * 100;
+  const raw = { x, y };
+  return options?.bounds ? clampNorm(raw, options.bounds) : raw;
+}
+function clientFromNorm(rect, point, options) {
+  const origin = options?.origin ?? NORM_PLANE.bottomLeft;
+  const w = rect.width || 1;
+  const h = rect.height || 1;
+  const clientX = rect.left + point.x / 100 * w;
+  const yFromTop = origin === NORM_PLANE.bottomLeft ? 1 - point.y / 100 : point.y / 100;
+  const clientY = rect.top + yFromTop * h;
+  return { clientX, clientY };
+}
+function measureElement(el) {
+  if (!el || !("getBoundingClientRect" in el)) return null;
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0 ? rect : null;
+}
+function resolveRegionRect(primary, fallback) {
+  if (primary && primary.width > 0 && primary.height > 0) return primary;
+  if (fallback && fallback.width > 0 && fallback.height > 0) return fallback;
+  return null;
+}
+function matchLayoutMode(spec, mq = getCompactMq(spec)) {
+  return mq.matches ? "compact" : "wide";
+}
+function getCompactMq(spec) {
+  const query = spec.compactMq ?? DEFAULT_COMPACT_MQ;
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return { matches: false };
+  }
+  return window.matchMedia(query);
+}
+function layoutCompositionForMode(spec, mode) {
+  return spec.modes[mode];
+}
+function regionBoundsForMode(spec, mode, regionId) {
+  return spec.modes[mode].bounds?.[regionId];
+}
+function layoutModeAttrs(mode, composition) {
+  return {
+    "data-aeon-layout-mode": mode,
+    "data-aeon-layout-composition": composition
+  };
+}
+function insetNormCluster(point, bounds, inset = {}) {
+  const padX = inset.x ?? 0;
+  const padY = inset.y ?? 0;
+  const halfX = (bounds.xMax - bounds.xMin) / 2;
+  const halfY = (bounds.yMax - bounds.yMin) / 2;
+  const capX = Math.min(padX, halfX - 0.5);
+  const capY = Math.min(padY, halfY - 0.5);
+  return {
+    x: Math.min(bounds.xMax - capX, Math.max(bounds.xMin + capX, point.x)),
+    y: Math.min(bounds.yMax - capY, Math.max(bounds.yMin + capY, point.y))
+  };
+}
+
+// src/theme.ts
+var AEON_THEME_TRANSITION_CLASS = "aeon-theme-transition";
+function isAeonColorMode(value) {
+  return value === "light" || value === "dark";
+}
+function resolveAeonColorMode(theme, systemPrefersDark = false) {
+  if (theme === "dark") return "dark";
+  if (theme === "light") return "light";
+  return systemPrefersDark ? "dark" : "light";
+}
+function syncAeonColorMode(root, mode, options) {
+  const themeId = options?.themeId ?? root.dataset.aeonTheme ?? "default";
+  root.dataset.aeonTheme = themeId;
+  root.dataset.aeonMode = mode;
+  root.style.colorScheme = mode;
+  if (options?.enableTransitionClass !== false) {
+    root.classList.add(AEON_THEME_TRANSITION_CLASS);
+  }
+}
+function runAeonThemeTransition(apply) {
+  if (typeof document === "undefined") {
+    apply();
+    return;
+  }
+  const start = document.startViewTransition;
+  if (typeof start === "function") {
+    start.call(document, apply);
+    return;
+  }
+  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,
+  DEFAULT_COMPACT_MQ,
+  NORM_PLANE,
+  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,
+  scopeAttrs,
+  scrollAnatomy,
+  selectAnatomy,
+  separatorAnatomy,
+  sliderAnatomy,
+  stateToAttr,
+  switchAnatomy,
+  syncAeonColorMode,
+  tabsAnatomy,
+  themeSwitcherAnatomy,
+  threadAnatomy,
+  toastAnatomy,
+  tooltipAnatomy
+};

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

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  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.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.28.0/node_modules/esbuild/bin/esbuild" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/esbuild" "$@"
+fi

package/packages/core/node_modules/.bin/jiti

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.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/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+fi

package/packages/core/node_modules/.bin/tsc

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi