@fgv/ts-res-ui-components 5.0.0-19 → 5.0.0-20

package/README.md

@@ -14,9 +14,11 @@ This packlet is largely AI written, and it shows.
 - **🔄 Resource Management**: Import, process, and manage ts-res configurations and bundles
 - **🔍 Advanced Filtering**: Filter resources by context with qualifier reduction
 - **🎯 Resource Resolution**: Test resource resolution with dynamic context values
+- **➕ Resource Creation**: Create new resources with pending/apply workflow and template support
 - **🔒 View Mode Locking**: Lock to single view mode for simplified interfaces
 - **📊 Visualization**: Multiple views for exploring resource structures and compiled output
 - **⚙️ Configuration**: Visual configuration management for qualifier types, qualifiers, and resource types
+- **🎛️ Host Control**: Programmatic control of qualifier values and resource types
 - **📁 File Handling**: Support for directory imports, ZIP files via ts-res zip-archive packlet, and bundle loading
 - **🎨 Modern UI**: Built with Tailwind CSS and Heroicons for a clean, responsive interface
 
@@ -364,7 +366,7 @@ Shows the compiled resource structure with detailed candidate information using
 
 ### ResolutionView
 
-Interactive resource resolution testing with context management and support for custom resource editors via the ResourceEditorFactory pattern. Supports locking to a single view mode to simplify the interface for specific use cases.
+Interactive resource resolution testing with context management and support for custom resource editors via the ResourceEditorFactory pattern. Supports locking to a single view mode to simplify the interface for specific use cases. Now includes host-controlled resolution support for programmatic qualifier value management and the ability to create new resources with a pending/apply workflow.
 
 > 📚 **[See ResolutionView documentation →](./docs/ts-res-ui-components.resolutionview.md)**
 
@@ -381,9 +383,144 @@ Interactive resource resolution testing with context management and support for
     enableSearch: true,
     searchPlaceholder: "Search resources for resolution testing..."
   }}
+  // Optional: Host-controlled resolution
+  contextOptions={{
+    hostManagedValues: {
+      language: 'en-US',
+      platform: 'web',
+      market: 'eastern-europe'
+    },
+    showContextControls: true  // Can hide controls for host-only resolution
+  }}
+  // Optional: Resource creation with pending/apply workflow
+  allowResourceCreation={true}
+  defaultResourceType="json"  // Optional: Host-controlled resource type
+  showPendingResourcesInList={true}  // Show pending resources in the picker (default: true)
+  onPendingResourcesApplied={(added, deleted) => {
+    console.log(`Applied ${added.length} new resources, ${deleted.length} deletions`);
+  }}
 />
 ```
 
+#### Host-Controlled Resolution
+
+The ResolutionView now supports a three-layer context system that allows host applications to programmatically control qualifier values while still allowing user interaction:
+
+1. **Host-Managed Values**: Values controlled by the host application that are applied automatically
+2. **Applied User Values**: User values that have been explicitly applied via the "Apply Changes" button
+3. **Pending User Values**: User edits that haven't been applied yet
+
+This is particularly useful when:
+- The UI needs to be hidden but resolution still needs to work
+- Certain qualifier values should be controlled by the application logic
+- You want to provide default values that users can optionally override
+
+```tsx
+// Example: Host-controlled resolution with hidden UI
+<ResolutionView
+  resources={state.processedResources}
+  resolutionState={resolutionState}
+  resolutionActions={resolutionActions}
+  availableQualifiers={['language', 'platform', 'market']}
+  contextOptions={{
+    hostManagedValues: {
+      language: userProfile.language,
+      platform: detectPlatform(),
+      market: userProfile.region
+    },
+    showContextControls: false,  // Hide the context controls
+    qualifierOptions: {
+      language: { visible: false },  // Hide specific qualifiers
+      platform: { visible: false }
+    }
+  }}
+/>
+
+// Example: Mixed host and user control
+<ResolutionView
+  resources={state.processedResources}
+  resolutionState={resolutionState}
+  resolutionActions={resolutionActions}
+  availableQualifiers={availableQualifiers}
+  contextOptions={{
+    hostManagedValues: {
+      platform: 'web'  // Platform is always controlled by host
+    },
+    qualifierOptions: {
+      platform: { 
+        visible: true,
+        hostValue: 'web',  // Shows as read-only in UI
+        disabled: true
+      }
+    }
+  }}
+/>
+```
+
+**Key features of host-controlled resolution:**
+- Host values are applied automatically when they change
+- User values require explicit "Apply Changes" action
+- Host values override user values when both are set
+- Flexible UI control - can hide all controls, specific qualifiers, or show as read-only
+- Works seamlessly with the existing resolution state management
+
+#### Resource Creation
+
+ResolutionView now supports creating new resources directly in the UI with a pending/apply workflow similar to context management:
+
+```tsx
+// Basic resource creation - user selects resource type
+<ResolutionView
+  resources={state.processedResources}
+  resolutionState={resolutionState}
+  resolutionActions={resolutionActions}
+  allowResourceCreation={true}
+  onPendingResourcesApplied={(added, deleted) => {
+    // Rebuild resource manager with new resources
+    const updatedResources = rebuildWithResources(added, deleted);
+    setState({ processedResources: updatedResources });
+  }}
+/>
+
+// Host-controlled resource type
+<ResolutionView
+  resources={state.processedResources}
+  resolutionState={resolutionState}
+  resolutionActions={resolutionActions}
+  allowResourceCreation={true}
+  defaultResourceType="json"  // Type selector hidden, always creates JSON resources
+  onPendingResourcesApplied={(added, deleted) => {
+    console.log(`Applied ${added.length} additions, ${deleted.length} deletions`);
+  }}
+/>
+
+// With custom resource types
+<ResolutionView
+  resources={state.processedResources}
+  resolutionState={resolutionState}
+  resolutionActions={resolutionActions}
+  allowResourceCreation={true}
+  resourceTypeFactory={[customType1, customType2]}  // Provide custom resource types
+  showPendingResourcesInList={true}  // Show pending resources with visual distinction
+/>
+```
+
+**Unified Change Workflow (Edits, Additions, Deletions):**
+1. Click "Add Resource" in the picker header to create new resources (if enabled)
+2. Edit existing resources from the results pane using the JSON or custom editors
+3. Mark resources for deletion where supported
+4. All changes appear in a single "Pending Changes" bar with counts (edits/additions/deletions)
+5. Click "Apply Changes" to commit everything in one atomic rebuild
+6. Or click "Discard Changes" to remove all pending changes
+
+**Key features:**
+- **Template-based creation**: Resource types provide default templates for new resources
+- **Pending workflow**: Resources aren't added immediately, allowing review before applying
+- **Host control**: Can specify a default resource type to hide the type selector
+- **Batch operations**: Create multiple resources before applying
+- **Visual feedback**: Pending resources shown with distinct styling
+- **Validation**: Resource IDs are validated for uniqueness
+
 #### Custom Resource Editors
 
 The ResolutionView supports custom editors for specific resource types through the `ResourceEditorFactory` interface:

package/config/jest.setup.js

@@ -50,6 +50,9 @@ global.URL = {
   revokeObjectURL: jest.fn()
 };
 
+// Extend jest matchers (toBeInTheDocument, etc.)
+require('@testing-library/jest-dom');
+
 // Mock document methods for file export
 global.document = {
   createElement: jest.fn(() => ({

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

@@ -677,7 +677,7 @@ declare function createTsResSystemFromConfig(systemConfig?: Config.Model.ISystem
  *             }}
  *           />
  *
- *           <ResolutionTools.ResolutionEditControls
+ *           <ResolutionTools.UnifiedChangeControls
  *             editCount={state.editedResources.size}
  *             isApplying={state.isApplyingEdits}
  *             hasEdits={state.hasUnsavedEdits}
@@ -2135,6 +2135,15 @@ export declare interface OrchestratorActions {
     clearResourceEdits: () => void;
     applyResourceEdits: () => Promise<void>;
     discardResourceEdits: () => void;
+    startNewResource: (defaultTypeName?: string) => void;
+    updateNewResourceId: (id: string) => void;
+    selectResourceType: (type: string) => void;
+    saveNewResourceAsPending: () => void;
+    cancelNewResource: () => void;
+    removePendingResource: (resourceId: string) => void;
+    markResourceForDeletion: (resourceId: string) => void;
+    applyPendingResources: () => Promise<void>;
+    discardPendingResources: () => void;
     selectResource: (resourceId: string | null) => void;
     addMessage: (type: Message['type'], message: string) => void;
     clearMessages: () => void;
@@ -2800,8 +2809,8 @@ declare function readFilesFromInput(files: FileList): Promise<ImportedFile[]>;
 declare interface ResolutionActions {
     /** Update a context value for resolution testing */
     updateContextValue: (qualifierName: string, value: string | undefined) => void;
-    /** Apply pending context changes to the resolver */
-    applyContext: () => void;
+    /** Apply pending context changes to the resolver (with optional host-managed values) */
+    applyContext: (hostManagedValues?: Record<string, string | undefined>) => void;
     /** Select a resource for detailed resolution testing */
     selectResource: (resourceId: string) => void;
     /** Change how resolution results are displayed */
@@ -2820,6 +2829,24 @@ declare interface ResolutionActions {
     applyEdits: () => Promise<void>;
     /** Discard all pending edits */
     discardEdits: () => void;
+    /** Start creating a new resource */
+    startNewResource: (defaultTypeName?: string) => void;
+    /** Update the resource ID for the new resource being created */
+    updateNewResourceId: (id: string) => void;
+    /** Select a resource type for the new resource */
+    selectResourceType: (type: string) => void;
+    /** Add the new resource to pending resources (not applied yet) */
+    saveNewResourceAsPending: () => void;
+    /** Cancel the new resource creation */
+    cancelNewResource: () => void;
+    /** Remove a pending resource */
+    removePendingResource: (resourceId: string) => void;
+    /** Mark an existing resource for deletion */
+    markResourceForDeletion: (resourceId: string) => void;
+    /** Apply all pending resource additions and deletions */
+    applyPendingResources: () => Promise<void>;
+    /** Discard all pending resource changes */
+    discardPendingResources: () => void;
 }
 
 /**
@@ -2934,158 +2961,14 @@ declare interface ResolutionContextOptionsControlProps {
     className?: string;
     /** Title for the control section */
     title?: string;
-}
-
-/**
- * Control panel for managing pending resource edits during resolution testing.
- *
- * The ResolutionEditControls component provides a user interface for applying or discarding
- * resource edits made during resolution testing. It shows the number of pending edits,
- * provides clear actions for applying or discarding them, and includes safety confirmations
- * to prevent accidental data loss.
- *
- * @example
- * ```tsx
- * import { ResolutionTools } from '@fgv/ts-res-ui-components';
- *
- * // Basic usage with resolution state
- * const ResolutionInterface = () => {
- *   const { state, actions } = useResolutionState(processedResources);
- *
- *   return (
- *     <div>
- *       <ResolutionTools.ResolutionEditControls
- *         editCount={state.editedResources.size}
- *         isApplying={state.isApplyingEdits}
- *         hasEdits={state.hasUnsavedEdits}
- *         onApplyEdits={actions.applyEdits}
- *         onDiscardEdits={actions.discardEdits}
- *       />
- *     </div>
- *   );
- * };
- * ```
- *
- * @example
- * ```tsx
- * // Advanced usage with custom handlers and state management
- * const AdvancedResolutionEditor = () => {
- *   const [edits, setEdits] = useState(new Map());
- *   const [isApplying, setIsApplying] = useState(false);
- *
- *   const handleApplyEdits = async () => {
- *     setIsApplying(true);
- *     try {
- *       // Apply each edit to the resource system
- *       for (const [resourceId, editedValue] of edits.entries()) {
- *         await applyResourceEdit(resourceId, editedValue);
- *       }
- *
- *       // Rebuild the resource system
- *       await rebuildResourceSystem();
- *
- *       // Clear edits after successful application
- *       setEdits(new Map());
- *       showSuccess('Edits applied successfully');
- *     } catch (error) {
- *       showError(`Failed to apply edits: ${error.message}`);
- *     } finally {
- *       setIsApplying(false);
- *     }
- *   };
- *
- *   const handleDiscardEdits = () => {
- *     setEdits(new Map());
- *     showInfo('All pending edits discarded');
- *   };
- *
- *   return (
- *     <ResolutionTools.ResolutionEditControls
- *       editCount={edits.size}
- *       isApplying={isApplying}
- *       hasEdits={edits.size > 0}
- *       onApplyEdits={handleApplyEdits}
- *       onDiscardEdits={handleDiscardEdits}
- *       className="my-custom-controls"
- *     />
- *   );
- * };
- * ```
- *
- * @example
- * ```tsx
- * // Integration with resource editing workflow
- * const ResourceEditingWorkflow = () => {
- *   const [selectedResource, setSelectedResource] = useState(null);
- *   const [pendingEdits, setPendingEdits] = useState({});
- *
- *   const saveResourceEdit = (resourceId, editedValue, originalValue) => {
- *     setPendingEdits(prev => ({
- *       ...prev,
- *       [resourceId]: { editedValue, originalValue, timestamp: new Date() }
- *     }));
- *   };
- *
- *   const applyAllEdits = async () => {
- *     const resourceManager = getResourceManager();
- *
- *     // Apply edits as new candidates with current context
- *     for (const [resourceId, edit] of Object.entries(pendingEdits)) {
- *       await resourceManager.addCandidate(resourceId, {
- *         value: edit.editedValue,
- *         conditions: getCurrentResolutionContext(),
- *         metadata: { editedAt: edit.timestamp }
- *       });
- *     }
- *
- *     // Clear pending edits
- *     setPendingEdits({});
- *   };
- *
- *   return (
- *     <div className="resolution-workflow">
- *       <ResolutionTools.EditableJsonView
- *         resourceId={selectedResource}
- *         value={getResourceValue(selectedResource)}
- *         onSave={saveResourceEdit}
- *       />
- *
- *       <ResolutionTools.ResolutionEditControls
- *         editCount={Object.keys(pendingEdits).length}
- *         isApplying={false}
- *         hasEdits={Object.keys(pendingEdits).length > 0}
- *         onApplyEdits={applyAllEdits}
- *         onDiscardEdits={() => setPendingEdits({})}
- *       />
- *     </div>
- *   );
- * };
- * ```
- *
- * @public
- */
-declare const ResolutionEditControls: React_2.FC<ResolutionEditControlsProps>;
-
-/**
- * Props for the ResolutionEditControls component.
- *
- * @public
- */
-declare interface ResolutionEditControlsProps {
-    /** Number of unsaved edits */
-    editCount: number;
-    /** Whether edit application is currently in progress */
-    isApplying: boolean;
-    /** Whether any edits exist to operate on */
-    hasEdits: boolean;
-    /** Callback to apply all pending edits */
-    onApplyEdits?: () => Promise<void>;
-    /** Callback to discard all pending edits */
-    onDiscardEdits?: () => void;
-    /** Whether the controls should be disabled */
-    disabled?: boolean;
-    /** Additional CSS classes */
-    className?: string;
+    /** Editing/creation toggle - when provided, show UI to control it */
+    allowResourceCreation?: boolean;
+    /** Callback for editing/creation toggle */
+    onAllowResourceCreationChange?: (allow: boolean) => void;
+    /** Pending resources list visibility - when provided, show UI to control it */
+    showPendingResourcesInList?: boolean;
+    /** Callback for pending resources list visibility */
+    onShowPendingResourcesInListChange?: (show: boolean) => void;
 }
 
 /**
@@ -3324,13 +3207,28 @@ declare interface ResolutionState {
     hasUnsavedEdits: boolean;
     /** Whether edits are currently being applied to the system */
     isApplyingEdits: boolean;
+    /** Resources waiting to be added to the system */
+    pendingResources: Map<string, ResourceJson.Json.ILooseResourceDecl>;
+    /** IDs of resources marked for deletion */
+    pendingResourceDeletions: Set<string>;
+    /** Draft of a new resource being created */
+    newResourceDraft?: {
+        resourceId: string;
+        resourceType: string;
+        template: ResourceJson.Json.ILooseResourceDecl;
+        isValid: boolean;
+    };
+    /** Available resource types for creation */
+    availableResourceTypes: ResourceTypes.IResourceType[];
+    /** Whether there are pending resource additions or deletions */
+    hasPendingResourceChanges: boolean;
 }
 
 export declare namespace ResolutionTools {
     export {
         ResolutionView,
         EditableJsonView,
-        ResolutionEditControls,
+        UnifiedChangeControls,
         QualifierContextControl,
         ResolutionContextOptionsControl,
         useResolutionState,
@@ -3439,6 +3337,16 @@ declare interface ResolutionViewProps extends ViewBaseProps {
         /** Title for the results section (default: "Results") */
         results?: string;
     };
+    /** Allow creating new resources in the UI */
+    allowResourceCreation?: boolean;
+    /** Default resource type for new resources (hides type selector if provided) */
+    defaultResourceType?: string;
+    /** Factory for creating custom resource types */
+    resourceTypeFactory?: ResourceTypes.IResourceType[];
+    /** Callback when pending resources are applied */
+    onPendingResourcesApplied?: (added: ResourceJson.Json.ILooseResourceDecl[], deleted: string[]) => void;
+    /** Show pending resources in the resource list with visual distinction */
+    showPendingResourcesInList?: boolean;
 }
 
 /**
@@ -4619,6 +4527,58 @@ export declare namespace TsResTools {
     }
 }
 
+/**
+ * Unified change controls for ResolutionView.
+ *
+ * @example
+ * ```tsx
+ * <UnifiedChangeControls
+ *   editCount={state.editedResources.size}
+ *   addCount={state.pendingResources.size}
+ *   deleteCount={state.pendingResourceDeletions.size}
+ *   isApplying={state.isApplyingEdits}
+ *   disabled={!state.currentResolver}
+ *   onApplyAll={actions.applyPendingResources}
+ *   onDiscardAll={() => {
+ *     actions.discardEdits();
+ *     actions.discardPendingResources();
+ *   }}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const UnifiedChangeControls: React_2.FC<UnifiedChangeControlsProps>;
+
+/**
+ * Unified control bar that summarizes all pending changes (edits, additions, deletions)
+ * and provides a single Apply/Discard action.
+ *
+ * Renders chips for the counts of pending edits, additions, and deletions. The Apply button
+ * should commit all pending changes atomically (via a system rebuild), and Discard clears all
+ * pending change buffers. This replaces older separate controls for edits and resource creation.
+ *
+ * @public
+ */
+declare interface UnifiedChangeControlsProps {
+    /** Number of pending edits to existing resources */
+    editCount: number;
+    /** Number of pending new resources to be added */
+    addCount: number;
+    /** Number of resources marked for deletion */
+    deleteCount: number;
+    /** Whether an apply operation is in progress (shows spinner and disables buttons) */
+    isApplying?: boolean;
+    /** Disable all actions (e.g., when no resolver/context is active) */
+    disabled?: boolean;
+    /** Optional CSS class names to attach to the container */
+    className?: string;
+    /** Apply all pending changes in one step (typically triggers rebuild) */
+    onApplyAll: () => Promise<void> | void;
+    /** Discard all pending changes (edits, additions, deletions) */
+    onDiscardAll: () => void;
+}
+
 /**
  * Hook for managing system configuration state including qualifiers, qualifier types, and resource types.
  *

package/lib/components/common/QualifierContextControl.js

@@ -192,9 +192,11 @@ export const QualifierContextControl = ({ qualifierName, value, onChange, disabl
     }
     return (React.createElement("div", { className: `bg-white rounded border border-gray-200 p-2 ${className} ${customClassName}` },
         React.createElement("div", { className: "flex items-center gap-2" },
-            React.createElement("label", { className: "text-sm font-medium text-gray-700 min-w-0 flex-shrink-0" },
+            React.createElement("label", { className: "text-sm font-medium text-gray-700 min-w-0 flex-shrink-0 flex items-center gap-1" },
                 qualifierName,
-                ":"),
+                ":",
+                isHostManaged && showHostValue && (React.createElement("span", { className: "text-[10px] px-1 py-0.5 rounded bg-blue-100 text-blue-700", title: "Host-managed value" }, "HOST")),
+                !isHostManaged && !isEditable && (React.createElement("span", { className: "text-[10px] px-1 py-0.5 rounded bg-gray-200 text-gray-700", title: "Locked by host or configuration" }, "LOCKED"))),
             React.createElement("div", { className: "flex-1 flex items-center gap-1" },
                 hasEnumeratedValues ? (
                 // Dropdown for enumerated values

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

@@ -17,6 +17,14 @@ export interface ResolutionContextOptionsControlProps {
     className?: string;
     /** Title for the control section */
     title?: string;
+    /** Editing/creation toggle - when provided, show UI to control it */
+    allowResourceCreation?: boolean;
+    /** Callback for editing/creation toggle */
+    onAllowResourceCreationChange?: (allow: boolean) => void;
+    /** Pending resources list visibility - when provided, show UI to control it */
+    showPendingResourcesInList?: boolean;
+    /** Callback for pending resources list visibility */
+    onShowPendingResourcesInListChange?: (show: boolean) => void;
 }
 /**
  * Reusable control for configuring ResolutionView context options.

package/lib/components/common/ResolutionContextOptionsControl.js

@@ -36,7 +36,7 @@ import { CogIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/r
  *
  * @public
  */
-export const ResolutionContextOptionsControl = ({ options, onOptionsChange, availableQualifiers = [], presentation = 'hidden', className = '', title = 'Context Options' }) => {
+export const ResolutionContextOptionsControl = ({ options, onOptionsChange, availableQualifiers = [], presentation = 'hidden', className = '', title = 'Context Options', allowResourceCreation, onAllowResourceCreationChange, showPendingResourcesInList, onShowPendingResourcesInListChange }) => {
     // Early return for hidden presentation
     if (presentation === 'hidden') {
         return null;
@@ -105,6 +105,14 @@ export const ResolutionContextOptionsControl = ({ options, onOptionsChange, avai
                     "Use ",
                     '{qualifierName}',
                     " for dynamic qualifier names"))),
+        (allowResourceCreation !== undefined || showPendingResourcesInList !== undefined) && (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" }, "Editing & Creation"),
+            allowResourceCreation !== undefined && (React.createElement("label", { className: "flex items-center text-xs" },
+                React.createElement("input", { type: "checkbox", checked: !!allowResourceCreation, onChange: (e) => onAllowResourceCreationChange?.(e.target.checked), className: "mr-2 rounded" }),
+                "Allow Resource Creation")),
+            showPendingResourcesInList !== undefined && (React.createElement("label", { className: "flex items-center text-xs" },
+                React.createElement("input", { type: "checkbox", checked: !!showPendingResourcesInList, onChange: (e) => onShowPendingResourcesInListChange?.(e.target.checked), className: "mr-2 rounded" }),
+                "Show Pending Resources In List")))),
         availableQualifiers.length > 0 && (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" }, "Per-Qualifier Settings"),
             React.createElement("div", { className: "space-y-3" }, availableQualifiers.map((qualifierName) => {

package/lib/components/orchestrator/ResourceOrchestrator.js

@@ -311,6 +311,17 @@ export const ResourceOrchestrator = ({ children, initialConfiguration, qualifier
         clearResourceEdits: resolutionData.actions.clearEdits,
         applyResourceEdits: resolutionData.actions.applyEdits,
         discardResourceEdits: resolutionData.actions.discardEdits,
+        // Resource creation actions
+        startNewResource: resolutionData.actions.startNewResource,
+        updateNewResourceId: resolutionData.actions.updateNewResourceId,
+        selectResourceType: resolutionData.actions.selectResourceType,
+        saveNewResourceAsPending: resolutionData.actions.saveNewResourceAsPending,
+        cancelNewResource: resolutionData.actions.cancelNewResource,
+        removePendingResource: resolutionData.actions.removePendingResource,
+        markResourceForDeletion: resolutionData.actions.markResourceForDeletion,
+        applyPendingResources: resolutionData.actions.applyPendingResources,
+        discardPendingResources: resolutionData.actions.discardPendingResources,
+        // Combined apply/discard removed; use applyPendingResources/discard* directly
         // UI state management
         selectResource: viewState.selectResource,
         addMessage: viewState.addMessage,

package/lib/components/views/ResolutionView/EditableJsonView.d.ts

@@ -172,7 +172,7 @@ export interface EditableJsonViewProps {
  *             }}
  *           />
  *
- *           <ResolutionTools.ResolutionEditControls
+ *           <ResolutionTools.UnifiedChangeControls
  *             editCount={state.editedResources.size}
  *             isApplying={state.isApplyingEdits}
  *             hasEdits={state.hasUnsavedEdits}

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

@@ -152,7 +152,7 @@ import { validateEditedResource } from '../../../utils/resolutionEditing';
  *             }}
  *           />
  *
- *           <ResolutionTools.ResolutionEditControls
+ *           <ResolutionTools.UnifiedChangeControls
  *             editCount={state.editedResources.size}
  *             isApplying={state.isApplyingEdits}
  *             hasEdits={state.hasUnsavedEdits}

package/lib/components/views/ResolutionView/NewResourceModal.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ResourceTypes } from '@fgv/ts-res';
+interface NewResourceModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    resourceId: string;
+    resourceType: string;
+    availableResourceTypes: ResourceTypes.IResourceType[];
+    isValid: boolean;
+    defaultResourceType?: string;
+    onUpdateResourceId: (id: string) => void;
+    onSelectResourceType: (type: string) => void;
+    onSave: () => void;
+}
+/**
+ * Modal dialog for creating new resources with type selection and ID input.
+ * Supports host-controlled resource types that hide the type selector.
+ */
+export declare const NewResourceModal: React.FC<NewResourceModalProps>;
+export default NewResourceModal;
+//# sourceMappingURL=NewResourceModal.d.ts.map