npm - @arbidocs/blocks - Versions diffs - 0.3.119 → 0.3.121 - Mend

@arbidocs/blocks 0.3.119 → 0.3.121

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/chunk-AHWIZJ4M.cjs +1540 -0
package/dist/chunk-AHWIZJ4M.cjs.map +1 -0
package/dist/chunk-L6GG4KN2.js +1480 -0
package/dist/chunk-L6GG4KN2.js.map +1 -0
package/dist/index.cjs +693 -1567
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +129 -594
package/dist/index.d.ts +129 -594
package/dist/index.js +453 -1535
package/dist/index.js.map +1 -1
package/dist/record/index.cjs +178 -0
package/dist/record/index.cjs.map +1 -0
package/dist/record/index.d.cts +96 -0
package/dist/record/index.d.ts +96 -0
package/dist/record/index.js +176 -0
package/dist/record/index.js.map +1 -0
package/dist/site/index.cjs +216 -0
package/dist/site/index.cjs.map +1 -0
package/dist/site/index.d.cts +688 -0
package/dist/site/index.d.ts +688 -0
package/dist/site/index.js +3 -0
package/dist/site/index.js.map +1 -0
package/package.json +20 -3

package/dist/index.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
-import { UseBoundStore, StoreApi } from 'zustand';
+import { ThemeBundle, ThemeTokens, ThemeState } from './site/index.js';
+export { Accordion, AccordionItem, AccordionProps, ApplyThemeOptions, AvatarBlock, AvatarBlockProps, Banner, BannerProps, BannerTone, BlockImage, BlockImageProps, BlockLink, BlockLinkComponent, BlockLinkProps, CTABanner, CTABannerProps, Callout, CalloutProps, CalloutVariant, ColorToken, Columns, ColumnsProps, ContactField, ContactForm, ContactFormProps, Container, ContainerProps, FAQ, FAQProps, FONT_PAIRINGS, FaqItem, FeatureGrid, FeatureGridProps, FeatureItem, FontPairing, Footer, FooterColumn, FooterLink, FooterProps, Gallery, GalleryImage, GalleryProps, Hero, HeroCta, HeroProps, ListBlock, ListBlockProps, ListItem, LogoCloud, LogoCloudProps, LogoItem, MediaText, MediaTextProps, NavLink, Navbar, NavbarProps, PricingPlan, PricingTable, PricingTableProps, RichTextBlock, RichTextBlockProps, SectionHeading, Spacer, SpacerProps, StepItem, Steps, StepsProps, THEME_STYLE_ID, TabItem, Tabs, TabsProps, TeamGrid, TeamGridProps, TeamMember, Testimonial, TestimonialGrid, TestimonialGridProps, TestimonialItem, TestimonialProps, ThemeEditor, ThemeEditorProps, ThemeEmitMode, ThemeFonts, ThemePreset, ThemeStoreConfig, VideoAspect, VideoEmbed, VideoEmbedProps, applyFontVars, applyStoredTheme, applyThemeVars, clearFontVars, clearThemeVars, createThemeStore, daysUntil, fmtDate, fmtDateTime, fontPackages, fromNow, gbp, getFontPairing, hrs, initials, matchFontPairing, pct, tid, toEmbedUrl, toHslTriplet } from './site/index.js';
 import * as react from 'react';
-import react__default, { ReactNode } from 'react';
+import react__default, { ReactNode, ComponentType } from 'react';
 import * as _arbidocs_react from '@arbidocs/react';
 import { AiRunOptions, UserMenuItem, NotifyVariant, useArbi, AiTaskStatus } from '@arbidocs/react';
-export { AiRunOptions, AiTaskStatus, ArtifactEvent, SearchChunk, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
+export { AiRunOptions, AiTaskStatus, ArtifactEvent, DocumentCard, DocumentCardProps, SearchChunk, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
 import { ColDef, GridOptions, GridApi, CellValueChangedEvent, GridState } from 'ag-grid-community';
 import { LucideIcon } from 'lucide-react';
 import { CustomField, Field, ComponentConfig, Data, Config } from '@measured/puck';
+import { UseBoundStore, StoreApi } from 'zustand';
 /**
  * The reusable AI-native law-firm prompt library.
@@ -126,166 +128,6 @@ declare function createPromptLibrary(config: PromptConfig): {
     }];
 };
-/**
- * The theme-token model. Firm-agnostic: the token *catalog*, default values and
- * presets are supplied by the consuming app (via {@link createThemeStore}); this
- * module owns the shared types and the logic for writing tokens onto the live
- * document.
- *
- * There are two emit models, selected per-app by {@link ThemeEmitMode}:
- *
- * - `'flat'` (default): each colour key is written as an inline `--color-<key>`
- *   custom property on `<html>`, plus `--font-*` / `--radius`. Inline styles
- *   override the compiled `@theme` defaults, so an edit previews live across the
- *   whole app (and the @arbidocs AI kit) and reverts cleanly. Apps whose CSS sets
- *   `--color-*` HEX directly rely on this.
- *
- * - `'cssVars'`: each colour key is written as a raw
- *   HSL-triplet custom property (`--<key>: <h s l>`) into an injected
- *   `<style id="arbi-theme-vars">` appended to `<head>`. The monolith's source
- *   of truth is HSL triplets wrapped as `hsl(var(--x))`, with a real `.dark`
- *   variant; writing resolved hex inline would pin the colour and defeat both
- *   the indirection and the dark-class swap. The injected sheet is *unlayered*,
- *   so it wins over the monolith's `@layer base` `colors.css` at equal
- *   specificity, and a `:root { light } / :root.dark { dark }` structure keeps
- *   the dark cascade alive.
- */
-interface ColorToken {
-    /** Key without the `--color-` prefix, e.g. "primary" → `--color-primary`. */
-    key: string;
-    label: string;
-    /** Grouping id for the panel layout (e.g. "shadcn" | "brand" | "ai"). */
-    group: string;
-}
-interface ThemeFonts {
-    display: string;
-    sans: string;
-}
-interface ThemeTokens {
-    /** Colour values keyed by token key (hex). */
-    colors: Record<string, string>;
-    fonts: ThemeFonts;
-    /** Base radius in rem. */
-    radius: number;
-}
-interface ThemePreset {
-    id: string;
-    label: string;
-    tokens: ThemeTokens;
-}
-/** How a theme is written onto the document. See the module doc for the models. */
-type ThemeEmitMode = 'flat' | 'cssVars';
-interface ApplyThemeOptions {
-    /** Emit model. Defaults to `'flat'`. */
-    mode?: ThemeEmitMode;
-    /**
-     * `cssVars` mode only: dark-variant colour values keyed by token key. Emitted
-     * under `:root.dark`. When omitted, only `:root` is emitted — note that an
-     * overridden light token then also applies in dark (the injected `:root` is
-     * unlayered and beats the app's own `.dark` rules), so a firm with a dark mode
-     * MUST supply this for every editable token to keep dark mode intact.
-     */
-    dark?: Record<string, string>;
-    /** `flat` mode only: target element. Defaults to `document.documentElement`. */
-    root?: HTMLElement;
-}
-/** Id of the injected `<style>` that carries the `cssVars`-mode custom properties. */
-declare const THEME_STYLE_ID = "arbi-theme-vars";
-/**
- * Convert a colour to the monolith's `H S% L%` HSL-triplet format.
- *
- * Handles `#rgb` / `#rrggbb`, `rgb()` / `rgba()`, and passes an existing triplet
- * through untouched (so a firm can seed exact `colors.css` triplets for a
- * byte-identical no-op). Values it cannot parse — notably `oklch(...)`, which the
- * status tokens use — are returned unchanged so they remain usable as a raw
- * custom-property value; converting those cleanly is out of scope.
- */
-declare function toHslTriplet(color: string): string;
-/**
- * Write a theme onto the live document.
- *
- * In `flat` mode (default) writes inline `--color-<key>` / `--font-*` / `--radius`
- * on `document.documentElement` (or a supplied root). In `cssVars` mode writes
- * raw HSL-triplet vars into an injected `<style#arbi-theme-vars>` (see the module
- * doc). The legacy `applyThemeVars(theme, rootElement)` call form still works.
- */
-declare function applyThemeVars(theme: ThemeTokens, optionsOrRoot?: ApplyThemeOptions | HTMLElement): void;
-/**
- * Remove a theme's overrides, reverting to the stylesheet defaults.
- *
- * In `flat` mode removes the inline overrides for the theme's keys. In `cssVars`
- * mode removes the injected `<style#arbi-theme-vars>` in full (restoring the
- * app's own `colors.css` exactly).
- */
-declare function clearThemeVars(theme: ThemeTokens, optionsOrRoot?: ApplyThemeOptions | HTMLElement): void;
-/**
- * The shared theme store factory. A firm calls {@link createThemeStore} once
- * with its token catalog, default values and presets; the returned bundle (a
- * zustand hook + metadata) is the single source of truth consumed by every
- * theme surface (the back-office builder panel and the studio drawer), so the
- * token model, presets and apply logic live in exactly one place.
- */
-interface ThemeState extends ThemeTokens {
-    activePresetId: string | null;
-    setColor: (key: string, value: string) => void;
-    setFont: (which: keyof ThemeFonts, value: string) => void;
-    setRadius: (radius: number) => void;
-    applyPreset: (presetId: string) => void;
-    reset: () => void;
-    /** Snapshot of the editable tokens (for export / live apply). */
-    snapshot: () => ThemeTokens;
-}
-interface ThemeStoreConfig {
-    /** The editable token catalog (keys + labels + groups). */
-    tokens: ColorToken[];
-    /** Group id → heading, for the grouped panel layout. */
-    groupLabels: Record<string, string>;
-    /** Shipped defaults (the firm's brand values). */
-    defaultTheme: ThemeTokens;
-    /** Starting points the user can apply then fine-tune. */
-    presets: ThemePreset[];
-    /** localStorage key for persistence (namespaced per firm). */
-    storageKey: string;
-    /**
-     * How edits are written onto the document. Defaults to `'flat'` (inline
-     * `--color-*`). `'cssVars'` emits raw HSL-triplet vars into an injected
-     * `<style>` so an app's own `hsl(var(--x))` indirection + `.dark` variant
-     * survive. See {@link applyThemeVars}.
-     */
-    mode?: ThemeEmitMode;
-    /**
-     * `cssVars` mode only: the dark-variant colour values keyed by token key,
-     * emitted under `:root.dark`. Required (per editable token) for any firm with a
-     * dark mode, otherwise a light-token override leaks into dark.
-     */
-    darkColors?: Record<string, string>;
-}
-interface ThemeBundle extends ThemeStoreConfig {
-    useStore: UseBoundStore<StoreApi<ThemeState>>;
-}
-/** Build a firm-branded theme store bundle. */
-declare function createThemeStore(config: ThemeStoreConfig): ThemeBundle;
-/** Apply a bundle's current store to the live document, honouring its emit mode. */
-declare function applyStoredTheme(bundle: ThemeBundle): void;
-interface ThemeEditorProps {
-    /** The firm's theme store bundle (from createThemeStore). */
-    bundle: ThemeBundle;
-    variant?: 'panel' | 'drawer';
-    /** Firm identity shown in the panel's live-preview header. */
-    preview?: {
-        title: string;
-        subtitle?: string;
-    };
-    /** Optional persistence side-channel (e.g. save theme to ARBI); returns a "via" label. */
-    onSave?: () => Promise<string | void>;
-    /** Stable testid namespace, e.g. "builder-theme" | "studio-theme". */
-    testIdPrefix?: string;
-}
-declare function ThemeEditor({ bundle, variant, preview, onSave, testIdPrefix, }: ThemeEditorProps): react.JSX.Element;
 /**
  * Shared shapes for the ARBI adapter — identical in demo and live mode so UI
  * never needs to know which backend is serving it — plus the per-firm config a
@@ -358,7 +200,20 @@ interface ConnectionValue {
     /** One-click demo entry (no backend required). */
     enterDemo: () => void;
     logout: () => void;
-    setWorkspace: (id: string) => void;
+    /**
+     * Affirmatively select a workspace: opens it on the server (via the SDK),
+     * updates the app-wide state, and persists the choice so it survives future
+     * logins. This is the single entry point for "the user is now in workspace X".
+     */
+    setWorkspace: (id: string) => Promise<void>;
+    /**
+     * Re-assert the selected workspace on the server session (idempotent `/open`).
+     * Call before a workspace-scoped write when the session may have lost its open
+     * workspace (token re-login, backend restart, session expiry) — the server
+     * resolves the workspace from the session, so a dropped `/open` yields
+     * "No active workspace" until it's re-opened.
+     */
+    ensureWorkspaceOpen: () => Promise<void>;
 }
 declare function ConnectionProvider({ config, children, }: {
     config: FirmArbiConfig;
@@ -468,39 +323,6 @@ declare function useSemanticSearch(): {
     isRunning: boolean;
 };
-/**
- * Compose a stable, kebab-case data-testid from parts.
- * Convention: {area}-{element}[-{qualifier}...]
- *   tid("matters", "row", "CLM-2026-0042") -> "matters-row-clm-2026-0042"
- * Keeps Playwright selectors predictable across a firm app.
- */
-declare function tid(...parts: Array<string | number | undefined | false>): string;
-/**
- * Firm-app formatting helpers — currency, initials, dates, durations and
- * percentages. UK-oriented defaults (en-GB / GBP / "d MMM yyyy") suit an English
- * law firm; nothing here is firm-branded, so every firm app shares them.
- *
- * Dependency-free on purpose (uses the platform `Intl` APIs) so the package
- * stays light and needs no date library.
- */
-/** Format a number as GBP, e.g. £1,240,000 or £12.4k depending on `compact`. */
-declare function gbp(value: number, compact?: boolean): string;
-/** Initials from a person's name, e.g. "Amara N. Okafor" -> "AO". */
-declare function initials(name: string): string;
-/** "12 Mar 2026" */
-declare function fmtDate(iso: string): string;
-/** "12 Mar 2026, 14:30" */
-declare function fmtDateTime(iso: string): string;
-/** "3 days ago" / "in 2 hours" — largest whole unit, like date-fns strict. */
-declare function fromNow(iso: string, from?: Date): string;
-/** Signed day count to a date from a reference day. Negative = overdue. */
-declare function daysUntil(iso: string, from?: Date): number;
-/** Compact hours, e.g. 12.5h */
-declare function hrs(n: number): string;
-/** Percentage with no decimals, e.g. 82% */
-declare function pct(n: number): string;
 interface Column<T> {
     key: string;
     header: ReactNode;
@@ -616,6 +438,39 @@ declare function EmptyState({ icon: Icon, title, description, action, className,
     testId?: string;
 }): react.JSX.Element;
+interface UploadDropzoneProps {
+    /** Called with the chosen/dropped files. */
+    onFiles: (files: File[]) => void;
+    /** `accept` attribute for the file picker (e.g. `.pdf,.docx`). */
+    accept?: string;
+    /** Allow selecting more than one file. Defaults to true. */
+    multiple?: boolean;
+    /** Disables picking/dropping (e.g. no active workspace yet). */
+    disabled?: boolean;
+    /** Shows a spinner + busy copy while an upload is in flight. */
+    uploading?: boolean;
+    /** Primary line, e.g. "Drag files here". */
+    title?: string;
+    /** Secondary line under the title. */
+    description?: string;
+    /** Small muted hint, e.g. "PDF, DOCX, images — up to 50MB". */
+    hint?: string;
+    /** Copy shown next to the spinner while uploading. */
+    uploadingLabel?: string;
+    /** Glyph in the tile. Defaults to an upload-cloud icon. */
+    icon?: LucideIcon;
+    testId?: string;
+    className?: string;
+}
+/**
+ * A themeable drag-and-drop upload target. Source-agnostic: it just surfaces
+ * chosen files via `onFiles` — the host owns the actual upload. Handles its own
+ * drag-over state, click-to-browse, and a busy state, styled with the kit's
+ * SEMANTIC tokens only (border, muted, primary, foreground) so it renders in
+ * each firm's colours.
+ */
+declare function UploadDropzone({ onFiles, accept, multiple, disabled, uploading, title, description, hint, uploadingLabel, icon: Icon, testId, className, }: UploadDropzoneProps): react.JSX.Element;
 /** Standard back-office page title block: eyebrow + title + description + actions. */
 declare function PageHeader({ title, eyebrow, description, actions, className, testId, }: {
     title: string;
@@ -626,18 +481,6 @@ declare function PageHeader({ title, eyebrow, description, actions, className, t
     testId?: string;
 }): react.JSX.Element;
-/** Editorial heading block for marketing sections: eyebrow + title + lead. */
-declare function SectionHeading({ eyebrow, title, lead, align, className, invert, eyebrowClassName, }: {
-    eyebrow?: string;
-    title: string;
-    lead?: string;
-    align?: 'left' | 'center';
-    className?: string;
-    invert?: boolean;
-    /** Override the eyebrow styling (e.g. a firm brand accent). Default: token classes. */
-    eyebrowClassName?: string;
-}): react.JSX.Element;
 /** Search + filter bar used above every list view. */
 declare function Toolbar({ search, onSearch, searchPlaceholder, filters, actions, className, testId, }: {
     search?: string;
@@ -670,70 +513,53 @@ interface MetricCardProps {
 /** The one true KPI tile. Used across every dashboard and module header. */
 declare function MetricCard({ label, value, icon: Icon, hint, delta, accent, testId, }: MetricCardProps): react.JSX.Element;
-type BlockImageAspect = '16:9' | '4:3' | '1:1' | '21:9' | '4:5';
-type BlockImageRounded = 'none' | 'md' | 'lg' | 'full';
-interface BlockImageProps {
-    src?: string;
-    alt?: string;
-    aspect?: BlockImageAspect;
-    rounded?: BlockImageRounded;
-    /** Editorial "photo frame" treatment: a matte border ring + soft shadow. */
-    framed?: boolean;
-    className?: string;
-    testId?: string;
-}
-/**
- * Image with a graceful, self-contained fallback: when `src` is empty it renders a
- * token-clean gradient placeholder (no network needed) so the palette always looks
- * good in the editor and in demos. Token-only classes so it themes per firm.
- */
-declare function BlockImage({ src, alt, aspect, rounded, framed, className, testId, }: BlockImageProps): react.JSX.Element;
-type HeroTone = 'default' | 'muted' | 'ink';
-type HeroAlign = 'left' | 'center';
-interface HeroCta {
-    label?: string;
-    href?: string;
-}
-interface HeroProps {
-    eyebrow?: string;
-    title: string;
-    /** A word/phrase within the title to accent (rendered in the primary colour). */
-    emphasis?: string;
-    subtitle?: string;
-    primaryCta?: HeroCta;
-    secondaryCta?: HeroCta;
-    align?: HeroAlign;
-    tone?: HeroTone;
-    /** Side visual (ignored when `backgroundImage` is set). */
-    imageUrl?: string;
-    /** Full-bleed background image URL/data-URI. Turns the hero into a cover band. */
-    backgroundImage?: string;
-    /** Darkening scrim over the background image, for legible copy. Default true. */
-    overlay?: boolean;
-    /** Override the eyebrow styling (e.g. a firm brand accent). Default: token classes. */
-    eyebrowClassName?: string;
-    testId?: string;
+/** One member shown in the avatar stack — source-agnostic, not the raw SDK shape. */
+interface WorkspaceCardMember {
+    name: string;
+    picture?: string | null;
 }
-/** Editorial marketing hero: eyebrow, headline, subtitle, two CTAs and a visual. */
-declare function Hero({ eyebrow, title, emphasis, subtitle, primaryCta, secondaryCta, align, tone, imageUrl, backgroundImage, overlay, eyebrowClassName, testId, }: HeroProps): react.JSX.Element;
-interface FeatureItem {
-    icon?: LucideIcon;
-    title: string;
+interface WorkspaceCardProps {
+    name: string;
+    /** Uppercase eyebrow above the description, e.g. the matter/project name. */
+    matterRef?: string;
     description?: string;
-}
-interface FeatureGridProps {
-    columns?: '2' | '3';
-    items: FeatureItem[];
+    docCount: number;
+    /** Defaults to `members.length` when omitted. */
+    memberCount?: number;
+    /** Drives the overlapping avatar stack (shows up to 4, then a `+N` overflow). */
+    members?: WorkspaceCardMember[];
+    /** ISO timestamp — renders "Updated {relative} ago" when present. */
+    updatedAt?: string;
+    /** Marks this as the current workspace: a done-badge + disabled footer button. */
+    active?: boolean;
+    /** Shows a spinner in the footer button while a switch is in flight. */
+    busy?: boolean;
+    onOpen?: () => void;
+    /** Icon in the header tile. Defaults to a lock/folder glyph. */
+    icon?: LucideIcon;
+    /** Stable id for the card root; the footer button gets `${testId}-open`. */
     testId?: string;
+    /** Overrides the footer button's test id when a caller needs a specific one. */
+    buttonTestId?: string;
+    className?: string;
 }
-/** Responsive grid of icon + title + description feature cards. */
-declare function FeatureGrid({ columns, items, testId }: FeatureGridProps): react.JSX.Element;
+/**
+ * The one true workspace card. A themeable, source-agnostic tile — icon,
+ * Active/Encrypted badge, title + uppercase matter eyebrow, a two-line
+ * description, a doc/member stat row, an overlapping member avatar stack, an
+ * "Updated … ago" line and a full-width Open / Current-workspace footer button.
+ *
+ * Styled with the kit's SEMANTIC tokens only (foreground, muted-foreground,
+ * primary, card, border, accent), so every firm gets it in its own colours
+ * without any firm-branded classes leaking in.
+ */
+declare function WorkspaceCard({ name, matterRef, description, docCount, memberCount, members, updatedAt, active, busy, onOpen, icon: Icon, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
 interface StatItem {
     value: string;
     label: string;
+    /** Optional caption under the label (e.g. a qualifier or unit). */
+    sub?: string;
 }
 interface StatGroupProps {
     items: StatItem[];
@@ -742,330 +568,6 @@ interface StatGroupProps {
 /** Big-number stat group — headline metrics with captions. */
 declare function StatGroup({ items, testId }: StatGroupProps): react.JSX.Element;
-interface TestimonialProps {
-    quote: string;
-    author?: string;
-    role?: string;
-    avatarUrl?: string;
-    testId?: string;
-}
-/** A single pull-quote testimonial with an author and optional avatar. */
-declare function Testimonial({ quote, author, role, avatarUrl, testId }: TestimonialProps): react.JSX.Element;
-type CTABannerTone = 'default' | 'muted' | 'ink';
-interface CTABannerProps {
-    title: string;
-    subtitle?: string;
-    cta?: {
-        label?: string;
-        href?: string;
-    };
-    tone?: CTABannerTone;
-    /** Full-bleed background image URL/data-URI. Overrides the tone surface. */
-    backgroundImage?: string;
-    /** Darkening scrim over the background image. Default true. */
-    overlay?: boolean;
-    testId?: string;
-}
-/** Full-width call-to-action banner. */
-declare function CTABanner({ title, subtitle, cta, tone, backgroundImage, overlay, testId, }: CTABannerProps): react.JSX.Element;
-interface LogoItem {
-    label: string;
-}
-interface LogoCloudProps {
-    items: LogoItem[];
-    testId?: string;
-}
-/**
- * Text-based "logo" wall — brand names rendered as muted pill marks. Self-contained
- * (no external images) so the palette looks complete offline.
- */
-declare function LogoCloud({ items, testId }: LogoCloudProps): react.JSX.Element;
-interface FaqItem {
-    question: string;
-    answer?: string;
-}
-interface FAQProps {
-    items: FaqItem[];
-    testId?: string;
-}
-/**
- * Accessible disclosure list. Built on native `<details>`/`<summary>` so it works
- * without client state (correct in the Puck preview and static renders) and stays
- * keyboard-accessible. Token-only styling.
- */
-declare function FAQ({ items, testId }: FAQProps): react.JSX.Element;
-interface RichTextBlockProps {
-    content: string;
-    testId?: string;
-}
-/**
- * Prose block. Reuses the shared markdown renderer (`AiMarkdown`) so long-form copy
- * gets the one house style for headings, lists, tables and emphasis — token-clean
- * and themeable per firm.
- */
-declare function RichTextBlock({ content, testId }: RichTextBlockProps): react.JSX.Element;
-type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
-interface CalloutProps {
-    variant?: CalloutVariant;
-    title?: string;
-    body?: string;
-    testId?: string;
-}
-/** Inline notice box in one of four semantic tones. */
-declare function Callout({ variant, title, body, testId }: CalloutProps): react.JSX.Element;
-type AvatarBlockSize = 'sm' | 'md' | 'lg' | 'xl';
-interface AvatarBlockProps {
-    src?: string;
-    name?: string;
-    size?: AvatarBlockSize;
-    testId?: string;
-}
-/** Avatar with an initials fallback when no image is supplied. */
-declare function AvatarBlock({ src, name, size, testId }: AvatarBlockProps): react.JSX.Element;
-interface NavLink {
-    label: string;
-    href?: string;
-}
-interface NavbarProps {
-    brand: string;
-    links: NavLink[];
-    cta?: {
-        label?: string;
-        href?: string;
-    };
-    testId?: string;
-}
-/** Marketing top navigation: brand, inline links and an optional CTA button. */
-declare function Navbar({ brand, links, cta, testId }: NavbarProps): react.JSX.Element;
-interface FooterLink {
-    label: string;
-    href?: string;
-}
-interface FooterColumn {
-    heading: string;
-    links: FooterLink[];
-}
-interface FooterProps {
-    columns: FooterColumn[];
-    copyright?: string;
-    testId?: string;
-}
-/** Site footer: a row of link columns plus a copyright line. */
-declare function Footer({ columns, copyright, testId }: FooterProps): react.JSX.Element;
-interface ListItem {
-    text: string;
-}
-interface ListBlockProps {
-    ordered?: boolean;
-    items: ListItem[];
-    testId?: string;
-}
-/** Ordered or unordered prose list. Token-clean. */
-declare function ListBlock({ ordered, items, testId }: ListBlockProps): react.JSX.Element;
-type ColumnsCount = 2 | 3 | 4;
-type ColumnsGap = 'sm' | 'md' | 'lg';
-interface ColumnsProps {
-    count?: ColumnsCount;
-    gap?: ColumnsGap;
-    columns: ReactNode[];
-    testId?: string;
-}
-/** Responsive N-column row. Each column hosts a nested Puck slot. */
-declare function Columns({ count, gap, columns, testId }: ColumnsProps): react.JSX.Element;
-type SpacerSize = 'sm' | 'md' | 'lg' | 'xl';
-interface SpacerProps {
-    size?: SpacerSize;
-    testId?: string;
-}
-/** Vertical whitespace. */
-declare function Spacer({ size, testId }: SpacerProps): react.JSX.Element;
-type ContainerWidth = 'narrow' | 'default' | 'wide' | 'full';
-type ContainerPadding = 'none' | 'sm' | 'md' | 'lg';
-interface ContainerProps {
-    width?: ContainerWidth;
-    padding?: ContainerPadding;
-    children: ReactNode;
-    testId?: string;
-}
-/** Max-width wrapper that centres and pads a nested Puck slot. */
-declare function Container({ width, padding, children, testId }: ContainerProps): react.JSX.Element;
-interface PricingPlan {
-    name: string;
-    price: string;
-    period?: string;
-    description?: string;
-    features?: string[];
-    cta?: {
-        label?: string;
-        href?: string;
-    };
-    /** Highlight this plan as the recommended one. */
-    featured?: boolean;
-}
-interface PricingTableProps {
-    plans: PricingPlan[];
-    testId?: string;
-}
-/** A row of pricing plan cards with feature lists and a CTA per plan. */
-declare function PricingTable({ plans, testId }: PricingTableProps): react.JSX.Element;
-interface TabItem {
-    label: string;
-    content: string;
-}
-interface TabsProps {
-    items: TabItem[];
-    testId?: string;
-}
-/** A simple tabbed panel: a row of tab buttons over the active tab's content. */
-declare function Tabs({ items, testId }: TabsProps): react.JSX.Element;
-interface AccordionItem {
-    title: string;
-    content: string;
-}
-interface AccordionProps {
-    items: AccordionItem[];
-    /** Allow multiple panels open at once. Default false (single-open). */
-    allowMultiple?: boolean;
-    testId?: string;
-}
-/** A stack of collapsible title/content panels. */
-declare function Accordion({ items, allowMultiple, testId }: AccordionProps): react.JSX.Element;
-interface GalleryImage {
-    src?: string;
-    alt?: string;
-    caption?: string;
-}
-interface GalleryProps {
-    images: GalleryImage[];
-    columns?: '2' | '3' | '4';
-    aspect?: BlockImageProps['aspect'];
-    rounded?: BlockImageProps['rounded'];
-    testId?: string;
-}
-/** A responsive image grid. Each tile previews via BlockImage with a caption. */
-declare function Gallery({ images, columns, aspect, rounded, testId, }: GalleryProps): react.JSX.Element;
-type VideoAspect = '16:9' | '4:3' | '1:1';
-interface VideoEmbedProps {
-    /** A YouTube / Vimeo / Loom page URL, or a direct video file URL. */
-    url: string;
-    title?: string;
-    aspect?: VideoAspect;
-    rounded?: boolean;
-    testId?: string;
-}
-/**
- * Resolve a shareable video URL to an embeddable iframe src. Supports YouTube,
- * Vimeo and Loom; returns null for anything else (rendered as a `<video>`).
- */
-declare function toEmbedUrl(url: string): string | null;
-/** Embed a video from a YouTube/Vimeo/Loom link or a direct file, in a set aspect. */
-declare function VideoEmbed({ url, title, aspect, rounded, testId, }: VideoEmbedProps): react.JSX.Element;
-interface ContactField {
-    name: string;
-    label: string;
-    type?: 'text' | 'email' | 'tel' | 'textarea';
-    required?: boolean;
-}
-interface ContactFormProps {
-    fields: ContactField[];
-    submitLabel?: string;
-    /** Optional POST endpoint. When set, the form submits natively to it. */
-    action?: string;
-    /** Message shown after a client-side (no-action) submit. */
-    successMessage?: string;
-    testId?: string;
-}
-/** A configurable lead/contact form. Posts to `action`, or confirms client-side. */
-declare function ContactForm({ fields, submitLabel, action, successMessage, testId, }: ContactFormProps): react.JSX.Element;
-type BannerTone = 'primary' | 'muted' | 'ink';
-interface BannerProps {
-    text: string;
-    cta?: {
-        label?: string;
-        href?: string;
-    };
-    tone?: BannerTone;
-    testId?: string;
-}
-/** A slim full-width announcement strip with optional inline CTA. */
-declare function Banner({ text, cta, tone, testId }: BannerProps): react.JSX.Element;
-interface MediaTextProps {
-    eyebrow?: string;
-    title: string;
-    body?: string;
-    imageUrl?: string;
-    /** Which side the media sits on (desktop). */
-    mediaSide?: 'left' | 'right';
-    cta?: {
-        label?: string;
-        href?: string;
-    };
-    testId?: string;
-}
-/** A split media-and-copy row: an image on one side, prose + CTA on the other. */
-declare function MediaText({ eyebrow, title, body, imageUrl, mediaSide, cta, testId, }: MediaTextProps): react.JSX.Element;
-interface TeamMember {
-    name: string;
-    role?: string;
-    bio?: string;
-    avatarUrl?: string;
-}
-interface TeamGridProps {
-    members: TeamMember[];
-    columns?: '2' | '3' | '4';
-    testId?: string;
-}
-/** A grid of people cards: avatar, name, role and an optional short bio. */
-declare function TeamGrid({ members, columns, testId }: TeamGridProps): react.JSX.Element;
-interface StepItem {
-    title: string;
-    description?: string;
-}
-interface StepsProps {
-    steps: StepItem[];
-    /** `timeline` draws a connected vertical rail; `numbered` is a horizontal grid. */
-    variant?: 'numbered' | 'timeline';
-    testId?: string;
-}
-/** A process / how-it-works sequence, as numbered cards or a vertical timeline. */
-declare function Steps({ steps, variant, testId }: StepsProps): react.JSX.Element;
-interface TestimonialItem {
-    quote: string;
-    author?: string;
-    role?: string;
-    avatarUrl?: string;
-}
-interface TestimonialGridProps {
-    items: TestimonialItem[];
-    columns?: '2' | '3';
-    testId?: string;
-}
-/** A grid of multiple pull-quote testimonials. */
-declare function TestimonialGrid({ items, columns, testId }: TestimonialGridProps): react.JSX.Element;
 /**
  * Navigation shapes shared by firm app shells. The concrete nav manifest (which
  * modules, in what order) is per-firm data the app supplies; these interfaces
@@ -1422,10 +924,13 @@ interface UseImageGen {
     /** True while a generation is in flight. */
     isGenerating: boolean;
     /**
-     * Generate an image from a prompt. Resolves with the new image document's
-     * ext_id, or null when the prompt is empty or no image was produced.
+     * Generate an image from a prompt, optionally editing / drawing on one or
+     * more reference images already in the workspace. Pass the reference images'
+     * document ext_ids in `referenceDocIds` (omit or `[]` for plain text→image).
+     * Resolves with the new image document's ext_id, or null when the prompt is
+     * empty or no image was produced.
      */
-    generate: (prompt: string) => Promise<string | null>;
+    generate: (prompt: string, referenceDocIds?: string[]) => Promise<string | null>;
     /** Clear the current result and error. */
     reset: () => void;
 }
@@ -1437,9 +942,23 @@ declare const ASSET_REF_PREFIX = "asset:";
 declare function asAssetRef(docId: string): string;
 /** The workspace document ext_id behind an asset ref (`asset:doc-1` → `doc-1`). */
 declare function assetRefId(src: string): string;
-declare function AssetResolverProvider({ children }: {
+/** What a resolver component receives. `AssetThumb` in `./assetImage` implements it. */
+interface AssetRenderProps {
+    docId: string;
+    alt?: string;
+    className?: string;
+    testId?: string;
+}
+/** Renders a workspace asset ext_id as an image. */
+type AssetRenderer = ComponentType<AssetRenderProps>;
+declare function AssetResolverProvider({ render, children, }: {
+    /** Typically `AssetThumb` from `./assetImage`. */
+    render: AssetRenderer;
     children: ReactNode;
 }): react.JSX.Element;
+/** The active resolver, or `null` when asset refs must render verbatim. */
+declare function useAssetRenderer(): AssetRenderer | null;
+/** True only where a bare asset ext_id can be resolved (the authenticated Studio). */
 declare function useAssetResolverActive(): boolean;
 /**
  * Is `src` a workspace asset ref (`asset:<docId>`) rather than an already-
@@ -1447,6 +966,22 @@ declare function useAssetResolverActive(): boolean;
  */
 declare function isAssetRef(src: string | undefined): src is string;
+/**
+ * Resolve an asset ext_id to a displayable image src.
+ *
+ * Prefer the cheap thumbnail endpoint, but fall back to downloading the actual
+ * bytes as an object URL when there's no thumbnail — AI-generated (and freshly
+ * uploaded) images have no thumbnail yet, so the thumbnail-only path renders a
+ * broken `<img>`. The bytes always exist (it's a stored document), so the editor
+ * shows the real image immediately instead of waiting on async thumbnailing.
+ */
+declare function useAssetImage(docId: string): string | undefined;
+/**
+ * Resolve a single asset ext_id and render it as an `<img>`. This is the
+ * `AssetRenderer` the Studio injects; it satisfies `AssetRenderProps`.
+ */
+declare function AssetThumb({ docId, alt, className, testId }: AssetRenderProps): react.JSX.Element;
 type SectionTone = 'default' | 'muted' | 'ink';
 type SectionPadding = 'none' | 'sm' | 'md' | 'lg';
 type SectionWidth = 'narrow' | 'default' | 'wide' | 'full';
@@ -1690,4 +1225,4 @@ interface AgentsPanelProps {
 }
 declare function AgentsPanel({ store, testIdPrefix }: AgentsPanelProps): react.JSX.Element;
-export { ASSET_REF_PREFIX, Accordion, type AccordionItem, type AccordionProps, type AgentSelectionStore, AgentsPanel, type AgentsPanelProps, type AiFields, type AiFieldsConfig, AppHeader, type AppHeaderProps, type AppHeaderUser, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, type ApplyThemeOptions, type ArbiBlocksConfigOptions, type ArbiMode, type ArbiUser, type AssetMaterializer, AssetResolverProvider, type AssistantCitation, type AssistantMessage, type AssistantStep, AvatarBlock, type AvatarBlockProps, Banner, type BannerProps, type BannerTone, BlockImage, type BlockImageProps, type BlockKit, type BuildPrompt, type BuilderModule, CTABanner, type CTABannerProps, Callout, type CalloutProps, type CalloutVariant, type ColorToken, type Column, Columns, type ColumnsProps, ConnectionProvider, type ConnectionStatus, type ContactField, ContactForm, type ContactFormProps, Container, type ContainerProps, DataTable, DataTableBlock, type DataTableBlockColumn, type DataTableBlockProps, EmptyState, type ExportedModule, FAQ, type FAQProps, type FaqItem, FeatureGrid, type FeatureGridProps, type FeatureItem, type FirmArbiConfig, Footer, type FooterColumn, type FooterLink, type FooterProps, Gallery, type GalleryImage, type GalleryProps, GridView, type GridViewEmptyState, type GridViewProps, type GridViewSelection, Hero, type HeroCta, type HeroProps, type ImageFieldConfig, type ImageFieldFactory, LegalArbiProvider, ListBlock, type ListBlockProps, type ListItem, LiveDataProvider, type LoadResult, LogoCloud, type LogoCloudProps, type LogoItem, type MaterializeOptions, type MatterContext, MediaText, type MediaTextProps, MetricCard, type MetricCardProps, ModuleManager, type ModuleManagerProps, type ModuleRegistry, type ModuleStoreBundle, type NavLink, Navbar, type NavbarProps, PageHeader, PageRenderer, type PageRendererProps, type PersistVia, type PricingPlan, PricingTable, type PricingTableProps, type PromptConfig, type PromptLibrary, type Prompts, type ResolvedModule, RichTextBlock, type RichTextBlockProps, Section, SectionHeading, type SectionProps, Spacer, type SpacerProps, StatGroup, type StatGroupProps, type StatItem, type StepItem, Steps, type StepsProps, StudioEditor, type StudioEditorProps, type StudioPageMeta, type StudioPersistence, type StudioPersistenceConfig, THEME_STYLE_ID, type TabItem, Tabs, type TabsProps, TeamGrid, type TeamGridProps, type TeamMember, Testimonial, TestimonialGrid, type TestimonialGridProps, type TestimonialItem, type TestimonialProps, type ThemeBundle, ThemeEditor, type ThemeEditorProps, type ThemeEmitMode, type ThemeFonts, type ThemePreset, type ThemeState, type ThemeStoreConfig, type ThemeTokens, Toolbar, type UseImageGen, VerticalBuilder, type VerticalBuilderProps, type VerticalConfig, type VerticalExport, type VerticalExportConfig, type VideoAspect, VideoEmbed, type VideoEmbedProps, WidgetPlaceholder, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAssetRef, isAuthenticated, materializePageData, matterToContext, pct, tid, toEmbedUrl, toHslTriplet, useAssetResolverActive, useConnection, useFirmAiTask, useImageGen, useLiveDataActive, useSemanticSearch, useWorkspaceDocs };
+export { ASSET_REF_PREFIX, type AgentSelectionStore, AgentsPanel, type AgentsPanelProps, type AiFields, type AiFieldsConfig, AppHeader, type AppHeaderProps, type AppHeaderUser, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, type ArbiBlocksConfigOptions, type ArbiMode, type ArbiUser, type AssetMaterializer, type AssetRenderProps, type AssetRenderer, AssetResolverProvider, AssetThumb, type AssistantCitation, type AssistantMessage, type AssistantStep, type BlockKit, type BuildPrompt, type BuilderModule, type Column, ConnectionProvider, type ConnectionStatus, DataTable, DataTableBlock, type DataTableBlockColumn, type DataTableBlockProps, EmptyState, type ExportedModule, type FirmArbiConfig, GridView, type GridViewEmptyState, type GridViewProps, type GridViewSelection, type ImageFieldConfig, type ImageFieldFactory, LegalArbiProvider, LiveDataProvider, type LoadResult, type MaterializeOptions, type MatterContext, MetricCard, type MetricCardProps, ModuleManager, type ModuleManagerProps, type ModuleRegistry, type ModuleStoreBundle, PageHeader, PageRenderer, type PageRendererProps, type PersistVia, type PromptConfig, type PromptLibrary, type Prompts, type ResolvedModule, Section, type SectionProps, StatGroup, type StatGroupProps, type StatItem, StudioEditor, type StudioEditorProps, type StudioPageMeta, type StudioPersistence, type StudioPersistenceConfig, ThemeBundle, ThemeState, ThemeTokens, Toolbar, UploadDropzone, type UploadDropzoneProps, type UseImageGen, VerticalBuilder, type VerticalBuilderProps, type VerticalConfig, type VerticalExport, type VerticalExportConfig, WidgetPlaceholder, WorkspaceCard, type WorkspaceCardMember, type WorkspaceCardProps, asAssetRef, assetRefId, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createVerticalExport, createWebsiteBlocks, iconMap, isAssetRef, isAuthenticated, materializePageData, matterToContext, useAssetImage, useAssetRenderer, useAssetResolverActive, useConnection, useFirmAiTask, useImageGen, useLiveDataActive, useSemanticSearch, useWorkspaceDocs };