@fgv/ts-res-ui-components 5.0.0-29 → 5.0.0-30

package/README.md

@@ -451,16 +451,49 @@ is a generic component used by all of the views, which can also be used to power
 - **Type safety**: Full TypeScript support with generic resource types
 - **Debug controls**: Optional ResourcePickerOptionsControl for development and debugging
 
+#### ResourcePicker Configuration
+
+The ResourcePicker supports two distinct configuration mechanisms:
+
+1. **`pickerOptions`** - Controls actual picker behavior (defaultView, rootPath, search settings, etc.)
+2. **`pickerOptionsPanelPresentation`** - Controls whether/how the debug options control panel is displayed
+
+```tsx
+// Example: Configure picker behavior programmatically
+<SourceView
+  resources={state.processedResources}
+  pickerOptions={{
+    defaultView: 'tree',
+    rootPath: 'user.messages',  // Focus on specific branch
+    hideRootNode: true,         // Hide the root node itself
+    enableSearch: true,
+    searchPlaceholder: 'Search user messages...',
+    height: '500px'
+  }}
+  pickerOptionsPanelPresentation="hidden"  // Hide debug controls in production
+/>
+
+// Example: Enable debug controls during development
+<SourceView
+  resources={state.processedResources}
+  pickerOptions={{
+    defaultView: 'list',
+    enableSearch: true
+  }}
+  pickerOptionsPanelPresentation={isDevelopment ? 'collapsible' : 'hidden'}
+/>
+```
+
 #### 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  
+// All view components support pickerOptionsPanelPresentation
 <ObservabilityProvider observabilityContext={myObservabilityContext}>
   <SourceView
     resources={state.processedResources}
-    pickerOptionsPresentation="collapsible"  // Enable picker options UI
+    pickerOptionsPanelPresentation="collapsible"  // Enable picker options UI
   />
 </ObservabilityProvider>
 
@@ -1002,7 +1035,7 @@ Enable the context options gear icon during development for interactive configur
 ```tsx
 <ResolutionView
   resources={processedResources}
-  pickerOptionsPresentation="collapsible"  // Shows both picker & context gear icons
+  pickerOptionsPanelPresentation="collapsible"  // Shows both picker & context gear icons
   resolutionState={resolutionState}
   resolutionActions={resolutionActions}
 />
@@ -1145,7 +1178,7 @@ Enable the context options gear icon during development for interactive filter c
 ```tsx
 <FilterView
   resources={processedResources}
-  pickerOptionsPresentation="collapsible"  // Shows both picker & context gear icons
+  pickerOptionsPanelPresentation="collapsible"  // Shows both picker & context gear icons
   filterState={filterState}
   filterActions={filterActions}
 />

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

@@ -3862,23 +3862,6 @@ declare interface IResourceOrchestratorProps {
     observabilityContext?: ObservabilityTools_2.IObservabilityContext;
 }
 
-/**
- * Configuration options for ResourcePicker components.
- * Controls behavior and appearance of resource selection controls.
- *
- * @public
- */
-declare interface IResourcePickerOptions {
-    /** How to present the picker options control */
-    presentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
-    /** Custom CSS classes for the picker */
-    className?: string;
-    /** Whether to allow multi-selection */
-    allowMultiSelect?: boolean;
-    /** Maximum number of selectable resources */
-    maxSelections?: number;
-}
-
 /**
  * UI behavior configuration options for ResourcePicker.
  *
@@ -3899,7 +3882,7 @@ declare interface IResourcePickerOptions {
  *
  * @public
  */
-declare interface IResourcePickerOptions_2 {
+declare interface IResourcePickerOptions {
     /** View and navigation options */
     /** Default view mode to use on initial render */
     defaultView?: 'list' | 'tree';
@@ -3930,9 +3913,9 @@ declare interface IResourcePickerOptions_2 {
  */
 declare interface IResourcePickerOptionsControlProps {
     /** Current picker options */
-    options: IResourcePickerOptions_2;
+    options: IResourcePickerOptions;
     /** Callback when options change */
-    onOptionsChange: (options: IResourcePickerOptions_2) => void;
+    onOptionsChange: (options: IResourcePickerOptions) => void;
     /** How to present the options control (default: 'hidden' for production use) */
     presentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
     /** Custom class name */
@@ -3994,7 +3977,7 @@ declare interface IResourcePickerProps<T = unknown> extends IViewBaseProps {
     pendingResources?: IPendingResource<T>[];
     /** UI behavior configuration */
     /** Options controlling picker appearance and behavior */
-    options?: IResourcePickerOptions_2;
+    options?: IResourcePickerOptions;
 }
 
 /**
@@ -4422,8 +4405,8 @@ declare interface IUseViewStateReturn {
 declare interface IViewBaseProps {
     /** 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';
+    /** How to present the ResourcePicker options control panel (default: 'hidden' for production use) */
+    pickerOptionsPanelPresentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
 }
 
 export { JsonValue }
@@ -4718,7 +4701,7 @@ declare namespace PickerTools {
         ResourcePicker,
         ResourcePickerOptionsControl,
         IResourcePickerProps,
-        IResourcePickerOptions_2 as IResourcePickerOptions,
+        IResourcePickerOptions,
         IResourceSelection,
         IResourceAnnotations,
         IResourceAnnotation,

package/lib/components/views/CompiledView/index.js

@@ -228,7 +228,7 @@ function renderCompiledItemDetail(data, index, activeCompiledCollection) {
  *
  * @public
  */
-export const CompiledView = ({ resources, filterState, filterResult, useNormalization: useNormalizationProp = false, onExport, pickerOptions, pickerOptionsPresentation = 'hidden', className = '' }) => {
+export const CompiledView = ({ resources, filterState, filterResult, useNormalization: useNormalizationProp = false, onExport, pickerOptions, pickerOptionsPanelPresentation = 'hidden', className = '' }) => {
     const o11y = useSmartObservability();
     const [selectedResourceId, setSelectedResourceId] = useState(null);
     const [selectedMetadataSection, setSelectedMetadataSection] = useState(null);
@@ -533,7 +533,7 @@ export const CompiledView = ({ resources, filterState, filterResult, useNormaliz
                 React.createElement("button", { onClick: handleExportBundle, className: "inline-flex items-center px-3 py-1.5 border border-blue-300 text-xs font-medium rounded text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
                     React.createElement(ArchiveBoxIcon, { className: "h-4 w-4 mr-1" }),
                     "Export Bundle")))),
-        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPresentation, title: "Compiled View Picker Options", className: "mb-6" }),
+        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPanelPresentation, title: "Compiled View Picker Options", className: "mb-6" }),
         activeProcessedResources && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6" },
             React.createElement("div", { className: "flex items-center justify-between" },
                 React.createElement("div", { className: "flex items-center space-x-6" },

package/lib/components/views/FilterView/index.js

@@ -55,7 +55,7 @@ import { useSmartObservability } from '../../../hooks/useSmartObservability';
  *
  * @public
  */
-export const FilterView = ({ resources, filterState, filterActions, filterResult, onFilterResult, pickerOptions, pickerOptionsPresentation = 'hidden', contextOptions, className = '' }) => {
+export const FilterView = ({ resources, filterState, filterActions, filterResult, onFilterResult, pickerOptions, pickerOptionsPanelPresentation = 'hidden', contextOptions, className = '' }) => {
     // Get observability context
     const o11y = useSmartObservability();
     // Local UI state
@@ -259,8 +259,8 @@ export const FilterView = ({ resources, filterState, filterActions, filterResult
         React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
             React.createElement(FunnelIcon, { className: "h-8 w-8 text-purple-600" }),
             React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Filter Tool")),
-        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPresentation, title: "Filter Tool Picker Options", className: "mb-6" }),
-        React.createElement(ResolutionContextOptionsControl, { options: currentContextOptions, onOptionsChange: setCurrentContextOptions, availableQualifiers: availableQualifiers, presentation: pickerOptionsPresentation, title: "Filter Context Options", className: "mb-6" }),
+        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPanelPresentation, title: "Filter Tool Picker Options", className: "mb-6" }),
+        React.createElement(ResolutionContextOptionsControl, { options: currentContextOptions, onOptionsChange: setCurrentContextOptions, availableQualifiers: availableQualifiers, presentation: pickerOptionsPanelPresentation, title: "Filter Context Options", className: "mb-6" }),
         React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
             React.createElement("div", { className: "mb-6" },
                 React.createElement("div", { className: "flex items-center justify-between mb-4" },

package/lib/components/views/ResolutionView/index.js

@@ -56,7 +56,7 @@ import { useSmartObservability } from '../../../hooks/useSmartObservability';
  *
  * @public
  */
-export const ResolutionView = ({ resources, filterState, filterResult, resolutionState, resolutionActions, availableQualifiers = [], resourceEditorFactory, pickerOptions, pickerOptionsPresentation = 'hidden', contextOptions, lockedViewMode, sectionTitles, allowResourceCreation = false, defaultResourceType, resourceTypeFactory, onPendingResourcesApplied, showPendingResourcesInList = true, className = '' }) => {
+export const ResolutionView = ({ resources, filterState, filterResult, resolutionState, resolutionActions, availableQualifiers = [], resourceEditorFactory, pickerOptions, pickerOptionsPanelPresentation = 'hidden', contextOptions, lockedViewMode, sectionTitles, allowResourceCreation = false, defaultResourceType, resourceTypeFactory, onPendingResourcesApplied, showPendingResourcesInList = true, className = '' }) => {
     // Get smart observability context (auto-detects and upgrades as needed)
     const o11y = useSmartObservability();
     // State for picker options control
@@ -353,8 +353,8 @@ export const ResolutionView = ({ resources, filterState, filterResult, resolutio
             React.createElement(MagnifyingGlassIcon, { className: "h-8 w-8 text-blue-600" }),
             React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Resolution Viewer"),
             isFilteringActive && (React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800" }, "Filtered"))),
-        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPresentation, title: "Resolution Viewer Picker Options", className: "mb-6" }),
-        React.createElement(ResolutionContextOptionsControl, { options: currentContextOptions, onOptionsChange: setCurrentContextOptions, availableQualifiers: availableQualifiers, presentation: pickerOptionsPresentation, title: "Resolution Context Options", className: "mb-6", allowResourceCreation: allowResourceCreationInternal, onAllowResourceCreationChange: setAllowResourceCreationInternal, showPendingResourcesInList: showPendingResourcesInListInternal, onShowPendingResourcesInListChange: setShowPendingResourcesInListInternal }),
+        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPanelPresentation, title: "Resolution Viewer Picker Options", className: "mb-6" }),
+        React.createElement(ResolutionContextOptionsControl, { options: currentContextOptions, onOptionsChange: setCurrentContextOptions, availableQualifiers: availableQualifiers, presentation: pickerOptionsPanelPresentation, title: "Resolution Context Options", className: "mb-6", allowResourceCreation: allowResourceCreationInternal, onAllowResourceCreationChange: setAllowResourceCreationInternal, showPendingResourcesInList: showPendingResourcesInListInternal, onShowPendingResourcesInListChange: setShowPendingResourcesInListInternal }),
         React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
             effectiveContextOptions?.showContextControls !== false && (React.createElement("div", { className: "mb-6" },
                 React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, effectiveContextOptions?.contextPanelTitle || 'Context Configuration'),

package/lib/components/views/SourceView/index.js

@@ -39,7 +39,7 @@ import { useSmartObservability } from '../../../hooks/useSmartObservability';
  *
  * @public
  */
-export const SourceView = ({ resources, filterState, filterResult, onExport, pickerOptions, pickerOptionsPresentation = 'hidden', className = '' }) => {
+export const SourceView = ({ resources, filterState, filterResult, onExport, pickerOptions, pickerOptionsPanelPresentation = 'hidden', className = '' }) => {
     const o11y = useSmartObservability();
     const [selectedResourceId, setSelectedResourceId] = useState(null);
     const [showJsonView, setShowJsonView] = useState(false);
@@ -149,7 +149,7 @@ export const SourceView = ({ resources, filterState, filterResult, onExport, pic
                 React.createElement("button", { onClick: handleExportSourceData, className: "inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
                     React.createElement(DocumentArrowDownIcon, { className: "h-4 w-4 mr-1" }),
                     "Export JSON")))),
-        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPresentation, title: "Source Browser Picker Options", className: "mb-6" }),
+        React.createElement(ResourcePickerOptionsControl, { options: currentPickerOptions, onOptionsChange: setCurrentPickerOptions, presentation: pickerOptionsPanelPresentation, title: "Source Browser Picker Options", className: "mb-6" }),
         activeProcessedResources && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6" },
             React.createElement("button", { onClick: () => setShowJsonView(!showJsonView), className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
                 React.createElement(CodeBracketIcon, { className: "h-4 w-4 mr-2" }),

package/lib/types/index.d.ts

@@ -2,22 +2,7 @@ import { Result } from '@fgv/ts-utils';
 import { ResourceJson, Config, Bundle, Resources, Runtime, QualifierTypes, Qualifiers, ResourceTypes, Import } from '@fgv/ts-res';
 import { JsonCompatible, JsonValue } from '@fgv/ts-json-base';
 import type { IObservabilityContext } from '../utils/observability';
-/**
- * Configuration options for ResourcePicker components.
- * Controls behavior and appearance of resource selection controls.
- *
- * @public
- */
-export interface IResourcePickerOptions {
-    /** How to present the picker options control */
-    presentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
-    /** Custom CSS classes for the picker */
-    className?: string;
-    /** Whether to allow multi-selection */
-    allowMultiSelect?: boolean;
-    /** Maximum number of selectable resources */
-    maxSelections?: number;
-}
+import type { IResourcePickerOptions } from '../components/pickers/ResourcePicker/types';
 /**
  * Configuration options for edit validation.
  *
@@ -210,8 +195,8 @@ export interface IImportedDirectory {
 export interface IViewBaseProps {
     /** 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';
+    /** How to present the ResourcePicker options control panel (default: 'hidden' for production use) */
+    pickerOptionsPanelPresentation?: 'hidden' | 'inline' | 'collapsible' | 'popup' | 'popover';
 }
 /**
  * Props for the ImportView component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fgv/ts-res-ui-components",
-  "version": "5.0.0-29",
+  "version": "5.0.0-30",
   "description": "Reusable React components for ts-res resource visualization and management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -23,11 +23,11 @@
     "@heroicons/react": "~2.2.0",
     "tslib": "^2.8.1",
     "json-edit-react": "~1.28.2",
-    "@fgv/ts-res": "5.0.0-29",
-    "@fgv/ts-utils": "5.0.0-29",
-    "@fgv/ts-json": "5.0.0-29",
-    "@fgv/ts-extras": "5.0.0-29",
-    "@fgv/ts-json-base": "5.0.0-29"
+    "@fgv/ts-res": "5.0.0-30",
+    "@fgv/ts-utils": "5.0.0-30",
+    "@fgv/ts-extras": "5.0.0-30",
+    "@fgv/ts-json": "5.0.0-30",
+    "@fgv/ts-json-base": "5.0.0-30"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -62,7 +62,7 @@
     "@microsoft/api-documenter": "^7.26.31",
     "@microsoft/api-extractor": "^7.52.10",
     "@testing-library/dom": "^10.4.0",
-    "@fgv/ts-utils-jest": "5.0.0-29"
+    "@fgv/ts-utils-jest": "5.0.0-30"
   },
   "scripts": {
     "build": "heft build --clean",