@epoch32/visage 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
   "main": "./dist/index.js",
@@ -100,7 +100,7 @@
     "package.json"
   ],
   "scripts": {
-    "build": "bun build src/index.ts src/signals/index.ts src/dom/index.ts src/template/index.ts src/api/index.ts src/rpc/index.ts src/query/index.ts src/style/index.ts src/devtools/index.ts src/ui/index.ts src/virtual/index.ts src/form/index.ts src/server/index.ts src/router/index.ts src/vite/index.ts src/jsx-runtime/index.ts src/charts/index.ts --root src --outdir dist/ && bun x tsc -p tsconfig.build.json && cp src/jsx-runtime/jsx.d.ts dist/jsx-runtime/jsx.d.ts",
+    "build": "bun build src/index.ts src/signals/index.ts src/dom/index.ts src/template/index.ts src/api/index.ts src/rpc/index.ts src/query/index.ts src/style/index.ts src/devtools/index.ts src/ui/index.ts src/virtual/index.ts src/form/index.ts src/server/index.ts src/router/index.ts src/vite/index.ts src/jsx-runtime/index.ts src/charts/index.ts --root src --outdir dist/ --splitting && bun x tsc -p tsconfig.build.json && cp src/jsx-runtime/jsx.d.ts dist/jsx-runtime/jsx.d.ts",
     "test": "bun test",
     "test:watch": "bun test --watch",
     "test:coverage": "bun test --coverage",

package/src/dom/render.ts

@@ -68,9 +68,6 @@ export function setAttribute(el: HTMLElement | SVGElement, key: string, value: a
     const useCapture = key.startsWith("onCapture");
 
     el.addEventListener(eventName, value as EventListener, useCapture);
-    onCleanup(() => {
-      el.removeEventListener(eventName, value as EventListener, useCapture);
-    });
     return;
   }
 
@@ -82,16 +79,27 @@ export function setAttribute(el: HTMLElement | SVGElement, key: string, value: a
 
   // Reactive class / className with array or object support
   if (key === "class" || key === "className") {
+    const isSvg = typeof SVGElement !== "undefined" && el instanceof SVGElement;
     if (hasReactiveClass(value)) {
       effect(() => {
         const cls = normalizeClass(value);
-        if (cls) el.setAttribute("class", cls);
-        else el.removeAttribute("class");
+        if (cls) {
+          el.setAttribute("class", cls);
+          if (!isSvg) (el as HTMLElement).className = cls;
+        } else {
+          el.removeAttribute("class");
+          if (!isSvg) (el as HTMLElement).className = "";
+        }
       });
     } else {
       const cls = normalizeClass(value);
-      if (cls) el.setAttribute("class", cls);
-      else el.removeAttribute("class");
+      if (cls) {
+        el.setAttribute("class", cls);
+        if (!isSvg) (el as HTMLElement).className = cls;
+      } else {
+        el.removeAttribute("class");
+        if (!isSvg) (el as HTMLElement).className = "";
+      }
     }
     return;
   }
@@ -144,10 +152,13 @@ function applyProp(el: HTMLElement | SVGElement, key: string, value: any) {
 
   if (key === "className" || key === "class") {
     const cls = normalizeClass(value);
+    const isSvg = typeof SVGElement !== "undefined" && el instanceof SVGElement;
     if (cls) {
       el.setAttribute("class", cls);
+      if (!isSvg) (el as HTMLElement).className = cls;
     } else {
       el.removeAttribute("class");
+      if (!isSvg) (el as HTMLElement).className = "";
     }
   } else if (key === "style") {
     if (typeof value === "string") {
@@ -177,6 +188,8 @@ function applyProp(el: HTMLElement | SVGElement, key: string, value: any) {
       el.setAttribute(key, String(value));
     } else if (value === true) {
       el.setAttribute(key, "");
+    } else if (value === false) {
+      el.removeAttribute(key);
     } else {
       el.setAttribute(key, String(value));
     }

package/src/index.ts

@@ -322,9 +322,11 @@ export {
   type CommandItemProps,
   CommandList,
   type CommandProps,
+  type CreateTabsOptions,
   createControllableSignal,
   createIcon,
   createId,
+  createTabs,
   createToastManager,
   DataTable,
   type DataTableProps,

package/src/signals/computed.ts

@@ -2,7 +2,12 @@
  * Visage Lazy, Glitch-Free Computed State Engine
  */
 import type { Scope } from "./scope";
-import { currentScope, currentSubscriber, setCurrentScope, setCurrentSubscriber } from "./system";
+import {
+  getCurrentScope,
+  getCurrentSubscriber,
+  setCurrentScope,
+  setCurrentSubscriber
+} from "./system";
 import {
   COMPUTED_BRAND,
   type ComputedOptions,
@@ -30,9 +35,9 @@ export class Computed<T> implements ISubscriber, IDependency {
 
   constructor(fn: () => T) {
     this._fn = fn;
-    this.scope = currentScope;
-    if (currentScope) {
-      currentScope.addSubscriber(this);
+    this.scope = getCurrentScope();
+    if (this.scope) {
+      this.scope.addSubscriber(this);
     }
   }
 
@@ -41,10 +46,11 @@ export class Computed<T> implements ISubscriber, IDependency {
       return this._fn();
     }
 
-    if (currentSubscriber !== null && currentSubscriber.state !== SubscriberState.DISPOSED) {
-      this._subscribers.add(currentSubscriber);
-      currentSubscriber.sources.add(this);
-      currentSubscriber.sourceVersions.set(this, this.version);
+    const curSub = getCurrentSubscriber();
+    if (curSub !== null && curSub.state !== SubscriberState.DISPOSED) {
+      this._subscribers.add(curSub);
+      curSub.sources.add(this);
+      curSub.sourceVersions.set(this, this.version);
     }
 
     if (this.state === SubscriberState.DIRTY || this.state === SubscriberState.CHECK_DIRTY) {
@@ -108,9 +114,9 @@ export class Computed<T> implements ISubscriber, IDependency {
   private recompute(): void {
     this.cleanupSources();
 
-    const prevSubscriber = currentSubscriber;
+    const prevSubscriber = getCurrentSubscriber();
     setCurrentSubscriber(this);
-    const prevScope = currentScope;
+    const prevScope = getCurrentScope();
     setCurrentScope(this.scope);
 
     try {
@@ -195,8 +201,9 @@ export function computed<T>(fn: () => T, options?: ComputedOptions): ReadonlySig
           .filter(Boolean)
     });
     (c as any)._devId = sigId;
-    if (currentScope) {
-      currentScope.addCleanup(() => {
+    const curScope = getCurrentScope();
+    if (curScope) {
+      curScope.addCleanup(() => {
         devtools.unregisterSignal(sigId);
       });
     }

package/src/signals/context.ts

@@ -1,6 +1,5 @@
 import { type Child, insertChild } from "../dom/render";
 import { getActiveScope, runInScope, Scope } from "./scope";
-import { untrack } from "./system";
 
 export interface Context<T> {
   id: symbol;
@@ -54,7 +53,7 @@ export function createContext<T>(defaultValue?: T): Context<T | undefined> {
       return runInScope(scope, () => {
         const content =
           typeof props.children === "function"
-            ? untrack(() => (props.children as (...args: any[]) => any)())
+            ? (props.children as (...args: any[]) => any)()
             : props.children;
         if (typeof document !== "undefined") {
           const frag = document.createDocumentFragment();

package/src/signals/effect.ts

@@ -6,9 +6,9 @@ import type { Scope } from "./scope";
 import {
   addPendingEffect,
   batchDepth,
-  currentScope,
-  currentSubscriber,
   flushEffects,
+  getCurrentScope,
+  getCurrentSubscriber,
   removePendingEffect,
   setCurrentScope,
   setCurrentSubscriber
@@ -28,9 +28,9 @@ export class Effect implements ISubscriber {
 
   constructor(fn: () => void | CleanupFn) {
     this._fn = fn;
-    this.scope = currentScope;
-    if (currentScope) {
-      currentScope.addSubscriber(this);
+    this.scope = getCurrentScope();
+    if (this.scope) {
+      this.scope.addSubscriber(this);
     }
     this.run();
   }
@@ -85,9 +85,9 @@ export class Effect implements ISubscriber {
     this.runCleanups();
     this.cleanupSources();
 
-    const prevSubscriber = currentSubscriber;
+    const prevSubscriber = getCurrentSubscriber();
     setCurrentSubscriber(this);
-    const prevScope = currentScope;
+    const prevScope = getCurrentScope();
     setCurrentScope(this.scope);
 
     try {

package/src/signals/signal.ts

@@ -1,7 +1,7 @@
 /**
  * Visage Core Writable Signal & State Primitives
  */
-import { batch, currentScope, currentSubscriber, warnedCyclicSubscribers } from "./system";
+import { batch, getCurrentScope, getCurrentSubscriber, warnedCyclicSubscribers } from "./system";
 import {
   type IDependency,
   type ISubscriber,
@@ -32,10 +32,11 @@ export class Signal<T> implements IDependency {
   }
 
   get(): T {
-    if (currentSubscriber !== null && currentSubscriber.state !== SubscriberState.DISPOSED) {
-      this._subscribers.add(currentSubscriber);
-      currentSubscriber.sources.add(this);
-      currentSubscriber.sourceVersions.set(this, this.version);
+    const curSub = getCurrentSubscriber();
+    if (curSub !== null && curSub.state !== SubscriberState.DISPOSED) {
+      this._subscribers.add(curSub);
+      curSub.sources.add(this);
+      curSub.sourceVersions.set(this, this.version);
     }
     return this._value;
   }
@@ -45,9 +46,10 @@ export class Signal<T> implements IDependency {
       return;
     }
 
-    if (currentSubscriber !== null && this._subscribers.has(currentSubscriber)) {
-      if (!warnedCyclicSubscribers.has(currentSubscriber)) {
-        warnedCyclicSubscribers.add(currentSubscriber);
+    const curSub = getCurrentSubscriber();
+    if (curSub !== null && this._subscribers.has(curSub)) {
+      if (!warnedCyclicSubscribers.has(curSub)) {
+        warnedCyclicSubscribers.add(curSub);
         if (typeof console !== "undefined" && typeof console.warn === "function") {
           console.warn(
             `[Visage Reactivity] Cyclic update detected: An active subscriber modified a signal that it depends on. ` +
@@ -228,8 +230,9 @@ export function signal<T>(
       }
     };
     window.addEventListener("storage", onStorage);
-    if (currentScope) {
-      currentScope.addCleanup(() => {
+    const curScope = getCurrentScope();
+    if (curScope) {
+      curScope.addCleanup(() => {
         window.removeEventListener("storage", onStorage);
       });
     }
@@ -268,8 +271,9 @@ export function signal<T>(
           .filter(Boolean)
     });
     (s as any)._devId = sigId;
-    if (currentScope) {
-      currentScope.addCleanup(() => {
+    const curScope = getCurrentScope();
+    if (curScope) {
+      curScope.addCleanup(() => {
         devtools.unregisterSignal(sigId);
       });
     }

package/src/signals/system.ts

@@ -3,55 +3,81 @@
  */
 import { type ISubscriber, SubscriberState } from "./types";
 
-export let currentSubscriber: ISubscriber | null = null;
-export let currentScope: any = null;
-export let batchDepth = 0;
-export const pendingEffects: Set<any> = new Set();
-export const warnedCyclicSubscribers: WeakSet<ISubscriber> = new WeakSet();
-export let isFlushing = false;
+interface ReactivityContext {
+  currentSubscriber: ISubscriber | null;
+  currentScope: any;
+  batchDepth: number;
+  pendingEffects: Set<any>;
+  warnedCyclicSubscribers: WeakSet<ISubscriber>;
+  isFlushing: boolean;
+}
+
+const REACTIVITY_KEY = Symbol.for("visage.reactivity.context");
+const g = globalThis as unknown as { [REACTIVITY_KEY]?: ReactivityContext };
+if (!g[REACTIVITY_KEY]) {
+  g[REACTIVITY_KEY] = {
+    currentSubscriber: null,
+    currentScope: null,
+    batchDepth: 0,
+    pendingEffects: new Set(),
+    warnedCyclicSubscribers: new WeakSet(),
+    isFlushing: false
+  };
+}
+const ctx = g[REACTIVITY_KEY]!;
+
+export let currentSubscriber: ISubscriber | null = ctx.currentSubscriber;
+export let currentScope: any = ctx.currentScope;
+export let batchDepth = ctx.batchDepth;
+export const pendingEffects: Set<any> = ctx.pendingEffects;
+export const warnedCyclicSubscribers: WeakSet<ISubscriber> = ctx.warnedCyclicSubscribers;
+export let isFlushing = ctx.isFlushing;
 
 export function setCurrentSubscriber(sub: ISubscriber | null): void {
+  ctx.currentSubscriber = sub;
   currentSubscriber = sub;
 }
 
 export function getCurrentSubscriber(): ISubscriber | null {
-  return currentSubscriber;
+  return ctx.currentSubscriber;
 }
 
 export function setCurrentScope(scope: any): void {
+  ctx.currentScope = scope;
   currentScope = scope;
 }
 
 export function getCurrentScope(): any {
-  return currentScope;
+  return ctx.currentScope;
 }
 
 export function addPendingEffect(eff: any): void {
-  pendingEffects.add(eff);
+  ctx.pendingEffects.add(eff);
 }
 
 export function removePendingEffect(eff: any): void {
-  pendingEffects.delete(eff);
+  ctx.pendingEffects.delete(eff);
 }
 
 const MAX_FLUSH_COUNT = 100;
 
 export function flushEffects(): void {
-  if (isFlushing || batchDepth > 0) return;
+  if (ctx.isFlushing || ctx.batchDepth > 0) return;
+  ctx.isFlushing = true;
   isFlushing = true;
   let iterations = 0;
   try {
-    while (pendingEffects.size > 0) {
+    while (ctx.pendingEffects.size > 0) {
       if (++iterations > MAX_FLUSH_COUNT) {
-        pendingEffects.clear();
+        ctx.pendingEffects.clear();
         throw new Error(
           `[Visage Reactivity] Maximum update depth exceeded (${MAX_FLUSH_COUNT} cycles). ` +
             `An effect continuously triggered state mutations (infinite loop detected). ` +
             `Ensure effects that modify signals do not unconditionally depend on them, or use untrack() to read state.`
         );
       }
-      const effectsToRun = Array.from(pendingEffects);
-      pendingEffects.clear();
+      const effectsToRun = Array.from(ctx.pendingEffects);
+      ctx.pendingEffects.clear();
 
       for (const eff of effectsToRun) {
         if (eff.state === SubscriberState.DIRTY || eff.state === SubscriberState.CHECK_DIRTY) {
@@ -60,6 +86,7 @@ export function flushEffects(): void {
       }
     }
   } finally {
+    ctx.isFlushing = false;
     isFlushing = false;
   }
 }
@@ -85,12 +112,14 @@ export function flushEffects(): void {
  * @returns The return value of `fn`
  */
 export function batch<T>(fn: () => T): T {
-  batchDepth++;
+  ctx.batchDepth++;
+  batchDepth = ctx.batchDepth;
   try {
     return fn();
   } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
+    ctx.batchDepth--;
+    batchDepth = ctx.batchDepth;
+    if (ctx.batchDepth === 0) {
       flushEffects();
     }
   }
@@ -114,11 +143,11 @@ export function batch<T>(fn: () => T): T {
  * @returns The return value of `fn`
  */
 export function untrack<T>(fn: () => T): T {
-  const prev = currentSubscriber;
-  currentSubscriber = null;
+  const prev = ctx.currentSubscriber;
+  setCurrentSubscriber(null);
   try {
     return fn();
   } finally {
-    currentSubscriber = prev;
+    setCurrentSubscriber(prev);
   }
 }

package/src/ui/index.ts

@@ -92,6 +92,8 @@ export {
   type SwitchThumbProps
 } from "./switch";
 export {
+  type CreateTabsOptions,
+  createTabs,
   Tabs,
   TabsContent,
   type TabsContentProps,

package/src/ui/tabs.tsx

@@ -1,6 +1,6 @@
 import { Show } from "../dom/control-flow";
 import type { Child } from "../dom/render";
-import type { ReadonlySignal } from "../signals";
+import { isSignal, type ReadonlySignal, signal } from "../signals";
 import { createContext, useContext } from "../signals/context";
 import { createControllableSignal, createId } from "./utils";
 
@@ -105,7 +105,7 @@ export function TabsRoot(props: TabsProps): Child {
             ))}
           </>
         ) : null}
-        {typeof children === "function" ? children() : children}
+        {children}
       </Tag>
     )
   });
@@ -221,13 +221,14 @@ export function TabsTrigger(props: TabsTriggerProps): Child {
       id={ctx ? `${ctx.baseId}-trigger-${value}` : undefined}
       type={Tag === "button" ? "button" : undefined}
       role="tab"
-      aria-selected={isSelected}
+      aria-selected={() => String(isSelected())}
       aria-controls={ctx ? `${ctx.baseId}-panel-${value}` : undefined}
       data-state={() => (isSelected() ? "active" : "inactive")}
+      data-active={() => (isSelected() ? "true" : "false")}
       data-value={value}
       tabIndex={() => (isSelected() ? 0 : -1)}
       disabled={disabled}
-      class={className}
+      class={() => [className, isSelected() ? "active" : ""].filter(Boolean).join(" ")}
       style={style}
       onClick={handleClick}
       {...rest}
@@ -289,9 +290,214 @@ export function TabsContent(props: TabsContentProps): Child {
   );
 }
 
+export interface CreateTabsOptions {
+  value?: () => string | undefined;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: "horizontal" | "vertical";
+  activationMode?: "automatic" | "manual";
+}
+
+export function createTabs(options: CreateTabsOptions = {}) {
+  const activeSignal =
+    typeof options.value === "function"
+      ? (options.value as ReadonlySignal<string>)
+      : signal<string>(options.defaultValue ?? "");
+
+  const value = activeSignal;
+  const setValue = (next: string) => {
+    if (isSignal(activeSignal)) {
+      (activeSignal as any).set(next);
+    }
+    if (options.onValueChange) {
+      options.onValueChange(next);
+    }
+  };
+
+  const baseId = createId("tabs");
+  const orientation = options.orientation ?? "horizontal";
+  const activationMode = options.activationMode ?? "automatic";
+
+  const Root = (props: {
+    as?: string;
+    class?: any;
+    style?: any;
+    children: Child;
+    [key: string]: any;
+  }) => {
+    const { as: Tag = "div", class: className, style, children, ...rest } = props;
+    return (
+      <Tag data-orientation={orientation} class={className} style={style} {...rest}>
+        {children}
+      </Tag>
+    );
+  };
+
+  const List = (props: TabsListProps) => {
+    const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (onKeyDown) onKeyDown(e);
+      if (e.defaultPrevented) return;
+
+      const target = e.target as HTMLElement | null;
+      if (target?.getAttribute("role") !== "tab") return;
+
+      const list = target.closest('[role="tablist"]');
+      if (!list) return;
+
+      const tabs = Array.from(list.querySelectorAll<HTMLElement>('[role="tab"]:not([disabled])'));
+      const index = tabs.indexOf(target);
+      if (index === -1) return;
+
+      let nextIndex = index;
+      const isHorizontal = orientation === "horizontal";
+      const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+      const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+
+      if (e.key === prevKey) {
+        nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+        e.preventDefault();
+      } else if (e.key === nextKey) {
+        nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+        e.preventDefault();
+      } else if (e.key === "Home") {
+        nextIndex = 0;
+        e.preventDefault();
+      } else if (e.key === "End") {
+        nextIndex = tabs.length - 1;
+        e.preventDefault();
+      }
+
+      if (nextIndex !== index) {
+        const nextTab = tabs[nextIndex]!;
+        nextTab.focus();
+        if (activationMode === "automatic") {
+          const val = nextTab.getAttribute("data-value");
+          if (val) setValue(val);
+        }
+      }
+    };
+
+    return (
+      <Tag
+        role="tablist"
+        aria-orientation={orientation}
+        class={className}
+        style={style}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    );
+  };
+
+  const Trigger = (props: TabsTriggerProps) => {
+    const isSelected = () => value() === props.value;
+
+    const handleClick = (e: MouseEvent) => {
+      if (props.onClick) props.onClick(e);
+      if (!e.defaultPrevented) {
+        setValue(props.value);
+      }
+    };
+
+    const {
+      value: tabVal,
+      disabled,
+      as: Tag = "button",
+      children,
+      onClick,
+      class: className,
+      style,
+      ...rest
+    } = props;
+
+    return (
+      <Tag
+        id={`${baseId}-trigger-${tabVal}`}
+        type={Tag === "button" ? "button" : undefined}
+        role="tab"
+        aria-selected={() => String(isSelected())}
+        aria-controls={`${baseId}-panel-${tabVal}`}
+        data-state={() => (isSelected() ? "active" : "inactive")}
+        data-active={() => (isSelected() ? "true" : "false")}
+        data-value={tabVal}
+        tabIndex={() => (isSelected() ? 0 : -1)}
+        disabled={disabled}
+        class={() => [className, isSelected() ? "active" : ""].filter(Boolean).join(" ")}
+        style={style}
+        onClick={handleClick}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    );
+  };
+
+  const Content = (props: TabsContentProps) => {
+    const isSelected = () => value() === props.value;
+    const {
+      value: tabVal,
+      forceMount,
+      as: Tag = "div",
+      children,
+      class: className,
+      style,
+      ...rest
+    } = props;
+
+    if (forceMount) {
+      return (
+        <Tag
+          id={`${baseId}-panel-${tabVal}`}
+          role="tabpanel"
+          aria-labelledby={`${baseId}-trigger-${tabVal}`}
+          data-state={() => (isSelected() ? "active" : "inactive")}
+          hidden={() => !isSelected()}
+          tabIndex={0}
+          class={className}
+          style={style}
+          {...rest}
+        >
+          {children}
+        </Tag>
+      );
+    }
+
+    return (
+      <Show when={isSelected}>
+        <Tag
+          id={`${baseId}-panel-${tabVal}`}
+          role="tabpanel"
+          aria-labelledby={`${baseId}-trigger-${tabVal}`}
+          data-state="active"
+          tabIndex={0}
+          class={className}
+          style={style}
+          {...rest}
+        >
+          {children}
+        </Tag>
+      </Show>
+    );
+  };
+
+  return {
+    value,
+    setValue,
+    Root,
+    List,
+    Trigger,
+    Content
+  };
+}
+
 export const Tabs = Object.assign(TabsRoot, {
   Root: TabsRoot,
   List: TabsList,
   Trigger: TabsTrigger,
-  Content: TabsContent
+  Content: TabsContent,
+  create: createTabs
 });

package/src/ui/utils.ts

@@ -35,9 +35,7 @@ export function createControllableSignal<T>(options: {
     const currentVal = getter();
     const nextVal = typeof next === "function" ? (next as (prev: T) => T)(currentVal) : next;
 
-    if (!isControlled) {
-      internal.set(nextVal);
-    }
+    internal.set(nextVal);
     if (options.onChange && nextVal !== currentVal) {
       options.onChange(nextVal);
     }