@vura-ai/assets 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,54 @@
+# @vura-ai/assets
+
+A sophisticated "Liquid Glass" design system for the Vura ecosystem. Built with React 19, Tailwind CSS v4, and Lucide React.
+
+## Installation
+
+```bash
+npm install @vura-ai/assets
+```
+
+## Features
+
+- **Liquid Glass Aesthetic**: Sophisticated backdrop blurs and translucent borders.
+- **Monochrome Design**: A clean, elegant interface focused on high-contrast black and white themes.
+- **Atomic Components**: A wide range of primitives from Buttons and Cards to specialized visualization nodes.
+- **Type-Safe**: Fully written in TypeScript with comprehensive type exports.
+
+## Usage
+
+```tsx
+import { Button, Card, ThemeProvider } from "@vura-ai/assets";
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Card variant="glass">
+        <h1>Vura Assets</h1>
+        <Button onClick={() => console.log("Clicked!")}>Primary Action</Button>
+      </Card>
+    </ThemeProvider>
+  );
+}
+```
+
+## Component Library
+
+This package includes:
+
+- **Layout**: `PageWrapper`, `PageLayout`, `StageWrapper`, `LiquidScrollContainer`
+- **Navigation**: `Sidebar`, `TopNav`, `NavItem`
+- **Primitives**: `Button`, `Card`, `Input`, `TextArea`, `Dropdown`, `Popover`, `Search`
+- **Visuals**: `ConnectedNodes` (`NodeCanvas`, `Node`), `MountainGraphic`, `Logo`, `Brand`
+- **Feedback**: `ToastProvider`, `useToast`, `ThinkingIndicator`
+- **Environment**: `BackgroundGlow`, `AmbientBacklight`, `ThemeProvider`, `useTheme`
+
+## Design Principles
+
+- **Composition over Inheritance**: Containers like `Sidebar` use slots (`header`, `footer`) for maximum flexibility.
+- **Interactive Layers**: Use of `framer-motion` for smooth glass transitions.
+- **Contrast**: High-legibility typography using system font stacks.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   LiquidScrollContainer: () => LiquidScrollContainer,
   Logo: () => Logo,
   MountainGraphic: () => MountainGraphic,
+  NavItem: () => NavItem,
   Node: () => Node,
   NodeCanvas: () => NodeCanvas,
   PageLayout: () => PageLayout,
@@ -1199,7 +1200,14 @@ var useTheme = () => {
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Sidebar({ expanded, className = "", onToggle }) {
+function Sidebar({
+  expanded,
+  className = "",
+  onToggle,
+  children,
+  footer,
+  header
+}) {
   const { id } = (0, import_react_router.useParams)();
   const { theme, toggleTheme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -1228,6 +1236,8 @@ function Sidebar({ expanded, className = "", onToggle }) {
               children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Brand, { className: "text-foreground", size: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Logo, { className: "text-foreground", size: 40 }) })
             }
           ),
+          header,
+          "// ...existing code...",
           onToggle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
@@ -1251,65 +1261,8 @@ function Sidebar({ expanded, className = "", onToggle }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "flex-1 space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          NavItem,
-          {
-            to: `/projects/${id}/stories`,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.ScrollText, { size: 20 }),
-            label: "Stories",
-            expanded
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pt-4 border-t border-glass-border space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              NavItem,
-              {
-                to: `/projects/${id}/settings`,
-                icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.Settings, { size: 20 }),
-                label: "Settings",
-                expanded
-              }
-            ) }),
-            expanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "button",
-              {
-                onClick: toggleTheme,
-                className: "flex items-center justify-center h-12 w-12 rounded-2xl transition-all duration-300 cursor-pointer text-foreground/60 hover:text-foreground hover:bg-foreground/10 shrink-0",
-                "aria-label": "Toggle theme",
-                children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.Moon, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.Sun, { size: 20 })
-              }
-            )
-          ] }),
-          !expanded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "button",
-            {
-              onClick: toggleTheme,
-              className: "flex items-center justify-center h-12 w-full rounded-2xl text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all duration-300 cursor-pointer",
-              "aria-label": "Toggle theme",
-              children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.Moon, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.Sun, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-            "div",
-            {
-              className: `flex items-center ${expanded ? "justify-start px-3 py-3" : "justify-center py-3"} mt-2 rounded-2xl bg-white/[0.01] dark:bg-black/[0.01] border border-glass-border`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-9 h-9 rounded-full bg-linear-to-tr from-indigo-500 to-purple-500 shrink-0 border border-foreground/20 shadow-lg" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-                  "div",
-                  {
-                    className: `overflow-hidden transition-all duration-300 ${expanded ? "ml-4 opacity-100 max-w-30" : "ml-0 opacity-0 max-w-0"}`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-bold text-foreground truncate", children: "Tyler Elton" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-[11px] text-foreground/60 font-medium tracking-wide uppercase truncate", children: "Admin" })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ] })
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pt-4 border-t border-glass-border space-y-1", children: footer })
       ]
     }
   );
@@ -1700,6 +1653,7 @@ function TopNav({
   LiquidScrollContainer,
   Logo,
   MountainGraphic,
+  NavItem,
   Node,
   NodeCanvas,
   PageLayout,

package/dist/index.d.cts

@@ -129,8 +129,17 @@ interface SidebarProps {
     expanded: boolean;
     className?: string;
     onToggle?: () => void;
-}
-declare function Sidebar({ expanded, className, onToggle }: SidebarProps): react_jsx_runtime.JSX.Element;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+}
+declare function Sidebar({ expanded, className, onToggle, children, footer, header, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function NavItem({ to, icon, label, expanded, }: {
+    to: string;
+    icon: React.ReactNode;
+    label: string;
+    expanded: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 interface StageWrapperProps {
     children: React__default.ReactNode;
@@ -191,4 +200,4 @@ interface TopNavProps {
 }
 declare function TopNav({ className, alignLeft, leftAction, user, onLogout, }: TopNavProps): react_jsx_runtime.JSX.Element;
 
-export { AmbientBacklight, BackgroundGlow, Brand, Button, type ButtonOption, Card, Dropdown, type DropdownItem, Input, LiquidScrollContainer, Logo, MountainGraphic, Node, NodeCanvas, PageLayout, PageWrapper, Popover, Search, Sidebar, StageWrapper, TextArea, type Theme, ThemeProvider, ThemeProviderContext, type ThemeProviderState, ThinkingIndicator, ToastContext, type ToastContextType, ToastProvider, type ToastType, TopNav, initialState, useTheme, useToast };
+export { AmbientBacklight, BackgroundGlow, Brand, Button, type ButtonOption, type ButtonProps, Card, Dropdown, type DropdownItem, Input, LiquidScrollContainer, Logo, MountainGraphic, NavItem, Node, NodeCanvas, PageLayout, PageWrapper, Popover, Search, Sidebar, StageWrapper, TextArea, type Theme, ThemeProvider, ThemeProviderContext, type ThemeProviderState, ThinkingIndicator, ToastContext, type ToastContextType, ToastProvider, type ToastType, TopNav, initialState, useTheme, useToast };

package/dist/index.d.ts

@@ -129,8 +129,17 @@ interface SidebarProps {
     expanded: boolean;
     className?: string;
     onToggle?: () => void;
-}
-declare function Sidebar({ expanded, className, onToggle }: SidebarProps): react_jsx_runtime.JSX.Element;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+}
+declare function Sidebar({ expanded, className, onToggle, children, footer, header, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function NavItem({ to, icon, label, expanded, }: {
+    to: string;
+    icon: React.ReactNode;
+    label: string;
+    expanded: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 interface StageWrapperProps {
     children: React__default.ReactNode;
@@ -191,4 +200,4 @@ interface TopNavProps {
 }
 declare function TopNav({ className, alignLeft, leftAction, user, onLogout, }: TopNavProps): react_jsx_runtime.JSX.Element;
 
-export { AmbientBacklight, BackgroundGlow, Brand, Button, type ButtonOption, Card, Dropdown, type DropdownItem, Input, LiquidScrollContainer, Logo, MountainGraphic, Node, NodeCanvas, PageLayout, PageWrapper, Popover, Search, Sidebar, StageWrapper, TextArea, type Theme, ThemeProvider, ThemeProviderContext, type ThemeProviderState, ThinkingIndicator, ToastContext, type ToastContextType, ToastProvider, type ToastType, TopNav, initialState, useTheme, useToast };
+export { AmbientBacklight, BackgroundGlow, Brand, Button, type ButtonOption, type ButtonProps, Card, Dropdown, type DropdownItem, Input, LiquidScrollContainer, Logo, MountainGraphic, NavItem, Node, NodeCanvas, PageLayout, PageWrapper, Popover, Search, Sidebar, StageWrapper, TextArea, type Theme, ThemeProvider, ThemeProviderContext, type ThemeProviderState, ThinkingIndicator, ToastContext, type ToastContextType, ToastProvider, type ToastType, TopNav, initialState, useTheme, useToast };

package/dist/index.js

@@ -1130,7 +1130,7 @@ function Search({
 
 // src/components/Sidebar.tsx
 import { Link, NavLink, useParams } from "react-router";
-import { ScrollText, Settings, ChevronRight, Moon, Sun } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 
 // src/components/ThemeContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -1149,7 +1149,14 @@ var useTheme = () => {
 
 // src/components/Sidebar.tsx
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-function Sidebar({ expanded, className = "", onToggle }) {
+function Sidebar({
+  expanded,
+  className = "",
+  onToggle,
+  children,
+  footer,
+  header
+}) {
   const { id } = useParams();
   const { theme, toggleTheme } = useTheme();
   return /* @__PURE__ */ jsxs13(
@@ -1178,6 +1185,8 @@ function Sidebar({ expanded, className = "", onToggle }) {
               children: expanded ? /* @__PURE__ */ jsx16(Brand, { className: "text-foreground", size: 40 }) : /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsx16(Logo, { className: "text-foreground", size: 40 }) })
             }
           ),
+          header,
+          "// ...existing code...",
           onToggle && /* @__PURE__ */ jsx16(
             "button",
             {
@@ -1201,65 +1210,8 @@ function Sidebar({ expanded, className = "", onToggle }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx16("nav", { className: "flex-1 space-y-1", children: /* @__PURE__ */ jsx16(
-          NavItem,
-          {
-            to: `/projects/${id}/stories`,
-            icon: /* @__PURE__ */ jsx16(ScrollText, { size: 20 }),
-            label: "Stories",
-            expanded
-          }
-        ) }),
-        /* @__PURE__ */ jsxs13("div", { className: "pt-4 border-t border-glass-border space-y-1", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx16("div", { className: "flex-1", children: /* @__PURE__ */ jsx16(
-              NavItem,
-              {
-                to: `/projects/${id}/settings`,
-                icon: /* @__PURE__ */ jsx16(Settings, { size: 20 }),
-                label: "Settings",
-                expanded
-              }
-            ) }),
-            expanded && /* @__PURE__ */ jsx16(
-              "button",
-              {
-                onClick: toggleTheme,
-                className: "flex items-center justify-center h-12 w-12 rounded-2xl transition-all duration-300 cursor-pointer text-foreground/60 hover:text-foreground hover:bg-foreground/10 shrink-0",
-                "aria-label": "Toggle theme",
-                children: theme === "light" ? /* @__PURE__ */ jsx16(Moon, { size: 20 }) : /* @__PURE__ */ jsx16(Sun, { size: 20 })
-              }
-            )
-          ] }),
-          !expanded && /* @__PURE__ */ jsx16(
-            "button",
-            {
-              onClick: toggleTheme,
-              className: "flex items-center justify-center h-12 w-full rounded-2xl text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all duration-300 cursor-pointer",
-              "aria-label": "Toggle theme",
-              children: theme === "light" ? /* @__PURE__ */ jsx16(Moon, { size: 20 }) : /* @__PURE__ */ jsx16(Sun, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsxs13(
-            "div",
-            {
-              className: `flex items-center ${expanded ? "justify-start px-3 py-3" : "justify-center py-3"} mt-2 rounded-2xl bg-white/[0.01] dark:bg-black/[0.01] border border-glass-border`,
-              children: [
-                /* @__PURE__ */ jsx16("div", { className: "w-9 h-9 rounded-full bg-linear-to-tr from-indigo-500 to-purple-500 shrink-0 border border-foreground/20 shadow-lg" }),
-                /* @__PURE__ */ jsxs13(
-                  "div",
-                  {
-                    className: `overflow-hidden transition-all duration-300 ${expanded ? "ml-4 opacity-100 max-w-30" : "ml-0 opacity-0 max-w-0"}`,
-                    children: [
-                      /* @__PURE__ */ jsx16("p", { className: "text-sm font-bold text-foreground truncate", children: "Tyler Elton" }),
-                      /* @__PURE__ */ jsx16("p", { className: "text-[11px] text-foreground/60 font-medium tracking-wide uppercase truncate", children: "Admin" })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ] })
+        children,
+        /* @__PURE__ */ jsx16("div", { className: "pt-4 border-t border-glass-border space-y-1", children: footer })
       ]
     }
   );
@@ -1649,6 +1601,7 @@ export {
   LiquidScrollContainer,
   Logo,
   MountainGraphic,
+  NavItem,
   Node,
   NodeCanvas,
   PageLayout,

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@vura-ai/assets",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
-    "access": "restricted",
+    "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [