@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/package-info.js

@@ -0,0 +1,171 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/utils";
+import { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from "lucide-react";
+import { createContext, use } from "react";
+const PackageInfoContext = createContext({
+  name: ""
+});
+const PackageInfo = ({
+  name,
+  currentVersion,
+  newVersion,
+  changeType,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  PackageInfoContext.Provider,
+  {
+    value: { changeType, currentVersion, name, newVersion },
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("rounded-lg border bg-background p-4", className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(PackageInfoHeader, { children: [
+            /* @__PURE__ */ jsx(PackageInfoName, {}),
+            changeType && /* @__PURE__ */ jsx(PackageInfoChangeType, {})
+          ] }),
+          (currentVersion || newVersion) && /* @__PURE__ */ jsx(PackageInfoVersion, {})
+        ] })
+      }
+    )
+  }
+);
+const PackageInfoHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-between gap-2", className),
+    ...props,
+    children
+  }
+);
+const PackageInfoName = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { name } = use(PackageInfoContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(PackageIcon, { className: "size-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium font-mono text-sm", children: children ?? name })
+  ] });
+};
+const changeTypeStyles = {
+  added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  minor: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  removed: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+};
+const changeTypeIcons = {
+  added: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+  major: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  minor: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  patch: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  removed: /* @__PURE__ */ jsx(MinusIcon, { className: "size-3" })
+};
+const PackageInfoChangeType = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { changeType } = use(PackageInfoContext);
+  if (!changeType) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      className: cn(
+        "gap-1 text-xs capitalize",
+        changeTypeStyles[changeType],
+        className
+      ),
+      variant: "secondary",
+      ...props,
+      children: [
+        changeTypeIcons[changeType],
+        children ?? changeType
+      ]
+    }
+  );
+};
+const PackageInfoVersion = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { currentVersion, newVersion } = use(PackageInfoContext);
+  if (!(currentVersion || newVersion)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-sm",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        currentVersion && /* @__PURE__ */ jsx("span", { children: currentVersion }),
+        currentVersion && newVersion && /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+        newVersion && /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: newVersion })
+      ] })
+    }
+  );
+};
+const PackageInfoDescription = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-muted-foreground text-sm", className), ...props, children });
+const PackageInfoContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("mt-3 border-t pt-3", className), ...props, children });
+const PackageInfoDependencies = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+  /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Dependencies" }),
+  /* @__PURE__ */ jsx("div", { className: "space-y-1", children })
+] });
+const PackageInfoDependency = ({
+  name,
+  version,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-between text-sm", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: name }),
+      version && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: version })
+    ] })
+  }
+);
+export {
+  PackageInfo,
+  PackageInfoChangeType,
+  PackageInfoContent,
+  PackageInfoDependencies,
+  PackageInfoDependency,
+  PackageInfoDescription,
+  PackageInfoHeader,
+  PackageInfoName,
+  PackageInfoVersion
+};

package/dist/components/ai-elements/panel.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _react = require('@xyflow/react');
+const Panel = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.Panel,
+  {
+    className: _utils.cn.call(void 0, 
+      "m-4 overflow-hidden rounded-md border bg-card p-1",
+      className
+    ),
+    ...props
+  }
+);
+
+
+exports.Panel = Panel;

package/dist/components/ai-elements/panel.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Panel as Panel$1 } from '@xyflow/react';
+
+type PanelProps = ComponentProps<typeof Panel$1>;
+declare const Panel: ({ className, ...props }: PanelProps) => react_jsx_runtime.JSX.Element;
+
+export { Panel };

package/dist/components/ai-elements/panel.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Panel as Panel$1 } from '@xyflow/react';
+
+type PanelProps = ComponentProps<typeof Panel$1>;
+declare const Panel: ({ className, ...props }: PanelProps) => react_jsx_runtime.JSX.Element;
+
+export { Panel };

package/dist/components/ai-elements/panel.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+const Panel = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  PanelPrimitive,
+  {
+    className: cn(
+      "m-4 overflow-hidden rounded-md border bg-card p-1",
+      className
+    ),
+    ...props
+  }
+);
+export {
+  Panel
+};

package/dist/components/ai-elements/persona.cjs

@@ -0,0 +1,202 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+var _reactwebgl2 = require('@rive-app/react-webgl2');
+var _react = require('react');
+const stateMachine = "default";
+const sources = {
+  command: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/command-2.0.riv"
+  },
+  glint: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/glint-2.0.riv"
+  },
+  halo: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/halo-2.0.riv"
+  },
+  mana: {
+    dynamicColor: false,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/mana-2.0.riv"
+  },
+  obsidian: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/obsidian-2.0.riv"
+  },
+  opal: {
+    dynamicColor: false,
+    hasModel: false,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/orb-1.2.riv"
+  }
+};
+const getCurrentTheme = () => {
+  if (typeof window !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) {
+      return "dark";
+    }
+    if (_optionalChain([window, 'access', _ => _.matchMedia, 'optionalCall', _2 => _2("(prefers-color-scheme: dark)"), 'access', _3 => _3.matches])) {
+      return "dark";
+    }
+  }
+  return "light";
+};
+const useTheme = (enabled) => {
+  const [theme, setTheme] = _react.useState.call(void 0, getCurrentTheme);
+  _react.useEffect.call(void 0, () => {
+    if (!enabled) {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      setTheme(getCurrentTheme());
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ["class"],
+      attributes: true
+    });
+    let mql = null;
+    const handleMediaChange = () => {
+      setTheme(getCurrentTheme());
+    };
+    if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener("change", handleMediaChange);
+    }
+    return () => {
+      observer.disconnect();
+      if (mql) {
+        mql.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [enabled]);
+  return theme;
+};
+const PersonaWithModel = _react.memo.call(void 0, 
+  ({ rive, source, children }) => {
+    const theme = useTheme(source.dynamicColor);
+    const viewModel = _reactwebgl2.useViewModel.call(void 0, rive, { useDefault: true });
+    const viewModelInstance = _reactwebgl2.useViewModelInstance.call(void 0, viewModel, {
+      rive,
+      useDefault: true
+    });
+    const viewModelInstanceColor = _reactwebgl2.useViewModelInstanceColor.call(void 0, 
+      "color",
+      viewModelInstance
+    );
+    _react.useEffect.call(void 0, () => {
+      if (!(viewModelInstanceColor && source.dynamicColor)) {
+        return;
+      }
+      const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+      viewModelInstanceColor.setRgb(r, g, b);
+    }, [viewModelInstanceColor, theme, source.dynamicColor]);
+    return children;
+  }
+);
+PersonaWithModel.displayName = "PersonaWithModel";
+const PersonaWithoutModel = _react.memo.call(void 0, 
+  ({ children }) => children
+);
+PersonaWithoutModel.displayName = "PersonaWithoutModel";
+const Persona = _react.memo.call(void 0, 
+  ({
+    variant = "obsidian",
+    state = "idle",
+    onLoad,
+    onLoadError,
+    onReady,
+    onPause,
+    onPlay,
+    onStop,
+    className
+  }) => {
+    const source = sources[variant];
+    if (!source) {
+      throw new Error(`Invalid variant: ${variant}`);
+    }
+    const callbacksRef = _react.useRef.call(void 0, {
+      onLoad,
+      onLoadError,
+      onPause,
+      onPlay,
+      onReady,
+      onStop
+    });
+    _react.useEffect.call(void 0, () => {
+      callbacksRef.current = {
+        onLoad,
+        onLoadError,
+        onPause,
+        onPlay,
+        onReady,
+        onStop
+      };
+    }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+    const stableCallbacks = _react.useMemo.call(void 0, 
+      () => ({
+        onLoad: ((loadedRive) => _optionalChain([callbacksRef, 'access', _4 => _4.current, 'access', _5 => _5.onLoad, 'optionalCall', _6 => _6(
+          loadedRive
+        )])),
+        onLoadError: ((err) => _optionalChain([callbacksRef, 'access', _7 => _7.current, 'access', _8 => _8.onLoadError, 'optionalCall', _9 => _9(
+          err
+        )])),
+        onPause: ((event) => _optionalChain([callbacksRef, 'access', _10 => _10.current, 'access', _11 => _11.onPause, 'optionalCall', _12 => _12(event)])),
+        onPlay: ((event) => _optionalChain([callbacksRef, 'access', _13 => _13.current, 'access', _14 => _14.onPlay, 'optionalCall', _15 => _15(event)])),
+        onReady: () => _optionalChain([callbacksRef, 'access', _16 => _16.current, 'access', _17 => _17.onReady, 'optionalCall', _18 => _18()]),
+        onStop: ((event) => _optionalChain([callbacksRef, 'access', _19 => _19.current, 'access', _20 => _20.onStop, 'optionalCall', _21 => _21(event)]))
+      }),
+      []
+    );
+    const { rive, RiveComponent } = _reactwebgl2.useRive.call(void 0, {
+      autoplay: true,
+      onLoad: stableCallbacks.onLoad,
+      onLoadError: stableCallbacks.onLoadError,
+      onPause: stableCallbacks.onPause,
+      onPlay: stableCallbacks.onPlay,
+      onRiveReady: stableCallbacks.onReady,
+      onStop: stableCallbacks.onStop,
+      src: source.source,
+      stateMachines: stateMachine
+    });
+    const listeningInput = _reactwebgl2.useStateMachineInput.call(void 0, 
+      rive,
+      stateMachine,
+      "listening"
+    );
+    const thinkingInput = _reactwebgl2.useStateMachineInput.call(void 0, rive, stateMachine, "thinking");
+    const speakingInput = _reactwebgl2.useStateMachineInput.call(void 0, rive, stateMachine, "speaking");
+    const asleepInput = _reactwebgl2.useStateMachineInput.call(void 0, rive, stateMachine, "asleep");
+    _react.useEffect.call(void 0, () => {
+      if (listeningInput) {
+        listeningInput.value = state === "listening";
+      }
+      if (thinkingInput) {
+        thinkingInput.value = state === "thinking";
+      }
+      if (speakingInput) {
+        speakingInput.value = state === "speaking";
+      }
+      if (asleepInput) {
+        asleepInput.value = state === "asleep";
+      }
+    }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
+    const Component = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { rive, source, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RiveComponent, { className: _utils.cn.call(void 0, "size-16 shrink-0", className) }) });
+  }
+);
+Persona.displayName = "Persona";
+
+
+exports.Persona = Persona;

package/dist/components/ai-elements/persona.d.cts

@@ -0,0 +1,50 @@
+import { RiveParameters } from '@rive-app/react-webgl2';
+import { FC } from 'react';
+
+type PersonaState = "idle" | "listening" | "thinking" | "speaking" | "asleep";
+interface PersonaProps {
+    state: PersonaState;
+    onLoad?: RiveParameters["onLoad"];
+    onLoadError?: RiveParameters["onLoadError"];
+    onReady?: () => void;
+    onPause?: RiveParameters["onPause"];
+    onPlay?: RiveParameters["onPlay"];
+    onStop?: RiveParameters["onStop"];
+    className?: string;
+    variant?: keyof typeof sources;
+}
+declare const sources: {
+    command: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    glint: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    halo: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    mana: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    obsidian: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    opal: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+};
+declare const Persona: FC<PersonaProps>;
+
+export { Persona, type PersonaState };

package/dist/components/ai-elements/persona.d.ts

@@ -0,0 +1,50 @@
+import { RiveParameters } from '@rive-app/react-webgl2';
+import { FC } from 'react';
+
+type PersonaState = "idle" | "listening" | "thinking" | "speaking" | "asleep";
+interface PersonaProps {
+    state: PersonaState;
+    onLoad?: RiveParameters["onLoad"];
+    onLoadError?: RiveParameters["onLoadError"];
+    onReady?: () => void;
+    onPause?: RiveParameters["onPause"];
+    onPlay?: RiveParameters["onPlay"];
+    onStop?: RiveParameters["onStop"];
+    className?: string;
+    variant?: keyof typeof sources;
+}
+declare const sources: {
+    command: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    glint: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    halo: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    mana: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    obsidian: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+    opal: {
+        dynamicColor: boolean;
+        hasModel: boolean;
+        source: string;
+    };
+};
+declare const Persona: FC<PersonaProps>;
+
+export { Persona, type PersonaState };