@wildo-ai/saas-frontend-lib 1.0.1

package/dist/esm/components/resources-fields/resource-reference/useResourceSearch.js

@@ -0,0 +1,211 @@
+/**
+ * useResourceSearch
+ *
+ * Reusable hook for async resource-reference search:
+ * - Fetches initial options when the dropdown opens
+ * - Debounces search queries and fetches filtered results
+ * - Resolves display labels for currently selected values
+ * - Returns data shaped for Combobox/ComboboxMultiple consumption
+ */
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { getArrayItemSchema, getSchemaType, FieldSchemaType } from '@wildo-ai/zod-decorators';
+import { useResourceRegistry } from '../../../core/resources/useResourceRegistry.js';
+import { useI18n } from '../../../core/i18n/useI18n.js';
+import { FrontendResourceUtils } from '../../../core/resources/frontend-resource.utils.js';
+import { pickPreferredOperationForCoreSemantic } from '../../../core/resources/operation-semantics.frontend.utils.js';
+import { useOptionalFormSchemaContext } from '../../../components/form/useFormSchemaContext.js';
+import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { CoreResourceOperation } from '@wildo-ai/saas-models';
+import { fetchResourceReferenceRecordAndLabel, mapResourceReferenceOptions, normalizeResourceReferenceSelectionValue, } from './resource-reference.shared.utils.js';
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+const INITIAL_LOAD_LIMIT = 10;
+const SEARCH_DEBOUNCE_MS = 300;
+const MIN_SEARCH_CHARS = 2;
+// =============================================================================
+// HOOK
+// =============================================================================
+export function useResourceSearch({ schema, name, value, targetResourceType, }) {
+    const { registry, doOperation } = useResourceRegistry();
+    const { t, tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE });
+    const formSchemaContext = useOptionalFormSchemaContext();
+    const formContextualParameters = useMemo(() => {
+        if (!formSchemaContext?.contextResourceIdentifiers)
+            return {};
+        return FrontendResourceUtils.buildContextualParameters(formSchemaContext.contextResourceIdentifiers, registry);
+    }, [formSchemaContext?.contextResourceIdentifiers, registry]);
+    const searchTimeoutRef = useRef(null);
+    const doOperationRef = useRef(doOperation);
+    doOperationRef.current = doOperation;
+    const formContextualParametersRef = useRef(formContextualParameters);
+    formContextualParametersRef.current = formContextualParameters;
+    const schemaType = getSchemaType(schema);
+    const isMultiple = schemaType === FieldSchemaType.ARRAY;
+    const fkSchema = isMultiple ? (getArrayItemSchema(schema) || schema) : schema;
+    const resourceType = useMemo(() => {
+        if (targetResourceType) {
+            return targetResourceType;
+        }
+        try {
+            return FrontendResourceUtils.resolveResourceTypeForForeignKey(name, fkSchema, registry);
+        }
+        catch {
+            return undefined;
+        }
+    }, [fkSchema, name, registry, targetResourceType]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingCurrentValue, setIsLoadingCurrentValue] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [currentValueLabels, setCurrentValueLabels] = useState(new Map());
+    const normalizedValue = useMemo(() => normalizeResourceReferenceSelectionValue(value), [value]);
+    const readOperation = useMemo(() => {
+        if (!resourceType) {
+            return null;
+        }
+        return pickPreferredOperationForCoreSemantic(registry.resourceConfigurations?.[resourceType]?.operations ?? [], CoreResourceOperation.READ) ?? null;
+    }, [registry, resourceType]);
+    // =========================================================================
+    // FETCH OPTIONS
+    // =========================================================================
+    const fetchOptions = useCallback(async (query) => {
+        if (!resourceType)
+            return;
+        setIsLoading(true);
+        try {
+            const operationPath = FrontendResourceUtils.buildForeignKeySearchOperationPath(resourceType, registry);
+            const searchParams = FrontendResourceUtils.buildForeignKeySearchParams(query, INITIAL_LOAD_LIMIT);
+            const result = await doOperationRef.current(operationPath, {
+                contextualParameters: formContextualParametersRef.current,
+                queryParameters: searchParams.queryParameters,
+            });
+            let items = [];
+            if (Array.isArray(result)) {
+                items = result;
+            }
+            else if (result && typeof result === 'object') {
+                const resultObj = result;
+                items = resultObj.data || resultObj.items || [];
+            }
+            setOptions(mapResourceReferenceOptions({
+                items,
+                resourceType,
+                registry,
+                t,
+            }));
+        }
+        catch (err) {
+            console.error('[useResourceSearch] Failed to fetch options:', err);
+            setOptions([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [resourceType, registry, t]);
+    // =========================================================================
+    // RESOLVE CURRENT VALUE LABELS
+    // =========================================================================
+    const currentValueLabelsRef = useRef(currentValueLabels);
+    currentValueLabelsRef.current = currentValueLabels;
+    const resolveCurrentValueLabels = useCallback(async () => {
+        if (!resourceType || normalizedValue.length === 0)
+            return;
+        const unresolvedIds = normalizedValue.filter(id => !currentValueLabelsRef.current.has(id));
+        if (unresolvedIds.length === 0)
+            return;
+        setIsLoadingCurrentValue(true);
+        const newLabels = new Map(currentValueLabelsRef.current);
+        for (const id of unresolvedIds) {
+            try {
+                const { label } = await fetchResourceReferenceRecordAndLabel({
+                    resourceType,
+                    id,
+                    registry,
+                    doOperation: doOperationRef.current,
+                    contextualParameters: formContextualParametersRef.current,
+                    readOperation,
+                    t,
+                });
+                newLabels.set(id, label);
+            }
+            catch {
+                newLabels.set(id, id);
+            }
+        }
+        setCurrentValueLabels(newLabels);
+        setIsLoadingCurrentValue(false);
+    }, [resourceType, normalizedValue, registry, readOperation, t]);
+    // =========================================================================
+    // EFFECTS
+    // =========================================================================
+    useEffect(() => {
+        if (isOpen && options.length === 0 && !isLoading) {
+            fetchOptions();
+        }
+    }, [isOpen, options.length, isLoading, fetchOptions]);
+    useEffect(() => {
+        resolveCurrentValueLabels();
+    }, [resolveCurrentValueLabels]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (searchQuery.length >= MIN_SEARCH_CHARS) {
+            searchTimeoutRef.current = setTimeout(() => {
+                fetchOptions(searchQuery);
+            }, SEARCH_DEBOUNCE_MS);
+        }
+        else if (searchQuery.length === 0) {
+            fetchOptions();
+        }
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchQuery, isOpen, fetchOptions]);
+    // =========================================================================
+    // SEARCH HANDLER
+    // =========================================================================
+    const handleSearchChange = useCallback((search) => {
+        setSearchQuery(search);
+    }, []);
+    const handleOpenChange = useCallback((open) => {
+        setIsOpen(open);
+        if (!open) {
+            setSearchQuery('');
+        }
+    }, []);
+    // =========================================================================
+    // DISPLAY HELPERS
+    // =========================================================================
+    const getDisplayLabel = useCallback((id) => {
+        return currentValueLabels.get(id) || id;
+    }, [currentValueLabels]);
+    const emptyMessage = useMemo(() => {
+        if (searchQuery.length > 0 && searchQuery.length < MIN_SEARCH_CHARS) {
+            return tComponent(FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE, 'minSearchChars', { count: String(MIN_SEARCH_CHARS) });
+        }
+        return tComponent(FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE, 'noResults');
+    }, [searchQuery, tComponent]);
+    const defaultPlaceholder = useMemo(() => tComponent(FrontendComponentType.RESOURCES_FIELDS_RESOURCE_REFERENCE, 'selectPlaceholder'), [tComponent]);
+    return {
+        options,
+        isLoading,
+        isLoadingCurrentValue,
+        isOpen,
+        setIsOpen: handleOpenChange,
+        handleSearchChange,
+        getDisplayLabel,
+        resourceType,
+        isMultiple,
+        normalizedValue,
+        emptyMessage,
+        defaultPlaceholder,
+    };
+}
+//# sourceMappingURL=useResourceSearch.js.map

package/dist/esm/components/resources-fields/resource-reference/useResourceSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResourceSearch.js","sourceRoot":"","sources":["../../../../../src/components/resources-fields/resource-reference/useResourceSearch.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/sections/CompositeSectionRenderer.d.ts

@@ -0,0 +1,64 @@
+/**
+ * CompositeSectionRenderer Component
+ *
+ * Shared component for rendering composite sections with parent-child relationships.
+ * Handles different render modes: inline, tabs, accordion, and all ContentSectionModes.
+ * Used by both AutomatedForm and AutomaticDisplayer.
+ *
+ * Updated for UI Abstraction Patterns - uses ContentSectionMode for flexible section rendering.
+ *
+ */
+import React from 'react';
+import { ContentSectionMode, ContentSectionDisplayMode } from '@wildo-ai/zod-decorators';
+import type { ContentSectionConfig } from '@wildo-ai/presets-components-models';
+import type { CompositeSectionNode } from '../../core/automated-layout/automated-layout.frontend.schemas.js';
+export interface CompositeSectionRendererProps<TSectionInfo extends CompositeSectionNode> {
+    /** The section node to render */
+    section: TSectionInfo;
+    /** Legend text for this section */
+    legend?: string;
+    /** Labels for child sections (ref -> label) */
+    childLabels?: Record<string, string>;
+    /**
+     * Render the content of a section (its fields, rows, groups).
+     * This is the main customization point for Form vs Display.
+     */
+    renderSectionContent: (section: TSectionInfo) => React.ReactNode;
+    /**
+     * Optional custom wrapper for the entire section.
+     * If not provided, uses default FieldSet component.
+     */
+    renderSectionWrapper?: (section: TSectionInfo, ownContent: React.ReactNode, childrenContent: React.ReactNode | null, legend: string | undefined) => React.ReactNode;
+    /** Override display mode from definition */
+    displayMode?: ContentSectionDisplayMode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Current depth level (for styling/limiting) */
+    depth?: number;
+    /**
+     * ContentSectionMode for UI Abstraction Patterns.
+     * When provided, uses ContentSectionContainer instead of legacy rendering.
+     * Takes precedence over childrenRenderMode.
+     */
+    sectionMode?: ContentSectionMode;
+    /**
+     * Full configuration for ContentSectionContainer.
+     * Only used when sectionMode is provided.
+     */
+    sectionConfig?: Partial<Omit<ContentSectionConfig, 'mode'>>;
+}
+/**
+ * Renders a composite section with its children.
+ * Children are rendered according to:
+ * 1. sectionMode (UI Abstraction Patterns) - if provided
+ * 2. childrenRenderMode - fallback
+ */
+declare function CompositeSectionRendererComponent<TSectionInfo extends CompositeSectionNode>({ section, legend, childLabels, renderSectionContent, renderSectionWrapper, displayMode, className, depth, sectionMode, sectionConfig, }: CompositeSectionRendererProps<TSectionInfo>): React.ReactNode;
+declare namespace CompositeSectionRendererComponent {
+    var displayName: string;
+}
+export declare const CompositeSectionRenderer: typeof CompositeSectionRendererComponent & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=CompositeSectionRenderer.d.ts.map

package/dist/esm/components/sections/CompositeSectionRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeSectionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/CompositeSectionRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AACzF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6EAA6E,CAAC;AAQxH,MAAM,WAAW,6BAA6B,CAAC,YAAY,SAAS,oBAAoB;IACtF,iCAAiC;IACjC,OAAO,EAAE,YAAY,CAAC;IAEtB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC;;;OAGG;IACH,oBAAoB,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;IAEjE;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CACrB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,KAAK,CAAC,SAAS,EAC3B,eAAe,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,EACvC,MAAM,EAAE,MAAM,GAAG,SAAS,KACvB,KAAK,CAAC,SAAS,CAAC;IAErB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,yBAAyB,CAAC;IAExC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC;CAC7D;AAMD;;;;;GAKG;AACH,iBAAS,iCAAiC,CAAC,YAAY,SAAS,oBAAoB,EAAE,EACpF,OAAO,EACP,MAAM,EACN,WAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,KAAS,EACT,WAAW,EACX,aAAa,GACd,EAAE,6BAA6B,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,SAAS,CAqF/D;kBAhGQ,iCAAiC;;;AA0P1C,eAAO,MAAM,wBAAwB,EAAE,OAAO,iCAAiC,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAsC,CAAC"}

package/dist/esm/components/sections/CompositeSectionRenderer.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldSet, FieldLegend } from '../../components/form/chromes/field.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/sections/tabs.js';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../components/sections/accordion.js';
+import { ToggleGroupType } from '../../components/form/controls/enum/toggle-group.js';
+import { ContentSectionMode, ContentSectionDisplayMode } from '@wildo-ai/zod-decorators';
+import { cn } from '../../core/ui/cn.js';
+import { ContentSectionContainer } from './ContentSectionContainer.js';
+// =============================================================================
+// COMPONENT
+// =============================================================================
+/**
+ * Renders a composite section with its children.
+ * Children are rendered according to:
+ * 1. sectionMode (UI Abstraction Patterns) - if provided
+ * 2. childrenRenderMode - fallback
+ */
+function CompositeSectionRendererComponent({ section, legend, childLabels = {}, renderSectionContent, renderSectionWrapper, displayMode, className, depth = 0, sectionMode, sectionConfig, }) {
+    // Resolve display mode
+    const resolvedDisplayMode = displayMode ?? section.displayMode ?? ContentSectionDisplayMode.DEFAULT;
+    // Render this section's own content
+    const ownContent = renderSectionContent(section);
+    // If no children, render simple section
+    if (section.children.length === 0) {
+        if (renderSectionWrapper) {
+            return renderSectionWrapper(section, ownContent, null, legend);
+        }
+        return (_jsxs(FieldSet, { displayMode: resolvedDisplayMode, className: className, children: [legend && _jsx(FieldLegend, { children: legend }), ownContent] }));
+    }
+    // Use ContentSectionContainer if sectionMode is provided
+    if (sectionMode) {
+        const sections = section.children.map((child, index) => ({
+            id: child.ref ?? `section-${index}`,
+            title: child.ref ? (childLabels[child.ref] ?? child.ref) : `Section ${index + 1}`,
+            content: (_jsx(CompositeSectionRenderer, { section: child, childLabels: childLabels, renderSectionContent: renderSectionContent, renderSectionWrapper: renderSectionWrapper, depth: depth + 1, 
+                // Use child's own childrenRenderMode if it has children, otherwise no sectionMode (renders as simple section)
+                sectionMode: child.children.length > 0 ? child.childrenRenderMode : undefined, sectionConfig: sectionConfig })),
+        }));
+        const config = {
+            mode: sectionMode,
+            ...sectionConfig,
+        };
+        // Wrap with parent content
+        if (renderSectionWrapper) {
+            return renderSectionWrapper(section, ownContent, _jsx(ContentSectionContainer, { sections: sections, config: config }), legend);
+        }
+        return (_jsxs(FieldSet, { displayMode: resolvedDisplayMode, className: className, children: [legend && _jsx(FieldLegend, { children: legend }), ownContent, _jsx(ContentSectionContainer, { sections: sections, config: config, className: "mt-field" })] }));
+    }
+    // Legacy: Render children based on childrenRenderMode
+    const childrenContent = renderChildren(section, childLabels, renderSectionContent, renderSectionWrapper, depth);
+    // Wrap with custom renderer or default
+    if (renderSectionWrapper) {
+        return renderSectionWrapper(section, ownContent, childrenContent, legend);
+    }
+    return (_jsxs(FieldSet, { displayMode: resolvedDisplayMode, className: className, children: [legend && _jsx(FieldLegend, { children: legend }), ownContent, childrenContent] }));
+}
+// =============================================================================
+// CHILD RENDERING HELPERS
+// =============================================================================
+function renderChildren(section, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig) {
+    const { children, childrenRenderMode } = section;
+    switch (childrenRenderMode) {
+        case ContentSectionMode.TABS:
+            return renderChildrenAsTabs(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig);
+        case ContentSectionMode.ACCORDION:
+            return renderChildrenAsAccordion(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig);
+        case ContentSectionMode.INLINE:
+        default:
+            return renderChildrenInline(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig);
+    }
+}
+function renderChildrenAsTabs(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig) {
+    // Use first child as default tab
+    const defaultTab = children[0]?.ref ?? 'tab-0';
+    return (_jsxs(Tabs, { defaultValue: defaultTab, className: "mt-field", children: [_jsx(TabsList, { children: children.map((child, index) => {
+                    const tabValue = child.ref ?? `tab-${index}`;
+                    const label = child.ref ? (childLabels[child.ref] ?? child.ref) : `Tab ${index + 1}`;
+                    return (_jsx(TabsTrigger, { value: tabValue, children: label }, tabValue));
+                }) }), children.map((child, index) => {
+                const tabValue = child.ref ?? `tab-${index}`;
+                const label = child.ref ? childLabels[child.ref] : undefined;
+                return (_jsx(TabsContent, { value: tabValue, children: _jsx(CompositeSectionRenderer, { section: child, legend: label, childLabels: childLabels, renderSectionContent: renderSectionContent, renderSectionWrapper: renderSectionWrapper, depth: depth + 1, sectionMode: sectionMode, sectionConfig: sectionConfig }) }, tabValue));
+            })] }));
+}
+function renderChildrenAsAccordion(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig) {
+    // Use first child as default open
+    const defaultOpen = children[0]?.ref ?? 'accordion-0';
+    return (_jsx(Accordion, { type: ToggleGroupType.SINGLE, collapsible: true, defaultValue: defaultOpen, className: "mt-field", children: children.map((child, index) => {
+            const itemValue = child.ref ?? `accordion-${index}`;
+            const label = child.ref ? (childLabels[child.ref] ?? child.ref) : `Section ${index + 1}`;
+            return (_jsxs(AccordionItem, { value: itemValue, children: [_jsx(AccordionTrigger, { children: label }), _jsx(AccordionContent, { children: _jsx(CompositeSectionRenderer, { section: child, childLabels: childLabels, renderSectionContent: renderSectionContent, renderSectionWrapper: renderSectionWrapper, depth: depth + 1, sectionMode: sectionMode, sectionConfig: sectionConfig }) })] }, itemValue));
+        }) }));
+}
+function renderChildrenInline(children, childLabels, renderSectionContent, renderSectionWrapper, depth, sectionMode, sectionConfig) {
+    return (_jsx("div", { className: cn('space-y-field', depth > 0 && 'mt-field'), children: children.map((child, index) => {
+            const key = child.ref ?? `inline-${index}`;
+            const label = child.ref ? childLabels[child.ref] : undefined;
+            return (_jsx(CompositeSectionRenderer, { section: child, legend: label, childLabels: childLabels, renderSectionContent: renderSectionContent, renderSectionWrapper: renderSectionWrapper, depth: depth + 1, sectionMode: sectionMode, sectionConfig: sectionConfig }, key));
+        }) }));
+}
+CompositeSectionRendererComponent.displayName = 'CompositeSectionRenderer';
+export const CompositeSectionRenderer = CompositeSectionRendererComponent;
+//# sourceMappingURL=CompositeSectionRenderer.js.map

package/dist/esm/components/sections/CompositeSectionRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeSectionRenderer.js","sourceRoot":"","sources":["../../../../src/components/sections/CompositeSectionRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/sections/ContentSectionContainer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ContentSectionContainer Component
+ *
+ * A universal container for rendering content sections in various modes.
+ * Part of the UI Abstraction Patterns implementation.
+ *
+ * Uses the `SectionConfig` discriminated union — each mode variant
+ * carries only its relevant parameters, enabling TypeScript narrowing
+ * in the `switch (config.mode)` dispatcher.
+ *
+ * Supports 14 modes across 4 categories:
+ * - Solo: default, card, ghost, collapsible
+ * - Layout: inline, grid, columns
+ * - Navigation: tabs, vertical_tabs, pills
+ * - Expandable: accordion, expandable
+ * - Guided: stepper, timeline
+ */
+import React from 'react';
+import type { SectionConfig } from '@wildo-ai/presets-components-models';
+export interface ContentSection {
+    /** Unique identifier for the section */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Content to render */
+    content: React.ReactNode;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Whether section is disabled */
+    disabled?: boolean;
+}
+export interface ContentSectionContainerProps {
+    /** Array of sections to render */
+    sections: ContentSection[];
+    /** Configuration — discriminated union, narrowed by `config.mode` */
+    config: SectionConfig;
+    /** Additional CSS classes */
+    className?: string;
+    /** Callback when active section changes */
+    onSectionChange?: (sectionId: string | string[]) => void;
+}
+export declare const ContentSectionContainer: React.FC<ContentSectionContainerProps>;
+export default ContentSectionContainer;
+//# sourceMappingURL=ContentSectionContainer.d.ts.map

package/dist/esm/components/sections/ContentSectionContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/ContentSectionContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EACV,aAAa,EAed,MAAM,qCAAqC,CAAC;AAiB7C,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,kCAAkC;IAClC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,qEAAqE;IACrE,MAAM,EAAE,aAAa,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1D;AA6CD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAsD1E,CAAC;AAoiBF,eAAe,uBAAuB,CAAC"}