@fgv/ts-res-ui-components 5.0.0-17 → 5.0.0-18

package/README.md

@@ -247,9 +247,12 @@ is a generic component used by all of the views, which can also be used to power
       console.log(`Pending ${selection.pendingType} operation`);
     }
   }}
-  defaultView="tree"
-  enableSearch={true}
-  searchPlaceholder="Search resources..."
+  options={{
+    defaultView: "tree",
+    enableSearch: true,
+    searchPlaceholder: "Search resources...",
+    height: "500px"
+  }}
   resourceAnnotations={{
     'user.welcome': { 
       badge: { text: '3', variant: 'info' },
@@ -257,7 +260,6 @@ is a generic component used by all of the views, which can also be used to power
     }
   }}
   pendingResources={pendingChanges}
-  height="500px"
 />
 ```
 
@@ -268,6 +270,36 @@ is a generic component used by all of the views, which can also be used to power
 - **Pending resources**: Show unsaved changes with visual distinction
 - **Branch isolation**: Focus on specific parts of large resource trees
 - **Type safety**: Full TypeScript support with generic resource types
+- **Debug controls**: Optional ResourcePickerOptionsControl for development and debugging
+
+#### ResourcePickerOptionsControl
+
+A debugging/design tool for interactively configuring ResourcePicker behavior. Hidden by default for production use, but can be enabled in development:
+
+```tsx
+// All view components support pickerOptionsPresentation
+<SourceView
+  resources={state.processedResources}
+  pickerOptionsPresentation="collapsible"  // Enable picker options UI
+  onMessage={(type, message) => console.log(`${type}: ${message}`)}
+/>
+
+// Direct usage in custom components
+<PickerTools.ResourcePickerOptionsControl
+  options={pickerOptions}
+  onOptionsChange={setPickerOptions}
+  presentation="popup"  // 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover'
+  title="Picker Configuration"
+  showAdvanced={true}
+/>
+```
+
+**Presentation modes:**
+- `'hidden'`: Not displayed (default for production)
+- `'inline'`: Always visible with expanded controls
+- `'collapsible'`: Expandable/collapsible section
+- `'popup'`: Full modal dialog overlay
+- `'popover'`: Small dropdown overlay
 
 ### SourceView
 
@@ -278,9 +310,13 @@ Displays the source resource collection with search and navigation capabilities
 ```tsx
 <SourceView
   resources={state.processedResources}
-  selectedResourceId={selectedId}
-  onResourceSelect={(selection) => setSelectedId(selection.resourceId)}
   onExport={actions.exportData}
+  onMessage={(type, message) => console.log(`${type}: ${message}`)}
+  pickerOptions={{
+    defaultView: "list",
+    enableSearch: true,
+    searchPlaceholder: "Search resources..."
+  }}
 />
 ```
 
@@ -297,9 +333,10 @@ Provides filtering capabilities with context value specification and dual-resour
   filterActions={filterActions}
   filterResult={filterResult}
   onFilterResult={setFilterResult}
-  onResourceSelect={(selection) => {
-    setSelectedId(selection.resourceId);
-    // Enhanced callback provides comprehensive selection data
+  onMessage={(type, message) => console.log(`${type}: ${message}`)}
+  pickerOptions={{
+    enableSearch: true,
+    searchPlaceholder: "Search resources..."
   }}
 />
 ```
@@ -316,9 +353,10 @@ Shows the compiled resource structure with detailed candidate information using
   filterResult={filterResult}
   useNormalization={true}
   onExport={(data, type) => exportData(data, type)}
-  onResourceSelect={(selection) => {
-    // Enhanced callback with comprehensive resource data
-    setSelectedId(selection.resourceId);
+  onMessage={(type, message) => console.log(`${type}: ${message}`)}
+  pickerOptions={{
+    defaultView: "tree",
+    enableSearch: true
   }}
 />
 ```
@@ -336,6 +374,12 @@ Interactive resource resolution testing with context management and support for
   resolutionActions={resolutionActions}
   availableQualifiers={availableQualifiers}
   resourceEditorFactory={myResourceEditorFactory}
+  onMessage={(type, message) => console.log(`${type}: ${message}`)}
+  pickerOptions={{
+    defaultView: "list",
+    enableSearch: true,
+    searchPlaceholder: "Search resources for resolution testing..."
+  }}
 />
 ```
 

package/dist/ts-res-ui-components.d.ts

@@ -183,6 +183,8 @@ declare interface CompiledViewProps extends ViewBaseProps {
     useNormalization?: boolean;
     /** Callback for exporting compiled data or bundles */
     onExport?: (data: ResourceJson.Compiled.ICompiledResourceCollection | Bundle.IBundle, type: 'json' | 'bundle') => void;
+    /** Optional configuration for the ResourcePicker behavior */
+    pickerOptions?: ResourcePickerOptions;
 }
 
 /**
@@ -1332,6 +1334,8 @@ declare interface FilterViewProps extends ViewBaseProps {
     filterResult?: FilterResult | null;
     /** Callback when filter results change */
     onFilterResult?: (result: FilterResult | null) => void;
+    /** Optional configuration for the ResourcePicker behavior */
+    pickerOptions?: ResourcePickerOptions;
 }
 
 /**
@@ -2253,11 +2257,14 @@ declare interface PendingResource<T = unknown> {
 export declare namespace PickerTools {
     export {
         ResourcePicker,
+        ResourcePickerOptionsControl,
         ResourcePickerProps,
+        ResourcePickerOptions,
         ResourceSelection,
         ResourceAnnotations,
         ResourceAnnotation,
-        PendingResource
+        PendingResource,
+        ResourcePickerOptionsControlProps
     }
 }
 
@@ -3205,6 +3212,8 @@ declare interface ResolutionViewProps extends ViewBaseProps {
     availableQualifiers?: string[];
     /** Optional factory for creating type-specific resource editors */
     resourceEditorFactory?: ResourceEditorFactory;
+    /** Optional configuration for the ResourcePicker behavior */
+    pickerOptions?: ResourcePickerOptions;
 }
 
 /**
@@ -3730,13 +3739,101 @@ declare interface ResourceOrchestratorProps {
  *
  * @public
  */
-declare const ResourcePicker: <T = unknown>({ resources, selectedResourceId, onResourceSelect, defaultView, showViewToggle, rootPath, hideRootNode, enableSearch, searchPlaceholder, searchScope, resourceAnnotations, pendingResources, emptyMessage, height, className, onMessage }: ResourcePickerProps<T>) => React_2.JSX.Element;
+declare const ResourcePicker: <T = unknown>({ resources, selectedResourceId, onResourceSelect, resourceAnnotations, pendingResources, options, className, onMessage }: ResourcePickerProps<T>) => React_2.JSX.Element;
+
+/**
+ * UI behavior configuration options for ResourcePicker.
+ *
+ * This interface groups all UI-related options that control how the ResourcePicker
+ * behaves and appears, separate from functional data like annotations and pending resources.
+ *
+ * @example
+ * ```tsx
+ * const pickerOptions: ResourcePickerOptions = {
+ *   defaultView: 'tree',
+ *   enableSearch: true,
+ *   searchPlaceholder: 'Find resources...',
+ *   rootPath: 'user.messages',
+ *   hideRootNode: true,
+ *   height: '400px'
+ * };
+ * ```
+ *
+ * @public
+ */
+declare interface ResourcePickerOptions {
+    /** View and navigation options */
+    /** Default view mode to use on initial render */
+    defaultView?: 'list' | 'tree';
+    /** Whether to show the list/tree view toggle buttons */
+    showViewToggle?: boolean;
+    /** Branch isolation options */
+    /** Path to treat as root for tree branch isolation (e.g., "platform/territories") */
+    rootPath?: string;
+    /** Hide the root node itself, showing only its children */
+    hideRootNode?: boolean;
+    /** Search options */
+    /** Whether to enable the search input */
+    enableSearch?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Scope of search - entire tree or just the currently visible branch */
+    searchScope?: 'all' | 'current-branch';
+    /** Appearance options */
+    /** Message to display when no resources are available */
+    emptyMessage?: string;
+    /** Height of the picker component */
+    height?: string | number;
+}
+
+/**
+ * Reusable control for configuring ResourcePicker options.
+ *
+ * Provides a clean interface for adjusting picker behavior including:
+ * - View mode selection (list/tree)
+ * - Search and view toggle settings
+ * - Branch isolation configuration
+ * - Quick path selection buttons
+ *
+ * Can be rendered in multiple presentation modes:
+ * - 'hidden': Not displayed (default for production)
+ * - 'inline': Always expanded with full controls visible
+ * - 'collapsible': Expandable/collapsible section
+ * - 'popover': Small dropdown overlay
+ * - 'popup': Full modal dialog
+ *
+ * @public
+ */
+declare const ResourcePickerOptionsControl: React_2.FC<ResourcePickerOptionsControlProps>;
+
+/**
+ * Props for the ResourcePickerOptionsControl component.
+ * @public
+ */
+declare interface ResourcePickerOptionsControlProps {
+    /** Current picker options */
+    options: ResourcePickerOptions;
+    /** Callback when options change */
+    onOptionsChange: (options: ResourcePickerOptions) => void;
+    /** How to present the options control (default: 'hidden' for production use) */
+    presentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
+    /** Custom class name */
+    className?: string;
+    /** Available quick branch paths for selection */
+    quickBranchPaths?: string[];
+    /** Whether to show advanced options like branch isolation */
+    showAdvanced?: boolean;
+    /** Title for the control section */
+    title?: string;
+}
 
 /**
  * Props for the ResourcePicker component.
  *
  * The ResourcePicker is a comprehensive component for browsing and selecting resources
  * with support for multiple view modes, search, annotations, and pending resources.
+ * UI behavior is controlled through the options object, while functional data is
+ * passed as separate props.
  *
  * @example
  * ```tsx
@@ -3750,45 +3847,36 @@ declare const ResourcePicker: <T = unknown>({ resources, selectedResourceId, onR
  *       handleResourceData(selection.resourceData);
  *     }
  *   }}
- *   defaultView="tree"
- *   enableSearch={true}
  *   resourceAnnotations={{
  *     'res1': { badge: { text: '3', variant: 'info' } }
  *   }}
+ *   options={{
+ *     defaultView: 'tree',
+ *     enableSearch: true,
+ *     searchPlaceholder: 'Find resources...',
+ *     height: '400px'
+ *   }}
  * />
  * ```
  *
  * @public
  */
 declare interface ResourcePickerProps<T = unknown> extends ViewBaseProps {
+    /** Core functionality */
     /** Processed resources to display in the picker */
     resources: ProcessedResources | ExtendedProcessedResources | null;
     /** Currently selected resource ID */
     selectedResourceId: string | null;
     /** Callback fired when a resource is selected, providing comprehensive selection data */
     onResourceSelect: (selection: ResourceSelection<T>) => void;
-    /** Default view mode to use on initial render */
-    defaultView?: 'list' | 'tree';
-    /** Whether to show the list/tree view toggle buttons */
-    showViewToggle?: boolean;
-    /** Path to treat as root for tree branch isolation (e.g., "platform/territories") */
-    rootPath?: string;
-    /** Hide the root node itself, showing only its children */
-    hideRootNode?: boolean;
-    /** Whether to enable the search input */
-    enableSearch?: boolean;
-    /** Placeholder text for the search input */
-    searchPlaceholder?: string;
-    /** Scope of search - entire tree or just the currently visible branch */
-    searchScope?: 'all' | 'current-branch';
+    /** Functional data */
     /** Annotations to display next to resource names (badges, indicators, etc.) */
     resourceAnnotations?: ResourceAnnotations;
     /** Pending (unsaved) resources to display alongside persisted resources */
     pendingResources?: PendingResource<T>[];
-    /** Message to display when no resources are available */
-    emptyMessage?: string;
-    /** Height of the picker component */
-    height?: string | number;
+    /** UI behavior configuration */
+    /** Options controlling picker appearance and behavior */
+    options?: ResourcePickerOptions;
 }
 
 /**
@@ -4283,6 +4371,8 @@ declare interface SourceViewProps extends ViewBaseProps {
     onResourceSelect?: (resourceId: string) => void;
     /** Callback when exporting resource collection data */
     onExport?: (data: unknown, type: 'json') => void;
+    /** Optional configuration for the ResourcePicker behavior */
+    pickerOptions?: ResourcePickerOptions;
 }
 
 export declare namespace TsResTools {
@@ -4688,6 +4778,8 @@ declare interface ViewBaseProps {
     onMessage?: (type: Message['type'], message: string) => void;
     /** Additional CSS class names for styling */
     className?: string;
+    /** How to present the ResourcePicker options control (default: 'hidden' for production use) */
+    pickerOptionsPresentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
 }
 
 export declare namespace ViewStateTools {

package/lib/components/common/ResourcePickerOptionsControl.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ResourcePickerOptions } from '../pickers/ResourcePicker/types';
+/**
+ * Props for the ResourcePickerOptionsControl component.
+ * @public
+ */
+export interface ResourcePickerOptionsControlProps {
+    /** Current picker options */
+    options: ResourcePickerOptions;
+    /** Callback when options change */
+    onOptionsChange: (options: ResourcePickerOptions) => void;
+    /** How to present the options control (default: 'hidden' for production use) */
+    presentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
+    /** Custom class name */
+    className?: string;
+    /** Available quick branch paths for selection */
+    quickBranchPaths?: string[];
+    /** Whether to show advanced options like branch isolation */
+    showAdvanced?: boolean;
+    /** Title for the control section */
+    title?: string;
+}
+/**
+ * Reusable control for configuring ResourcePicker options.
+ *
+ * Provides a clean interface for adjusting picker behavior including:
+ * - View mode selection (list/tree)
+ * - Search and view toggle settings
+ * - Branch isolation configuration
+ * - Quick path selection buttons
+ *
+ * Can be rendered in multiple presentation modes:
+ * - 'hidden': Not displayed (default for production)
+ * - 'inline': Always expanded with full controls visible
+ * - 'collapsible': Expandable/collapsible section
+ * - 'popover': Small dropdown overlay
+ * - 'popup': Full modal dialog
+ *
+ * @public
+ */
+export declare const ResourcePickerOptionsControl: React.FC<ResourcePickerOptionsControlProps>;
+export default ResourcePickerOptionsControl;
+//# sourceMappingURL=ResourcePickerOptionsControl.d.ts.map

package/lib/components/common/ResourcePickerOptionsControl.js

@@ -0,0 +1,142 @@
+import React, { useState, useCallback } from 'react';
+import { CogIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/24/outline';
+/**
+ * Reusable control for configuring ResourcePicker options.
+ *
+ * Provides a clean interface for adjusting picker behavior including:
+ * - View mode selection (list/tree)
+ * - Search and view toggle settings
+ * - Branch isolation configuration
+ * - Quick path selection buttons
+ *
+ * Can be rendered in multiple presentation modes:
+ * - 'hidden': Not displayed (default for production)
+ * - 'inline': Always expanded with full controls visible
+ * - 'collapsible': Expandable/collapsible section
+ * - 'popover': Small dropdown overlay
+ * - 'popup': Full modal dialog
+ *
+ * @public
+ */
+export const ResourcePickerOptionsControl = ({ options, onOptionsChange, presentation = 'hidden', className = '', quickBranchPaths = ['strings', 'app', 'images', 'app.ui'], showAdvanced = true, title = 'Picker Options' }) => {
+    // Early return for hidden presentation
+    if (presentation === 'hidden') {
+        return null;
+    }
+    const [isExpanded, setIsExpanded] = useState(presentation === 'inline');
+    const [showPopover, setShowPopover] = useState(false);
+    const handleOptionChange = useCallback((key, value) => {
+        onOptionsChange({
+            ...options,
+            [key]: value
+        });
+    }, [options, onOptionsChange]);
+    const handleQuickPathSelect = useCallback((path) => {
+        handleOptionChange('rootPath', path);
+    }, [handleOptionChange]);
+    const clearRootPath = useCallback(() => {
+        handleOptionChange('rootPath', undefined);
+        handleOptionChange('hideRootNode', false);
+    }, [handleOptionChange]);
+    const renderControls = () => (React.createElement("div", { className: "space-y-4" },
+        React.createElement("div", { className: "space-y-3" },
+            React.createElement("h4", { className: "text-sm font-medium text-gray-700" }, "View Settings"),
+            React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3" },
+                React.createElement("div", null,
+                    React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Default View"),
+                    React.createElement("select", { value: options.defaultView || 'list', onChange: (e) => handleOptionChange('defaultView', e.target.value), className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500" },
+                        React.createElement("option", { value: "list" }, "List"),
+                        React.createElement("option", { value: "tree" }, "Tree"))),
+                React.createElement("div", null,
+                    React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Search Scope"),
+                    React.createElement("select", { value: options.searchScope || 'all', onChange: (e) => handleOptionChange('searchScope', e.target.value), className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500", disabled: !options.enableSearch },
+                        React.createElement("option", { value: "all" }, "All Resources"),
+                        React.createElement("option", { value: "current-branch" }, "Current Branch")))),
+            React.createElement("div", { className: "space-y-2" },
+                React.createElement("label", { className: "flex items-center text-xs" },
+                    React.createElement("input", { type: "checkbox", checked: options.enableSearch ?? true, onChange: (e) => handleOptionChange('enableSearch', e.target.checked), className: "mr-2 rounded" }),
+                    "Enable Search"),
+                React.createElement("label", { className: "flex items-center text-xs" },
+                    React.createElement("input", { type: "checkbox", checked: options.showViewToggle ?? true, onChange: (e) => handleOptionChange('showViewToggle', e.target.checked), className: "mr-2 rounded" }),
+                    "Show View Toggle")),
+            options.enableSearch && (React.createElement("div", null,
+                React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Search Placeholder"),
+                React.createElement("input", { type: "text", value: options.searchPlaceholder || '', onChange: (e) => handleOptionChange('searchPlaceholder', e.target.value || undefined), placeholder: "Search resources...", className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500" })))),
+        showAdvanced && (React.createElement("div", { className: "space-y-3 pt-3 border-t border-gray-200" },
+            React.createElement("h4", { className: "text-sm font-medium text-gray-700" }, "Branch Isolation"),
+            React.createElement("div", null,
+                React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Root Path"),
+                React.createElement("input", { type: "text", value: options.rootPath || '', onChange: (e) => handleOptionChange('rootPath', e.target.value || undefined), placeholder: "e.g., strings or app.ui", className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500" }),
+                React.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Show only resources under this path")),
+            React.createElement("div", null,
+                React.createElement("label", { className: "flex items-center text-xs" },
+                    React.createElement("input", { type: "checkbox", checked: options.hideRootNode ?? false, onChange: (e) => handleOptionChange('hideRootNode', e.target.checked), className: "mr-2 rounded", disabled: !options.rootPath }),
+                    "Hide Root Node"),
+                React.createElement("p", { className: "text-xs text-gray-500 mt-1 ml-5" }, "Show only children of root path (requires Root Path)")),
+            React.createElement("div", null,
+                React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-2" }, "Quick Paths"),
+                React.createElement("div", { className: "flex flex-wrap gap-1" },
+                    quickBranchPaths.map((path) => (React.createElement("button", { key: path, onClick: () => handleQuickPathSelect(path), className: `px-2 py-1 text-xs rounded border ${options.rootPath === path
+                            ? 'bg-blue-100 border-blue-300 text-blue-700'
+                            : 'bg-gray-50 border-gray-300 text-gray-600 hover:bg-gray-100'}` }, path))),
+                    React.createElement("button", { onClick: clearRootPath, className: `px-2 py-1 text-xs rounded border ${!options.rootPath
+                            ? 'bg-blue-100 border-blue-300 text-blue-700'
+                            : 'bg-gray-50 border-gray-300 text-gray-600 hover:bg-gray-100'}` }, "Clear"))))),
+        React.createElement("div", { className: "space-y-3 pt-3 border-t border-gray-200" },
+            React.createElement("h4", { className: "text-sm font-medium text-gray-700" }, "Display"),
+            React.createElement("div", null,
+                React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Empty Message"),
+                React.createElement("input", { type: "text", value: options.emptyMessage || '', onChange: (e) => handleOptionChange('emptyMessage', e.target.value || undefined), placeholder: "No resources available", className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500" })),
+            React.createElement("div", null,
+                React.createElement("label", { className: "block text-xs font-medium text-gray-600 mb-1" }, "Height"),
+                React.createElement("input", { type: "text", value: options.height || '', onChange: (e) => handleOptionChange('height', e.target.value || undefined), placeholder: "600px", className: "w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500" }),
+                React.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "CSS height value (px, rem, %, etc.)")))));
+    if (presentation === 'popover') {
+        return (React.createElement("div", { className: `relative ${className}` },
+            React.createElement("button", { onClick: () => setShowPopover(!showPopover), className: "flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" },
+                React.createElement(CogIcon, { className: "w-3 h-3 mr-1" }),
+                title,
+                React.createElement(ChevronDownIcon, { className: "w-3 h-3 ml-1" })),
+            showPopover && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "fixed inset-0 z-10", onClick: () => setShowPopover(false) }),
+                React.createElement("div", { className: "absolute top-full left-0 mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-lg z-20 p-4" },
+                    React.createElement("div", { className: "flex items-center justify-between mb-3" },
+                        React.createElement("h3", { className: "text-sm font-medium text-gray-900" }, title),
+                        React.createElement("button", { onClick: () => setShowPopover(false), className: "p-1 text-gray-400 hover:text-gray-600" },
+                            React.createElement(XMarkIcon, { className: "w-4 h-4" }))),
+                    renderControls())))));
+    }
+    if (presentation === 'collapsible') {
+        return (React.createElement("div", { className: `border border-gray-200 rounded-lg ${className}` },
+            React.createElement("button", { onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-t-lg" },
+                React.createElement("span", { className: "flex items-center" },
+                    React.createElement(CogIcon, { className: "w-4 h-4 mr-2" }),
+                    title),
+                isExpanded ? React.createElement(ChevronUpIcon, { className: "w-4 h-4" }) : React.createElement(ChevronDownIcon, { className: "w-4 h-4" })),
+            isExpanded && React.createElement("div", { className: "p-4 border-t border-gray-200" }, renderControls())));
+    }
+    if (presentation === 'popup') {
+        return (React.createElement("div", { className: `relative ${className}` },
+            React.createElement("button", { onClick: () => setShowPopover(!showPopover), className: "flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" },
+                React.createElement(CogIcon, { className: "w-3 h-3 mr-1" }),
+                title,
+                React.createElement(ChevronDownIcon, { className: "w-3 h-3 ml-1" })),
+            showPopover && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "fixed inset-0 z-40", onClick: () => setShowPopover(false) }),
+                React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4" },
+                    React.createElement("div", { className: "bg-white border border-gray-200 rounded-lg shadow-xl max-w-md w-full max-h-96 overflow-y-auto" },
+                        React.createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200" },
+                            React.createElement("h3", { className: "text-lg font-medium text-gray-900" }, title),
+                            React.createElement("button", { onClick: () => setShowPopover(false), className: "p-1 text-gray-400 hover:text-gray-600" },
+                                React.createElement(XMarkIcon, { className: "w-5 h-5" }))),
+                        React.createElement("div", { className: "p-4" }, renderControls())))))));
+    }
+    // presentation === 'inline'
+    return (React.createElement("div", { className: `border border-gray-200 rounded-lg p-4 ${className}` },
+        React.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3 flex items-center" },
+            React.createElement(CogIcon, { className: "w-4 h-4 mr-2" }),
+            title),
+        renderControls()));
+};
+export default ResourcePickerOptionsControl;
+//# sourceMappingURL=ResourcePickerOptionsControl.js.map

package/lib/components/pickers/ResourcePicker/index.d.ts

@@ -56,6 +56,6 @@ import { ResourcePickerProps } from './types';
  *
  * @public
  */
-export declare const ResourcePicker: <T = unknown>({ resources, selectedResourceId, onResourceSelect, defaultView, showViewToggle, rootPath, hideRootNode, enableSearch, searchPlaceholder, searchScope, resourceAnnotations, pendingResources, emptyMessage, height, className, onMessage }: ResourcePickerProps<T>) => React.JSX.Element;
+export declare const ResourcePicker: <T = unknown>({ resources, selectedResourceId, onResourceSelect, resourceAnnotations, pendingResources, options, className, onMessage }: ResourcePickerProps<T>) => React.JSX.Element;
 export default ResourcePicker;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/pickers/ResourcePicker/index.js

@@ -59,7 +59,9 @@ import { searchResources, filterTreeBranch } from './utils/treeNavigation';
  *
  * @public
  */
-export const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, defaultView = 'list', showViewToggle = true, rootPath, hideRootNode = false, enableSearch = true, searchPlaceholder, searchScope = 'current-branch', resourceAnnotations, pendingResources, emptyMessage, height = '600px', className = '', onMessage }) => {
+export const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, resourceAnnotations, pendingResources, options, className = '', onMessage }) => {
+    // Extract options with defaults
+    const { defaultView = 'list', showViewToggle = true, rootPath, hideRootNode = false, enableSearch = true, searchPlaceholder, searchScope = 'current-branch', emptyMessage, height = '600px' } = options || {};
     const [viewMode, setViewMode] = useState(defaultView);
     const [searchTerm, setSearchTerm] = useState('');
     // Get resource IDs based on current filters

package/lib/components/pickers/ResourcePicker/types.d.ts

@@ -33,11 +33,57 @@ export interface ResourceSelection<T = unknown> {
     /** Type of pending operation for unsaved resources */
     pendingType?: 'new' | 'modified' | 'deleted';
 }
+/**
+ * UI behavior configuration options for ResourcePicker.
+ *
+ * This interface groups all UI-related options that control how the ResourcePicker
+ * behaves and appears, separate from functional data like annotations and pending resources.
+ *
+ * @example
+ * ```tsx
+ * const pickerOptions: ResourcePickerOptions = {
+ *   defaultView: 'tree',
+ *   enableSearch: true,
+ *   searchPlaceholder: 'Find resources...',
+ *   rootPath: 'user.messages',
+ *   hideRootNode: true,
+ *   height: '400px'
+ * };
+ * ```
+ *
+ * @public
+ */
+export interface ResourcePickerOptions {
+    /** View and navigation options */
+    /** Default view mode to use on initial render */
+    defaultView?: 'list' | 'tree';
+    /** Whether to show the list/tree view toggle buttons */
+    showViewToggle?: boolean;
+    /** Branch isolation options */
+    /** Path to treat as root for tree branch isolation (e.g., "platform/territories") */
+    rootPath?: string;
+    /** Hide the root node itself, showing only its children */
+    hideRootNode?: boolean;
+    /** Search options */
+    /** Whether to enable the search input */
+    enableSearch?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Scope of search - entire tree or just the currently visible branch */
+    searchScope?: 'all' | 'current-branch';
+    /** Appearance options */
+    /** Message to display when no resources are available */
+    emptyMessage?: string;
+    /** Height of the picker component */
+    height?: string | number;
+}
 /**
  * Props for the ResourcePicker component.
  *
  * The ResourcePicker is a comprehensive component for browsing and selecting resources
  * with support for multiple view modes, search, annotations, and pending resources.
+ * UI behavior is controlled through the options object, while functional data is
+ * passed as separate props.
  *
  * @example
  * ```tsx
@@ -51,45 +97,36 @@ export interface ResourceSelection<T = unknown> {
  *       handleResourceData(selection.resourceData);
  *     }
  *   }}
- *   defaultView="tree"
- *   enableSearch={true}
  *   resourceAnnotations={{
  *     'res1': { badge: { text: '3', variant: 'info' } }
  *   }}
+ *   options={{
+ *     defaultView: 'tree',
+ *     enableSearch: true,
+ *     searchPlaceholder: 'Find resources...',
+ *     height: '400px'
+ *   }}
  * />
  * ```
  *
  * @public
  */
 export interface ResourcePickerProps<T = unknown> extends ViewBaseProps {
+    /** Core functionality */
     /** Processed resources to display in the picker */
     resources: ProcessedResources | ExtendedProcessedResources | null;
     /** Currently selected resource ID */
     selectedResourceId: string | null;
     /** Callback fired when a resource is selected, providing comprehensive selection data */
     onResourceSelect: (selection: ResourceSelection<T>) => void;
-    /** Default view mode to use on initial render */
-    defaultView?: 'list' | 'tree';
-    /** Whether to show the list/tree view toggle buttons */
-    showViewToggle?: boolean;
-    /** Path to treat as root for tree branch isolation (e.g., "platform/territories") */
-    rootPath?: string;
-    /** Hide the root node itself, showing only its children */
-    hideRootNode?: boolean;
-    /** Whether to enable the search input */
-    enableSearch?: boolean;
-    /** Placeholder text for the search input */
-    searchPlaceholder?: string;
-    /** Scope of search - entire tree or just the currently visible branch */
-    searchScope?: 'all' | 'current-branch';
+    /** Functional data */
     /** Annotations to display next to resource names (badges, indicators, etc.) */
     resourceAnnotations?: ResourceAnnotations;
     /** Pending (unsaved) resources to display alongside persisted resources */
     pendingResources?: PendingResource<T>[];
-    /** Message to display when no resources are available */
-    emptyMessage?: string;
-    /** Height of the picker component */
-    height?: string | number;
+    /** UI behavior configuration */
+    /** Options controlling picker appearance and behavior */
+    options?: ResourcePickerOptions;
 }
 /**
  * Annotations that can be displayed next to resource names in the picker.