@arbidocs/blocks 0.3.185 → 0.4.0

package/src/blocks.css

@@ -0,0 +1,348 @@
+/*
+ * @arbidocs/blocks/blocks.css — the small stylesheet the blocks rely on. Import it once, next to
+ * your Tailwind entry (before `@import 'tailwindcss'`), e.g. `@import '@arbidocs/blocks/blocks.css';`.
+ * Plain CSS on the theme tokens (HSL triplet variables), no Tailwind `@apply`, so it works in any
+ * pipeline. Contents: safe-area utilities, `text-chat`, `.markdown-content`, the document
+ * processing progress bars, and the mobile topbar popover rules (`[data-topbar-popover]`).
+ */
+
+/* Declare Tailwind v4's layer order first. The first `@layer` statement in a stylesheet fixes the
+ * order, so without this the `@layer utilities` below would be seen first and end up the LOWEST
+ * priority layer (every spacing/size utility then loses to the base layer) whenever this file is
+ * imported before `@import 'tailwindcss'`. Repeating the statement is harmless. */
+@layer theme, base, components, utilities;
+
+@layer utilities {
+  /* Safe area inset utilities for mobile browsers with notches/home indicators */
+  .pt-safe {
+    padding-top: env(safe-area-inset-top);
+  }
+  .pb-safe {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  /* One extra chat body size. */
+  .text-chat {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+  }
+}
+
+/*
+ * Accessibility guards (apply to every consumer of the blocks).
+ *
+ * Placeholder text must read at 4.5:1 (WCAG 1.4.3). Many controls fade it with an alpha utility
+ * (`placeholder:text-muted-foreground/50` is ~2:1), so the colour is pinned here. `!important`
+ * in an early layer beats ordinary utilities in later layers, with no per-component edits.
+ */
+@layer base {
+  input::placeholder,
+  textarea::placeholder {
+    color: hsl(var(--muted-foreground)) !important;
+  }
+}
+
+/*
+ * Honour prefers-reduced-motion for everything: spinners, pulses, shimmer, the sidebar and drawer
+ * width/transform transitions, the composer's hover/focus growth. Durations collapse instead of
+ * being removed so `animationend` / `transitionend` handlers (Radix Presence) still fire.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+    scroll-behavior: auto !important;
+  }
+  /* A shimmer that is stopped after one frame would leave a bar half-lit: show it plain. */
+  .progress-bar-processing::after {
+    animation: none;
+    transform: none;
+    background: hsl(var(--secondary) / 0.35);
+  }
+}
+
+/*
+ * Below 640px the kit's bell and user-menu dropdowns (Radix poppers, portalled outside any
+ * className reach) pin flush under the 56px app bar at full width instead of floating as a
+ * shrunk desktop dropdown. The panels opt in with `data-topbar-popover`.
+ */
+@media (max-width: 640px) {
+  [data-radix-popper-content-wrapper]:has([data-topbar-popover]) {
+    position: fixed !important;
+    top: calc(3.5rem + env(safe-area-inset-top)) !important;
+    left: 0 !important;
+    right: 0 !important;
+    transform: none !important;
+    width: 100vw !important;
+    min-width: 100vw !important;
+    max-width: 100vw !important;
+  }
+  [data-topbar-popover] {
+    width: 100% !important;
+    max-width: none !important;
+    border-radius: 0 !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+  }
+}
+
+/* Indeterminate shimmer animation for document processing status */
+/* Uses transform (GPU-accelerated) for AG Grid performance with large datasets */
+@keyframes progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Static grey bar for queued status (no animation) */
+.progress-bar-queued {
+  background-color: hsl(var(--muted-foreground) / 0.3);
+}
+
+/* Secondary color shimmer for processing status */
+.progress-bar-processing {
+  position: relative;
+  overflow: hidden;
+  background-color: hsl(var(--secondary) / 0.15);
+}
+
+.progress-bar-processing::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent 0%, hsl(var(--secondary)) 50%, transparent 100%);
+  animation: progress-shimmer 1.5s ease-in-out infinite;
+  will-change: transform;
+}
+
+/* Markdown component styles */
+@layer components {
+  .markdown-content {
+    width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+    color: hsl(var(--foreground));
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .markdown-content p:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  /* Ensure all content in HTML document view stays within its container */
+  [data-page-number] {
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-x: hidden;
+  }
+
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4,
+  .markdown-content h5,
+  .markdown-content h6 {
+    font-weight: 600;
+    line-height: 1.25;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-content h1 {
+    font-size: 1.125em;
+    color: hsl(var(--foreground));
+  }
+  .markdown-content h2 {
+    font-size: 1em;
+    color: hsl(var(--foreground));
+  }
+  .markdown-content h3 {
+    font-size: 1em;
+    color: hsl(var(--foreground));
+  }
+  .markdown-content h4 {
+    font-size: 1.1em;
+    color: hsl(var(--foreground));
+  }
+  .markdown-content h5,
+  .markdown-content h6 {
+    font-size: 1em;
+    color: hsl(var(--foreground));
+  }
+
+  .markdown-content pre {
+    position: relative;
+    overflow-x: auto;
+    background-color: hsl(var(--muted));
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 1rem;
+    margin: 1rem 0;
+    max-width: 100%;
+    border: 1px solid hsl(var(--border));
+    font-size: 0.875rem;
+    line-height: 1.625;
+    white-space: pre-wrap;
+    transition:
+      color 150ms ease-in-out,
+      background-color 150ms ease-in-out,
+      border-color 150ms ease-in-out;
+  }
+
+  /* Copy button for code blocks - always visible */
+
+  .markdown-content code {
+    background-color: hsl(var(--muted));
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 0.125rem 0.375rem;
+    font-size: 0.875rem;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    color: hsl(var(--foreground));
+  }
+
+  .markdown-content pre code {
+    background-color: transparent;
+    padding: 0;
+    color: hsl(var(--foreground));
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    display: block;
+    width: 100%;
+  }
+
+  /* Chat bubble override: inherit the bubble's foreground, and tint code surfaces from
+     `currentColor` so they stay legible on any bubble surface in light and dark themes. */
+  .chat-bubble-sent .markdown-content,
+  .chat-bubble-sent .markdown-content h1,
+  .chat-bubble-sent .markdown-content h2,
+  .chat-bubble-sent .markdown-content h3,
+  .chat-bubble-sent .markdown-content h4,
+  .chat-bubble-sent .markdown-content h5,
+  .chat-bubble-sent .markdown-content h6 {
+    color: inherit;
+  }
+  .chat-bubble-sent .markdown-content a {
+    color: inherit;
+    text-decoration: underline;
+  }
+  .chat-bubble-sent .markdown-content code {
+    background-color: color-mix(in oklab, currentColor 12%, transparent);
+    color: inherit;
+  }
+  .chat-bubble-sent .markdown-content pre,
+  .chat-bubble-sent .markdown-content pre code {
+    background-color: color-mix(in oklab, currentColor 8%, transparent);
+    border-color: color-mix(in oklab, currentColor 20%, transparent);
+    color: inherit;
+  }
+
+  .markdown-content table {
+    border-collapse: collapse;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid hsl(var(--border));
+    margin: 1rem 0;
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  .markdown-content th,
+  .markdown-content td {
+    border: 1px solid hsl(var(--border));
+    padding: 0.5rem 1rem;
+    text-align: left;
+    min-width: 100px;
+  }
+
+  .markdown-content th {
+    background-color: hsl(var(--muted));
+    font-weight: 600;
+  }
+
+  .markdown-content tr {
+    margin: 0;
+    border-top: 1px solid hsl(var(--border));
+    padding: 0;
+  }
+  .markdown-content tr:nth-child(even) {
+    background-color: hsl(var(--muted) / 0.5);
+  }
+
+  .markdown-content img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .markdown-content ul {
+    padding-left: 2em;
+    margin: 1em 0;
+    list-style-type: none;
+  }
+
+  .markdown-content ol {
+    padding-left: 2em;
+    margin: 1em 0;
+    list-style-type: decimal;
+  }
+
+  /* Prevent bullets on indented paragraphs */
+  .markdown-content p {
+    list-style-type: none;
+  }
+
+  .markdown-content blockquote {
+    border-left: 4px solid hsl(var(--border));
+    padding-left: 1rem;
+    margin-left: 0;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* Inline footnotes in parsed document viewer */
+  .markdown-content .fn-ref {
+    color: hsl(var(--primary));
+    font-weight: 600;
+    font-size: 0.7em;
+    vertical-align: super;
+    line-height: 1;
+    margin: 0 1px;
+  }
+
+  .markdown-content .fn-inline {
+    font-size: 0.8em;
+    color: hsl(var(--muted-foreground));
+    font-style: italic;
+    margin-left: 1px;
+  }
+
+  /* Hide any GFM-generated footnote sections (safety net) */
+  .markdown-content section[data-footnotes] {
+    display: none;
+  }
+
+  /* Highlighted search terms */
+  .markdown-content mark {
+    background-color: hsl(var(--yellow-bg));
+    color: hsl(var(--yellow-text));
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+    border-radius: 0.125rem;
+  }
+
+  .dark .markdown-content mark {
+    background-color: rgb(234 179 8 / 0.3);
+    color: rgb(254 240 138);
+  }
+}

package/src/components/grid.css

@@ -1,83 +1,43 @@
 /**
- * AG Grid Theme Overrides
- * Uses CSS custom properties to integrate with our theme system
- * This enables dark mode support and consistent theming
+ * AG Grid structural rules for @arbidocs/blocks GridView.
  *
- * AG Grid v34 CSS variable reference:
- * https://www.ag-grid.com/javascript-data-grid/theming-parameters/
+ * Colours, fonts, borders, header and selection tones are NOT here: they are the theme
+ * (`themeQuartz.withParams` in files/GridView.tsx), expressed with the host's CSS variables so
+ * light/dark follow the app. This sheet only holds what the theme API cannot express: cell
+ * helper classes (numeric / centered / multiline), the multi-line clamp, scrollbars and the
+ * always-reachable row kebabs.
  */
 
-@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 ALWAYS reachable (touch has no hover):
+   low emphasis at rest, full emphasis on the selected / focused row or while
+   its menu is open (the button's data-[state=open] class). No hover-only
+   reveal and no hover accent bar. */
+.doc-row-kebab {
+  opacity: 0.55;
 }
-
-/* 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 {
+.ag-row.ag-row-selected .doc-row-kebab,
+.ag-row.ag-row-focus .doc-row-kebab,
+.ag-row:focus-within .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));
+@media (pointer: coarse) {
+  .doc-row-kebab {
+    opacity: 0.8;
+  }
 }
 
-/* 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));
+/* AG's native selection checkbox is a 14px input on top of its wrapper: on touch the input
+   itself grows to a 44px target centred on the glyph (the wrapper keeps the visual size). */
+@media (pointer: coarse) {
+  .ag-checkbox-input-wrapper input[type='checkbox'] {
+    left: 50%;
+    top: 50%;
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: none !important;
+    height: 44px !important;
+    transform: translate(-50%, -50%);
+  }
 }
 
 /* Numeric columns (Pages, Size): right-align + tabular figures so digits line
@@ -172,16 +132,34 @@
   max-height: var(--multiline-max-h, calc(2 * 1.35em + 10px));
 }
 
-/* AG Grid structural customizations (not theme colors) */
-.ag-header-cell-text {
+/* Variant B header order: title, filter glyph, ONE sort glyph. The per-column filter funnel is
+   hidden at rest and revealed when the header is focused/tapped (touch focuses the cell) or while
+   that column has an active filter; filtering is also always reachable from the toolbar. */
+.ag-header-cell .ag-header-cell-text {
+  order: 1;
+  letter-spacing: 0;
+}
+
+.ag-header-cell .ag-sort-indicator-container {
+  order: 3;
+  margin-left: 6px;
+}
+
+.ag-header-cell .ag-header-icon {
   order: 2;
+  margin-left: 6px;
+  margin-right: 0;
+  margin-top: 0;
 }
 
-.ag-header-icon {
-  order: 1;
-  margin-right: 8px;
-  margin-left: 0;
-  margin-top: 4px;
+.ag-header-cell .ag-header-cell-filter-button {
+  display: none;
+}
+.ag-header-cell:focus-within .ag-header-cell-filter-button,
+.ag-header-cell.ag-header-active .ag-header-cell-filter-button,
+.ag-header-cell .ag-header-cell-filter-button.ag-filter-active,
+.ag-header-cell-filtered .ag-header-cell-filter-button {
+  display: inline-flex;
 }
 
 .ag-header-cell-label {
@@ -199,41 +177,16 @@
   flex-direction: row;
 }
 
-/* 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 */
+/* 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 affects cells the user can't edit. */
 .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

package/src/source.css

@@ -0,0 +1,20 @@
+/*
+ * @arbidocs/blocks/source.css: tells Tailwind v4 to scan the compiled output that carries the
+ * utilities the blocks render with. Tailwind does not scan node_modules on its own, so without
+ * this the utilities are never generated (`pointer-coarse:min-h-11`, `bg-accent`, and, from the
+ * react primitives the blocks are built on, `left-[50%]` on every Dialog). Import it after
+ * tailwindcss:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@arbidocs/blocks/source.css';
+ *
+ * Paths are relative to this file. Each layout the package can be installed in resolves one:
+ *   npm / pnpm hoisted  node_modules/@arbidocs/blocks/src/source.css -> ../dist, ../../react/dist
+ *   this monorepo       packages/arbi-blocks/src/source.css           -> ../dist, ../../arbi-react/dist
+ *   nested install      node_modules/@arbidocs/blocks/node_modules/@arbidocs/react/dist
+ * A path that does not exist in the current layout matches nothing and is ignored.
+ */
+@source "../dist";
+@source "../../react/dist";
+@source "../../arbi-react/dist";
+@source "../node_modules/@arbidocs/react/dist";

package/src/studio/studio.css

@@ -1,11 +1,11 @@
 /* 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";
+@import '@measured/puck/puck.css';
 
-/* Repaint Puck's default azure accent as the firm's own `--color-primary` so the
+/* Repaint Puck's default azure accent as the host's own `--color-primary` so the
  * editor chrome (buttons, selected outlines, focus rings) themes with whatever
- * firm consumes the builder — no hardcoded brand colour. The ramp is derived from
+ * host consumes the builder — no hardcoded brand colour. The ramp is derived from
  * `--color-primary` via `color-mix`, keeping Puck's dark→light 01→12 ordering so
  * contrast stays legible on any palette. */
 .al-studio {