@lerx/promise-modal 0.11.1 → 0.12.1

package/dist/claude-hashes.json

@@ -0,0 +1,18 @@
+{
+  "schemaVersion": 1,
+  "package": {
+    "name": "@lerx/promise-modal",
+    "version": "0.12.1"
+  },
+  "generatedAt": "2026-04-24T14:52:39.411Z",
+  "algorithm": "sha256",
+  "assetRoot": "docs/claude",
+  "files": {
+    "skills/promise-modal-skill/SKILL.md": "b424c979b9e969e11ba8fa0a56afc3cbf1793c822f06509e6b730068f384679e",
+    "skills/promise-modal-skill/knowledge/advanced-patterns.md": "2e2c29449a46b1336727f8a1d5f1eede4e99639675dbe819edd2bf4243acfaab",
+    "skills/promise-modal-skill/knowledge/api-reference.md": "1df36fa5b832d2349c05dacaec913876f7c30fad6478fcae64c8a4bd65bc023a",
+    "skills/promise-modal-skill/knowledge/hooks-reference.md": "b0137caf257ad9712cfa7ab44c908041bbbc61bf355fa0180925a35479e47516",
+    "skills/promise-modal-skill/knowledge/type-definitions.md": "fde17b7f99d3e65b7e6c16abf4689af0a9e41a8a06dfeb9482b94a7611841d50"
+  },
+  "previousVersions": {}
+}

package/docs/claude/skills/{expert → promise-modal-skill}/SKILL.md

@@ -1,37 +1,33 @@
 ---
-name: promise-modal-expert
+name: promise-modal-skill
 description: "@lerx/promise-modal library expert. Guide users on React-based Promise modal utilities (alert, confirm, prompt), architecture, and customization."
-user-invocable: false
 ---
 
-# Promise Modal Expert Skill
+# Promise Modal Expert
 
-## Role
+Guide users on the `@lerx/promise-modal` library for React-based Promise modal utilities. Apply this skill when users ask how to implement, configure, customize, or troubleshoot modal dialogs built with `@lerx/promise-modal`.
 
-You are an expert on the `@lerx/promise-modal` library. Help users effectively implement modal dialogs using React-based Promise modal utilities.
-
-## Core Knowledge
-
-### Library Overview
+## Library Overview
 
 `@lerx/promise-modal` is a universal modal utility for React that provides:
+
 - Promise-based modal interactions (alert, confirm, prompt)
 - Usage both inside and outside React components
 - High-level component customization
 - Automatic lifecycle management
 - Programmatic modal cancellation via AbortSignal
 
-### Architecture
+## Architecture
 
 The library uses a layered architecture:
 
-1. **Core Layer** - Main API functions (alert, confirm, prompt)
-2. **Application Layer** - ModalManager singleton for lifecycle and DOM management
-3. **Bootstrap Layer** - ModalProvider component for initialization
-4. **Provider Layer** - Context providers for configuration and state
-5. **Component Layer** - Customizable UI components
+1. **Core Layer** — Main API functions (alert, confirm, prompt)
+2. **Application Layer** — ModalManager singleton for lifecycle and DOM management
+3. **Bootstrap Layer** — ModalProvider component for initialization
+4. **Provider Layer** — Context providers for configuration and state
+5. **Component Layer** — Customizable UI components
 
-### Configuration Priority
+## Configuration Priority
 
 Configuration is applied hierarchically, with lower levels overriding higher levels:
 
@@ -49,9 +45,9 @@ Provider Config (Lowest) < Hook Config < Handler Config (Highest)
 
 ## Basic Usage Patterns
 
-### Pattern 1: Basic Static API
+### Pattern A: Static API
 
-Static functions usable outside React components.
+Use static functions outside React components.
 
 ```typescript
 import { alert, confirm, prompt } from '@lerx/promise-modal';
@@ -85,9 +81,9 @@ const name = await prompt({
 });
 ```
 
-### Pattern 2: Component-Scoped with useModal
+### Pattern B: Component-Scoped with useModal
 
-Tied to component lifecycle, automatically cleaned up on unmount.
+Tie modals to component lifecycle — automatically cleaned up on unmount.
 
 ```typescript
 import { useModal } from '@lerx/promise-modal';
@@ -107,7 +103,7 @@ function MyComponent() {
 }
 ```
 
-**Key Differences**:
+**Static API vs useModal**:
 
 | Feature | Static Handlers | useModal Hook |
 |------|------------|-------------|
@@ -115,6 +111,8 @@ function MyComponent() {
 | Cleanup | Manual | Auto on unmount |
 | Usage Location | Anywhere | Inside React components |
 
+For advanced patterns (AbortSignal cancellation, toasts, nested modals, custom anchors, complex forms), see `knowledge/advanced-patterns.md`.
+
 ---
 
 ## Troubleshooting
@@ -147,25 +145,25 @@ function MyComponent() {
 
 ## Best Practices
 
-1. **Place ModalProvider at Root**: Wrap entire app
-2. **Use useModal in Components**: For automatic cleanup
-3. **Use Static API in Utilities**: For non-component code
-4. **Customize at Provider Level**: Set global styles once
-5. **Use subtype Semantically**: info, success, warning, error
-6. **Handle Promises Properly**: Always await or handle rejection
-7. **Keep Modal Content Simple**: Avoid complex state in modals
-8. **Test Accessibility**: Verify keyboard navigation
-9. **Leverage AbortSignal**: When programmatic modal closure is needed
+1. **Place ModalProvider at Root** — wrap the entire app
+2. **Use useModal in Components** — for automatic cleanup
+3. **Use Static API in Utilities** — for non-component code
+4. **Customize at Provider Level** — set global styles once
+5. **Use subtype Semantically** — info, success, warning, error
+6. **Handle Promises Properly** — always await or handle rejection
+7. **Keep Modal Content Simple** — avoid complex state in modals
+8. **Test Accessibility** — verify keyboard navigation
+9. **Leverage AbortSignal** — when programmatic modal closure is needed
 
 ---
 
-## Knowledge Files Reference
+## Resources
 
-For detailed API, advanced patterns, and type definitions, refer to these knowledge files:
+Load these files on demand for detailed API, patterns, and type definitions:
 
 | File | Contents |
 |------|------|
 | `knowledge/api-reference.md` | Static functions (alert, confirm, prompt) and ModalProvider detailed API |
 | `knowledge/hooks-reference.md` | Complete reference for 8 hooks (useModal, useActiveModalCount, etc.) |
-| `knowledge/advanced-patterns.md` | Advanced patterns including AbortSignal, toast, nested modals, custom anchors |
-| `knowledge/type-definitions.md` | TypeScript interface definitions (ModalFrameProps, etc.) |
+| `knowledge/advanced-patterns.md` | Advanced patterns: AbortSignal, toast, nested modals, custom anchors, complex forms |
+| `knowledge/type-definitions.md` | TypeScript interface definitions (ModalFrameProps, FooterComponentProps, PromptInputProps) |

package/docs/claude/skills/{expert → promise-modal-skill}/knowledge/advanced-patterns.md

@@ -1,6 +1,8 @@
 # Advanced Patterns
 
-## Pattern 3: Modal Cancellation with AbortSignal
+These patterns extend the basic Static API and `useModal` patterns documented in `SKILL.md`.
+
+## Pattern 1: Modal Cancellation with AbortSignal
 
 Programmatically cancel modals.
 
@@ -47,7 +49,7 @@ function ManualAbortControl() {
 
 ---
 
-## Pattern 4: Toast Implementation
+## Pattern 2: Toast Implementation
 
 Implement auto-dismissing toast notifications.
 
@@ -104,7 +106,7 @@ toast('An error occurred.', 2000);
 
 ---
 
-## Pattern 5: Nested Modals
+## Pattern 3: Nested Modals
 
 Display multiple modals sequentially in steps.
 
@@ -149,7 +151,7 @@ async function multiStepProcess() {
 
 ---
 
-## Pattern 6: Custom Anchor
+## Pattern 4: Custom Anchor
 
 Render modals inside a specific DOM element.
 
@@ -191,7 +193,7 @@ function CustomAnchorExample() {
 
 ---
 
-## Pattern 7: Complex Form Input
+## Pattern 5: Complex Form Input
 
 Collect complex form data using prompt.
 
@@ -258,7 +260,7 @@ async function collectUserInfo() {
 
 ---
 
-## Pattern 8: Conditional Modal Styles
+## Pattern 6: Conditional Modal Styles
 
 Display different styled modals based on situation.
 

package/docs/claude/skills/{expert → promise-modal-skill}/knowledge/hooks-reference.md

@@ -20,13 +20,7 @@ function MyComponent() {
 }
 ```
 
-**Key Feature**: Modals are automatically cleaned up when component unmounts.
-
-| Feature | Static Handlers | useModal Hook |
-|------|------------|-------------|
-| Lifecycle | Independent | Tied to component |
-| Cleanup | Manual | Auto on unmount |
-| Usage Location | Anywhere | Inside React components |
+**Key Feature**: Modals are automatically cleaned up when component unmounts. For a comparison with the Static API, see `SKILL.md`.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -48,13 +48,15 @@
     "README.md"
   ],
   "scripts": {
-    "build": "rollup -c && yarn build:types",
+    "build": "rollup -c && yarn build:types && yarn build:hashes",
+    "build:hashes": "claude-build-hashes",
     "build:publish:npm": "yarn build && yarn publish:npm",
     "build:types": "node ../../aileron/script/build/buildTypes.mjs",
     "build-storybook": "storybook build",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "make-dependency-graph": "npx depcruise src --config .dependency-cruiser.js --output-type dot > dependency-graph.dot && dot -Tpng dependency-graph.dot -o dependency-graph.png",
+    "prepublishOnly": "yarn build",
     "publish:npm": "yarn npm publish --access public",
     "size-limit": "size-limit",
     "start": "yarn build && yarn storybook",
@@ -65,9 +67,10 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.11.1",
-    "@winglet/react-utils": "^0.11.2",
-    "@winglet/style-utils": "^0.11.1"
+    "@slats/claude-assets-sync": "^0.3.0",
+    "@winglet/common-utils": "^0.12.1",
+    "@winglet/react-utils": "^0.12.1",
+    "@winglet/style-utils": "^0.12.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/docs/claude/commands/guide.md

@@ -1,760 +0,0 @@
-# Promise Modal Guide Command
-
-**Package**: `@lerx/promise-modal`
-**Expert Skill**: `promise-modal-expert` (directory-based skill)
-
-## Purpose
-
-This command provides an interactive Q&A guide for users of the `@lerx/promise-modal` library. When invoked, help users understand and effectively use the library based on their specific questions and use cases.
-
-## Activation
-
-This command should be used when users:
-- Have questions about `@lerx/promise-modal`
-- Need help implementing modals
-- Want to understand specific API usage
-- Experience library-related issues
-- Need code examples for specific scenarios
-
-## Response Strategy
-
-### Step 1: Identify Question Category
-
-Classify user questions into one of the following:
-
-1. **Getting Started** - Installation, setup, basic usage
-2. **API Usage** - Specific function/hook usage
-3. **Customization** - Custom components, styling, theming
-4. **Advanced Patterns** - Toast, nested modals, animations, AbortSignal
-5. **Troubleshooting** - Error resolution, debugging
-
-### Step 2: Provide Structured Response
-
-Follow this response pattern for each category:
-
----
-
-## Category: Getting Started
-
-### Related Questions:
-- "How do I install promise-modal?"
-- "How do I set up the Provider?"
-- "What is the basic usage?"
-
-### Response Template:
-
-```markdown
-## Installation
-
-```bash
-yarn add @lerx/promise-modal
-# or
-npm install @lerx/promise-modal
-```
-
-## Basic Setup
-
-1. Wrap your app with ModalProvider:
-
-```tsx
-import { ModalProvider } from '@lerx/promise-modal';
-import { useLocation } from 'react-router-dom'; // Optional router integration
-
-function App() {
-  return (
-    <ModalProvider
-      usePathname={useLocation}  // Router integration (auto-close on path change)
-      options={{
-        duration: '200ms',
-        backdrop: 'rgba(0, 0, 0, 0.35)',
-        manualDestroy: true,
-      }}
-    >
-      <YourApp />
-    </ModalProvider>
-  );
-}
-```
-
-2. Use modal functions anywhere:
-
-```tsx
-import { alert, confirm, prompt } from '@lerx/promise-modal';
-
-// Simple alert
-await alert({ title: 'Alert', content: 'Hello!' });
-
-// Confirmation
-const result = await confirm({ title: 'Confirm', content: 'Continue?' });
-
-// User input
-const value = await prompt<string>({
-  title: 'Input',
-  defaultValue: '',
-  Input: ({ value, onChange }) => (
-    <input value={value} onChange={(e) => onChange(e.target.value)} />
-  ),
-});
-```
-```
-
----
-
-## Category: API Usage
-
-### `alert` Questions:
-
-```markdown
-## alert() API
-
-Opens a simple notification modal.
-
-**Signature:**
-```typescript
-alert(options: AlertProps): Promise<void>
-```
-
-**Key Options:**
-- `title`: Modal title (ReactNode)
-- `content`: Modal content (ReactNode or Component)
-- `subtype`: 'info' | 'success' | 'warning' | 'error'
-- `dimmed`: Darken background (boolean)
-- `closeOnBackdropClick`: Close on backdrop click (boolean)
-- `signal`: AbortSignal for modal cancellation
-
-**Example:**
-```tsx
-await alert({
-  title: 'Success',
-  content: 'Task completed!',
-  subtype: 'success',
-  dimmed: true,
-});
-```
-```
-
-### `confirm` Questions:
-
-```markdown
-## confirm() API
-
-Opens a confirmation modal with yes/no options.
-
-**Signature:**
-```typescript
-confirm(options: ConfirmProps): Promise<boolean>
-```
-
-**Return Value:**
-- `true` - User clicked confirm
-- `false` - User clicked cancel or backdrop
-
-**Example:**
-```tsx
-const shouldDelete = await confirm({
-  title: 'Delete Item',
-  content: 'Are you sure you want to delete this?',
-  footer: {
-    confirm: 'Delete',
-    cancel: 'Cancel',
-  },
-});
-
-if (shouldDelete) {
-  // Perform deletion
-}
-```
-```
-
-### `prompt` Questions:
-
-```markdown
-## prompt<T>() API
-
-Opens a modal to collect user input.
-
-**Signature:**
-```typescript
-prompt<T>(options: PromptProps<T>): Promise<T>
-```
-
-**Key Options:**
-- `Input`: Custom input component (required)
-- `defaultValue`: Initial value
-- `disabled`: Function to disable confirm button
-
-**Simple Example:**
-```tsx
-const name = await prompt<string>({
-  title: 'Enter Name',
-  defaultValue: '',
-  Input: ({ value, onChange }) => (
-    <input
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-    />
-  ),
-  disabled: (value) => value.trim() === '',
-});
-```
-
-**Complex Data Example:**
-```tsx
-interface UserData {
-  name: string;
-  email: string;
-}
-
-const userData = await prompt<UserData>({
-  title: 'User Information',
-  defaultValue: { name: '', email: '' },
-  Input: ({ value, onChange }) => (
-    <form>
-      <input
-        value={value.name}
-        onChange={(e) => onChange({ ...value, name: e.target.value })}
-        placeholder="Name"
-      />
-      <input
-        value={value.email}
-        onChange={(e) => onChange({ ...value, email: e.target.value })}
-        placeholder="Email"
-      />
-    </form>
-  ),
-});
-```
-```
-
-### `useModal` Questions:
-
-```markdown
-## useModal() Hook
-
-Returns modal handlers tied to component lifecycle.
-
-**Key Feature:** Automatic cleanup on component unmount.
-
-**Example:**
-```tsx
-import { useModal } from '@lerx/promise-modal';
-
-function MyComponent() {
-  const modal = useModal();
-
-  const handleAction = async () => {
-    // These modals will auto-close if component unmounts
-    if (await modal.confirm({ content: 'Proceed?' })) {
-      await modal.alert({ content: 'Done!' });
-    }
-  };
-
-  return <button onClick={handleAction}>Execute</button>;
-}
-```
-
-**With Configuration:**
-```tsx
-const modal = useModal({
-  ForegroundComponent: CustomForeground,
-  dimmed: true,
-  duration: 300,
-});
-```
-```
-
----
-
-## Category: Configuration Priority
-
-```markdown
-## Configuration Priority
-
-Configuration is applied hierarchically:
-
-```
-Provider Config (Lowest) < Hook Config < Handler Config (Highest)
-```
-
-**Example:**
-```tsx
-// Provider level: Global defaults
-<ModalProvider options={{ duration: '500ms', closeOnBackdropClick: true }}>
-  <App />
-</ModalProvider>
-
-// Hook level: Component defaults (overrides Provider config)
-const modal = useModal({
-  ForegroundComponent: CustomForeground,
-});
-
-// Handler level: Individual modal (overrides Hook config)
-modal.alert({
-  title: 'Alert',
-  duration: 200, // Override 500ms → 200ms
-  ForegroundComponent: SpecialForeground, // Override CustomForeground
-});
-```
-```
-
----
-
-## Category: Customization
-
-### Component Customization Questions:
-
-```markdown
-## Custom Components
-
-### Custom Foreground
-
-```tsx
-const CustomForeground = ({ children, visible, id }) => {
-  const ref = useRef(null);
-  const { duration } = useModalDuration();
-
-  useModalAnimation(visible, {
-    onVisible: () => ref.current?.classList.add('active'),
-    onHidden: () => ref.current?.classList.remove('active'),
-  });
-
-  useDestroyAfter(id, duration);
-
-  return (
-    <div
-      ref={ref}
-      style={{
-        background: 'white',
-        borderRadius: 12,
-        padding: 24,
-        maxWidth: 500,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-// Use in Provider
-<ModalProvider ForegroundComponent={CustomForeground}>
-  <App />
-</ModalProvider>
-
-// Or in individual modal
-alert({
-  content: 'Hello',
-  ForegroundComponent: CustomForeground,
-});
-```
-
-### Custom Footer
-
-```tsx
-const CustomFooter = ({ onConfirm, onClose, type, disabled }) => (
-  <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-    {type !== 'alert' && (
-      <button onClick={onClose}>Cancel</button>
-    )}
-    <button onClick={() => onConfirm()} disabled={disabled}>
-      Confirm
-    </button>
-  </div>
-);
-```
-```
-
-### Styling/Theming Questions:
-
-```markdown
-## Theming with Context
-
-```tsx
-<ModalProvider
-  context={{
-    theme: 'dark',
-    primaryColor: '#007bff',
-  }}
->
-  <App />
-</ModalProvider>
-
-// Access in custom components
-const CustomTitle = ({ children, context }) => (
-  <h2 style={{ color: context.theme === 'dark' ? '#fff' : '#333' }}>
-    {children}
-  </h2>
-);
-```
-```
-
----
-
-## Category: Advanced Patterns
-
-### AbortSignal Questions:
-
-```markdown
-## Modal Cancellation with AbortSignal
-
-Programmatically cancel modals.
-
-**Basic Usage:**
-```tsx
-const controller = new AbortController();
-
-alert({
-  title: 'Cancelable Modal',
-  content: 'Auto-closes in 3 seconds.',
-  signal: controller.signal,
-});
-
-// Cancel modal after 3 seconds
-setTimeout(() => {
-  controller.abort();
-}, 3000);
-```
-
-**Manual Abort Control:**
-```tsx
-function ManualAbortControl() {
-  const [controller, setController] = useState<AbortController | null>(null);
-
-  const handleOpen = () => {
-    const newController = new AbortController();
-    setController(newController);
-
-    alert({
-      title: 'Manual Cancel',
-      content: 'Click "Cancel" button to close modal.',
-      signal: newController.signal,
-      closeOnBackdropClick: false,
-    }).then(() => {
-      setController(null);
-    });
-  };
-
-  const handleAbort = () => {
-    if (controller) {
-      controller.abort();
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={handleOpen} disabled={!!controller}>Open Modal</button>
-      <button onClick={handleAbort} disabled={!controller}>Cancel Modal</button>
-    </div>
-  );
-}
-```
-
-**Batch Cancel Multiple Modals:**
-```tsx
-const controllers: AbortController[] = [];
-
-for (let i = 0; i < 3; i++) {
-  const controller = new AbortController();
-  controllers.push(controller);
-
-  alert({
-    title: `Modal ${i + 1}`,
-    signal: controller.signal,
-  });
-}
-
-// Cancel all modals
-controllers.forEach((c) => c.abort());
-```
-```
-
-### Toast Implementation Questions:
-
-```markdown
-## Toast Implementation
-
-```tsx
-import { alert, useModalAnimation, useDestroyAfter, useModalDuration } from '@lerx/promise-modal';
-
-const ToastForeground = ({ id, visible, children, onClose, onDestroy }) => {
-  const ref = useRef(null);
-  const { duration } = useModalDuration();
-
-  useEffect(() => {
-    const timer = setTimeout(onClose, 3000);
-    return () => clearTimeout(timer);
-  }, [onClose]);
-
-  useModalAnimation(visible, {
-    onVisible: () => ref.current?.classList.add('visible'),
-    onHidden: () => ref.current?.classList.remove('visible'),
-  });
-
-  useDestroyAfter(id, duration);
-
-  return (
-    <div
-      ref={ref}
-      style={{
-        position: 'fixed',
-        bottom: 20,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        background: '#333',
-        color: 'white',
-        padding: '12px 24px',
-        borderRadius: 8,
-        opacity: 0,
-        transition: 'opacity 300ms',
-      }}
-      className={visible ? 'visible' : ''}
-    >
-      {children}
-    </div>
-  );
-};
-
-// Pattern for removing previous toast
-let onDestroyPrevToast: () => void;
-
-export const toast = (message: ReactNode, duration = 1250) => {
-  onDestroyPrevToast?.(); // Remove previous toast
-
-  return alert({
-    content: message,
-    ForegroundComponent: (props) => {
-      onDestroyPrevToast = props.onDestroy;
-      return <ToastForeground {...props} />;
-    },
-    footer: false,
-    dimmed: false,
-    closeOnBackdropClick: false,
-  });
-};
-
-// Usage
-toast('Task completed successfully!');
-```
-```
-
-### Nested Modal Questions:
-
-```markdown
-## Nested Modals
-
-```tsx
-async function multiStepWizard() {
-  // Step 1: Confirm
-  const proceed = await confirm({
-    title: 'Start Wizard',
-    content: 'We will guide you through the setup.',
-  });
-
-  if (!proceed) return;
-
-  // Step 2: User input
-  const username = await prompt<string>({
-    title: 'Step 1: Username',
-    defaultValue: '',
-    Input: ({ value, onChange }) => (
-      <input value={value} onChange={(e) => onChange(e.target.value)} />
-    ),
-  });
-
-  if (!username) return;
-
-  // Step 3: Confirm and complete
-  const confirmed = await confirm({
-    title: 'Step 2: Confirm',
-    content: `Create account "${username}"?`,
-  });
-
-  if (confirmed) {
-    await alert({
-      title: 'Complete!',
-      content: `Welcome, ${username}!`,
-      subtype: 'success',
-    });
-  }
-}
-```
-```
-
-### Custom Anchor Questions:
-
-```markdown
-## Custom Modal Anchor
-
-```tsx
-import { ModalProvider, useInitializeModal, alert } from '@lerx/promise-modal';
-
-function CustomAnchorExample() {
-  const { initialize } = useInitializeModal({ mode: 'manual' });
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      initialize(containerRef.current);
-    }
-  }, [initialize]);
-
-  return (
-    <div>
-      {/* Modals render inside this container */}
-      <div
-        ref={containerRef}
-        style={{
-          position: 'relative',
-          width: '100%',
-          height: 500,
-          overflow: 'hidden',
-        }}
-      />
-      <button onClick={() => alert({ content: 'Inside custom container!' })}>
-        Show Modal
-      </button>
-    </div>
-  );
-}
-```
-```
-
----
-
-## Category: Troubleshooting
-
-### Common Issues:
-
-```markdown
-## Troubleshooting Guide
-
-### Modal Not Appearing
-
-**Cause 1:** Missing ModalProvider
-```tsx
-// ❌ Wrong
-function App() {
-  return <MyApp />;
-}
-
-// ✅ Correct
-function App() {
-  return (
-    <ModalProvider>
-      <MyApp />
-    </ModalProvider>
-  );
-}
-```
-
-**Cause 2:** z-index conflict
-```css
-/* Ensure modal has highest z-index */
-.modal-container {
-  z-index: 9999;
-}
-```
-
-### Modal Not Closing
-
-**Cause 1:** manualDestroy is true
-```tsx
-// Modal won't auto-close
-alert({ content: 'Hello', manualDestroy: true });
-
-// Must call onDestroy manually
-```
-
-**Cause 2:** closeOnBackdropClick is false
-```tsx
-// Won't close on backdrop click
-alert({ content: 'Hello', closeOnBackdropClick: false });
-```
-
-### prompt TypeScript Errors
-
-**Cause:** Missing generic type
-```tsx
-// ❌ Wrong - TypeScript can't infer type
-const value = await prompt({ ... });
-
-// ✅ Correct - Specify type
-const value = await prompt<string>({ ... });
-```
-
-### Animation Not Working
-
-**Cause:** Not using useModalAnimation
-```tsx
-// ❌ Wrong - Checking visible directly
-if (visible) element.classList.add('show');
-
-// ✅ Correct - Use hook
-useModalAnimation(visible, {
-  onVisible: () => element.classList.add('show'),
-  onHidden: () => element.classList.remove('show'),
-});
-```
-```
-
----
-
-## Response Format
-
-When answering questions, follow this structure:
-
-1. **Brief Answer**: One-line summary
-2. **Code Example**: Working code snippet
-3. **Explanation**: Key points to understand
-4. **Related API**: Links to related features
-5. **Common Pitfalls**: What to avoid
-
----
-
-## Example Interaction
-
-**User**: "How do I disable the confirm button until a required field is filled?"
-
-**Response**:
-```markdown
-Use the `disabled` option in `prompt()`:
-
-```tsx
-const email = await prompt<string>({
-  title: 'Enter Email',
-  defaultValue: '',
-  Input: ({ value, onChange }) => (
-    <input
-      type="email"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder="your@email.com"
-    />
-  ),
-  // Disable confirm button until valid email
-  disabled: (value) => !value.includes('@') || value.length < 5,
-});
-```
-
-**Key Points:**
-- `disabled` receives the current value
-- Returns `true` to disable confirm button
-- Updates reactively as user types
-
-**Related:** `PromptInputProps`, `FooterComponentProps.disabled`
-```
-
----
-
-## Knowledge Sources
-
-For more detailed information, refer to the related skill's in-depth knowledge:
-
-| Topic | Knowledge File |
-|------|-----------|
-| Comprehensive Guide | `promise-modal-expert` (directory skill) |
-| API Reference | `knowledge/api-reference.md` |
-| Hooks Reference | `knowledge/hooks-reference.md` |
-| Advanced Patterns | `knowledge/advanced-patterns.md` |
-| Type Definitions | `knowledge/type-definitions.md` |
-
-See SPECIFICATION documentation for full API specs.