@takeshape/purchase-order-chat 1.51.0-beta.1

package/dist/theme.css

@@ -0,0 +1,75 @@
+/* Semantic color tokens for customer theming.
+   To re-skin the widget from outside the Shadow DOM, define --user-*
+   custom properties on :root (they inherit across shadow boundaries).
+   e.g. :root { --user-color-surface: #f0f0f0; } */
+@theme {
+  /* ── Surfaces ── */
+  --color-surface: var(--user-color-surface, var(--color-white));
+  --color-surface-secondary: var(
+    --user-color-surface-secondary,
+    var(--color-zinc-50)
+  );
+  --color-surface-tertiary: var(
+    --user-color-surface-tertiary,
+    var(--color-zinc-100)
+  );
+  --color-surface-disabled: var(
+    --user-color-surface-disabled,
+    var(--color-zinc-200)
+  );
+  --color-surface-invert: var(
+    --user-color-surface-invert,
+    var(--color-zinc-900)
+  );
+  --color-surface-invert-hover: var(
+    --user-color-surface-invert-hover,
+    var(--color-zinc-800)
+  );
+
+  /* ── Text ── */
+  --color-text: var(--user-color-text, var(--color-zinc-900));
+  --color-text-secondary: var(
+    --user-color-text-secondary,
+    var(--color-zinc-600)
+  );
+  --color-text-tertiary: var(--user-color-text-tertiary, var(--color-zinc-500));
+  --color-text-quaternary: var(
+    --user-color-text-quaternary,
+    var(--color-zinc-400)
+  );
+  --color-text-invert: var(--user-color-text-invert, var(--color-white));
+
+  /* ── Borders ── */
+  --color-border: var(--user-color-border, var(--color-zinc-200));
+  --color-border-strong: var(--user-color-border-strong, var(--color-zinc-300));
+  --color-border-focus: var(--user-color-border-focus, var(--color-zinc-900));
+
+  /* ── Status: Error ── */
+  --color-error-bg: var(--user-color-error-bg, var(--color-red-50));
+  --color-error: var(--user-color-error, var(--color-red-500));
+  --color-error-text: var(--user-color-error-text, var(--color-red-700));
+
+  /* ── Status: Warning ── */
+  --color-warning-bg: var(--user-color-warning-bg, var(--color-amber-50));
+  --color-warning: var(--user-color-warning, var(--color-amber-500));
+  --color-warning-text: var(--user-color-warning-text, var(--color-amber-700));
+
+  /* ── Status: Success ── */
+  --color-success-bg: var(--user-color-success-bg, var(--color-emerald-50));
+  --color-success: var(--user-color-success, var(--color-green-500));
+  --color-success-text: var(
+    --user-color-success-text,
+    var(--color-emerald-700)
+  );
+
+  /* ── Shadows ── */
+  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-button-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
+  --shadow-upload:
+    0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+  --shadow-upload-active:
+    0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
+  --shadow-preview:
+    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-step: 0 2px 6px rgba(0, 0, 0, 0.15);
+}

package/dist/utilities.css

@@ -0,0 +1,233 @@
+@utility upload-step {
+  transition: background-color 0.2s ease;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@utility animate-fade-in-up {
+  animation: fade-in-up 0.5s ease-out forwards;
+}
+
+@keyframes icon-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@utility animate-icon-bounce {
+  animation: icon-bounce 0.6s ease infinite;
+}
+
+@keyframes fade-in-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@utility animate-fade-in-scale {
+  animation: fade-in-scale 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes step-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.12);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@utility animate-step-pulse {
+  animation: step-pulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes text-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@utility animate-text-shimmer {
+  --tw-text-shimmer-base: var(--color-text-quaternary);
+  --tw-text-shimmer-highlight: var(--color-text);
+  background: linear-gradient(
+    90deg,
+    var(--tw-text-shimmer-base) 0%,
+    var(--tw-text-shimmer-base) 35%,
+    var(--tw-text-shimmer-highlight) 50%,
+    var(--tw-text-shimmer-base) 65%,
+    var(--tw-text-shimmer-base) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation:
+    ticker-enter 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+    text-shimmer 2.5s ease-in-out 0.2s infinite;
+}
+
+@utility animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-disabled) 25%,
+    var(--color-surface-tertiary) 50%,
+    var(--color-surface-disabled) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes icon-scan {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+}
+
+@utility animate-icon-scan {
+  animation: icon-scan 2s ease-in-out infinite;
+}
+
+@keyframes item-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@utility animate-item-slide-in {
+  animation: item-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes ticker-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@utility animate-ticker-enter {
+  animation: ticker-enter 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+/* Elevate the Shadow DOM host stacking context when the modal is open,
+   so it appears above the host page's navigation and other elements. */
+:host:has([data-state="expanded"]) {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  overflow: hidden;
+}
+
+@keyframes modal-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes modal-content-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-content-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@utility animate-modal-backdrop-in {
+  animation: modal-backdrop-in 0.2s ease-out forwards;
+}
+
+@utility animate-modal-backdrop-out {
+  animation: modal-backdrop-out 0.2s ease-in forwards;
+}
+
+@utility animate-modal-content-in {
+  animation: modal-content-in 0.25s ease-out forwards;
+}
+
+@utility animate-modal-content-out {
+  animation: modal-content-out 0.2s ease-in forwards;
+}
+
+@utility collapsible-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@utility collapsible-panel-open {
+  grid-template-rows: 1fr;
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@takeshape/purchase-order-chat",
+  "version": "1.51.0-beta.1",
+  "description": "BigCommerce purchase order chat UI components",
+  "type": "module",
+  "imports": {
+    "#/.storybook/preview": "./.storybook/preview.tsx"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/shadow.d.ts",
+      "default": "./dist/shadow.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./*.css": "./dist/*.css",
+    "./src/*": "./src/*.ts",
+    "./src/*.css": "./src/*.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@tanstack/react-query": "^5.80.6",
+    "ai": "^6.0.53",
+    "clsx": "^2.1.1",
+    "gql.tada": "^1.9.0",
+    "graphql": "^16.12.0",
+    "graphql-request": "^7.4.0",
+    "pdfjs-dist": "^5.5.207",
+    "streamdown": "^2.2.0",
+    "tailwind-merge": "^3.4.0",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@ai-sdk/react": "^3.0.55",
+    "@sentry/react": "^10.42.0",
+    "@sentry/vite-plugin": "^5.1.1",
+    "@storybook/react-vite": "^10.2.10",
+    "@tailwindcss/vite": "^4.2.1",
+    "@takeshape/vite-plugin-css-position": "^2.1.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "jsdom": "^27.4.0",
+    "storybook": "^10.2.10",
+    "tailwindcss": "^4.2.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.0.4",
+    "@takeshape/config": "0.0.0",
+    "@takeshape/scripts": "0.0.0"
+  },
+  "peerDependencies": {
+    "@sentry/react": ">=10.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@sentry/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006 --no-open",
+    "lint": "biome lint src",
+    "check-types": "tsc --noEmit",
+    "format": "biome format --write src",
+    "package": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "generate": "dotenv -c -- scripts gql-tada-bigcommerce --schema https://api-b2b.bigcommerce.com/graphql:./gen/bigcommerce/b2b/schema.graphql --schema :./gen/bigcommerce/storefront/schema.graphql"
+  }
+}