Scripture text picker prototype + LanguageMultipicker (design exploration)

.gitignore

@@ -64,4 +64,5 @@ c-sharp/CLAUDE.md
 CLAUDE.md
 CLAUDE.md.backup
 
+docs/superpowers/
 .review

assets/localization/en.json

@@ -301,6 +301,16 @@
   "%project_settings_project_group1_description%": "Settings pertaining to the selected project",
   "%project_settings_project_group1_label%": "Project properties",
   "%redoButton_tooltip%": "Redo",
+  "%resourcePicker_button_use%": "Use",
+  "%resourcePicker_language_filter_any%": "Any language",
+  "%resourcePicker_language_filter_multipleSelected%": "{selectCount} languages",
+  "%resourcePicker_no_results%": "No results found",
+  "%resourcePicker_search_placeholder%": "Search resources…",
+  "%resourcePicker_section_already_selected%": "Included",
+  "%resourcePicker_section_available_to_download%": "Available to download",
+  "%resourcePicker_section_installed%": "Installed",
+  "%resourcePicker_showing_count%": "Showing {filtered} of {total} resources",
+  "%resourcePicker_title%": "Resource picker",
   "%resources_deprecated_any%": "Any",
   "%scripture_section_dc_long%": "Deuterocanon",
   "%scripture_section_dc_short%": "DC",

assets/localization/es.json

@@ -422,6 +422,16 @@
   "%project_settings_project_group1_description%": "Configuración del proyecto seleccionada",
   "%project_settings_project_group1_label%": "Propiedades del proyecto",
   "%redoButton_tooltip%": "Rehacer",
+  "%resourcePicker_button_use%": "Usar",
+  "%resourcePicker_language_filter_any%": "Cualquier idioma",
+  "%resourcePicker_language_filter_multipleSelected%": "{selectCount} idiomas",
+  "%resourcePicker_no_results%": "No se encontraron resultados",
+  "%resourcePicker_search_placeholder%": "Buscar recursos…",
+  "%resourcePicker_section_already_selected%": "Incluido",
+  "%resourcePicker_section_available_to_download%": "Disponible para descargar",
+  "%resourcePicker_section_installed%": "Instalado",
+  "%resourcePicker_showing_count%": "Mostrando {filtered} de {total} recursos",
+  "%resourcePicker_title%": "Selector de recursos",
   "%scripture_section_dc_long%": "Deuterocanon",
   "%scripture_section_dc_short%": "DC",
   "%scripture_section_extra_long%": "Material extra",

lib/papi-dts/papi.d.ts

@@ -5954,7 +5954,7 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
   import { DialogDefinitionBase, DialogProps } from 'renderer/components/dialogs/dialog-base.data';
   import { ReactElement } from 'react';
   import { ProjectMetadataFilterOptions } from 'shared/models/project-data-provider-factory.interface';
-  import { LocalizeKey } from 'platform-bible-utils';
+  import { DblResourceData, LocalizeKey, ResourceType } from 'platform-bible-utils';
   /** The tabType for the about dialog in `about-dialog.component.tsx` */
   export const ABOUT_DIALOG_TYPE = 'platform.aboutDialog';
   /** The tabType for the select project dialog in `select-project.dialog.tsx` */
@@ -5967,6 +5967,8 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
   export const ALERT_DIALOG_TYPE = 'platform.alert';
   /** The dialogType for confirm dialogs rendered via overlay */
   export const CONFIRM_DIALOG_TYPE = 'platform.confirm';
+  /** The tabType for the resource picker dialog in `resource-picker.dialog.tsx` */
+  export const RESOURCE_PICKER_DIALOG_TYPE = 'platform.resourcePicker';
   type ProjectDialogOptionsBase = DialogOptions & ProjectMetadataFilterOptions;
   /** Options to provide when showing the Select Project dialog */
   export type SelectProjectDialogOptions = ProjectDialogOptionsBase;
@@ -5987,6 +5989,13 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
     /** Custom label for the OK button. Defaults to a localized "OK". */
     okLabel?: string | LocalizeKey;
   };
+  /** Options to provide when showing the Resource Picker dialog */
+  export type ResourcePickerDialogOptions = DialogOptions & {
+    /** If provided, only resources of this type are shown */
+    resourceType?: ResourceType;
+    /** IDs of resources already selected in the calling panel */
+    selectedResourceIds?: string[];
+  };
   /** Options to provide when showing a confirm dialog */
   export type ConfirmDialogOptions = DialogOptions & {
     /** The message body displayed in the dialog. Required for confirm dialogs. */
@@ -6013,6 +6022,7 @@ declare module 'renderer/components/dialogs/dialog-definition.model' {
     [SELECT_BOOKS_DIALOG_TYPE]: DialogDataTypes<SelectBooksDialogOptions, string[]>;
     [ALERT_DIALOG_TYPE]: DialogDataTypes<AlertDialogOptions, true>;
     [CONFIRM_DIALOG_TYPE]: DialogDataTypes<ConfirmDialogOptions, boolean>;
+    [RESOURCE_PICKER_DIALOG_TYPE]: DialogDataTypes<ResourcePickerDialogOptions, DblResourceData>;
   }
   /** All dialog types that have DialogDefinition entries */
   export type DialogTabTypes = keyof DialogTypes;

lib/platform-bible-react/dist/index.d.ts

@@ -7,7 +7,7 @@ import { Column, ColumnDef as TSColumnDef, Row as TSRow, SortDirection as TSSort
 import { ClassValue } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { LucideProps } from 'lucide-react';
-import { CommentStatus, LanguageStrings, LegacyCommentThread, LocalizeKey, Localized, LocalizedStringValue, MenuItemContainingCommand, MultiColumnMenu, PlatformEvent, PlatformEventAsync, PlatformEventHandler, ScriptureSelection, ScrollGroupId } from 'platform-bible-utils';
+import { CommentStatus, DblResourceData, LanguageStrings, LegacyCommentThread, LocalizeKey, Localized, LocalizedStringValue, MenuItemContainingCommand, MultiColumnMenu, PlatformEvent, PlatformEventAsync, PlatformEventHandler, ResourceType, ScriptureSelection, ScrollGroupId } from 'platform-bible-utils';
 import { Avatar as AvatarPrimitive, Checkbox as CheckboxPrimitive, ContextMenu as ContextMenuPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Label as LabelPrimitive, Popover as PopoverPrimitive, Progress as ProgressPrimitive, RadioGroup as RadioGroupPrimitive, Select as SelectPrimitive, Separator as SeparatorPrimitive, Slider as SliderPrimitive, Switch as SwitchPrimitive, Tabs as RadixTabs, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive } from 'radix-ui';
 import React$1 from 'react';
 import { CSSProperties, ChangeEventHandler, ComponentProps, FC, FocusEventHandler, LegacyRef, MutableRefObject, PropsWithChildren, ReactNode, RefObject } from 'react';
@@ -1020,6 +1020,58 @@ export declare function MarkerMenu({ localizedStrings, markerMenuItems, searchRe
 export interface SelectMenuItemHandler {
 	(selectedMenuItem: MenuItemContainingCommand): void;
 }
+/**
+ * Localization keys used by {@link ResourcePickerDialog}. Pass to `useLocalizedStrings` and forward
+ * the result as the `localizedStrings` prop.
+ */
+export declare const RESOURCE_PICKER_DIALOG_STRING_KEYS: readonly [
+	"%resourcePicker_title%",
+	"%resourcePicker_section_already_selected%",
+	"%resourcePicker_section_installed%",
+	"%resourcePicker_section_available_to_download%",
+	"%resourcePicker_button_use%",
+	"%resourcePicker_no_results%",
+	"%resourcePicker_search_placeholder%",
+	"%resourcePicker_language_filter_any%",
+	"%resourcePicker_language_filter_multipleSelected%",
+	"%resourcePicker_showing_count%"
+];
+/**
+ * Map of localized strings required by {@link ResourcePickerDialog}. Derive from
+ * {@link RESOURCE_PICKER_DIALOG_STRING_KEYS}.
+ */
+export type ResourcePickerDialogLocalizedStrings = {
+	[key in (typeof RESOURCE_PICKER_DIALOG_STRING_KEYS)[number]]?: string;
+};
+/** Props for {@link ResourcePickerDialog} */
+export interface ResourcePickerDialogProps {
+	/** Full list of DBL resources fetched by the caller via PAPI */
+	allResources: DblResourceData[];
+	/** Whether the `allResources` is still loading */
+	isResourcesLoading?: boolean;
+	/** If provided, only resources of this type are shown */
+	resourceType?: ResourceType;
+	/** IDs of resources already selected in the calling panel */
+	selectedResourceIds?: string[];
+	/** Localized strings — use RESOURCE_PICKER_DIALOG_STRING_KEYS with useLocalizedStrings */
+	localizedStrings: ResourcePickerDialogLocalizedStrings;
+	/** Called when the user clicks "Use" on a resource entry */
+	onSelect: (resource: DblResourceData) => void;
+}
+/**
+ * Presentational dialog content for picking a DBL resource. Renders three sections — Already
+ * Selected, Installed, and Available to Download — derived from `allResources` and
+ * `selectedResourceIds`. Supports text search and language filtering.
+ *
+ * Does not include an outer `Dialog` or `DialogContent` wrapper; the host (paranext-core dialog
+ * infrastructure or a Storybook decorator) is responsible for providing that context.
+ *
+ * Obtain localized strings by passing {@link RESOURCE_PICKER_DIALOG_STRING_KEYS} to
+ * `useLocalizedStrings` and forwarding the result as `localizedStrings`.
+ *
+ * @param props See {@link ResourcePickerDialogProps}
+ */
+export function ResourcePickerDialog({ allResources, isResourcesLoading, resourceType, selectedResourceIds, localizedStrings, onSelect, }: ResourcePickerDialogProps): import("react/jsx-runtime").JSX.Element;
 export type SelectedSettingsSidebarItem = {
 	label: string;
 	projectId?: string;