@peerbots/core 0.2.6 → 1.0.0

package/src/styles/theme.css

@@ -13,6 +13,14 @@
     --sidebar-bg: #f9ffff;
     --color-sidebar-bg: #f9ffff;
 
+    --color-peerbots-pink: #e96c8a;
+    --color-peerbots-teal: #5fc7cc;
+    --color-peerbots-darkteal: #0f766e;
+    --color-peerbots-darkblue: #2e3a59;
+    --color-peerbots-olive: #82871f;
+    --color-peerbots-dark: #1a1a1a;
+    --color-peerbots-light: #f8f9fa;
+
     --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
     --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%,
             var(--tw-gradient-stops));

package/src/ui/feedback/Alert.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+import React from "react";
+
+const meta: Meta<typeof Alert> = {
+  title: "Feedback/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["info", "success", "warning", "danger", "neutral"],
+    },
+    variant: {
+      control: "select",
+      options: ["soft", "outline", "solid"],
+    },
+    title: { control: "text" },
+    message: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    color: "info",
+    variant: "outline",
+    title: "System Update",
+    message: "A new robot face configuration has been synchronized to your controller.",
+    className: "pb:w-[480px]",
+  },
+};
+
+export const ColorsAndVariants: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-4 pb:w-[520px]">
+      <Alert color="info" variant="outline" title="Info Banner (Outline)" message="New feature release available." />
+      <Alert color="success" variant="soft" title="Session Connected" message="Controller paired with robot face." />
+      <Alert color="warning" variant="soft" title="Battery Low" message="Robot head battery is below 15%." />
+      <Alert
+        color="danger"
+        variant="soft"
+        title="Connection Failed"
+        message="Unable to reach the WebSocket server."
+        action={{ name: "Retry", callback: () => console.log("Retrying...") }}
+      />
+      <Alert color="danger" variant="outline" title="Outline Danger" message="Action cannot be undone." />
+      <Alert color="success" variant="solid" title="Solid Success" message="Changes published successfully." />
+    </div>
+  ),
+};

package/src/ui/feedback/Alert.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { Button } from "../forms/Button";
+import { Icon } from "../foundations/Icon";
+import { cn } from "../utils";
+import { ComponentRadius, FillVariant } from "../types";
+
+export type AlertLevel = "Error" | "Warning" | "Success" | "Info";
+export type AlertColor = "danger" | "warning" | "success" | "info" | "neutral";
+
+export interface AlertAction {
+  name: string;
+  callback: () => void;
+}
+
+export interface AlertUIProps {
+  /** Alert semantic color */
+  color?: AlertColor;
+  /** Legacy level prop for backward compatibility */
+  level?: AlertLevel;
+  /** Visual style variant */
+  variant?: "soft" | "outline" | "solid";
+  /** Optional alert title */
+  title?: React.ReactNode;
+  /** Alert message body */
+  message?: React.ReactNode;
+  /** Children as alternative to message */
+  children?: React.ReactNode;
+  /** Optional action button */
+  action?: AlertAction;
+  /** Callback fired when alert is dismissed */
+  onClose?: () => void;
+  /** Border radius scale */
+  radius?: ComponentRadius;
+  className?: string;
+}
+
+const levelColorMap: Record<AlertLevel, AlertColor> = {
+  Error: "danger",
+  Warning: "warning",
+  Success: "success",
+  Info: "info",
+};
+
+const iconMap: Record<AlertColor, { name: any; colorClass: string }> = {
+  danger: { name: "exclamationCircle", colorClass: "pb:text-red-700" },
+  warning: { name: "exclamationTriangle", colorClass: "pb:text-amber-800" },
+  success: { name: "checkCircle", colorClass: "pb:text-emerald-800" },
+  info: { name: "megaphone", colorClass: "pb:text-teal-800" },
+  neutral: { name: "questionMarkCircle", colorClass: "pb:text-gray-700" },
+};
+
+const variantColorClasses: Record<string, Record<AlertColor, string>> = {
+  soft: {
+    danger: "pb:bg-red-50 pb:border-red-200 pb:text-red-900",
+    warning: "pb:bg-amber-50 pb:border-amber-200 pb:text-amber-900",
+    success: "pb:bg-emerald-50 pb:border-emerald-200 pb:text-emerald-900",
+    info: "pb:bg-teal-50 pb:border-teal-200 pb:text-teal-900",
+    neutral: "pb:bg-gray-50 pb:border-gray-200 pb:text-gray-900",
+  },
+  outline: {
+    danger: "pb:bg-red-50/40 pb:border-2 pb:border-red-400 pb:text-red-950",
+    warning: "pb:bg-amber-50/40 pb:border-2 pb:border-amber-400 pb:text-amber-950",
+    success: "pb:bg-emerald-50/40 pb:border-2 pb:border-emerald-500 pb:text-emerald-950",
+    info: "pb:bg-teal-50/40 pb:border-2 pb:border-teal-500 pb:text-teal-950",
+    neutral: "pb:bg-gray-50/40 pb:border-2 pb:border-gray-300 pb:text-gray-950",
+  },
+  solid: {
+    danger: "pb:bg-red-700 pb:border-transparent pb:text-white",
+    warning: "pb:bg-amber-300 pb:border-transparent pb:text-gray-950 pb:font-medium",
+    success: "pb:bg-emerald-700 pb:border-transparent pb:text-white",
+    info: "pb:bg-teal-700 pb:border-transparent pb:text-white",
+    neutral: "pb:bg-gray-900 pb:border-transparent pb:text-white",
+  },
+};
+
+const radiusClasses: Record<ComponentRadius, string> = {
+  none: "pb:rounded-none",
+  sm: "pb:rounded-md",
+  md: "pb:rounded-xl",
+  lg: "pb:rounded-2xl",
+  "2xl": "pb:rounded-2xl",
+  pill: "pb:rounded-full",
+};
+
+export function Alert({
+  color,
+  level,
+  variant = "soft",
+  title,
+  message,
+  children,
+  action,
+  onClose,
+  radius = "2xl",
+  className,
+}: AlertUIProps) {
+  const [visible, setVisible] = useState(true);
+
+  if (!visible) return null;
+
+  const resolvedColor: AlertColor =
+    color || (level ? levelColorMap[level] : "info") || "info";
+
+  const { name: iconName, colorClass } = iconMap[resolvedColor];
+  const colorStyle = variantColorClasses[variant]?.[resolvedColor] || variantColorClasses.soft.info;
+
+  const handleDismiss = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  const body = children || message;
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "pb:flex pb:w-full pb:items-start pb:gap-3.5 pb:p-4.5 pb:border pb:shadow-xs pb:transition-all pb:duration-200",
+        radiusClasses[radius] || radiusClasses["2xl"],
+        colorStyle,
+        className,
+      )}
+    >
+      <div className="pb:shrink-0 pb:pt-0.5">
+        <Icon
+          name={iconName}
+          className={cn(
+            "pb:w-5 pb:h-5",
+            variant === "solid" ? "pb:text-current" : colorClass,
+          )}
+        />
+      </div>
+
+      <div className="pb:flex-1 pb:min-w-0 pb:text-sm pb:leading-relaxed">
+        {title && (
+          <div className="pb:font-bold pb:text-base pb:mb-1 pb:leading-snug">
+            {title}
+          </div>
+        )}
+        <div className={cn(title && "pb:opacity-90")}>{body}</div>
+      </div>
+
+      {action && (
+        <Button
+          size="sm"
+          variant={variant === "solid" ? "outline" : "solid"}
+          color={resolvedColor === "danger" ? "danger" : "neutral"}
+          onClick={() => {
+            action.callback();
+            handleDismiss();
+          }}
+          className="pb:shrink-0 pb:self-center"
+        >
+          {action.name}
+        </Button>
+      )}
+
+      <button
+        type="button"
+        onClick={handleDismiss}
+        aria-label="Dismiss alert"
+        className="pb:shrink-0 pb:p-1 pb:rounded-lg pb:opacity-70 pb:hover:opacity-100 pb:transition-opacity pb:cursor-pointer pb:self-start pb:-mr-1"
+      >
+        <Icon name="xCircle" className="pb:w-5 pb:h-5" />
+      </button>
+    </div>
+  );
+}

package/src/ui/{Dialog.stories.tsx → feedback/Dialog.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Dialog, DialogTitle, DialogDescription, DialogClose } from "./Dialog";
-import { Button } from "./Button";
+import { Button } from "../forms/Button";
 
 const meta: Meta<typeof Dialog> = {
-  title: "UI/Dialog",
+  title: "Feedback/Dialog",
   component: Dialog,
   parameters: {
     layout: "centered",

package/src/ui/{Dialog.tsx → feedback/Dialog.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dialog as BaseDialog } from "@base-ui/react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 export interface DialogProps {
   open?: boolean;
@@ -34,7 +34,7 @@ export function Dialog({
         <BaseDialog.Backdrop className="pb:fixed pb:inset-0 pb:z-50 pb:bg-black/40 pb:transition-all pb:duration-200 data-[state=open]:pb:animate-in data-[state=closed]:pb:animate-out pb:data-[state=closed]:fade-out-0 pb:data-[state=open]:fade-in-0" />
         <BaseDialog.Popup
           className={cn(
-            "pb:fixed pb:left-[50%] pb:top-[50%] pb:z-50 pb:grid pb:w-auto pb:max-w-[90vw] pb:translate-x-[-50%] pb:translate-y-[-50%] pb:gap-4 pb:border pb:bg-white pb:p-6 pb:shadow-lg pb:duration-200 data-[state=open]:pb:animate-in data-[state=closed]:pb:animate-out data-[state=closed]:pb:fade-out-0 data-[state=open]:pb:fade-in-0 data-[state=closed]:pb:zoom-out-95 data-[state=open]:pb:zoom-in-95 data-[state=closed]:pb:slide-out-to-left-1/2 data-[state=closed]:pb:slide-out-to-top-[48%] data-[state=open]:pb:slide-in-from-left-1/2 data-[state=open]:pb:slide-in-from-top-[48%] sm:rounded-lg",
+            "pb:fixed pb:left-[50%] pb:top-[50%] pb:z-50 pb:grid pb:w-auto pb:max-w-[90vw] pb:translate-x-[-50%] pb:translate-y-[-50%] pb:gap-4 pb:border pb:border-gray-100 pb:bg-white pb:p-6 pb:shadow-2xl pb:duration-200 data-[state=open]:pb:animate-in data-[state=closed]:pb:animate-out data-[state=closed]:pb:fade-out-0 data-[state=open]:pb:fade-in-0 data-[state=closed]:pb:zoom-out-95 data-[state=open]:pb:zoom-in-95 data-[state=closed]:pb:slide-out-to-left-1/2 data-[state=closed]:pb:slide-out-to-top-[48%] data-[state=open]:pb:slide-in-from-left-1/2 data-[state=open]:pb:slide-in-from-top-[48%] pb:rounded-2xl",
             className,
           )}
         >

package/src/ui/feedback/EmptyState.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmptyState } from "./EmptyState";
+
+const meta: Meta<typeof EmptyState> = {
+  title: "Feedback/EmptyState",
+  component: EmptyState,
+};
+
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+
+export const Default: Story = {
+  args: {
+    title: "No Items Found",
+    description: "You haven't created any items yet. Get started by creating your first item.",
+    icon: "document",
+    primaryAction: {
+      label: "Create Item",
+      icon: "plus",
+      onClick: () => alert("Create clicked"),
+    },
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">With Dual Actions</span>
+        <EmptyState
+          title="No Content Collections"
+          description="You can create and save interactions or acquire content from the marketplace."
+          icon="squares"
+          primaryAction={{
+            label: "Create Interactions",
+            variant: "primary",
+            icon: "plus",
+            onClick: () => {},
+          }}
+          secondaryAction={{
+            label: "Browse Marketplace",
+            variant: "secondary",
+            icon: "externalLink",
+            onClick: () => {},
+          }}
+        />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">Simple Text Only (No Icon, No Actions)</span>
+        <EmptyState
+          title="Nothing to display"
+          description="Your search did not match any templates."
+        />
+      </div>
+    </div>
+  ),
+};

package/src/ui/feedback/EmptyState.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Button } from "../forms/Button";
+import { Icon, IconProps } from "../foundations/Icon";
+import { Heading, Text } from "../foundations/Typography";
+import { cn } from "../utils";
+import { ComponentColor, FillVariant } from "../types";
+
+export interface EmptyStateAction {
+  label: React.ReactNode;
+  onClick?: () => void;
+  render?: React.ReactElement;
+  variant?: FillVariant;
+  color?: ComponentColor;
+  icon?: IconProps["name"] | React.ReactNode;
+}
+
+export interface EmptyStateProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: IconProps["name"] | React.ReactNode;
+  primaryAction?: EmptyStateAction;
+  secondaryAction?: EmptyStateAction;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  primaryAction,
+  secondaryAction,
+  children,
+  className,
+}: EmptyStateProps) {
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return (
+        <Icon
+          name={icon as IconProps["name"]}
+          className="pb:w-16 pb:h-16 pb:mx-auto pb:text-gray-400 pb:mb-4"
+        />
+      );
+    }
+    return <div className="pb:flex pb:justify-center pb:mb-4">{icon}</div>;
+  };
+
+  return (
+    <div
+      className={cn(
+        "pb:flex pb:flex-col pb:items-center pb:justify-center pb:p-8 pb:text-center pb:rounded-2xl pb:border pb:border-dashed pb:border-gray-200 pb:bg-white/50",
+        className,
+      )}
+    >
+      {renderIcon()}
+
+      {typeof title === "string" ? (
+        <Heading
+          level={3}
+          className="pb:font-bold pb:text-gray-800 pb:mb-2"
+        >
+          {title}
+        </Heading>
+      ) : (
+        title
+      )}
+
+      {description &&
+        (typeof description === "string" ? (
+          <Text
+            color="muted"
+            className="pb:max-w-md pb:mb-6"
+          >
+            {description}
+          </Text>
+        ) : (
+          <div className="pb:text-gray-600 pb:max-w-md pb:mb-6">{description}</div>
+        ))}
+
+      {(primaryAction || secondaryAction) && (
+        <div className="pb:flex pb:flex-wrap pb:gap-3 pb:justify-center pb:items-center">
+          {primaryAction && (
+            <Button
+              variant={primaryAction.variant || "solid"}
+              color={primaryAction.color || "primary"}
+              onClick={primaryAction.onClick}
+              render={primaryAction.render}
+              leftIcon={
+                typeof primaryAction.icon === "string" ? (
+                  <Icon name={primaryAction.icon as IconProps["name"]} />
+                ) : (
+                  primaryAction.icon
+                )
+              }
+            >
+              {primaryAction.label}
+            </Button>
+          )}
+          {secondaryAction && (
+            <Button
+              variant={secondaryAction.variant || "solid"}
+              color={secondaryAction.color || "neutral"}
+              onClick={secondaryAction.onClick}
+              render={secondaryAction.render}
+              leftIcon={
+                typeof secondaryAction.icon === "string" ? (
+                  <Icon name={secondaryAction.icon as IconProps["name"]} />
+                ) : (
+                  secondaryAction.icon
+                )
+              }
+            >
+              {secondaryAction.label}
+            </Button>
+          )}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

package/src/ui/feedback/Popover.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover } from "./Popover";
+import { Button } from "../forms/Button";
+import { Input } from "../forms/Input";
+import { Text } from "../foundations/Typography";
+import { Icon } from "../foundations/Icon";
+import React from "react";
+
+const meta: Meta<typeof Popover> = {
+  title: "Feedback/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+    },
+    align: {
+      control: "select",
+      options: ["start", "center", "end"],
+    },
+    variant: {
+      control: "select",
+      options: ["surface", "glass", "outline", "flat"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  args: {
+    title: "Quick Settings",
+    trigger: <Button color="teal">Open Popover</Button>,
+    children: (
+      <div className="pb:space-y-3 pb:py-1">
+        <Text size="xs" color="muted">
+          Adjust the active robot connection stream rate.
+        </Text>
+        <Input placeholder="Rate (Hz)" defaultValue="60" />
+        <Button size="sm" color="teal" className="pb:w-full">
+          Save Preset
+        </Button>
+      </div>
+    ),
+    side: "bottom",
+    align: "center",
+  },
+};
+
+export const ExportActionsPopover: Story = {
+  render: () => (
+    <Popover
+      title="Export CAD Configuration"
+      trigger={
+        <Button color="neutral" leftIcon={<Icon name="arrowDownTray" />}>
+          Export
+        </Button>
+      }
+      side="bottom"
+      align="end"
+    >
+      <div className="pb:flex pb:flex-col pb:gap-2 pb:w-64 pb:py-1">
+        <button
+          type="button"
+          className="pb:flex pb:items-center pb:gap-2.5 pb:p-2 pb:rounded-xl pb:hover:bg-gray-100 pb:text-left pb:cursor-pointer pb:transition-colors"
+        >
+          <div className="pb:w-7 pb:h-7 pb:rounded-lg pb:bg-peerbots-teal/15 pb:text-peerbots-darkteal pb:flex pb:items-center pb:justify-center">
+            <Icon name="code" className="pb:w-4 pb:h-4" />
+          </div>
+          <div>
+            <div className="pb:text-xs pb:font-bold pb:text-gray-900">Download JSON</div>
+            <div className="pb:text-[10px] pb:text-gray-500">Raw parameter payload</div>
+          </div>
+        </button>
+
+        <button
+          type="button"
+          className="pb:flex pb:items-center pb:gap-2.5 pb:p-2 pb:rounded-xl pb:hover:bg-gray-100 pb:text-left pb:cursor-pointer pb:transition-colors"
+        >
+          <div className="pb:w-7 pb:h-7 pb:rounded-lg pb:bg-peerbots-pink/15 pb:text-peerbots-pink pb:flex pb:items-center pb:justify-center">
+            <Icon name="cube" className="pb:w-4 pb:h-4" />
+          </div>
+          <div>
+            <div className="pb:text-xs pb:font-bold pb:text-gray-900">Export 3MF / STL</div>
+            <div className="pb:text-[10px] pb:text-gray-500">3D printable mesh parts</div>
+          </div>
+        </button>
+      </div>
+    </Popover>
+  ),
+};
+
+export const GlassPopoverInContext: Story = {
+  render: () => (
+    <div className="pb:relative pb:w-[500px] pb:h-72 pb:rounded-3xl pb:bg-gradient-to-br pb:from-slate-900 pb:via-indigo-950 pb:to-teal-950 pb:flex pb:items-center pb:justify-center pb:overflow-hidden pb:p-6">
+      <div className="pb:text-center pb:text-white/60 pb:text-xs pb:space-y-1">
+        <div>3D Robot Viewport Stage</div>
+      </div>
+
+      <div className="pb:absolute pb:top-6 pb:right-6">
+        <Popover
+          title="Viewport HUD"
+          variant="glass"
+          trigger={
+            <Button variant="outline" color="teal" size="sm">
+              Camera HUD
+            </Button>
+          }
+          side="bottom"
+          align="end"
+        >
+          <div className="pb:space-y-2 pb:w-56 pb:py-1">
+            <Text size="xs" color="muted">
+              Translucent glass popover floating over 3D canvas.
+            </Text>
+            <div className="pb:flex pb:gap-2">
+              <Button size="xs" color="teal" className="pb:flex-1">Reset</Button>
+              <Button size="xs" color="neutral" className="pb:flex-1">Snap</Button>
+            </div>
+          </div>
+        </Popover>
+      </div>
+    </div>
+  ),
+};