@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/settings/SyncDialogParts.d.ts

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+/** Every fixed string of the sync dialog footer. */
+export interface SyncDialogFooterLabels {
+    cancel: string;
+    save: string;
+}
+export declare const DEFAULT_SYNC_DIALOG_FOOTER_LABELS: SyncDialogFooterLabels;
+export interface SyncDialogFooterProps {
+    onCancel: () => void;
+    onSave: () => void;
+    saveDisabled?: boolean;
+    isSaving?: boolean;
+    cancelButton?: {
+        testId?: string;
+    };
+    saveButton?: {
+        testId?: string;
+    };
+    labels?: Partial<SyncDialogFooterLabels>;
+}
+/** Cancel / Save pair of a connector sync dialog; Save shows a spinner while saving. */
+export declare function SyncDialogFooter({ onCancel, onSave, saveDisabled, isSaving, cancelButton, saveButton, labels, }: SyncDialogFooterProps): import("react").JSX.Element;
+/** Body of a sync dialog: the fields, spaced. */
+export declare function SyncDialogBody({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SyncFieldProps {
+    label?: ReactNode;
+    htmlFor?: string;
+    /** Right-aligned controls on the label row (e.g. expand all / collapse all). */
+    actions?: ReactNode;
+    /** Muted explanation under the control. */
+    hint?: ReactNode;
+    children: ReactNode;
+}
+/** A labelled field of a sync dialog. */
+export declare function SyncField({ label, htmlFor, actions, hint, children }: SyncFieldProps): import("react").JSX.Element;
+/** Small link-styled button (expand all, select all ...). */
+export declare function SyncLinkButton({ onClick, testId, children, }: {
+    onClick: () => void;
+    testId?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Row of {@link SyncLinkButton}s. */
+export declare function SyncLinkRow({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SyncSelectOption {
+    value: string;
+    label: ReactNode;
+}
+export interface SyncSelectProps {
+    id?: string;
+    testId?: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    options: SyncSelectOption[];
+    placeholder?: string;
+}
+/** Select of a sync dialog (workspace, backfill window ...). */
+export declare function SyncSelect({ id, testId, value, onValueChange, options, placeholder, }: SyncSelectProps): import("react").JSX.Element;
+export interface SyncOptionToggleProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    testId?: string;
+}
+/** A checkbox option with a title and a muted explanation. */
+export declare function SyncOptionToggle({ checked, onCheckedChange, title, description, testId, }: SyncOptionToggleProps): import("react").JSX.Element;
+/** The import options of a dialog, spaced. */
+export declare function SyncOptions({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Inline spinner + message while a list loads. */
+export declare function SyncLoading({ children, compact }: {
+    children: ReactNode;
+    compact?: boolean;
+}): import("react").JSX.Element;
+/** Muted one-liner (nothing found ...). */
+export declare function SyncNote({ children, testId }: {
+    children: ReactNode;
+    testId?: string;
+}): import("react").JSX.Element;
+/** Muted small paragraph (the reconnect hint of calendars). */
+export declare function SyncSmallNote({ children, testId }: {
+    children: ReactNode;
+    testId?: string;
+}): import("react").JSX.Element;
+export interface SyncReconnectNoticeProps {
+    message: ReactNode;
+    onReconnect: () => void;
+    isPending?: boolean;
+    testId?: string;
+    label?: string;
+}
+/** A load failure the user fixes by re-authorizing the account. */
+export declare function SyncReconnectNotice({ message, onReconnect, isPending, testId, label, }: SyncReconnectNoticeProps): import("react").JSX.Element;
+/** Scrolling frame of a folder tree. */
+export declare function SyncTreeFrame({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SyncCheckListItem {
+    id: string;
+    label: string;
+    testId?: string;
+}
+export interface SyncCheckListProps {
+    items: SyncCheckListItem[];
+    selected: string[];
+    onToggle: (id: string) => void;
+}
+/** Flat, scrolling list of checkable items (a calendar has no folder tree). */
+export declare function SyncCheckList({ items, selected, onToggle }: SyncCheckListProps): import("react").JSX.Element;
+/** Every fixed string of a lazy folder row. */
+export interface SyncFolderRowLabels {
+    collapse: string;
+    expand: string;
+    loading: string;
+    noSubfolders: string;
+}
+export declare const DEFAULT_SYNC_FOLDER_ROW_LABELS: SyncFolderRowLabels;
+export interface SyncFolderRowProps {
+    id: string;
+    name: string;
+    depth: number;
+    /** Show the expand caret (false when nothing importable is beneath). */
+    hasChildren: boolean;
+    isExpanded: boolean;
+    onToggleExpanded: () => void;
+    /** Grouping nodes (SharePoint sites) are shown but cannot be selected. */
+    isSelectable: boolean;
+    checked: boolean;
+    /** An ancestor is selected: this folder is implicitly included. */
+    disabled: boolean;
+    onCheckedChange: () => void;
+    /** Importable files beneath; undefined while unknown. */
+    count?: number;
+    isCountLoading?: boolean;
+    /** Nested rows (the host renders them, lazily). */
+    children?: ReactNode;
+    labels?: Partial<SyncFolderRowLabels>;
+}
+/**
+ * One row of the lazy drive folder tree: caret, selection checkbox, name and file count. The
+ * host fetches the children when expanded and renders them as `children` (or a status line).
+ */
+export declare function SyncFolderRow({ id, name, depth, hasChildren, isExpanded, onToggleExpanded, isSelectable, checked, disabled, onCheckedChange, count, isCountLoading, children, labels, }: SyncFolderRowProps): import("react").JSX.Element;
+/** Status line under an expanded folder (loading / no subfolders), indented to its children. */
+export declare function SyncFolderStatus({ depth, kind, labels, }: {
+    /** Depth of the folder the status belongs to. */
+    depth: number;
+    kind: 'loading' | 'empty';
+    labels?: Partial<SyncFolderRowLabels>;
+}): import("react").JSX.Element;

package/dist/settings/ThreadPreviewDialog.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface ThreadPreviewCrumb {
+    icon?: ReactNode;
+    label: string;
+}
+export interface ThreadPreviewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Breadcrumb in the header, e.g. workspace / conversation / "Threads preview". */
+    crumbs: ThreadPreviewCrumb[];
+    description?: string;
+    /** Width in px (the host measures what the visualisation needs); capped at 95vw. */
+    width: number;
+    testId?: string;
+    children: ReactNode;
+}
+/** Large dialog that hosts a visualisation under a breadcrumb header. */
+export declare function ThreadPreviewDialog({ open, onOpenChange, crumbs, description, width, testId, children, }: ThreadPreviewDialogProps): import("react").JSX.Element;

package/dist/settings/TipsEditorDialog.d.ts

@@ -0,0 +1,94 @@
+/** Every fixed string of the tips editor. */
+export interface TipsEditorLabels {
+    titleList: string;
+    titleNew: string;
+    titleEdit: string;
+    descriptionList: string;
+    descriptionNew: string;
+    descriptionEdit: string;
+    hiddenOff: string;
+    customSuffix: string;
+    editTip: string;
+    deleteTip: string;
+    addTip: string;
+    testerTitle: string;
+    run: string;
+    cancel: string;
+    newTipIdentity: string;
+    customTipIdentity: string;
+    builtInTipIdentity: (code: string) => string;
+    yourNewTip: string;
+    placement: string;
+    message: string;
+    button: string;
+    noButton: string;
+    platformAction: string;
+    actionSequence: string;
+    externalLink: string;
+    buttonLabel: string;
+    action: string;
+    sequence: string;
+    url: string;
+    back: string;
+    save: string;
+    saving: string;
+}
+export declare const DEFAULT_TIPS_EDITOR_LABELS: TipsEditorLabels;
+export interface TipOption {
+    value: string;
+    label: string;
+}
+export interface TipListRow {
+    code: string;
+    message: string;
+    /** Where it shows, already worded ("Home", "All pages"). */
+    placementLabel: string;
+    isHidden: boolean;
+    isCustom: boolean;
+}
+export type TipTarget = 'none' | 'action' | 'sequence' | 'url';
+/** The edit form's values. */
+export interface TipFormValues {
+    /** null while creating a new custom tip. */
+    code: string | null;
+    isCustom: boolean;
+    /** The tip's message at open time: the header identity. */
+    original: string;
+    placement: string;
+    message: string;
+    target: TipTarget;
+    ctaLabel: string;
+    ctaAction: string;
+    ctaSequence: string;
+    ctaHref: string;
+}
+export interface TipsEditorDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** `null` shows the list. */
+    form: TipFormValues | null;
+    onFormChange: (patch: Partial<TipFormValues>) => void;
+    onFormBack: () => void;
+    onFormSave: () => void;
+    rows: TipListRow[];
+    onEditRow: (code: string) => void;
+    onDeleteRow: (code: string) => void;
+    onAdd: () => void;
+    busy: boolean;
+    error: string | null;
+    placementOptions: TipOption[];
+    actionOptions: TipOption[];
+    sequenceOptions: TipOption[];
+    /** Sequence the shared runner is executing right now. */
+    activeSequenceId: string | null;
+    onRunSequence: (id: string) => void;
+    onCancelSequence: () => void;
+    messageMaxChars: number;
+    ctaLabelMaxChars: number;
+    labels?: Partial<TipsEditorLabels>;
+}
+/**
+ * Contextual-tips editor: every tip in a list (edit, delete, add) or one tip's form (placement,
+ * message, optional button), plus a tester that runs action sequences. Persistence is the host's.
+ */
+export declare function TipsEditorDialog({ open, onOpenChange, form, onFormChange, onFormBack, onFormSave, rows, onEditRow, onDeleteRow, onAdd, busy, error, placementOptions, actionOptions, sequenceOptions, activeSequenceId, onRunSequence, onCancelSequence, messageMaxChars, ctaLabelMaxChars, labels, }: TipsEditorDialogProps): import("react").JSX.Element;

package/dist/settings/TriStateFilterMenu.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from 'react';
+/** include keeps matches, exclude drops them, null is indifferent. */
+export type TriState = 'include' | 'exclude' | null;
+export interface TriStateOption<T extends string = string> {
+    id: T;
+    label: string;
+    icon?: ReactNode;
+    count: number;
+    disabled?: boolean;
+    /** Indent level (nested options such as folders). */
+    depth?: number;
+}
+export interface TriStateGroup<T extends string = string> {
+    label: string;
+    options: T[];
+    collapsible?: boolean;
+}
+/** Every fixed string of the filter menu. */
+export interface TriStateFilterMenuLabels {
+    clear: string;
+}
+export declare const DEFAULT_TRI_STATE_FILTER_MENU_LABELS: TriStateFilterMenuLabels;
+export interface HoverHandlers {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}
+export interface TriStateFilterMenuProps<T extends string> {
+    /** Test id of the trigger. */
+    testId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    filterStates: Map<T, TriState>;
+    onFiltersChange: (filters: Map<T, TriState>) => void;
+    options: TriStateOption<T>[];
+    groups?: TriStateGroup<T>[];
+    /** Between the header and the options (e.g. a toggle). */
+    topContent?: ReactNode;
+    /** Before a group, keyed by the group's label. */
+    groupTopContent?: Record<string, ReactNode>;
+    /** After `topContent` (e.g. a folder navigator). */
+    folderContent?: ReactNode;
+    /** After every group (e.g. a source toggle). */
+    bottomContent?: ReactNode;
+    /** Label next to the filter icon of the trigger. */
+    triggerLabel?: string;
+    /** Shows the active styling even with no tri-state filter set. */
+    hasExternalActiveState?: boolean;
+    /** Never show the active styling (chips carry the indication instead). */
+    suppressTriggerActiveStyle?: boolean;
+    /** Replaces the default trigger styling (e.g. flush inside a unified widget). */
+    triggerClassName?: string;
+    /** A chevron after the icon/label instead of the dots: the trigger reads as a dropdown segment. */
+    renderChevron?: boolean;
+    /** Open only on an explicit click, never on hover (trigger embedded in another control). */
+    disableHoverOpen?: boolean;
+    /** Exposes the hover handlers so a wider hover target (a tab header) can drive the menu. */
+    onHoverHandlers?: (handlers: HoverHandlers) => void;
+    labels?: Partial<TriStateFilterMenuLabels>;
+}
+/**
+ * Tri-state filter dropdown. Opens on hover (pointer) or click (locks it open until clicked
+ * away); the open state is controlled so a host can persist it. Options cycle
+ * neutral, include, exclude.
+ */
+export declare function TriStateFilterMenu<T extends string>({ testId, open, onOpenChange, title, filterStates, onFiltersChange, options, groups, topContent, groupTopContent, folderContent, bottomContent, triggerLabel, hasExternalActiveState, suppressTriggerActiveStyle, triggerClassName, renderChevron, disableHoverOpen, onHoverHandlers, labels, }: TriStateFilterMenuProps<T>): import("react").JSX.Element;

package/dist/settings/Usage.d.ts

@@ -0,0 +1,102 @@
+import { type ReactNode } from 'react';
+/** Every fixed string of the usage line chart. `emptyLabel` prop wins. */
+export interface UsageLineChartLabels {
+    noDailyData: string;
+}
+export declare const DEFAULT_USAGE_LINE_CHART_LABELS: UsageLineChartLabels;
+/** Every fixed string of the proportion bar. */
+export interface UsageProportionBarLabels {
+    /** Bar tooltip when the metric is tokens: "3k tokens". */
+    tokens: (formatted: string) => string;
+    /** Bar tooltip when the metric is credits: "1,200 credits". */
+    credits: (formatted: string) => string;
+    /** Row suffix: "3k tok". */
+    tokensShort: (formatted: string) => string;
+}
+export declare const DEFAULT_USAGE_PROPORTION_BAR_LABELS: UsageProportionBarLabels;
+/** Every fixed string of the usage panel. `emptyMessage` / `errorMessage` props win. */
+export interface UsagePanelLabels {
+    empty: string;
+    error: string;
+}
+export declare const DEFAULT_USAGE_PANEL_LABELS: UsagePanelLabels;
+export interface UsageSeries {
+    key: string;
+    values: number[];
+}
+export interface UsageLineChartProps {
+    /** ISO dates (`YYYY-MM-DD`), one per point. */
+    dates: string[];
+    series: UsageSeries[];
+    /** Formats an axis-label date, e.g. "Jun 12". */
+    formatDate: (date: string) => string;
+    /** Formats a value in the hover readout. */
+    formatValue: (value: number) => string;
+    emptyLabel?: string;
+    labels?: Partial<UsageLineChartLabels>;
+}
+/** SVG line chart with a tap/hover readout (a tap selects a day, so touch works). */
+export declare function UsageLineChart({ dates, series, formatDate, formatValue, emptyLabel, labels, }: UsageLineChartProps): import("react").JSX.Element;
+/** Series legend; hidden for a single unnamed total. */
+export declare function UsageLegend({ series }: {
+    series: UsageSeries[];
+}): import("react").JSX.Element | null;
+export type UsageMetric = 'credits' | 'tokens';
+export interface UsageShare {
+    label: string;
+    /** Raw amount in the active metric, for the bar width. */
+    amount: number;
+    /** Formatted credits, e.g. "1,200". */
+    credits: string;
+    /** Formatted tokens, e.g. "3k". */
+    tokens: string;
+}
+/** Stacked proportion bar plus a per-item list with credits, tokens and share. */
+export declare function UsageProportionBar({ items, metric, labels, }: {
+    items: UsageShare[];
+    metric: UsageMetric;
+    labels?: Partial<UsageProportionBarLabels>;
+}): import("react").JSX.Element | null;
+export interface UsageStat {
+    key: string;
+    value: ReactNode;
+    label: ReactNode;
+}
+/** Row of summary tiles (credits, requests, tokens). */
+export declare function UsageSummary({ stats }: {
+    stats: UsageStat[];
+}): import("react").JSX.Element;
+/** Credit coin glyph used beside credit amounts. */
+export declare function CreditsGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export interface UsageToggleProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    ariaLabel: string;
+    /** `fill`: options share the row (breakdown); `compact`: small pill (period, metric). */
+    size?: 'compact' | 'fill';
+}
+/** Small single-choice toggle for the usage panel (hidden when printing). */
+export declare function UsageToggle<T extends string>({ value, onChange, options, ariaLabel, size, }: UsageToggleProps<T>): import("react").JSX.Element;
+export interface UsagePanelProps {
+    state: 'loading' | 'error' | 'empty' | 'ready';
+    /** Period toggle on the left of the top row. */
+    period: ReactNode;
+    /** Icon buttons on the right of the top row (download, print). */
+    actions?: ReactNode;
+    /** The period's date span, shown under the top row. */
+    dateRange?: string | null;
+    /** Shown for `empty`, e.g. "No usage yet this month." */
+    emptyMessage?: string;
+    errorMessage?: string;
+    labels?: Partial<UsagePanelLabels>;
+    /** Rendered for `ready`. */
+    children?: ReactNode;
+}
+/** Frame of the usage breakdown: toolbar row, then loading / error / empty / content. */
+export declare function UsagePanel({ state, period, actions, dateRange, emptyMessage, errorMessage, labels, children, }: UsagePanelProps): import("react").JSX.Element;

package/dist/settings/WelcomeDialog.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+/** Every fixed string of the welcome dialog. */
+export interface WelcomeDialogLabels {
+    /** Title: "Welcome, Ada!" (`firstName` is absent for anonymous). */
+    welcome: (firstName?: string) => string;
+    description: string;
+    currentPlan: string;
+    seeUpgradeOptions: string;
+    /** Text before the bold referral offer. */
+    referralBefore: string;
+    /** Text after the bold referral offer. */
+    referralAfter: string;
+    inviteContact: string;
+    /** Text before the bold reward balance. */
+    currentRewards: string;
+    continue: string;
+}
+export declare const DEFAULT_WELCOME_DIALOG_LABELS: WelcomeDialogLabels;
+/** Every fixed string of the invite-contacts dialog. */
+export interface InviteContactsDialogLabels {
+    title: string;
+    description: string;
+}
+export declare const DEFAULT_INVITE_CONTACTS_DIALOG_LABELS: InviteContactsDialogLabels;
+export interface WelcomeQuotaView {
+    key: string;
+    icon?: LucideIcon;
+    label: string;
+    /** Formatted used-of-limit, e.g. "40 / 500 MB". */
+    value: string;
+    pct: number;
+    /** Inline hint after the label, e.g. "resets Aug 31, 2026". */
+    hint?: string;
+}
+export interface WelcomeDialogProps {
+    open: boolean;
+    /** Closing the dialog (Continue is the single, deliberate exit; there is no close X). */
+    onClose: () => void;
+    /** Greeting name; the title reads "Welcome, {name}!". */
+    firstName?: string;
+    /** Show the gift icon (a reward balance exists) instead of the sparkles. */
+    hasReward: boolean;
+    /**
+     * Corner picker naming the project the numbers belong to (credits are per project). The host
+     * supplies it, since the choice of control and its state are the host's.
+     */
+    projectPicker?: ReactNode;
+    /** Plan badge for the selected project. */
+    planBadge: ReactNode;
+    quotas: WelcomeQuotaView[];
+    onSeePlans: () => void;
+    /** The standing referral offer, e.g. "£20 off your plan". */
+    referralOfferLabel: string;
+    onInvite: () => void;
+    /** Held reward balance, formatted. Hidden when absent. */
+    rewardBalanceLabel?: string;
+    labels?: Partial<WelcomeDialogLabels>;
+    /** Dialog test id (default `welcome-modal`). */
+    testId?: string;
+    /** Part ids; defaults are the current ids. `quota` is a prefix (`<prefix>-<quota key>`). */
+    testIds?: Partial<Record<'copy' | 'quota' | 'showPlans' | 'earn' | 'dismiss', string>>;
+}
+/**
+ * The once-per-session snapshot for free users: where you stand (plan and quotas), the standing
+ * referral offer, and any reward balance. Continue is the primary action; the upgrade and invite
+ * doors are deliberately secondary.
+ */
+export declare function WelcomeDialog({ open, onClose, firstName, hasReward, projectPicker, planBadge, quotas, onSeePlans, referralOfferLabel, onInvite, rewardBalanceLabel, labels, testId, testIds, }: WelcomeDialogProps): import("react").JSX.Element;
+export interface InviteContactsDialogProps {
+    open: boolean;
+    onClose: () => void;
+    /** The invite form (it carries the referral pitch itself). */
+    children: ReactNode;
+    testId?: string;
+    labels?: Partial<InviteContactsDialogLabels>;
+}
+/** Dialog around the invite form, swapped in for the welcome dialog when inviting. */
+export declare function InviteContactsDialog({ open, onClose, children, testId, labels, }: InviteContactsDialogProps): import("react").JSX.Element;