@agent-native/core 0.114.2 → 0.114.3

package/corpus/README.md

@@ -28,6 +28,6 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 1516
+- core files: 1517
 - toolkit files: 137
-- template files: 6101
+- template files: 6105

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @agent-native/core
 
+## 0.114.3
+
+### Patch Changes
+
+- c47eb50: fix(core): keep feature-flag definitions out of the browser server graph
+
+  App-shared config that imported feature-flag definitions from
+  `@agent-native/core/feature-flags` pulled the barrel's server re-exports
+  (`store` → `settings/store` → `db/client` → request telemetry) into the client
+  dev graph. Vite's dev server does not tree-shake, so the browser evaluated that
+  server chain and `request-telemetry`'s top-level `new AsyncLocalStorage()` threw
+  against the externalized `node:async_hooks` stub, breaking app load in dev
+  (production tree-shakes it away and was unaffected).
+  - Add a client-safe `@agent-native/core/feature-flags/registry` entry for
+    `defineFeatureFlag` / `defineFeatureFlags` / `registerFeatureFlags` so shared
+    config no longer imports the server barrel.
+  - Make `db/request-telemetry` and `settings/store` resolve `AsyncLocalStorage` /
+    `EventEmitter` lazily via `process.getBuiltinModule` (matching
+    `server/request-context`) instead of a top-level value import, so the modules
+    can be evaluated in any runtime without tripping the browser stub.
+  - Add a regression guard asserting the client-safe registry entry never reaches
+    the server layer and that those modules never statically value-import the
+    builtins.
+
 ## 0.114.2
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.114.2",
+  "version": "0.114.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -159,6 +159,7 @@
     "./application-state": "./dist/application-state/index.js",
     "./settings": "./dist/settings/index.js",
     "./feature-flags": "./dist/feature-flags/index.js",
+    "./feature-flags/registry": "./dist/feature-flags/registry.js",
     "./feature-flags/actions/get-feature-flags": "./dist/feature-flags/actions/get-feature-flags.js",
     "./feature-flags/actions/list-feature-flags": "./dist/feature-flags/actions/list-feature-flags.js",
     "./feature-flags/actions/set-feature-flag": "./dist/feature-flags/actions/set-feature-flag.js",

package/corpus/core/src/db/request-telemetry.ts

@@ -1,4 +1,4 @@
-import { AsyncLocalStorage } from "node:async_hooks";
+import { getAsyncLocalStorageCtor } from "../shared/optional-node-builtins.js";
 
 export type DatabaseOperationKind = "connect" | "query";
 
@@ -30,15 +30,39 @@ interface StartupDatabaseTelemetryState {
   claimed: boolean;
   telemetry: DatabaseRequestTelemetry;
 }
+interface TelemetryStorage {
+  getStore(): DatabaseRequestTelemetry | undefined;
+  run<T>(store: DatabaseRequestTelemetry, fn: () => T): T;
+  enterWith(store: DatabaseRequestTelemetry): void;
+}
+
 type GlobalWithDatabaseTelemetry = typeof globalThis & {
-  [STORAGE_KEY]?: AsyncLocalStorage<DatabaseRequestTelemetry>;
+  [STORAGE_KEY]?: TelemetryStorage;
   [STARTUP_STATE_KEY]?: StartupDatabaseTelemetryState;
 };
 
 const globalRef = globalThis as GlobalWithDatabaseTelemetry;
-const storage =
-  globalRef[STORAGE_KEY] ??
-  (globalRef[STORAGE_KEY] = new AsyncLocalStorage<DatabaseRequestTelemetry>());
+
+// AsyncLocalStorage is resolved lazily, never at module load: this module can
+// land in the browser dev graph, where a top-level `new AsyncLocalStorage()`
+// would throw against Vite's externalized `node:async_hooks` stub. On non-Node
+// runtimes telemetry no-ops.
+const NOOP_STORAGE: TelemetryStorage = {
+  getStore: () => undefined,
+  run: (_store, fn) => fn(),
+  enterWith: () => {},
+};
+
+function getStorage(): TelemetryStorage {
+  const existing = globalRef[STORAGE_KEY];
+  if (existing) return existing;
+  const Ctor = getAsyncLocalStorageCtor();
+  const created: TelemetryStorage = Ctor
+    ? new Ctor<DatabaseRequestTelemetry>()
+    : NOOP_STORAGE;
+  globalRef[STORAGE_KEY] = created;
+  return created;
+}
 
 export function createDatabaseRequestTelemetry(): DatabaseRequestTelemetry {
   return {
@@ -66,7 +90,7 @@ const startupState =
   });
 
 function currentDatabaseTelemetry(): DatabaseRequestTelemetry | undefined {
-  const requestTelemetry = storage.getStore();
+  const requestTelemetry = getStorage().getStore();
   if (requestTelemetry) return requestTelemetry;
   if (!startupState.claimed && Date.now() <= startupState.captureUntil) {
     return startupState.telemetry;
@@ -86,13 +110,13 @@ export function runWithDatabaseRequestTelemetry<T>(
   telemetry: DatabaseRequestTelemetry,
   fn: () => T,
 ): T {
-  return storage.run(telemetry, fn);
+  return getStorage().run(telemetry, fn);
 }
 
 export function enterDatabaseRequestTelemetry(
   telemetry: DatabaseRequestTelemetry,
 ): void {
-  storage.enterWith(telemetry);
+  getStorage().enterWith(telemetry);
 }
 
 export function beginDatabaseOperation(

package/corpus/core/src/settings/store.ts

@@ -1,9 +1,10 @@
-import { EventEmitter } from "events";
+import type { EventEmitter } from "node:events";
 
 import { getDbExec, isPostgres, intType } from "../db/client.js";
 import { ensureIndexExists, ensureTableExists } from "../db/ddl-guard.js";
 import { widenIntColumnsToBigInt } from "../db/widen-columns.js";
 import { getRequestContext } from "../server/request-context.js";
+import { createEventEmitter } from "../shared/optional-node-builtins.js";
 
 let _initPromise: Promise<void> | undefined;
 
@@ -29,12 +30,20 @@ function requestSettingsCache(): Map<string, string | null> | null {
   return cache;
 }
 
-const _emitter = new EventEmitter();
+// Created lazily so this module can be evaluated in the browser dev graph
+// without a top-level `new EventEmitter()` tripping Vite's externalized
+// `node:events` stub. The emitter drives server-side SSE fan-out only.
+let _emitter: EventEmitter | undefined;
 
-export function getSettingsEmitter(): EventEmitter {
+function settingsEmitter(): EventEmitter {
+  if (!_emitter) _emitter = createEventEmitter();
   return _emitter;
 }
 
+export function getSettingsEmitter(): EventEmitter {
+  return settingsEmitter();
+}
+
 function settingsTable(): string {
   return isPostgres() ? "public.settings" : "settings";
 }
@@ -174,7 +183,7 @@ export async function mutateSetting(
           });
     if (result.rowsAffected === 0) continue;
     requestSettingsCache()?.set(key, nextRaw);
-    _emitter.emit("settings", {
+    settingsEmitter().emit("settings", {
       source: "settings",
       type: "change",
       key,
@@ -200,7 +209,7 @@ export async function putSetting(
     args: [key, JSON.stringify(value), Date.now()],
   });
   requestSettingsCache()?.set(key, JSON.stringify(value));
-  _emitter.emit("settings", {
+  settingsEmitter().emit("settings", {
     source: "settings",
     type: "change",
     key,
@@ -221,7 +230,7 @@ export async function deleteSetting(
   });
   requestSettingsCache()?.set(key, null);
   if (result.rowsAffected > 0) {
-    _emitter.emit("settings", {
+    settingsEmitter().emit("settings", {
       source: "settings",
       type: "delete",
       key,

package/corpus/core/src/shared/optional-node-builtins.ts

@@ -0,0 +1,66 @@
+/**
+ * Browser-safe accessors for optional Node builtins.
+ *
+ * `node:async_hooks` and `node:events` are server-only, but the modules that
+ * use them (db telemetry, settings/resource emitters) can land in the browser
+ * dev graph before tree-shaking runs. A static `import { X } from "node:..."`
+ * resolves to Vite's externalized stub and throws the instant the value is
+ * touched at module load. We read the builtin through `process.getBuiltinModule`
+ * instead — the same guard `server/request-context.ts` uses — so there is no
+ * static `node:` import to evaluate in the browser, and callers fall back to a
+ * no-op on non-Node runtimes (browser, or Node without getBuiltinModule).
+ */
+import type { AsyncLocalStorage } from "node:async_hooks";
+import type { EventEmitter } from "node:events";
+
+type BuiltinProcess = {
+  versions?: { node?: string };
+  getBuiltinModule?: (name: string) => unknown;
+};
+
+function nodeBuiltin<T>(name: string): T | undefined {
+  const proc =
+    typeof process === "undefined" ? undefined : (process as BuiltinProcess);
+  if (
+    typeof window !== "undefined" ||
+    !proc ||
+    !proc.versions?.node ||
+    typeof proc.getBuiltinModule !== "function"
+  ) {
+    return undefined;
+  }
+  return proc.getBuiltinModule(name) as T | undefined;
+}
+
+export type AsyncLocalStorageCtor = new <T>() => AsyncLocalStorage<T>;
+
+export function getAsyncLocalStorageCtor(): AsyncLocalStorageCtor | undefined {
+  return nodeBuiltin<{ AsyncLocalStorage: AsyncLocalStorageCtor }>(
+    "node:async_hooks",
+  )?.AsyncLocalStorage;
+}
+
+type EventEmitterCtor = new () => EventEmitter;
+
+/**
+ * Returns a real Node EventEmitter on Node, or a no-op emitter elsewhere. The
+ * emitters that use this drive server-side SSE fan-out; nothing subscribes in
+ * the browser, so the no-op fallback is inert rather than wrong.
+ */
+export function createEventEmitter(): EventEmitter {
+  const Ctor = nodeBuiltin<{ EventEmitter: EventEmitterCtor }>(
+    "node:events",
+  )?.EventEmitter;
+  if (Ctor) return new Ctor();
+  const noop = {
+    on: () => noop,
+    off: () => noop,
+    once: () => noop,
+    addListener: () => noop,
+    removeListener: () => noop,
+    removeAllListeners: () => noop,
+    setMaxListeners: () => noop,
+    emit: () => false,
+  };
+  return noop as unknown as EventEmitter;
+}

package/corpus/core/src/templates/default/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/core/src/templates/headless/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/core/src/templates/workspace-core/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/core/src/vite/client.ts

@@ -805,6 +805,7 @@ const CORE_CLIENT_SUBPATHS = [
   "@agent-native/core/client/components/RemoteSelectionRings",
   "@agent-native/core/client/visual-style-controls",
   "@agent-native/core/client/feature-flags",
+  "@agent-native/core/feature-flags/registry",
   "@agent-native/core/client/hooks",
   "@agent-native/core/client/host",
   "@agent-native/core/client/i18n",
@@ -1158,6 +1159,10 @@ function getCoreSourceAliases(
       coreSrc,
       "client/feature-flags/index.ts",
     ),
+    "@agent-native/core/feature-flags/registry": path.join(
+      coreSrc,
+      "feature-flags/registry.ts",
+    ),
     "@agent-native/core/client/hooks": path.join(
       coreSrc,
       "client/hooks/index.ts",

package/corpus/templates/analytics/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/assets/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -2950,7 +2950,7 @@ function AssetCardsView({ items }: { items: LaneGalleryItem[] }) {
                     aria-label={t("library.selectAsset", {
                       title: item.title,
                     })}
-                    className="border-background bg-background/90 shadow-sm"
+                    className="border-2 border-foreground/40 bg-background/90 shadow-sm"
                   />
                 ) : null}
               </div>
@@ -3503,7 +3503,7 @@ function AssetLaneTile({
           onCheckedChange={(checked) => onToggle(checked === true)}
           aria-label={t("library.selectAsset", { title: displayTitle })}
           className={[
-            "border-background bg-background/90 shadow-sm opacity-100 transition sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100",
+            "border-2 border-foreground/40 bg-background/90 shadow-sm opacity-100 transition sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100",
             selected ? "sm:opacity-100" : "",
           ].join(" ")}
         />

package/corpus/templates/brain/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/calendar/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/chat/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/clips/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/clips/shared/feature-flags.ts

@@ -1,7 +1,7 @@
 import {
   defineFeatureFlag,
   defineFeatureFlags,
-} from "@agent-native/core/feature-flags";
+} from "@agent-native/core/feature-flags/registry";
 
 /**
  * Desktop app: use the custom ScreenCaptureKit (SCK) capture pipeline

package/corpus/templates/content/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/design/.agents/skills/feature-flags/SKILL.md

@@ -37,7 +37,7 @@ Keep definitions in a shared TypeScript module so server and client code use the
 same stable key. Flags are boolean and default-off.
 
 ```ts
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 export const FULL_APP_BUILDING = defineFeatureFlag({
   key: "full-app-building",

package/corpus/templates/design/actions/update-file.ts

@@ -169,7 +169,16 @@ export default defineAction({
       .limit(1);
 
     if (!file) {
-      throw new Error(`File not found: ${id}`);
+      // Terminal (not transient): the row is gone or out of access scope, so a
+      // retry can never succeed. Mark it 404 so the client save-outbox drops the
+      // entry instead of retrying forever (which turns one orphaned/deleted
+      // screen into an update-file 500 storm — see design-save-outbox
+      // isTerminalSaveError).
+      const notFound = new Error(`File not found: ${id}`) as Error & {
+        status?: number;
+      };
+      notFound.status = 404;
+      throw notFound;
     }
 
     await assertAccess("design", file.designId, "editor");

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -109,6 +109,7 @@ import {
   schedulePendingTextEditActivation,
 } from "./design-canvas/pending-text-edit";
 import { DeviceFrame } from "./DeviceFrame";
+import { dndHostLog } from "./dnd-debug";
 import { shapeClosingHandles } from "./multi-screen/draft-primitives";
 import type {
   ElementInfo,
@@ -304,6 +305,15 @@ ${editorChromeBridgeScript}
 </script>
 `;
 
+/**
+ * Master switch for the Figma-parity live-reflow drag (hysteresis-stabilized
+ * targeting + size guard in Phase 0; transform lift/follow, live sibling
+ * reflow, and exact absolute commit in Phase 1). Flip to `true` to try the new
+ * drag feel; flip back to `false` for the previous behavior without a revert.
+ * Baked into the injected bridge as `__LIVE_REFLOW_ENABLED__`.
+ */
+const LIVE_REFLOW_ENABLED = true;
+
 interface DesignCanvasProps {
   content: string;
   contentKey?: string;
@@ -931,6 +941,10 @@ function buildEditorChromeBridgeScript(args: {
         "__RUNTIME_LAYER_SNAPSHOT_ENABLED__",
         args.runtimeLayerSnapshotEnabled ? "true" : "false",
       )
+      .replace(
+        "__LIVE_REFLOW_ENABLED__",
+        LIVE_REFLOW_ENABLED ? "true" : "false",
+      )
   );
 }
 
@@ -2106,7 +2120,11 @@ export function DesignCanvas({
             "__DESIGN_CANVAS_CONTENT_OFFSET_Y__",
             String(Math.round(embeddedFrame?.contentOffsetY ?? 0)),
           )
-          .replace("__RUNTIME_LAYER_SNAPSHOT_ENABLED__", "false");
+          .replace("__RUNTIME_LAYER_SNAPSHOT_ENABLED__", "false")
+          .replace(
+            "__LIVE_REFLOW_ENABLED__",
+            LIVE_REFLOW_ENABLED ? "true" : "false",
+          );
     // ALWAYS injected (like the other always-on bridges above) so
     // MultiScreenCanvas's cross-screen drag hit-testing
     // (agent-native:hit-test / agent-native:hit-test-result) resolves an
@@ -2479,6 +2497,12 @@ export function DesignCanvas({
         const selector = String(e.data.selector || "");
         const anchorSelector = String(e.data.anchorSelector || "");
         const placement = String(e.data.placement || "after");
+        dndHostLog("recv:structure-change", {
+          selector,
+          anchorSelector,
+          placement,
+          dropMode: e.data.dropMode,
+        });
         const requestId =
           typeof e.data.requestId === "string" ? e.data.requestId : undefined;
         const sourceId =
@@ -2546,6 +2570,11 @@ export function DesignCanvas({
                 : undefined,
             },
           );
+          dndHostLog("persist:result", {
+            applied,
+            requestId,
+            willAck: Boolean(requestId) && applied !== "pending",
+          });
           if (requestId && applied !== "pending") {
             iframeRef.current?.contentWindow?.postMessage(
               {

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -84,6 +84,7 @@ import {
 } from "./canvas-primitive-style";
 import { appendHitTestResponder } from "./design-canvas/hit-test";
 import { DesignCanvas } from "./DesignCanvas";
+import { dndHostLog } from "./dnd-debug";
 import {
   gradientToCss,
   parseGradientCss,
@@ -154,6 +155,10 @@ const TRANSFORM_BADGE_MAX_WIDTH = 180;
 // (frame z-order is a small per-design integer) while staying well under the
 // reserved resize-handle stacking range (999_999+).
 const TOP_SCREEN_Z_BOOST = 100_000;
+// A live draw preview must paint above every screen — including the
+// TOP_SCREEN_Z_BOOSTed active one — or its outline hides behind the opaque
+// screen iframe until commit. Stays below the resize-handle range (999_999+).
+const DRAFT_PREVIEW_Z = TOP_SCREEN_Z_BOOST + 50_000;
 const EMPTY_SELECTED_LAYER_SELECTOR_GROUPS_BY_SCREEN: Record<
   string,
   string[][]
@@ -2269,6 +2274,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         return;
       }
 
+      if (msg.phase !== "move") {
+        dndHostLog("overview:cross-screen", {
+          phase: msg.phase,
+          source: sourceScreenId,
+          selector: msg.selector,
+        });
+      }
       if (msg.phase === "start") {
         setCrossScreenSourceIsBoard(sourceScreenId === boardFileId);
         crossScreenDragMsgRef.current = {
@@ -5167,6 +5179,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             frameGeometryWithOverrides(after, state.originFrames),
             after,
           );
+          dndHostLog("overview:frame-commit", { ids: state.targetIds });
           suppressNextPick.current = true;
         }
         finishDrag();
@@ -8156,7 +8169,7 @@ function DraftPrimitiveLayer({
         ...frameStyleLeftTop(geometry),
         width: geometry.width,
         height: geometry.height,
-        zIndex: geometry.z ?? 40,
+        zIndex: preview ? DRAFT_PREVIEW_Z : (geometry.z ?? 40),
         transform: geometry.rotation
           ? `rotate(${geometry.rotation}deg)`
           : undefined,