@epoch32/visage 1.2.0 → 1.3.1

package/src/form/form.ts

@@ -54,6 +54,32 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
   const submitCount = signal(0);
   const customErrors = signal<Partial<Record<keyof T, string>>>({});
 
+  const getValues = (): T => {
+    const res: Record<string, any> = {};
+    for (const key in fields) {
+      res[key] = (fields as any)[key].value();
+    }
+    return res as T;
+  };
+
+  const schemaValidation = computed(() => {
+    if (!options.schema) {
+      return { success: true, issuesMap: new Map<string, string>() };
+    }
+    const currentValues = getValues();
+    const res = validateWithSchema(options.schema, currentValues);
+    const issuesMap = new Map<string, string>();
+    if (!res.success && res.issues) {
+      for (const issue of res.issues) {
+        const pathKey = String(issue.path);
+        if (!issuesMap.has(pathKey)) {
+          issuesMap.set(pathKey, issue.message);
+        }
+      }
+    }
+    return { success: res.success, issuesMap };
+  });
+
   for (const key in initialValues) {
     const initVal = initialValues[key];
     const valSignal = signal(initVal);
@@ -74,25 +100,12 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
 
         if (!options.schema) return null;
 
-        const currentValues = getValues();
-        const res = validateWithSchema(options.schema, currentValues);
-        if (!res.success && res.issues) {
-          const match = res.issues.find((i) => i.path === key || i.path === `${key}`);
-          return match ? match.message : null;
-        }
-        return null;
+        const validation = schemaValidation();
+        return validation.issuesMap.get(key) ?? validation.issuesMap.get(String(key)) ?? null;
       })
     };
   }
 
-  const getValues = (): T => {
-    const res: Record<string, any> = {};
-    for (const key in fields) {
-      res[key] = (fields as any)[key].value();
-    }
-    return res as T;
-  };
-
   const errors = computed<Partial<Record<keyof T, string>>>(() => {
     const errMap: Partial<Record<keyof T, string>> = {};
     for (const key in fields) {
@@ -118,8 +131,7 @@ export function createForm<T extends Record<string, any> = Record<string, any>>(
 
   const validate = (): boolean => {
     if (!options.schema) return true;
-    const res = validateWithSchema(options.schema, getValues());
-    return res.success;
+    return schemaValidation().success;
   };
 
   const handleSubmit = async (e?: Event): Promise<boolean> => {

package/src/index.ts

@@ -308,6 +308,19 @@ export {
   type AccordionProps,
   type AccordionSingleProps,
   AccordionTrigger,
+  BottomBar,
+  BottomBarAction,
+  type BottomBarActionProps,
+  BottomBarBadge,
+  type BottomBarBadgeProps,
+  type BottomBarContextValue,
+  BottomBarItem,
+  type BottomBarItemConfig,
+  type BottomBarItemProps,
+  type BottomBarProps,
+  BottomBarRoot,
+  BottomBarSeparator,
+  type BottomBarSeparatorProps,
   type ColumnDef,
   Command,
   CommandDialog,
@@ -394,6 +407,7 @@ export {
   trapFocus,
   useAccordionContext,
   useAccordionItemContext,
+  useBottomBarContext,
   useCommandContext,
   useDialogContext,
   useDropdownMenuContext,

package/src/signals/effect.ts

@@ -5,8 +5,8 @@ import { Computed } from "./computed";
 import type { Scope } from "./scope";
 import {
   addPendingEffect,
-  batchDepth,
   flushEffects,
+  getBatchDepth,
   getCurrentScope,
   getCurrentSubscriber,
   removePendingEffect,
@@ -57,7 +57,7 @@ export class Effect implements ISubscriber {
     this.state = targetState;
     addPendingEffect(this);
 
-    if (batchDepth === 0) {
+    if (getBatchDepth() === 0) {
       flushEffects();
     }
   }

package/src/signals/scope.ts

@@ -1,7 +1,7 @@
 /**
  * Visage Reactive Scope & Lifecycle Management
  */
-import { currentScope, currentSubscriber, getCurrentScope, setCurrentScope } from "./system";
+import { getCurrentScope, getCurrentSubscriber, setCurrentScope } from "./system";
 import type { CleanupFn, ISubscriber } from "./types";
 
 /**
@@ -14,7 +14,7 @@ export class Scope {
   isDisposed = false;
   context?: Map<symbol, any>;
 
-  constructor(parent: Scope | null = currentScope) {
+  constructor(parent: Scope | null = getCurrentScope()) {
     this.parent = parent;
     if (parent && !parent.isDisposed) {
       parent.cleanups.push(() => this.dispose());
@@ -72,10 +72,12 @@ export class Scope {
  * ```
  */
 export function onCleanup(fn: CleanupFn): void {
-  if (currentSubscriber && "addCleanup" in currentSubscriber) {
-    (currentSubscriber as any).addCleanup(fn);
-  } else if (currentScope) {
-    currentScope.addCleanup(fn);
+  const curSub = getCurrentSubscriber();
+  const curScope = getCurrentScope();
+  if (curSub && "addCleanup" in curSub) {
+    (curSub as any).addCleanup(fn);
+  } else if (curScope) {
+    curScope.addCleanup(fn);
   }
 }
 
@@ -101,7 +103,7 @@ export function onCleanup(fn: CleanupFn): void {
  * @returns The return value of `fn`
  */
 export function createRoot<T>(fn: (dispose: () => void) => T): T {
-  const prevScope = currentScope;
+  const prevScope = getCurrentScope();
   const scope = new Scope(null);
   setCurrentScope(scope);
   try {
@@ -115,7 +117,7 @@ export function createRoot<T>(fn: (dispose: () => void) => T): T {
  * Run a function with a specified reactive scope active.
  */
 export function runInScope<T>(scope: Scope | null, fn: () => T): T {
-  const prevScope = currentScope;
+  const prevScope = getCurrentScope();
   setCurrentScope(scope);
   try {
     return fn();

package/src/signals/store.ts

@@ -5,6 +5,7 @@ import { isSignal } from "./types";
 const STORE_RAW = Symbol("visage.store.raw");
 const STORE_SIGNALS = Symbol("visage.store.signals");
 const STORE_PROXY = Symbol("visage.store.proxy");
+const STORE_ITERATE = Symbol("visage.store.iterate");
 
 export type Store<T> = T;
 
@@ -61,9 +62,29 @@ function createStoreProxy<T extends object>(target: T): T {
       return value;
     },
 
+    has(target, prop) {
+      if (prop === STORE_RAW || prop === STORE_PROXY) return true;
+      if (typeof prop === "string" || typeof prop === "symbol") {
+        const sig = getOrCreatePropertySignal(target, prop);
+        sig.get();
+      }
+      return Reflect.has(target, prop);
+    },
+
+    ownKeys(target) {
+      const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+      iterSig.get();
+      return Reflect.ownKeys(target);
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    },
+
     set(target, prop, value, receiver) {
+      const hadProp = Reflect.has(target, prop);
       const prevValue = Reflect.get(target, prop, receiver);
-      if (Object.is(prevValue, value)) {
+      if (hadProp && Object.is(prevValue, value)) {
         return true;
       }
 
@@ -72,10 +93,18 @@ function createStoreProxy<T extends object>(target: T): T {
         const sig = getOrCreatePropertySignal(target, prop);
         sig.set(value);
 
+        // If a new property was added, notify key iteration
+        if (!hadProp) {
+          const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+          iterSig.update((prev: number = 0) => prev + 1);
+        }
+
         // If array length or property keys changed, notify length/keys
         if (Array.isArray(target) && prop !== "length") {
           const lenSig = getOrCreatePropertySignal(target, "length");
           lenSig.set(target.length);
+          const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+          iterSig.update((prev: number = 0) => prev + 1);
         }
       }
       return success;
@@ -87,6 +116,8 @@ function createStoreProxy<T extends object>(target: T): T {
       if (hadProp && success) {
         const sig = getOrCreatePropertySignal(target, prop);
         sig.set(undefined);
+        const iterSig = getOrCreatePropertySignal(target, STORE_ITERATE);
+        iterSig.update((prev: number = 0) => prev + 1);
       }
       return success;
     }

package/src/signals/system.ts

@@ -59,6 +59,14 @@ export function removePendingEffect(eff: any): void {
   ctx.pendingEffects.delete(eff);
 }
 
+export function getBatchDepth(): number {
+  return ctx.batchDepth;
+}
+
+export function getIsFlushing(): boolean {
+  return ctx.isFlushing;
+}
+
 const MAX_FLUSH_COUNT = 100;
 
 export function flushEffects(): void {

package/src/template/template.ts

@@ -66,11 +66,22 @@ export function html(
 
   for (const bind of bindings) {
     if (bind.isAttr && bind.attrName) {
-      const targetEl = findElementWithAttributeValue(root, bind.attrName, bind.id);
+      const targetEl = findElementWithAttributeValue(root as HTMLElement, bind.attrName, bind.id);
       if (targetEl) {
         targetEl.removeAttribute(bind.attrName);
         setAttribute(targetEl, bind.attrName, bind.value);
       }
+    } else if (bind.isAttr && !bind.attrName) {
+      const propAttr = `data-visage-prop-${bind.id.replace(MARKER_PREFIX, "")}`;
+      const targetEl = findElementWithAttributeValue(root as HTMLElement, propAttr, bind.id);
+      if (targetEl) {
+        targetEl.removeAttribute(propAttr);
+        if (typeof bind.value === "object" && bind.value !== null) {
+          for (const key of Object.keys(bind.value)) {
+            setAttribute(targetEl, key, bind.value[key]);
+          }
+        }
+      }
     } else if (!bind.isAttr) {
       const commentNode = findCommentNode(root, bind.id);
       if (commentNode?.parentNode) {

package/src/ui/bottom-bar/action.tsx

@@ -0,0 +1,60 @@
+import type { Child } from "../../dom/render";
+import type { BottomBarActionProps } from "./types";
+
+export function BottomBarAction(props: BottomBarActionProps): Child {
+  const {
+    as: Tag = "button",
+    icon,
+    label,
+    disabled,
+    onClick,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  const defaultActionStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "44px",
+    height: "44px",
+    minWidth: "44px",
+    minHeight: "44px",
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, #ec4899 0%, #a855f7 100%)",
+    color: "#ffffff",
+    border: "none",
+    boxShadow: "0 4px 14px rgba(236, 72, 153, 0.45)",
+    cursor: "pointer",
+    outline: "none",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    transition: "transform 0.15s ease, box-shadow 0.15s ease",
+    boxSizing: "border-box"
+  };
+
+  const combinedStyle = style ? { ...defaultActionStyle, ...style } : defaultActionStyle;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      role="button"
+      aria-label={label ?? "Primary action"}
+      disabled={disabled}
+      class={`visage-bottom-bar-action ${className ?? ""}`.trim()}
+      style={combinedStyle}
+      onClick={onClick}
+      {...rest}
+    >
+      {children !== undefined
+        ? typeof children === "function"
+          ? children()
+          : children
+        : typeof icon === "function"
+          ? icon()
+          : icon}
+    </Tag>
+  );
+}

package/src/ui/bottom-bar/badge.tsx

@@ -0,0 +1,51 @@
+import type { Child } from "../../dom/render";
+import { computed } from "../../signals";
+import type { BottomBarBadgeProps } from "./types";
+
+export function BottomBarBadge(props: BottomBarBadgeProps): Child {
+  const { as: Tag = "span", count, children, class: className, style, ...rest } = props;
+
+  const displayContent = computed(() => {
+    if (children !== undefined) {
+      return typeof children === "function" ? children() : children;
+    }
+    if (count !== undefined) {
+      return typeof count === "function" ? count() : count;
+    }
+    return "";
+  });
+
+  const defaultBadgeStyle = {
+    position: "absolute",
+    top: "3px",
+    right: "8px",
+    minWidth: "16px",
+    height: "16px",
+    padding: "0 4px",
+    borderRadius: "9999px",
+    backgroundColor: "#ef4444",
+    color: "#ffffff",
+    fontSize: "9px",
+    fontWeight: 700,
+    lineHeight: "16px",
+    textAlign: "center",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 0 0 1.5px rgba(18, 18, 24, 0.9)",
+    pointerEvents: "none",
+    boxSizing: "border-box"
+  };
+
+  const combinedStyle = style ? { ...defaultBadgeStyle, ...style } : defaultBadgeStyle;
+
+  return (
+    <Tag
+      class={`visage-bottom-bar-badge ${className ?? ""}`.trim()}
+      style={combinedStyle}
+      {...rest}
+    >
+      {displayContent}
+    </Tag>
+  );
+}

package/src/ui/bottom-bar/context.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "../../signals/context";
+import type { BottomBarContextValue } from "./types";
+
+export const BottomBarContext = createContext<BottomBarContextValue | null>(null);
+
+export function useBottomBarContext(): BottomBarContextValue | null {
+  return useContext(BottomBarContext);
+}

package/src/ui/bottom-bar/index.ts

@@ -0,0 +1,29 @@
+import { BottomBarAction } from "./action";
+import { BottomBarBadge } from "./badge";
+import { BottomBarItem } from "./item";
+import { BottomBarRoot } from "./root";
+import { BottomBarSeparator } from "./separator";
+
+export { BottomBarAction } from "./action";
+export { BottomBarBadge } from "./badge";
+export { BottomBarContext, useBottomBarContext } from "./context";
+export { BottomBarItem } from "./item";
+export { BottomBarRoot } from "./root";
+export { BottomBarSeparator } from "./separator";
+export type {
+  BottomBarActionProps,
+  BottomBarBadgeProps,
+  BottomBarContextValue,
+  BottomBarItemConfig,
+  BottomBarItemProps,
+  BottomBarProps,
+  BottomBarSeparatorProps
+} from "./types";
+
+export const BottomBar = Object.assign(BottomBarRoot, {
+  Root: BottomBarRoot,
+  Item: BottomBarItem,
+  Action: BottomBarAction,
+  Badge: BottomBarBadge,
+  Separator: BottomBarSeparator
+});

package/src/ui/bottom-bar/item.tsx

@@ -0,0 +1,119 @@
+import type { Child } from "../../dom/render";
+import { computed } from "../../signals";
+import { BottomBarBadge } from "./badge";
+import { useBottomBarContext } from "./context";
+import type { BottomBarItemProps } from "./types";
+
+export function BottomBarItem(props: BottomBarItemProps): Child {
+  const ctx = useBottomBarContext();
+  const isSelected = computed(() => (ctx ? ctx.value() === props.value : false));
+
+  const handleClick = (e: MouseEvent) => {
+    const isDisabled =
+      typeof props.disabled === "function"
+        ? (props.disabled as () => boolean)()
+        : Boolean(props.disabled);
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (ctx) {
+      ctx.setValue(props.value);
+    }
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+
+  const {
+    as: Tag = "button",
+    value,
+    icon,
+    label,
+    badge,
+    disabled,
+    onClick: _oc,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  const defaultItemStyle = {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "52px",
+    minHeight: "44px",
+    padding: "6px 8px",
+    borderRadius: "16px",
+    border: "none",
+    background: () => (isSelected() ? "rgba(255, 255, 255, 0.08)" : "transparent"),
+    color: () => (isSelected() ? "#ec4899" : "rgba(255, 255, 255, 0.65)"),
+    cursor: "pointer",
+    outline: "none",
+    userSelect: "none",
+    WebkitTapHighlightColor: "transparent",
+    transition: "color 0.15s ease, background-color 0.15s ease, transform 0.1s ease",
+    boxSizing: "border-box"
+  };
+
+  const combinedStyle = style ? { ...defaultItemStyle, ...style } : defaultItemStyle;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      role="tab"
+      id={ctx ? `${ctx.baseId}-item-${value}` : undefined}
+      aria-selected={() => isSelected()}
+      data-state={() => (isSelected() ? "active" : "inactive")}
+      data-value={value}
+      disabled={disabled}
+      class={`visage-bottom-bar-item ${className ?? ""}`.trim()}
+      style={combinedStyle}
+      onClick={handleClick}
+      {...rest}
+    >
+      {badge !== undefined ? (
+        typeof badge === "function" || typeof badge === "string" || typeof badge === "number" ? (
+          <BottomBarBadge count={badge as any} />
+        ) : (
+          badge
+        )
+      ) : null}
+
+      {children !== undefined ? (typeof children === "function" ? children() : children) : null}
+
+      {icon ? (
+        <span
+          class="visage-bottom-bar-icon"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "18px"
+          }}
+        >
+          {typeof icon === "function" ? icon() : icon}
+        </span>
+      ) : null}
+      {label ? (
+        <span
+          class="visage-bottom-bar-label"
+          style={{
+            fontSize: "10px",
+            fontWeight: 500,
+            lineHeight: 1.2,
+            marginTop: "3px",
+            letterSpacing: "0.01em"
+          }}
+        >
+          {typeof label === "function" ? label() : label}
+        </span>
+      ) : null}
+    </Tag>
+  );
+}