@fastsprout/reacd-shadcn 0.0.0-stage → 0.2.0

package/dist/dashboard-toolbar/dashboard-toolbar.adapter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ShadcnDashboardToolbar({ label, start, children, end, }) {
+    return (_jsxs("div", { role: "group", "aria-label": label, className: "reacd-node reacd-dashboard-toolbar", children: [_jsx("div", { className: "reacd-dashboard-actions", children: start }), children, _jsx("div", { className: "reacd-dashboard-actions", children: end })] }));
+}

package/dist/data-table/data-table.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from '@fastsprout/reacd/adapter-runtime/components/data-table/data-table.js';
+export declare function ShadcnDataTable(props: DataTableProps): import("react").JSX.Element;

package/dist/data-table/data-table.adapter.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShadcnButton } from '../button/button.adapter.js';
+import { ShadcnCheckbox } from '../checkbox/checkbox.adapter.js';
+import { TableColumnFilter } from './filters.adapter.js';
+import { TablePagination } from './pagination.adapter.js';
+export function ShadcnDataTable(props) {
+    const { caption, columns, rows, selection, sorting, filters, onSelectionChange, onSortingChange, onFiltersChange, } = props;
+    if (props.state === 'loading')
+        return _jsx("p", { role: "status", children: "Loading data\u2026" });
+    if (props.state === 'error')
+        return _jsx("p", { role: "alert", children: props.errorMessage ?? 'Unable to load data.' });
+    const variables = {
+        '--reacd-table-columns': columns.length + 1,
+    };
+    return (_jsxs("div", { className: "reacd-vstack", children: [_jsx("div", { className: "reacd-table-scroll", role: "region", "aria-label": caption, tabIndex: 0, children: _jsxs("table", { className: "reacd-table", style: variables, children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Selection" }), columns.map((column) => {
+                                        const sort = sorting.find((rule) => rule.column === column.key);
+                                        return (_jsxs("th", { scope: "col", "aria-sort": sort?.direction ?? 'none', children: [_jsx(ShadcnButton, { label: `Sort ${column.label}`, intent: "secondary", disabled: onSortingChange === undefined, onPress: () => onSortingChange?.(sort?.direction === 'descending'
+                                                        ? []
+                                                        : [
+                                                            {
+                                                                column: column.key,
+                                                                direction: sort === undefined ? 'ascending' : 'descending',
+                                                            },
+                                                        ]) }), _jsx(TableColumnFilter, { column: column, filters: filters, onFiltersChange: onFiltersChange })] }, column.key));
+                                    })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ShadcnCheckbox, { label: `Select row ${row.id}`, checked: selection.includes(row.id), disabled: onSelectionChange === undefined, onCheckedChange: (checked) => onSelectionChange?.(checked
+                                                ? [...selection, row.id]
+                                                : selection.filter((id) => id !== row.id)) }) }), columns.map((column) => (_jsx("td", { children: String(row.cells[column.key] ?? '') }, column.key)))] }, row.id))) })] }) }), rows.length === 0 && (_jsx("p", { role: "status", children: props.emptyMessage ?? 'No matching rows.' })), _jsx(TablePagination, { ...props })] }));
+}

package/dist/data-table/filters.adapter.d.ts

@@ -0,0 +1,8 @@
+import type { DataTableProps } from '@fastsprout/reacd/adapter-runtime/components/data-table/data-table.js';
+type Column = DataTableProps['columns'][number];
+export declare function TableColumnFilter({ column, filters, onFiltersChange, }: {
+    column: Column;
+    filters: DataTableProps['filters'];
+    onFiltersChange: DataTableProps['onFiltersChange'];
+}): import("react").JSX.Element;
+export {};

package/dist/data-table/filters.adapter.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { DATA_TABLE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/data-table-policy.js';
+import { Input } from '../vendor/ui/input.js';
+import { Label } from '../vendor/ui/label.js';
+import { ShadcnSelect } from '../select/select.adapter.js';
+export function TableColumnFilter({ column, filters, onFiltersChange, }) {
+    const id = useId();
+    const current = filters.find((filter) => filter.column === column.key);
+    function change(input) {
+        const value = column.kind === 'boolean' && input === DATA_TABLE_POLICY.allFilterValue
+            ? ''
+            : input;
+        const remaining = filters.filter((filter) => filter.column !== column.key);
+        const scalar = column.kind === 'number'
+            ? Number(value)
+            : column.kind === 'boolean'
+                ? value === 'true'
+                : value;
+        onFiltersChange?.(value === ''
+            ? remaining
+            : [
+                ...remaining,
+                {
+                    column: column.key,
+                    operator: column.kind === 'text' ? 'contains' : 'equals',
+                    value: scalar,
+                },
+            ]);
+    }
+    const value = current === undefined ? '' : String(current.value);
+    const label = `Filter ${column.label}`;
+    if (column.kind === 'boolean')
+        return (_jsx(ShadcnSelect, { label: label, value: value === '' ? DATA_TABLE_POLICY.allFilterValue : value, items: [
+                { value: DATA_TABLE_POLICY.allFilterValue, label: 'All' },
+                { value: 'true', label: 'True' },
+                { value: 'false', label: 'False' },
+            ], disabled: onFiltersChange === undefined, onValueChange: change }));
+    return (_jsxs("div", { className: "reacd-field", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, className: "reacd-input", value: value, type: column.kind === 'number' ? 'number' : 'search', disabled: onFiltersChange === undefined, onChange: (event) => change(event.currentTarget.value) })] }));
+}

package/dist/data-table/pagination.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from '@fastsprout/reacd/adapter-runtime/components/data-table/data-table.js';
+export declare function TablePagination({ pagination, pageCount, totalRows, filteredRows, onPaginationChange, }: DataTableProps): import("react").JSX.Element;

package/dist/data-table/pagination.adapter.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DATA_TABLE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/data-table-policy.js';
+import { ShadcnButton } from '../button/button.adapter.js';
+import { ShadcnSelect } from '../select/select.adapter.js';
+export function TablePagination({ pagination, pageCount, totalRows, filteredRows, onPaginationChange, }) {
+    const { pageIndex, pageSize } = pagination;
+    const sizes = [...new Set([...DATA_TABLE_POLICY.pageSizes, pageSize])].sort((left, right) => left - right);
+    const disabled = onPaginationChange === undefined;
+    const pageLabel = `Page ${pageIndex + DATA_TABLE_POLICY.pageStep} of ${pageCount}.`;
+    const rowLabel = `${filteredRows} of ${totalRows} rows.`;
+    return (_jsxs("div", { className: "reacd-hstack", "aria-label": "Table pagination", children: [_jsxs("p", { role: "status", children: [pageLabel, " ", rowLabel] }), _jsx(ShadcnButton, { label: "Previous page", intent: "secondary", disabled: disabled || pageIndex === DATA_TABLE_POLICY.firstPageIndex, onPress: () => onPaginationChange?.({
+                    ...pagination,
+                    pageIndex: pageIndex - DATA_TABLE_POLICY.pageStep,
+                }) }), _jsx(ShadcnButton, { label: "Next page", intent: "secondary", disabled: disabled || pageIndex + DATA_TABLE_POLICY.pageStep >= pageCount, onPress: () => onPaginationChange?.({
+                    ...pagination,
+                    pageIndex: pageIndex + DATA_TABLE_POLICY.pageStep,
+                }) }), _jsx(ShadcnSelect, { label: "Rows per page", value: String(pageSize), disabled: disabled, items: sizes.map((size) => ({ value: String(size), label: String(size) })), onValueChange: (value) => onPaginationChange?.({
+                    pageSize: Number(value),
+                    pageIndex: DATA_TABLE_POLICY.firstPageIndex,
+                }) })] }));
+}

package/dist/divider/divider.adapter.d.ts

@@ -0,0 +1 @@
+export declare function ShadcnDivider(): import("react").JSX.Element;

package/dist/divider/divider.adapter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from '../vendor/ui/separator.js';
+export function ShadcnDivider() {
+    return _jsx(Separator, { className: "reacd-node reacd-divider", decorative: false });
+}

package/dist/drawer/drawer.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { DrawerProps } from '@fastsprout/reacd/adapter-runtime/components/drawer/index.js';
+export declare function ShadcnDrawer({ title, description, open, onOpenChange, triggerLabel, children, footer, disabled, dismissible, closeLabel, modal, overlay, fullscreen, retainContent, placement, handle, }: DrawerProps): import("react").JSX.Element;

package/dist/drawer/drawer.adapter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from '@base-ui/react/drawer';
+import { MODAL_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/modal-policy.js';
+import { PANEL_DEFAULTS, PANEL_SWIPE, resolvePanelEdge, } from '@fastsprout/reacd/adapter-runtime/core/panel-policy.js';
+import { EscapeScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-context.js';
+import { initialLayerFocus } from '@fastsprout/reacd/adapter-runtime/renderer/theme/initial-layer-focus.js';
+import { PortalActiveContext, PortalHostContext, } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { Button } from '../vendor/ui/button.js';
+import { usePanelFrame } from '../panel/use-panel-frame.js';
+export function ShadcnDrawer({ title, description, open, onOpenChange, triggerLabel, children, footer, disabled, dismissible, closeLabel = MODAL_DEFAULTS.closeLabel, modal = MODAL_DEFAULTS.modal, overlay = MODAL_DEFAULTS.overlay, fullscreen = MODAL_DEFAULTS.fullscreen, retainContent = MODAL_DEFAULTS.retainContent, placement = PANEL_DEFAULTS.drawer, handle = PANEL_DEFAULTS.handle, }) {
+    const { active, change, direction, escapeScope, host, setHost, variables, dismissible: canDismiss, } = usePanelFrame({ open, onOpenChange, dismissible });
+    const edge = resolvePanelEdge(placement, direction);
+    return (_jsxs(Drawer.Root, { open: active, modal: modal, onOpenChange: change, disablePointerDismissal: !canDismiss, swipeDirection: PANEL_SWIPE[edge], children: [triggerLabel !== undefined && (_jsx(Drawer.Trigger, { disabled: disabled, render: _jsx(Button, { className: "reacd-node reacd-button" }), children: triggerLabel })), _jsxs(Drawer.Portal, { keepMounted: retainContent, hidden: !active, className: "reacd-root reacd-portal-root reacd-edge-portal", style: variables, dir: direction, children: [modal && overlay && _jsx(Drawer.Backdrop, { className: "reacd-modal-backdrop" }), _jsx(Drawer.Viewport, { className: "reacd-edge-viewport", "data-modal": modal, children: _jsx(Drawer.Popup, { ref: setHost, initialFocus: (interaction) => initialLayerFocus(host, interaction), className: "reacd-edge-panel reacd-drawer-panel", "data-edge": edge, "data-fullscreen": fullscreen, "aria-modal": modal, children: _jsx(PortalHostContext.Provider, { value: host, children: _jsx(EscapeScopeContext.Provider, { value: escapeScope, children: _jsxs(PortalActiveContext.Provider, { value: active, children: [handle && (_jsx("div", { className: "reacd-drawer-grip", "aria-hidden": "true", children: _jsx("div", { className: "reacd-drawer-handle" }) })), _jsxs(Drawer.Content, { children: [_jsxs("header", { className: "reacd-modal-header", children: [_jsx(Drawer.Title, { children: title }), _jsx(Drawer.Description, { children: description })] }), _jsx("div", { className: "reacd-modal-body", children: children }), _jsxs("footer", { className: "reacd-modal-footer", children: [footer, _jsx(Drawer.Close, { render: _jsx(Button, { variant: "secondary", className: "reacd-node reacd-button" }), children: closeLabel })] })] })] }) }) }) }) })] })] }));
+}

package/dist/dropdown-menu/dropdown-menu.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { DropdownMenuProps } from '@fastsprout/reacd/adapter-runtime/components/dropdown-menu/index.js';
+export declare function ShadcnDropdownMenu(properties: DropdownMenuProps): import("react").JSX.Element;

package/dist/dropdown-menu/dropdown-menu.adapter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@base-ui/react/menu';
+import { ACTION_MENU_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/action-menu-policy.js';
+import { EscapeScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/escape-context.js';
+import { useMenuFrame } from '../action-menu/use-menu-frame.js';
+import { MenuItems } from '../action-menu/menu-items.js';
+import { MenuSurface } from '../action-menu/menu-surface.js';
+import { MenuContent } from '../action-menu/menu-content.js';
+import { Button } from '../vendor/ui/button.js';
+export function ShadcnDropdownMenu(properties) {
+    const { label, items, disabled, onOpenChange } = properties;
+    const { active, scope, change } = useMenuFrame(properties);
+    return (_jsxs(Menu.Root, { open: active, onOpenChange: change, modal: properties.modal ?? ACTION_MENU_DEFAULTS.modal, disabled: disabled, children: [_jsx(Menu.Trigger, { disabled: disabled, render: _jsx(Button, { className: "reacd-node reacd-button" }), children: label }), _jsx(MenuSurface, { label: label, children: _jsx(EscapeScopeContext.Provider, { value: scope, children: _jsx(MenuContent, { close: () => onOpenChange(false), children: _jsx(MenuItems, { items: items }) }) }) })] }));
+}

package/dist/editor/drag-session.d.ts

@@ -0,0 +1,7 @@
+import type { EditorDocument } from '@fastsprout/reacd/adapter-runtime/core/editor-document.js';
+export declare function createEditorDragSession(): {
+    begin(document: EditorDocument, id: string): boolean;
+    cancel(): void;
+    drop(document: EditorDocument, target: EventTarget | null, clientY: number, root: HTMLElement): EditorDocument | undefined;
+};
+export type EditorDragSession = ReturnType<typeof createEditorDragSession>;

package/dist/editor/drag-session.js

@@ -0,0 +1,41 @@
+import { editorBlockMoves } from '@fastsprout/reacd/adapter-runtime/core/editor-reorder.js';
+import { moveEditorBlockTo } from '@fastsprout/reacd/adapter-runtime/core/editor-drop.js';
+import { EDITOR_NATIVE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-native-policy.js';
+import { stateKeySchema } from '@fastsprout/reacd/adapter-runtime/schema/state/shared/definition.js';
+export function createEditorDragSession() {
+    let source;
+    return {
+        begin(document, id) {
+            const moves = editorBlockMoves(document, id);
+            source = moves.up || moves.down ? id : undefined;
+            return source !== undefined;
+        },
+        cancel() {
+            source = undefined;
+        },
+        drop(document, target, clientY, root) {
+            const current = source;
+            source = undefined;
+            if (current === undefined ||
+                !(target instanceof Element) ||
+                !root.contains(target))
+                return undefined;
+            let element = target.closest(EDITOR_NATIVE_POLICY.blockSelector);
+            while (element !== null && root.contains(element)) {
+                const id = stateKeySchema.safeParse(element.getAttribute(EDITOR_NATIVE_POLICY.blockAttribute));
+                if (id.success) {
+                    const rectangle = element.getBoundingClientRect();
+                    const placement = clientY < rectangle.top + rectangle.height * EDITOR_NATIVE_POLICY.dropSplit
+                        ? 'before'
+                        : 'after';
+                    const moved = moveEditorBlockTo(document, current, id.data, placement);
+                    if (moved.success)
+                        return moved.data;
+                }
+                element =
+                    element.parentElement?.closest(EDITOR_NATIVE_POLICY.blockSelector) ?? null;
+            }
+            return undefined;
+        },
+    };
+}

package/dist/editor/editor.adapter.d.ts

@@ -0,0 +1,2 @@
+import type { EditorProps } from '@fastsprout/reacd/adapter-runtime/components/editor/index.js';
+export declare function ShadcnEditor(properties: EditorProps): import("react").JSX.Element;

package/dist/editor/editor.adapter.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from 'react';
+import { EditorContent } from '@tiptap/react';
+import { EDITOR_DEFAULTS } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { EditorScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/editor/editor-context.js';
+import { editorPlainText } from '@fastsprout/reacd/adapter-runtime/renderer/editor/plain-text.js';
+import { useEditorSession } from './use-editor-session.js';
+import { createEditorPort } from './use-editor-port.js';
+import { EditorMenuScopeContext } from '@fastsprout/reacd/adapter-runtime/renderer/editor/menu-context.js';
+import { createEditorMenuPort } from '../editor-menu/menu-port.js';
+import { EditorBoundary } from '@fastsprout/reacd/adapter-runtime/renderer/editor/editor-boundary.js';
+function EditorSurface(properties) {
+    const id = useId();
+    const { editor, ready, issue, protectedView, drag, properties: effective, } = useEditorSession(properties, id);
+    const port = createEditorPort(editor, effective, protectedView || !ready, drag);
+    const menu = useMemo(() => createEditorMenuPort(editor, protectedView || !ready), [editor, protectedView, ready]);
+    return (_jsx(EditorScopeContext, { value: port, children: _jsx(EditorMenuScopeContext, { value: menu, children: _jsxs("div", { className: "reacd-node reacd-editor", children: [_jsx("div", { id: `${id}-label`, className: "reacd-editor-label", children: properties.label }), _jsx("div", { id: `${id}-description`, children: properties.description }), properties.toolbar, !ready && (_jsxs("div", { role: "region", "aria-label": `${properties.label} preview`, className: "reacd-editor-preview", children: [editorPlainText(properties.value), _jsx("span", { role: "status", children: EDITOR_DEFAULTS.loadingLabel })] })), _jsx("div", { hidden: !ready, className: "reacd-editor-content", children: _jsx(EditorContent, { editor: editor }) }), issue !== undefined && _jsx("p", { role: "alert", children: issue }), properties.children] }) }) }));
+}
+export function ShadcnEditor(properties) {
+    return (_jsx(EditorBoundary, { children: _jsx(EditorSurface, { ...properties }) }));
+}

package/dist/editor/publish-edit.d.ts

@@ -0,0 +1,3 @@
+import type { EditorProps } from '@fastsprout/reacd/adapter-runtime/components/editor/index.js';
+import type { EditorDocument, EditorSelection } from '@fastsprout/reacd/adapter-runtime/core/editor-document.js';
+export declare function publishEditorDocument(properties: EditorProps, value: EditorDocument, selection: EditorSelection | undefined): boolean;

package/dist/editor/publish-edit.js

@@ -0,0 +1,12 @@
+import { editorSelectionSchema } from '@fastsprout/reacd/adapter-runtime/schema/editor/document/index.js';
+export function publishEditorDocument(properties, value, selection) {
+    if (properties.onEditChange !== undefined) {
+        const parsed = editorSelectionSchema(value).safeParse(selection);
+        if (!parsed.success)
+            return false;
+        properties.onEditChange(Object.freeze({ value, selection: parsed.data }));
+    }
+    else
+        properties.onValueChange(value);
+    return true;
+}

package/dist/editor/use-editor-port.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from '@tiptap/core';
+import type { EditorProps } from '@fastsprout/reacd/adapter-runtime/components/editor/index.js';
+import type { EditorPort } from '@fastsprout/reacd/adapter-runtime/renderer/editor/editor-context.js';
+import type { EditorDragSession } from './drag-session.js';
+export declare function createEditorPort(editor: Editor | null, properties: EditorProps, disabled: boolean, drag: EditorDragSession): EditorPort;

package/dist/editor/use-editor-port.js

@@ -0,0 +1,40 @@
+import { editorBlockMoves, moveEditorBlock, } from '@fastsprout/reacd/adapter-runtime/core/editor-reorder.js';
+import { publishEditorDocument } from './publish-edit.js';
+import { selectedSdkBlockId } from '../editor-sdk/structural-selection.js';
+import { selectSdkBlock } from '../editor-sdk/select-block.js';
+import { canRunSdkCommand, runSdkCommand, sdkCommandActive, } from '../editor-sdk/commands.js';
+import { sdkSelectionToDomain } from '../editor-sdk/selection-mapping.js';
+export function createEditorPort(editor, properties, disabled, drag) {
+    const available = !disabled && editor !== null && !editor.isDestroyed;
+    const selection = editor === null
+        ? undefined
+        : sdkSelectionToDomain(editor.state.doc, editor.state.selection);
+    return {
+        document: properties.value,
+        selection,
+        selectedBlockId: (editor === null ? undefined : selectedSdkBlockId(editor.state.selection)) ??
+            selection?.focus.blockId,
+        disabled: !available,
+        active: (command) => available && sdkCommandActive(editor, command),
+        available: (command) => available && canRunSdkCommand(editor, command),
+        execute: (command) => {
+            if (available)
+                runSdkCommand(editor, command);
+        },
+        blockMoves: (id) => editorBlockMoves(properties.value, id),
+        selectBlock: (id) => {
+            if (!available)
+                return;
+            selectSdkBlock(editor, id);
+        },
+        moveBlock: (id, direction) => {
+            if (!available)
+                return;
+            const moved = moveEditorBlock(properties.value, id, direction);
+            if (moved.success)
+                publishEditorDocument(properties, moved.data, selection);
+        },
+        beginBlockDrag: (id) => available && drag.begin(properties.value, id),
+        cancelBlockDrag: () => drag.cancel(),
+    };
+}

package/dist/editor/use-editor-session.d.ts

@@ -0,0 +1,14 @@
+import type { Editor } from '@tiptap/core';
+import type { EditorProps } from '@fastsprout/reacd/adapter-runtime/components/editor/index.js';
+export declare function useEditorSession(input: EditorProps, id: string): {
+    editor: Editor | null;
+    ready: boolean;
+    issue: string | undefined;
+    protectedView: boolean;
+    drag: {
+        begin(document: import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument, id: string): boolean;
+        cancel(): void;
+        drop(document: import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument, target: EventTarget | null, clientY: number, root: HTMLElement): import("@fastsprout/reacd/adapter-runtime/components/editor/index.js").EditorDocument | undefined;
+    };
+    properties: EditorProps;
+};

package/dist/editor/use-editor-session.js

@@ -0,0 +1,198 @@
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEditor } from '@tiptap/react';
+import { EDITOR_BEHAVIOR, EDITOR_ERRORS, } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { PortalActiveContext } from '@fastsprout/reacd/adapter-runtime/renderer/theme/portal-context.js';
+import { useFieldMetadata } from '@fastsprout/reacd/adapter-runtime/renderer/form-field/field-metadata.js';
+import { editorDocumentToSdk } from '../editor-conversion/to-sdk.js';
+import { editorDocumentFromSdk } from '../editor-conversion/from-sdk.js';
+import { createEditorExtensions } from '../editor-sdk/extensions.js';
+import { domainSelectionToSdk, sdkSelectionToDomain, } from '../editor-sdk/selection-mapping.js';
+import { buildEditorPlainPaste } from '../editor-sdk/plain-paste.js';
+import { applyEditorPlainPaste } from '../editor-sdk/apply-paste.js';
+import { createEditorDragSession } from './drag-session.js';
+import { EDITOR_NATIVE_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-native-policy.js';
+import { sameEditorSelection } from '../editor-sdk/controlled-selection.js';
+import { selectedSdkBlockId, sdkBlockPosition, } from '../editor-sdk/structural-selection.js';
+import { publishEditorDocument } from './publish-edit.js';
+import { createEditorResources } from '../editor-sdk/resources.js';
+const CONTROLLED_TRANSACTION = EDITOR_NATIVE_POLICY.controlledTransaction;
+export function useEditorSession(input, id) {
+    const metadata = useFieldMetadata({ disabled: input.disabled }, [
+        `${id}-description`,
+    ]);
+    const properties = { ...input, disabled: metadata.disabled };
+    const active = useContext(PortalActiveContext);
+    const [drag] = useState(createEditorDragSession);
+    const [resources] = useState(createEditorResources);
+    useEffect(() => () => resources.dispose(), [resources]);
+    const [ready, setReady] = useState(false);
+    const [issue, setIssue] = useState();
+    const [revision, setRevision] = useState(0);
+    const hydrated = useRef(undefined);
+    const refresh = () => setRevision((previous) => previous + 1);
+    const [extensions] = useState(() => createEditorExtensions({
+        onRejected: () => setIssue(EDITOR_ERRORS.rejected),
+    }));
+    const protectedView = !active || properties.disabled === true || properties.readOnly === true;
+    const editor = useEditor({
+        extensions,
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+        injectCSS: false,
+        enableInputRules: EDITOR_BEHAVIOR.automaticInputRules,
+        content: editorDocumentToSdk(properties.value),
+        editable: !protectedView,
+        onBeforeCreate: ({ editor: current }) => resources.capture(current),
+        onCreate: () => setReady(true),
+        onTransaction: ({ transaction }) => {
+            if (transaction.getMeta(CONTROLLED_TRANSACTION) ||
+                (!transaction.docChanged && transaction.storedMarksSet))
+                refresh();
+        },
+        onUpdate: ({ editor: current, transaction }) => {
+            try {
+                if (protectedView || transaction.getMeta(CONTROLLED_TRANSACTION))
+                    return;
+                const projected = editorDocumentFromSdk(current.state.doc);
+                if (!projected.success) {
+                    setIssue(EDITOR_ERRORS.projection);
+                    return;
+                }
+                setIssue(undefined);
+                if (!publishEditorDocument(properties, projected.data, sdkSelectionToDomain(current.state.doc, current.state.selection)))
+                    setIssue(EDITOR_NATIVE_POLICY.selectionError);
+            }
+            finally {
+                refresh();
+            }
+        },
+        onSelectionUpdate: ({ editor: current, transaction }) => {
+            if (transaction.docChanged)
+                return;
+            try {
+                if (!active ||
+                    properties.disabled === true ||
+                    transaction.getMeta(CONTROLLED_TRANSACTION))
+                    return;
+                if (properties.onEditChange === undefined ||
+                    !current.state.doc.eq(current.schema.nodeFromJSON(editorDocumentToSdk(properties.value))))
+                    return;
+                const selection = sdkSelectionToDomain(current.state.doc, current.state.selection);
+                if (selection !== undefined &&
+                    !sameEditorSelection(selection, properties.selection))
+                    publishEditorDocument(properties, properties.value, selection);
+            }
+            finally {
+                refresh();
+            }
+        },
+        editorProps: {
+            attributes: {
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-labelledby': `${id}-label`,
+                'aria-describedby': metadata.descriptionIds.join(' '),
+                'aria-invalid': String(metadata.error.length > 0),
+                'aria-placeholder': properties.placeholder ?? '',
+                'aria-readonly': String(properties.readOnly === true),
+                'aria-disabled': String(properties.disabled === true || !active),
+                tabindex: properties.disabled === true || !active ? '-1' : '0',
+                'data-placeholder': properties.placeholder ?? '',
+            },
+            handlePaste: (view, event) => {
+                if (protectedView)
+                    return true;
+                const clipboard = event.clipboardData;
+                if (clipboard === null)
+                    return true;
+                const projected = buildEditorPlainPaste(clipboard.getData('text/plain'), view.state.selection.$from.parent.type.name === 'codeBlock'
+                    ? 'code'
+                    : 'inline');
+                if (!projected.success) {
+                    setIssue(EDITOR_ERRORS.rejected);
+                    return true;
+                }
+                if (projected.data.length > 0)
+                    applyEditorPlainPaste(view, projected.data);
+                return true;
+            },
+            handleDrop: (view, event) => {
+                if (protectedView) {
+                    drag.cancel();
+                    return true;
+                }
+                const next = drag.drop(properties.value, event.target, event.clientY, view.dom);
+                if (next !== undefined && next !== properties.value)
+                    publishEditorDocument(properties, next, sdkSelectionToDomain(view.state.doc, view.state.selection));
+                return true;
+            },
+        },
+    });
+    useEffect(() => () => drag.cancel(), [drag]);
+    useLayoutEffect(() => {
+        if (editor === null || !ready)
+            return;
+        const value = editor.schema.nodeFromJSON(editorDocumentToSdk(properties.value));
+        const previous = hydrated.current;
+        if (previous !== undefined &&
+            previous.document.eq(value) &&
+            sameEditorSelection(previous.selection, properties.selection) &&
+            previous.protectedView === protectedView &&
+            previous.revision === revision)
+            return;
+        hydrated.current = {
+            document: value,
+            selection: properties.selection,
+            protectedView,
+            revision,
+        };
+        if (editor.isEditable !== !protectedView)
+            editor.setEditable(!protectedView, false);
+        if (protectedView)
+            drag.cancel();
+        const changed = !editor.state.doc.eq(value);
+        const selectedBlock = selectedSdkBlockId(editor.state.selection);
+        const logical = sdkSelectionToDomain(editor.state.doc, editor.state.selection);
+        if (changed)
+            editor
+                .chain()
+                .setMeta(CONTROLLED_TRANSACTION, true)
+                .setMeta('addToHistory', false)
+                .setContent(value, { emitUpdate: false, errorOnInvalidContent: true })
+                .run();
+        const selection = properties.selection ?? logical;
+        const controlled = properties.selection !== undefined;
+        if (selection !== undefined &&
+            ((controlled &&
+                !sameEditorSelection(sdkSelectionToDomain(editor.state.doc, editor.state.selection), selection)) ||
+                (!controlled && changed))) {
+            const structural = !controlled && selectedBlock !== undefined
+                ? sdkBlockPosition(editor.state.doc, selectedBlock)
+                : undefined;
+            const mapped = domainSelectionToSdk(editor.state.doc, selection);
+            if (structural !== undefined)
+                editor
+                    .chain()
+                    .setMeta(CONTROLLED_TRANSACTION, true)
+                    .setMeta('addToHistory', false)
+                    .setNodeSelection(structural)
+                    .run();
+            else if (mapped.success)
+                editor
+                    .chain()
+                    .setMeta(CONTROLLED_TRANSACTION, true)
+                    .setMeta('addToHistory', false)
+                    .setTextSelection({ from: mapped.data.anchor, to: mapped.data.head })
+                    .run();
+        }
+    }, [
+        editor,
+        ready,
+        protectedView,
+        properties.value,
+        properties.selection,
+        drag,
+        revision,
+    ]);
+    return { editor, ready, issue, protectedView, drag, properties };
+}

package/dist/editor-conversion/attribute.d.ts

@@ -0,0 +1,3 @@
+export declare function sdkAttribute(entity: {
+    readonly attrs: Readonly<Record<string, unknown>>;
+}, key: string): unknown;

package/dist/editor-conversion/attribute.js

@@ -0,0 +1,3 @@
+export function sdkAttribute(entity, key) {
+    return entity.attrs[key];
+}

package/dist/editor-conversion/budget.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from '@tiptap/pm/model';
+export declare function boundedSdkDocument(document: Node): boolean;

package/dist/editor-conversion/budget.js

@@ -0,0 +1,61 @@
+import { EDITOR_POLICY } from '@fastsprout/reacd/adapter-runtime/core/editor-policy.js';
+import { EDITOR_SDK_BLOCK_TYPES } from '../editor-sdk/block-types.js';
+import { sdkProjectionWeight } from './projection-weight.js';
+const BLOCKS = new Set(EDITOR_SDK_BLOCK_TYPES);
+const INLINE_CONTAINERS = new Set(['paragraph', 'heading', 'codeBlock']);
+export function boundedSdkDocument(document) {
+    if (document.type.name !== 'doc')
+        return false;
+    const pending = [];
+    const ancestry = new WeakSet();
+    let values = 0;
+    let characters = 0;
+    let blocks = 0;
+    let positions = 0;
+    function reserve(node, depth, inCode) {
+        if (ancestry.has(node) ||
+            depth > EDITOR_POLICY.maxDepth ||
+            positions >= EDITOR_POLICY.maxValues)
+            return false;
+        const limit = INLINE_CONTAINERS.has(node.type.name)
+            ? EDITOR_POLICY.maxInlines
+            : EDITOR_POLICY.maxChildren;
+        if (node.childCount > limit ||
+            node.marks.length > EDITOR_POLICY.maxMarks + EDITOR_POLICY.maxLinksPerText)
+            return false;
+        const weight = sdkProjectionWeight(node, inCode);
+        values += weight.values;
+        characters += weight.characters;
+        blocks += BLOCKS.has(node.type.name) ? 1 : 0;
+        positions += 1;
+        if (depth + weight.extraDepth > EDITOR_POLICY.maxDepth ||
+            values > EDITOR_POLICY.maxValues ||
+            positions > EDITOR_POLICY.maxValues ||
+            characters > EDITOR_POLICY.maxCharacters ||
+            blocks > EDITOR_POLICY.maxBlocks)
+            return false;
+        pending.push({ node, depth, inCode, leaving: false });
+        return true;
+    }
+    try {
+        if (!reserve(document, 0, false))
+            return false;
+        for (let position = pending.pop(); position !== undefined; position = pending.pop()) {
+            const { node, depth } = position;
+            if (position.leaving) {
+                ancestry.delete(node);
+                continue;
+            }
+            ancestry.add(node);
+            pending.push({ ...position, leaving: true });
+            const inCode = node.type.name === 'codeBlock';
+            for (let index = node.childCount - 1; index >= 0; index -= 1)
+                if (!reserve(node.child(index), depth + (inCode ? 1 : 2), inCode))
+                    return false;
+        }
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/editor-conversion/from-sdk-block.d.ts

@@ -0,0 +1,5 @@
+import type { Node } from '@tiptap/pm/model';
+type Allocator = (node: Node) => string;
+export declare function sdkChildren(node: Node, project: (child: Node) => unknown): unknown[];
+export declare function blockFromSdk(node: Node, identify: Allocator): unknown;
+export {};