@epoch32/visage 1.2.0 → 1.3.1

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

@@ -0,0 +1,148 @@
+import type { Child } from "../../dom/render";
+import { signal } from "../../signals";
+import { createControllableSignal, createId } from "../utils";
+import { BottomBarContext } from "./context";
+import { BottomBarItem } from "./item";
+import type { BottomBarContextValue, BottomBarProps } from "./types";
+
+export function BottomBarRoot(props: BottomBarProps): Child {
+  const [value, setValue] = createControllableSignal<string>({
+    value: props.value,
+    defaultValue:
+      props.defaultValue ?? (props.items && props.items.length > 0 ? props.items[0]?.value : ""),
+    onChange: props.onValueChange
+  });
+
+  const baseId = createId("bottom-bar");
+  const variant = props.variant ?? "floating";
+  const hideOnScroll = props.hideOnScroll ?? false;
+  const threshold = props.scrollThreshold ?? 20;
+
+  const isVisible = signal(true);
+
+  if (hideOnScroll && typeof window !== "undefined") {
+    let lastScrollY = window.scrollY || 0;
+    const onScroll = () => {
+      const currentScrollY = window.scrollY || 0;
+      const diff = currentScrollY - lastScrollY;
+      if (Math.abs(diff) < 5) return;
+
+      if (currentScrollY > threshold && diff > 0) {
+        if (isVisible()) isVisible.set(false);
+      } else if (diff < 0) {
+        if (!isVisible()) isVisible.set(true);
+      }
+      lastScrollY = Math.max(0, currentScrollY);
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+  }
+
+  const ctx: BottomBarContextValue = {
+    value,
+    setValue,
+    baseId,
+    variant
+  };
+
+  const {
+    as: Tag = "nav",
+    value: _v,
+    defaultValue: _dv,
+    onValueChange: _ovc,
+    variant: _var,
+    hideOnScroll: _hos,
+    scrollThreshold: _st,
+    items,
+    itemClass,
+    itemStyle,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  const defaultFloatingStyle = {
+    position: "fixed",
+    bottom: "max(16px, env(safe-area-inset-bottom, 16px))",
+    left: "50%",
+    zIndex: 50,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 10px",
+    borderRadius: "9999px",
+    backgroundColor: "rgba(18, 18, 24, 0.88)",
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05)",
+    transform: () =>
+      isVisible() ? "translateX(-50%) translateY(0)" : "translateX(-50%) translateY(160%)",
+    opacity: () => (isVisible() ? 1 : 0),
+    pointerEvents: () => (isVisible() ? "auto" : "none"),
+    transition: "transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease",
+    maxWidth: "calc(100vw - 32px)",
+    boxSizing: "border-box"
+  };
+
+  const defaultDockedStyle = {
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    display: "flex",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingTop: "8px",
+    paddingBottom: "max(10px, env(safe-area-inset-bottom, 10px))",
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    backgroundColor: "rgba(18, 18, 24, 0.94)",
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+    boxShadow: "0 -4px 20px rgba(0, 0, 0, 0.35)",
+    transform: () => (isVisible() ? "translateY(0)" : "translateY(110%)"),
+    opacity: () => (isVisible() ? 1 : 0),
+    pointerEvents: () => (isVisible() ? "auto" : "none"),
+    transition: "transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease",
+    boxSizing: "border-box"
+  };
+
+  const computedDefaultStyle = variant === "floating" ? defaultFloatingStyle : defaultDockedStyle;
+  const combinedStyle = style ? { ...computedDefaultStyle, ...style } : computedDefaultStyle;
+
+  return BottomBarContext.Provider({
+    value: ctx,
+    children: () => (
+      <Tag
+        role="toolbar"
+        aria-label="Mobile toolbar"
+        data-variant={variant}
+        data-state={() => (isVisible() ? "visible" : "hidden")}
+        class={`visage-bottom-bar visage-bottom-bar-${variant} ${className ?? ""}`.trim()}
+        style={combinedStyle}
+        {...rest}
+      >
+        {items
+          ? items.map((item) => (
+              <BottomBarItem
+                value={item.value}
+                icon={item.icon}
+                label={item.label}
+                badge={item.badge}
+                disabled={item.disabled}
+                onClick={item.onClick}
+                class={item.class ?? itemClass}
+                style={item.style ?? itemStyle}
+              />
+            ))
+          : typeof children === "function"
+            ? children()
+            : children}
+      </Tag>
+    )
+  });
+}

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

@@ -0,0 +1,26 @@
+import type { Child } from "../../dom/render";
+import type { BottomBarSeparatorProps } from "./types";
+
+export function BottomBarSeparator(props: BottomBarSeparatorProps): Child {
+  const { as: Tag = "div", class: className, style, ...rest } = props;
+
+  const defaultSeparatorStyle = {
+    width: "1px",
+    height: "22px",
+    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    margin: "0 2px",
+    flexShrink: 0
+  };
+
+  const combinedStyle = style ? { ...defaultSeparatorStyle, ...style } : defaultSeparatorStyle;
+
+  return (
+    <Tag
+      role="separator"
+      aria-orientation="vertical"
+      class={`visage-bottom-bar-separator ${className ?? ""}`.trim()}
+      style={combinedStyle}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,79 @@
+import type { Child } from "../../dom/render";
+import type { ReadonlySignal } from "../../signals";
+
+export interface BottomBarContextValue {
+  value: ReadonlySignal<string>;
+  setValue: (value: string) => void;
+  baseId: string;
+  variant: "floating" | "docked";
+}
+
+export interface BottomBarItemConfig {
+  value: string;
+  label?: Child | (() => Child);
+  icon?: Child | (() => Child);
+  badge?: Child | number | string | (() => Child | number | string | undefined);
+  disabled?: boolean | (() => boolean);
+  onClick?: (e: MouseEvent) => void;
+  class?: any;
+  style?: any;
+}
+
+export interface BottomBarProps {
+  value?: () => string | undefined;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  variant?: "floating" | "docked";
+  hideOnScroll?: boolean;
+  scrollThreshold?: number;
+  items?: BottomBarItemConfig[];
+  itemClass?: any;
+  itemStyle?: any;
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export interface BottomBarItemProps {
+  value: string;
+  icon?: Child | (() => Child);
+  label?: Child | (() => Child);
+  badge?: Child | number | string | (() => Child | number | string | undefined);
+  disabled?: boolean | (() => boolean);
+  onClick?: (e: MouseEvent) => void;
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export interface BottomBarActionProps {
+  icon?: Child | (() => Child);
+  label?: string;
+  disabled?: boolean | (() => boolean);
+  onClick?: (e: MouseEvent) => void;
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export interface BottomBarBadgeProps {
+  count?: Child | number | string | (() => Child | number | string | undefined);
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export interface BottomBarSeparatorProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  [key: string]: any;
+}

package/src/ui/index.ts

@@ -10,6 +10,22 @@ export {
   useAccordionContext,
   useAccordionItemContext
 } from "./accordion";
+export {
+  BottomBar,
+  BottomBarAction,
+  type BottomBarActionProps,
+  BottomBarBadge,
+  type BottomBarBadgeProps,
+  type BottomBarContextValue,
+  BottomBarItem,
+  type BottomBarItemConfig,
+  type BottomBarItemProps,
+  type BottomBarProps,
+  BottomBarRoot,
+  BottomBarSeparator,
+  type BottomBarSeparatorProps,
+  useBottomBarContext
+} from "./bottom-bar";
 export {
   Command,
   CommandDialog,

package/src/virtual/virtualizer.ts

@@ -56,30 +56,41 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
     return getItemHeight(index);
   };
 
-  // Compute prefix offsets for fast range calculation
-  const totalSize = computed(() => {
-    const count = getCount();
-    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
-      return count * options.itemHeight;
-    }
-    let total = 0;
-    for (let i = 0; i < count; i++) {
-      total += getItemSize(i);
-    }
-    return total;
-  });
+  // Cached prefix offsets for O(1) offset lookups and true O(log N) binary search
+  const offsetsCache: number[] = [0];
+  let offsetsValidUpTo = 0;
+
+  const invalidateOffsetsFrom = (index: number) => {
+    offsetsValidUpTo = Math.min(offsetsValidUpTo, index);
+  };
 
   const getOffsetForIndex = (targetIndex: number): number => {
+    if (targetIndex <= 0) return 0;
     if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
       return targetIndex * options.itemHeight;
     }
-    let offset = 0;
-    for (let i = 0; i < targetIndex; i++) {
-      offset += getItemSize(i);
+    if (targetIndex <= offsetsValidUpTo) {
+      return offsetsCache[targetIndex]!;
     }
-    return offset;
+    for (let i = offsetsValidUpTo; i < targetIndex; i++) {
+      offsetsCache[i + 1] = (offsetsCache[i] ?? 0) + getItemSize(i);
+    }
+    offsetsValidUpTo = targetIndex;
+    return offsetsCache[targetIndex]!;
   };
 
+  const measurementVersion = signal(0, { internal: true });
+
+  // Compute prefix offsets for fast range calculation
+  const totalSize = computed(() => {
+    measurementVersion();
+    const count = getCount();
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return count * options.itemHeight;
+    }
+    return getOffsetForIndex(count);
+  });
+
   const findIndexAtOffset = (offset: number): number => {
     const count = getCount();
     if (count === 0) return 0;
@@ -110,12 +121,14 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
   };
 
   const startIndex = computed(() => {
+    measurementVersion();
     const offset = scrollOffset();
     const rawStart = findIndexAtOffset(offset);
     return Math.max(0, rawStart - overscan);
   });
 
   const endIndex = computed(() => {
+    measurementVersion();
     const count = getCount();
     if (count === 0) return 0;
     const endOffset = scrollOffset() + (containerSize() || 500);
@@ -255,8 +268,8 @@ export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
       : element.getBoundingClientRect().height;
     if (measuredSize > 0 && dynamicSizeCache.get(index) !== measuredSize) {
       dynamicSizeCache.set(index, measuredSize);
-      // Force recalculation by touching scrollOffset
-      scrollOffset.update((o) => o);
+      invalidateOffsetsFrom(index);
+      measurementVersion.update((v) => v + 1);
     }
   };