@od-oneapp/uni-ui 2026.1.1301

package/package.json

@@ -0,0 +1,429 @@
+{
+  "name": "@od-oneapp/uni-ui",
+  "version": "2026.1.1301",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OneDigital-Product/monorepo.git",
+    "directory": "platform/packages/uni-ui"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./theme.css": "./dist/styles/theme.css",
+    "./globals.css": "./src/styles/globals.css",
+    "./fonts": {
+      "types": "./dist/fonts.d.mts",
+      "import": "./dist/fonts.mjs",
+      "default": "./dist/fonts.mjs"
+    },
+    "./fonts/css": "./src/fonts/fonts.css",
+    "./tokens": {
+      "types": "./dist/tokens.d.mts",
+      "import": "./dist/tokens.mjs",
+      "default": "./dist/tokens.mjs"
+    },
+    "./tokens/json": "./dist/tokens/tokens.json",
+    "./tokens/dtcg": "./dist/tokens/tokens.dtcg.json",
+    "./tokens/mantine-types": {
+      "types": "./dist/tokens-mantine-types.d.mts",
+      "import": "./dist/tokens-mantine-types.mjs",
+      "default": "./dist/tokens-mantine-types.mjs"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/colors.css": "./dist/styles/colors.css",
+    "./styles/spacing.css": "./dist/styles/spacing.css",
+    "./styles/typography.css": "./dist/styles/typography.css",
+    "./styles/variables.css": "./dist/styles/variables.css",
+    "./styles/mantine.css": "./dist/styles/mantine.css",
+    "./sources.css": "./dist/sources.css",
+    "./lib/utils": {
+      "types": "./dist/lib-utils.d.mts",
+      "import": "./dist/lib-utils.mjs",
+      "default": "./dist/lib-utils.mjs"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.mts",
+      "import": "./dist/lib/*.mjs",
+      "default": "./dist/lib/*.mjs"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.mts",
+      "import": "./dist/hooks/*.mjs",
+      "default": "./dist/hooks/*.mjs"
+    },
+    "./components/elements/alert": {
+      "types": "./dist/components-elements-alert.d.mts",
+      "import": "./dist/components-elements-alert.mjs",
+      "default": "./dist/components-elements-alert.mjs"
+    },
+    "./components/elements/badge": {
+      "types": "./dist/components-elements-badge.d.mts",
+      "import": "./dist/components-elements-badge.mjs",
+      "default": "./dist/components-elements-badge.mjs"
+    },
+    "./components/elements/button": {
+      "types": "./dist/components-elements-button.d.mts",
+      "import": "./dist/components-elements-button.mjs",
+      "default": "./dist/components-elements-button.mjs"
+    },
+    "./components/elements/avatar": {
+      "types": "./dist/components-elements-avatar.d.mts",
+      "import": "./dist/components-elements-avatar.mjs",
+      "default": "./dist/components-elements-avatar.mjs"
+    },
+    "./components/elements/status-badge": {
+      "types": "./dist/components-elements-status-badge.d.mts",
+      "import": "./dist/components-elements-status-badge.mjs",
+      "default": "./dist/components-elements-status-badge.mjs"
+    },
+    "./components/elements/dialog": {
+      "types": "./dist/components-elements-dialog.d.mts",
+      "import": "./dist/components-elements-dialog.mjs",
+      "default": "./dist/components-elements-dialog.mjs"
+    },
+    "./components/elements/dropdown-menu": {
+      "types": "./dist/components-elements-dropdown-menu.d.mts",
+      "import": "./dist/components-elements-dropdown-menu.mjs",
+      "default": "./dist/components-elements-dropdown-menu.mjs"
+    },
+    "./components/elements/empty": {
+      "types": "./dist/components-elements-empty.d.mts",
+      "import": "./dist/components-elements-empty.mjs",
+      "default": "./dist/components-elements-empty.mjs"
+    },
+    "./components/elements/separator": {
+      "types": "./dist/components-elements-separator.d.mts",
+      "import": "./dist/components-elements-separator.mjs",
+      "default": "./dist/components-elements-separator.mjs"
+    },
+    "./components/elements/dynamic-breadcrumb": {
+      "types": "./dist/components-elements-dynamic-breadcrumb.d.mts",
+      "import": "./dist/components-elements-dynamic-breadcrumb.mjs",
+      "default": "./dist/components-elements-dynamic-breadcrumb.mjs"
+    },
+    "./components/elements/accordion": {
+      "types": "./dist/components-elements-accordion.d.mts",
+      "import": "./dist/components-elements-accordion.mjs",
+      "default": "./dist/components-elements-accordion.mjs"
+    },
+    "./components/elements/card": {
+      "types": "./dist/components-elements-card.d.mts",
+      "import": "./dist/components-elements-card.mjs",
+      "default": "./dist/components-elements-card.mjs"
+    },
+    "./components/elements/carousel": {
+      "types": "./dist/components-elements-carousel.d.mts",
+      "import": "./dist/components-elements-carousel.mjs",
+      "default": "./dist/components-elements-carousel.mjs"
+    },
+    "./components/elements/chart": {
+      "types": "./dist/components-elements-chart.d.mts",
+      "import": "./dist/components-elements-chart.mjs",
+      "default": "./dist/components-elements-chart.mjs"
+    },
+    "./components/elements/hover-card": {
+      "types": "./dist/components-elements-hover-card.d.mts",
+      "import": "./dist/components-elements-hover-card.mjs",
+      "default": "./dist/components-elements-hover-card.mjs"
+    },
+    "./components/elements/collapsible": {
+      "types": "./dist/components-elements-collapsible.d.mts",
+      "import": "./dist/components-elements-collapsible.mjs",
+      "default": "./dist/components-elements-collapsible.mjs"
+    },
+    "./components/elements/progress": {
+      "types": "./dist/components-elements-progress.d.mts",
+      "import": "./dist/components-elements-progress.mjs",
+      "default": "./dist/components-elements-progress.mjs"
+    },
+    "./components/elements/pagination-controls": {
+      "types": "./dist/components-elements-pagination-controls.d.mts",
+      "import": "./dist/components-elements-pagination-controls.mjs",
+      "default": "./dist/components-elements-pagination-controls.mjs"
+    },
+    "./components/elements/resizable": {
+      "types": "./dist/components-elements-resizable.d.mts",
+      "import": "./dist/components-elements-resizable.mjs",
+      "default": "./dist/components-elements-resizable.mjs"
+    },
+    "./components/elements/scroll-area": {
+      "types": "./dist/components-elements-scroll-area.d.mts",
+      "import": "./dist/components-elements-scroll-area.mjs",
+      "default": "./dist/components-elements-scroll-area.mjs"
+    },
+    "./components/elements/skeleton": {
+      "types": "./dist/components-elements-skeleton.d.mts",
+      "import": "./dist/components-elements-skeleton.mjs",
+      "default": "./dist/components-elements-skeleton.mjs"
+    },
+    "./components/elements/loading-dots": {
+      "types": "./dist/components-elements-loading-dots.d.mts",
+      "import": "./dist/components-elements-loading-dots.mjs",
+      "default": "./dist/components-elements-loading-dots.mjs"
+    },
+    "./components/elements/table": {
+      "types": "./dist/components-elements-table.d.mts",
+      "import": "./dist/components-elements-table.mjs",
+      "default": "./dist/components-elements-table.mjs"
+    },
+    "./components/elements/tabs": {
+      "types": "./dist/components-elements-tabs.d.mts",
+      "import": "./dist/components-elements-tabs.mjs",
+      "default": "./dist/components-elements-tabs.mjs"
+    },
+    "./components/elements/tooltip": {
+      "types": "./dist/components-elements-tooltip.d.mts",
+      "import": "./dist/components-elements-tooltip.mjs",
+      "default": "./dist/components-elements-tooltip.mjs"
+    },
+    "./components/forms/*": {
+      "types": "./dist/components-forms/*.d.mts",
+      "import": "./dist/components-forms/*.mjs",
+      "default": "./dist/components-forms/*.mjs"
+    },
+    "./components/layout/*": {
+      "types": "./dist/components-layout/*.d.mts",
+      "import": "./dist/components-layout/*.mjs",
+      "default": "./dist/components-layout/*.mjs"
+    },
+    "./components/layout/oneapp": {
+      "types": "./dist/components-layout-oneapp.d.mts",
+      "import": "./dist/components-layout-oneapp.mjs",
+      "default": "./dist/components-layout-oneapp.mjs"
+    },
+    "./components/layout/app-shell": {
+      "types": "./dist/components-layout-app-shell.d.mts",
+      "import": "./dist/components-layout-app-shell.mjs",
+      "default": "./dist/components-layout-app-shell.mjs"
+    },
+    "./components/filter/*": {
+      "types": "./dist/components-filter/*.d.mts",
+      "import": "./dist/components-filter/*.mjs",
+      "default": "./dist/components-filter/*.mjs"
+    },
+    "./components/ai-elements/ai-elements.constants": {
+      "types": "./dist/components-ai-elements-constants.d.mts",
+      "import": "./dist/components-ai-elements-constants.mjs",
+      "default": "./dist/components-ai-elements-constants.mjs"
+    },
+    "./components/ai-elements/*": {
+      "types": "./dist/components-ai-elements/*.d.mts",
+      "import": "./dist/components-ai-elements/*.mjs",
+      "default": "./dist/components-ai-elements/*.mjs"
+    },
+    "./components/ai-workflows/*": {
+      "types": "./dist/components-ai-workflows/*.d.mts",
+      "import": "./dist/components-ai-workflows/*.mjs",
+      "default": "./dist/components-ai-workflows/*.mjs"
+    },
+    "./components/charts/*": {
+      "types": "./dist/components-charts/*.d.mts",
+      "import": "./dist/components-charts/*.mjs",
+      "default": "./dist/components-charts/*.mjs"
+    },
+    "./components/auth": {
+      "types": "./dist/components-auth.d.mts",
+      "import": "./dist/components-auth.mjs",
+      "default": "./dist/components-auth.mjs"
+    },
+    "./components/auth/client": {
+      "types": "./dist/components-auth-client.d.mts",
+      "import": "./dist/components-auth-client.mjs",
+      "default": "./dist/components-auth-client.mjs"
+    },
+    "./components/auth/client/providers": {
+      "types": "./dist/components-auth-client-providers.d.mts",
+      "import": "./dist/components-auth-client-providers.mjs",
+      "default": "./dist/components-auth-client-providers.mjs"
+    },
+    "./components/auth/client/nav-user": {
+      "types": "./dist/components-auth-client-nav-user.d.mts",
+      "import": "./dist/components-auth-client-nav-user.mjs",
+      "default": "./dist/components-auth-client-nav-user.mjs"
+    },
+    "./components/auth/server": {
+      "types": "./dist/components-auth-server.d.mts",
+      "import": "./dist/components-auth-server.mjs",
+      "default": "./dist/components-auth-server.mjs"
+    },
+    "./components/overlays/confirm-dialog": {
+      "types": "./dist/components-overlays-confirm-dialog.d.mts",
+      "import": "./dist/components-overlays-confirm-dialog.mjs",
+      "default": "./dist/components-overlays-confirm-dialog.mjs"
+    },
+    "./components/overlays/toast": {
+      "types": "./dist/components-overlays-toast.d.mts",
+      "import": "./dist/components-overlays-toast.mjs",
+      "default": "./dist/components-overlays-toast.mjs"
+    },
+    "./shared/auth": {
+      "types": "./dist/shared-auth.d.mts",
+      "import": "./dist/shared-auth.mjs",
+      "default": "./dist/shared-auth.mjs"
+    },
+    "./storybook/preview": {
+      "types": "./dist/storybook-preview.d.mts",
+      "import": "./dist/storybook-preview.mjs",
+      "default": "./dist/storybook-preview.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "storybook",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.27.17",
+    "@internationalized/date": "^3.11.0",
+    "@mantine/hooks": "^8.3.14",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@react-aria/utils": "^3.33.0",
+    "@react-stately/utils": "^3.11.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@visx/axis": "^3.12.0",
+    "@visx/clip-path": "^3.12.0",
+    "@visx/curve": "^3.12.0",
+    "@visx/event": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/tooltip": "^3.12.0",
+    "@xyflow/react": "^12.10.0",
+    "ai": "6.0.78",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "d3-array": "^3.2.4",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "geist": "^1.7.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "0.563.0",
+    "motion": "^12.34.0",
+    "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
+    "qr-code-styling": "^1.9.2",
+    "react-aria": "^3.46.0",
+    "react-aria-components": "^1.15.1",
+    "react-day-picker": "^9.13.2",
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.6.2",
+    "react-stately": "^3.44.0",
+    "recharts": "^3.7.0",
+    "shiki": "^3.22.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^2.2.0",
+    "tailwind-merge": "^3.4.0",
+    "tokenlens": "^1.3.1",
+    "tsdown": "^0.20.3",
+    "tw-animate-css": "^1.4.0",
+    "use-resize-observer": "^9.1.0",
+    "use-stick-to-bottom": "^1.1.3",
+    "vaul": "^1.1.2",
+    "zod": "4.3.6",
+    "@od-oneapp/auth": "2026.1.1301",
+    "@od-oneapp/observability": "2026.1.1301",
+    "@repo/shared": "2026.1.1301",
+    "@od-oneapp/uni-icons": "2026.1.1301"
+  },
+  "devDependencies": {
+    "@react-types/overlays": "^3.9.3",
+    "@react-types/shared": "^3.33.0",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/nextjs-vite": "^10.2.8",
+    "@storybook/react": "^10.2.8",
+    "@storybook/test": "^8.6.15",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@turbo/gen": "^2.8.5",
+    "@types/culori": "^4.0.1",
+    "@types/d3-array": "^3.2.2",
+    "@types/hast": "^3.0.4",
+    "@types/node": "25.2.3",
+    "@types/use-resize-observer": "^6.1.0",
+    "@vitest/coverage-v8": "4.0.18",
+    "autoprefixer": "^10.4.24",
+    "chokidar": "^5.0.0",
+    "cssnano": "^7.1.2",
+    "culori": "^4.0.2",
+    "eslint": "9.39.2",
+    "madge": "8.0.0",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^11.1.3",
+    "qrcode.react": "^4.2.0",
+    "sass": "^1.97.3",
+    "sass-embedded": "^1.97.3",
+    "storybook": "^10.2.8",
+    "tailwindcss": "4.1.18",
+    "tsx": "^4.21.0",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18",
+    "@od-oneapp/qa": "2026.1.1301",
+    "@repo/config": "2026.1.1301"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "next": "16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@od-oneapp/ai-platform": "0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@od-oneapp/ai-platform": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "brands:generate": "tsx scripts/generate-brand-css.mts",
+    "build": "pnpm tokens:generate && pnpm css:build && tsdown",
+    "build:publish": "pnpm tokens:generate && pnpm css:build && tsdown -c tsdown.publish.config.mjs && node ../../../scripts/prepare-publish.mjs",
+    "circular": "madge --circular --extensions ts,tsx,js,jsx --exclude 'dist/' .",
+    "css:build": "node scripts/build-css.mjs",
+    "format": "prettier --write --cache --ignore-unknown --ignore-path ../../../.prettierignore .",
+    "format:check": "prettier --check --cache --ignore-unknown --ignore-path ../../../.prettierignore .",
+    "lint": "eslint . --fix",
+    "registry:audit": "node scripts/generate-registry.mjs --audit",
+    "registry:generate": "node scripts/generate-registry.mjs",
+    "registry:watch": "node scripts/generate-registry.mjs --watch",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "tokens:generate": "tsx scripts/generate-tokens.mts",
+    "tokens:generate:untitled-ui": "tsx scripts/generate-untitled-ui-tokens.mts",
+    "tokens:watch": "tsx scripts/watch-tokens.mts",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/ai-oneapp/flow-chat/index.ts

@@ -0,0 +1,3 @@
+export * from './template-suggestion-card';
+export * from './node-suggestion-card';
+export * from './workflow-action-toast';

package/src/ai-oneapp/flow-chat/node-suggestion-card.tsx

@@ -0,0 +1,37 @@
+import { PlusIcon } from 'lucide-react';
+
+import { Button } from '../../components/elements/atoms/button';
+import { Card, CardDescription, CardTitle } from '../../components/elements/organisms/card';
+
+interface NodeSuggestionCardProps {
+  nodeType: string;
+  mode?: string;
+  label: string;
+  description: string;
+  onAdd: () => void;
+}
+
+export function NodeSuggestionCard({
+  label,
+  description,
+  onAdd,
+  nodeType: _nodeType,
+  mode: _mode,
+}: NodeSuggestionCardProps) {
+  return (
+    <Card className="hover:border-primary/50 focus-within:border-primary focus-within:ring-primary/20 group flex items-center justify-between p-3 transition-colors focus-within:ring-2">
+      <div className="space-y-1">
+        <CardTitle className="text-sm font-medium">{label}</CardTitle>
+        <CardDescription className="text-xs">{description}</CardDescription>
+      </div>
+      <Button
+        size="icon"
+        variant="ghost"
+        onClick={onAdd}
+        className="text-muted-foreground group-hover:bg-primary group-hover:text-primary-foreground size-8 shrink-0 rounded-full transition-colors"
+      >
+        <PlusIcon className="size-4" />
+      </Button>
+    </Card>
+  );
+}

package/src/ai-oneapp/flow-chat/template-suggestion-card.tsx

@@ -0,0 +1,49 @@
+import { ArrowRightIcon, FileTextIcon } from 'lucide-react';
+
+import { Button } from '../../components/elements/atoms/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../components/elements/organisms/card';
+
+interface TemplateSuggestionCardProps {
+  template: {
+    id: string;
+    name: string;
+    description: string;
+    category: string;
+    nodeCount: number;
+  };
+  onApply: () => void;
+}
+
+export function TemplateSuggestionCard({ template, onApply }: TemplateSuggestionCardProps) {
+  return (
+    <Card className="hover:border-primary/50 focus-within:border-primary focus-within:ring-primary/20 transition-colors focus-within:ring-2">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <div className="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg">
+            <FileTextIcon className="size-4" />
+          </div>
+          <div className="flex-1">
+            <CardTitle className="text-base">{template.name}</CardTitle>
+            <div className="text-muted-foreground text-xs">{template.category}</div>
+          </div>
+        </div>
+        <CardDescription className="mt-2 line-clamp-2 text-xs">
+          {template.description}
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="bg-muted/50 flex items-center justify-between py-2 text-xs">
+        <span className="text-muted-foreground">{template.nodeCount} nodes</span>
+        <Button size="sm" variant="ghost" onClick={onApply} className="h-7 gap-1 px-2 text-xs">
+          Apply Template
+          <ArrowRightIcon className="size-3" />
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/ai-oneapp/flow-chat/workflow-action-toast.tsx

@@ -0,0 +1,55 @@
+import { XIcon } from 'lucide-react';
+
+import { Button } from '../../components/elements/atoms/button';
+
+interface WorkflowActionToastProps {
+  title: string;
+  description: string;
+  actions: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'default' | 'ghost';
+  }>;
+  onDismiss: () => void;
+}
+
+export function WorkflowActionToast({
+  title,
+  description,
+  actions,
+  onDismiss,
+}: WorkflowActionToastProps) {
+  return (
+    <div className="bg-card text-card-foreground ring-border relative w-full max-w-sm overflow-hidden rounded-lg border p-4 shadow-lg ring-1">
+      <div className="flex items-start gap-4">
+        <div className="flex-1 space-y-1">
+          <h4 className="text-sm font-semibold">{title}</h4>
+          <p className="text-muted-foreground text-sm">{description}</p>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="hover:bg-muted -mt-2 -mr-2 size-6 shrink-0 rounded-full"
+          onClick={onDismiss}
+        >
+          <XIcon className="size-4" />
+        </Button>
+      </div>
+      {actions.length > 0 && (
+        <div className="mt-3 flex gap-2">
+          {actions.map(action => (
+            <Button
+              key={action.label}
+              size="sm"
+              variant={action.variant || 'default'}
+              onClick={action.onClick}
+              className="h-8 text-xs"
+            >
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ai-elements/__tests__/test-utils.tsx

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview test-utils.tsx
+ */
+
+import type { ReactElement } from 'react';
+
+import { render } from '@testing-library/react';
+
+import { TooltipProvider } from '../../elements/organisms/tooltip';
+
+export const renderWithUI = (ui: ReactElement<any>) =>
+  render(<TooltipProvider delayDuration={0}>{ui}</TooltipProvider>);