@bambamboole/pdf-ua-template-builder 0.2.0 → 0.3.1

package/README.md

@@ -1,13 +1,16 @@
 # @bambamboole/pdf-ua-template-builder
 
-An embeddable React template builder for the
-[pdf-ua-api](https://github.com/bambamboole/pdf-ua-api) PDF/UA renderer.
+Embeddable React components for authoring
+[pdf-ua-api](https://github.com/bambamboole/pdf-ua-api) PDF/UA templates — a
+visual drag-and-drop **builder** and a schema-validated **JSON editor**, each
+with a live rendered-PDF preview.
 
-- Hybrid block cards that expand inline for editing
+- **Visual builder** — hybrid block cards that expand inline for editing
+- **JSON editor** — CodeMirror with schema-aware autocomplete, validation, and hover
 - Page-format aware canvas (A3/A4/A5/A6/Letter/Legal/Tabloid + orientation)
 - Repeated footer area and page-number controls
 - Animated drag-and-drop with full keyboard accessibility (powered by dnd-kit)
-- Lightweight neutral UI built around CSS custom properties
+- Light/dark theming and composable provider + parts, built on CSS custom properties
 
 ## Install
 
@@ -27,14 +30,11 @@ npm install react react-dom
 import { TemplateBuilder, createInvoiceExample } from "@bambamboole/pdf-ua-template-builder";
 import "@bambamboole/pdf-ua-template-builder/style.css";
 
-const example = createInvoiceExample();
-
 export default function App() {
   return (
     <TemplateBuilder
       apiUrl="http://localhost:8080"
-      initialTemplate={example.template}
-      initialData={example.data}
+      examples={{ Invoice: createInvoiceExample() }}
       onChange={(template, data) => console.log("changed", template, data)}
       onRendered={(pdf) => console.log("rendered pdf blob", pdf)}
     />
@@ -44,14 +44,116 @@ export default function App() {
 
 ## Props
 
-| Prop              | Type                                                                | Description                                                                  |
-| ----------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `apiUrl`          | `string`                                                            | Base URL of a running `pdf-ua-api`. Defaults to `""` (relative URL / proxy). |
-| `initialTemplate` | `Template`                                                          | Template loaded on first render.                                             |
-| `initialData`     | `Record<string, unknown>`                                           | Runtime data keyed by block id (table rows, dynamic key-value overrides).   |
-| `onChange`        | `(template: Template, data: Record<string, unknown>) => void`       | Fires on every edit.                                                         |
-| `onRendered`     | `(pdf: Blob) => void`                                               | Fires after a successful render.                                             |
-| `className`      | `string`                                                            | Class appended to the root element.                                          |
+| Prop              | Type                                                          | Description                                                                   |
+| ----------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------- |
+| `apiUrl`          | `string`                                                     | Base URL of a running `pdf-ua-api`. Defaults to `""` (relative URL / proxy).  |
+| `initialTemplate` | `Template`                                                   | Template loaded on first render.                                              |
+| `initialData`     | `Record<string, unknown>`                                    | Runtime data keyed by block id (table rows, dynamic key-value overrides).     |
+| `examples`        | `Record<string, { template: Template; data?: TemplateData }>` | Loadable examples keyed by display name. The palette's Load control only appears when this is non-empty. |
+| `onChange`        | `(template: Template, data: Record<string, unknown>) => void` | Fires on every edit.                                                          |
+| `onRendered`      | `(pdf: Blob) => void`                                        | Fires after a successful render.                                              |
+| `className`       | `string`                                                     | Class appended to the root element.                                           |
+
+## Composable layout
+
+`<TemplateBuilder />` is a preset that places a `Builder` and a `Preview`
+side-by-side. When you need a different arrangement — for example the PDF
+preview **below** the builder inside a docs page — compose the parts yourself.
+`TemplateBuilderProvider` owns the shared state and drag-and-drop context; place
+`Builder` and `Preview` inside it however you like. Both accept a `className` for
+positioning and sizing:
+
+```tsx
+import {
+  TemplateBuilderProvider,
+  Builder,
+  Preview,
+  createInvoiceExample,
+} from "@bambamboole/pdf-ua-template-builder";
+import "@bambamboole/pdf-ua-template-builder/style.css";
+
+export default function StackedBuilder() {
+  return (
+    <TemplateBuilderProvider apiUrl="http://localhost:8080">
+      <div className="flex flex-col gap-3">
+        <Builder examples={{ Invoice: createInvoiceExample() }} className="h-[36rem]" />
+        <Preview className="h-[40rem]" />
+      </div>
+    </TemplateBuilderProvider>
+  );
+}
+```
+
+`Builder` groups the palette, canvas, and inspector; `Preview` shows the rendered
+PDF and the Render button. `TemplateBuilderProvider` accepts the same props as
+`<TemplateBuilder />` except `examples` and `className` (`apiUrl`,
+`initialTemplate`, `initialData`, `onChange`, `onRendered`). Because the provider
+does not impose a height, give `Builder` and `Preview` explicit sizes when you
+are not filling the viewport. For fully custom parts, the `useTemplateBuilder()`
+hook exposes the underlying state and actions.
+
+## JSON editor
+
+Prefer raw JSON? `TemplateEditor` is a drop-in alternative to `TemplateBuilder`:
+a CodeMirror editor with schema-aware autocomplete, validation, and hover (driven
+by the bundled template JSON Schema), paired with the same rendered-PDF preview.
+
+```tsx
+import { TemplateEditor, createInvoiceExample } from "@bambamboole/pdf-ua-template-builder";
+import "@bambamboole/pdf-ua-template-builder/style.css";
+
+const example = createInvoiceExample();
+
+export default function App() {
+  return (
+    <TemplateEditor
+      apiUrl="http://localhost:8080"
+      initialTemplate={example.template}
+      data={example.data}
+      onChange={(template, text) => console.log("edited", template, text)}
+      onRendered={(pdf) => console.log("rendered pdf blob", pdf)}
+    />
+  );
+}
+```
+
+The editor owns the JSON text; `data` is passed straight through to render.
+`onChange(template, text)` fires on every edit — `template` is `null` while the
+JSON is invalid, and Render is disabled until it parses. Schema problems surface
+as inline editor diagnostics.
+
+It composes exactly like the builder, and shares the same `Preview`:
+
+```tsx
+import { TemplateEditorProvider, CodeEditor, Preview } from "@bambamboole/pdf-ua-template-builder";
+
+<TemplateEditorProvider apiUrl="http://localhost:8080" initialTemplate={example.template}>
+  <div className="flex flex-col gap-3">
+    <CodeEditor className="h-[36rem]" />
+    <Preview className="h-[40rem]" />
+  </div>
+</TemplateEditorProvider>
+```
+
+`useTemplateEditor()` exposes the text and parsed state (`{ text, setText,
+template, error, data }`) for custom UIs.
+
+## Dark mode
+
+The builder and editor ship a dark theme built from the same semantic tokens. It
+turns on automatically when the OS prefers dark (`prefers-color-scheme: dark`) and
+whenever an ancestor element carries `data-theme="dark"` (or a `.dark` class) — so
+it syncs with hosts like Starlight out of the box. Force a mode explicitly with
+`data-theme="light"` or `data-theme="dark"` on a wrapper element:
+
+```tsx
+<div data-theme="dark">
+  <TemplateBuilder apiUrl="http://localhost:8080" />
+</div>
+```
+
+The on-canvas page and the rendered-PDF preview stay light ("paper") in both
+themes, matching the white PDF the backend produces.
 
 ## Backend
 
@@ -93,7 +195,7 @@ npm run lint         # oxlint
 ```
 
 `npm run dev` proxies `/schema` and `/render/*` to a local `pdf-ua-api`
-(default: `http://localhost:8080`, override with `PDF_UA_API_PROXY_URL`).
+(default: `http://localhost:9999`, override with `PDF_UA_API_PROXY_URL`).
 
 ## License
 

package/dist/builder/Builder.d.ts

@@ -0,0 +1,7 @@
+import { TemplateExample } from './context/BuilderContext';
+export interface BuilderProps {
+    className?: string;
+    /** Loadable examples surfaced in the palette, keyed by display name. */
+    examples?: Record<string, TemplateExample>;
+}
+export declare function Builder({ className, examples }?: BuilderProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/TemplateBuilder.d.ts

@@ -1,7 +1,6 @@
-import { UniqueIdentifier } from '@dnd-kit/core';
 import { Template } from '../types/generated/template';
 import { TemplateData } from '../types/template';
-import { EditorArea, EditorModel } from './state/editorModel';
+import { TemplateExample } from './context/BuilderContext';
 export interface TemplateBuilderProps {
     /** Base URL of a running pdf-ua-api instance. Defaults to "" (relative URLs / proxy). */
     apiUrl?: string;
@@ -9,6 +8,8 @@ export interface TemplateBuilderProps {
     initialTemplate?: Template;
     /** Runtime data keyed by block id (table rows, dynamic key-value overrides). */
     initialData?: TemplateData;
+    /** Loadable examples surfaced in the palette, keyed by display name. */
+    examples?: Record<string, TemplateExample>;
     /** Fires whenever the user edits the template or its runtime data. */
     onChange?: (template: Template, data: TemplateData) => void;
     /** Fires after a successful render with the produced PDF blob. */
@@ -16,14 +17,10 @@ export interface TemplateBuilderProps {
     /** Optional className appended to the root element. */
     className?: string;
 }
-interface DragData {
-    source?: string;
-    type?: string;
-    rowUid?: string;
-    blockUid?: string;
-    area?: EditorArea;
-}
-export declare function TemplateBuilder({ apiUrl: initialApiUrlProp, initialTemplate, initialData, onChange, onRendered, className, }?: TemplateBuilderProps): import("react/jsx-runtime").JSX.Element;
-export declare function getRowIndex(model: EditorModel, overId: UniqueIdentifier | undefined, overData: DragData): number | null;
-export declare function createNextBlockId(model: EditorModel, blockType: string): string;
-export {};
+/**
+ * All-in-one preset: a provider wrapping a Builder and a Preview side by side.
+ *
+ * For custom layouts (e.g. preview below the builder), compose the parts
+ * directly with `TemplateBuilderProvider`, `Builder`, and `Preview`.
+ */
+export declare function TemplateBuilder({ apiUrl, initialTemplate, initialData, examples, onChange, onRendered, className, }?: TemplateBuilderProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/blocks/Palette.d.ts

@@ -0,0 +1,7 @@
+import { TemplateExample } from '../context/BuilderContext';
+export interface PaletteProps {
+    className?: string;
+    /** Loadable examples keyed by display name. The Load control only renders when non-empty. */
+    examples?: Record<string, TemplateExample>;
+}
+export declare function Palette({ className, examples }?: PaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/BlockDataPreview.d.ts

@@ -0,0 +1,7 @@
+import { Block } from '../../types/generated/template';
+export interface BlockDataPreviewProps {
+    block: Block;
+    rowData?: unknown;
+    onChange?: (block: Block) => void;
+}
+export declare function BlockDataPreview({ block, rowData, onChange }: BlockDataPreviewProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/builder/canvas/BuilderCanvas.d.ts

@@ -1,17 +1,21 @@
 import { Block, Orientation, PageFormat } from '../../types/generated/template';
-import { TemplateSchemaResponse } from '../../types/template';
+import { TemplateData } from '../../types/template';
 import { EditorModel, PageNumbersValue } from '../state/editorModel';
 export interface BuilderCanvasProps {
-    schema: TemplateSchemaResponse;
     model: EditorModel;
+    data: TemplateData;
     format: PageFormat;
     orientation: Orientation;
     footerRepeat: boolean;
     pageNumbers: PageNumbersValue;
-    onChangeBlock: (blockUid: string, block: Block) => void;
+    selectedBlockUid: string | null;
     onRemoveBlock: (blockUid: string) => void;
+    onSelectBlock: (blockUid: string) => void;
+    onChangeBlock: (blockUid: string, block: Block) => void;
+    onDeselect: () => void;
     onSetRowWidths: (rowUid: string, widths: string[]) => void;
     onToggleFooterRepeat: (repeat: boolean) => void;
     onChangePageNumbers: (value: PageNumbersValue) => void;
+    className?: string;
 }
-export declare function BuilderCanvas({ schema, model, format, orientation, footerRepeat, pageNumbers, onChangeBlock, onRemoveBlock, onSetRowWidths, onToggleFooterRepeat, onChangePageNumbers, }: BuilderCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function BuilderCanvas({ model, data, format, orientation, footerRepeat, pageNumbers, selectedBlockUid, onRemoveBlock, onSelectBlock, onChangeBlock, onDeselect, onSetRowWidths, onToggleFooterRepeat, onChangePageNumbers, className, }: BuilderCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/Canvas.d.ts

@@ -0,0 +1,4 @@
+export interface CanvasProps {
+    className?: string;
+}
+export declare function Canvas({ className }?: CanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/ColumnResizer.d.ts

@@ -5,5 +5,6 @@ export interface ColumnResizerProps {
     leftIndex: number;
     containerRef: RefObject<HTMLElement | null>;
     onResize: (widths: string[]) => void;
+    label?: string;
 }
-export declare function ColumnResizer({ widths, count, leftIndex, containerRef, onResize, }: ColumnResizerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnResizer({ widths, count, leftIndex, containerRef, onResize, label, }: ColumnResizerProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/PageSheet.d.ts

@@ -4,5 +4,7 @@ export interface PageSheetProps {
     format: PageFormat;
     orientation: Orientation;
     children: ReactNode;
+    /** Show the "{format} · {orientation} / {width}mm" caption. Off for the footer sheet. */
+    showMeta?: boolean;
 }
-export declare function PageSheet({ format, orientation, children }: PageSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageSheet({ format, orientation, children, showMeta }: PageSheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/SortableBlock.d.ts

@@ -1,14 +1,16 @@
 import { CSSProperties } from 'react';
-import { EditorArea, EditorBlock } from '../state/editorModel';
 import { Block } from '../../types/generated/template';
-import { TemplateSchemaResponse } from '../../types/template';
+import { EditorArea, EditorBlock } from '../state/editorModel';
+import { TemplateData } from '../../types/template';
 export interface SortableBlockProps {
     rowUid: string;
     area: EditorArea;
     editorBlock: EditorBlock;
-    schema: TemplateSchemaResponse;
-    onChangeBlock: (blockUid: string, block: Block) => void;
+    data: TemplateData;
+    selected: boolean;
     onRemoveBlock: (blockUid: string) => void;
+    onSelect: (blockUid: string) => void;
+    onChangeBlock: (blockUid: string, block: Block) => void;
     style?: CSSProperties;
 }
-export declare function SortableBlock({ rowUid, area, editorBlock, schema, onChangeBlock, onRemoveBlock, style: layoutStyle, }: SortableBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableBlock({ rowUid, area, editorBlock, data, selected, onRemoveBlock, onSelect, onChangeBlock, style: layoutStyle, }: SortableBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/canvas/columns.d.ts

@@ -2,3 +2,12 @@ export declare function parseWidths(widths: readonly (number | string)[] | null
 export declare function formatWidths(widths: readonly number[]): string[];
 export declare function gridTemplateForWidths(widths: readonly string[] | null | undefined, count: number): string | null;
 export declare function setBoundary(widths: readonly number[], leftIndex: number, leftPercent: number): number[];
+export declare function labelWidthPercent(width: string | null | undefined, fallback?: number): number;
+export declare const NUMBER_COLUMN_RESERVE = 5;
+export interface TableColumnTracks {
+    tracks: number[];
+    data: number[];
+}
+export declare function percentWidth(width: string | number | null | undefined): number | null;
+export declare function distribute(count: number, total: number): number[];
+export declare function tableColumnTracks(widths: readonly (string | null | undefined)[], numberRows: boolean): TableColumnTracks;

package/dist/builder/context/BuilderContext.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { Block, Orientation, PageFormat, Template } from '../../types/generated/template';
+import { TemplateData, TemplateSchemaResponse } from '../../types/template';
+import { EditorBlock, EditorModel, PageNumbersValue, ResolvedPageSize } from '../state/editorModel';
+import { getBlockTypes } from '../schema/schemaAdapter';
+/** A loadable example: a template plus its optional runtime data. */
+export interface TemplateExample {
+    template: Template;
+    data?: TemplateData;
+}
+export interface TemplateBuilderProviderProps {
+    /** Base URL of a running pdf-ua-api instance. Defaults to "" (relative URLs / proxy). */
+    apiUrl?: string;
+    /** Template loaded into the editor on first render. */
+    initialTemplate?: Template;
+    /** Runtime data keyed by block id (table rows, dynamic key-value overrides). */
+    initialData?: TemplateData;
+    /** Fires whenever the user edits the template or its runtime data. */
+    onChange?: (template: Template, data: TemplateData) => void;
+    /** Fires after a successful render with the produced PDF blob. */
+    onRendered?: (pdf: Blob) => void;
+    /** Pane slots to arrange. They share this provider's state and DnD context. */
+    children: ReactNode;
+}
+/** Editor state and derived values. Changes as the user edits. */
+export interface BuilderState {
+    schema: TemplateSchemaResponse | null;
+    schemaLoading: boolean;
+    model: EditorModel;
+    data: TemplateData;
+    serializedTemplate: Template;
+    selectedBlockUid: string | null;
+    selectedBlock: EditorBlock | null;
+    blockTypes: ReturnType<typeof getBlockTypes>;
+    pageSize: ResolvedPageSize;
+    footerRepeat: boolean;
+    pageNumbers: PageNumbersValue;
+    pdfUrl: string | null;
+    pdfLoading: boolean;
+    error: string | null;
+}
+/** Stable editor actions. Identity never changes for the provider's lifetime. */
+export interface BuilderActions {
+    renderPdf: () => void;
+    loadExample: (example: TemplateExample) => void;
+    addBlock: (type: string) => void;
+    changeBlock: (blockUid: string, block: Block) => void;
+    changeTemplateSettings: (template: Template) => void;
+    removeBlock: (blockUid: string) => void;
+    selectBlock: (blockUid: string) => void;
+    deselect: () => void;
+    setRowWidths: (rowUid: string, widths: string[]) => void;
+    changeData: (data: TemplateData) => void;
+    changeFormat: (format: PageFormat) => void;
+    changeOrientation: (orientation: Orientation) => void;
+    toggleFooterRepeat: (repeat: boolean) => void;
+    changePageNumbers: (value: PageNumbersValue) => void;
+}
+export type BuilderContextValue = BuilderState & BuilderActions;
+/** Subscribe to editor state. Re-renders on edits. */
+export declare function useBuilderState(): BuilderState;
+/** Read the stable editor actions. Does not re-render on edits. */
+export declare function useBuilderActions(): BuilderActions;
+/** Headless escape hatch returning both state and actions. */
+export declare function useTemplateBuilder(): BuilderContextValue;
+export declare function TemplateBuilderProvider({ apiUrl: apiUrlProp, initialTemplate, initialData, onChange, onRendered, children, }: TemplateBuilderProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/controls/AlignSelect.d.ts

@@ -0,0 +1,7 @@
+export interface AlignSelectProps {
+    name: string;
+    value: string;
+    label?: string;
+    onChange: (value: string) => void;
+}
+export declare function AlignSelect({ name, value, label, onChange }: AlignSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/controls/BuilderField.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+export type EmptyTextValue = "empty-string" | "undefined";
+export interface BuilderControlProps {
+    name: string;
+    label: string;
+    help?: ReactNode;
+    error?: ReactNode;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export interface TextFieldProps extends BuilderControlProps {
+    value?: string;
+    placeholder?: string;
+    emptyValue?: EmptyTextValue;
+    autoComplete?: string;
+    onChange: (value: string | undefined) => void;
+}
+export interface TextAreaFieldProps extends BuilderControlProps {
+    value?: string;
+    placeholder?: string;
+    emptyValue?: EmptyTextValue;
+    rows?: number;
+    onChange: (value: string | undefined) => void;
+}
+export interface NumberFieldProps extends BuilderControlProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number | "any";
+    placeholder?: string;
+    onChange: (value: number | undefined) => void;
+}
+export interface SelectFieldOption<Value extends string> {
+    value: Value;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectFieldProps<Value extends string> extends BuilderControlProps {
+    value?: Value;
+    options: readonly SelectFieldOption<Value>[];
+    optional?: boolean;
+    emptyLabel?: string;
+    onChange: (value: Value | undefined) => void;
+}
+export interface CheckboxFieldProps extends BuilderControlProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export interface ColorFieldProps extends BuilderControlProps {
+    value?: string;
+    fallbackValue?: string;
+    onChange: (value: string | undefined) => void;
+}
+export interface UnitFieldProps extends BuilderControlProps {
+    value?: string;
+    placeholder?: string;
+    emptyValue?: EmptyTextValue;
+    readOnly?: boolean;
+    onChange?: (value: string | undefined) => void;
+}
+interface FieldLayoutProps extends BuilderControlProps {
+    children: ReactNode;
+}
+export declare function TextField({ value, placeholder, emptyValue, autoComplete, onChange, ...fieldProps }: TextFieldProps): ReactNode;
+export declare function TextAreaField({ value, placeholder, emptyValue, rows, onChange, ...fieldProps }: TextAreaFieldProps): ReactNode;
+export declare function NumberField({ value, min, max, step, placeholder, onChange, ...fieldProps }: NumberFieldProps): ReactNode;
+export declare function SelectField<Value extends string>({ value, options, optional, emptyLabel, onChange, ...fieldProps }: SelectFieldProps<Value>): ReactNode;
+export declare function CheckboxField({ checked, onChange, ...fieldProps }: CheckboxFieldProps): ReactNode;
+export declare function ColorField({ value, fallbackValue, onChange, ...fieldProps }: ColorFieldProps): ReactNode;
+export declare function UnitField({ value, placeholder, emptyValue, readOnly, onChange, ...fieldProps }: UnitFieldProps): ReactNode;
+export declare function BuilderField({ name, label, help, error, id, className, children, }: FieldLayoutProps): ReactNode;
+export declare function createFieldId(name: string): string;
+export {};

package/dist/builder/controls/Field.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface FieldProps {
+    label: ReactNode;
+    children: ReactNode;
+}
+export declare function Field({ label, children }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/controls/fieldConverters.d.ts

@@ -0,0 +1,4 @@
+import { EmptyTextValue, SelectFieldOption } from './BuilderField';
+export declare function textValue(value: string, emptyValue: EmptyTextValue): string | undefined;
+export declare function numberValue(value: string, valueAsNumber: number): number | undefined;
+export declare function selectValue<Value extends string>(value: string, options: readonly SelectFieldOption<Value>[]): Value | undefined;

package/dist/builder/controls/index.d.ts

@@ -0,0 +1,7 @@
+export { BuilderField, CheckboxField, ColorField, createFieldId, NumberField, SelectField, TextAreaField, TextField, UnitField, } from './BuilderField';
+export { AlignSelect } from './AlignSelect';
+export type { AlignSelectProps } from './AlignSelect';
+export { Field } from './Field';
+export type { FieldProps } from './Field';
+export { Checkbox, Input, Select, Textarea } from './inputs';
+export type { BuilderControlProps, CheckboxFieldProps, ColorFieldProps, EmptyTextValue, NumberFieldProps, SelectFieldOption, SelectFieldProps, TextAreaFieldProps, TextFieldProps, UnitFieldProps, } from './BuilderField';

package/dist/builder/controls/inputs.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export declare function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ className, ...rest }: SelectHTMLAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/builder/hooks/useBuilderDragDrop.d.ts

@@ -0,0 +1,25 @@
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { Dispatch, RefObject } from 'react';
+import { Block } from '../../types/generated/template';
+import { JsonSchemaObject } from '../../types/template';
+import { useBuilderSensors } from '../lib/sensors';
+import { EditorModel } from '../state/editorModel';
+import { EditorAction } from '../state/editorReducer';
+export type ActiveDrag = {
+    kind: "palette";
+    type: string;
+} | {
+    kind: "block";
+    block: Block;
+} | {
+    kind: "row";
+} | null;
+interface BuilderDragDrop {
+    activeDrag: ActiveDrag;
+    sensors: ReturnType<typeof useBuilderSensors>;
+    onDragStart: (event: DragStartEvent) => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragCancel: () => void;
+}
+export declare function useBuilderDragDrop(schema: JsonSchemaObject | null, dispatch: Dispatch<EditorAction>, modelRef: RefObject<EditorModel>): BuilderDragDrop;
+export {};

package/dist/builder/inspector/BlockContentControls.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { Block } from '../../types/generated/template';
+export interface BlockContentControlsProps {
+    block: Block;
+    rowData?: unknown;
+    onChangeBlock: (block: Block) => void;
+    onChangeRowData?: (data: unknown) => void;
+}
+export declare function BlockContentControls(props: BlockContentControlsProps): ReactNode;

package/dist/builder/inspector/BlockInspector.d.ts

@@ -0,0 +1,14 @@
+import { Block } from '../../types/generated/template';
+import { TemplateData, TemplateSchemaResponse } from '../../types/template';
+import { EditorBlock } from '../state/editorModel';
+export interface BlockInspectorProps {
+    block: EditorBlock | null;
+    schema: TemplateSchemaResponse;
+    data: TemplateData;
+    onChangeBlock: (blockUid: string, block: Block) => void;
+    onChangeData?: (data: TemplateData) => void;
+    onRemoveBlock: (blockUid: string) => void;
+    onClose: () => void;
+    className?: string;
+}
+export declare function BlockInspector({ block, schema, data, onChangeBlock, onChangeData, onRemoveBlock, onClose, className, }: BlockInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/builder/inspector/BlockLayoutControls.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Block } from '../../types/generated/template';
+export interface BlockLayoutControlsProps {
+    block: Block;
+    onChangeBlock: (block: Block) => void;
+}
+export declare function BlockLayoutControls({ block, onChangeBlock }: BlockLayoutControlsProps): ReactNode;

package/dist/builder/inspector/DocumentSettings.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Orientation, PageFormat, Template } from '../../types/generated/template';
+import { TemplateSchemaMetadata } from '../../types/template';
+export interface DocumentSettingsProps {
+    template: Template;
+    metadata?: Pick<TemplateSchemaMetadata, "bundledFonts">;
+    format: PageFormat;
+    orientation: Orientation;
+    onChangeTemplate: (template: Template) => void;
+    onChangeFormat: (format: PageFormat) => void;
+    onChangeOrientation: (orientation: Orientation) => void;
+    className?: string;
+}
+/**
+ * Document-wide settings, laid out as a horizontal bar above the block palette.
+ * Each group wraps to its own column on narrow widths.
+ */
+export declare function DocumentSettings({ template, metadata, format, orientation, onChangeTemplate, onChangeFormat, onChangeOrientation, className, }: DocumentSettingsProps): ReactNode;

package/dist/builder/inspector/Inspector.d.ts

@@ -0,0 +1 @@
+export declare function Inspector(): import("react/jsx-runtime").JSX.Element | null;

package/dist/builder/inspector/InspectorShell.d.ts

@@ -0,0 +1,19 @@
+import { KeyboardEvent, ReactNode } from 'react';
+export interface InspectorShellProps {
+    ariaLabel: string;
+    className?: string;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    children: ReactNode;
+}
+export declare const InspectorShell: import('react').ForwardRefExoticComponent<InspectorShellProps & import('react').RefAttributes<HTMLElement>>;
+export interface InspectorHeaderProps {
+    title: string;
+    chip?: ReactNode;
+    subtitle?: string;
+    action?: ReactNode;
+}
+export declare function InspectorHeader({ title, chip, subtitle, action }: InspectorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function InspectorSection({ title, children }: {
+    title: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/builder/inspector/PageSettings.d.ts

@@ -0,0 +1,4 @@
+export interface PageSettingsProps {
+    className?: string;
+}
+export declare function PageSettings({ className }?: PageSettingsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/builder/inspector/SpacingControls.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Block, Template } from '../../types/generated/template';
+interface BlockSpacingControlsProps {
+    scope: "block";
+    block: Block;
+    onChangeBlock: (block: Block) => void;
+}
+interface PageMarginControlsProps {
+    scope: "page";
+    template: Template;
+    onChangeTemplate: (template: Template) => void;
+}
+export type SpacingControlsProps = BlockSpacingControlsProps | PageMarginControlsProps;
+export declare function SpacingControls(props: SpacingControlsProps): ReactNode;
+export {};