@lerx/promise-modal 0.11.0 → 0.12.0

package/dist/types/option.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { Color, Duration } from '../@aileron/declare';
+import type { Color, Duration } from '../@aileron/declare/index.js';
 export interface ModalOptions {
     /** Modal z-index */
     zIndex?: number;

package/dist/types/prompt.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { Dictionary, Fn, SetStateFn } from '../@aileron/declare';
-import type { BaseModal, ContentComponentProps, FooterOptions } from './base';
+import type { Dictionary, Fn, SetStateFn } from '../@aileron/declare/index.js';
+import type { BaseModal, ContentComponentProps, FooterOptions } from './base.js';
 export type PromptFooterRender<T, Context extends Dictionary = object> = Fn<[
     props: {
         value: T | undefined;

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.0",
+  "version": "0.12.0",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -42,19 +42,25 @@
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "bin": {
+    "claude-sync": "./bin/claude-sync.mjs"
+  },
   "files": [
     "dist",
     "docs",
+    "bin",
     "README.md"
   ],
   "scripts": {
-    "build": "rollup -c && yarn build:types",
+    "build": "rollup -c && yarn build:types && yarn build:hashes",
+    "build:hashes": "node scripts/build-hashes.mjs",
     "build:publish:npm": "yarn build && yarn publish:npm",
-    "build:types": "tsc -p ./tsconfig.declarations.json && tsc-alias -p ./tsconfig.declarations.json",
+    "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 +71,10 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.11.0",
-    "@winglet/react-utils": "^0.11.0",
-    "@winglet/style-utils": "^0.11.0"
+    "@slats/claude-assets-sync": "^0.2.0",
+    "@winglet/common-utils": "^0.12.0",
+    "@winglet/react-utils": "^0.12.0",
+    "@winglet/style-utils": "^0.12.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",