@book.dev/ui 1.60.0

package/dist/blockeditor/kit/KitFrame.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { type BlockMap } from '../model';
+import type { BlockEditorController } from '../useBlockEditor';
+/**
+ * The shared chrome for every artifact-kit input: a quiet header (display name
+ * + optional description, decoupled from the reactive symbol), the control
+ * surface, and a ⚙ that opens a settings **popover** which expands into a
+ * docked **side panel** for roomier configuration.
+ *
+ * Inputs are full-width by default; a "Compact" toggle opts back into the
+ * inline single-row layout. The reactive symbol (`name`) is edited apart from
+ * the human-facing label, so renaming the variable never disturbs the caption.
+ */
+export declare const kitSet: (editor: BlockEditorController, block: BlockMap, key: string, value: unknown) => void;
+/** Inputs read full-width unless explicitly set compact. */
+export declare const kitWide: (block: BlockMap) => boolean;
+/** A labelled config row used throughout the settings popover/panel. */
+export declare const ConfigField: React.FC<{
+    label: string;
+    hint?: string;
+    children: React.ReactNode;
+}>;
+export declare const ConfigInput: React.FC<React.InputHTMLAttributes<HTMLInputElement> & {
+    mono?: boolean;
+}>;
+export declare const ConfigTextarea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
+/**
+ * A labelled on/off row for the settings panel — the same layout the built-in
+ * "Compact" / "Stays interactive when locked" toggles use, lifted out so the
+ * new blocks (multi-select, free-entry, gating…) can reuse it instead of
+ * re-laying-out a checkbox each time.
+ */
+export declare const ConfigToggle: React.FC<{
+    label: string;
+    hint?: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (next: boolean) => void;
+}>;
+/**
+ * A label that reads as plain text but is editable in place — the WYSIWYG way
+ * to set a block's display name (and titles) right on the canvas, without
+ * opening the settings popover. A borderless auto-sizing input (`field-sizing`)
+ * so it looks like the text it replaces; falls back to a static span when the
+ * editor is read-only (or the block's group is locked). `stopPropagation` keeps
+ * keystrokes out of the surrounding block editor's shortcuts.
+ */
+export declare const KitInlineText: React.FC<{
+    value: string;
+    placeholder?: string;
+    ariaLabel: string;
+    readOnly?: boolean;
+    className?: string;
+    onCommit: (value: string) => void;
+}>;
+/**
+ * The building block that pairs a **display name** with a **description** —
+ * shared by every configuration card (inputs, charts, cards) so the two always
+ * travel together. For input blocks (`symbol`) it also tucks in the
+ * de-emphasized {@link VariableNameField}.
+ */
+export declare const NameDescriptionFields: React.FC<{
+    block: BlockMap;
+    editor: BlockEditorController;
+    /** Prop holding the human display name (default `label`). */
+    nameKey?: string;
+    /** Placeholder for the display-name input. */
+    namePlaceholder?: string;
+    /** Prop holding the description (default `description`). */
+    descKey?: string;
+    /** Show the de-emphasized auto-derived variable name (input blocks only). */
+    symbol?: boolean;
+    /** Fallback symbol when the label is empty. */
+    defaultName?: string;
+}>;
+export interface KitFrameProps {
+    block: BlockMap;
+    editor: BlockEditorController;
+    /** Adds the `obe-kit-{kind}` class and is the block's value type. */
+    kind: string;
+    /** Fallback symbol shown in the header when no name is set. */
+    defaultName: string;
+    /** The control surface (pills, select, stepper…). */
+    control: React.ReactNode;
+    /** Extra, block-specific settings rendered below the common fields. */
+    config?: React.ReactNode;
+    /** Offer the full-width/compact toggle and apply the wide layout class. */
+    supportsWide?: boolean;
+    /** Hide the header label group (e.g. the action button labels itself). */
+    hideHeader?: boolean;
+    /** Whether this block publishes a named value (shows name/label/description).
+     *  False for blocks like the action button that have no symbol of their own. */
+    symbol?: boolean;
+}
+export declare const KitFrame: React.FC<KitFrameProps>;

package/dist/blockeditor/kit/KitSettings.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * The one settings affordance every interactive block shares: a gear at the
+ * block's top-right (hidden until hover/focus), opening a settings **popover**
+ * that can **expand into the side pane** for roomier editing. The gutter
+ * context menu's "Configure" item opens the same popover (via the `kitConfig`
+ * bridge). One component so inputs, charts and cards all behave alike — no more
+ * per-block show/hide panels.
+ */
+export declare const KitSettings: React.FC<{
+    /** Stable block id — drives the gutter bridge and the expand portal target. */
+    blockId: string;
+    /** Heading for the popover / side panel. */
+    title: string;
+    /** The configuration fields. */
+    children: React.ReactNode;
+}>;
+export default KitSettings;

package/dist/blockeditor/kit/OptionsEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type BlockMap } from '../model';
+import type { BlockEditorController } from '../useBlockEditor';
+export declare const OptionsEditor: React.FC<{
+    block: BlockMap;
+    editor: BlockEditorController;
+    media?: boolean;
+}>;

package/dist/blockeditor/kit/__tests__/chartMath.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/dataflow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/exportKit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/exportKit2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/groupSync.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/inputs2Render.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/inputs2Scope.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/inputsRender.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/kitConfig.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/kitPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/options.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/__tests__/scope.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockeditor/kit/cards.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { CustomBlockProps } from '../registry';
+export declare const CARD_BLOCKS: readonly [{
+    readonly type: "statuslight";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Status light";
+        readonly hint: "Green / amber / red from a live value";
+        readonly keywords: "status light indicator traffic health ok warn red green";
+        readonly make: () => {
+            type: string;
+            props: {
+                label: string;
+                source: string;
+                okAt: number;
+                warnAt: number;
+            };
+        };
+    };
+}, {
+    readonly type: "tooltipcard";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Tooltip";
+        readonly hint: "A term that explains itself on hover";
+        readonly keywords: "tooltip hint term definition hover help";
+        readonly make: () => {
+            type: string;
+            props: {
+                term: string;
+                tip: string;
+            };
+        };
+    };
+}, {
+    readonly type: "linkcard";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Link card";
+        readonly hint: "A titled card that opens a URL";
+        readonly keywords: "link card url bookmark website external";
+        readonly make: () => {
+            type: string;
+            props: {
+                title: string;
+                description: string;
+                url: string;
+            };
+        };
+    };
+}];

package/dist/blockeditor/kit/chartMath.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Pure geometry for the kit's charts — no DOM, no deps, unit-testable. The
+ * chart block evaluates an expression into one of a few friendly shapes and
+ * these helpers turn it into coordinates; the block just draws SVG.
+ *
+ * Accepted data shapes:
+ *  - `number[]`                      → one series
+ *  - `{name: number[], …}`           → named series (overlaid)
+ *  - `[{x, y}, …]`                   → scatter points
+ *  - `{label: number, …}` (pie/bar/funnel) → labelled values
+ */
+export interface Series {
+    name: string;
+    values: number[];
+}
+export interface LabelledValue {
+    label: string;
+    value: number;
+}
+/** Coerce an evaluated value into series for line/area/bar charts. Accepts
+ *  the classic reactive shape `{series: [{name, data: number[]}]}` too. */
+export declare function toSeries(value: unknown): Series[];
+/** Coerce an evaluated value into labelled slices for pie/donut/funnel. */
+export declare function toLabelled(value: unknown, labels: string[]): LabelledValue[];
+/** Scatter points from the evaluated value ({x,y}[] or number[] by index). */
+export declare function toPoints(value: unknown): Array<{
+    x: number;
+    y: number;
+}>;
+export interface Extent {
+    min: number;
+    max: number;
+}
+export declare function extent(values: number[]): Extent;
+/** Map a value into pixel space (SVG y grows downward — pass flipped range). */
+export declare const scale: (v: number, d: Extent, r0: number, r1: number) => number;
+/** Polyline points attribute for one series across the plot area. */
+export declare function linePoints(values: number[], d: Extent, w: number, h: number, pad: number): string;
+export interface Arc {
+    path: string;
+    /** Mid-angle anchor for a label, on a circle of radius `at`. */
+    labelAt: (at: number) => {
+        x: number;
+        y: number;
+    };
+    fraction: number;
+}
+/** Pie/donut arcs (cx,cy centre; r outer radius; r0 inner radius for donuts). */
+export declare function pieArcs(values: number[], cx: number, cy: number, r: number, r0?: number): Arc[];
+export interface FunnelRow {
+    x: number;
+    width: number;
+    y: number;
+    height: number;
+    fraction: number;
+}
+/** Centered descending funnel rows in a w×h box. */
+export declare function funnelRows(values: number[], w: number, h: number, gap?: number): FunnelRow[];
+/** Nice round tick values across an extent (for the y axis grid). */
+export declare function ticks(d: Extent, count?: number): number[];
+/** The kit palette — readable on both themes, in series order. */
+export declare const PALETTE: string[];

package/dist/blockeditor/kit/charts.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { CustomBlockProps } from '../registry';
+/**
+ * The kit's chart block: one block, many kinds (line, area, bar, pie, donut,
+ * scatter, funnel). Data comes from an expression over the document's named
+ * inputs, so a stepper click or radio pick redraws every chart that reads it
+ * — that's the artifact loop. Rendering is plain SVG: no chart library, both
+ * themes, and identical markup in the interactive HTML export.
+ */
+export declare const CHART_KINDS: readonly ["line", "area", "bar", "pie", "donut", "scatter", "funnel"];
+export type ChartKind = (typeof CHART_KINDS)[number];
+export declare const CHART_BLOCKS: readonly [{
+    readonly type: "kitchart";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Chart";
+        readonly hint: "Line, bar, pie, scatter, funnel — live over inputs";
+        readonly keywords: "chart graph plot line bar pie donut scatter funnel visualization";
+        readonly make: () => {
+            type: string;
+            props: {
+                kind: string;
+                source: string;
+            };
+        };
+    };
+}];

package/dist/blockeditor/kit/completion.d.ts

@@ -0,0 +1,45 @@
+import type * as Y from 'yjs';
+import { type BlockMap } from '../model';
+/**
+ * Auto-computed completion for the container blocks (accordion sections, tabs).
+ *
+ * A section/tab is "complete" when every input it contains is *filled* and
+ * every to-do it contains is checked. "Filled" depends on the value shape an
+ * input publishes (see {@link inputValue}): a non-empty string, a finite
+ * number that isn't the empty placeholder, `true` for a toggle, a non-empty
+ * selection for the multi/array inputs. Containers with no inputs and no
+ * to-dos are vacuously complete (so a purely informational section never
+ * blocks a wizard).
+ *
+ * The signal is a READ — containers and the progress bar consume it; nothing
+ * publishes a user-set "completion" value. Pure over the block tree so the
+ * renderer, the progress-bar expression scope, and tests all agree.
+ */
+export interface CompletionStat {
+    /** Inputs + to-dos that count toward completion. */
+    total: number;
+    /** Of those, how many are filled / checked. */
+    done: number;
+    /** `done === total` (vacuously true when total is 0). */
+    complete: boolean;
+    /** done / total, or 1 when there's nothing to complete. */
+    ratio: number;
+}
+/** Completion of the blocks directly held by `container` (a tab / section). */
+export declare function sectionCompletion(container: BlockMap): CompletionStat;
+/** Overall completion of a tabs/accordion block (sum across its sections). */
+export declare function overallCompletion(block: BlockMap): CompletionStat;
+/** The completion read a tabs/accordion publishes into the scope. Mirrors the
+ *  overall stat plus a `sections` array of per-section stats — so a progress
+ *  bar or formula can bind `setup.ratio`, `setup.complete`, or
+ *  `setup.sections[0].ratio`. */
+export interface CompletionRead extends CompletionStat {
+    sections: CompletionStat[];
+}
+export declare function completionRead(block: BlockMap): CompletionRead;
+/**
+ * Every tabs/accordion container's completion read, keyed by the container's
+ * name (an identifier derived like a group's). Read-only — injected into the
+ * input scope so the progress bar / formulas can bind it; nothing user-set.
+ */
+export declare function containerCompletions(doc: Y.Doc): Record<string, CompletionRead>;

package/dist/blockeditor/kit/dataflow.d.ts

@@ -0,0 +1,68 @@
+import type * as Y from 'yjs';
+/**
+ * The page's reactive wiring as a graph: which blocks publish named values,
+ * which blocks read them, and what flows where. Pure extraction — the
+ * dataflow view renders it; tests assert on it.
+ */
+export type DataflowNodeKind = 'input' | 'code' | 'formula' | 'chart' | 'light' | 'button' | 'outlet';
+export interface DataflowNode {
+    /** The block id — stable, used for edges and click-to-locate. */
+    id: string;
+    kind: DataflowNodeKind;
+    /** The block type ('slider', 'kitchart', …) for the kind badge. */
+    type: string;
+    /** The published name (publishers) or display label (consumers). */
+    label: string;
+    /** The current value (or error), formatted for display. */
+    value?: string;
+    error?: string;
+    /** A short preview of the expression/code the block evaluates. */
+    source?: string;
+    /** Secondary line (outlets: the parent page the value flows into). */
+    sub?: string;
+}
+/**
+ * Where an exported name flows OUTSIDE the page: a parent database's expr
+ * column reading this page's published value. Composition made visible.
+ */
+export interface DataflowOutlet {
+    /** Node id (e.g. `outlet:<propertyId>`), stable per column. */
+    id: string;
+    /** The expr column's display name. */
+    label: string;
+    /** The parent page's title — where the value lands. */
+    sub: string;
+    /** The exported name the column reads. */
+    name: string;
+}
+export interface DataflowEdge {
+    /** `${from}->${to}` — react-flow needs stable unique ids. */
+    id: string;
+    from: string;
+    to: string;
+    /** The name carried along this edge. */
+    name: string;
+}
+export interface DataflowGraph {
+    nodes: DataflowNode[];
+    edges: DataflowEdge[];
+}
+/** Names a source references, limited to names that are actually published. */
+export declare function referencedNames(source: string, published: ReadonlySet<string>): string[];
+/**
+ * Build the dataflow graph for a document. Document order everywhere, so the
+ * layout reads like the page. Edges point from the block that PUBLISHES a
+ * name to the block that reads it; a button targeting an input points AT the
+ * input (it writes).
+ */
+export declare function dataflowGraph(doc: Y.Doc, outlets?: DataflowOutlet[]): DataflowGraph;
+/** The names this document publishes (what composition can export). */
+export declare function publishedNames(doc: Y.Doc): Set<string>;
+/**
+ * A simple layered layout: each node's column is its dependency depth, its
+ * row the order within that column. Returns react-flow-ready positions.
+ */
+export declare function layeredLayout(graph: DataflowGraph): Map<string, {
+    x: number;
+    y: number;
+}>;

package/dist/blockeditor/kit/groupSync.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Cross-page group sync. Groups that share a `sync` key mirror their input
+ * values, so the same "settings" group placed on two pages stays in lockstep.
+ *
+ * v1 is a localStorage-backed value mirror with cross-tab `storage` events and
+ * in-tab subscribers (so the primary pane and the split pane sync too). It's
+ * same-browser; a server-backed sync that spans devices is the next step. The
+ * shape is deliberately small — `{field: value}` — and callers guard writes
+ * against no-ops, so a value adopted from the store never echoes back.
+ */
+type Values = Record<string, unknown>;
+/** The values currently shared under a key (a copy). */
+export declare const readGroupSync: (key: string) => Values;
+/**
+ * Merge `values` into a sync key. Returns whether anything actually changed,
+ * so a caller adopting shared state doesn't echo it straight back. Notifies
+ * in-tab subscribers and (via localStorage) other tabs.
+ */
+export declare function writeGroupSync(key: string, values: Values): boolean;
+export declare function subscribeGroupSync(key: string, cb: () => void): () => void;
+/** Loose equality for the small value shapes inputs publish (scalars + arrays). */
+export declare function valueEqual(a: unknown, b: unknown): boolean;
+export {};

package/dist/blockeditor/kit/index.d.ts

@@ -0,0 +1,11 @@
+export { evalExpr, formatValue, inputScope, INPUT_TYPES } from './scope';
+export { CHART_KINDS } from './charts';
+/**
+ * Register the artifact kit: interactive inputs (stepper, text field, radio,
+ * checklist, toggle, location, button), live charts, and display blocks
+ * (status light, tooltip, link card). Together with the slider + formula
+ * these make pages a place to BUILD small interactive artifacts — the kind
+ * of throwaway calculator/dashboard/picker an AI would otherwise hand-code —
+ * out of reusable, collaborative blocks.
+ */
+export declare function registerArtifactKit(): void;

package/dist/blockeditor/kit/inputs.d.ts

@@ -0,0 +1,135 @@
+import React from 'react';
+import type { CustomBlockProps } from '../registry';
+/** Definitions consumed by kit/index.ts (type + renderer + slash entry). */
+export declare const INPUT_BLOCKS: readonly [{
+    readonly type: "number";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Number stepper";
+        readonly hint: "A named number with − / + buttons";
+        readonly keywords: "number stepper counter input increment buttons";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                value: number;
+                step: number;
+            };
+        };
+    };
+}, {
+    readonly type: "textfield";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Text field";
+        readonly hint: "A named text input";
+        readonly keywords: "text field input string form";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                value: string;
+            };
+        };
+    };
+}, {
+    readonly type: "radio";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Radio group";
+        readonly hint: "Pick one of several options";
+        readonly keywords: "radio choice select option pick one form";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                opts: {
+                    label: string;
+                }[];
+                value: string;
+            };
+        };
+    };
+}, {
+    readonly type: "checklist";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Choice checklist";
+        readonly hint: "Pick any of several options";
+        readonly keywords: "checklist checkbox multi select options form";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                opts: {
+                    label: string;
+                }[];
+                selected: never[];
+            };
+        };
+    };
+}, {
+    readonly type: "dropdown";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Dropdown";
+        readonly hint: "Pick one option from a select";
+        readonly keywords: "dropdown select choose option pick form menu";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                opts: {
+                    label: string;
+                }[];
+                value: string;
+            };
+        };
+    };
+}, {
+    readonly type: "toggle";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Toggle switch";
+        readonly hint: "A named on/off switch";
+        readonly keywords: "toggle switch boolean on off flag";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+                value: boolean;
+            };
+        };
+    };
+}, {
+    readonly type: "location";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Location";
+        readonly hint: "A place with coordinates";
+        readonly keywords: "location place map coordinates gps geo";
+        readonly make: () => {
+            type: string;
+            props: {
+                name: string;
+            };
+        };
+    };
+}, {
+    readonly type: "actionbutton";
+    readonly render: React.FC<CustomBlockProps>;
+    readonly slash: {
+        readonly label: "Button";
+        readonly hint: "Set, step, or toggle an input — or open a link";
+        readonly keywords: "button action click increment set link trigger";
+        readonly make: () => {
+            type: string;
+            props: {
+                btnlabel: string;
+                action: string;
+                target: string;
+                amount: number;
+            };
+        };
+    };
+}];