@arbidocs/blocks 0.3.110

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@arbidocs/blocks",
+  "version": "0.3.110",
+  "description": "Composable AI-native back-office blocks on top of @arbidocs/react — prompt library, theme system, shell, builders and vertical primitives.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./studio.css": "./src/studio/studio.css",
+    "./grid.css": "./src/components/grid.css"
+  },
+  "files": [
+    "dist",
+    "src/studio/studio.css",
+    "src/components/grid.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@arbidocs/react": "0.3.110",
+    "@arbidocs/sdk": "0.3.110",
+    "ag-grid-community": "^35.3.0",
+    "ag-grid-react": "^35.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.22.0",
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.14"
+  },
+  "peerDependencies": {
+    "@measured/puck": ">=0.20",
+    "@tanstack/react-query": ">=5",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
+  },
+  "devDependencies": {
+    "@measured/puck": "^0.20.2",
+    "@tanstack/react-query": "^5.101.2",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.2",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^6.30.1",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arbicity/ARBI-frontend.git",
+    "directory": "packages/arbi-blocks"
+  },
+  "keywords": [
+    "arbi",
+    "blocks",
+    "composable",
+    "vertical",
+    "react"
+  ]
+}

package/src/components/grid.css

@@ -0,0 +1,365 @@
+/**
+ * AG Grid Theme Overrides
+ * Uses CSS custom properties to integrate with our theme system
+ * This enables dark mode support and consistent theming
+ *
+ * AG Grid v34 CSS variable reference:
+ * https://www.ag-grid.com/javascript-data-grid/theming-parameters/
+ */
+
+@layer components {
+  :root {
+    /* Core colors - reference our theme variables */
+    --ag-background-color: hsl(var(--background));
+    --ag-foreground-color: hsl(var(--foreground));
+    --ag-border-color: hsl(var(--border));
+
+    /* Header styling */
+    --ag-header-background-color: hsl(var(--muted));
+    --ag-header-foreground-color: hsl(var(--muted-foreground));
+
+    /* Row styling */
+    --ag-odd-row-background-color: hsl(var(--background));
+    /* Hover tint: a neutral foreground-based overlay (not --muted, which sits
+       too close to the background to track) — subtle but clearly shows which
+       row the pointer is on. Pure CSS variable, zero per-row cost. */
+    --ag-row-hover-color: hsl(var(--foreground) / 0.05);
+
+    /* Selection - use secondary color with low opacity */
+    --ag-selected-row-background-color: hsl(var(--secondary) / 0.1);
+    --ag-range-selection-background-color: hsl(var(--secondary) / 0.1);
+
+    /* Accent color for checkboxes, focus rings, etc */
+    --ag-accent-color: hsl(var(--secondary));
+
+    /* Input styling */
+    --ag-input-focus-border-color: hsl(var(--secondary));
+
+    /* Cell borders - match background for invisible borders */
+    --ag-cell-horizontal-border: transparent;
+  }
+
+  .dark {
+    /* Dark mode overrides - CSS variables automatically cascade */
+    --ag-row-hover-color: hsl(var(--foreground) / 0.07);
+    --ag-selected-row-background-color: hsl(var(--secondary) / 0.2);
+  }
+}
+
+/* Private (un-shared) documents: render the row selection checkbox in primary
+   navy instead of the secondary cyan accent — matching the document
+   shared/private colour convention. Scoped to the checkbox wrapper so nothing
+   else in the row (selected-row tint, focus ring) shifts. The `doc-row-private`
+   class comes from the Documents grid's rowClassRules (a pure data predicate,
+   so no per-row latency). */
+.ag-row.doc-row-private .ag-checkbox-input-wrapper {
+  --ag-accent-color: hsl(var(--primary));
+}
+
+/* The unified Document column's ⋯ kebab is hover-only (revealed when the row is
+   hovered) so it doesn't clutter the table at rest. Uses native :hover on the
+   row (reliable regardless of AG Grid's JS hover class). It also stays visible
+   while its menu is open (handled by the button's data-[state=open] class). */
+.ag-row:hover .doc-row-kebab,
+.ag-row-hover .doc-row-kebab {
+  opacity: 1;
+}
+
+/* Row hover affordance: a subtle left accent bar so the active row reads as
+   actionable (mirrors Google Drive's list-row hover). Pure CSS on the row's
+   hover state — no per-row JS, so the million-doc grid is unaffected. */
+.ag-row:hover,
+.ag-row-hover {
+  box-shadow: inset 2px 0 0 hsl(var(--secondary));
+}
+
+/* Stronger header/body separation. The header is already shaded via
+   --ag-header-background-color; a hairline under the band sharpens the
+   boundary the way Notion's header row does. */
+.ag-header {
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+/* Numeric columns (Pages, Size): right-align + tabular figures so digits line
+   up column-wise and are faster to compare. */
+.cell-numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Icon columns (e.g. Status): horizontally center the lone glyph. text-align
+   covers the default (inline) cell; justify-content covers the flex cell used
+   by height-adjustable grids (.ag-cells-centered). */
+.cell-hcenter {
+  text-align: center;
+  justify-content: center;
+}
+
+/* Center the matching header label so it sits above the centered icon. */
+.header-hcenter .ag-header-cell-label {
+  justify-content: center;
+}
+
+/* Date column: tabular figures (kept left-aligned) so YYYY-MM-DD values align. */
+.cell-tnum {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Vertically center every cell's content (height-adjustable grids only, flagged
+   by .ag-cells-centered on the wrapper). As rows grow tall to fit multi-line
+   text, a single line or a lone entity pill sits in the middle of the row and
+   multi-line text is balanced top-to-bottom — the classic, tidy grid look at
+   any row height. */
+.ag-cells-centered .ag-cell {
+  display: flex;
+  align-items: center;
+  /* AG Grid lays every cell out as `position: absolute; height: 100%` with no
+     explicit `top`. In this grid the absolute cell's static position resolves to
+     the BOTTOM of the row, so cells (and their content) drop to the row's bottom
+     edge and spill into the row beneath — content appears in a row that
+     shouldn't exist; on the last row it shows as misaligned/empty cells because
+     there is no row below to cover the overflow. Pin every cell to its row's
+     top. (position: relative cells, e.g. .cell-select-editable, already sit at
+     the top, so this is a no-op for them.) */
+  top: 0;
+  /* Vertical breathing room so content (and multi-line Abstract text) doesn't
+     crowd the row hairlines above and below. */
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+/* Status: the progress-bar + label renderer needs the full row height. The
+   default 8px top/bottom cell padding leaves almost no room at the minimum row
+   height (so the bar/label get clipped), so trim it and pin the content to the
+   top of the cell. */
+.cell-status.ag-cell {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  align-items: flex-start;
+}
+
+/* Abstract: height-driven multi-line text. The text wraps and the row height
+   decides how many lines show — so the density slider doubles as "how much
+   abstract do I want to see" (one line when compact, several when tall). It
+   reads from the FIRST line down and clamps to a WHOLE number of lines
+   (--abstract-line-clamp, computed from the row height in GridView) so there is
+   never a sliced half-line against the top or bottom hairline — the cut lands
+   on a line boundary with an ellipsis. The value renders directly on the cell
+   (it is itself .ag-cell-value), so we target the cell. Only affects the
+   non-editing display (editing opens the large-text popup editor). */
+.cell-abstract.ag-cell {
+  display: block;
+  white-space: normal;
+  overflow: hidden;
+  line-height: 1.35;
+  /* Snap the box to a WHOLE number of text lines so the overflow clip always
+     lands on a line boundary — never mid-line (which reads as a half-line
+     "bleeding" into the next row). Both values are computed from the row height
+     once in GridView (zero per-row cost): --abstract-pad-y shrinks on short
+     rows so a line always fits, and --abstract-max-h caps the box at exactly N
+     lines + padding + border. Fallbacks cover grids without a density control. */
+  padding-top: var(--abstract-pad-y, 8px);
+  padding-bottom: var(--abstract-pad-y, 8px);
+  max-height: var(--abstract-max-h, calc(2 * 1.35em + 18px));
+}
+
+/* AG Grid structural customizations (not theme colors) */
+.ag-header-cell-text {
+  order: 2;
+}
+
+.ag-header-icon {
+  order: 1;
+  margin-right: 8px;
+  margin-left: 0;
+  margin-top: 4px;
+}
+
+.ag-header-cell-label {
+  display: flex;
+  align-items: center !important;
+}
+
+/* White dividers between header columns - use theme variable */
+.ag-header-cell:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: hsl(var(--background));
+  pointer-events: none;
+}
+
+/* Hide column borders on cells */
+.ag-cell {
+  border-right-color: transparent !important;
+  /* Allow users to select / copy cell text even in read-only cells.
+     AG Grid defaults to user-select: none and only opts cells in via
+     enableCellTextSelection (which we avoid to keep mouse handling
+     untouched for the million-doc grid). Editable cells enter edit
+     mode on single click, so this only takes effect on cells the user
+     can't edit — file name, dates, hashes, and metadata fields when
+     the viewer lacks write permissions. */
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+/* Make custom headers sortable by making the title area clickable */
+.custom-header-title {
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-header-title:hover {
+  background-color: hsl(var(--muted-foreground) / 0.05);
+}
+
+/* Horizontal scrollbar sits at the bottom of the grid, above the bulk-actions bar.
+   .ag-body-horizontal-scroll is a direct flex child of .ag-root (flex column); order:100
+   pushes it below .ag-body which appears first in the DOM. */
+.ag-root {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.ag-body-horizontal-scroll {
+  order: 100 !important;
+  height: 8px !important;
+  min-height: 8px !important;
+  max-height: 8px !important;
+}
+
+.ag-body-horizontal-scroll-viewport,
+.ag-body-horizontal-scroll-container {
+  height: 8px !important;
+  min-height: 8px !important;
+  max-height: 8px !important;
+}
+
+/* Hide the scrollbar when not scrollable (AG Grid adds inline style) */
+.ag-body-horizontal-scroll.ag-scrollbar-invisible {
+  display: none !important;
+}
+
+/* Custom scrollbar styling (webkit browsers) */
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
+  height: 8px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Arrow buttons: one left arrow at the left end, one right arrow at the right end.
+   Webkit exposes two slots per direction (:start and :end); hide the unused ones. */
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:decrement:end,
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:increment:start {
+  display: none;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:decrement:start {
+  display: block;
+  width: 18px;
+  height: 8px;
+  background: hsl(var(--muted)) no-repeat center / 7px 7px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6.5 2L3.5 5l3 3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:decrement:start:hover {
+  background-color: hsl(var(--muted-foreground) / 0.15);
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:increment:end {
+  display: block;
+  width: 18px;
+  height: 8px;
+  background: hsl(var(--muted)) no-repeat center / 7px 7px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5l-3 3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:horizontal:increment:end:hover {
+  background-color: hsl(var(--muted-foreground) / 0.15);
+}
+
+/* Vertical scrollbar styling - match horizontal for consistency */
+.ag-body-vertical-scroll {
+  width: 8px !important;
+  min-width: 8px !important;
+  max-width: 8px !important;
+}
+
+.ag-body-vertical-scroll-viewport,
+.ag-body-vertical-scroll-container {
+  width: 8px !important;
+  min-width: 8px !important;
+  max-width: 8px !important;
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+  width: 8px;
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Arrow buttons: one up arrow at the top, one down arrow at the bottom */
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:decrement:end,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:increment:start {
+  display: none;
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:decrement:start {
+  display: block;
+  width: 8px;
+  height: 18px;
+  background: hsl(var(--muted)) no-repeat center / 10px 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5L5 3.5l3 3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:decrement:start:hover {
+  background-color: hsl(var(--muted-foreground) / 0.15);
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:increment:end {
+  display: block;
+  width: 8px;
+  height: 18px;
+  background: hsl(var(--muted)) no-repeat center / 10px 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5l3-3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+}
+
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-button:vertical:increment:end:hover {
+  background-color: hsl(var(--muted-foreground) / 0.15);
+}
+
+/* Scrollbar corner where horizontal and vertical meet */
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-corner,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-corner {
+  background: hsl(var(--muted));
+}
+
+/* AG Grid's horizontal scrollbar right spacer (corner piece) */
+.ag-horizontal-right-spacer {
+  background: hsl(var(--muted)) !important;
+}

package/src/studio/studio.css

@@ -0,0 +1,70 @@
+/* Puck editor chrome + studio layout. Scoped to the studio routes so it never
+ * leaks into the marketing site or back-office. We import Puck's own CSS here
+ * (studio-owned CSS) rather than in the app's global stylesheet. */
+@import "@measured/puck/puck.css";
+
+/* Keep the Puck canvas on a warm surface so previews read true, and repaint
+ * Puck's default azure accent as emerald so the editor chrome matches a sensible
+ * brand default (buttons, selected outlines, focus rings). The scale keeps
+ * Puck's light→dark ordering so contrast stays legible. */
+.al-studio {
+  --puck-color-grey-01: var(--color-ink);
+  --puck-color-azure-01: #052a20;
+  --puck-color-azure-02: #083a2c;
+  --puck-color-azure-03: #0b4a39;
+  --puck-color-azure-04: #0f5a46; /* brand emerald — primary actions */
+  --puck-color-azure-05: #1f7d61; /* primary hover/active */
+  --puck-color-azure-06: #4f9d84;
+  --puck-color-azure-07: #79b6a3;
+  --puck-color-azure-08: #a6cdc0;
+  --puck-color-azure-09: #cbe3d9;
+  --puck-color-azure-10: #e2ede8; /* emerald-soft */
+  --puck-color-azure-11: #eef5f1;
+  --puck-color-azure-12: #f5faf7;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.al-studio__puck {
+  flex: 1;
+  min-height: 0;
+}
+
+/* The small AI-write control that rides alongside text fields. */
+.al-ai-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.al-ai-field__input {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 0.4rem;
+  padding: 0.5rem 0.6rem;
+  font: inherit;
+  background: var(--color-card);
+  color: var(--color-foreground);
+}
+.al-ai-field__input:focus {
+  outline: 2px solid var(--color-emerald);
+  outline-offset: 1px;
+}
+.al-ai-field__btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-ai-accent);
+  background: var(--color-ai-accent-soft);
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  cursor: pointer;
+}
+.al-ai-field__btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}