termcast 1.3.32 → 1.3.34

package/dist/examples/internal/custom-renderable-form.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Custom Renderable Form Example
+ *
+ * Demonstrates hybrid pattern for building forms:
+ * - Form container = custom renderable (owns focus, navigation, scroll, RHF methods)
+ * - Form fields = React components wrapped in self-registering renderables
+ * - Tests dynamic field registration via timeout
+ *
+ * ## Architecture
+ *
+ * CustomFormRenderable (custom renderable)
+ * ├── owns: react-hook-form methods, focusedFieldId, field registry, scrollbox
+ * ├── methods: registerField(), focusField(), focusNext(), focusPrev()
+ * │
+ * └── CustomFormFieldWrapperRenderable (thin wrapper)
+ *     ├── self-registers via onLifecyclePass (SYNC - no timing issues)
+ *     └── React children (label, textarea) rendered inside
+ *
+ * ## Key Patterns
+ *
+ * 1. Wrapper renderable self-registers synchronously when added to tree
+ * 2. No useEffect needed for registration - onLifecyclePass handles it
+ * 3. Focus state in parent, checked in children each render
+ * 4. react-hook-form: useForm() in React, passed as prop to renderable, exposed via context
+ * 5. Tab navigation via parent methods (focusNext/focusPrev)
+ */
+import { BoxRenderable, TextRenderable, ScrollBoxRenderable, } from '@opentui/core';
+import { extend, useKeyboard } from '@opentui/react';
+import { useIsInFocus } from 'termcast/src/internal/focus-context';
+import { useRef, createContext, useContext, useState, useEffect } from 'react';
+// Generic helper to find parent of specific type by traversing up
+function findParent(node, type) {
+    let current = node.parent;
+    while (current) {
+        if (current instanceof type) {
+            return current;
+        }
+        current = current.parent;
+    }
+    return undefined;
+}
+import { renderWithProviders } from '../../utils';
+import { useForm } from 'react-hook-form';
+import { Theme } from 'termcast/src/theme';
+// ─────────────────────────────────────────────────────────────────────────────
+// CustomFormRenderable
+// ─────────────────────────────────────────────────────────────────────────────
+class CustomFormRenderable extends BoxRenderable {
+    // RHF integration - set by React as prop
+    formControl;
+    // Field registry - replaces useDescendants
+    fields = new Map();
+    fieldOrder = []; // ordered list for tab navigation
+    nextOrder = 0;
+    // Focus state
+    _focusedFieldId = null;
+    // UI components
+    scrollBox;
+    statusText;
+    constructor(ctx, options) {
+        super(ctx, { ...options, flexDirection: 'column' });
+        this.scrollBox = new ScrollBoxRenderable(ctx, { flexGrow: 1 });
+        this.statusText = new TextRenderable(ctx, { content: '0 fields', fg: Theme.textMuted });
+        super.add(this.scrollBox);
+        super.add(this.statusText);
+    }
+    // React children go to scrollbox
+    add(child, index) {
+        return this.scrollBox.add(child, index);
+    }
+    // React reconciler calls insertBefore when a new child must be inserted
+    // before an existing sibling. Example: delayed field inserted before "Field 1"
+    // Without this, dynamic children cause "Anchor does not exist" error
+    insertBefore(child, anchor) {
+        return this.scrollBox.insertBefore(child, anchor);
+    }
+    // Delegate remove to scrollbox
+    remove(id) {
+        this.scrollBox.remove(id);
+    }
+    // --- RHF Integration ---
+    // formControl is set by React as prop, use it directly
+    getValues() {
+        return this.formControl?.getValues() ?? {};
+    }
+    setValue(name, value) {
+        this.formControl?.setValue(name, value);
+    }
+    // --- Field Registration ---
+    // Called by wrapper renderables via onLifecyclePass (SYNC)
+    registerField(id, wrapper) {
+        this.fields.set(id, { id, elementRef: wrapper, order: this.nextOrder++ });
+        this.updateFieldOrder();
+        // Update status text immediately
+        this.statusText.content = `${this.fieldOrder.length} fields registered`;
+        this.requestRender();
+        // Auto-focus first field
+        if (this.fieldOrder.length === 1 && !this._focusedFieldId) {
+            this._focusedFieldId = id;
+            if (wrapper instanceof CustomFormFieldWrapperRenderable) {
+                wrapper.setFocused(true);
+            }
+        }
+    }
+    unregisterField(id) {
+        this.fields.delete(id);
+        this.updateFieldOrder();
+        this.statusText.content = `${this.fieldOrder.length} fields registered`;
+        this.requestRender();
+    }
+    updateFieldOrder() {
+        this.fieldOrder = Array.from(this.fields.values())
+            .sort((a, b) => a.order - b.order)
+            .map((f) => f.id);
+    }
+    // --- Focus Management ---
+    get focusedFieldId() {
+        return this._focusedFieldId;
+    }
+    focusField(id) {
+        if (!this.fields.has(id))
+            return;
+        // Update focus state on wrappers
+        const oldField = this._focusedFieldId ? this.fields.get(this._focusedFieldId) : null;
+        const newField = this.fields.get(id);
+        if (oldField?.elementRef instanceof CustomFormFieldWrapperRenderable) {
+            oldField.elementRef.setFocused(false);
+        }
+        if (newField?.elementRef instanceof CustomFormFieldWrapperRenderable) {
+            newField.elementRef.setFocused(true);
+        }
+        this._focusedFieldId = id;
+        this.scrollToField(id);
+        this.requestRender();
+    }
+    focusNext() {
+        if (this.fieldOrder.length === 0)
+            return;
+        const idx = this._focusedFieldId ? this.fieldOrder.indexOf(this._focusedFieldId) : -1;
+        const nextIdx = (idx + 1) % this.fieldOrder.length;
+        this.focusField(this.fieldOrder[nextIdx]);
+    }
+    focusPrev() {
+        if (this.fieldOrder.length === 0)
+            return;
+        const idx = this._focusedFieldId ? this.fieldOrder.indexOf(this._focusedFieldId) : 0;
+        const prevIdx = (idx - 1 + this.fieldOrder.length) % this.fieldOrder.length;
+        this.focusField(this.fieldOrder[prevIdx]);
+    }
+    scrollToField(id) {
+        const field = this.fields.get(id);
+        if (!field?.elementRef)
+            return;
+        const itemY = field.elementRef.y;
+        const scrollBoxY = this.scrollBox.content.y;
+        const viewportHeight = this.scrollBox.viewport?.height || 10;
+        const relativeY = itemY - scrollBoxY;
+        const targetScrollTop = relativeY - Math.floor(viewportHeight / 2);
+        this.scrollBox.scrollTop = Math.max(0, targetScrollTop);
+    }
+}
+class CustomFormFieldWrapperRenderable extends BoxRenderable {
+    parentForm;
+    focusIndicator;
+    contentBox;
+    isFocusedField = false;
+    // Set by React after constructor
+    fieldId = '';
+    constructor(ctx, options) {
+        // Outer wrapper is a row: [indicator] [content column]
+        super(ctx, { ...options, flexDirection: 'row', paddingBottom: 1 });
+        // Focus indicator - updated by parent form
+        this.focusIndicator = new TextRenderable(ctx, { content: '  ', flexShrink: 0 });
+        super.add(this.focusIndicator);
+        // Content box holds React children in a column
+        this.contentBox = new BoxRenderable(ctx, { flexDirection: 'column', flexGrow: 1 });
+        super.add(this.contentBox);
+        // SYNC registration when added to tree - no timing issues
+        this.onLifecyclePass = () => {
+            if (!this.parentForm && this.fieldId) {
+                this.parentForm = findParent(this, CustomFormRenderable);
+                this.parentForm?.registerField(this.fieldId, this);
+            }
+        };
+    }
+    // React children go into the content box
+    add(child, index) {
+        return this.contentBox.add(child, index);
+    }
+    // React reconciler calls insertBefore when a new child must be inserted
+    // before an existing sibling. Not strictly needed here since wrapper children
+    // (title, textarea) are always added in fixed order, but included for safety
+    // in case future usage adds dynamic children inside the wrapper
+    insertBefore(child, anchor) {
+        return this.contentBox.insertBefore(child, anchor);
+    }
+    // Called by parent form when focus changes
+    setFocused(focused) {
+        if (this.isFocusedField === focused)
+            return;
+        this.isFocusedField = focused;
+        this.focusIndicator.content = focused ? '› ' : '  ';
+        this.focusIndicator.fg = focused ? Theme.primary : undefined;
+        this.requestRender();
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Register with opentui
+// ─────────────────────────────────────────────────────────────────────────────
+extend({
+    'custom-form': CustomFormRenderable,
+    'custom-form-field-wrapper': CustomFormFieldWrapperRenderable,
+});
+const CustomFormContext = createContext(null);
+function useCustomForm() {
+    const ctx = useContext(CustomFormContext);
+    if (!ctx)
+        throw new Error('Must be inside CustomForm');
+    return ctx;
+}
+function CustomForm({ children }) {
+    const formRef = useRef(null);
+    const methods = useForm();
+    const inFocus = useIsInFocus();
+    // Tab navigation
+    useKeyboard((evt) => {
+        if (!inFocus || !formRef.current)
+            return;
+        if (evt.name === 'tab') {
+            if (evt.shift) {
+                formRef.current.focusPrev();
+            }
+            else {
+                formRef.current.focusNext();
+            }
+        }
+    });
+    // Pass formControl as prop to renderable, expose methods via context
+    return (_jsx(CustomFormContext.Provider, { value: { formRef, methods }, children: _jsx("custom-form", { ref: formRef, formControl: methods, flexGrow: 1, children: children }) }));
+}
+function CustomFormTextField({ id, title, placeholder }) {
+    const { formRef, methods } = useCustomForm();
+    const inputRef = useRef(null);
+    // No useEffect needed - wrapper self-registers via onLifecyclePass
+    // Check if focused - read from parent each render
+    const isFocused = formRef.current?.focusedFieldId === id;
+    // RHF integration - use methods from context (no useFormContext needed)
+    const registration = methods.register(id);
+    const handleContentChange = () => {
+        registration.onChange({
+            target: { name: id, value: inputRef.current?.plainText || '' },
+            type: 'change',
+        });
+    };
+    // Focus indicator is rendered by the wrapper renderable (updates synchronously)
+    return (_jsxs("custom-form-field-wrapper", { fieldId: id, children: [_jsx("text", { fg: isFocused ? Theme.primary : Theme.text, children: title }), _jsx("textarea", { ref: inputRef, height: 1, placeholder: placeholder, focused: isFocused, keyBindings: [
+                    { name: 'return', action: 'submit' },
+                    { name: 'linefeed', action: 'submit' },
+                ], onContentChange: handleContentChange })] }));
+}
+// Add compound component
+CustomForm.TextField = CustomFormTextField;
+// ─────────────────────────────────────────────────────────────────────────────
+// Example with dynamic field via useEffect
+// ─────────────────────────────────────────────────────────────────────────────
+function Example() {
+    const [showDelayedField, setShowDelayedField] = useState(false);
+    // Test: add field after timeout
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShowDelayedField(true);
+        }, 2000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, []);
+    return (_jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [_jsx("text", { marginBottom: 1, children: "Custom Form Renderable Example" }), _jsx("text", { fg: Theme.textMuted, marginBottom: 1, children: "Tab to navigate \u2022 Dynamic field appears after 2s" }), _jsxs(CustomForm, { children: [_jsx(CustomForm.TextField, { id: "name", title: "Name", placeholder: "Enter name..." }), _jsx(CustomForm.TextField, { id: "email", title: "Email", placeholder: "Enter email..." }), _jsx(CustomForm.TextField, { id: "phone", title: "Phone", placeholder: "Enter phone..." }), showDelayedField && (_jsx(CustomForm.TextField, { id: "delayed", title: "Delayed Field (added after 2s)", placeholder: "Dynamic field..." })), Array.from({ length: 8 }, (_, i) => (_jsx(CustomForm.TextField, { id: `field-${i}`, title: `Field ${i + 1}`, placeholder: `Enter field ${i + 1}...` }, `field-${i}`)))] })] }));
+}
+if (import.meta.main) {
+    renderWithProviders(_jsx(Example, {}));
+}
+export { CustomForm, CustomFormTextField, Example };
+//# sourceMappingURL=custom-renderable-form.js.map

package/dist/examples/internal/custom-renderable-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-form.js","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-form.tsx"],"names":[],"mappings":"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"}

package/dist/examples/internal/custom-renderable-list-default-search.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=custom-renderable-list-default-search.d.ts.map

package/dist/examples/internal/custom-renderable-list-default-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-list-default-search.d.ts","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-list-default-search.tsx"],"names":[],"mappings":""}

package/dist/examples/internal/custom-renderable-list-default-search.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Test file for defaultSearchQuery prop
+ */
+import { renderWithProviders } from '../../utils';
+import { CustomList } from './custom-renderable-list';
+const ITEMS = [
+    { title: 'Apple', subtitle: 'Red fruit' },
+    { title: 'Banana', subtitle: 'Yellow fruit' },
+    { title: 'Cherry', subtitle: 'Small red fruit' },
+];
+function Test() {
+    return (_jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [_jsx("text", { marginBottom: 1, children: "Default Search Test" }), _jsx(CustomList, { defaultSearchQuery: "banana", children: ITEMS.map((item) => (_jsx(CustomList.Item, { title: item.title, subtitle: item.subtitle }, item.title))) })] }));
+}
+renderWithProviders(_jsx(Test, {}));
+//# sourceMappingURL=custom-renderable-list-default-search.js.map

package/dist/examples/internal/custom-renderable-list-default-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-list-default-search.js","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-list-default-search.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,MAAM,KAAK,GAAG;IACZ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE;IACzC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE;CACjD,CAAA;AAED,SAAS,IAAI;IACX,OAAO,CACL,eAAK,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,aACjD,eAAM,YAAY,EAAE,CAAC,oCAA4B,EACjD,KAAC,UAAU,IAAC,kBAAkB,EAAC,QAAQ,YACpC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,UAAU,CAAC,IAAI,IAAkB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAtD,IAAI,CAAC,KAAK,CAAgD,CACjF,CAAC,GACS,IACT,CACP,CAAA;AACH,CAAC;AAED,mBAAmB,CAAC,KAAC,IAAI,KAAG,CAAC,CAAA"}

package/dist/examples/internal/custom-renderable-list-v2-default-search.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=custom-renderable-list-v2-default-search.d.ts.map

package/dist/examples/internal/custom-renderable-list-v2-default-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-list-v2-default-search.d.ts","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-list-v2-default-search.tsx"],"names":[],"mappings":""}

package/dist/examples/internal/custom-renderable-list-v2-default-search.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Test file for defaultSearchQuery prop (v2)
+ */
+import { renderWithProviders } from '../../utils';
+import { CustomList, useCustomListStore } from './custom-renderable-list-v2';
+const ITEMS = [
+    { title: 'Apple', subtitle: 'Red fruit' },
+    { title: 'Banana', subtitle: 'Yellow fruit' },
+    { title: 'Cherry', subtitle: 'Small red fruit' },
+];
+function Test() {
+    return (_jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [_jsx("text", { marginBottom: 1, children: "Default Search Test" }), _jsx(CustomList, { defaultSearchQuery: "banana", children: ITEMS.map((item) => (_jsx(CustomList.Item, { title: item.title, subtitle: item.subtitle }, item.title))) })] }));
+}
+// Reset store before running
+useCustomListStore.setState({
+    selectedIndex: 0,
+    visibleCount: 0,
+    totalCount: 0,
+    searchQuery: '',
+    itemStates: {},
+});
+renderWithProviders(_jsx(Test, {}));
+//# sourceMappingURL=custom-renderable-list-v2-default-search.js.map

package/dist/examples/internal/custom-renderable-list-v2-default-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-list-v2-default-search.js","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-list-v2-default-search.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAE5E,MAAM,KAAK,GAAG;IACZ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE;IACzC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE;CACjD,CAAA;AAED,SAAS,IAAI;IACX,OAAO,CACL,eAAK,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,aACjD,eAAM,YAAY,EAAE,CAAC,oCAA4B,EACjD,KAAC,UAAU,IAAC,kBAAkB,EAAC,QAAQ,YACpC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,UAAU,CAAC,IAAI,IAAkB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAtD,IAAI,CAAC,KAAK,CAAgD,CACjF,CAAC,GACS,IACT,CACP,CAAA;AACH,CAAC;AAED,6BAA6B;AAC7B,kBAAkB,CAAC,QAAQ,CAAC;IAC1B,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;CACf,CAAC,CAAA;AAEF,mBAAmB,CAAC,KAAC,IAAI,KAAG,CAAC,CAAA"}

package/dist/examples/internal/custom-renderable-list-v2.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Custom Renderable List V2 - Wrapper Pattern
+ *
+ * This example uses opentui's extend() to register thin wrapper renderables
+ * that handle tracking and visibility, while React handles all UI rendering.
+ *
+ * ## Architecture
+ *
+ * CustomListRenderable (custom renderable)
+ * ├── owns: filtering logic, navigation, scrolling
+ * ├── children redirected to scrollBox
+ * │
+ * └── CustomListItemWrapperRenderable (thin wrapper)
+ *     ├── tracks: keywords, onAction, section, visibleIndex, itemId
+ *     ├── handles: visibility (height: 0 when hidden)
+ *     └── React children render all UI (indicator, title, subtitle)
+ *
+ * ## Key Patterns
+ *
+ * 1. Wrapper renderables self-register via onLifecyclePass (SYNC)
+ * 2. All UI in JSX - wrappers only track/hide
+ * 3. Zustand store for React state (selectedIndex, visibleCount, searchQuery)
+ * 4. Renderable calls zustand.setState to trigger React re-renders
+ * 5. Items compare visibleIndex to selectedIndex from zustand
+ *
+ * ## Phase 1: Bidirectional Selection Sync
+ *
+ * - `selectedItemId` prop on List controls selection by item id
+ * - `onSelectionChange` callback fires when selection changes
+ * - Supports both controlled (via prop) and uncontrolled (internal) selection
+ *
+ * ## Phase 2: Detail Panel Support
+ *
+ * - `isShowingDetail` prop on List enables detail panel on the right
+ * - `detail` prop on Item provides React node to render in detail panel
+ * - Detail updates automatically when selection changes
+ * - List splits into two columns when detail is shown
+ *
+ * ## How React Props Work with opentui Renderables
+ *
+ * React props are applied via direct property assignment, NOT just constructor:
+ *
+ * 1. `createInstance()` - constructor called (props passed in options)
+ * 2. `setInitialProperties()` - iterates props, does `instance[propKey] = propValue`
+ * 3. `commitUpdate()` - on re-render, applies changed props via `instance[propKey] = propValue`
+ *
+ * This means:
+ * - Props don't need to be read from constructor options - React sets them after
+ * - Simple props (just stored/read later) can be public fields
+ * - Props that need side effects on change require setters
+ * - Constructor should just create the renderable structure
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * ## Migration Notes (Lessons from Form conversion)
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * ### 1. Registration Order ≠ Visual Order
+ *
+ * IMPORTANT: `onLifecyclePass` is called in tree traversal order, which may NOT
+ * match the visual/React render order. For Form, we solved this by sorting
+ * fields by y-position instead of registration order:
+ *
+ * ```typescript
+ * private getFieldOrder(): string[] {
+ *   return Array.from(this.fields.values())
+ *     .sort((a, b) => (a.elementRef?.y ?? 0) - (b.elementRef?.y ?? 0))
+ *     .map((f) => f.id)
+ * }
+ * ```
+ *
+ * For List, this is less critical since items use visibleIndex from filtering,
+ * but be aware if you need stable ordering based on visual position.
+ *
+ * ### 2. Auto-Focus Pattern
+ *
+ * Don't auto-focus in registerField() - registration order is unpredictable.
+ * Instead, use React useEffect that runs until focus is set:
+ *
+ * ```typescript
+ * useEffect(() => {
+ *   if (focusedField) return
+ *   const firstId = formRef.current?.getFirstFieldId()
+ *   if (firstId) formRef.current?.focusField(firstId)
+ * })
+ * ```
+ *
+ * ### 3. Hybrid Approach - Keep React for Styling
+ *
+ * The renderable should only handle STATE (registry, focus, scroll).
+ * Keep existing React components for UI (e.g., WithLeftBorder for Form).
+ * This ensures visual output stays identical - only the wiring changes.
+ *
+ * ### 4. Focus State Sync to React
+ *
+ * Form uses `onFocusChange` callback to sync focus to React state:
+ *
+ * ```typescript
+ * // In FormRenderable
+ * public onFocusChange?: (fieldId: string | null) => void
+ *
+ * focusField(id: string) {
+ *   this._focusedFieldId = id
+ *   this.onFocusChange?.(id)  // Notify React
+ * }
+ *
+ * // In Form component
+ * const handleFormRef = (ref: FormRenderable | null) => {
+ *   formRef.current = ref
+ *   if (ref) ref.onFocusChange = setFocusedField
+ * }
+ * ```
+ *
+ * This example uses zustand instead (setState triggers re-render).
+ * Both patterns work - zustand is simpler for shared state.
+ *
+ * ### 5. Legacy Compatibility
+ *
+ * When migrating, keep old descendants/context during transition:
+ *
+ * ```typescript
+ * // Keep old system for components not yet migrated
+ * const { DescendantsProvider, useDescendant } = createDescendants<...>()
+ * export { useDescendant }  // Still exported for old components
+ * ```
+ *
+ * ### 6. Field Component Changes
+ *
+ * Each field component needs minimal changes:
+ * - Remove: useFormFieldDescendant() call, elementRef
+ * - Add: wrap return in <termcast-form-field-wrapper fieldId={id}>
+ * - Keep: all UI code (WithLeftBorder, etc.) unchanged
+ *
+ * ### 7. Testing Strategy
+ *
+ * Run existing tests with -u to update snapshots. Visual output should be
+ * identical - if tests fail, the wiring is wrong, not the rendering.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+import React from 'react';
+interface ItemState {
+    visibleIndex: number;
+}
+interface CustomListStoreState {
+    selectedIndex: number;
+    visibleCount: number;
+    totalCount: number;
+    searchQuery: string;
+    itemStates: Record<string, ItemState>;
+    selectedItemId: string | null;
+    isShowingDetail: boolean;
+    currentDetailNode: React.ReactNode | null;
+}
+declare const useCustomListStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CustomListStoreState>>;
+interface ListProps {
+    children?: React.ReactNode;
+    placeholder?: string;
+    defaultSearchQuery?: string;
+    selectedItemId?: string | null;
+    onSelectionChange?: (id: string | null) => void;
+    isShowingDetail?: boolean;
+}
+declare function CustomList({ children, placeholder, defaultSearchQuery, selectedItemId, onSelectionChange, isShowingDetail }: ListProps): any;
+declare namespace CustomList {
+    var Item: typeof CustomListItem;
+    var Section: typeof CustomListSection;
+    var EmptyView: typeof CustomListEmptyView;
+}
+interface ListItemProps {
+    id?: string;
+    title: string;
+    subtitle?: string;
+    keywords?: string[];
+    onAction?: () => void;
+    detail?: React.ReactNode;
+}
+declare function CustomListItem({ id, title, subtitle, keywords, onAction, detail }: ListItemProps): any;
+interface ListSectionProps {
+    title?: string;
+    children?: React.ReactNode;
+}
+declare function CustomListSection({ title, children }: ListSectionProps): any;
+interface ListEmptyViewProps {
+    title?: string;
+    description?: string;
+}
+declare function CustomListEmptyView({ title, description }: ListEmptyViewProps): any;
+declare function Example(): any;
+export { CustomList, CustomListItem, CustomListSection, CustomListEmptyView, Example, useCustomListStore };
+//# sourceMappingURL=custom-renderable-list-v2.d.ts.map

package/dist/examples/internal/custom-renderable-list-v2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderable-list-v2.d.ts","sourceRoot":"","sources":["../../../src/examples/internal/custom-renderable-list-v2.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyIG;AAcH,OAAO,KAA2B,MAAM,OAAO,CAAA;AAS/C,UAAU,SAAS;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,UAAU,oBAAoB;IAC5B,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IAEnB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IAIrC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAE7B,eAAe,EAAE,OAAO,CAAA;IACxB,iBAAiB,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;CAC1C;AAED,QAAA,MAAM,kBAAkB,mFASrB,CAAA;AAihBH,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAE/C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,EAAE,SAAS,GAAG,GAAG,CA4ErI;kBA5EQ,UAAU;;;;;AAkFnB,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,iBAAS,cAAc,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,GAAG,CA4B/F;AAMD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,iBAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,GAAG,CAYrE;AAMD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,kBAAkB,GAAG,GAAG,CAE5E;AAmCD,iBAAS,OAAO,IAAI,GAAG,CAoFtB;AAgBD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,OAAO,EAAE,kBAAkB,EAAE,CAAA"}