@arbidocs/blocks 0.5.104 → 0.5.106

package/dist/workflow-canvas/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkBSPPKX6X_cjs = require('../chunk-BSPPKX6X.cjs');
+var chunkOXHAZN43_cjs = require('../chunk-OXHAZN43.cjs');
 require('../chunk-YZ6YOOTF.cjs');
 require('../chunk-KWJW5TMH.cjs');
 require('../chunk-V2CKYM4B.cjs');
@@ -16,7 +16,7 @@ require('../chunk-QN5GTCPB.cjs');
 require('../chunk-DDWLMYRO.cjs');
 var chunk6NSKIS35_cjs = require('../chunk-6NSKIS35.cjs');
 require('../chunk-IWLNDDPN.cjs');
-require('../chunk-MMSHLHTA.cjs');
+require('../chunk-LM5CPXJO.cjs');
 require('../chunk-OKUXM2N4.cjs');
 require('../chunk-223D4727.cjs');
 require('../chunk-SNUBQMIS.cjs');
@@ -3012,7 +3012,7 @@ function ConnectedWorkflowsPage({
   const config = host.workflows;
   const { openConversation, openFiles } = chunkWGWP4ATS_cjs.useBlocksEnvironment();
   const openWorkflow = chunk53RXGFJ6_cjs.useOpenWorkflow();
-  const renderPerson = chunkBSPPKX6X_cjs.useRenderTaskPerson();
+  const renderPerson = chunkOXHAZN43_cjs.useRenderTaskPerson();
   const refreshDocuments = react$2.useRefreshDocuments();
   const invalidateTags = react$2.useInvalidateTagData();
   const { data: tags = [] } = react$2.useTags();
@@ -3043,7 +3043,7 @@ function ConnectedWorkflowsPage({
     openHistory,
     closeHistoryTab,
     selectHistoryTab
-  } = chunkBSPPKX6X_cjs.useWorkflowsPageState({
+  } = chunkOXHAZN43_cjs.useWorkflowsPageState({
     historyWorkflowId: requestedHistoryId ?? historyWorkflowId,
     onHistoryWorkflowConsumed: consumeHistory
   });
@@ -3105,7 +3105,7 @@ function ConnectedWorkflowsPage({
     return (
       // The page in the Workflows page's frame: padded, scrolling.
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 w-full overflow-auto p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkBSPPKX6X_cjs.ConnectedWorkflowRunPage,
+        chunkOXHAZN43_cjs.ConnectedWorkflowRunPage,
         {
           workflow: running.workflow,
           projectFrom: running.projectFrom,
@@ -3223,7 +3223,7 @@ function ConnectedWorkflowsPage({
           }
         },
         content: hostTab ? hostTab.content : runsFor ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBSPPKX6X_cjs.ConnectedWorkflowHistory,
+          chunkOXHAZN43_cjs.ConnectedWorkflowHistory,
           {
             inline: true,
             hideHeader: true,
@@ -3287,7 +3287,7 @@ function ConnectedWorkflowsPage({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkBSPPKX6X_cjs.ConnectedTaskComposer,
+      chunkOXHAZN43_cjs.ConnectedTaskComposer,
       {
         kind: "workflow",
         saveOnly: true,

package/dist/workflow-canvas/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { useRenderTaskPerson, useWorkflowsPageState, ConnectedWorkflowRunPage, ConnectedWorkflowHistory, ConnectedTaskComposer } from '../chunk-TQFDPCWU.js';
+import { useRenderTaskPerson, useWorkflowsPageState, ConnectedWorkflowRunPage, ConnectedWorkflowHistory, ConnectedTaskComposer } from '../chunk-7Q6EVFMT.js';
 import '../chunk-SEBNGA3F.js';
 import '../chunk-57CG33XJ.js';
 import '../chunk-7ONU7EWY.js';
@@ -14,7 +14,7 @@ import '../chunk-BMHW7WTF.js';
 import '../chunk-TROXWCQQ.js';
 import { useAiReviewStore } from '../chunk-E6ISR55S.js';
 import '../chunk-GOJ5GHFS.js';
-import '../chunk-N77UYRV7.js';
+import '../chunk-632JXVXY.js';
 import '../chunk-JWUCDK2F.js';
 import '../chunk-RC6VTY2H.js';
 import '../chunk-OHRWYRTH.js';

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

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/coedit",
-  "version": "0.5.104",
+  "version": "0.5.106",
   "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.5.104",
+  "version": "0.5.106",
   "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",
@@ -310,6 +310,7 @@
     "record/render-take.py",
     "src/tokens.css",
     "src/blocks.css",
+    "src/connection/billing/project-purchase.css",
     "src/workflow-canvas/canvas.css",
     "src/studio/studio.css",
     "src/components/grid.css",
@@ -335,9 +336,9 @@
     "custom-site:test:e2e": "playwright test -c examples/custom-site/playwright.config.ts"
   },
   "dependencies": {
-    "@arbidocs/client": "0.5.104",
-    "@arbidocs/coedit": "0.5.104",
-    "@arbidocs/sdk": "0.5.104",
+    "@arbidocs/client": "0.5.106",
+    "@arbidocs/coedit": "0.5.106",
+    "@arbidocs/sdk": "0.5.106",
     "@auth0/auth0-react": "^2.19.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -386,7 +387,7 @@
     "y-protocols": "^1.0.6"
   },
   "peerDependencies": {
-    "@arbidocs/react": "0.5.104",
+    "@arbidocs/react": "0.5.106",
     "@lexical/html": "0.35.0",
     "@lexical/link": "0.35.0",
     "@lexical/list": "0.35.0",

package/src/blocks.css

@@ -13,6 +13,8 @@
  * imported before `@import 'tailwindcss'`. Repeating the statement is harmless. */
 @layer theme, base, components, utilities;
 
+@import './connection/billing/project-purchase.css';
+
 /* A dark theme is dark for the browser too: native scrollbars (a tab strip's overflow bar, a
  * dialog's), form controls and the canvas follow the theme instead of painting light on a dark
  * surface. Every site's dark switch (`.dark` or `[data-theme='dark']`) gets it, with no kit opting in. */

package/src/connection/billing/project-purchase.css

@@ -0,0 +1,453 @@
+.project-purchase {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.project-purchase-modal {
+  border-radius: 16px;
+  box-shadow: 0 24px 80px rgb(0 0 0 / 22%);
+}
+.project-purchase-modal [data-slot='modal-header'] {
+  padding: 18px 22px 12px;
+  padding-right: 44px;
+  background: linear-gradient(110deg, hsl(var(--secondary) / 0.12), hsl(var(--accent) / 0.35));
+  border-bottom: 1px solid hsl(var(--secondary) / 0.15);
+}
+.project-purchase-modal [data-slot='modal-scroll'] {
+  padding: 14px 22px 18px;
+}
+.project-purchase-modal [data-slot='modal-scroll'] > div {
+  gap: 12px;
+}
+.project-purchase-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: hsl(var(--muted-foreground));
+  font-size: 12px;
+}
+.project-purchase-plan {
+  border-radius: 5px;
+  padding: 3px 7px;
+  color: hsl(var(--primary-foreground));
+  background: hsl(var(--primary));
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+.project-purchase-inclusions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 10px 4px;
+  border-radius: 10px;
+  background: hsl(var(--secondary) / 0.07);
+  border: 1px solid hsl(var(--secondary) / 0.13);
+}
+.project-purchase-inclusions > div {
+  display: grid;
+  grid-template-columns: 16px auto;
+  justify-content: center;
+  align-content: start;
+  align-items: center;
+  gap: 4px 6px;
+  padding: 0 6px;
+  text-align: center;
+}
+.project-purchase-inclusions > div + div {
+  border-left: 1px solid hsl(var(--secondary) / 0.18);
+}
+.project-purchase-inclusions dt {
+  grid-column: 1 / -1;
+}
+.project-purchase-inclusions dd {
+  font-size: 18px;
+  line-height: 22px;
+}
+.project-purchase-icon {
+  width: 16px;
+  height: 16px;
+  color: hsl(var(--secondary));
+  stroke-width: 1.7;
+}
+.project-purchase-prices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.project-purchase-price {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  padding: 10px 14px;
+  border: 1px solid hsl(var(--secondary) / 0.3);
+  border-radius: 10px;
+  background: hsl(var(--secondary) / 0.045);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    transform 0.15s;
+}
+.project-purchase-price-annual {
+  border-color: hsl(var(--primary));
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+.project-purchase-price:hover:not(:disabled) {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 3px 12px hsl(var(--primary) / 0.18);
+  transform: translateY(-1px);
+}
+.project-purchase-price:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 3px;
+}
+.project-purchase-price:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.project-purchase-price-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  width: 100%;
+  margin-bottom: 2px;
+}
+.project-purchase-period {
+  line-height: 16px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.project-purchase-saving {
+  border: 1px solid #86efac;
+  border-radius: 5px;
+  padding: 2px 6px;
+  background: #bbf7d0;
+  color: #14532d;
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 700;
+}
+.project-purchase-amount {
+  font-size: 28px;
+  line-height: 1.15;
+  font-weight: 650;
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+}
+.project-purchase-price > .text-xs {
+  font-size: 11px;
+  line-height: 15px;
+}
+.project-purchase-price-annual > .text-muted-foreground {
+  color: hsl(var(--primary-foreground) / 0.82);
+}
+.project-purchase-cta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: auto;
+  padding-top: 4px;
+  gap: 6px;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  color: hsl(var(--primary));
+}
+.project-purchase-price-annual .project-purchase-cta {
+  color: hsl(var(--primary-foreground));
+}
+.project-purchase-cap {
+  border: 1px solid hsl(var(--secondary) / 0.2);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: hsl(var(--secondary) / 0.04);
+}
+.project-purchase-cap label {
+  font-size: 12px;
+  font-weight: 500;
+}
+.project-purchase-cap output {
+  font-size: 12px;
+}
+.project-purchase-cap input[type='range'] {
+  appearance: none;
+  height: 20px;
+  margin: 0;
+  cursor: pointer;
+  background: transparent;
+}
+.project-purchase-cap p {
+  font-size: 11px;
+  line-height: 1.4;
+}
+.project-purchase-cap .space-y-2 > :not(:last-child) {
+  margin-bottom: 4px;
+}
+.project-purchase-adjust {
+  color: hsl(var(--secondary));
+  cursor: pointer;
+  font-size: 12px;
+}
+.project-purchase-adjust:hover {
+  color: hsl(var(--foreground));
+}
+.project-purchase-cap input[type='range']::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 99px;
+  background: linear-gradient(
+    to right,
+    hsl(var(--secondary)) var(--cap-progress),
+    hsl(var(--border)) var(--cap-progress)
+  );
+}
+.project-purchase-cap input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  margin-top: -6px;
+  border: 3px solid hsl(var(--background));
+  border-radius: 50%;
+  background: hsl(var(--secondary));
+  box-shadow:
+    0 0 0 1px hsl(var(--primary) / 0.3),
+    0 1px 3px rgb(0 0 0 / 0.15);
+}
+.project-purchase-cap input[type='range']::-moz-range-track {
+  height: 4px;
+  border-radius: 99px;
+  background: hsl(var(--border));
+}
+.project-purchase-cap input[type='range']::-moz-range-progress {
+  height: 4px;
+  border-radius: 99px;
+  background: hsl(var(--secondary));
+}
+.project-purchase-cap input[type='range']::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 2px solid hsl(var(--background));
+  border-radius: 50%;
+  background: hsl(var(--secondary));
+}
+.project-purchase-cap input[type='range']:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+@media (max-width: 420px) {
+  .project-purchase {
+    gap: 10px;
+  }
+  .project-purchase-modal [data-slot='modal-scroll'] {
+    padding: 12px 18px 14px;
+  }
+  .project-purchase-price {
+    padding: 10px;
+  }
+  .project-purchase-amount {
+    font-size: 26px;
+  }
+  .project-purchase-price-heading {
+    flex-wrap: nowrap;
+    gap: 4px;
+  }
+  .project-purchase-saving {
+    padding: 2px 4px;
+    font-size: 11px;
+  }
+}
+
+.project-purchase-upgrade {
+  max-width: 500px;
+  border-radius: 16px;
+  gap: 12px;
+}
+.project-purchase-upgrade > div:first-child {
+  flex-direction: column;
+  gap: 6px;
+}
+.project-purchase-upgrade [data-testid='change-plan-project'] {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+@media (max-height: 720px) {
+  .project-purchase-modal [data-slot='modal-header'] {
+    padding-top: 14px;
+    padding-bottom: 10px;
+  }
+  .project-purchase-modal [data-slot='modal-scroll'] {
+    padding-top: 10px;
+    padding-bottom: 12px;
+  }
+  .project-purchase-modal [data-slot='modal-scroll'] > div {
+    gap: 8px;
+  }
+  .project-purchase {
+    gap: 8px;
+  }
+}
+
+.project-purchase-addon-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 0 4px;
+}
+.project-purchase-addon {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+  text-align: center;
+  font-size: 11px;
+}
+.project-purchase-addon > div:first-child {
+  flex: initial;
+  min-width: 0;
+  order: 2;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.project-purchase-addon > div:first-child > div {
+  font-size: inherit;
+}
+.project-purchase-addon > div:last-child {
+  flex-wrap: nowrap;
+  gap: 4px;
+}
+.project-purchase-addon button {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+.project-purchase-addon [data-testid$='-count'] {
+  width: 20px;
+  font-size: 12px;
+}
+
+.project-purchase-adjust.project-purchase-heading {
+  justify-content: flex-start;
+  list-style: none;
+}
+.project-purchase-adjust.project-purchase-heading::-webkit-details-marker {
+  display: none;
+}
+.project-purchase-adjust-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: hsl(var(--secondary));
+}
+details[open] > .project-purchase-adjust .project-purchase-adjust-label svg {
+  transform: rotate(180deg);
+}
+
+.project-purchase-inclusions .project-purchase-allowance-controls {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 4px;
+}
+.project-purchase-allowance-controls button {
+  width: 28px;
+  height: 28px;
+  border-color: hsl(var(--secondary) / 0.25);
+  color: hsl(var(--primary));
+  background: hsl(var(--background));
+}
+.project-purchase-auto-title {
+  margin-bottom: 6px;
+  color: hsl(var(--primary));
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.project-purchase-inclusions > div {
+  grid-template-rows: auto 1fr auto;
+  align-content: stretch;
+}
+@media (max-height: 720px) {
+  .project-purchase-price {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .project-purchase-price-heading {
+    margin-bottom: 0;
+  }
+  .project-purchase-cta {
+    padding-top: 2px;
+  }
+  .project-purchase-cap {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .project-purchase-modal [data-slot='modal-scroll'] > div {
+    gap: 6px;
+  }
+}
+
+.project-purchase-price:not(.project-purchase-price-annual) {
+  background: hsl(var(--secondary));
+  border-color: hsl(var(--secondary));
+  color: white;
+}
+.project-purchase-price:not(.project-purchase-price-annual) > .text-muted-foreground {
+  color: rgb(255 255 255 / 0.9);
+}
+.project-purchase-price:not(.project-purchase-price-annual) .project-purchase-cta {
+  color: white;
+}
+.project-purchase-annual-cap {
+  margin-top: 6px;
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+/* Make the final purchase actions read as explicit buttons within each price choice. */
+.project-purchase-price .project-purchase-cta {
+  margin-top: 8px;
+  padding: 7px 9px;
+  border: 1px solid rgb(255 255 255 / 0.6);
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.14);
+  font-size: 12px;
+}
+
+.project-purchase-credit {
+  display: grid;
+  gap: 3px;
+  width: 100%;
+  margin: 3px 0 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgb(255 255 255 / 0.3);
+  font-size: 11px;
+  line-height: 15px;
+  font-variant-numeric: tabular-nums;
+}
+.project-purchase-credit > span {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.project-purchase-total {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 6px;
+}
+.project-purchase-total .project-purchase-amount {
+  text-align: right;
+}