@case-framework/survey-editor-ui 0.1.1

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

@@ -0,0 +1,109 @@
+import { StoreApi } from 'zustand';
+import { SurveyEditor, Target, SurveyItemClipboardData, CommitMeta, SurveyEditorHistoryCommit, UndoRedoConfig } from '@case-framework/survey-core/editor';
+import { SurveyItemCore, SurveyItemTranslations, RawSurveyItem, TemplateValueDefinition, GroupItemCore, RawSurveyAsset, SurveyCardContent, NavigationContent, Content } from '@case-framework/survey-core';
+import { ComposedEditorItemRegistry, ItemCategory, ItemLocaleMap, ItemRegistryEntry } from '../registry';
+import { SurveyApplyResult, SurveyBatchApplyResult, SurveyChangeSet, SurveyDocumentVersion } from '@case-framework/survey-assistant/protocol';
+interface StartNewSessionOptions {
+    surveyKey?: string;
+    /** Unified registry entries (recommended, matches SurveyEditor) */
+    itemRegistryEntries?: ItemRegistryEntry[];
+    /** Merged into default category labels when `itemRegistryEntries` is set. */
+    categoryLabels?: Partial<Record<ItemCategory, ItemLocaleMap>>;
+}
+export interface EditorStore {
+    /** Current survey/session id when editor is loaded */
+    sessionId: string | null;
+    /** The SurveyEditor instance - null when no editor is loaded */
+    editor: SurveyEditor | null;
+    /** Incremented on every mutation; select this to force re-renders when editor changes */
+    changeTick: number;
+    /** Composed item registry used by editor UI features. */
+    editorItemRegistry: ComposedEditorItemRegistry;
+    selectedLocale: string;
+    /** True while user-authored survey mutations are temporarily paused. */
+    userMutationsLocked: boolean;
+    /** Set the active editor (call when opening a session) */
+    setEditor: (surveyId: string | null, editor: SurveyEditor | null) => void;
+    /** Clear the active editor (call when closing/unmounting to avoid stale state on next mount) */
+    clearEditor: () => void;
+    /** Create and set a new blank survey editor (starts a new session) */
+    startNewSession: (options: StartNewSessionOptions) => void;
+    setEditorItemRegistry: (registry: ComposedEditorItemRegistry) => void;
+    setSelectedLocale: (locale: string) => void;
+    setUserMutationsLocked: (locked: boolean) => void;
+    undo: () => boolean;
+    redo: () => boolean;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    commit: (meta: CommitMeta) => void;
+    commitByUser: (meta: Omit<CommitMeta, "source">) => void;
+    commitIfNeeded: () => void;
+    jumpToIndexInHistory: (targetIndex: number) => boolean;
+    getUndoMeta: () => CommitMeta | null;
+    getRedoMeta: () => CommitMeta | null;
+    getUndoRedoHistory: () => Array<{
+        index: number;
+        meta: CommitMeta;
+        timestamp: number;
+        memorySize: number;
+        isCurrent: boolean;
+    }>;
+    getCommitsSinceInitial: () => SurveyEditorHistoryCommit[];
+    addItem: (target: Target | null, item: SurveyItemCore, content?: SurveyItemTranslations) => void;
+    removeItem: (itemId: string, nested?: boolean) => boolean;
+    moveItem: (itemId: 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;
+    updateSurveyTranslations: (updates: {
+        surveyCard?: {
+            locale: string;
+            content?: SurveyCardContent;
+        };
+        navigation?: {
+            locale: string;
+            content?: NavigationContent;
+        };
+        validationMessages?: {
+            locale: string;
+            content?: {
+                invalidResponse?: Content;
+            };
+        };
+    }) => void;
+    getMaxItemsPerPage: () => {
+        large: number;
+        small: number;
+    } | undefined;
+    updateMaxItemsPerPage: (value: {
+        large: number;
+        small: number;
+    } | undefined) => void;
+    getMetadata: () => {
+        [key: string]: string;
+    } | undefined;
+    updateMetadata: (metadata: {
+        [key: string]: string;
+    } | undefined) => void;
+    applyAssistantChange: (change: SurveyChangeSet, currentPrecondition: SurveyDocumentVersion) => SurveyApplyResult;
+    applyAssistantChanges: (changes: SurveyChangeSet[], currentPrecondition: SurveyDocumentVersion) => SurveyBatchApplyResult;
+    getTemplateValue: (key: string) => TemplateValueDefinition | undefined;
+    getTemplateValues: () => Map<string, TemplateValueDefinition>;
+    setTemplateValue: (key: string, templateValue: TemplateValueDefinition) => void;
+    removeTemplateValue: (key: string) => void;
+    getAsset: (assetId: string) => RawSurveyAsset | undefined;
+    getAssets: () => Map<string, RawSurveyAsset>;
+    setAsset: (assetId: string, asset: RawSurveyAsset) => void;
+    removeAsset: (assetId: string) => void;
+    getMemoryUsage: () => {
+        totalMB: number;
+        entries: number;
+    };
+    getUndoRedoConfig: () => UndoRedoConfig;
+}
+export type EditorStoreApi = StoreApi<EditorStore>;
+export declare function createEditorStore(): EditorStoreApi;
+export {};

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

@@ -0,0 +1,4 @@
+import { StoreApi } from 'zustand';
+import { EditorStore } from './editor-store';
+export declare function useEditorStore<T>(selector: (state: EditorStore) => T): T;
+export declare function useEditorStoreApi(): StoreApi<EditorStore>;

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

@@ -0,0 +1,7 @@
+/**
+ * Custom hook for managing survey item navigation via state
+ */
+export declare const useItemNavigation: () => {
+    selectedItemId: string | undefined;
+    navigateToItem: (newItemId?: string) => void;
+};

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { Locale } from 'date-fns/locale';
+import { SurveyEditorAIProvider } from './ai/types';
+import { LocalizationCatalog, LocalizationTranslate, LocalizationValues } from '@case-framework/ui-localization';
+import { SurveyEditorDateLocales } from './localization/date-fns';
+import { SurveyEditorWorkspace } from './workspace';
+interface SurveyEditorConfigType {
+    helpLink: string;
+    aiProvider: SurveyEditorAIProvider | null;
+    fallbackLocale: string;
+    language: string;
+    localizations: LocalizationCatalog;
+    dateLocales: SurveyEditorDateLocales;
+    dateLocale: Locale;
+    translate: LocalizationTranslate;
+    workspace?: SurveyEditorWorkspace;
+}
+interface SurveyEditorConfigProviderProps {
+    children: ReactNode;
+    helpLink: string;
+    aiProvider?: SurveyEditorAIProvider | null;
+    fallbackLocale?: string;
+    language?: string;
+    localizations?: LocalizationCatalog;
+    dateLocales?: SurveyEditorDateLocales;
+    workspace?: SurveyEditorWorkspace;
+}
+interface ResolvedSurveyEditorConfigProviderProps extends Omit<SurveyEditorConfigProviderProps, "dateLocales" | "localizations"> {
+    dateLocales: SurveyEditorDateLocales;
+    localizations: LocalizationCatalog;
+}
+export declare const ResolvedSurveyEditorConfigProvider: React.FC<ResolvedSurveyEditorConfigProviderProps>;
+export declare const SurveyEditorConfigProvider: React.FC<SurveyEditorConfigProviderProps>;
+export declare const useSurveyEditorConfig: () => SurveyEditorConfigType;
+export declare const useSurveyEditorAIProvider: () => SurveyEditorAIProvider | null;
+export declare const useEditorTranslation: (namespace?: string) => ((key: string, values?: LocalizationValues) => string);
+export declare const useEditorDateLocale: () => Locale;
+export {};

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { SerializedSurveyEditor } from '@case-framework/survey-core/editor';
+import { EditorStateChangePayload } from './hooks/useEditorStateChange';
+import { SurveyEditorNavigationAdapter } from './navigation/types';
+import { SurveyEditorAssistantController } from './assistant';
+import { ItemCategory, ItemLocaleMap, ItemRegistryEntry } from './registry';
+import { SurveyEditorAIProvider } from './ai/types';
+import { LocalizationCatalog } from '@case-framework/ui-localization';
+import { SurveyEditorDateLocales } from './localization/date-fns';
+import { SurveyEditorWorkspace } from './workspace';
+export type SurveyEditorStateChange = EditorStateChangePayload;
+export interface SurveyEditorProps {
+    initialEditorState?: SerializedSurveyEditor;
+    initialSessionId?: string;
+    fallbackLocale?: string;
+    language?: string;
+    localizations?: LocalizationCatalog;
+    dateLocales?: SurveyEditorDateLocales;
+    itemRegistryEntries?: ItemRegistryEntry[];
+    /** Override or extend default add-item category headings (merged with built-in defaults). */
+    categoryLabels?: Partial<Record<ItemCategory, ItemLocaleMap>>;
+    onEditorStateChange?: (change: SurveyEditorStateChange) => void;
+    /** Prevent user-authored survey mutations while preserving preview and navigation. */
+    readOnly?: boolean;
+    /** Optional imperative bridge for a survey assistant host. */
+    assistantControllerRef?: React.Ref<SurveyEditorAssistantController | null>;
+    /** Optional host-rendered assistant UI shown in the editor workspace. */
+    assistantPanel?: ReactNode;
+    persistDebounceMs?: number;
+    helpLink?: string;
+    navigationAdapter?: SurveyEditorNavigationAdapter | null;
+    /** Configure the initial main panel and workspace panels. */
+    workspace?: SurveyEditorWorkspace;
+    aiProvider?: SurveyEditorAIProvider | null;
+    onBackRequested?: () => void;
+    onSimulatorRequested?: () => void;
+    onSaveRequested?: () => void;
+}
+declare const SurveyEditor: React.FC<SurveyEditorProps>;
+export { SurveyEditor };

package/dist/src/modules/survey-editor/utils/item-type-infos.d.ts

@@ -0,0 +1,23 @@
+import { SurveyItemCore } from '@case-framework/survey-core';
+import { ComposedEditorItemRegistry, ItemIconComponent } from '../registry';
+export declare const builtInItemColors: readonly ["#404040", "#b91c1c", "#c2410c", "#a16207", "#4d7c0f", "#047857", "#0369a1", "#4338ca", "#7e22ce", "#86198f", "#be123c"];
+export declare const getItemColorFromID: (id: string) => string;
+export declare const getItemColor: (surveyItem: SurveyItemCore) => string | undefined;
+/** Returns the registry key for an item ("root" for root groups, otherwise item.type). */
+export declare const getItemTypeKey: (item: SurveyItemCore) => string;
+export interface ItemTypeInfos {
+    key: string;
+    label: string;
+    description: string;
+    defaultItemClassName?: string;
+    icon: ItemIconComponent;
+}
+export declare const getItemTypeInfos: (item: SurveyItemCore, registry?: ComposedEditorItemRegistry) => ItemTypeInfos;
+export declare const getItemTypeInfosByType: (itemType: string | undefined, registry?: ComposedEditorItemRegistry) => ItemTypeInfos | undefined;
+/**
+ * Hook to access item type infos for a specific item type.
+ * Pass an item type string (e.g. "choiceItem", "root") or undefined.
+ * Returns undefined when itemType is undefined.
+ * Must be used within EditorStoreProvider.
+ */
+export declare function useItemTypeInfos(itemType: string | undefined): ItemTypeInfos | undefined;

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

@@ -0,0 +1,17 @@
+import { SurveyEditorLocation } from './navigation/types';
+export interface SurveyEditorWorkspacePanelOptions {
+    /** Whether the panel is visible when this editor is first opened. */
+    defaultOpen?: boolean;
+}
+/** Initial layout for a SurveyEditor instance. */
+export interface SurveyEditorWorkspace {
+    /**
+     * The main panel shown when no navigation adapter is supplied.
+     * Defaults to the survey preview.
+     */
+    initialLocation?: SurveyEditorLocation;
+    panels?: {
+        outline?: SurveyEditorWorkspacePanelOptions;
+        assistant?: SurveyEditorWorkspacePanelOptions;
+    };
+}

package/dist/survey-editor-animations.css

@@ -0,0 +1,87 @@
+.survey-editor-opening-item {
+  --survey-editor-open-item-x: 18%;
+  --survey-editor-open-item-y: 0;
+  --survey-editor-open-item-accent-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
+    inset -5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
+
+  height: 100%;
+  min-height: 0;
+  animation: survey-editor-open-item 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  will-change: transform, opacity;
+}
+
+.survey-editor-opening-item[data-opening-direction="left"] {
+  --survey-editor-open-item-x: -18%;
+  --survey-editor-open-item-y: 0;
+  --survey-editor-open-item-accent-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
+    inset 5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
+}
+
+.survey-editor-opening-item[data-opening-direction="right"] {
+  --survey-editor-open-item-x: 18%;
+  --survey-editor-open-item-y: 0;
+  --survey-editor-open-item-accent-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
+    inset -5px 0 0 color-mix(in oklab, var(--ring) 70%, transparent);
+}
+
+.survey-editor-opening-item[data-opening-direction="up"] {
+  --survey-editor-open-item-x: 0;
+  --survey-editor-open-item-y: -12%;
+  --survey-editor-open-item-accent-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
+    inset 0 5px 0 color-mix(in oklab, var(--ring) 70%, transparent);
+}
+
+.survey-editor-opening-item[data-opening-direction="down"] {
+  --survey-editor-open-item-x: 0;
+  --survey-editor-open-item-y: 12%;
+  --survey-editor-open-item-accent-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 36%, transparent),
+    inset 0 -5px 0 color-mix(in oklab, var(--ring) 70%, transparent);
+}
+
+.survey-editor-opening-item > * {
+  animation: survey-editor-open-item-accent 260ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.survey-editor-opening-preview {
+  --survey-editor-open-item-x: -18%;
+  --survey-editor-open-item-y: 0;
+
+  animation: survey-editor-open-item 180ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  will-change: transform, opacity;
+}
+
+@keyframes survey-editor-open-item {
+  from {
+    opacity: 0;
+    transform: translate(var(--survey-editor-open-item-x), var(--survey-editor-open-item-y));
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes survey-editor-open-item-accent {
+  0% {
+    box-shadow: var(--survey-editor-open-item-accent-shadow);
+  }
+
+  100% {
+    box-shadow: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .survey-editor-opening-item,
+  .survey-editor-opening-item > *,
+  .survey-editor-opening-preview {
+    animation: none;
+    will-change: auto;
+  }
+}

package/dist/survey-editor-animations.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/dist/survey-editor-defaults.css

@@ -0,0 +1,15 @@
+.survey-editor {
+  /* Editor card / preview canvas — neutral near-white */
+  --surface-bg-color: oklch(99.1% 0 0);
+
+  /*
+     * Rich text emphasis (Lexical + preview). Chosen for strong contrast on
+     * --surface-bg-color and clearly distinct hues so “primary” vs “accent” reads
+     * in the UI (not tied to global --primary / --accent, which are tuned for chrome).
+     *
+     * Primary — cool / structural: main wording emphasis (question tone, lead-in).
+     * Accent — warm / focal: secondary highlight (callouts, supplementary emphasis).
+     */
+  --rich-text-editor-primary-color: oklch(0.36 0.12 264);
+  --rich-text-editor-accent-color: oklch(0.44 0.15 48);
+}

package/dist/survey-editor-defaults.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;