@geajs/ui 0.1.4 → 0.2.0

package/dist/zag-component.mjs

@@ -0,0 +1,135 @@
+import { Component, GEA_MAPS, GEA_SYNC_MAP, GEA_UPDATE_PROPS } from "@geajs/core";
+import { VanillaMachine, normalizeProps, spreadProps } from "@zag-js/vanilla";
+//#region src/primitives/zag-component.ts
+var ZagComponent = class extends Component {
+	createMachine(_props) {
+		return null;
+	}
+	getMachineProps(_props) {
+		return {};
+	}
+	connectApi(_service) {
+		return null;
+	}
+	getSpreadMap() {
+		return {};
+	}
+	syncState(_api) {}
+	created(props) {
+		if (!this._spreadCleanups) this._spreadCleanups = /* @__PURE__ */ new Map();
+		if (this._spreadScheduled === void 0) this._spreadScheduled = false;
+		if (!this._zagIdMap) this._zagIdMap = /* @__PURE__ */ new Map();
+		if (!this._elementCache) this._elementCache = /* @__PURE__ */ new Map();
+		const machineDef = this.createMachine(props);
+		if (!machineDef) return;
+		this._machine = new VanillaMachine(machineDef, this.getMachineProps(props));
+		const zagIdMap = this._zagIdMap;
+		const origGetById = this._machine.scope.getById;
+		this._machine.scope.getById = ((id) => {
+			return origGetById(id) || zagIdMap.get(id) || null;
+		});
+		this._machine.start();
+		this._api = this.connectApi(this._machine.service);
+		this.syncState(this._api);
+		this._machine.subscribe(() => {
+			if (!this._machine) return;
+			this._api = this.connectApi(this._machine.service);
+			this._scheduleSpreadApplication();
+		});
+	}
+	_syncMachineProps() {
+		const machine = this._machine;
+		if (!machine?.userPropsRef) return;
+		const next = this.getMachineProps(this.props);
+		machine.userPropsRef.current = next;
+		this._api = this.connectApi(this._machine.service);
+		this._scheduleSpreadApplication();
+	}
+	[GEA_UPDATE_PROPS](nextProps) {
+		super[GEA_UPDATE_PROPS](nextProps);
+		this._syncMachineProps();
+	}
+	_scheduleSpreadApplication() {
+		if (this._spreadScheduled) return;
+		this._spreadScheduled = true;
+		queueMicrotask(() => {
+			this._spreadScheduled = false;
+			this._applyAllSpreads();
+		});
+	}
+	_resolveProps(getter, el) {
+		if (typeof getter === "function") return getter(this._api, el);
+		const method = this._api[getter];
+		if (typeof method !== "function") return null;
+		return method.call(this._api);
+	}
+	_queryAllIncludingSelf(selector) {
+		const results = this.$$(selector);
+		const root = this.el;
+		if (root && root.matches(selector) && !results.includes(root)) results.unshift(root);
+		return results;
+	}
+	_applyAllSpreads() {
+		if (!this.rendered || !this._api) return;
+		const map = this.getSpreadMap();
+		for (const selector in map) {
+			const getter = map[selector];
+			let elements = this._elementCache.get(selector);
+			if (!elements) {
+				elements = this._queryAllIncludingSelf(selector);
+				this._elementCache.set(selector, elements);
+			}
+			for (let i = 0; i < elements.length; i++) {
+				const el = elements[i];
+				const key = selector + ":" + i;
+				const nextProps = this._resolveProps(getter, el);
+				if (!nextProps) continue;
+				const bindingId = el.id;
+				const cleanup = spreadProps(el, nextProps);
+				if (bindingId && el.id !== bindingId) {
+					this._zagIdMap.set(el.id, el);
+					el.id = bindingId;
+				}
+				this._spreadCleanups.set(key, cleanup);
+			}
+		}
+	}
+	[GEA_SYNC_MAP](idx) {
+		super[GEA_SYNC_MAP](idx);
+		this._elementCache.clear();
+		this._scheduleSpreadApplication();
+	}
+	onAfterRender() {
+		this._cacheArrayContainers();
+		this._elementCache.clear();
+		this._applyAllSpreads();
+	}
+	_cacheArrayContainers() {
+		const maps = this[GEA_MAPS];
+		if (!maps) return;
+		for (const idx in maps) {
+			const map = maps[idx];
+			map.container = map.getContainer();
+			if (map.container) this[map.containerProp] = map.container;
+		}
+	}
+	dispose() {
+		for (const cleanup of this._spreadCleanups.values()) cleanup();
+		this._spreadCleanups.clear();
+		if (this._machine) {
+			this._machine.stop();
+			this._machine = null;
+		}
+		this._api = null;
+		this._zagIdMap?.clear();
+		this._elementCache?.clear();
+		super.dispose();
+	}
+	static {
+		this.normalizeProps = normalizeProps;
+	}
+};
+//#endregion
+export { ZagComponent as t };
+
+//# sourceMappingURL=zag-component.mjs.map

package/dist/zag-component.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zag-component.mjs","names":[],"sources":["../src/primitives/zag-component.ts"],"sourcesContent":["import { Component, GEA_MAPS, GEA_SYNC_MAP, GEA_UPDATE_PROPS } from '@geajs/core'\nimport { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla'\n\ntype SpreadCleanup = () => void\ntype PropsGetter = string | ((api: any, el: Element) => Record<string, any>)\n\nexport interface SpreadMap {\n  [selector: string]: PropsGetter\n}\n\nexport default class ZagComponent<P = Record<string, unknown>> extends Component<P> {\n  declare _machine: VanillaMachine<any> | null\n  declare _api: any\n  declare _spreadCleanups: Map<string, SpreadCleanup>\n  declare _spreadScheduled: boolean\n  declare _zagIdMap: Map<string, Element>\n  declare _elementCache: Map<string, Element[]>\n\n  createMachine(_props: any): any {\n    return null\n  }\n\n  getMachineProps(_props: any): any {\n    return {}\n  }\n\n  connectApi(_service: any): any {\n    return null\n  }\n\n  getSpreadMap() {\n    return {}\n  }\n\n  syncState(_api: any): void {}\n\n  created(props: P) {\n    if (!this._spreadCleanups) this._spreadCleanups = new Map()\n    if (this._spreadScheduled === undefined) this._spreadScheduled = false\n    if (!this._zagIdMap) this._zagIdMap = new Map()\n    if (!this._elementCache) this._elementCache = new Map()\n\n    const machineDef = this.createMachine(props)\n    if (!machineDef) return\n\n    const machineProps = this.getMachineProps(props)\n    this._machine = new VanillaMachine(machineDef, machineProps)\n\n    // Patch scope.getById: Zag uses IDs like \"tags-input:xyz:...\" for DOM\n    // lookups, but _applyAllSpreads restores compiler binding IDs on elements.\n    // The mapping lets Zag find elements by their expected Zag IDs.\n    const zagIdMap = this._zagIdMap\n    const origGetById = this._machine.scope.getById\n    this._machine.scope.getById = ((id: string) => {\n      return origGetById(id) || zagIdMap.get(id) || null\n    }) as typeof origGetById\n\n    this._machine.start()\n\n    this._api = this.connectApi(this._machine.service)\n    this.syncState(this._api)\n\n    this._machine.subscribe(() => {\n      if (!this._machine) return\n      this._api = this.connectApi(this._machine.service)\n      this._scheduleSpreadApplication()\n    })\n  }\n\n  _syncMachineProps() {\n    const machine = this._machine as any\n    if (!machine?.userPropsRef) return\n    const next = this.getMachineProps(this.props)\n    machine.userPropsRef.current = next\n    this._api = this.connectApi(this._machine!.service)\n    this._scheduleSpreadApplication()\n  }\n\n  [GEA_UPDATE_PROPS](nextProps: Record<string, any>) {\n    super[GEA_UPDATE_PROPS](nextProps)\n    this._syncMachineProps()\n  }\n\n  _scheduleSpreadApplication() {\n    if (this._spreadScheduled) return\n    this._spreadScheduled = true\n    queueMicrotask(() => {\n      this._spreadScheduled = false\n      this._applyAllSpreads()\n    })\n  }\n\n  _resolveProps(getter: PropsGetter, el: Element): Record<string, any> | null {\n    if (typeof getter === 'function') {\n      return getter(this._api, el)\n    }\n    const method = this._api[getter]\n    if (typeof method !== 'function') return null\n    return method.call(this._api)\n  }\n\n  _queryAllIncludingSelf(selector: string): Element[] {\n    const results = this.$$(selector)\n    const root = this.el\n    if (root && root.matches(selector) && !results.includes(root)) {\n      results.unshift(root)\n    }\n    return results\n  }\n\n  _applyAllSpreads() {\n    if (!this.rendered || !this._api) return\n    const map = this.getSpreadMap()\n\n    for (const selector in map) {\n      const getter = map[selector]\n\n      let elements = this._elementCache.get(selector)\n      if (!elements) {\n        elements = this._queryAllIncludingSelf(selector)\n        this._elementCache.set(selector, elements)\n      }\n\n      for (let i = 0; i < elements.length; i++) {\n        const el = elements[i]\n        const key = selector + ':' + i\n        const nextProps = this._resolveProps(getter, el)\n        if (!nextProps) continue\n\n        // Preserve compiled binding IDs: Zag's spreadProps overrides element\n        // IDs, but the compiler's observers rely on getElementById with binding\n        // IDs. We restore the binding ID and store the Zag ID in _zagIdMap so\n        // scope.getById (patched in created()) can still find elements.\n        // Note: we never clear _zagIdMap here because spreadProps caches\n        // previous attrs and skips unchanged values — on subsequent calls the\n        // ID won't be re-set, so we'd lose the mapping.\n        const bindingId = el.id\n        const cleanup = spreadProps(el, nextProps)\n        if (bindingId && el.id !== bindingId) {\n          this._zagIdMap.set(el.id, el)\n          el.id = bindingId\n        }\n        this._spreadCleanups.set(key, cleanup)\n      }\n    }\n  }\n\n  [GEA_SYNC_MAP](idx: number) {\n    super[GEA_SYNC_MAP](idx)\n    this._elementCache.clear()\n    // After the map syncs new/updated DOM items, Zag spreads must be\n    // re-applied because createItemFn produces elements without Zag's\n    // event handlers and attributes.\n    this._scheduleSpreadApplication()\n  }\n\n  onAfterRender() {\n    this._cacheArrayContainers()\n    this._elementCache.clear()\n    this._applyAllSpreads()\n  }\n\n  _cacheArrayContainers() {\n    const maps = (this as any)[GEA_MAPS]\n    if (!maps) return\n    for (const idx in maps) {\n      const map = maps[idx]\n      map.container = map.getContainer()\n      if (map.container) (this as any)[map.containerProp] = map.container\n    }\n  }\n\n  dispose() {\n    for (const cleanup of this._spreadCleanups.values()) {\n      cleanup()\n    }\n    this._spreadCleanups.clear()\n\n    if (this._machine) {\n      this._machine.stop()\n      this._machine = null\n    }\n    this._api = null\n    this._zagIdMap?.clear()\n    this._elementCache?.clear()\n\n    super.dispose()\n  }\n\n  static normalizeProps = normalizeProps\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geajs/ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Accessible UI components for Gea, powered by Zag.js state machines and styled with Tailwind CSS",
   "type": "module",
   "main": "dist/index.mjs",
@@ -15,9 +15,10 @@
       "import": "./dist/index.mjs"
     },
     "./style.css": "./dist/theme.css",
-    "./tailwind-preset": {
-      "types": "./dist/tailwind-preset.d.mts",
-      "import": "./dist/tailwind-preset.mjs"
+    "./styles/theme.css": "./dist/theme.css",
+    "./*": {
+      "types": "./dist/*.d.mts",
+      "import": "./dist/*.mjs"
     }
   },
   "repository": {
@@ -85,12 +86,11 @@
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@playwright/test": "^1.58.2",
-    "autoprefixer": "^10.4.27",
-    "postcss": "^8.5.8",
+    "@tailwindcss/vite": "^4.0.0",
     "prismjs": "^1.30.0",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.0.0",
     "tsdown": "^0.21.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }
-}
+}