@arbidocs/blocks 0.4.121 → 0.4.123

package/dist/workspaces/index.cjs

@@ -5,8 +5,8 @@ var chunkXZIYRKLW_cjs = require('../chunk-XZIYRKLW.cjs');
 var chunkXAJIKT6Y_cjs = require('../chunk-XAJIKT6Y.cjs');
 var chunk7G2LJMUG_cjs = require('../chunk-7G2LJMUG.cjs');
 var chunkOB5F4577_cjs = require('../chunk-OB5F4577.cjs');
-require('../chunk-C54XEN5T.cjs');
 var chunkULWRNGGE_cjs = require('../chunk-ULWRNGGE.cjs');
+require('../chunk-C54XEN5T.cjs');
 var chunkKDG6FER6_cjs = require('../chunk-KDG6FER6.cjs');
 require('../chunk-DES3K4SD.cjs');
 var react = require('react');

package/dist/workspaces/index.js

@@ -3,8 +3,8 @@ import { CollapsibleSection, KeyValueRow } from '../chunk-LGBAZD37.js';
 import { MemberAvatarStack } from '../chunk-XNOASBGW.js';
 export { RoleBadge, WorkspaceTypeBadgeView } from '../chunk-NBV56SGU.js';
 import { ActionLink } from '../chunk-S7PSMMRG.js';
-import '../chunk-76JDDMSP.js';
 import { ModalHeader } from '../chunk-TX2ZICS7.js';
+import '../chunk-76JDDMSP.js';
 import { fromNow, fmtDate } from '../chunk-OXF2IFXG.js';
 import '../chunk-VUNV25KB.js';
 import { createContext, useContext, useMemo, useState, useCallback, useId } from 'react';

package/node_modules/@arbidocs/coedit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/coedit",
-  "version": "0.4.121",
+  "version": "0.4.123",
   "description": "Real-time collaboration for the ARBI native DOCX editor: a Yjs mirror of the canonical OOXML package, session, and server runtime",
   "type": "module",
   "sideEffects": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/blocks",
-  "version": "0.4.121",
+  "version": "0.4.123",
   "description": "Composable, domain-neutral UI blocks for ARBI apps, organised by capability (retrieval, facts, agents, workspaces, citations, collaboration) plus shell, theme and site primitives, on top of @arbidocs/react.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -280,8 +280,8 @@
     "example:test:e2e": "playwright test -c examples/custom-ui/playwright.config.ts"
   },
   "dependencies": {
-    "@arbidocs/client": "0.4.121",
-    "@arbidocs/coedit": "0.4.121",
+    "@arbidocs/client": "0.4.123",
+    "@arbidocs/coedit": "0.4.123",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -323,7 +323,7 @@
     "y-protocols": "^1.0.6"
   },
   "peerDependencies": {
-    "@arbidocs/react": "0.4.121",
+    "@arbidocs/react": "0.4.123",
     "@lexical/html": "0.35.0",
     "@lexical/link": "0.35.0",
     "@lexical/list": "0.35.0",

package/src/blocks.css

@@ -396,3 +396,171 @@
     opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
     transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
 }
+
+/*
+ * Workflow steps: one accent per kind of step, the same wherever a step appears — the builder's
+ * canvas, the runner's stepper, a thread's top bar, the threads list. Override the `--wf-*`
+ * variables to retheme them. `--wf-start` is the run's start (and finish); `--wf-adhoc` is what
+ * happens on a thread outside any step (messages, notifications).
+ */
+:root {
+  --wf-start: 262 83% 58%;
+  --wf-form: 217 91% 55%;
+  --wf-upload: 173 70% 38%;
+  --wf-agent: 280 70% 56%;
+  --wf-review: 32 95% 48%;
+  --wf-sign: 346 77% 50%;
+  --wf-email: 199 89% 44%;
+  --wf-grid: 142 64% 36%;
+  --wf-adhoc: var(--muted-foreground);
+}
+
+.dark {
+  --wf-start: 262 85% 72%;
+  --wf-form: 217 91% 68%;
+  --wf-upload: 173 60% 52%;
+  --wf-agent: 280 75% 72%;
+  --wf-review: 32 95% 62%;
+  --wf-sign: 346 80% 66%;
+  --wf-email: 199 85% 60%;
+  --wf-grid: 142 55% 52%;
+}
+
+.wf-kind-start { --wf-accent: var(--wf-start); }
+.wf-kind-form { --wf-accent: var(--wf-form); }
+.wf-kind-upload { --wf-accent: var(--wf-upload); }
+.wf-kind-agent { --wf-accent: var(--wf-agent); }
+.wf-kind-review { --wf-accent: var(--wf-review); }
+.wf-kind-sign { --wf-accent: var(--wf-sign); }
+.wf-kind-email_draft { --wf-accent: var(--wf-email); }
+.wf-kind-tabular_review { --wf-accent: var(--wf-grid); }
+.wf-kind-adhoc { --wf-accent: var(--wf-adhoc); }
+
+.wf-badge {
+  color: hsl(var(--wf-accent));
+  background: hsl(var(--wf-accent) / 0.12);
+}
+.wf-kind-text { color: hsl(var(--wf-accent)); }
+
+/*
+ * A step on a bar (`StepChip`): the canvas card in miniature — the kind's accent down its left
+ * edge and its icon in a tinted badge. Done fills the badge; running and waiting take the accent
+ * border; not reached yet is dashed and quiet; the step in view is ringed like a selected card.
+ */
+.wf-chip {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  white-space: nowrap;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  padding: 0 0.5rem 0 0.5625rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.05);
+  transition: box-shadow 150ms, border-color 150ms, background-color 150ms;
+}
+.wf-chip::before {
+  content: '';
+  position: absolute;
+  inset: 4px auto 4px -1px;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: hsl(var(--wf-accent));
+}
+button.wf-chip:hover { border-color: hsl(var(--wf-accent) / 0.55); }
+.wf-chip .wf-badge {
+  display: flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+}
+.wf-chip .wf-badge svg { width: 0.8125rem; height: 0.8125rem; }
+.wf-chip[data-phase='done'] {
+  border-color: hsl(var(--wf-accent) / 0.3);
+  background: linear-gradient(hsl(var(--wf-accent) / 0.07), hsl(var(--wf-accent) / 0.07)), hsl(var(--card));
+}
+.wf-chip[data-phase='done'] .wf-badge {
+  color: hsl(var(--card));
+  background: hsl(var(--wf-accent));
+}
+.wf-chip[data-phase='running'],
+.wf-chip[data-phase='waiting'] { border-color: hsl(var(--wf-accent) / 0.75); }
+.wf-chip[data-phase='blocked'] {
+  border-style: dashed;
+  box-shadow: none;
+  color: hsl(var(--muted-foreground));
+}
+.wf-chip[data-phase='blocked']::before { opacity: 0.35; }
+.wf-chip[data-phase='blocked'] .wf-badge { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
+.wf-chip[data-phase='skipped'] { color: hsl(var(--muted-foreground)); box-shadow: none; }
+.wf-chip[data-phase='skipped'] .wf-chip-label { text-decoration: line-through; }
+.wf-chip[data-phase='skipped']::before { opacity: 0.35; }
+.wf-chip[data-phase='failed'] { border-color: hsl(var(--destructive) / 0.6); }
+.wf-chip[data-phase='failed'] .wf-badge { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.12); }
+.wf-chip[aria-current='step'] {
+  border-color: hsl(var(--wf-accent));
+  box-shadow: 0 0 0 3px hsl(var(--wf-accent) / 0.18), 0 4px 12px -6px hsl(var(--foreground) / 0.2);
+}
+.wf-chip[aria-current='step'][data-phase='failed'] { box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.18); }
+
+/* The line between two steps: the finished step's colour, dashed while the next is ahead. */
+.wf-link {
+  height: 0;
+  min-width: 0.5rem;
+  flex: 1 1 0%;
+  border-top: 1.5px dashed hsl(var(--border));
+}
+.wf-link[data-done] { border-top-style: solid; border-color: hsl(var(--wf-accent) / 0.5); }
+
+/* Who acted during a step: their faces, overlapping, each ringed off the chip behind it. */
+.wf-beads { display: flex; align-items: center; flex-shrink: 0; }
+.wf-beads > * {
+  display: flex;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 1.5px hsl(var(--card));
+}
+.wf-beads > * + * { margin-left: -0.3rem; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .wf-chip[data-phase='waiting'][aria-current='step'] .wf-badge { animation: wf-waiting 2.4s ease-in-out infinite; }
+}
+@keyframes wf-waiting {
+  50% { box-shadow: 0 0 0 3px hsl(var(--wf-accent) / 0.25); }
+}
+
+/*
+ * The message a link took the reader to (`flashMessage`): a gentle highlight on the message
+ * itself, on the theme's accent and ring, that fades out.
+ */
+[data-deep-link-target] [data-slot='message'],
+[data-slot='message'][data-deep-link-target] {
+  border-radius: var(--radius);
+  animation: deep-link-flash 1.6s ease-out;
+}
+@keyframes deep-link-flash {
+  from {
+    background-color: hsl(var(--accent));
+    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.45);
+  }
+  to {
+    background-color: hsl(var(--background));
+    box-shadow: 0 0 0 2px transparent;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-deep-link-target] [data-slot='message'],
+  [data-slot='message'][data-deep-link-target] {
+    animation: none;
+    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.45);
+  }
+}

package/src/workflow-canvas/canvas.css

@@ -1,33 +1,11 @@
 /*
  * @arbidocs/blocks/workflow-canvas.css: the workflow builder's canvas. Import it once, next to
  * `blocks.css`, where `@arbidocs/blocks/workflow-canvas` is used. The graph library's structural
- * rules, its surfaces on the theme tokens, and one accent per kind of step (override the
- * `--wf-*` variables to retheme them).
+ * rules and its surfaces on the theme tokens. Each kind of step's accent (`.wf-kind-*`, the `--wf-*`
+ * variables) is in `blocks.css`: the thread bar and the threads list show the same colours.
  */
 @import '@xyflow/react/dist/base.css';
 
-:root {
-  --wf-start: 262 83% 58%;
-  --wf-form: 217 91% 55%;
-  --wf-upload: 173 70% 38%;
-  --wf-agent: 280 70% 56%;
-  --wf-review: 32 95% 48%;
-  --wf-sign: 346 77% 50%;
-  --wf-email: 199 89% 44%;
-  --wf-grid: 142 64% 36%;
-}
-
-.dark {
-  --wf-start: 262 85% 72%;
-  --wf-form: 217 91% 68%;
-  --wf-upload: 173 60% 52%;
-  --wf-agent: 280 75% 72%;
-  --wf-review: 32 95% 62%;
-  --wf-sign: 346 80% 66%;
-  --wf-email: 199 85% 60%;
-  --wf-grid: 142 55% 52%;
-}
-
 .react-flow {
   --xy-edge-stroke-default: hsl(var(--muted-foreground) / 0.45);
   --xy-edge-stroke-width-default: 1.5;
@@ -43,16 +21,6 @@
   --xy-minimap-node-background-color-default: hsl(var(--muted-foreground) / 0.35);
 }
 
-/* A step's accent: its kind's colour. */
-.wf-kind-start { --wf-accent: var(--wf-start); }
-.wf-kind-form { --wf-accent: var(--wf-form); }
-.wf-kind-upload { --wf-accent: var(--wf-upload); }
-.wf-kind-agent { --wf-accent: var(--wf-agent); }
-.wf-kind-review { --wf-accent: var(--wf-review); }
-.wf-kind-sign { --wf-accent: var(--wf-sign); }
-.wf-kind-email_draft { --wf-accent: var(--wf-email); }
-.wf-kind-tabular_review { --wf-accent: var(--wf-grid); }
-
 .wf-node {
   position: relative;
   border-radius: 0.75rem;
@@ -77,12 +45,6 @@
   border-color: hsl(var(--wf-accent));
   box-shadow: 0 0 0 3px hsl(var(--wf-accent) / 0.22), 0 10px 24px -8px hsl(var(--foreground) / 0.18);
 }
-.wf-badge {
-  color: hsl(var(--wf-accent));
-  background: hsl(var(--wf-accent) / 0.12);
-}
-.wf-kind-text { color: hsl(var(--wf-accent)); }
-
 /* The start: a pill in its own colour. */
 .wf-start {
   border-radius: 9999px;