@hyperfixi/behaviors 2.5.1 → 2.7.0

package/dist/toggleable.browser.global.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/behaviors/toggleable.ts","../src/schemas/toggleable.schema.ts","../src/schemas/types.ts"],"sourcesContent":["/**\n * Toggleable Behavior — Imperative Implementation\n *\n * A behavior that toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n *\n * Uses direct DOM APIs instead of compiling hyperscript source,\n * because `toggle .{cls}` template interpolation doesn't resolve\n * behavior parameters at runtime.\n *\n * @example\n * ```html\n * <button _=\"install Toggleable\">Toggle</button>\n *\n * <button _=\"install Toggleable(cls: expanded, target: #menu)\">Menu</button>\n * ```\n */\n\nimport { toggleableSchema } from '../schemas/toggleable.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\n// Re-export schema-derived values for backwards compatibility\nexport const toggleableSource = toggleableSchema.source;\nexport const toggleableMetadata = toggleableSchema;\n\n/**\n * Imperative installer for Toggleable behavior.\n * Called directly by the runtime when `install Toggleable` is executed.\n */\nfunction installToggleable(element: HTMLElement, params: Record<string, any>): void {\n  const cls = params.cls || 'active';\n\n  // Resolve target element\n  let targetEl: HTMLElement = element;\n  if (params.target && params.target !== 'me') {\n    if (typeof params.target === 'string') {\n      const found = document.querySelector(params.target);\n      if (found instanceof HTMLElement) targetEl = found;\n    } else if (params.target instanceof HTMLElement) {\n      targetEl = params.target;\n    }\n  }\n\n  element.addEventListener('click', () => {\n    const wasOn = targetEl.classList.contains(cls);\n    targetEl.classList.toggle(cls);\n    targetEl.dispatchEvent(\n      new CustomEvent(wasOn ? 'toggleable:off' : 'toggleable:on', { bubbles: true })\n    );\n  });\n}\n\n/**\n * Register the Toggleable behavior with LokaScript.\n * Uses imperative installer via synthetic behavior node.\n */\nexport async function registerToggleable(hyperfixi?: LokaScriptInstance): Promise<void> {\n  const hf = hyperfixi || resolveRuntime();\n\n  if (!hf) {\n    throw new Error(\n      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n    );\n  }\n\n  const syntheticNode = {\n    type: 'behavior',\n    name: 'Toggleable',\n    parameters: ['cls', 'target'],\n    eventHandlers: [],\n    imperativeInstaller: installToggleable,\n  };\n  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n  await hf.execute(syntheticNode, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n  registerToggleable().catch(console.error);\n}\n\nexport default {\n  source: toggleableSchema.source,\n  metadata: toggleableSchema,\n  register: registerToggleable,\n};\n","import type { BehaviorSchema } from './types';\n\n/**\n * Toggleable Behavior Schema\n *\n * Toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n */\nexport const toggleableSchema: BehaviorSchema = {\n  name: 'Toggleable',\n  category: 'form',\n  tier: 'core',\n  version: '1.0.0',\n  description: 'Toggles a CSS class on click',\n  parameters: [\n    {\n      name: 'cls',\n      type: 'string',\n      optional: true,\n      default: 'active',\n      description: 'CSS class to toggle',\n    },\n    {\n      name: 'target',\n      type: 'selector',\n      optional: true,\n      default: 'me',\n      description: 'Element to toggle the class on',\n    },\n  ],\n  events: [\n    { name: 'toggleable:on', description: 'Fired when class is added' },\n    { name: 'toggleable:off', description: 'Fired when class is removed' },\n  ],\n  source: `\nbehavior Toggleable(cls, target)\n  init\n    if cls is undefined\n      set cls to \"active\"\n    end\n    if target is undefined\n      set target to me\n    end\n  end\n  on click\n    toggle .{cls} on target\n    js(target, cls)\n      var eventName = target.classList.contains(cls) ? 'toggleable:on' : 'toggleable:off';\n      target.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));\n    end\n  end\nend`.trim(),\n};\n","/**\n * Behavior Schema Types\n *\n * Defines the structure for behavior metadata used for:\n * - Code generation (TypeScript types, documentation)\n * - Runtime categorization and lazy loading\n * - Tooling and IDE integration\n */\n\n/**\n * Behavior categories for organization.\n * - ui: Visual interaction behaviors (drag, resize, sort)\n * - data: Data manipulation behaviors (remove, transform)\n * - animation: Animation and transition behaviors\n * - form: Form-related behaviors (validation, toggle states)\n * - layout: Layout behaviors (sticky, scrollspy)\n */\nexport type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';\n\n/**\n * Loading tiers for lazy loading optimization.\n * - core: Always loaded (essential behaviors)\n * - common: High usage (loaded for typical apps)\n * - optional: Low usage (loaded on demand)\n */\nexport type BehaviorTier = 'core' | 'common' | 'optional';\n\n/**\n * Schema for a behavior parameter.\n */\nexport interface ParameterSchema {\n  name: string;\n  type: 'string' | 'number' | 'boolean' | 'selector' | 'element';\n  optional?: boolean;\n  default?: string | number | boolean;\n  /** Allowed values for constrained parameters */\n  enum?: string[];\n  description: string;\n}\n\n/**\n * Schema for a behavior event.\n */\nexport interface EventSchema {\n  name: string;\n  description: string;\n}\n\n/**\n * Complete schema for a behavior.\n * This is the source of truth for all behavior metadata.\n */\nexport interface BehaviorSchema {\n  /** Behavior name (PascalCase) */\n  name: string;\n  /** Category for organization */\n  category: BehaviorCategory;\n  /** Loading tier for lazy loading */\n  tier: BehaviorTier;\n  /** Semantic version */\n  version: string;\n  /** Human-readable description */\n  description: string;\n  /** Parameter definitions */\n  parameters: ParameterSchema[];\n  /** Event definitions */\n  events: EventSchema[];\n  /** The hyperscript behavior source code */\n  source: string;\n  /** Optional requirements or notes */\n  requirements?: string[];\n}\n\n/**\n * Runtime behavior module interface.\n * This is what gets registered with the hyperfixi runtime.\n */\nexport interface BehaviorModule {\n  source: string;\n  metadata: BehaviorSchema;\n  register: (hyperfixi?: LokaScriptInstance) => Promise<void>;\n}\n\n/**\n * Minimal LokaScript instance interface for behavior registration.\n */\nexport interface LokaScriptInstance {\n  compileSync: (\n    code: string,\n    options?: { traditional?: boolean; language?: string }\n  ) => {\n    ok: boolean;\n    ast?: unknown;\n    errors?: Array<{ message: string; line?: number; column?: number }>;\n  };\n  execute: (ast: unknown, ctx: unknown) => Promise<unknown>;\n  createContext?: () => { locals: Map<string, unknown>; globals: Map<string, unknown> };\n}\n\n/**\n * Typed window interface for behavior auto-registration.\n * Avoids `(window as any)` casts throughout the codebase.\n * Checks both `window.lokascript` and `window.hyperfixi` for the runtime instance.\n */\nexport interface LokaScriptWindow {\n  lokascript?: LokaScriptInstance;\n  hyperfixi?: LokaScriptInstance;\n  __hyperfixi_behaviors_ready?: Promise<void> | undefined;\n}\n\n/**\n * Resolve the LokaScript runtime from window globals.\n * Checks both `window.lokascript` and `window.hyperfixi`.\n */\nexport function resolveRuntime(): LokaScriptInstance | null {\n  if (typeof window === 'undefined') return null;\n  const win = window as unknown as LokaScriptWindow;\n  return win.lokascript || win.hyperfixi || null;\n}\n"],"mappings":"scAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,qBAAAC,ICQO,IAAMC,EAAmC,CAC9C,KAAM,aACN,SAAU,OACV,KAAM,OACN,QAAS,QACT,YAAa,+BACb,WAAY,CACV,CACE,KAAM,MACN,KAAM,SACN,SAAU,GACV,QAAS,SACT,YAAa,qBACf,EACA,CACE,KAAM,SACN,KAAM,WACN,SAAU,GACV,QAAS,KACT,YAAa,gCACf,CACF,EACA,OAAQ,CACN,CAAE,KAAM,gBAAiB,YAAa,2BAA4B,EAClE,CAAE,KAAM,iBAAkB,YAAa,6BAA8B,CACvE,EACA,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAiBL,KAAK,CACV,EC8DO,SAASC,GAA4C,CAC1D,GAAI,OAAO,OAAW,IAAa,OAAO,KAC1C,IAAMC,EAAM,OACZ,OAAOA,EAAI,YAAcA,EAAI,WAAa,IAC5C,CF/FO,IAAMC,EAAmBC,EAAiB,OACpCC,EAAqBD,EAMlC,SAASE,EAAkBC,EAAsBC,EAAmC,CAClF,IAAMC,EAAMD,EAAO,KAAO,SAGtBE,EAAwBH,EAC5B,GAAIC,EAAO,QAAUA,EAAO,SAAW,KACrC,GAAI,OAAOA,EAAO,QAAW,SAAU,CACrC,IAAMG,EAAQ,SAAS,cAAcH,EAAO,MAAM,EAC9CG,aAAiB,cAAaD,EAAWC,EAC/C,MAAWH,EAAO,kBAAkB,cAClCE,EAAWF,EAAO,QAItBD,EAAQ,iBAAiB,QAAS,IAAM,CACtC,IAAMK,EAAQF,EAAS,UAAU,SAASD,CAAG,EAC7CC,EAAS,UAAU,OAAOD,CAAG,EAC7BC,EAAS,cACP,IAAI,YAAYE,EAAQ,iBAAmB,gBAAiB,CAAE,QAAS,EAAK,CAAC,CAC/E,CACF,CAAC,CACH,CAMA,eAAsBC,EAAmBC,EAA+C,CACtF,IAAMC,EAAKD,GAAaE,EAAe,EAEvC,GAAI,CAACD,EACH,MAAM,IAAI,MACR,yFACF,EAGF,IAAME,EAAgB,CACpB,KAAM,WACN,KAAM,aACN,WAAY,CAAC,MAAO,QAAQ,EAC5B,cAAe,CAAC,EAChB,oBAAqBX,CACvB,EACMY,EAAMH,EAAG,cAAgBA,EAAG,cAAc,EAAI,CAAE,OAAQ,IAAI,IAAO,QAAS,IAAI,GAAM,EAC5F,MAAMA,EAAG,QAAQE,EAAeC,CAAG,CACrC,CAGIF,EAAe,GACjBH,EAAmB,EAAE,MAAM,QAAQ,KAAK,EAG1C,IAAOM,EAAQ,CACb,OAAQf,EAAiB,OACzB,SAAUA,EACV,SAAUS,CACZ","names":["toggleable_exports","__export","toggleable_default","registerToggleable","toggleableMetadata","toggleableSource","toggleableSchema","resolveRuntime","win","toggleableSource","toggleableSchema","toggleableMetadata","installToggleable","element","params","cls","targetEl","found","wasOn","registerToggleable","hyperfixi","hf","resolveRuntime","syntheticNode","ctx","toggleable_default"]}
+{"version":3,"sources":["../src/behaviors/toggleable.ts","../src/schemas/toggleable.schema.ts","../src/schemas/types.ts"],"sourcesContent":["/**\n * Toggleable Behavior\n *\n * A behavior that toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n *\n * Compiled from its hyperscript `source` (the single source of truth shared with\n * the CDN resolver bundle and patterns-reference). The `.{cls}` dynamic class\n * selector resolves the behavior's `cls` parameter at runtime — see\n * `packages/core/src/commands/behaviors/__tests__/template-interpolation.test.ts`.\n *\n * @example\n * ```html\n * <button _=\"install Toggleable\">Toggle</button>\n *\n * <button _=\"install Toggleable(cls: expanded, target: #menu)\">Menu</button>\n * ```\n */\n\nimport { toggleableSchema } from '../schemas/toggleable.schema';\nimport type { LokaScriptInstance } from '../schemas/types';\nimport { resolveRuntime } from '../schemas/types';\n\n// Re-export schema-derived values for backwards compatibility\nexport const toggleableSource = toggleableSchema.source;\nexport const toggleableMetadata = toggleableSchema;\n\n/**\n * Register the Toggleable behavior with LokaScript by compiling its\n * hyperscript source and executing the resulting behavior definition.\n */\nexport async function registerToggleable(hyperfixi?: LokaScriptInstance): Promise<void> {\n  const hf = hyperfixi || resolveRuntime();\n\n  if (!hf) {\n    throw new Error(\n      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'\n    );\n  }\n\n  const result = hf.compileSync(toggleableSchema.source, { traditional: true });\n\n  if (!result.ok) {\n    throw new Error(`Failed to compile Toggleable behavior: ${JSON.stringify(result.errors)}`);\n  }\n\n  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };\n  await hf.execute(result.ast, ctx);\n}\n\n// Auto-register when loaded as a script tag\nif (resolveRuntime()) {\n  registerToggleable().catch(console.error);\n}\n\nexport default {\n  source: toggleableSchema.source,\n  metadata: toggleableSchema,\n  register: registerToggleable,\n};\n","import type { BehaviorSchema } from './types';\n\n/**\n * Toggleable Behavior Schema\n *\n * Toggles a CSS class on click.\n * Useful for accordions, dropdowns, and toggle buttons.\n */\nexport const toggleableSchema: BehaviorSchema = {\n  name: 'Toggleable',\n  category: 'form',\n  tier: 'core',\n  version: '1.0.0',\n  description: 'Toggles a CSS class on click',\n  parameters: [\n    {\n      name: 'cls',\n      type: 'string',\n      optional: true,\n      default: 'active',\n      description: 'CSS class to toggle',\n    },\n    {\n      name: 'target',\n      type: 'selector',\n      optional: true,\n      default: 'me',\n      description: 'Element to toggle the class on',\n    },\n  ],\n  events: [\n    { name: 'toggleable:on', description: 'Fired when class is added' },\n    { name: 'toggleable:off', description: 'Fired when class is removed' },\n  ],\n  source: `\nbehavior Toggleable(cls, target)\n  init\n    if cls is undefined\n      set cls to \"active\"\n    end\n    if target is undefined\n      set target to me\n    end\n  end\n  on click\n    toggle .{cls} on target\n    js(target, cls)\n      var eventName = target.classList.contains(cls) ? 'toggleable:on' : 'toggleable:off';\n      target.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));\n    end\n  end\nend`.trim(),\n};\n","/**\n * Behavior Schema Types\n *\n * Defines the structure for behavior metadata used for:\n * - Code generation (TypeScript types, documentation)\n * - Runtime categorization and lazy loading\n * - Tooling and IDE integration\n */\n\n/**\n * Behavior categories for organization.\n * - ui: Visual interaction behaviors (drag, resize, sort)\n * - data: Data manipulation behaviors (remove, transform)\n * - animation: Animation and transition behaviors\n * - form: Form-related behaviors (validation, toggle states)\n * - layout: Layout behaviors (sticky, scrollspy)\n */\nexport type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';\n\n/**\n * Loading tiers for lazy loading optimization.\n * - core: Always loaded (essential behaviors)\n * - common: High usage (loaded for typical apps)\n * - optional: Low usage (loaded on demand)\n */\nexport type BehaviorTier = 'core' | 'common' | 'optional';\n\n/**\n * Schema for a behavior parameter.\n */\nexport interface ParameterSchema {\n  name: string;\n  type: 'string' | 'number' | 'boolean' | 'selector' | 'element';\n  optional?: boolean;\n  default?: string | number | boolean;\n  /** Allowed values for constrained parameters */\n  enum?: string[];\n  description: string;\n}\n\n/**\n * Schema for a behavior event.\n */\nexport interface EventSchema {\n  name: string;\n  description: string;\n}\n\n/**\n * Complete schema for a behavior.\n * This is the source of truth for all behavior metadata.\n */\nexport interface BehaviorSchema {\n  /** Behavior name (PascalCase) */\n  name: string;\n  /** Category for organization */\n  category: BehaviorCategory;\n  /** Loading tier for lazy loading */\n  tier: BehaviorTier;\n  /** Semantic version */\n  version: string;\n  /** Human-readable description */\n  description: string;\n  /** Parameter definitions */\n  parameters: ParameterSchema[];\n  /** Event definitions */\n  events: EventSchema[];\n  /** The hyperscript behavior source code */\n  source: string;\n  /** Optional requirements or notes */\n  requirements?: string[];\n}\n\n/**\n * Runtime behavior module interface.\n * This is what gets registered with the hyperfixi runtime.\n */\nexport interface BehaviorModule {\n  source: string;\n  metadata: BehaviorSchema;\n  register: (hyperfixi?: LokaScriptInstance) => Promise<void>;\n}\n\n/**\n * Minimal LokaScript instance interface for behavior registration.\n */\nexport interface LokaScriptInstance {\n  compileSync: (\n    code: string,\n    options?: { traditional?: boolean; language?: string }\n  ) => {\n    ok: boolean;\n    ast?: unknown;\n    errors?: Array<{ message: string; line?: number; column?: number }>;\n  };\n  execute: (ast: unknown, ctx: unknown) => Promise<unknown>;\n  createContext?: () => { locals: Map<string, unknown>; globals: Map<string, unknown> };\n}\n\n/**\n * Typed window interface for behavior auto-registration.\n * Avoids `(window as any)` casts throughout the codebase.\n * Checks both `window.lokascript` and `window.hyperfixi` for the runtime instance.\n */\nexport interface LokaScriptWindow {\n  lokascript?: LokaScriptInstance;\n  hyperfixi?: LokaScriptInstance;\n  __hyperfixi_behaviors_ready?: Promise<void> | undefined;\n}\n\n/**\n * Resolve the LokaScript runtime from window globals.\n * Checks both `window.lokascript` and `window.hyperfixi`.\n */\nexport function resolveRuntime(): LokaScriptInstance | null {\n  if (typeof window === 'undefined') return null;\n  const win = window as unknown as LokaScriptWindow;\n  return win.lokascript || win.hyperfixi || null;\n}\n"],"mappings":"scAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,qBAAAC,ICQO,IAAMC,EAAmC,CAC9C,KAAM,aACN,SAAU,OACV,KAAM,OACN,QAAS,QACT,YAAa,+BACb,WAAY,CACV,CACE,KAAM,MACN,KAAM,SACN,SAAU,GACV,QAAS,SACT,YAAa,qBACf,EACA,CACE,KAAM,SACN,KAAM,WACN,SAAU,GACV,QAAS,KACT,YAAa,gCACf,CACF,EACA,OAAQ,CACN,CAAE,KAAM,gBAAiB,YAAa,2BAA4B,EAClE,CAAE,KAAM,iBAAkB,YAAa,6BAA8B,CACvE,EACA,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAiBL,KAAK,CACV,EC8DO,SAASC,GAA4C,CAC1D,GAAI,OAAO,OAAW,IAAa,OAAO,KAC1C,IAAMC,EAAM,OACZ,OAAOA,EAAI,YAAcA,EAAI,WAAa,IAC5C,CF9FO,IAAMC,EAAmBC,EAAiB,OACpCC,EAAqBD,EAMlC,eAAsBE,EAAmBC,EAA+C,CACtF,IAAMC,EAAKD,GAAaE,EAAe,EAEvC,GAAI,CAACD,EACH,MAAM,IAAI,MACR,yFACF,EAGF,IAAME,EAASF,EAAG,YAAYJ,EAAiB,OAAQ,CAAE,YAAa,EAAK,CAAC,EAE5E,GAAI,CAACM,EAAO,GACV,MAAM,IAAI,MAAM,0CAA0C,KAAK,UAAUA,EAAO,MAAM,CAAC,EAAE,EAG3F,IAAMC,EAAMH,EAAG,cAAgBA,EAAG,cAAc,EAAI,CAAE,OAAQ,IAAI,IAAO,QAAS,IAAI,GAAM,EAC5F,MAAMA,EAAG,QAAQE,EAAO,IAAKC,CAAG,CAClC,CAGIF,EAAe,GACjBH,EAAmB,EAAE,MAAM,QAAQ,KAAK,EAG1C,IAAOM,EAAQ,CACb,OAAQR,EAAiB,OACzB,SAAUA,EACV,SAAUE,CACZ","names":["toggleable_exports","__export","toggleable_default","registerToggleable","toggleableMetadata","toggleableSource","toggleableSchema","resolveRuntime","win","toggleableSource","toggleableSchema","toggleableMetadata","registerToggleable","hyperfixi","hf","resolveRuntime","result","ctx","toggleable_default"]}

package/dist/{types-BY-jB5FV.d.ts → types-DCCtVQS5.d.cts}

@@ -97,4 +97,4 @@ interface LokaScriptInstance {
     };
 }
 
-export type { BehaviorCategory as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorModule as a, BehaviorSchema as b, BehaviorTier as c };
+export type { BehaviorSchema as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorModule as a, BehaviorCategory as b, BehaviorTier as c };

package/dist/{types-BY-jB5FV.d.cts → types-DCCtVQS5.d.ts}

@@ -97,4 +97,4 @@ interface LokaScriptInstance {
     };
 }
 
-export type { BehaviorCategory as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorModule as a, BehaviorSchema as b, BehaviorTier as c };
+export type { BehaviorSchema as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorModule as a, BehaviorCategory as b, BehaviorTier as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperfixi/behaviors",
-  "version": "2.5.1",
+  "version": "2.7.0",
   "description": "Reusable hyperscript behaviors for LokaScript",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,13 +108,13 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:check": "vitest run --reporter=dot 2>&1 | tail -5"
+    "test:check": "VITEST_QUIET=1 bash ../../scripts/vitest-run.sh --reporter=dot"
   },
   "peerDependencies": {
-    "@hyperfixi/core": "^2.5.1"
+    "@hyperfixi/core": "^2.7.0"
   },
   "devDependencies": {
-    "@hyperfixi/core": "^2.5.1",
+    "@hyperfixi/core": "^2.7.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^4.1.5"

package/src/behaviors/autodismiss.test.ts

@@ -2,27 +2,33 @@ import { describe, it, expect, vi } from 'vitest';
 
 describe('AutoDismiss behavior', () => {
   describe('registerAutoDismiss', () => {
-    it('should register with synthetic node via execute', async () => {
-      const { registerAutoDismiss } = await import('./autodismiss');
+    it('should compile its hyperscript source and execute', async () => {
+      const { registerAutoDismiss, autoDismissSource } = await import('./autodismiss');
       const mock = {
-        compileSync: vi.fn(),
+        compileSync: vi.fn().mockReturnValue({ ok: true, ast: { type: 'behavior' } }),
         execute: vi.fn().mockResolvedValue(undefined),
         createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
       };
 
       await registerAutoDismiss(mock);
 
-      expect(mock.compileSync).not.toHaveBeenCalled();
+      expect(mock.compileSync).toHaveBeenCalledWith(autoDismissSource, { traditional: true });
       expect(mock.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'behavior',
-          name: 'AutoDismiss',
-          imperativeInstaller: expect.any(Function),
-        }),
+        { type: 'behavior' },
         expect.objectContaining({ locals: expect.any(Map), globals: expect.any(Map) })
       );
     });
 
+    it('should throw on compile failure', async () => {
+      const { registerAutoDismiss } = await import('./autodismiss');
+      const mock = {
+        compileSync: vi.fn().mockReturnValue({ ok: false, errors: [{ message: 'boom' }] }),
+        execute: vi.fn(),
+        createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
+      };
+      await expect(registerAutoDismiss(mock)).rejects.toThrowError(/Failed to compile AutoDismiss/);
+    });
+
     it('should throw when no runtime available', async () => {
       const { registerAutoDismiss } = await import('./autodismiss');
       await expect(registerAutoDismiss(undefined)).rejects.toThrowError(/LokaScript not found/);

package/src/behaviors/autodismiss.ts

@@ -1,8 +1,12 @@
 /**
- * AutoDismiss Behavior — Imperative Implementation
+ * AutoDismiss Behavior
  *
  * Auto-removes elements after a configurable delay.
- * Supports pause-on-hover and fade effect using standard setTimeout/clearTimeout.
+ * Supports pause-on-hover and fade effect using standard setTimeout/clearTimeout
+ * (in its hyperscript `source`'s js() body).
+ *
+ * Compiled from its hyperscript `source` (the single source of truth shared with
+ * the CDN resolver bundle and patterns-reference).
  */
 
 import { autoDismissSchema } from '../schemas/autodismiss.schema';
@@ -14,66 +18,8 @@ export const autoDismissSource = autoDismissSchema.source;
 export const autoDismissMetadata = autoDismissSchema;
 
 /**
- * Imperative installer for AutoDismiss behavior.
- */
-function installAutoDismiss(element: HTMLElement, params: Record<string, any>): void {
-  const delay = typeof params.delay === 'number' ? params.delay : 5000;
-  const pauseOnHover = params.pauseOnHover !== false;
-  const effect = params.effect === 'fade' ? 'fade' : 'none';
-
-  let timerId: ReturnType<typeof setTimeout> | null = null;
-  let remaining = delay;
-  let startedAt = Date.now();
-
-  function dismiss() {
-    const event = new CustomEvent('autodismiss:dismissed', {
-      bubbles: true,
-      cancelable: true,
-    });
-    element.dispatchEvent(event);
-
-    if (event.defaultPrevented) return;
-
-    if (effect === 'fade') {
-      element.style.transition = 'opacity 300ms';
-      element.style.opacity = '0';
-      setTimeout(() => element.remove(), 300);
-    } else {
-      element.remove();
-    }
-  }
-
-  function start() {
-    startedAt = Date.now();
-    timerId = setTimeout(dismiss, remaining);
-  }
-
-  // Start the countdown
-  element.dispatchEvent(new CustomEvent('autodismiss:start', { bubbles: true }));
-  start();
-
-  if (pauseOnHover) {
-    element.addEventListener('mouseenter', () => {
-      if (timerId != null) {
-        clearTimeout(timerId);
-        timerId = null;
-        remaining -= Date.now() - startedAt;
-        if (remaining < 0) remaining = 0;
-        element.dispatchEvent(new CustomEvent('autodismiss:paused', { bubbles: true }));
-      }
-    });
-
-    element.addEventListener('mouseleave', () => {
-      if (timerId == null && element.isConnected) {
-        element.dispatchEvent(new CustomEvent('autodismiss:resumed', { bubbles: true }));
-        start();
-      }
-    });
-  }
-}
-
-/**
- * Register the AutoDismiss behavior with LokaScript.
+ * Register the AutoDismiss behavior with LokaScript by compiling its
+ * hyperscript source and executing the resulting behavior definition.
  */
 export async function registerAutoDismiss(hyperfixi?: LokaScriptInstance): Promise<void> {
   const hf = hyperfixi || resolveRuntime();
@@ -84,15 +30,14 @@ export async function registerAutoDismiss(hyperfixi?: LokaScriptInstance): Promi
     );
   }
 
-  const syntheticNode = {
-    type: 'behavior',
-    name: 'AutoDismiss',
-    parameters: ['delay', 'pauseOnHover', 'effect'],
-    eventHandlers: [],
-    imperativeInstaller: installAutoDismiss,
-  };
+  const result = hf.compileSync(autoDismissSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile AutoDismiss behavior: ${JSON.stringify(result.errors)}`);
+  }
+
   const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
-  await hf.execute(syntheticNode, ctx);
+  await hf.execute(result.ast, ctx);
 }
 
 // Auto-register when loaded as a script tag

package/src/behaviors/clickoutside.test.ts

@@ -2,27 +2,35 @@ import { describe, it, expect, vi } from 'vitest';
 
 describe('ClickOutside behavior', () => {
   describe('registerClickOutside', () => {
-    it('should register with synthetic node via execute', async () => {
-      const { registerClickOutside } = await import('./clickoutside');
+    it('should compile its hyperscript source and execute', async () => {
+      const { registerClickOutside, clickOutsideSource } = await import('./clickoutside');
       const mock = {
-        compileSync: vi.fn(),
+        compileSync: vi.fn().mockReturnValue({ ok: true, ast: { type: 'behavior' } }),
         execute: vi.fn().mockResolvedValue(undefined),
         createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
       };
 
       await registerClickOutside(mock);
 
-      expect(mock.compileSync).not.toHaveBeenCalled();
+      expect(mock.compileSync).toHaveBeenCalledWith(clickOutsideSource, { traditional: true });
       expect(mock.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'behavior',
-          name: 'ClickOutside',
-          imperativeInstaller: expect.any(Function),
-        }),
+        { type: 'behavior' },
         expect.objectContaining({ locals: expect.any(Map), globals: expect.any(Map) })
       );
     });
 
+    it('should throw on compile failure', async () => {
+      const { registerClickOutside } = await import('./clickoutside');
+      const mock = {
+        compileSync: vi.fn().mockReturnValue({ ok: false, errors: [{ message: 'boom' }] }),
+        execute: vi.fn(),
+        createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
+      };
+      await expect(registerClickOutside(mock)).rejects.toThrowError(
+        /Failed to compile ClickOutside/
+      );
+    });
+
     it('should throw when no runtime available', async () => {
       const { registerClickOutside } = await import('./clickoutside');
       await expect(registerClickOutside(undefined)).rejects.toThrowError(/LokaScript not found/);

package/src/behaviors/clickoutside.ts

@@ -1,8 +1,11 @@
 /**
- * ClickOutside Behavior — Imperative Implementation
+ * ClickOutside Behavior
  *
  * Fires a clickoutside event when the user clicks outside the element.
  * Uses pointerdown instead of click to avoid timing issues.
+ *
+ * Compiled from its hyperscript `source` (the single source of truth shared with
+ * the CDN resolver bundle and patterns-reference).
  */
 
 import { clickOutsideSchema } from '../schemas/clickoutside.schema';
@@ -14,36 +17,8 @@ export const clickOutsideSource = clickOutsideSchema.source;
 export const clickOutsideMetadata = clickOutsideSchema;
 
 /**
- * Imperative installer for ClickOutside behavior.
- */
-function installClickOutside(element: HTMLElement, params: Record<string, any>): void {
-  let active = params.active !== false;
-
-  function onPointerDown(e: Event) {
-    // Auto-cleanup if element has been removed from DOM
-    if (!element.isConnected) {
-      document.removeEventListener('pointerdown', onPointerDown);
-      return;
-    }
-
-    if (active && !element.contains(e.target as Node)) {
-      element.dispatchEvent(new CustomEvent('clickoutside', { bubbles: true }));
-    }
-  }
-
-  document.addEventListener('pointerdown', onPointerDown);
-
-  // Programmatic activation/deactivation via custom events
-  element.addEventListener('clickoutside:activate', () => {
-    active = true;
-  });
-  element.addEventListener('clickoutside:deactivate', () => {
-    active = false;
-  });
-}
-
-/**
- * Register the ClickOutside behavior with LokaScript.
+ * Register the ClickOutside behavior with LokaScript by compiling its
+ * hyperscript source and executing the resulting behavior definition.
  */
 export async function registerClickOutside(hyperfixi?: LokaScriptInstance): Promise<void> {
   const hf = hyperfixi || resolveRuntime();
@@ -54,15 +29,14 @@ export async function registerClickOutside(hyperfixi?: LokaScriptInstance): Prom
     );
   }
 
-  const syntheticNode = {
-    type: 'behavior',
-    name: 'ClickOutside',
-    parameters: ['active'],
-    eventHandlers: [],
-    imperativeInstaller: installClickOutside,
-  };
+  const result = hf.compileSync(clickOutsideSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile ClickOutside behavior: ${JSON.stringify(result.errors)}`);
+  }
+
   const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
-  await hf.execute(syntheticNode, ctx);
+  await hf.execute(result.ast, ctx);
 }
 
 // Auto-register when loaded as a script tag

package/src/behaviors/clipboard.test.ts

@@ -2,27 +2,33 @@ import { describe, it, expect, vi } from 'vitest';
 
 describe('Clipboard behavior', () => {
   describe('registerClipboard', () => {
-    it('should register with synthetic node via execute', async () => {
-      const { registerClipboard } = await import('./clipboard');
+    it('should compile its hyperscript source and execute', async () => {
+      const { registerClipboard, clipboardSource } = await import('./clipboard');
       const mock = {
-        compileSync: vi.fn(),
+        compileSync: vi.fn().mockReturnValue({ ok: true, ast: { type: 'behavior' } }),
         execute: vi.fn().mockResolvedValue(undefined),
         createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
       };
 
       await registerClipboard(mock);
 
-      expect(mock.compileSync).not.toHaveBeenCalled();
+      expect(mock.compileSync).toHaveBeenCalledWith(clipboardSource, { traditional: true });
       expect(mock.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'behavior',
-          name: 'Clipboard',
-          imperativeInstaller: expect.any(Function),
-        }),
+        { type: 'behavior' },
         expect.objectContaining({ locals: expect.any(Map), globals: expect.any(Map) })
       );
     });
 
+    it('should throw on compile failure', async () => {
+      const { registerClipboard } = await import('./clipboard');
+      const mock = {
+        compileSync: vi.fn().mockReturnValue({ ok: false, errors: [{ message: 'boom' }] }),
+        execute: vi.fn(),
+        createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
+      };
+      await expect(registerClipboard(mock)).rejects.toThrowError(/Failed to compile Clipboard/);
+    });
+
     it('should throw when no runtime available', async () => {
       const { registerClipboard } = await import('./clipboard');
       await expect(registerClipboard(undefined)).rejects.toThrowError(/LokaScript not found/);
@@ -31,7 +37,7 @@ describe('Clipboard behavior', () => {
     it('should fall back to manual context when createContext is missing', async () => {
       const { registerClipboard } = await import('./clipboard');
       const mock = {
-        compileSync: vi.fn(),
+        compileSync: vi.fn().mockReturnValue({ ok: true, ast: { type: 'behavior' } }),
         execute: vi.fn().mockResolvedValue(undefined),
       };
 

package/src/behaviors/clipboard.ts

@@ -1,8 +1,12 @@
 /**
- * Clipboard Behavior — Imperative Implementation
+ * Clipboard Behavior
  *
  * Copies text to clipboard on click with visual feedback.
- * Uses navigator.clipboard.writeText() with execCommand fallback.
+ * Uses navigator.clipboard.writeText() with execCommand fallback (in its
+ * hyperscript `source`'s js() body).
+ *
+ * Compiled from its hyperscript `source` (the single source of truth shared with
+ * the CDN resolver bundle and patterns-reference).
  */
 
 import { clipboardSchema } from '../schemas/clipboard.schema';
@@ -14,89 +18,8 @@ export const clipboardSource = clipboardSchema.source;
 export const clipboardMetadata = clipboardSchema;
 
 /**
- * Copy text to clipboard using the modern Clipboard API,
- * falling back to execCommand for older browsers.
- */
-async function copyToClipboard(text: string): Promise<void> {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text);
-    return;
-  }
-
-  // Fallback: temporary textarea + execCommand
-  const textarea = document.createElement('textarea');
-  textarea.value = text;
-  textarea.style.position = 'fixed';
-  textarea.style.opacity = '0';
-  document.body.appendChild(textarea);
-  textarea.select();
-  try {
-    document.execCommand('copy');
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}
-
-/**
- * Resolve a selector parameter to an HTMLElement.
- */
-function resolveElement(element: HTMLElement, param: unknown): HTMLElement | null {
-  if (!param || param === 'me') return element;
-  if (param instanceof HTMLElement) return param;
-  if (typeof param === 'string') {
-    return (
-      (element.querySelector(param) as HTMLElement) ||
-      (document.querySelector(param) as HTMLElement) ||
-      null
-    );
-  }
-  return null;
-}
-
-/**
- * Imperative installer for Clipboard behavior.
- */
-function installClipboard(element: HTMLElement, params: Record<string, any>): void {
-  const feedbackDuration =
-    typeof params.feedbackDuration === 'number' ? params.feedbackDuration : 2000;
-
-  element.addEventListener('click', async () => {
-    // Determine text to copy
-    let copyText: string;
-    if (params.text != null) {
-      copyText = String(params.text);
-    } else {
-      const sourceEl = resolveElement(element, params.source) || element;
-      copyText = (sourceEl as HTMLInputElement).value ?? sourceEl.textContent ?? '';
-    }
-
-    try {
-      await copyToClipboard(copyText);
-
-      // Show feedback
-      const feedbackEl = resolveElement(element, params.feedback) || element;
-      feedbackEl.classList.add('copied');
-      setTimeout(() => feedbackEl.classList.remove('copied'), feedbackDuration);
-
-      element.dispatchEvent(
-        new CustomEvent('clipboard:copied', {
-          bubbles: true,
-          detail: { text: copyText },
-        })
-      );
-    } catch (error) {
-      element.dispatchEvent(
-        new CustomEvent('clipboard:error', {
-          bubbles: true,
-          detail: { error },
-        })
-      );
-    }
-  });
-}
-
-/**
- * Register the Clipboard behavior with LokaScript.
+ * Register the Clipboard behavior with LokaScript by compiling its
+ * hyperscript source and executing the resulting behavior definition.
  */
 export async function registerClipboard(hyperfixi?: LokaScriptInstance): Promise<void> {
   const hf = hyperfixi || resolveRuntime();
@@ -107,15 +30,14 @@ export async function registerClipboard(hyperfixi?: LokaScriptInstance): Promise
     );
   }
 
-  const syntheticNode = {
-    type: 'behavior',
-    name: 'Clipboard',
-    parameters: ['text', 'source', 'feedback', 'feedbackDuration'],
-    eventHandlers: [],
-    imperativeInstaller: installClipboard,
-  };
+  const result = hf.compileSync(clipboardSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile Clipboard behavior: ${JSON.stringify(result.errors)}`);
+  }
+
   const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
-  await hf.execute(syntheticNode, ctx);
+  await hf.execute(result.ast, ctx);
 }
 
 // Auto-register when loaded as a script tag