@case-framework/survey-ui 0.6.1 → 0.8.0

package/README.md

@@ -1,40 +1,54 @@
-# @case-framework/survey-ui
+# `@case-framework/survey-ui`
 
-React UI components for CASE surveys, including the `SurveyEditor`.
+Participant-facing React components for rendering and completing CASE surveys.
+This package intentionally excludes the Survey Editor and Survey Assistant.
 
-## SurveyEditor styling in a host project
+## Styling in a Tailwind CSS v4 / shadcn host
 
-Import the package stylesheet once in your app entry point:
+Import the React API normally:
 
 ```tsx
-import "@case-framework/survey-ui/css";
+import { SurveyPlayer } from "@case-framework/survey-ui";
 ```
 
-If you only want the editor's default variable values as a tiny standalone asset, import:
+Do not import `@case-framework/survey-ui/css` in a standard shadcn application.
+The host already owns Tailwind, shadcn's semantic theme tokens, Preflight, and
+the global `:root`/`.dark` theme. Importing another complete generated
+stylesheet can duplicate those layers and overwrite host variables or base
+element styles.
 
-```tsx
-import "@case-framework/survey-ui/editor-defaults.css";
-```
-
-`@case-framework/survey-ui/css` already includes these defaults, so the standalone file is only needed when the host wants a separate variables-only layer.
-
-If the host app uses Tailwind CSS v4, add the package as a source in the host global CSS file so Tailwind also scans the editor package:
+Instead, explicitly register the installed package as a Tailwind source in the
+host's existing global stylesheet:
 
 ```css
 @import "tailwindcss";
-@source "../node_modules/@case-framework/survey-ui/dist";
-```
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-Override the editor-specific CSS variables on the `.survey-editor` scope in the host stylesheet:
-
-```css
-.survey-editor {
-  --surface-bg-color: oklch(1 0 0);
-}
+@source "../node_modules/@case-framework/survey-ui/dist";
 ```
 
-Available editor-scoped variables:
-
-- `--surface-bg-color`
-
-The editor also uses the shared UI theme tokens from the package stylesheet, so you can override variables such as `--background`, `--foreground`, `--card`, `--primary`, `--muted`, `--accent`, `--border`, `--input`, and `--ring` if you want the rest of the editor chrome to match your host theme.
+The path is relative to the stylesheet containing `@source`; adjust it for the
+host's directory layout. Tailwind generates only the utilities it detects in
+the package, using the host application's theme.
+
+`@case-framework/survey-ui/css` is currently a complete precompiled stylesheet
+for standalone/non-Tailwind integrations. It includes global theme and base
+rules, so treat it as an application-level stylesheet, import it only once, and
+do not combine it with an existing shadcn global stylesheet without first
+reviewing the cascade.
+
+Install `@case-framework/survey-editor-ui` only in authoring applications.
+
+## Why this integration
+
+- [Tailwind: detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources)
+  documents `@source` specifically for external UI libraries because
+  dependencies under `node_modules` are ignored by automatic source detection.
+- [Tailwind: Preflight](https://tailwindcss.com/docs/preflight) documents that
+  `@import "tailwindcss"` includes global base styles by default.
+- [shadcn: theming](https://ui.shadcn.com/docs/theming) recommends that the
+  application own semantic CSS variables such as `--background`, `--primary`,
+  and `--border`.
+- [shadcn: Tailwind v4](https://ui.shadcn.com/docs/tailwind-v4) shows those
+  variables and `@theme inline` in the application's global stylesheet.

package/dist/src/index.d.ts

@@ -1,13 +1,7 @@
-export { SurveyPlayer, SurveyContextProvider, SurveyItemRenderer, useSurveyCtx, useSurveyTranslation, } from './modules/survey-player';
-export { SurveyEditor } from './modules/survey-editor';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './components/ui/dialog';
-export { APPLY_RICH_TEXT_STYLE_COMMAND, buildSurveyFileName, buildSurveyAssistantItemRegistryManifest, buildSurveyAssistantSnapshot, createSnapshotSurveyEditorAIProvider, useSurveyEditorAssistantIntegration, createBlankEditorState, createEditorStateFromRawSurvey, createRichTextEditorValueFromContent, createRichTextEditorValueFromPlainText, createRichTextEditorValueFromText, DEFAULT_EDITOR_LANGUAGE, DEFAULT_DATE_FNS_LOCALES, DEFAULT_CATEGORY_LABELS, DEFAULT_BLOCK_CONTENT_POLICY, DEFAULT_COMPACT_CONTENT_POLICY, defaultSurveyEditorLocalizations, RichTextEditor, RichTextBlockEditor, CONVERT_RICH_TEXT_LINK_TO_TEXT_COMMAND, INSERT_RICH_TEXT_LINK_COMMAND, INSERT_RICH_TEXT_TEMPLATE_VARIABLE_COMMAND, getDateFnsLocale, isBlockContentPolicyVariant, mergeDateFnsLocales, mergeEditorLocalizations, mergeRichTextContentPolicy, OPEN_RICH_TEXT_LINK_EDITOR_COMMAND, RichTextContentView, sanitizeContentForPolicy, SurveyImageAssetManager, surveyEditorEnMessages, surveyEditorNlMessages, UPDATE_RICH_TEXT_LINK_COMMAND, entriesToComposedEditorRegistry, entriesToParticipantRegistry, entriesToItemTypeRegistry, getRichTextContentFromEditorState, parseEditorStateFromJsonText, resolveCategoryLabel, serializeSurveyStateForFile, useSurveyAssets, useSurveyImageAssets, useUnusedSurveyAssetCount, validateRegistryEntries, } from './modules/survey-editor';
-export { FilepickerDropzone } from './components/c-ui/filepicker-dropzone';
-export { SortableTree } from './components/common/sortable-tree';
-export type { SortableTreeDropEvent, SortableTreeDropPosition, SortableTreeEmptyGroupProps, SortableTreeMoveEvent, SortableTreePosition, SortableTreeProps, SortableTreeRenderItemProps, } from './components/common/sortable-tree';
-export { cloneRegistryEntries, createComposedEditorRegistry, createRegistryEntries, createSurveyPlayerRegistry, getDefaultComposedEditorRegistry, getDefaultRegistryEntries, getDefaultSurveyPlayerRegistry, } from './modules/default-item-registry';
-export type { CreateComposedEditorRegistryOptions, CreateRegistryEntriesOptions, CreateSurveyPlayerRegistryOptions, RegistryConflictStrategy, } from './modules/default-item-registry';
-export type { SurveyEditorProps, SurveyEditorStateChange, SurveyEditorWorkspace, SurveyEditorWorkspacePanelOptions, SurveyEditorAssistantController, SurveyAssistantSnapshotOptions, CreateSnapshotSurveyEditorAIProviderOptions, UseSurveyEditorAssistantIntegrationOptions, SurveyEditorAITaskCacheOptions, SurveyEditorAITaskExecution, SurveyEditorAITaskExecutor, SurveyEditorLocation, EditorItemDefinition, EditorItemDefinitionRegistry, ComposedEditorItemRegistry, EntriesToComposedEditorRegistryOptions, EntriesToParticipantRegistryOptions, ItemEditorComponentProps, ItemIconComponent, ItemPreviewComponentProps, ItemPreviewMode, ItemRegistryEntry, ItemRendererComponentProps, ItemSearchAdapter, RegistryValidationIssue, RegistryValidationMode, RegistryValidationOptions, RegistryValidationResult, SurveyPlayerItemRegistry, SurveyEditorAIProvider, SurveyAIRequestOptions, RichTextEditorChange, RichTextEditorProps, RichTextBlockEditorChange, RichTextBlockEditorProps, RichTextContentPolicy, RichTextLinkPayload, RichTextStyleControl, RichTextTemplateVariable, RichTextContentViewProps, RichTextEditorVariant, RichTextStyleAttribute, RichTextSupportedBlockType, SerializedRichTextLinkNode, SerializedTemplateVariableNode, SurveyImageAssetManagerProps, ParsedSurveySession, ParsedSurveySessionFormat, } from './modules/survey-editor';
-export type { SurveyPlayerProps, SurveyContextProviderProps, SurveyItemRendererProps, } from './modules/survey-player';
-export type { SurveyEditorDateLocales } from './modules/survey-editor/localization/date-fns';
-export type { FilepickerDropzoneLabels, FilepickerDropzoneProps, } from './components/c-ui/filepicker-dropzone';
+export { SurveyPlayer, SurveyContextProvider, SurveyItemRenderer, createSurveyPlayerRegistry, getDefaultSurveyPlayerRegistry, useSurveyCtx, useSurveyTranslation, } from './modules/survey-player';
+export type { CreateSurveyPlayerRegistryOptions, ItemRendererComponentProps, SurveyContextProviderProps, SurveyItemRendererProps, SurveyPlayerItemRegistry, SurveyPlayerProps, SurveyPlayerRegistryEntry, } from './modules/survey-player';
+export { ChoiceItemCore, FormItemCore, InfoItemCore, } from './modules/default-item-registry/default-item-cores';
+export { ChoiceItemRenderer, FormItemRenderer, InfoItemRenderer, } from './modules/survey-player/survey-item/survey-item-types/placeholder-item-renderers';
+export { createSurveyTranslator, mergeSurveyPlayerLocalizationSources, mergeSurveyPlayerLocalizations, } from './modules/survey-player/localization/runtime';
+export { DEFAULT_SURVEY_PLAYER_LANGUAGE, defaultSurveyPlayerLocalizations, } from './modules/survey-player/localization/default-en';
+export { InfoItemCardField } from './modules/default-item-registry/items/info/player/card-field';

package/dist/src/lib/survey-assets.d.ts

@@ -0,0 +1,2 @@
+import { RawSurveyAsset } from '@case-framework/survey-core';
+export declare function getSurveyImageAssetUrl(asset?: RawSurveyAsset): string | undefined;

package/dist/src/modules/survey-player/index.d.ts

@@ -2,3 +2,5 @@ export { SurveyPlayer } from './survey-player';
 export { SurveyContextProvider, useSurveyCtx, useSurveyTranslation, type SurveyContextProviderProps, } from './survey-context';
 export { SurveyItemRenderer, type SurveyItemRendererProps } from './survey-item/survey-item';
 export type { SurveyPlayerProps } from './survey-player';
+export { createSurveyPlayerRegistry, getDefaultSurveyPlayerRegistry } from './registry';
+export type { CreateSurveyPlayerRegistryOptions, ItemRendererComponentProps, SurveyPlayerItemRegistry, SurveyPlayerRegistryEntry, } from './registry';

package/dist/src/modules/survey-player/registry.d.ts

@@ -0,0 +1,23 @@
+import { ItemCoreConstructor, ItemTypeRegistry, RenderedSurveyItem } from '@case-framework/survey-core';
+import { LocalizationCatalog } from '@case-framework/ui-localization';
+import { default as React } from 'react';
+export interface ItemRendererComponentProps {
+    renderedItem: RenderedSurveyItem;
+}
+export interface SurveyPlayerRegistryEntry {
+    itemType: string;
+    constructor?: ItemCoreConstructor;
+    renderComponent?: React.ComponentType<ItemRendererComponentProps>;
+    playerLocalizations?: LocalizationCatalog;
+}
+export interface SurveyPlayerItemRegistry {
+    coreRegistry: ItemTypeRegistry;
+    getRenderer: (itemType: string) => React.ComponentType<ItemRendererComponentProps> | undefined;
+    localizations: LocalizationCatalog;
+}
+export interface CreateSurveyPlayerRegistryOptions {
+    includeDefaultEntries?: boolean;
+    entries?: SurveyPlayerRegistryEntry[];
+}
+export declare function createSurveyPlayerRegistry(options?: CreateSurveyPlayerRegistryOptions): SurveyPlayerItemRegistry;
+export declare function getDefaultSurveyPlayerRegistry(): SurveyPlayerItemRegistry;

package/dist/src/modules/survey-player/survey-context.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Survey, SurveyEngineCore } from '@case-framework/survey-core';
-import { SurveyPlayerItemRegistry } from '../../../modules/survey-editor/registry';
+import { SurveyPlayerItemRegistry } from './registry';
 import { LocalizationCatalog, LocalizationTranslate } from '@case-framework/ui-localization';
 export type HandlerFuncArgType = string | number | boolean | null | undefined;
 export type HandlerFunction = (handlerId: string, args?: HandlerFuncArgType[]) => Promise<{

package/dist/src/modules/survey-player/survey-item/survey-item-types/placeholder-item-renderers.d.ts

@@ -1,4 +1,4 @@
-import { ItemRendererComponentProps } from '../../../../../modules/survey-editor/registry';
+import { ItemRendererComponentProps } from '../../../../../modules/survey-player/registry';
 export declare function InfoItemRenderer(props: ItemRendererComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare function FormItemRenderer(props: ItemRendererComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare function ChoiceItemRenderer(props: ItemRendererComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Survey, SurveyEngineCore, ScreenSize, SurveyItemResponse } from '@case-framework/survey-core';
-import { SurveyPlayerItemRegistry } from '../../../modules/survey-editor/registry';
+import { SurveyPlayerItemRegistry } from '../../../modules/survey-player/registry';
 import { LocalizationCatalog } from '@case-framework/ui-localization';
 export interface SurveyPlayerProps {
     survey: Survey;