@flytedan/flytebot-design-system 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
@@ -44,6 +44,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "test": "vitest run",
+    "test:browser": "vitest run --project browser",
+    "sync-icons": "node scripts/sync-icons.mjs",
     "docs": "vite --config vite.docs.config.ts",
     "docs:build": "vite build --config vite.docs.config.ts"
   },
@@ -51,15 +53,20 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
+  "dependencies": {
+    "@phosphor-icons/web": "2.1.1"
+  },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^2.1.9",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "jsdom": "^30.0.1",
+    "playwright": "^1.63.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",

package/styles/components.css

@@ -6929,6 +6929,72 @@ button.fd-erow-metric:focus-visible {
   .fd-arrived{animation:none}
 }
 
+/* ============ JobTray / PhasedProgress (MP-211) ============
+   A stack of background-job cards (exports, syncs) and an ordered-phase display for the
+   same kind of job. Both are entirely props-driven — no timers here, only layout. */
+.fd-job-tray{
+  position:fixed;
+  right:var(--s-16,16px);
+  bottom:var(--s-16,16px);
+  z-index:40;
+  display:flex;
+  flex-direction:column-reverse;
+  gap:10px;
+  width:340px;
+  max-width:calc(100vw - 32px);
+  pointer-events:none;
+}
+.fd-job-tray>.fd-job-card{pointer-events:auto}
+.fd-job-card{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+  background:var(--surface);
+  border:1px solid var(--border);
+  border-radius:var(--r-md);
+  box-shadow:var(--e-3);
+  padding:14px 16px;
+  animation:fd-rise var(--dur-slow) var(--ease-out) both;
+}
+.fd-job-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+.fd-job-card-title{font-weight:var(--w-semibold);color:var(--text);font-size:var(--body-size)}
+.fd-job-card-note{display:block}
+.fd-job-card-progress{display:flex;flex-direction:column;gap:4px}
+.fd-job-card-done{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.fd-job-card-done-note{display:block}
+.fd-job-card-failed{display:flex;align-items:flex-start;gap:8px;color:var(--danger-text);font-size:var(--body-sm-size)}
+.fd-job-card-failed .ph{flex:none;font-size:16px;margin-top:1px}
+@media (max-width:640px){
+  .fd-job-tray{
+    left:16px;
+    right:16px;
+    bottom:0;
+    width:auto;
+    max-width:none;
+    padding-bottom:12px;
+  }
+}
+
+.fd-phased-progress{display:flex;flex-direction:column;gap:12px}
+.fd-phase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.fd-phase{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:var(--body-size)}
+.fd-phase .ph{flex:none;font-size:18px}
+.fd-phase-label{flex:1;min-width:0}
+.fd-phase-count{white-space:nowrap}
+.fd-phase-pending{color:var(--text-muted)}
+.fd-phase-active{color:var(--text)}
+.fd-phase-active .ph{color:var(--brand)}
+.fd-phase-done{color:var(--text)}
+.fd-phase-done .ph{color:var(--ok-solid)}
+.fd-phase-failed{color:var(--danger-text)}
+.fd-phase-failed .ph{color:var(--danger-solid)}
+.fd-phase-spin{animation:fd-spin 900ms linear infinite}
+.fd-phase-summary{font-size:var(--body-sm-size);color:var(--text-2)}
+@media (prefers-reduced-motion:reduce){
+  .fd-phase-spin{animation:fd-pulse 1.6s ease-in-out infinite}
+  .fd-job-card{animation:none}
+}
+
 /* FileViewer (MP-130): a preview pane plus an optional host-supplied side panel — the
    companion notes/metadata surface the app composes in, generic here as `sidePanel`.
    Two regions, one scroll region each (R-8): `.fd-fv-body` never scrolls, each pane owns