@hyperfixi/behaviors 2.0.0 → 2.2.0

package/src/behaviors/tabs.ts

@@ -0,0 +1,196 @@
+/**
+ * Tabs Behavior — Imperative Implementation
+ *
+ * WAI-ARIA compliant tabs with roving tabindex keyboard navigation.
+ * Auto-wires role, aria-selected, aria-controls, and aria-labelledby.
+ */
+
+import { tabsSchema } from '../schemas/tabs.schema';
+import type { LokaScriptInstance } from '../schemas/types';
+import { resolveRuntime } from '../schemas/types';
+
+export const tabsSource = tabsSchema.source;
+export const tabsMetadata = tabsSchema;
+
+let idCounter = 0;
+
+function ensureId(el: HTMLElement, prefix: string): string {
+  if (!el.id) {
+    el.id = `${prefix}-${++idCounter}`;
+  }
+  return el.id;
+}
+
+/**
+ * Imperative installer for Tabs behavior.
+ */
+function installTabs(element: HTMLElement, params: Record<string, any>): void {
+  const orientation = params.orientation === 'vertical' ? 'vertical' : 'horizontal';
+  const wrap = params.wrap !== false;
+  const activeClass = (params.activeClass as string) || 'active';
+  const initialIndex = typeof params.activeTab === 'number' ? params.activeTab : 0;
+
+  // Discover tabs and panels
+  const tabs = Array.from(element.querySelectorAll<HTMLElement>('[role="tab"]'));
+  const panels = Array.from(element.querySelectorAll<HTMLElement>('[role="tabpanel"]'));
+
+  if (tabs.length === 0 || panels.length === 0) return;
+
+  // Find or mark the tablist
+  const tablist = element.querySelector<HTMLElement>('[role="tablist"]') || tabs[0].parentElement;
+  if (tablist && !tablist.getAttribute('role')) {
+    tablist.setAttribute('role', 'tablist');
+  }
+  if (tablist) {
+    tablist.setAttribute('aria-orientation', orientation);
+  }
+
+  // Wire IDs, aria-controls, aria-labelledby
+  const count = Math.min(tabs.length, panels.length);
+  for (let i = 0; i < count; i++) {
+    const tabId = ensureId(tabs[i], 'tab');
+    const panelId = ensureId(panels[i], 'tabpanel');
+    tabs[i].setAttribute('aria-controls', panelId);
+    panels[i].setAttribute('aria-labelledby', tabId);
+  }
+
+  let currentIndex = -1;
+
+  function selectTab(index: number, previousIndex: number): boolean {
+    if (index === previousIndex || index < 0 || index >= count) return false;
+
+    const detail = {
+      tab: tabs[index],
+      panel: panels[index],
+      index,
+      previousIndex,
+    };
+
+    // Cancelable before-event
+    const changeEvent = new CustomEvent('tabs:change', {
+      bubbles: true,
+      cancelable: true,
+      detail,
+    });
+    element.dispatchEvent(changeEvent);
+    if (changeEvent.defaultPrevented) return false;
+
+    // Deactivate previous
+    if (previousIndex >= 0 && previousIndex < count) {
+      tabs[previousIndex].setAttribute('aria-selected', 'false');
+      tabs[previousIndex].setAttribute('tabindex', '-1');
+      tabs[previousIndex].classList.remove(activeClass);
+      panels[previousIndex].setAttribute('aria-hidden', 'true');
+      panels[previousIndex].classList.remove(activeClass);
+    }
+
+    // Activate new
+    tabs[index].setAttribute('aria-selected', 'true');
+    tabs[index].setAttribute('tabindex', '0');
+    tabs[index].classList.add(activeClass);
+    panels[index].setAttribute('aria-hidden', 'false');
+    panels[index].classList.add(activeClass);
+
+    currentIndex = index;
+
+    element.dispatchEvent(new CustomEvent('tabs:changed', { bubbles: true, detail }));
+    return true;
+  }
+
+  // Initialize all tabs as inactive, then activate initial
+  for (let i = 0; i < count; i++) {
+    tabs[i].setAttribute('aria-selected', 'false');
+    tabs[i].setAttribute('tabindex', '-1');
+    tabs[i].classList.remove(activeClass);
+    panels[i].setAttribute('aria-hidden', 'true');
+    panels[i].classList.remove(activeClass);
+  }
+
+  const clamped = Math.max(0, Math.min(initialIndex, count - 1));
+  // Directly activate without firing change event on init
+  tabs[clamped].setAttribute('aria-selected', 'true');
+  tabs[clamped].setAttribute('tabindex', '0');
+  tabs[clamped].classList.add(activeClass);
+  panels[clamped].setAttribute('aria-hidden', 'false');
+  panels[clamped].classList.add(activeClass);
+  currentIndex = clamped;
+
+  // Click handler
+  for (let i = 0; i < count; i++) {
+    tabs[i].addEventListener('click', () => {
+      selectTab(i, currentIndex);
+      tabs[i].focus();
+    });
+  }
+
+  // Keyboard handler on tablist
+  const keyTarget = tablist || element;
+  keyTarget.addEventListener('keydown', (e: KeyboardEvent) => {
+    const isHorizontal = orientation === 'horizontal';
+    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+
+    let nextIndex: number | null = null;
+
+    if (e.key === nextKey) {
+      nextIndex = currentIndex + 1;
+      if (nextIndex >= count) nextIndex = wrap ? 0 : null;
+    } else if (e.key === prevKey) {
+      nextIndex = currentIndex - 1;
+      if (nextIndex < 0) nextIndex = wrap ? count - 1 : null;
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      nextIndex = count - 1;
+    }
+
+    if (nextIndex !== null) {
+      e.preventDefault();
+      if (selectTab(nextIndex, currentIndex)) {
+        tabs[nextIndex].focus();
+      }
+    }
+  });
+
+  // Programmatic tab selection
+  element.addEventListener('tabs:select', ((e: CustomEvent) => {
+    const index = e.detail?.index;
+    if (typeof index === 'number') {
+      selectTab(index, currentIndex);
+    }
+  }) as EventListener);
+}
+
+/**
+ * Register the Tabs behavior with LokaScript.
+ */
+export async function registerTabs(hyperfixi?: LokaScriptInstance): Promise<void> {
+  const hf = hyperfixi || resolveRuntime();
+
+  if (!hf) {
+    throw new Error(
+      'LokaScript not found. Make sure @hyperfixi/core is loaded before registering behaviors.'
+    );
+  }
+
+  const syntheticNode = {
+    type: 'behavior',
+    name: 'Tabs',
+    parameters: ['orientation', 'activeTab', 'wrap', 'activeClass'],
+    eventHandlers: [],
+    imperativeInstaller: installTabs,
+  };
+  const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
+  await hf.execute(syntheticNode, ctx);
+}
+
+// Auto-register when loaded as a script tag
+if (resolveRuntime()) {
+  registerTabs().catch(console.error);
+}
+
+export default {
+  source: tabsSchema.source,
+  metadata: tabsSchema,
+  register: registerTabs,
+};

package/src/behaviors/toggleable.ts

@@ -1,9 +1,13 @@
 /**
- * Toggleable Behavior
+ * Toggleable Behavior — Imperative Implementation
  *
  * A behavior that toggles a CSS class on click.
  * Useful for accordions, dropdowns, and toggle buttons.
  *
+ * Uses direct DOM APIs instead of compiling hyperscript source,
+ * because `toggle .{cls}` template interpolation doesn't resolve
+ * behavior parameters at runtime.
+ *
  * @example
  * ```html
  * <button _="install Toggleable">Toggle</button>
@@ -13,19 +17,46 @@
  */
 
 import { toggleableSchema } from '../schemas/toggleable.schema';
-import type { LokaScriptInstance, LokaScriptWindow } from '../schemas/types';
+import type { LokaScriptInstance } from '../schemas/types';
+import { resolveRuntime } from '../schemas/types';
 
 // Re-export schema-derived values for backwards compatibility
 export const toggleableSource = toggleableSchema.source;
 export const toggleableMetadata = toggleableSchema;
 
+/**
+ * Imperative installer for Toggleable behavior.
+ * Called directly by the runtime when `install Toggleable` is executed.
+ */
+function installToggleable(element: HTMLElement, params: Record<string, any>): void {
+  const cls = params.cls || 'active';
+
+  // Resolve target element
+  let targetEl: HTMLElement = element;
+  if (params.target && params.target !== 'me') {
+    if (typeof params.target === 'string') {
+      const found = document.querySelector(params.target);
+      if (found instanceof HTMLElement) targetEl = found;
+    } else if (params.target instanceof HTMLElement) {
+      targetEl = params.target;
+    }
+  }
+
+  element.addEventListener('click', () => {
+    const wasOn = targetEl.classList.contains(cls);
+    targetEl.classList.toggle(cls);
+    targetEl.dispatchEvent(
+      new CustomEvent(wasOn ? 'toggleable:off' : 'toggleable:on', { bubbles: true })
+    );
+  });
+}
+
 /**
  * Register the Toggleable behavior with LokaScript.
+ * Uses imperative installer via synthetic behavior node.
  */
 export async function registerToggleable(hyperfixi?: LokaScriptInstance): Promise<void> {
-  const hf =
-    hyperfixi ||
-    (typeof window !== 'undefined' ? (window as unknown as LokaScriptWindow).lokascript : null);
+  const hf = hyperfixi || resolveRuntime();
 
   if (!hf) {
     throw new Error(
@@ -33,18 +64,19 @@ export async function registerToggleable(hyperfixi?: LokaScriptInstance): Promis
     );
   }
 
-  const result = hf.compileSync(toggleableSchema.source, { traditional: true });
-
-  if (!result.ok) {
-    throw new Error(`Failed to compile Toggleable behavior: ${JSON.stringify(result.errors)}`);
-  }
-
+  const syntheticNode = {
+    type: 'behavior',
+    name: 'Toggleable',
+    parameters: ['cls', 'target'],
+    eventHandlers: [],
+    imperativeInstaller: installToggleable,
+  };
   const ctx = hf.createContext ? hf.createContext() : { locals: new Map(), globals: new Map() };
-  await hf.execute(result.ast, ctx);
+  await hf.execute(syntheticNode, ctx);
 }
 
 // Auto-register when loaded as a script tag
-if (typeof window !== 'undefined' && (window as unknown as LokaScriptWindow).lokascript) {
+if (resolveRuntime()) {
   registerToggleable().catch(console.error);
 }
 

package/src/generated/metadata.ts

@@ -16,7 +16,13 @@ export const ALL_BEHAVIOR_NAMES: BehaviorName[] = [
   "Sortable",
   "Resizable",
   "Removable",
-  "Toggleable"
+  "Toggleable",
+  "Clipboard",
+  "AutoDismiss",
+  "ClickOutside",
+  "FocusTrap",
+  "ScrollReveal",
+  "Tabs"
 ];
 
 /**
@@ -26,7 +32,12 @@ export const BEHAVIORS_BY_CATEGORY: Record<BehaviorCategory, BehaviorName[]> = {
   "ui": [
     "Draggable",
     "Sortable",
-    "Resizable"
+    "Resizable",
+    "Clipboard",
+    "AutoDismiss",
+    "ClickOutside",
+    "FocusTrap",
+    "Tabs"
   ],
   "data": [
     "Removable"
@@ -35,7 +46,9 @@ export const BEHAVIORS_BY_CATEGORY: Record<BehaviorCategory, BehaviorName[]> = {
   "form": [
     "Toggleable"
   ],
-  "layout": []
+  "layout": [
+    "ScrollReveal"
+  ]
 };
 
 /**
@@ -44,11 +57,17 @@ export const BEHAVIORS_BY_CATEGORY: Record<BehaviorCategory, BehaviorName[]> = {
 export const BEHAVIORS_BY_TIER: Record<BehaviorTier, BehaviorName[]> = {
   "core": [
     "Draggable",
-    "Toggleable"
+    "Toggleable",
+    "Clipboard",
+    "AutoDismiss",
+    "ClickOutside",
+    "FocusTrap",
+    "Tabs"
   ],
   "common": [
     "Sortable",
-    "Removable"
+    "Removable",
+    "ScrollReveal"
   ],
   "optional": [
     "Resizable"
@@ -63,7 +82,13 @@ export const BEHAVIOR_CATEGORIES: Record<BehaviorName, BehaviorCategory> = {
   "Sortable": "ui",
   "Resizable": "ui",
   "Removable": "data",
-  "Toggleable": "form"
+  "Toggleable": "form",
+  "Clipboard": "ui",
+  "AutoDismiss": "ui",
+  "ClickOutside": "ui",
+  "FocusTrap": "ui",
+  "ScrollReveal": "layout",
+  "Tabs": "ui"
 };
 
 /**
@@ -74,5 +99,11 @@ export const BEHAVIOR_TIERS: Record<BehaviorName, BehaviorTier> = {
   "Sortable": "common",
   "Resizable": "optional",
   "Removable": "common",
-  "Toggleable": "core"
+  "Toggleable": "core",
+  "Clipboard": "core",
+  "AutoDismiss": "core",
+  "ClickOutside": "core",
+  "FocusTrap": "core",
+  "ScrollReveal": "common",
+  "Tabs": "core"
 };

package/src/generated/types.ts

@@ -8,12 +8,12 @@
 /**
  * Union of all behavior names.
  */
-export type BehaviorName = 'Draggable' | 'Sortable' | 'Resizable' | 'Removable' | 'Toggleable';
+export type BehaviorName = 'Draggable' | 'Sortable' | 'Resizable' | 'Removable' | 'Toggleable' | 'Clipboard' | 'AutoDismiss' | 'ClickOutside' | 'FocusTrap' | 'ScrollReveal' | 'Tabs';
 
 /**
  * UI category behaviors.
  */
-export type UIBehavior = 'Draggable' | 'Sortable' | 'Resizable';
+export type UIBehavior = 'Draggable' | 'Sortable' | 'Resizable' | 'Clipboard' | 'AutoDismiss' | 'ClickOutside' | 'FocusTrap' | 'Tabs';
 
 /**
  * Data category behaviors.
@@ -33,17 +33,17 @@ export type FormBehavior = 'Toggleable';
 /**
  * Layout category behaviors.
  */
-export type LayoutBehavior = never;
+export type LayoutBehavior = 'ScrollReveal';
 
 /**
  * Core tier behaviors (always loaded).
  */
-export type CoreBehavior = 'Draggable' | 'Toggleable';
+export type CoreBehavior = 'Draggable' | 'Toggleable' | 'Clipboard' | 'AutoDismiss' | 'ClickOutside' | 'FocusTrap' | 'Tabs';
 
 /**
  * Common tier behaviors (high usage).
  */
-export type CommonBehavior = 'Sortable' | 'Removable';
+export type CommonBehavior = 'Sortable' | 'Removable' | 'ScrollReveal';
 
 /**
  * Optional tier behaviors (load on demand).

package/src/index.test.ts

@@ -11,6 +11,18 @@ import {
   sortableMetadata,
   resizableSource,
   resizableMetadata,
+  clipboardSource,
+  clipboardMetadata,
+  autoDismissSource,
+  autoDismissMetadata,
+  clickOutsideSource,
+  clickOutsideMetadata,
+  focusTrapSource,
+  focusTrapMetadata,
+  scrollRevealSource,
+  scrollRevealMetadata,
+  tabsSource,
+  tabsMetadata,
   // Registry functions
   getAvailableBehaviors,
   getBehaviorsByCategory,
@@ -22,6 +34,12 @@ import {
   registerToggleable,
   registerSortable,
   registerResizable,
+  registerClipboard,
+  registerAutoDismiss,
+  registerClickOutside,
+  registerFocusTrap,
+  registerScrollReveal,
+  registerTabs,
   registerAll,
 } from './index';
 
@@ -33,6 +51,12 @@ describe('@hyperfixi/behaviors', () => {
       expect(toggleableSource).toBeDefined();
       expect(sortableSource).toBeDefined();
       expect(resizableSource).toBeDefined();
+      expect(clipboardSource).toBeDefined();
+      expect(autoDismissSource).toBeDefined();
+      expect(clickOutsideSource).toBeDefined();
+      expect(focusTrapSource).toBeDefined();
+      expect(scrollRevealSource).toBeDefined();
+      expect(tabsSource).toBeDefined();
     });
 
     it('should export all behavior metadata', () => {
@@ -41,6 +65,12 @@ describe('@hyperfixi/behaviors', () => {
       expect(toggleableMetadata.name).toBe('Toggleable');
       expect(sortableMetadata.name).toBe('Sortable');
       expect(resizableMetadata.name).toBe('Resizable');
+      expect(clipboardMetadata.name).toBe('Clipboard');
+      expect(autoDismissMetadata.name).toBe('AutoDismiss');
+      expect(clickOutsideMetadata.name).toBe('ClickOutside');
+      expect(focusTrapMetadata.name).toBe('FocusTrap');
+      expect(scrollRevealMetadata.name).toBe('ScrollReveal');
+      expect(tabsMetadata.name).toBe('Tabs');
     });
 
     it('should export register functions', () => {
@@ -49,6 +79,12 @@ describe('@hyperfixi/behaviors', () => {
       expect(registerToggleable).toBeDefined();
       expect(registerSortable).toBeDefined();
       expect(registerResizable).toBeDefined();
+      expect(registerClipboard).toBeDefined();
+      expect(registerAutoDismiss).toBeDefined();
+      expect(registerClickOutside).toBeDefined();
+      expect(registerFocusTrap).toBeDefined();
+      expect(registerScrollReveal).toBeDefined();
+      expect(registerTabs).toBeDefined();
       expect(registerAll).toBeDefined();
     });
   });
@@ -61,29 +97,60 @@ describe('@hyperfixi/behaviors', () => {
       expect(names).toContain('Toggleable');
       expect(names).toContain('Sortable');
       expect(names).toContain('Resizable');
-      expect(names.length).toBe(5);
+      expect(names).toContain('Clipboard');
+      expect(names).toContain('AutoDismiss');
+      expect(names).toContain('ClickOutside');
+      expect(names).toContain('FocusTrap');
+      expect(names).toContain('ScrollReveal');
+      expect(names).toContain('Tabs');
+      expect(names.length).toBe(11);
     });
 
     it('getBehaviorsByCategory should group by category', () => {
-      expect(getBehaviorsByCategory('ui')).toEqual(['Draggable', 'Sortable', 'Resizable']);
+      const ui = getBehaviorsByCategory('ui');
+      expect(ui).toContain('Draggable');
+      expect(ui).toContain('Sortable');
+      expect(ui).toContain('Resizable');
+      expect(ui).toContain('Clipboard');
+      expect(ui).toContain('AutoDismiss');
+      expect(ui).toContain('ClickOutside');
+      expect(ui).toContain('FocusTrap');
+      expect(ui).toContain('Tabs');
       expect(getBehaviorsByCategory('data')).toEqual(['Removable']);
       expect(getBehaviorsByCategory('form')).toEqual(['Toggleable']);
+      expect(getBehaviorsByCategory('layout')).toEqual(['ScrollReveal']);
     });
 
     it('getBehaviorsByTier should group by tier', () => {
-      expect(getBehaviorsByTier('core')).toEqual(['Draggable', 'Toggleable']);
-      expect(getBehaviorsByTier('common')).toEqual(['Sortable', 'Removable']);
+      const core = getBehaviorsByTier('core');
+      expect(core).toContain('Draggable');
+      expect(core).toContain('Toggleable');
+      expect(core).toContain('Clipboard');
+      expect(core).toContain('AutoDismiss');
+      expect(core).toContain('ClickOutside');
+      expect(core).toContain('FocusTrap');
+      expect(core).toContain('Tabs');
+      const common = getBehaviorsByTier('common');
+      expect(common).toContain('Sortable');
+      expect(common).toContain('Removable');
+      expect(common).toContain('ScrollReveal');
       expect(getBehaviorsByTier('optional')).toEqual(['Resizable']);
     });
 
     it('getAllSchemas should return all schemas', () => {
       const schemas = getAllSchemas();
-      expect(schemas.length).toBe(5);
+      expect(schemas.length).toBe(11);
       expect(schemas.map(s => s.name).sort()).toEqual([
+        'AutoDismiss',
+        'ClickOutside',
+        'Clipboard',
         'Draggable',
+        'FocusTrap',
         'Removable',
         'Resizable',
+        'ScrollReveal',
         'Sortable',
+        'Tabs',
         'Toggleable',
       ]);
     });
@@ -177,4 +244,75 @@ describe('@hyperfixi/behaviors', () => {
       expect(resizableSource).toContain('maxWidth');
     });
   });
+
+  describe('Clipboard behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(clipboardSource).toContain('behavior Clipboard');
+      expect(clipboardSource).toContain('clipboard:copied');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(clipboardMetadata.category).toBe('ui');
+      expect(clipboardMetadata.tier).toBe('core');
+    });
+  });
+
+  describe('AutoDismiss behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(autoDismissSource).toContain('behavior AutoDismiss');
+      expect(autoDismissSource).toContain('autodismiss:dismissed');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(autoDismissMetadata.category).toBe('ui');
+      expect(autoDismissMetadata.tier).toBe('core');
+    });
+  });
+
+  describe('ClickOutside behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(clickOutsideSource).toContain('behavior ClickOutside');
+      expect(clickOutsideSource).toContain('pointerdown');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(clickOutsideMetadata.category).toBe('ui');
+      expect(clickOutsideMetadata.tier).toBe('core');
+    });
+  });
+
+  describe('FocusTrap behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(focusTrapSource).toContain('behavior FocusTrap');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(focusTrapMetadata.category).toBe('ui');
+      expect(focusTrapMetadata.tier).toBe('core');
+    });
+  });
+
+  describe('ScrollReveal behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(scrollRevealSource).toContain('behavior ScrollReveal');
+      expect(scrollRevealSource).toContain('IntersectionObserver');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(scrollRevealMetadata.category).toBe('layout');
+      expect(scrollRevealMetadata.tier).toBe('common');
+    });
+  });
+
+  describe('Tabs behavior', () => {
+    it('should have valid hyperscript source', () => {
+      expect(tabsSource).toContain('behavior Tabs');
+      expect(tabsSource).toContain('orientation');
+    });
+
+    it('should have correct schema metadata', () => {
+      expect(tabsMetadata.category).toBe('ui');
+      expect(tabsMetadata.tier).toBe('core');
+    });
+  });
 });