@aomi-labs/widget-lib 1.0.0 → 1.1.1

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { cn } from "@aomi-labs/react";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Toaster as Sonner } from "sonner";
+
+import { cn } from "@aomi-labs/react";
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+export function Toaster({ className, toastOptions, ...props }: ToasterProps) {
+  return (
+    <Sonner
+      className={cn("toaster group", className)}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+        ...toastOptions,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@aomi-labs/react";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "origin-(--radix-tooltip-content-transform-origin) animate-in bg-primary text-primary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Main entry point for @aomi-labs/widget-lib
+// Re-export the main AomiFrame component
+export { AomiFrame } from "./components/aomi-frame";
+
+// Notification UI
+export { NotificationToaster } from "./components/ui/notification";
+
+// UI Components
+export { Button } from "./components/ui/button";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+export {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "./components/ui/sidebar";
+
+// Re-export types and utilities from @aomi-labs/react
+export type { UserConfig } from "@aomi-labs/react";
+export { formatAddress, getNetworkName } from "@aomi-labs/react";

package/src/registry.ts

@@ -0,0 +1,218 @@
+export type RegistryComponent = {
+  name: string;
+  file: string;
+  dependencies?: string[];
+  registryDependencies?: string[];
+  description?: string;
+};
+
+const REGISTRY_BASE_URL = "https://widget.aomi.dev/r";
+
+// Helper to create registry dependency URLs
+const aomi = (name: string) => `${REGISTRY_BASE_URL}/${name}.json`;
+const assistantUI = (name: string) => `https://r.assistant-ui.com/${name}.json`;
+
+export const registry: RegistryComponent[] = [
+  // === AOMI CUSTOM COMPONENTS ===
+  {
+    name: "aomi-frame",
+    file: "components/aomi-frame.tsx",
+    dependencies: ["@aomi-labs/react"],
+    registryDependencies: [
+      // Internal aomi components (customized)
+      aomi("assistant-thread"),
+      aomi("assistant-threadlist-sidebar"),
+      aomi("notification"),
+      // shadcn primitives
+      "separator",
+      "breadcrumb",
+      "sidebar",
+    ],
+    description: "Full assistant shell with thread list and runtime wiring.",
+  },
+  {
+    name: "assistant-thread",
+    file: "components/assistant-ui/thread.tsx",
+    dependencies: [
+      "@aomi-labs/react",
+      "@assistant-ui/react",
+      "@assistant-ui/react-markdown",
+      "lucide-react",
+      "remark-gfm",
+    ],
+    registryDependencies: [
+      // From assistant-ui (unchanged)
+      assistantUI("markdown-text"),
+      assistantUI("tooltip-icon-button"),
+      assistantUI("attachment"),
+      // Internal aomi components (customized)
+      aomi("assistant-tool-fallback"),
+      // shadcn primitives
+      "button",
+    ],
+    description: "Chat surface built on @assistant-ui primitives.",
+  },
+  {
+    name: "assistant-thread-list",
+    file: "components/assistant-ui/thread-list.tsx",
+    dependencies: ["@assistant-ui/react", "lucide-react"],
+    registryDependencies: [
+      assistantUI("tooltip-icon-button"),
+      "button",
+      "skeleton",
+    ],
+    description: "Thread list wrapper wired to runtime adapter.",
+  },
+  {
+    name: "assistant-threadlist-sidebar",
+    file: "components/assistant-ui/threadlist-sidebar.tsx",
+    dependencies: ["lucide-react"],
+    registryDependencies: [aomi("assistant-thread-list"), "sidebar"],
+    description: "Sidebar shell for thread navigation and wallet footer slot.",
+  },
+
+  {
+    name: "assistant-tool-fallback",
+    file: "components/assistant-ui/tool-fallback.tsx",
+    dependencies: ["@assistant-ui/react", "lucide-react"],
+    registryDependencies: ["button"],
+    description: "Fallback renderer for assistant tool calls.",
+  },
+  {
+    name: "notification",
+    file: "components/ui/notification.tsx",
+    dependencies: ["@aomi-labs/react", "sonner"],
+    registryDependencies: [aomi("sonner")],
+    description:
+      "Notification toaster wired to the runtime notification store.",
+  },
+  {
+    name: "sonner",
+    file: "components/ui/sonner.tsx",
+    dependencies: ["sonner"],
+    description: "Shadcn wrapper for Sonner toasts.",
+  },
+  // === SHADCN UI PRIMITIVES ===
+  {
+    name: "button",
+    file: "components/ui/button.tsx",
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    description: "Displays a button or a component that looks like a button.",
+  },
+  {
+    name: "input",
+    file: "components/ui/input.tsx",
+    dependencies: [],
+    description:
+      "Displays a form input field or a component that looks like an input field.",
+  },
+  {
+    name: "label",
+    file: "components/ui/label.tsx",
+    dependencies: [],
+    description: "Renders an accessible label associated with controls.",
+  },
+  {
+    name: "card",
+    file: "components/ui/card.tsx",
+    dependencies: [],
+    description: "Displays a card with header, content, and footer.",
+  },
+  {
+    name: "badge",
+    file: "components/ui/badge.tsx",
+    dependencies: ["class-variance-authority"],
+    description: "Displays a badge or a component that looks like a badge.",
+  },
+  {
+    name: "avatar",
+    file: "components/ui/avatar.tsx",
+    dependencies: ["@radix-ui/react-avatar"],
+    description: "An image element with a fallback for representing the user.",
+  },
+  {
+    name: "skeleton",
+    file: "components/ui/skeleton.tsx",
+    dependencies: [],
+    description: "Use to show a placeholder while content is loading.",
+  },
+  {
+    name: "tooltip",
+    file: "components/ui/tooltip.tsx",
+    dependencies: ["@radix-ui/react-tooltip"],
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+  {
+    name: "separator",
+    file: "components/ui/separator.tsx",
+    dependencies: ["@radix-ui/react-separator"],
+    description: "Visually or semantically separates content.",
+  },
+  {
+    name: "breadcrumb",
+    file: "components/ui/breadcrumb.tsx",
+    dependencies: ["@radix-ui/react-slot"],
+    description:
+      "Displays the path to the current resource using a hierarchy of links.",
+  },
+  {
+    name: "sidebar",
+    file: "components/ui/sidebar.tsx",
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    description: "Displays a sidebar navigation component.",
+  },
+  {
+    name: "dialog",
+    file: "components/ui/dialog.tsx",
+    dependencies: ["@radix-ui/react-dialog", "lucide-react"],
+    description:
+      "A window overlaid on either the primary window or another dialog window.",
+  },
+  {
+    name: "sheet",
+    file: "components/ui/sheet.tsx",
+    dependencies: ["@radix-ui/react-dialog", "lucide-react"],
+    description:
+      "Extends the Dialog component to display content that complements the main content of the screen.",
+  },
+  {
+    name: "collapsible",
+    file: "components/ui/collapsible.tsx",
+    dependencies: ["@radix-ui/react-collapsible"],
+    description: "An interactive component which expands/collapses a panel.",
+  },
+  {
+    name: "command",
+    file: "components/ui/command.tsx",
+    dependencies: ["@radix-ui/react-dialog", "cmdk", "lucide-react"],
+    registryDependencies: ["dialog"],
+    description: "Fast, composable, unstyled command menu for React.",
+  },
+  {
+    name: "popover",
+    file: "components/ui/popover.tsx",
+    dependencies: ["@radix-ui/react-popover"],
+    description: "Displays rich content in a portal, triggered by a button.",
+  },
+  {
+    name: "alert",
+    file: "components/ui/alert.tsx",
+    dependencies: ["class-variance-authority"],
+    description: "Displays a callout for user attention.",
+  },
+  {
+    name: "accordion",
+    file: "components/ui/accordion.tsx",
+    dependencies: ["@radix-ui/react-accordion", "lucide-react"],
+    description:
+      "A vertically stacked set of interactive headings that each reveal a section of content.",
+  },
+  {
+    name: "drawer",
+    file: "components/ui/drawer.tsx",
+    dependencies: ["vaul"],
+    description:
+      "A drawer component for mobile navigation menus and similar interfaces.",
+  },
+];

package/{dist/styles.css → src/themes/default.css}

@@ -1,5 +1,6 @@
-/* @aomi-labs/widget-lib - Theme Styles */
-/* Consumers should import this file: @import "@aomi-labs/widget-lib/styles.css" */
+/* @aomi-labs/widget-lib - Default Theme (shadcn compatible) */
+/* Import via: @import "@aomi-labs/widget-lib/styles.css" (alias) */
+/* Or directly: @import "@aomi-labs/widget-lib/themes/default.css" */
 
 /* ============================================
    Theme Configuration (Tailwind v4 compatible)
@@ -45,6 +46,17 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  @keyframes shimmer-sweep {
+    from {
+      background-position: 150% 0;
+    }
+    to {
+      background-position: -100% 0;
+    }
+  }
+  --animate-shimmer: shimmer-sweep var(--shimmer-duration, 1000ms) linear
+    infinite both;
 }
 
 /* ============================================
@@ -52,6 +64,12 @@
    ============================================ */
 
 :root {
+  --font-geist-sans:
+    "Geist", "Inter", "SF Pro Display", "Segoe UI", system-ui, -apple-system,
+    BlinkMacSystemFont, sans-serif;
+  --font-geist-mono:
+    "Geist Mono", "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo,
+    Monaco, Consolas, "Liberation Mono", monospace;
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
@@ -107,7 +125,7 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
+  --input: oklch(0.6 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);

package/src/themes/tokens.config.ts

@@ -0,0 +1,39 @@
+export type ThemeMetadata = {
+  /** File name without extension, e.g. `default` */
+  id: string;
+  /** Human friendly name to show in docs or CLIs. */
+  label: string;
+  /** Short marketing blurb for selection menus. */
+  description: string;
+  /** Relative CSS path emitted to `dist/`. */
+  cssPath: string;
+  /** Preview colors so docs can render swatches. */
+  preview: {
+    background: string;
+    foreground: string;
+  };
+  /** Whether this theme should be copied to `dist/styles.css`. */
+  isDefault?: boolean;
+};
+
+export const themes: ThemeMetadata[] = [
+  {
+    id: "default",
+    label: "Default",
+    description:
+      "Neutral finance-friendly palette with soft gradients and AppKit-friendly overrides.",
+    cssPath: "./themes/default.css",
+    preview: {
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.21 0.006 285.885)",
+    },
+    isDefault: true,
+  },
+];
+
+export const DEFAULT_THEME =
+  themes.find((theme) => theme.isDefault) ?? themes[0];
+
+export function getTheme(id: string): ThemeMetadata | undefined {
+  return themes.find((theme) => theme.id === id);
+}

package/README.md

@@ -1,41 +0,0 @@
-AI assistant + onchain widget library and demo landing page for `@aomi-labs/widget-lib`.
-
-## Library usage
-
-```bash
-pnpm install @aomi-labs/widget-lib
-```
-
-Drop the frame into your app:
-
-```tsx
-import { AomiFrame } from "@aomi-labs/widget-lib";
-
-export function Assistant() {
-  return (
-    <AomiFrame height="640px" width="100%">
-      {/* optional slots like WalletSystemMessenger */}
-    </AomiFrame>
-  );
-}
-```
-
-## Develop this repo
-
-```bash
-pnpm install
-pnpm run build:lib        # build the published bundle
-pnpm --filter example dev # run the landing/demo (http://localhost:3000)
-pnpm run dev:example:live # watch the library and run the example together
-pnpm lint                 # lint library + example source
-```
-
-The example app lives in `example/` and imports the built library. Re-run `pnpm run build:lib` after changing code in `src/`.
-
-## Env
-
-Create `.env` with your Web3 Project ID from https://docs.reown.com/ and URL endpoint of your backend:
-```
-NEXT_PUBLIC_PROJECT_ID=000000000000000000000000
-NEXT_PUBLIC_BACKEND_URL=http://example.app.com
-```