@hyperfixi/behaviors 2.0.0

package/dist/types-CCc_2wAb.d.cts

@@ -0,0 +1,100 @@
+/**
+ * Behavior Schema Types
+ *
+ * Defines the structure for behavior metadata used for:
+ * - Code generation (TypeScript types, documentation)
+ * - Runtime categorization and lazy loading
+ * - Tooling and IDE integration
+ */
+/**
+ * Behavior categories for organization.
+ * - ui: Visual interaction behaviors (drag, resize, sort)
+ * - data: Data manipulation behaviors (remove, transform)
+ * - animation: Animation and transition behaviors
+ * - form: Form-related behaviors (validation, toggle states)
+ * - layout: Layout behaviors (sticky, scrollspy)
+ */
+type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';
+/**
+ * Loading tiers for lazy loading optimization.
+ * - core: Always loaded (essential behaviors)
+ * - common: High usage (loaded for typical apps)
+ * - optional: Low usage (loaded on demand)
+ */
+type BehaviorTier = 'core' | 'common' | 'optional';
+/**
+ * Schema for a behavior parameter.
+ */
+interface ParameterSchema {
+    name: string;
+    type: 'string' | 'number' | 'boolean' | 'selector' | 'element';
+    optional?: boolean;
+    default?: string | number | boolean;
+    /** Allowed values for constrained parameters */
+    enum?: string[];
+    description: string;
+}
+/**
+ * Schema for a behavior event.
+ */
+interface EventSchema {
+    name: string;
+    description: string;
+}
+/**
+ * Complete schema for a behavior.
+ * This is the source of truth for all behavior metadata.
+ */
+interface BehaviorSchema {
+    /** Behavior name (PascalCase) */
+    name: string;
+    /** Category for organization */
+    category: BehaviorCategory;
+    /** Loading tier for lazy loading */
+    tier: BehaviorTier;
+    /** Semantic version */
+    version: string;
+    /** Human-readable description */
+    description: string;
+    /** Parameter definitions */
+    parameters: ParameterSchema[];
+    /** Event definitions */
+    events: EventSchema[];
+    /** The hyperscript behavior source code */
+    source: string;
+    /** Optional requirements or notes */
+    requirements?: string[];
+}
+/**
+ * Runtime behavior module interface.
+ * This is what gets registered with the hyperfixi runtime.
+ */
+interface BehaviorModule {
+    source: string;
+    metadata: BehaviorSchema;
+    register: (hyperfixi?: LokaScriptInstance) => Promise<void>;
+}
+/**
+ * Minimal LokaScript instance interface for behavior registration.
+ */
+interface LokaScriptInstance {
+    compileSync: (code: string, options?: {
+        traditional?: boolean;
+        language?: string;
+    }) => {
+        ok: boolean;
+        ast?: unknown;
+        errors?: Array<{
+            message: string;
+            line?: number;
+            column?: number;
+        }>;
+    };
+    execute: (ast: unknown, ctx: unknown) => Promise<unknown>;
+    createContext?: () => {
+        locals: Map<string, unknown>;
+        globals: Map<string, unknown>;
+    };
+}
+
+export type { BehaviorModule as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorSchema as a, BehaviorCategory as b, BehaviorTier as c };

package/dist/types-CCc_2wAb.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Behavior Schema Types
+ *
+ * Defines the structure for behavior metadata used for:
+ * - Code generation (TypeScript types, documentation)
+ * - Runtime categorization and lazy loading
+ * - Tooling and IDE integration
+ */
+/**
+ * Behavior categories for organization.
+ * - ui: Visual interaction behaviors (drag, resize, sort)
+ * - data: Data manipulation behaviors (remove, transform)
+ * - animation: Animation and transition behaviors
+ * - form: Form-related behaviors (validation, toggle states)
+ * - layout: Layout behaviors (sticky, scrollspy)
+ */
+type BehaviorCategory = 'ui' | 'data' | 'animation' | 'form' | 'layout';
+/**
+ * Loading tiers for lazy loading optimization.
+ * - core: Always loaded (essential behaviors)
+ * - common: High usage (loaded for typical apps)
+ * - optional: Low usage (loaded on demand)
+ */
+type BehaviorTier = 'core' | 'common' | 'optional';
+/**
+ * Schema for a behavior parameter.
+ */
+interface ParameterSchema {
+    name: string;
+    type: 'string' | 'number' | 'boolean' | 'selector' | 'element';
+    optional?: boolean;
+    default?: string | number | boolean;
+    /** Allowed values for constrained parameters */
+    enum?: string[];
+    description: string;
+}
+/**
+ * Schema for a behavior event.
+ */
+interface EventSchema {
+    name: string;
+    description: string;
+}
+/**
+ * Complete schema for a behavior.
+ * This is the source of truth for all behavior metadata.
+ */
+interface BehaviorSchema {
+    /** Behavior name (PascalCase) */
+    name: string;
+    /** Category for organization */
+    category: BehaviorCategory;
+    /** Loading tier for lazy loading */
+    tier: BehaviorTier;
+    /** Semantic version */
+    version: string;
+    /** Human-readable description */
+    description: string;
+    /** Parameter definitions */
+    parameters: ParameterSchema[];
+    /** Event definitions */
+    events: EventSchema[];
+    /** The hyperscript behavior source code */
+    source: string;
+    /** Optional requirements or notes */
+    requirements?: string[];
+}
+/**
+ * Runtime behavior module interface.
+ * This is what gets registered with the hyperfixi runtime.
+ */
+interface BehaviorModule {
+    source: string;
+    metadata: BehaviorSchema;
+    register: (hyperfixi?: LokaScriptInstance) => Promise<void>;
+}
+/**
+ * Minimal LokaScript instance interface for behavior registration.
+ */
+interface LokaScriptInstance {
+    compileSync: (code: string, options?: {
+        traditional?: boolean;
+        language?: string;
+    }) => {
+        ok: boolean;
+        ast?: unknown;
+        errors?: Array<{
+            message: string;
+            line?: number;
+            column?: number;
+        }>;
+    };
+    execute: (ast: unknown, ctx: unknown) => Promise<unknown>;
+    createContext?: () => {
+        locals: Map<string, unknown>;
+        globals: Map<string, unknown>;
+    };
+}
+
+export type { BehaviorModule as B, EventSchema as E, LokaScriptInstance as L, ParameterSchema as P, BehaviorSchema as a, BehaviorCategory as b, BehaviorTier as c };

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@hyperfixi/behaviors",
+  "version": "2.0.0",
+  "description": "Reusable hyperscript behaviors for LokaScript",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./registry": {
+      "types": "./dist/registry.d.ts",
+      "import": "./dist/registry.js",
+      "require": "./dist/registry.cjs"
+    },
+    "./loaders": {
+      "types": "./dist/loaders.d.ts",
+      "import": "./dist/loaders.js",
+      "require": "./dist/loaders.cjs"
+    },
+    "./schemas": {
+      "types": "./dist/schemas/index.d.ts",
+      "import": "./dist/schemas/index.js",
+      "require": "./dist/schemas/index.cjs"
+    },
+    "./draggable": {
+      "types": "./dist/behaviors/draggable.d.ts",
+      "import": "./dist/behaviors/draggable.js",
+      "require": "./dist/behaviors/draggable.cjs"
+    },
+    "./removable": {
+      "types": "./dist/behaviors/removable.d.ts",
+      "import": "./dist/behaviors/removable.js",
+      "require": "./dist/behaviors/removable.cjs"
+    },
+    "./toggleable": {
+      "types": "./dist/behaviors/toggleable.d.ts",
+      "import": "./dist/behaviors/toggleable.js",
+      "require": "./dist/behaviors/toggleable.cjs"
+    },
+    "./sortable": {
+      "types": "./dist/behaviors/sortable.d.ts",
+      "import": "./dist/behaviors/sortable.js",
+      "require": "./dist/behaviors/sortable.cjs"
+    },
+    "./resizable": {
+      "types": "./dist/behaviors/resizable.d.ts",
+      "import": "./dist/behaviors/resizable.js",
+      "require": "./dist/behaviors/resizable.cjs"
+    },
+    "./draggable.browser.js": "./dist/draggable.browser.global.js",
+    "./removable.browser.js": "./dist/removable.browser.global.js",
+    "./toggleable.browser.js": "./dist/toggleable.browser.global.js",
+    "./sortable.browser.js": "./dist/sortable.browser.global.js",
+    "./resizable.browser.js": "./dist/resizable.browser.global.js",
+    "./all.browser.js": "./dist/all.browser.global.js",
+    "./core.browser.js": "./dist/core.browser.global.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "generate": "tsx scripts/generate.ts",
+    "prebuild": "npm run generate",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@hyperfixi/core": "*"
+  },
+  "devDependencies": {
+    "@hyperfixi/core": "*",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.0"
+  },
+  "keywords": [
+    "hyperscript",
+    "hyperfixi",
+    "behaviors",
+    "draggable",
+    "sortable",
+    "resizable",
+    "removable",
+    "toggleable",
+    "ui-components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codetalcott/hyperfixi.git",
+    "directory": "packages/behaviors"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/codetalcott/hyperfixi/issues"
+  },
+  "homepage": "https://github.com/codetalcott/hyperfixi/tree/main/packages/behaviors#readme"
+}

package/src/behaviors/draggable.ts

@@ -0,0 +1,60 @@
+/**
+ * Draggable Behavior
+ *
+ * A reusable behavior that makes elements draggable with pointer events.
+ * Supports custom drag handles, lifecycle events, and smooth positioning.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <div _="install Draggable">Drag me!</div>
+ *
+ * <!-- With custom drag handle -->
+ * <div _="install Draggable(dragHandle: .titlebar)">
+ *   <div class="titlebar">Drag here</div>
+ *   <div class="content">Content</div>
+ * </div>
+ * ```
+ */
+
+import { draggableSchema } from '../schemas/draggable.schema';
+import type { LokaScriptInstance, LokaScriptWindow } from '../schemas/types';
+
+// Re-export schema-derived values for backwards compatibility
+export const draggableSource = draggableSchema.source;
+export const draggableMetadata = draggableSchema;
+
+/**
+ * Register the Draggable behavior with LokaScript.
+ */
+export async function registerDraggable(hyperfixi?: LokaScriptInstance): Promise<void> {
+  const hf =
+    hyperfixi ||
+    (typeof window !== 'undefined' ? (window as unknown as LokaScriptWindow).lokascript : null);
+
+  if (!hf) {
+    throw new Error(
+      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'
+    );
+  }
+
+  const result = hf.compileSync(draggableSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile Draggable behavior: ${JSON.stringify(result.errors)}`);
+  }
+
+  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
+  await hf.execute(result.ast, ctx);
+}
+
+// Auto-register when loaded as a script tag
+if (typeof window !== 'undefined' && (window as unknown as LokaScriptWindow).lokascript) {
+  registerDraggable().catch(console.error);
+}
+
+export default {
+  source: draggableSchema.source,
+  metadata: draggableSchema,
+  register: registerDraggable,
+};

package/src/behaviors/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Behaviors Index
+ *
+ * Re-exports all behavior implementations.
+ */
+
+export {
+  draggableSource,
+  draggableMetadata,
+  registerDraggable,
+  default as Draggable,
+} from './draggable';
+
+export {
+  sortableSource,
+  sortableMetadata,
+  registerSortable,
+  default as Sortable,
+} from './sortable';
+
+export {
+  resizableSource,
+  resizableMetadata,
+  registerResizable,
+  default as Resizable,
+} from './resizable';
+
+export {
+  removableSource,
+  removableMetadata,
+  registerRemovable,
+  default as Removable,
+} from './removable';
+
+export {
+  toggleableSource,
+  toggleableMetadata,
+  registerToggleable,
+  default as Toggleable,
+} from './toggleable';

package/src/behaviors/integration.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import type { LokaScriptInstance } from '../schemas/types';
+import { registerDraggable, draggableSource } from './draggable';
+import { registerToggleable, toggleableSource } from './toggleable';
+import { registerRemovable, removableSource } from './removable';
+import { registerSortable, sortableSource } from './sortable';
+import { registerResizable, resizableSource } from './resizable';
+
+function createMockInstance(overrides: Partial<LokaScriptInstance> = {}): LokaScriptInstance {
+  return {
+    compileSync: vi.fn().mockReturnValue({ ok: true, ast: { type: 'behavior' } }),
+    execute: vi.fn().mockResolvedValue(undefined),
+    createContext: vi.fn().mockReturnValue({ locals: new Map(), globals: new Map() }),
+    ...overrides,
+  };
+}
+
+const behaviors = [
+  { name: 'Draggable', register: registerDraggable, source: draggableSource },
+  { name: 'Toggleable', register: registerToggleable, source: toggleableSource },
+  { name: 'Removable', register: registerRemovable, source: removableSource },
+  { name: 'Sortable', register: registerSortable, source: sortableSource },
+  { name: 'Resizable', register: registerResizable, source: resizableSource },
+] as const;
+
+describe('behavior registration integration', () => {
+  for (const { name, register, source } of behaviors) {
+    describe(name, () => {
+      it('should compile with traditional parser', async () => {
+        const mock = createMockInstance();
+        await register(mock);
+
+        expect(mock.compileSync).toHaveBeenCalledWith(source, { traditional: true });
+      });
+
+      it('should create context and execute', async () => {
+        const mock = createMockInstance();
+        await register(mock);
+
+        expect(mock.createContext).toHaveBeenCalled();
+        expect(mock.execute).toHaveBeenCalledWith(
+          { type: 'behavior' },
+          { locals: expect.any(Map), globals: expect.any(Map) }
+        );
+      });
+
+      it('should throw on compile failure', async () => {
+        const mock = createMockInstance({
+          compileSync: vi.fn().mockReturnValue({
+            ok: false,
+            errors: [{ message: 'syntax error', line: 1 }],
+          }),
+        });
+
+        await expect(register(mock)).rejects.toThrowError(new RegExp(`Failed to compile ${name}`));
+      });
+
+      it('should throw when lokascript is not available', async () => {
+        await expect(register(undefined)).rejects.toThrowError(/LokaScript not found/);
+      });
+
+      it('should fall back to manual context when createContext is missing', async () => {
+        const mock = createMockInstance();
+        // Remove createContext
+        delete (mock as Partial<LokaScriptInstance>).createContext;
+
+        await register(mock);
+
+        // Should still call execute with a fallback context
+        expect(mock.execute).toHaveBeenCalledWith(
+          { type: 'behavior' },
+          expect.objectContaining({
+            locals: expect.any(Map),
+            globals: expect.any(Map),
+          })
+        );
+      });
+    });
+  }
+});

package/src/behaviors/removable.ts

@@ -0,0 +1,55 @@
+/**
+ * Removable Behavior
+ *
+ * A behavior that removes an element when a trigger is clicked.
+ * Supports optional confirmation and transition effects.
+ *
+ * @example
+ * ```html
+ * <div _="install Removable">Click to remove</div>
+ *
+ * <div _="install Removable(confirm: true)">With confirmation</div>
+ * ```
+ */
+
+import { removableSchema } from '../schemas/removable.schema';
+import type { LokaScriptInstance, LokaScriptWindow } from '../schemas/types';
+
+// Re-export schema-derived values for backwards compatibility
+export const removableSource = removableSchema.source;
+export const removableMetadata = removableSchema;
+
+/**
+ * Register the Removable behavior with LokaScript.
+ */
+export async function registerRemovable(hyperfixi?: LokaScriptInstance): Promise<void> {
+  const hf =
+    hyperfixi ||
+    (typeof window !== 'undefined' ? (window as unknown as LokaScriptWindow).lokascript : null);
+
+  if (!hf) {
+    throw new Error(
+      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'
+    );
+  }
+
+  const result = hf.compileSync(removableSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile Removable behavior: ${JSON.stringify(result.errors)}`);
+  }
+
+  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
+  await hf.execute(result.ast, ctx);
+}
+
+// Auto-register when loaded as a script tag
+if (typeof window !== 'undefined' && (window as unknown as LokaScriptWindow).lokascript) {
+  registerRemovable().catch(console.error);
+}
+
+export default {
+  source: removableSchema.source,
+  metadata: removableSchema,
+  register: registerRemovable,
+};

package/src/behaviors/resizable.ts

@@ -0,0 +1,55 @@
+/**
+ * Resizable Behavior
+ *
+ * A behavior that makes elements resizable by dragging edges or corners.
+ * Supports minimum/maximum dimensions and resize handles.
+ *
+ * @example
+ * ```html
+ * <div _="install Resizable" style="width: 200px; height: 150px;">
+ *   Resize me!
+ * </div>
+ * ```
+ */
+
+import { resizableSchema } from '../schemas/resizable.schema';
+import type { LokaScriptInstance, LokaScriptWindow } from '../schemas/types';
+
+// Re-export schema-derived values for backwards compatibility
+export const resizableSource = resizableSchema.source;
+export const resizableMetadata = resizableSchema;
+
+/**
+ * Register the Resizable behavior with LokaScript.
+ */
+export async function registerResizable(hyperfixi?: LokaScriptInstance): Promise<void> {
+  const hf =
+    hyperfixi ||
+    (typeof window !== 'undefined' ? (window as unknown as LokaScriptWindow).lokascript : null);
+
+  if (!hf) {
+    throw new Error(
+      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'
+    );
+  }
+
+  const result = hf.compileSync(resizableSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile Resizable behavior: ${JSON.stringify(result.errors)}`);
+  }
+
+  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
+  await hf.execute(result.ast, ctx);
+}
+
+// Auto-register when loaded as a script tag
+if (typeof window !== 'undefined' && (window as unknown as LokaScriptWindow).lokascript) {
+  registerResizable().catch(console.error);
+}
+
+export default {
+  source: resizableSchema.source,
+  metadata: resizableSchema,
+  register: registerResizable,
+};

package/src/behaviors/sortable.ts

@@ -0,0 +1,56 @@
+/**
+ * Sortable Behavior
+ *
+ * A behavior for drag-and-drop reordering of list items.
+ * Apply to a container element; children become sortable.
+ *
+ * @example
+ * ```html
+ * <ul _="install Sortable">
+ *   <li>Item 1</li>
+ *   <li>Item 2</li>
+ * </ul>
+ * ```
+ */
+
+import { sortableSchema } from '../schemas/sortable.schema';
+import type { LokaScriptInstance, LokaScriptWindow } from '../schemas/types';
+
+// Re-export schema-derived values for backwards compatibility
+export const sortableSource = sortableSchema.source;
+export const sortableMetadata = sortableSchema;
+
+/**
+ * Register the Sortable behavior with LokaScript.
+ */
+export async function registerSortable(hyperfixi?: LokaScriptInstance): Promise<void> {
+  const hf =
+    hyperfixi ||
+    (typeof window !== 'undefined' ? (window as unknown as LokaScriptWindow).lokascript : null);
+
+  if (!hf) {
+    throw new Error(
+      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'
+    );
+  }
+
+  const result = hf.compileSync(sortableSchema.source, { traditional: true });
+
+  if (!result.ok) {
+    throw new Error(`Failed to compile Sortable behavior: ${JSON.stringify(result.errors)}`);
+  }
+
+  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
+  await hf.execute(result.ast, ctx);
+}
+
+// Auto-register when loaded as a script tag
+if (typeof window !== 'undefined' && (window as unknown as LokaScriptWindow).lokascript) {
+  registerSortable().catch(console.error);
+}
+
+export default {
+  source: sortableSchema.source,
+  metadata: sortableSchema,
+  register: registerSortable,
+};