@epoch32/visage 1.1.5 → 1.3.0

package/dist/vite/index.js

@@ -15,6 +15,8 @@ function parseNamedImports(importClause) {
     };
   });
 }
+var VIRTUAL_PREFIX = "virtual:visage-icons";
+var RESOLVED_PREFIX = `\x00${VIRTUAL_PREFIX}`;
 function visageLucide(options = {}) {
   const aliases = options.aliases ?? ["lucide-react"];
   return {
@@ -23,17 +25,33 @@ function visageLucide(options = {}) {
     config() {
       return {
         optimizeDeps: {
-          exclude: aliases
+          exclude: [...aliases, VIRTUAL_PREFIX]
         }
       };
     },
     resolveId(id) {
+      if (id.startsWith(VIRTUAL_PREFIX)) {
+        return `\x00${id}`;
+      }
       if (aliases.includes(id)) {
         return `\x00visage-lucide:${id}`;
       }
       return null;
     },
     load(id) {
+      if (id.startsWith(RESOLVED_PREFIX)) {
+        const query = id.slice(RESOLVED_PREFIX.length);
+        const params = new URLSearchParams(query.startsWith("?") ? query.slice(1) : "");
+        const names = (params.get("icons") || "").split(",").map((s) => s.trim()).filter(Boolean);
+        const imports = names.map((n) => `${n} as __icon_node_${n}`).join(", ");
+        const exports = names.map((n) => `export const ${n} = /* @__PURE__ */ createIcon("${n}", __icon_node_${n});`).join(`
+`);
+        return `import { createIcon } from "visage/ui";
+import { ${imports} } from "lucide";
+
+${exports}
+`;
+      }
       if (id.startsWith("\x00visage-lucide:")) {
         return `
 import * as lucideIcons from "lucide";
@@ -51,10 +69,6 @@ export const __getIcon = (name) => {
 export default new Proxy({}, {
   get: (_, prop) => typeof prop === "string" ? __getIcon(prop) : undefined
 });
-
-// Dynamic proxy export for all lucide icon names
-${Object.keys({})};
-export * from "lucide";
 `;
       }
       return null;
@@ -66,20 +80,25 @@ export * from "lucide";
       let transformed = code;
       let hasMatches = false;
       for (const alias of aliases) {
-        const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
-        transformed = transformed.replace(regex, (_match, importClause) => {
+        const importRegex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+        transformed = transformed.replace(importRegex, (_match, importClause) => {
           const imports = parseNamedImports(importClause);
           if (imports.length === 0)
             return "";
           hasMatches = true;
-          const lucideNamedImports = imports.map((imp) => `${imp.importedName} as __icon_node_${imp.importedName}`).join(", ");
-          const componentDeclarations = imports.map((imp) => {
-            return `const ${imp.localName} = /* @__PURE__ */ __visageCreateIcon("${imp.importedName}", __icon_node_${imp.importedName});`;
-          }).join(`
-`);
-          return `import { createIcon as __visageCreateIcon } from "visage/ui";
-import { ${lucideNamedImports} } from "lucide";
-${componentDeclarations}`;
+          const queryIcons = Array.from(new Set(imports.map((i) => i.importedName))).join(",");
+          const specifiers = imports.map((i) => i.importedName === i.localName ? i.importedName : `${i.importedName} as ${i.localName}`).join(", ");
+          return `import { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
+        });
+        const exportRegex = new RegExp(`export\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+        transformed = transformed.replace(exportRegex, (_match, exportClause) => {
+          const exports = parseNamedImports(exportClause);
+          if (exports.length === 0)
+            return "";
+          hasMatches = true;
+          const queryIcons = Array.from(new Set(exports.map((i) => i.importedName))).join(",");
+          const specifiers = exports.map((i) => i.importedName === i.localName ? i.importedName : `${i.importedName} as ${i.localName}`).join(", ");
+          return `export { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
         });
       }
       if (!hasMatches) {

package/dist/vite/lucide.d.ts

@@ -6,22 +6,5 @@ export interface VisageLucideOptions {
      */
     aliases?: string[];
 }
-/**
- * Official Visage Lucide Vite Plugin
- *
- * Statically transforms `import { Icon } from "lucide-react"` at build time into
- * native, tree-shaken Visage SVG component instances using `createIcon` and `lucide`.
- *
- * Example:
- * ```ts
- * // vite.config.ts
- * import { defineConfig } from "vite";
- * import visage, { visageLucide } from "visage/vite";
- *
- * export default defineConfig({
- *   plugins: [visage(), visageLucide()]
- * });
- * ```
- */
 export declare function visageLucide(options?: VisageLucideOptions): VisageVitePlugin;
 export default visageLucide;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.1.5",
+  "version": "1.3.0",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
   "main": "./dist/index.js",

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/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>
+  );
+}

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;
+}