@fgv/ts-app-shell 5.1.0-1

package/lib/packlets/editing/NumericInput.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Numeric input with select-all-on-focus and empty-string support.
+ *
+ * Uses `type="text"` with `inputMode="decimal"` to avoid native number-input
+ * quirks (spinner buttons, empty-string rejection). Manages a string internally
+ * but exposes `number | undefined` to callers.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Props for the {@link NumericInput} component.
+ * @public
+ */
+export interface INumericInputProps {
+    /** Current numeric value (`undefined` = empty field). */
+    readonly value: number | undefined;
+    /** Called with the parsed number on blur, or `undefined` if the field is empty. */
+    readonly onChange: (value: number | undefined) => void;
+    /** Accessible label (maps to `aria-label`). */
+    readonly label?: string;
+    /** Minimum allowed value (clamped on blur). */
+    readonly min?: number;
+    /** Maximum allowed value (clamped on blur). */
+    readonly max?: number;
+    /** Step for arrow-key increment/decrement. Defaults to 1. */
+    readonly step?: number;
+    /** Additional or replacement CSS classes. */
+    readonly className?: string;
+    /** Placeholder text shown when the field is empty. */
+    readonly placeholder?: string;
+    /** Auto-focus the input on mount. */
+    readonly autoFocus?: boolean;
+    /** Disabled state. */
+    readonly disabled?: boolean;
+}
+/**
+ * Numeric input that selects all on focus and allows empty values.
+ *
+ * Internally manages a string so the user can freely type, backspace to empty,
+ * and replace the entire value. On blur, the string is parsed to a number
+ * (clamped to min/max) and reported to the parent via `onChange`.
+ *
+ * @public
+ */
+export declare function NumericInput(props: INumericInputProps): React.ReactElement;
+//# sourceMappingURL=NumericInput.d.ts.map

package/lib/packlets/editing/NumericInput.js

@@ -0,0 +1,155 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumericInput = NumericInput;
+/**
+ * Numeric input with select-all-on-focus and empty-string support.
+ *
+ * Uses `type="text"` with `inputMode="decimal"` to avoid native number-input
+ * quirks (spinner buttons, empty-string rejection). Manages a string internally
+ * but exposes `number | undefined` to callers.
+ *
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+// ============================================================================
+// Constants
+// ============================================================================
+const NUMERIC_PATTERN = /^-?\d*\.?\d*$/;
+const DEFAULT_CLASS = 'text-sm border border-border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:border-focus-ring';
+// ============================================================================
+// Helpers
+// ============================================================================
+function formatValue(value) {
+    return value !== undefined ? String(value) : '';
+}
+function clamp(value, min, max) {
+    let result = value;
+    if (min !== undefined && result < min) {
+        result = min;
+    }
+    if (max !== undefined && result > max) {
+        result = max;
+    }
+    return result;
+}
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Numeric input that selects all on focus and allows empty values.
+ *
+ * Internally manages a string so the user can freely type, backspace to empty,
+ * and replace the entire value. On blur, the string is parsed to a number
+ * (clamped to min/max) and reported to the parent via `onChange`.
+ *
+ * @public
+ */
+function NumericInput(props) {
+    const { value, onChange, label, min, max, step, className, placeholder, autoFocus, disabled } = props;
+    const [displayValue, setDisplayValue] = (0, react_1.useState)(() => formatValue(value));
+    const focusedRef = (0, react_1.useRef)(false);
+    // Sync display when value prop changes externally (but not while focused)
+    (0, react_1.useEffect)(() => {
+        if (!focusedRef.current) {
+            setDisplayValue(formatValue(value));
+        }
+    }, [value]);
+    const handleFocus = (0, react_1.useCallback)((e) => {
+        focusedRef.current = true;
+        e.target.select();
+    }, []);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const raw = e.target.value;
+        if (raw === '' || NUMERIC_PATTERN.test(raw)) {
+            setDisplayValue(raw);
+        }
+    }, []);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        focusedRef.current = false;
+        const trimmed = displayValue.trim();
+        if (trimmed === '' || trimmed === '-' || trimmed === '.') {
+            setDisplayValue('');
+            onChange(undefined);
+            return;
+        }
+        const parsed = parseFloat(trimmed);
+        if (isNaN(parsed)) {
+            setDisplayValue('');
+            onChange(undefined);
+            return;
+        }
+        const clamped = clamp(parsed, min, max);
+        setDisplayValue(String(clamped));
+        onChange(clamped);
+    }, [displayValue, onChange, min, max]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+            return;
+        }
+        e.preventDefault();
+        const effectiveStep = step !== null && step !== void 0 ? step : 1;
+        const current = parseFloat(displayValue) || 0;
+        const next = e.key === 'ArrowUp' ? current + effectiveStep : current - effectiveStep;
+        const clamped = clamp(next, min, max);
+        // Round to avoid floating-point drift
+        const rounded = parseFloat(clamped.toFixed(10));
+        setDisplayValue(String(rounded));
+        onChange(rounded);
+    }, [displayValue, onChange, min, max, step]);
+    return (react_1.default.createElement("input", { type: "text", inputMode: "decimal", value: displayValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, className: className !== null && className !== void 0 ? className : DEFAULT_CLASS, "aria-label": label, placeholder: placeholder, autoFocus: autoFocus, disabled: disabled }));
+}
+//# sourceMappingURL=NumericInput.js.map

package/lib/packlets/editing/TypeaheadInput.d.ts

@@ -0,0 +1,46 @@
+/**
+ * TypeaheadInput — text input with custom autocomplete dropdown supporting
+ * tiered suggestions and built-in blur resolution.
+ * @packageDocumentation
+ */
+import React from 'react';
+import { type ITypeaheadSuggestion } from './useTypeaheadMatch';
+/**
+ * Props for the TypeaheadInput component.
+ * @public
+ */
+export interface ITypeaheadInputProps<TId extends string = string> {
+    /** Current text value (controlled). */
+    readonly value: string;
+    /** Called on every keystroke. */
+    readonly onChange: (value: string) => void;
+    /** Full catalog of suggestions (lower priority). */
+    readonly suggestions: ReadonlyArray<ITypeaheadSuggestion<TId>>;
+    /** Optional priority suggestions shown first (e.g. recipe alternates). */
+    readonly prioritySuggestions?: ReadonlyArray<ITypeaheadSuggestion<TId>>;
+    /** Called when a suggestion is definitively selected (click, Enter, blur auto-resolve). */
+    readonly onSelect: (suggestion: ITypeaheadSuggestion<TId>) => void;
+    /** Called on blur/Enter/Tab when input cannot be resolved to a single suggestion. */
+    readonly onUnresolved?: (text: string) => void;
+    /** Placeholder text for the input. */
+    readonly placeholder?: string;
+    /** Additional CSS class for the input element. */
+    readonly className?: string;
+    /** If true, the input is disabled. */
+    readonly disabled?: boolean;
+    /** Maximum dropdown height in pixels. Default: 240. */
+    readonly maxHeight?: number;
+    /** If true, the input is focused on mount. */
+    readonly autoFocus?: boolean;
+}
+/**
+ * Text input with a custom autocomplete dropdown supporting tiered suggestions.
+ *
+ * Priority suggestions (e.g. recipe alternates) appear first, visually separated
+ * from the full catalog. On blur, applies resolution logic: exact match → auto-select,
+ * single partial match → auto-select, else fires `onUnresolved`.
+ *
+ * @public
+ */
+export declare function TypeaheadInput<TId extends string = string>(props: ITypeaheadInputProps<TId>): React.ReactElement;
+//# sourceMappingURL=TypeaheadInput.d.ts.map

package/lib/packlets/editing/TypeaheadInput.js

@@ -0,0 +1,243 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeaheadInput = TypeaheadInput;
+/**
+ * TypeaheadInput — text input with custom autocomplete dropdown supporting
+ * tiered suggestions and built-in blur resolution.
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+const useTypeaheadMatch_1 = require("./useTypeaheadMatch");
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Text input with a custom autocomplete dropdown supporting tiered suggestions.
+ *
+ * Priority suggestions (e.g. recipe alternates) appear first, visually separated
+ * from the full catalog. On blur, applies resolution logic: exact match → auto-select,
+ * single partial match → auto-select, else fires `onUnresolved`.
+ *
+ * @public
+ */
+function TypeaheadInput(props) {
+    const { value, onChange, suggestions, prioritySuggestions, onSelect, onUnresolved, placeholder, className, disabled, maxHeight = 240, autoFocus } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [focusIndex, setFocusIndex] = (0, react_1.useState)(-1);
+    const inputRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const mouseDownOnDropdownRef = (0, react_1.useRef)(false);
+    const matcher = (0, useTypeaheadMatch_1.useTypeaheadMatch)(suggestions, prioritySuggestions);
+    // ---- Filtered suggestions ----
+    const filtered = (0, react_1.useMemo)(() => matcher.filterSuggestions(value), [matcher, value]);
+    const flatItems = (0, react_1.useMemo)(() => [...filtered.priority, ...filtered.catalog], [filtered.priority, filtered.catalog]);
+    const hasPriorityItems = filtered.priority.length > 0;
+    const hasCatalogItems = filtered.catalog.length > 0;
+    const hasItems = flatItems.length > 0;
+    // Reset focus index when suggestions change
+    (0, react_1.useEffect)(() => {
+        setFocusIndex(-1);
+    }, [value]);
+    // Scroll focused item into view
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen && focusIndex >= 0 && itemRefs.current[focusIndex]) {
+            (_a = itemRefs.current[focusIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isOpen, focusIndex]);
+    // Close dropdown on outside click
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const handler = (e) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(e.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => {
+            document.removeEventListener('mousedown', handler);
+        };
+    }, [isOpen]);
+    // ---- Selection ----
+    const handleSelect = (0, react_1.useCallback)((item) => {
+        onSelect(item);
+        setIsOpen(false);
+        setFocusIndex(-1);
+    }, [onSelect]);
+    const handleResolve = (0, react_1.useCallback)((text) => {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            setIsOpen(false);
+            return;
+        }
+        const match = matcher.resolveOnBlur(trimmed);
+        if (match) {
+            handleSelect(match);
+        }
+        else if (onUnresolved) {
+            onUnresolved(trimmed);
+            setIsOpen(false);
+        }
+        else {
+            setIsOpen(false);
+        }
+    }, [matcher, handleSelect, onUnresolved]);
+    // ---- Input handlers ----
+    const handleChange = (0, react_1.useCallback)((e) => {
+        onChange(e.target.value);
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+    }, [onChange, isOpen]);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select();
+        if (hasItems) {
+            setIsOpen(true);
+        }
+    }, [hasItems]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        // Guard: don't resolve if user is clicking an item in the dropdown
+        if (mouseDownOnDropdownRef.current) {
+            mouseDownOnDropdownRef.current = false;
+            return;
+        }
+        handleResolve(value);
+    }, [value, handleResolve]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (!isOpen) {
+            if (e.key === 'ArrowDown' && hasItems) {
+                e.preventDefault();
+                setIsOpen(true);
+                setFocusIndex(0);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'Escape': {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsOpen(false);
+                setFocusIndex(-1);
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev < flatItems.length - 1 ? prev + 1 : 0));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev > 0 ? prev - 1 : flatItems.length - 1));
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (focusIndex >= 0 && focusIndex < flatItems.length) {
+                    handleSelect(flatItems[focusIndex]);
+                }
+                else {
+                    handleResolve(value);
+                }
+                break;
+            }
+            case 'Tab': {
+                // Allow default tab behavior but resolve first
+                handleResolve(value);
+                break;
+            }
+            default:
+                break;
+        }
+    }, [isOpen, hasItems, flatItems, focusIndex, handleSelect, handleResolve, value]);
+    // ---- Dropdown mouse guard ----
+    const handleDropdownMouseDown = (0, react_1.useCallback)(() => {
+        mouseDownOnDropdownRef.current = true;
+    }, []);
+    // ---- Render ----
+    const priorityEndIndex = filtered.priority.length;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("input", { ref: inputRef, type: "text", value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, className: className !== null && className !== void 0 ? className : 'w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring', role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", autoComplete: "off" }),
+        isOpen && hasItems && (react_1.default.createElement("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-surface border border-border rounded-lg shadow-lg overflow-hidden", style: { maxHeight }, role: "listbox", onMouseDown: handleDropdownMouseDown },
+            react_1.default.createElement("div", { className: "overflow-y-auto", style: { maxHeight } },
+                hasPriorityItems &&
+                    filtered.priority.map((item, index) => {
+                        const isFocused = index === focusIndex;
+                        return (react_1.default.createElement("button", { key: item.id, ref: (el) => {
+                                itemRefs.current[index] = el;
+                            }, role: "option", "aria-selected": isFocused, onClick: () => handleSelect(item), className: `flex items-center w-full px-2.5 py-1.5 text-left text-sm transition-colors border-l-2 ${isFocused
+                                ? 'bg-surface-alt text-primary border-brand-primary/50'
+                                : 'text-secondary hover:bg-hover border-brand-primary/20'}` },
+                            react_1.default.createElement("span", { className: "flex-1 min-w-0 truncate" }, item.name)));
+                    }),
+                hasPriorityItems && hasCatalogItems && react_1.default.createElement("div", { className: "border-t border-border my-0.5" }),
+                hasCatalogItems &&
+                    filtered.catalog.map((item, catalogIndex) => {
+                        const flatIndex = priorityEndIndex + catalogIndex;
+                        const isFocused = flatIndex === focusIndex;
+                        return (react_1.default.createElement("button", { key: item.id, ref: (el) => {
+                                itemRefs.current[flatIndex] = el;
+                            }, role: "option", "aria-selected": isFocused, onClick: () => handleSelect(item), className: `flex items-center w-full px-2.5 py-1.5 text-left text-sm transition-colors ${isFocused ? 'bg-surface-alt text-primary' : 'text-secondary hover:bg-hover'}` },
+                            react_1.default.createElement("span", { className: "flex-1 min-w-0 truncate" }, item.name)));
+                    }))))));
+}
+//# sourceMappingURL=TypeaheadInput.js.map

package/lib/packlets/editing/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Editing packlet - generic form field primitives for entity editors.
+ * @packageDocumentation
+ */
+export { EditField, type IEditFieldProps, EditSection, type IEditSectionProps, TextInput, type ITextInputProps, OptionalTextInput, type IOptionalTextInputProps, TextAreaInput, type ITextAreaInputProps, NumberInput, type INumberInputProps, SelectInput, type ISelectInputProps, TagsInput, type ITagsInputProps, CheckboxInput, type ICheckboxInputProps } from './EditFieldHelpers';
+export { MultiActionButton, type IMultiActionButtonProps, type IMultiActionButtonAction } from './MultiActionButton';
+export { NumericInput, type INumericInputProps } from './NumericInput';
+export { TypeaheadInput, type ITypeaheadInputProps } from './TypeaheadInput';
+export { useTypeaheadMatch, type ITypeaheadSuggestion, type ITypeaheadMatchResult, type IFilteredSuggestions } from './useTypeaheadMatch';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/editing/index.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * Editing packlet - generic form field primitives for entity editors.
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTypeaheadMatch = exports.TypeaheadInput = exports.NumericInput = exports.MultiActionButton = exports.CheckboxInput = exports.TagsInput = exports.SelectInput = exports.NumberInput = exports.TextAreaInput = exports.OptionalTextInput = exports.TextInput = exports.EditSection = exports.EditField = void 0;
+var EditFieldHelpers_1 = require("./EditFieldHelpers");
+Object.defineProperty(exports, "EditField", { enumerable: true, get: function () { return EditFieldHelpers_1.EditField; } });
+Object.defineProperty(exports, "EditSection", { enumerable: true, get: function () { return EditFieldHelpers_1.EditSection; } });
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return EditFieldHelpers_1.TextInput; } });
+Object.defineProperty(exports, "OptionalTextInput", { enumerable: true, get: function () { return EditFieldHelpers_1.OptionalTextInput; } });
+Object.defineProperty(exports, "TextAreaInput", { enumerable: true, get: function () { return EditFieldHelpers_1.TextAreaInput; } });
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return EditFieldHelpers_1.NumberInput; } });
+Object.defineProperty(exports, "SelectInput", { enumerable: true, get: function () { return EditFieldHelpers_1.SelectInput; } });
+Object.defineProperty(exports, "TagsInput", { enumerable: true, get: function () { return EditFieldHelpers_1.TagsInput; } });
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return EditFieldHelpers_1.CheckboxInput; } });
+var MultiActionButton_1 = require("./MultiActionButton");
+Object.defineProperty(exports, "MultiActionButton", { enumerable: true, get: function () { return MultiActionButton_1.MultiActionButton; } });
+var NumericInput_1 = require("./NumericInput");
+Object.defineProperty(exports, "NumericInput", { enumerable: true, get: function () { return NumericInput_1.NumericInput; } });
+var TypeaheadInput_1 = require("./TypeaheadInput");
+Object.defineProperty(exports, "TypeaheadInput", { enumerable: true, get: function () { return TypeaheadInput_1.TypeaheadInput; } });
+var useTypeaheadMatch_1 = require("./useTypeaheadMatch");
+Object.defineProperty(exports, "useTypeaheadMatch", { enumerable: true, get: function () { return useTypeaheadMatch_1.useTypeaheadMatch; } });
+//# sourceMappingURL=index.js.map

package/lib/packlets/editing/useTypeaheadMatch.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A suggestion entry for typeahead matching.
+ * @public
+ */
+export interface ITypeaheadSuggestion<TId extends string = string> {
+    readonly id: TId;
+    readonly name: string;
+}
+/**
+ * Filtered suggestions split by tier.
+ * @public
+ */
+export interface IFilteredSuggestions<TId extends string> {
+    readonly priority: ReadonlyArray<ITypeaheadSuggestion<TId>>;
+    readonly catalog: ReadonlyArray<ITypeaheadSuggestion<TId>>;
+}
+/**
+ * Result of the useTypeaheadMatch hook.
+ * @public
+ */
+export interface ITypeaheadMatchResult<TId extends string> {
+    /** Find an exact match by id or case-insensitive name. Checks priority first. */
+    findExactMatch: (input: string) => ITypeaheadSuggestion<TId> | undefined;
+    /** Resolve on blur: exact match → use it; single partial → use it; else undefined. */
+    resolveOnBlur: (input: string) => ITypeaheadSuggestion<TId> | undefined;
+    /** Filter suggestions by input text, returning priority and catalog tiers separately. */
+    filterSuggestions: (input: string) => IFilteredSuggestions<TId>;
+}
+/**
+ * Hook that provides typeahead matching and filtering with tiered priority support.
+ *
+ * `findExactMatch` matches by exact id or case-insensitive name (checks priority first).
+ * `resolveOnBlur` tries exact match, then single partial match (priority first).
+ * `filterSuggestions` returns suggestions split by tier, filtered by substring match.
+ *
+ * @param suggestions - The full catalog of suggestions
+ * @param prioritySuggestions - Optional priority suggestions shown first (e.g. recipe alternates)
+ * @returns Match and filter functions
+ * @public
+ */
+export declare function useTypeaheadMatch<TId extends string>(suggestions: ReadonlyArray<ITypeaheadSuggestion<TId>>, prioritySuggestions?: ReadonlyArray<ITypeaheadSuggestion<TId>>): ITypeaheadMatchResult<TId>;
+//# sourceMappingURL=useTypeaheadMatch.d.ts.map