@case-framework/survey-editor-ui 0.5.0 → 0.6.1

package/README.md

@@ -12,6 +12,11 @@ For repository development and custom item registration, see
 Save or Back. The host owns persistence, routing, and its header; the editor
 owns survey mutations and undo/redo history.
 
+The main editor export includes the assistant launcher UI. Host applications
+must provide versions of `ai` and `@ai-sdk/react` compatible with the peer
+ranges in `package.json`. The assistant's Mastra peers remain optional because
+they are only needed by server integrations.
+
 Use `controllerRef` for host-triggered commands and `onHostStateChange` to keep
 host controls in sync with the editor:
 

package/dist/src/components/c-ui/confirm-dialog.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface RequireConfirmationInput {
     confirmTerm: string;
     /** Custom label with {{confirmTerm}} placeholder for the required term (bold). Default: "Type {{confirmTerm}} to confirm" */
@@ -14,6 +15,7 @@ interface ConfirmDialogProps {
     variant: "default" | "destructive";
     isOpen: boolean;
     requireConfirmationInput?: RequireConfirmationInput;
+    children?: ReactNode;
 }
 declare const ConfirmDialog: (props: ConfirmDialogProps) => import("react").JSX.Element;
 export default ConfirmDialog;

package/dist/src/components/c-ui/confirm-provider.d.ts

@@ -8,6 +8,7 @@ interface ConfirmOptions {
     cancelButtonText?: string;
     variant?: "default" | "destructive";
     requireConfirmationInput?: RequireConfirmationInput;
+    children?: ReactNode | ((cancel: () => void) => ReactNode);
 }
 export declare const ConfirmDialogProvider: ({ children }: {
     children: ReactNode;

package/dist/src/components/rich-text-editor/plugins/docked-toolbar-plugin.d.ts

@@ -1,10 +1,12 @@
 import { RefObject } from 'react';
 import { RichTextStyleControl, RichTextTemplateVariable } from '../rich-text-editor-utils';
 /** A stable, in-flow toolbar for longer block editors. */
-export declare function DockedToolbarPlugin({ editable, visibility, position, linksEnabled, blockAlignmentEnabled, surfaceRef, toolbarClassName, styleControls, templateVariables, bulletListsEnabled, headingsEnabled, infoBoxesEnabled, imagesEnabled, separatorsEnabled, }: {
+export declare function DockedToolbarPlugin({ editable, visibility, position, editorOwnerId, sticky, linksEnabled, blockAlignmentEnabled, surfaceRef, toolbarClassName, styleControls, templateVariables, bulletListsEnabled, headingsEnabled, infoBoxesEnabled, imagesEnabled, separatorsEnabled, }: {
     editable: boolean;
     visibility: "active" | "always";
     position: "flow" | "above";
+    editorOwnerId: string;
+    sticky: boolean;
     linksEnabled: boolean;
     blockAlignmentEnabled: boolean;
     surfaceRef: RefObject<HTMLDivElement | null>;

package/dist/src/components/rich-text-editor/plugins/slash-command-menu-plugin.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { RichTextStyleControl, RichTextTemplateVariable } from '../rich-text-editor-utils';
-export declare function SlashCommandMenuPlugin({ editable, linksEnabled, bulletListsEnabled, headingsEnabled, infoBoxesEnabled, imagesEnabled, separatorsEnabled, surfaceRef, styleControls, templateVariables, commandMenuClassName, }: {
+export declare function SlashCommandMenuPlugin({ editable, linksEnabled, bulletListsEnabled, headingsEnabled, infoBoxesEnabled, imagesEnabled, separatorsEnabled, editorOwnerId, surfaceRef, styleControls, templateVariables, commandMenuClassName, }: {
     editable: boolean;
     linksEnabled: boolean;
     bulletListsEnabled?: boolean;
@@ -8,6 +8,7 @@ export declare function SlashCommandMenuPlugin({ editable, linksEnabled, bulletL
     infoBoxesEnabled?: boolean;
     imagesEnabled?: boolean;
     separatorsEnabled?: boolean;
+    editorOwnerId: string;
     surfaceRef: RefObject<HTMLDivElement | null>;
     styleControls: RichTextStyleControl[];
     templateVariables: RichTextTemplateVariable[];

package/dist/src/components/rich-text-editor/rich-text-editor.d.ts

@@ -30,6 +30,8 @@ export interface RichTextEditorProps {
     dockedToolbarVisibility?: "active" | "always";
     /** Whether a docked toolbar participates in flow or sits immediately above its editor surface. */
     dockedToolbarPosition?: "flow" | "above";
+    /** Keeps an in-flow docked toolbar visible while its block editor scrolls. */
+    dockedToolbarSticky?: boolean;
     commandMenuClassName?: string;
     styleControls?: RichTextStyleControl[];
     templateVariables?: RichTextTemplateVariable[];
@@ -49,4 +51,4 @@ export interface RichTextEditorProps {
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>;
 }
-export declare function RichTextEditor({ id, value, placeholder, autoFocus, autoFocusSelection, editable, wrapperClassName, surfaceClassName, contentClassName, endOfContentEditingArea, placeholderClassName, toolbarClassName, toolbarMode, dockedToolbarVisibility, dockedToolbarPosition, commandMenuClassName, styleControls, templateVariables, editorVariant, contentPolicy, resolveImageAssetUrl, imageAssets, registerImageAsset, imageAssetDeletion, linksEnabled, "aria-label": ariaLabel, onChange, onFocus, onBlur, onKeyDown, onKeyDownCapture, }: RichTextEditorProps): import("react").JSX.Element;
+export declare function RichTextEditor({ id, value, placeholder, autoFocus, autoFocusSelection, editable, wrapperClassName, surfaceClassName, contentClassName, endOfContentEditingArea, placeholderClassName, toolbarClassName, toolbarMode, dockedToolbarVisibility, dockedToolbarPosition, dockedToolbarSticky, commandMenuClassName, styleControls, templateVariables, editorVariant, contentPolicy, resolveImageAssetUrl, imageAssets, registerImageAsset, imageAssetDeletion, linksEnabled, "aria-label": ariaLabel, onChange, onFocus, onBlur, onKeyDown, onKeyDownCapture, }: RichTextEditorProps): import("react").JSX.Element;

package/dist/src/components/rich-text-editor/rich-text-menu-styles.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+export declare const RICH_TEXT_MENU_SURFACE_CLASS = "rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10";
+export declare const RICH_TEXT_MENU_ITEM_CLASS = "min-h-8 gap-2 px-2 py-1.5 text-xs";
+export declare const RICH_TEXT_MENU_LABEL_CLASS = "px-2 py-1 text-[0.7rem] font-medium uppercase tracking-wide text-muted-foreground";
+/** Copies editor-scoped theme tokens onto menu portals, which otherwise inherit from `body`. */
+export declare function getRichTextPortalThemeStyle(source: Element | null): CSSProperties | undefined;

package/dist/src/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/src/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "sm" | "default" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/src/modules/default-item-registry/items/form/model.d.ts

@@ -1,6 +1,7 @@
 import { SurveyItemTranslations } from '@case-framework/survey-core';
 export type FormFieldType = "input" | "textarea" | "number" | "datepicker" | "switch" | "select" | "slider";
 export declare const FORM_DATEPICKER_FIELD_MODES: readonly ["year", "year-month", "year-month-day"];
+export declare const FORM_BROWSER_AUTOCOMPLETE_OPTIONS: readonly ["name", "given-name", "family-name", "nickname", "email", "username", "organization", "organization-title", "street-address", "address-line1", "address-line2", "address-level2", "address-level1", "postal-code", "country-name", "tel", "url", "one-time-code"];
 export type FormDatepickerFieldMode = (typeof FORM_DATEPICKER_FIELD_MODES)[number];
 export interface FormFieldRendererSlotDefinition {
     id: "field" | "label" | "description" | "error";

package/dist/src/modules/default-item-registry/shared/question-editor/deferred-localized-rich-text-field.d.ts

@@ -19,6 +19,7 @@ export interface DeferredLocalizedRichTextFieldProps {
     contentClassName?: string;
     endOfContentEditingArea?: boolean;
     placeholderClassName?: string;
+    toolbarClassName?: string;
     styleControls?: RichTextStyleControl[];
     templateVariables?: RichTextTemplateVariable[];
     toolbarMode?: "floating" | "docked" | "none";

package/dist/src/modules/survey-editor/editor-card/index.d.ts

@@ -1,6 +1,7 @@
 interface ItemEditorCardProps {
     itemId?: string;
     presentation?: "workspace" | "inline" | "fullscreen";
+    provideApplyContext?: boolean;
 }
 declare const ItemEditorCard: React.FC<ItemEditorCardProps>;
 export default ItemEditorCard;

package/dist/src/modules/survey-editor/editor-card/item-authoring-state-preview.d.ts

@@ -1,17 +1,14 @@
-import { ReactNode } from 'react';
-import { ItemAuthoringState } from '../../../../modules/survey-editor/registry';
+import { ComponentType } from 'react';
 interface ItemAuthoringStatePreviewProps {
-    state: ItemAuthoringState;
     itemTypeLabel: string;
+    icon: ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    color?: string;
     onEdit?: () => void;
     description?: string;
     className?: string;
 }
-export declare function ItemAuthoringStatePreview({ state, itemTypeLabel, onEdit, description, className, }: ItemAuthoringStatePreviewProps): import("react").JSX.Element;
-interface IncompleteItemPreviewFrameProps {
-    children: ReactNode;
-    onEdit?: () => void;
-    className?: string;
-}
-export declare function IncompleteItemPreviewFrame({ children, onEdit, className, }: IncompleteItemPreviewFrameProps): import("react").JSX.Element;
+export declare function ItemAuthoringStatePreview({ itemTypeLabel, icon: Icon, color, onEdit, description, className, }: ItemAuthoringStatePreviewProps): import("react").JSX.Element;
 export {};

package/dist/src/modules/survey-editor/editor-card/item-color-menu.d.ts

@@ -1,6 +1,7 @@
 interface ItemColorMenuProps {
     itemId: string;
+    disabled?: boolean;
 }
-export declare const DropdownItemColorMenu: ({ itemId }: ItemColorMenuProps) => import("react").JSX.Element;
+export declare const DropdownItemColorMenu: ({ itemId, disabled }: ItemColorMenuProps) => import("react").JSX.Element;
 export declare const ContextItemColorMenu: ({ itemId }: ItemColorMenuProps) => import("react").JSX.Element;
 export {};

package/dist/src/modules/survey-editor/editor-card/item-editing-header.d.ts

@@ -0,0 +1,17 @@
+import { SurveyItemCore } from '@case-framework/survey-core';
+export type ItemEditingPresentation = "inline" | "fullscreen";
+export type EditorSide = "left" | "right";
+interface ItemEditingHeaderProps {
+    item: SurveyItemCore;
+    presentation: ItemEditingPresentation;
+    color: string;
+    previewVisible: boolean;
+    editorSide: EditorSide;
+    afterDeleteItemId?: string | null;
+    onPreviewVisibilityChange: () => void;
+    onEditorSideChange: (side: EditorSide) => void;
+    onFullscreenToggle: () => void;
+    onClose: () => void;
+}
+export declare const ItemEditingHeader: ({ item, presentation, color, previewVisible, editorSide, afterDeleteItemId, onPreviewVisibilityChange, onEditorSideChange, onFullscreenToggle, onClose, }: ItemEditingHeaderProps) => import("react").JSX.Element;
+export {};

package/dist/src/modules/survey-editor/editor-card/item-editing-panels.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { Layout } from 'react-resizable-panels';
+import { EditorSide } from './item-editing-header';
+interface ItemEditingPanelsProps {
+    fillHeight: boolean;
+    horizontal: boolean;
+    editorSide: EditorSide;
+    previewVisible: boolean;
+    initialLayout?: Layout;
+    editor: ReactNode;
+    preview: ReactNode;
+    resizeLabel: string;
+    onLayoutChanged: (layout: Layout) => void;
+}
+export declare const ItemEditingPanels: ({ fillHeight, horizontal, editorSide, previewVisible, initialLayout, editor, preview, resizeLabel, onLayoutChanged, }: ItemEditingPanelsProps) => import("react").JSX.Element;
+export {};

package/dist/src/modules/survey-editor/editor-card/item-editing-surface-context.d.ts

@@ -0,0 +1,8 @@
+import { ItemEditingPresentation } from './item-editing-header';
+interface ItemEditingSurfaceContextValue {
+    presentation: ItemEditingPresentation;
+}
+export declare const ItemEditingSurfaceProvider: import('react').Provider<ItemEditingSurfaceContextValue | null>;
+export declare const useItemEditingSurface: () => ItemEditingSurfaceContextValue | null;
+export declare const useIsInsideItemEditingSurface: () => boolean;
+export {};

package/dist/src/modules/survey-editor/editor-card/item-editing-surface.d.ts

@@ -0,0 +1,10 @@
+import { SurveyItemCore } from '@case-framework/survey-core';
+import { ItemEditingPresentation } from './item-editing-header';
+interface ItemEditingSurfaceProps {
+    item: SurveyItemCore;
+    presentation: ItemEditingPresentation;
+    afterDeleteItemId?: string | null;
+    className?: string;
+}
+export declare const ItemEditingSurface: (props: ItemEditingSurfaceProps) => import("react").JSX.Element;
+export {};

package/dist/src/modules/survey-editor/editor-card/item-editor-apply-context.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface ItemEditorApplyContextValue {
+    hasPendingChanges: boolean;
+    applyPendingChanges: () => void;
+    registerPendingChange: (id: string, apply: () => void) => () => void;
+    setPendingChange: (id: string, isPending: boolean) => void;
+}
+export declare const ItemEditorApplyProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+interface UseItemEditorApplyActionOptions {
+    id: string;
+    isPending: boolean;
+    apply: () => void;
+}
+/** Lets an editor-owned draft opt into the card-level Apply action. */
+export declare const useItemEditorApplyAction: ({ id, isPending, apply, }: UseItemEditorApplyActionOptions) => void;
+export declare const useItemEditorApply: () => ItemEditorApplyContextValue;
+export {};

package/dist/src/modules/survey-editor/editor-card/item-editor-card.d.ts

@@ -26,5 +26,13 @@ interface ItemEditorCardProps {
     conditionsPopover?: ConditionsPopoverConfig;
     children: ReactNode;
 }
+interface ConditionsIndicatorProps {
+    item: SurveyItemCore;
+    title: string;
+    description?: string;
+    accent: string;
+}
+/** A compact, always-visible summary of an item's branching and validation rules. */
+export declare const ConditionsIndicator: React.FC<ConditionsIndicatorProps>;
 declare const ItemEditorCard: React.FC<ItemEditorCardProps>;
 export default ItemEditorCard;

package/dist/src/modules/survey-editor/editor-card/item-editor-header-styles.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_EDITOR_HEADER_ROW_CLASS_NAME = "flex min-h-9 w-full shrink-0 flex-wrap items-center gap-1.5 px-4 py-0.5";

package/dist/src/modules/survey-editor/editor-card/item-preview.d.ts

@@ -3,6 +3,7 @@ import { ItemPreviewMode } from '../../../../modules/survey-editor/registry';
 interface ItemPreviewProps {
     item: SurveyItemCore | undefined;
     mode?: ItemPreviewMode;
+    previewOnly?: boolean;
 }
-declare const ItemPreview: ({ item, mode }: ItemPreviewProps) => import("react").JSX.Element;
+declare const ItemPreview: ({ item, mode, previewOnly }: ItemPreviewProps) => import("react").JSX.Element;
 export default ItemPreview;

package/dist/src/modules/survey-editor/expression-integrity.d.ts

@@ -0,0 +1,6 @@
+import { Survey, SurveyExpressionReferenceDiagnostic, SurveyExpressionResponseSlot, ReferenceUsage } from '@case-framework/survey-core';
+export declare const getEditorSurveyExpressionResponseSlots: (survey: Survey) => SurveyExpressionResponseSlot[];
+export declare const analyzeEditorSurveyExpressionReferences: (survey: Survey) => SurveyExpressionReferenceDiagnostic[];
+export declare const getItemAndDescendantIds: (survey: Survey, itemId: string) => Set<string>;
+/** Returns only valid references outside the subtree that deletion would break. */
+export declare const getExternalReferencesToRemovedItems: (survey: Survey, itemId: string) => ReferenceUsage[];

package/dist/src/modules/survey-editor/preview-draft/preview-draft-context.d.ts

@@ -0,0 +1,20 @@
+import { Content, Survey } from '@case-framework/survey-core';
+import { ReactNode } from 'react';
+interface PreviewDraftContextValue {
+    /** Publish an uncommitted translation change for the participant-facing previews. */
+    setTranslationDraft: (itemId: string, locale: string, contentKey: string, content?: Content) => void;
+    clearDraft: (itemId: string) => void;
+}
+/**
+ * Holds transient authoring values used only by previews. It deliberately never
+ * mutates SurveyEditor, so drafts cannot create history entries or be persisted.
+ */
+export declare const PreviewDraftProvider: ({ survey, activeItemId, children, }: {
+    survey: Survey | null;
+    activeItemId?: string;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const usePreviewDraft: () => PreviewDraftContextValue;
+/** The single derived survey shared by inline and fullscreen previews. */
+export declare const usePreviewSurvey: (committedSurvey: Survey | null) => Survey | null;
+export {};

package/dist/src/modules/survey-editor/routes/editor/_components/expression-diagnostics-status.d.ts

@@ -0,0 +1 @@
+export declare const ExpressionDiagnosticsStatus: () => import("react").JSX.Element | null;

package/dist/src/modules/survey-editor/routes/editor/item-editor/_components/item-drag-drop.d.ts

@@ -5,8 +5,19 @@ export interface ItemPresetDragData {
     kind: "item-preset";
     presetId: string;
 }
+export interface ExistingItemDragData {
+    kind: "existing-item";
+    itemId: string;
+}
 export declare const isItemPresetDragData: (data: unknown) => data is ItemPresetDragData;
+export declare const isExistingItemDragData: (data: unknown) => data is ExistingItemDragData;
 export declare const useItemPresetDragActive: () => boolean;
+export declare const useExistingItemDragActive: () => boolean;
+export declare function ExistingItemDragHandle({ itemId, label, disabled }: {
+    itemId: string;
+    label: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
 export declare function SurveyItemDragDropProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/src/modules/survey-editor/routes/editor/preview-mode/index.d.ts

@@ -1,5 +1,6 @@
-interface PreviewModeProps {
+export interface PreviewModeProps {
     onSimulatorRequested?: () => void;
+    onWorkspaceInertChange?: (inert: boolean) => void;
 }
-declare const PreviewMode: ({ onSimulatorRequested }: PreviewModeProps) => import("react").JSX.Element;
+declare const PreviewMode: (props: PreviewModeProps) => import("react").JSX.Element;
 export default PreviewMode;

package/dist/src/modules/survey-editor/routes/editor/preview-mode/preview-controls.d.ts

@@ -7,9 +7,6 @@ interface PreviewControlsProps {
     canReset: boolean;
     onReset: () => void;
     onSimulatorRequested?: () => void;
-    fullscreen: boolean;
-    onFullscreenChange: (fullscreen: boolean) => void;
-    expanded?: boolean;
 }
-export declare const PreviewControls: ({ preferences, onPreferencesChange, canLocate, onLocate, canReset, onReset, onSimulatorRequested, fullscreen, onFullscreenChange, expanded, }: PreviewControlsProps) => import("react").JSX.Element;
+export declare const PreviewControls: ({ preferences, onPreferencesChange, canLocate, onLocate, canReset, onReset, onSimulatorRequested, }: PreviewControlsProps) => import("react").JSX.Element;
 export {};

package/dist/src/modules/survey-editor/store/editor-store.d.ts

@@ -51,13 +51,16 @@ export interface EditorStore {
     getCommitsSinceInitial: () => SurveyEditorHistoryCommit[];
     addItem: (target: Target | null, item: SurveyItemCore, content?: SurveyItemTranslations) => void;
     removeItem: (itemId: string, nested?: boolean) => boolean;
+    removeItems: (itemIds: readonly string[]) => boolean;
     moveItem: (itemId: string, newTarget: Target) => boolean;
+    moveItems: (itemIds: readonly string[], newTarget: Target) => boolean;
     updateItemTranslations: (itemId: string, updatedContent?: SurveyItemTranslations) => boolean;
     copyItem: (itemId: string) => SurveyItemClipboardData;
     pasteItem: (clipboardData: SurveyItemClipboardData, target: Target) => string | null;
     getRootItem: () => GroupItemCore | undefined;
     getItemDataCopy: (itemId: string) => RawSurveyItem;
     updateItem: (itemId: string, rawItemData: RawSurveyItem | Partial<RawSurveyItem>) => void;
+    rewriteResponseReferences: (replacements: Readonly<Record<string, string>>) => number;
     updateSurveyTranslations: (updates: {
         surveyCard?: {
             locale: string;

package/dist/src/modules/survey-editor/survey-editor-config.d.ts

@@ -5,7 +5,7 @@ import { LocalizationCatalog, LocalizationTranslate, LocalizationValues } from '
 import { SurveyEditorDateLocales } from './localization/date-fns';
 import { SurveyEditorWorkspace } from './workspace';
 interface SurveyEditorConfigType {
-    helpLink: string;
+    helpLink: string | null;
     aiProvider: SurveyEditorAIProvider | null;
     fallbackLocale: string;
     language: string;
@@ -17,7 +17,7 @@ interface SurveyEditorConfigType {
 }
 interface SurveyEditorConfigProviderProps {
     children: ReactNode;
-    helpLink: string;
+    helpLink: string | null;
     aiProvider?: SurveyEditorAIProvider | null;
     fallbackLocale?: string;
     language?: string;

package/dist/src/modules/survey-editor/survey-editor.d.ts

@@ -49,7 +49,8 @@ export interface SurveyEditorProps {
     /** Allows editor surfaces to create a new assistant thread and submit its first prompt. */
     assistantThreadLauncher?: SurveyAssistantThreadLauncher;
     persistDebounceMs?: number;
-    helpLink?: string;
+    /** Help documentation URL. Pass null to hide the editor's Help button. */
+    helpLink?: string | null;
     navigationAdapter?: SurveyEditorNavigationAdapter | null;
     /** Configure the initial main panel and workspace panels. */
     workspace?: SurveyEditorWorkspace;