npm - @idealyst/mcp-server - Versions diffs - 1.2.49 → 1.2.51 - Mend

@idealyst/mcp-server 1.2.49 → 1.2.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/{chunk-WJCICXOJ.js → chunk-SRNAGZJL.js} +6251 -8769
package/dist/chunk-SRNAGZJL.js.map +1 -0
package/dist/index.cjs +2237 -4575
package/dist/index.cjs.map +1 -1
package/dist/index.js +202 -13
package/dist/index.js.map +1 -1
package/dist/tools/index.cjs +6233 -8756
package/dist/tools/index.cjs.map +1 -1
package/dist/tools/index.d.cts +29 -3
package/dist/tools/index.d.ts +29 -3
package/dist/tools/index.js +5 -1
package/package.json +4 -4
package/dist/chunk-WJCICXOJ.js.map +0 -1
package/dist/generated/types.json +0 -2560

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/data/framework-guides.ts","../src/data/navigation-guides.ts","../src/data/icon-guide.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport { Server } from \"@modelcontextprotocol/sdk/server/index.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol/sdk/server/stdio.js\";\nimport {\n ListToolsRequestSchema,\n CallToolRequestSchema,\n ListResourcesRequestSchema,\n ReadResourceRequestSchema,\n} from \"@modelcontextprotocol/sdk/types.js\";\nimport { frameworkGuides } from \"./data/framework-guides.js\";\nimport { navigationGuides } from \"./data/navigation-guides.js\";\nimport { translateGuides } from \"./data/translate-guides.js\";\nimport { storageGuides } from \"./data/storage-guides.js\";\nimport { iconGuide } from \"./data/icon-guide.js\";\nimport {\n packages,\n getPackagesByCategory,\n} from \"./data/packages.js\";\nimport {\n recipes,\n getRecipesByCategory,\n} from \"./data/recipes.js\";\n\n// Import tool definitions and handler from the extracted tools module\nimport { toolDefinitions, callTool } from \"./tools/index.js\";\n\nconst server = new Server(\n {\n name: \"@idealyst/mcp-server\",\n version: \"1.0.94\",\n },\n {\n capabilities: {\n tools: {},\n resources: {},\n },\n }\n);\n\n// List all available tools\nserver.setRequestHandler(ListToolsRequestSchema, async () => {\n return {\n tools: toolDefinitions,\n };\n});\n\n// Handle tool calls\nserver.setRequestHandler(CallToolRequestSchema, async (request) => {\n const { name, arguments: args } = request.params;\n return callTool(name, args \|\| {});\n});\n\n// List available resources\nserver.setRequestHandler(ListResourcesRequestSchema, async () => {\n return {\n resources: [\n {\n uri: \"idealyst://packages/overview\",\n name: \"Idealyst Packages Overview\",\n description: \"Overview of all available @idealyst packages organized by category\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://recipes/overview\",\n name: \"Idealyst Recipes Overview\",\n description: \"Overview of all available code recipes for common UI patterns\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/getting-started\",\n name: \"Getting Started with Idealyst\",\n description: \"Complete guide to setting up and using the Idealyst framework\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/components-overview\",\n name: \"Components Overview\",\n description: \"Overview of all available Idealyst components organized by category\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/theming\",\n name: \"Theming Guide\",\n description: \"Guide to customizing themes in Idealyst\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/cli\",\n name: \"CLI Reference\",\n description: \"Complete reference for the Idealyst CLI\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/overview\",\n name: \"Navigation System Overview\",\n description: \"Overview of the Idealyst navigation system for cross-platform routing\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/route-configuration\",\n name: \"Route Configuration\",\n description: \"Learn how to define and structure routes in Idealyst\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/navigator-types\",\n name: \"Navigator Types\",\n description: \"Guide to stack, tab, drawer, and modal navigators\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/custom-layouts\",\n name: \"Custom Layouts (Web)\",\n description: \"Creating custom layouts with headers and sidebars for web applications\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/use-navigator\",\n name: \"useNavigator Hook\",\n description: \"Complete reference for the useNavigator hook API\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/web-mobile-parity\",\n name: \"Web/Mobile Navigation Parity\",\n description: \"How to achieve native-like navigation UI on web using layout components\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://icons/reference\",\n name: \"Icon Reference Guide\",\n description: \"Complete guide to Material Design Icons with 7,447 available icons, common icons by category, and usage examples\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/overview\",\n name: \"Translation Overview\",\n description: \"Overview of @idealyst/translate internationalization package\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/runtime-api\",\n name: \"Translation Runtime API\",\n description: \"Complete reference for TranslateProvider, useTranslation, useLanguage, and Trans component\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/babel-plugin\",\n name: \"Translation Babel Plugin\",\n description: \"Guide to the Babel plugin for static key extraction and missing translation detection\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/translation-files\",\n name: \"Translation File Format\",\n description: \"Guide to organizing and formatting translation JSON files\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/examples\",\n name: \"Translation Examples\",\n description: \"Complete code examples for common translation patterns\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/overview\",\n name: \"Storage Overview\",\n description: \"Overview of @idealyst/storage cross-platform storage package\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/api\",\n name: \"Storage API Reference\",\n description: \"Complete API reference for @idealyst/storage\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/examples\",\n name: \"Storage Examples\",\n description: \"Complete code examples for common storage patterns\",\n mimeType: \"text/markdown\",\n },\n ],\n };\n});\n\n// Handle resource reads\nserver.setRequestHandler(ReadResourceRequestSchema, async (request) => {\n const { uri } = request.params;\n\n // Check all guide sources\n let guide = frameworkGuides[uri] \|\| navigationGuides[uri] \|\| translateGuides[uri] \|\| storageGuides[uri];\n\n // Handle icon reference\n if (uri === \"idealyst://icons/reference\") {\n guide = iconGuide;\n }\n\n // Handle recipes overview\n if (uri === \"idealyst://recipes/overview\") {\n const byCategory = getRecipesByCategory();\n const categoryLabels: Record<string, string> = {\n auth: \"Authentication\",\n forms: \"Forms & Validation\",\n navigation: \"Navigation\",\n data: \"Data & Lists\",\n layout: \"Layout & Modals\",\n settings: \"Settings & Preferences\",\n media: \"Media & Uploads\",\n };\n\n let content = `# Idealyst Recipes\n\nReady-to-use code examples for common UI patterns in Idealyst apps.\n\n`;\n\n for (const [category, recipeList] of Object.entries(byCategory)) {\n content += `## ${categoryLabels[category] \|\| category}\\n\\n`;\n\n for (const recipe of recipeList) {\n const id = Object.entries(recipes).find(([_, r]) => r === recipe)?.[0];\n content += `### ${recipe.name}\n${recipe.description}\n\n- Difficulty: ${recipe.difficulty}\n- Packages: ${recipe.packages.join(\", \")}\n- Get recipe: \\`get_recipe({ recipe: \"${id}\" })\\`\n\n`;\n }\n }\n\n guide = content;\n }\n\n // Handle packages overview\n if (uri === \"idealyst://packages/overview\") {\n const byCategory = getPackagesByCategory();\n const categoryOrder = [\"core\", \"ui\", \"data\", \"media\", \"auth\", \"utility\", \"tooling\"];\n const categoryLabels: Record<string, string> = {\n core: \"Core Packages\",\n ui: \"UI Components\",\n data: \"Data & Storage\",\n media: \"Media & Hardware\",\n auth: \"Authentication\",\n utility: \"Utilities\",\n tooling: \"Developer Tooling\",\n };\n\n let content = `# Idealyst Framework Packages\n\nThe Idealyst Framework provides a comprehensive set of packages for building cross-platform React applications.\n\n`;\n\n for (const category of categoryOrder) {\n const pkgs = byCategory[category];\n if (!pkgs \|\| pkgs.length === 0) continue;\n\n content += `## ${categoryLabels[category] \|\| category}\\n\\n`;\n\n for (const pkg of pkgs) {\n const platforms = pkg.platforms.join(\", \");\n content += `### ${pkg.name} (\\`${pkg.npmName}\\`)\n${pkg.description}\n\n- Platforms: ${platforms}\n- Install: \\`${pkg.installation}\\`\n\n`;\n }\n }\n\n guide = content;\n }\n\n if (!guide) {\n throw new Error(`Resource not found: ${uri}`);\n }\n\n return {\n contents: [\n {\n uri,\n mimeType: \"text/markdown\",\n text: guide,\n },\n ],\n };\n});\n\n// Start the server\nasync function main() {\n const transport = new StdioServerTransport();\n await server.connect(transport);\n console.error(\"Idealyst MCP Server running on stdio\");\n}\n\nmain().catch((error) => {\n console.error(\"Fatal error:\", error);\n process.exit(1);\n});\n","export const frameworkGuides: Record<string, string> = {\n \"idealyst://framework/getting-started\": `# Getting Started with Idealyst\n\nIdealyst is a modern, cross-platform framework for building React and React Native applications with a powerful component library, type-safe APIs, and monorepo tooling.\n\n## Quick Start\n\n### 1. Create a New Workspace\n\n\\`\\`\\`bash\nnpx @idealyst/cli init my-app\ncd my-app\n\\`\\`\\`\n\nThis single command creates a complete monorepo workspace with all 5 packages:\n- \\`packages/web/\\` - React web app (Vite)\n- \\`packages/native/\\` - React Native mobile app\n- \\`packages/api/\\` - tRPC API server with GraphQL\n- \\`packages/database/\\` - Prisma database layer\n- \\`packages/shared/\\` - Shared utilities and tRPC client\n\nPlus:\n- Yarn 3 workspace setup\n- TypeScript configuration\n- Jest testing setup\n- Git repository\n- Dev container configuration\n\n### 2. Start Development\n\n\\`\\`\\`bash\n# Start web dev server\ncd packages/web\nyarn dev\n\n# Start native dev (in another terminal)\ncd packages/native\nyarn start\n\n# Start API server (in another terminal)\ncd packages/api\nyarn dev\n\\`\\`\\`\n\n### 3. Configure Babel (Required for Styling)\n\nAdd the Idealyst plugin to your babel.config.js:\n\n\\`\\`\\`javascript\nmodule.exports = {\n presets: ['module:@react-native/babel-preset'],\n plugins: [\n ['@idealyst/theme/plugin', {\n themePath: './src/theme/styles.ts', // Path to your theme file\n }],\n ],\n};\n\\`\\`\\`\n\n## Project Structure\n\n\\`\\`\\`\nmy-app/\n├── packages/\n│ ├── web/ # React web app (Vite)\n│ ├── native/ # React Native app\n│ ├── api/ # tRPC + GraphQL API server\n│ ├── database/ # Prisma database layer\n│ └── shared/ # Shared utilities & tRPC client\n├── package.json\n├── tsconfig.json\n└── yarn.lock\n\\`\\`\\`\n\n## Key Features\n\n- Cross-Platform Components: Use the same components for web and native\n- Type-Safe APIs: End-to-end type safety with tRPC\n- Modern Tooling: Vite, TypeScript, Jest, Prisma\n- Monorepo Structure: Share code across packages\n- Theme System: Consistent styling with react-native-unistyles\n- Style Extensions: Customize component styles at build time\n- Navigation: Unified navigation for web and native\n\n## Next Steps\n\n1. Explore the component library: \\`@idealyst/components\\`\n2. Learn the style system: \\`idealyst://framework/style-system\\`\n3. Set up your database schema in \\`packages/database\\`\n4. Define your API routes in \\`packages/api\\`\n5. Build your UI using Idealyst components\n`,\n\n \"idealyst://framework/components-overview\": `# Idealyst Components Overview\n\nIdealyst provides a comprehensive library of cross-platform React components organized into categories.\n\n## Component Categories\n\n### Layout Components\n- View: Flex container with spacing system\n- Screen: Full-screen container with safe area handling\n- Divider: Visual separator with orientation options\n\n### Form Components\n- Button: Interactive button with variants, intents, and icons\n- Input: Text input with label, validation, and helper text\n- Checkbox: Form checkbox with label support\n- Select: Dropdown selection component\n- Switch: Toggle switch component\n- RadioButton: Radio button group\n- Slider: Range slider component\n- TextArea: Multi-line text input\n\n### Display Components\n- Text: Styled text with sizes and weights\n- Card: Content container with variants\n- Badge: Status indicator\n- Chip: Compact element for tags and filters\n- Avatar: User profile image\n- Icon: MDI icon with theming\n- Skeleton: Loading placeholder\n- Alert: Notification message\n- Accordion: Collapsible content sections\n- Image: Cross-platform image component\n- SVGImage: SVG image renderer\n- Video: Video player component\n\n### Navigation Components\n- Tabs: Tab navigation\n- TabBar: Bottom tab bar\n- Breadcrumb: Breadcrumb navigation\n- Menu: Dropdown menu\n- MenuItem: Individual menu item\n- List: Vertical list with sections\n- ListItem: Individual list item\n- Link: Navigation link component\n\n### Overlay Components\n- Dialog: Modal dialog\n- Popover: Contextual overlay\n- Tooltip: Hover tooltip\n\n### Feedback Components\n- Progress: Progress indicator (linear/circular)\n- ActivityIndicator: Loading spinner\n\n### Data Components\n- Table: Data table with sorting and filtering\n- DataGrid: Advanced data grid\n- DatePicker: Date selection component\n- TimePicker: Time selection component\n- DateTimePicker: Combined date and time picker\n\n## Common Props\n\nMost components share common props:\n- \\`style\\`: Custom styles\n- \\`testID\\`: Test identifier\n- \\`disabled\\`: Disable interaction\n\n### Intent Colors\nComponents support intent-based colors:\n- \\`primary\\`: Main brand actions\n- \\`neutral\\`: Secondary actions\n- \\`success\\`: Positive actions\n- \\`error\\`: Destructive actions\n- \\`warning\\`: Caution actions\n\n### Type/Variant Props\nMany components offer visual type or variant options:\n- Button \\`type\\`: \\`contained\\`, \\`outlined\\`, \\`text\\`\n- Card \\`type\\`: \\`default\\`, \\`outlined\\`, \\`elevated\\`, \\`filled\\`\n- Chip \\`type\\`: \\`filled\\`, \\`outlined\\`, \\`soft\\`\n- Progress \\`variant\\`: \\`linear\\`, \\`circular\\`\n\n### Sizes\nMost components support size variants:\n- \\`sm\\`, \\`md\\`, \\`lg\\`\n- Sometimes 'xs' and 'xl', but varies by component\n\n## Icon Support\n\nComponents with icon support accept:\n- String icon names: Material Design Icons\n- React elements: Custom icon components\n\nExample:\n\\`\\`\\`tsx\n<Button leftIcon=\"check\">Save</Button>\n<Button leftIcon={<CustomIcon />}>Save</Button>\n<Button rightIcon=\"arrow-right\">Next</Button>\n\\`\\`\\`\n\n## Theming\n\nAll components use the Unistyles theming system:\n- Light and dark mode support\n- Customizable color palettes\n- Responsive breakpoints\n- Platform-specific styles\n\n## Import Pattern\n\n\\`\\`\\`tsx\nimport { Button, Card, Text, View } from '@idealyst/components';\n\\`\\`\\`\n`,\n\n \"idealyst://framework/theming\": `# Theming Guide\n\nIdealyst uses react-native-unistyles for cross-platform theming with full TypeScript support. Themes are created using a fluent builder pattern.\n\n## Theme Builder API\n\nCreate themes using the builder pattern:\n\n\\`\\`\\`typescript\nimport { createTheme } from '@idealyst/theme';\n\nexport const myTheme = createTheme()\n // Add semantic intents\n .addIntent('primary', {\n primary: '#3b82f6', // Main color\n contrast: '#ffffff', // Text on primary background\n light: '#bfdbfe', // Lighter variant\n dark: '#1e40af', // Darker variant\n })\n .addIntent('success', {\n primary: '#22c55e',\n contrast: '#ffffff',\n light: '#a7f3d0',\n dark: '#165e29',\n })\n .addIntent('error', {\n primary: '#ef4444',\n contrast: '#ffffff',\n light: '#fca5a1',\n dark: '#9b2222',\n })\n\n // Add border radii\n .addRadius('none', 0)\n .addRadius('sm', 4)\n .addRadius('md', 8)\n .addRadius('lg', 12)\n\n // Add shadows (cross-platform)\n .addShadow('sm', {\n elevation: 1,\n shadowColor: '#000000',\n shadowOffset: { width: 0, height: 1 },\n shadowOpacity: 0.08,\n shadowRadius: 1,\n boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)', // web-only\n })\n\n // Set colors\n .setColors({\n pallet: { /* color palette / },\n surface: {\n screen: '#ffffff',\n primary: '#ffffff',\n secondary: '#f5f5f5',\n inverse: '#000000',\n },\n text: {\n primary: '#000000',\n secondary: '#333333',\n inverse: '#ffffff',\n },\n border: {\n primary: '#e0e0e0',\n disabled: '#f0f0f0',\n },\n })\n\n // Set component sizes (xs, sm, md, lg, xl)\n .setSizes({\n button: {\n xs: { paddingVertical: 4, paddingHorizontal: 8, minHeight: 24, fontSize: 12 },\n sm: { paddingVertical: 6, paddingHorizontal: 12, minHeight: 32, fontSize: 14 },\n md: { paddingVertical: 8, paddingHorizontal: 16, minHeight: 40, fontSize: 16 },\n lg: { paddingVertical: 10, paddingHorizontal: 20, minHeight: 48, fontSize: 18 },\n xl: { paddingVertical: 12, paddingHorizontal: 24, minHeight: 56, fontSize: 20 },\n },\n // ... other components (chip, badge, icon, input, etc.)\n })\n\n // Set interaction styles\n .setInteraction({\n focusedBackground: 'rgba(59, 130, 246, 0.08)',\n focusBorder: 'rgba(59, 130, 246, 0.3)',\n opacity: { hover: 0.9, active: 0.75, disabled: 0.5 },\n })\n\n // Set responsive breakpoints\n .setBreakpoints({\n xs: 0, // Portrait phones\n sm: 576, // Landscape phones\n md: 768, // Tablets\n lg: 992, // Desktops\n xl: 1200, // Large desktops\n })\n\n .build();\n\\`\\`\\`\n\n## Intent Structure\n\nEach intent defines four color values:\n\n\| Property \| Purpose \|\n\|------------\|-----------------------------------\|\n\| \\`primary\\` \| Main color used for backgrounds \|\n\| \\`contrast\\` \| Text color on primary background \|\n\| \\`light\\` \| Lighter tint for subtle states \|\n\| \\`dark\\` \| Darker shade for pressed states \|\n\n## Extending an Existing Theme\n\nUse \\`fromTheme()\\` to extend a base theme:\n\n\\`\\`\\`typescript\nimport { fromTheme, lightTheme } from '@idealyst/theme';\n\nexport const brandTheme = fromTheme(lightTheme)\n .addIntent('brand', {\n primary: '#6366f1',\n contrast: '#ffffff',\n light: '#818cf8',\n dark: '#4f46e5',\n })\n .build();\n\\`\\`\\`\n\n## Registering Your Theme\n\nFor full TypeScript inference:\n\n\\`\\`\\`typescript\n// src/theme/styles.ts\nexport const myTheme = createTheme()\n // ... builder chain\n .build();\n\n// Register the theme type\ndeclare module '@idealyst/theme' {\n interface RegisteredTheme {\n theme: typeof myTheme;\n }\n}\n\\`\\`\\`\n\n## Using Themes with Unistyles\n\n\\`\\`\\`typescript\nimport { UnistylesRegistry } from 'react-native-unistyles';\nimport { lightTheme, darkTheme } from '@idealyst/theme';\n\nUnistylesRegistry\n .addThemes({\n light: lightTheme,\n dark: darkTheme,\n })\n .addConfig({\n initialTheme: 'light',\n });\n\\`\\`\\`\n\n## Platform-Specific Styles\n\n\\`\\`\\`typescript\nconst styles = StyleSheet.create((theme) => ({\n button: {\n padding: 16,\n\n _web: {\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n _hover: { opacity: 0.9 },\n _active: { opacity: 0.75 },\n },\n\n _native: {\n elevation: 2,\n },\n },\n}));\n\\`\\`\\`\n\n## See Also\n\n- \\`idealyst://framework/style-system\\` - Style definition APIs (defineStyle, extendStyle)\n- \\`idealyst://framework/babel-plugin\\` - Babel plugin configuration\n- \\`idealyst://framework/breakpoints\\` - Responsive breakpoint system\n`,\n\n \"idealyst://framework/cli\": `# Idealyst CLI Reference\n\nThe Idealyst CLI provides commands for creating and managing Idealyst projects.\n\n## Installation\n\n\\`\\`\\`bash\nnpm install -g @idealyst/cli\n# or\nnpx @idealyst/cli <command>\n\\`\\`\\`\n\n## Commands\n\n### init\n\nInitialize a new Idealyst workspace.\n\n\\`\\`\\`bash\nidealyst init <workspace-name> [options]\n\\`\\`\\`\n\nArguments:\n- \\`workspace-name\\`: Name for the workspace directory\n\nOptions:\n- \\`--git\\`: Initialize git repository (default: true)\n- \\`--no-git\\`: Skip git initialization\n- \\`--install\\`: Install dependencies (default: true)\n- \\`--no-install\\`: Skip dependency installation\n\nExamples:\n\\`\\`\\`bash\nidealyst init my-app\nidealyst init my-company-app --no-git\n\\`\\`\\`\n\nCreates:\n- Monorepo workspace structure\n- package.json with workspaces\n- TypeScript configuration\n- Jest setup\n- Git repository (optional)\n- Dev container configuration\n\n### create\n\nCreate a new package in the workspace.\n\n\\`\\`\\`bash\nidealyst create <name> --type <type> [options]\n\\`\\`\\`\n\nArguments:\n- \\`name\\`: Package name\n\nOptions:\n- \\`--type <type>\\`: Package type (required)\n - \\`web\\`: React web app with Vite\n - \\`mobile\\`: React Native mobile app\n - \\`api\\`: tRPC API server\n - \\`shared\\`: Shared utilities library\n- \\`--app-name <name>\\`: Display name for mobile apps (required for mobile)\n- \\`--with-trpc\\`: Include tRPC setup (web/mobile)\n- \\`--no-trpc\\`: Exclude tRPC setup (web/mobile)\n\nExamples:\n\\`\\`\\`bash\n# Web app\nidealyst create web --type web --with-trpc\n\n# Mobile app\nidealyst create mobile --type mobile --app-name \"My App\" --with-trpc\n\n# API server\nidealyst create api --type api\n\n# Shared library\nidealyst create shared --type shared\n\\`\\`\\`\n\nNote:* The database package is automatically created during workspace initialization. Use the \\`init\\` command to create a new workspace with all packages including database.\n\n## Package Types\n\n### Web Package\n- Vite + React 19\n- TypeScript\n- React Router\n- Optional tRPC client\n- @idealyst/components\n- @idealyst/theme\n\n### Mobile Package\n- React Native 0.80\n- TypeScript\n- React Navigation\n- Optional tRPC client\n- @idealyst/components\n- @idealyst/navigation\n\n### API Package\n- tRPC server\n- Express\n- TypeScript\n- CORS enabled\n- WebSocket support\n\n### Database Package\n- Prisma ORM\n- TypeScript\n- Schema definition\n- Migration support\n- Multiple database support\n\n### Shared Package\n- TypeScript library\n- Utility functions\n- Type definitions\n- Shared between packages\n\n## Workspace Commands\n\nRun these from workspace root:\n\n\\`\\`\\`bash\n# Install all dependencies\nyarn install\n\n# Run tests\nyarn test\nyarn test:watch\nyarn test:coverage\n\n# Build all packages\nyarn workspaces foreach run build\n\n# Version management\nyarn version:patch # Bump patch version\nyarn version:minor # Bump minor version\nyarn version:major # Bump major version\n\n# Publish\nyarn publish:all\n\\`\\`\\`\n\n## Package Commands\n\nRun these from package directory:\n\n\\`\\`\\`bash\n# Development\nyarn dev\n\n# Build\nyarn build\n\n# Test\nyarn test\n\n# Type check\nyarn type-check\n\n# Lint\nyarn lint\n\\`\\`\\`\n\n## Project Structure\n\n\\`\\`\\`\nworkspace/\n├── packages/\n│ ├── web/\n│ │ ├── src/\n│ │ ├── public/\n│ │ ├── package.json\n│ │ └── vite.config.ts\n│ ├── mobile/\n│ │ ├── src/\n│ │ ├── android/\n│ │ ├── ios/\n│ │ └── package.json\n│ ├── api/\n│ │ ├── src/\n│ │ ├── trpc/\n│ │ └── package.json\n│ ├── database/\n│ │ ├── prisma/\n│ │ └── package.json\n│ └── shared/\n│ ├── src/\n│ └── package.json\n├── package.json\n├── tsconfig.json\n└── jest.config.js\n\\`\\`\\`\n\n## Best Practices\n\n1. Use workspaces: Keep related packages in the same workspace\n2. Share code: Use the shared package for utilities\n3. Type safety: Enable strict TypeScript\n4. Testing: Write tests for critical functionality\n5. Versioning: Keep package versions synchronized\n6. Documentation: Add README files to packages\n7. Git: Use conventional commits\n8. Dependencies: Share dependencies across packages when possible\n`,\n\n \"idealyst://framework/spacing-system\": `# Spacing System\n\nIdealyst components use a variant-based spacing system for consistent layouts. Instead of specifying numeric values, you use Size variants (xs, sm, md, lg, xl) that map to theme-defined values.\n\n## Spacing Prop Interfaces\n\nDifferent component types receive different spacing props based on their use case:\n\n### ContainerStyleProps (Layout Containers)\nComponents: View, Card, Screen, List, Accordion, Table, TabBar\n\n\\`\\`\\`typescript\ninterface ContainerStyleProps {\n gap?: Size; // Space between children\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n margin?: Size; // Margin on all sides\n marginVertical?: Size; // Top and bottom margin\n marginHorizontal?: Size; // Left and right margin\n}\n\\`\\`\\`\n\n### TextSpacingStyleProps (Text Components)\nComponents: Text\n\n\\`\\`\\`typescript\ninterface TextSpacingStyleProps {\n gap?: Size; // Space between nested elements\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n}\n\\`\\`\\`\n\n### PressableSpacingStyleProps (Interactive Elements)\nComponents: Pressable\n\n\\`\\`\\`typescript\ninterface PressableSpacingStyleProps {\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n}\n\\`\\`\\`\n\n### FormInputStyleProps (Form Inputs)\nComponents: Input, Select, TextArea, Checkbox, RadioButton, Switch, Slider\n\n\\`\\`\\`typescript\ninterface FormInputStyleProps {\n margin?: Size; // Margin on all sides\n marginVertical?: Size; // Top and bottom margin\n marginHorizontal?: Size; // Left and right margin\n}\n\\`\\`\\`\n\n## Size Values\n\nSize variants map to theme values:\n\n\| Size \| Padding \| Spacing (Gap) \|\n\|------\|---------\|---------------\|\n\| xs \| 4px \| 4px \|\n\| sm \| 8px \| 8px \|\n\| md \| 16px \| 16px \|\n\| lg \| 24px \| 24px \|\n\| xl \| 32px \| 32px \|\n\n## Usage Examples\n\n### Container Spacing\n\n\\`\\`\\`tsx\nimport { View, Card, Text } from '@idealyst/components';\n\n// Gap between children\n<View gap=\"md\">\n <Text>Item 1</Text>\n <Text>Item 2</Text>\n</View>\n\n// Padding inside container\n<Card padding=\"lg\" gap=\"sm\">\n <Text weight=\"bold\">Card Title</Text>\n <Text>Card content</Text>\n</Card>\n\n// Directional padding\n<View paddingVertical=\"md\" paddingHorizontal=\"lg\">\n <Text>Content with different vertical/horizontal padding</Text>\n</View>\n\n// Margin for spacing between containers\n<Card margin=\"md\" padding=\"lg\">\n <Text>Card with margin</Text>\n</Card>\n\\`\\`\\`\n\n### Form Input Spacing\n\n\\`\\`\\`tsx\nimport { Input, Checkbox, View } from '@idealyst/components';\n\n// Use margin to space form fields\n<View>\n <Input placeholder=\"Email\" marginVertical=\"sm\" />\n <Input placeholder=\"Password\" marginVertical=\"sm\" />\n <Checkbox label=\"Remember me\" marginVertical=\"md\" />\n</View>\n\\`\\`\\`\n\n### Combining with Style Prop\n\nThe spacing props work alongside the style prop:\n\n\\`\\`\\`tsx\n<View\n gap=\"md\"\n padding=\"lg\"\n style={{ backgroundColor: '#f5f5f5', borderRadius: 8 }}\n>\n <Text>Content</Text>\n</View>\n\\`\\`\\`\n\n## Custom Components\n\nYou can use the exported builder functions to add spacing variants to custom components:\n\n\\`\\`\\`typescript\nimport { StyleSheet } from 'react-native-unistyles';\nimport { Theme } from '@idealyst/theme';\nimport {\n buildGapVariants,\n buildPaddingVariants,\n buildMarginVariants,\n} from '@idealyst/components';\n\nexport const customStyles = StyleSheet.create((theme: Theme) => ({\n container: {\n variants: {\n gap: buildGapVariants(theme),\n padding: buildPaddingVariants(theme),\n margin: buildMarginVariants(theme),\n },\n },\n}));\n\\`\\`\\`\n\n## Best Practices\n\n1. Use variants for consistency: Prefer Size variants over numeric values for consistent spacing across your app\n2. Gap over margins for children: Use \\`gap\\` to space children instead of margins on individual items\n3. Directional props for precision: Use paddingVertical/paddingHorizontal when you need different spacing\n4. Form spacing with margin: Use marginVertical on form inputs to create consistent form layouts\n5. Combine with theme values: The variant values come from the theme, ensuring consistency\n`,\n\n \"idealyst://framework/api-overview\": `# API Architecture Overview\n\nIdealyst provides a dual API architecture with both tRPC and GraphQL, giving you flexibility for different use cases.\n\n## When to Use Each\n\n### tRPC (Type-Safe RPC)\n- Best for: Internal clients, same-team consumption\n- Benefits: End-to-end type safety, no code generation, fast development\n- Use when: Your frontend and backend are TypeScript\n\n### GraphQL\n- Best for: Public APIs, third-party integrations, mobile apps\n- Benefits: Flexible queries, schema documentation, wide ecosystem\n- Use when: You need schema introspection or have non-TypeScript clients\n\n## Architecture\n\nBoth APIs run on the same Express server:\n\n\\`\\`\\`\nServer (port 3000)\n├── /trpc/* → tRPC handlers\n├── /graphql → GraphQL Yoga endpoint\n└── Shared context (database, auth)\n\\`\\`\\`\n\n## File Structure\n\n\\`\\`\\`\npackages/api/src/\n├── routers/ # tRPC routers\n│ ├── index.ts # Root router\n│ └── test.ts # Example router\n├── graphql/ # GraphQL setup\n│ ├── builder.ts # Pothos schema builder\n│ ├── index.ts # Yoga server setup\n│ └── types/ # GraphQL type definitions\n│ └── test.ts # Example types\n├── context.ts # Shared context\n├── server.ts # Express server\n└── index.ts # Entry point\n\\`\\`\\`\n\n## Shared Context\n\nBoth APIs share the same context:\n\n\\`\\`\\`typescript\n// context.ts\nexport interface Context {\n db: PrismaClient;\n // Add auth, session, etc.\n}\n\nexport async function createContext(): Promise<Context> {\n return {\n db: prisma,\n };\n}\n\\`\\`\\`\n\n## Client Setup\n\nThe shared package provides clients for both:\n\n\\`\\`\\`typescript\n// In your App component\nimport { createTRPCClient, createGraphQLClient } from '@your-app/shared';\n\n// tRPC - automatic type inference\nconst trpcClient = createTRPCClient({ apiUrl: 'http://localhost:3000/trpc' });\n\n// GraphQL - manual queries with graphql-request\ncreateGraphQLClient({ apiUrl: 'http://localhost:3000/graphql' });\n\\`\\`\\`\n\n## Migration Path\n\nStart with tRPC for rapid development, add GraphQL when you need:\n- Public API documentation\n- Third-party integrations\n- Schema-first development\n- Non-TypeScript clients\n`,\n\n \"idealyst://framework/graphql-setup\": `# GraphQL Setup Guide\n\nIdealyst uses Pothos (code-first schema) with GraphQL Yoga server, integrated with Prisma.\n\n## Server Setup\n\n### 1. Schema Builder (builder.ts)\n\n\\`\\`\\`typescript\nimport SchemaBuilder from '@pothos/core';\nimport PrismaPlugin from '@pothos/plugin-prisma';\nimport type PrismaTypes from './generated';\nimport { prisma } from '@your-app/database';\n\nexport const builder = new SchemaBuilder<{\n PrismaTypes: PrismaTypes;\n Context: { db: typeof prisma };\n}>({\n plugins: [PrismaPlugin],\n prisma: {\n client: prisma,\n },\n});\n\n// Initialize Query and Mutation types\nbuilder.queryType({});\nbuilder.mutationType({});\n\\`\\`\\`\n\n### 2. Generate Prisma Types\n\n\\`\\`\\`bash\n# In packages/api\nnpx prisma generate --generator pothos\n\\`\\`\\`\n\nAdd to your prisma schema:\n\n\\`\\`\\`prisma\ngenerator pothos {\n provider = \"prisma-pothos-types\"\n output = \"../src/graphql/generated.ts\"\n}\n\\`\\`\\`\n\n### 3. Define Types (types/example.ts)\n\n\\`\\`\\`typescript\nimport { builder } from '../builder';\n\n// Object type from Prisma model\nbuilder.prismaObject('Test', {\n fields: (t) => ({\n id: t.exposeID('id'),\n name: t.exposeString('name'),\n message: t.exposeString('message'),\n status: t.exposeString('status'),\n createdAt: t.expose('createdAt', { type: 'DateTime' }),\n }),\n});\n\n// Input type for mutations\nconst CreateTestInput = builder.inputType('CreateTestInput', {\n fields: (t) => ({\n name: t.string({ required: true }),\n message: t.string({ required: true }),\n status: t.string({ required: true }),\n }),\n});\n\n// Query\nbuilder.queryField('tests', (t) =>\n t.prismaField({\n type: ['Test'],\n args: {\n take: t.arg.int(),\n skip: t.arg.int(),\n },\n resolve: async (query, _root, args, ctx) =>\n ctx.db.test.findMany({\n ...query,\n take: args.take ?? 10,\n skip: args.skip ?? 0,\n orderBy: { createdAt: 'desc' },\n }),\n })\n);\n\n// Mutation\nbuilder.mutationField('createTest', (t) =>\n t.prismaField({\n type: 'Test',\n args: {\n input: t.arg({ type: CreateTestInput, required: true }),\n },\n resolve: async (query, _root, args, ctx) =>\n ctx.db.test.create({\n ...query,\n data: args.input,\n }),\n })\n);\n\\`\\`\\`\n\n### 4. Yoga Server (index.ts)\n\n\\`\\`\\`typescript\nimport { createYoga } from 'graphql-yoga';\nimport { builder } from './builder';\nimport './types/test'; // Import all type definitions\n\nexport const yoga = createYoga({\n schema: builder.toSchema(),\n graphqlEndpoint: '/graphql',\n});\n\\`\\`\\`\n\n### 5. Mount in Express (server.ts)\n\n\\`\\`\\`typescript\nimport express from 'express';\nimport { yoga } from './graphql';\n\nconst app = express();\n\n// GraphQL endpoint\napp.use('/graphql', yoga);\n\n// tRPC endpoint\napp.use('/trpc', trpcMiddleware);\n\\`\\`\\`\n\n## Client Setup\n\n### 1. GraphQL Client (shared/src/graphql/client.ts)\n\n\\`\\`\\`typescript\nimport { GraphQLClient } from 'graphql-request';\n\nlet client: GraphQLClient \| null = null;\n\nexport function createGraphQLClient(config: { apiUrl: string }) {\n client = new GraphQLClient(config.apiUrl);\n return client;\n}\n\nexport function getGraphQLClient(): GraphQLClient {\n if (!client) throw new Error('GraphQL client not initialized');\n return client;\n}\n\nexport { gql } from 'graphql-request';\n\\`\\`\\`\n\n### 2. Using with React Query\n\n\\`\\`\\`typescript\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { getGraphQLClient, gql } from '../graphql/client';\n\nconst TESTS_QUERY = gql\\`\n query GetTests($take: Int) {\n tests(take: $take) {\n id\n name\n message\n }\n }\n\\`;\n\nconst CREATE_TEST = gql\\`\n mutation CreateTest($input: CreateTestInput!) {\n createTest(input: $input) {\n id\n name\n }\n }\n\\`;\n\n// Query hook\nconst { data, isLoading } = useQuery({\n queryKey: ['graphql', 'tests'],\n queryFn: () => getGraphQLClient().request(TESTS_QUERY, { take: 10 }),\n});\n\n// Mutation hook\nconst queryClient = useQueryClient();\nconst mutation = useMutation({\n mutationFn: (input) => getGraphQLClient().request(CREATE_TEST, { input }),\n onSuccess: () => {\n queryClient.invalidateQueries({ queryKey: ['graphql', 'tests'] });\n },\n});\n\\`\\`\\`\n\n## GraphQL Playground\n\nAccess the GraphQL playground at:\n\\`\\`\\`\nhttp://localhost:3000/graphql\n\\`\\`\\`\n\nFeatures:\n- Schema explorer\n- Query autocompletion\n- Documentation browser\n- Query history\n\n## Best Practices\n\n1. Use Input Types: Always use input types for mutations\n2. Pagination: Implement cursor-based pagination for lists\n3. Error Handling: Use Pothos error types\n4. Authorization: Add auth checks in resolvers\n5. N+1 Prevention: Use Prisma's query optimization\n`,\n\n \"idealyst://framework/style-system\": `# Style Definition System\n\nIdealyst provides a powerful style definition system with build-time transformations via Babel plugin.\n\n## Overview\n\nThe style system provides:\n- defineStyle(): Define base styles for components\n- extendStyle(): Merge additional styles with base styles\n- overrideStyle(): Completely replace component styles\n- $iterator pattern: Expand styles for all theme keys\n\n## defineStyle()\n\nDefine base styles for a component:\n\n\\`\\`\\`typescript\nimport { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\n// Wrap theme for $iterator support\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\nexport const buttonStyles = defineStyle('Button', (theme: Theme) => ({\n button: {\n borderRadius: theme.radii.md,\n backgroundColor: theme.intents.primary.primary,\n\n variants: {\n size: {\n // $iterator expands to all size keys (xs, sm, md, lg, xl)\n paddingVertical: theme.sizes.$button.paddingVertical,\n paddingHorizontal: theme.sizes.$button.paddingHorizontal,\n },\n disabled: {\n true: { opacity: 0.5 },\n false: { opacity: 1 },\n },\n },\n },\n text: {\n color: theme.intents.primary.contrast,\n variants: {\n size: {\n fontSize: theme.sizes.$button.fontSize,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## Dynamic Style Functions\n\nFor styles depending on runtime props:\n\n\\`\\`\\`typescript\nexport const buttonStyles = defineStyle('Button', (theme: Theme) => ({\n button: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({\n backgroundColor: type === 'contained'\n ? theme.intents[intent].primary\n : 'transparent',\n borderColor: type === 'outlined'\n ? theme.intents[intent].primary\n : 'transparent',\n }),\n}));\n\\`\\`\\`\n\n## Using Styles in Components\n\n\\`\\`\\`typescript\nimport { buttonStyles } from './Button.styles';\n\nconst Button = ({ size = 'md', disabled = false, intent, type }) => {\n // Apply variants\n buttonStyles.useVariants({ size, disabled });\n\n // Static styles - no function call\n const staticStyle = buttonStyles.button;\n\n // Dynamic styles - function call with props\n const dynamicStyle = (buttonStyles.button as any)({ intent, type });\n\n return (\n <TouchableOpacity style={dynamicStyle}>\n <Text style={buttonStyles.text}>Click me</Text>\n </TouchableOpacity>\n );\n};\n\\`\\`\\`\n\n## extendStyle()\n\nMerge additional styles with base component styles:\n\n\\`\\`\\`typescript\n// style-extensions.ts\nimport { extendStyle } from '@idealyst/theme';\n\nextendStyle('Button', (theme) => ({\n button: {\n borderRadius: 9999, // Make all buttons pill-shaped\n },\n text: {\n fontFamily: 'CustomFont',\n },\n}));\n\\`\\`\\`\n\n## overrideStyle()\n\nCompletely replace component styles:\n\n\\`\\`\\`typescript\nimport { overrideStyle } from '@idealyst/theme';\n\noverrideStyle('Button', (theme) => ({\n button: {\n backgroundColor: theme.colors.surface.primary,\n borderWidth: 2,\n borderColor: theme.intents.primary.primary,\n },\n text: {\n color: theme.intents.primary.primary,\n },\n}));\n\\`\\`\\`\n\n## Import Order Matters\n\nExtensions must be imported before components:\n\n\\`\\`\\`typescript\n// App.tsx\nimport './style-extensions'; // FIRST - registers extensions\nimport { Button } from '@idealyst/components'; // SECOND - uses extensions\n\\`\\`\\`\n\n## When to Use Each\n\n\| API \| Use When \|\n\|-----\|----------\|\n\| \\`defineStyle()\\` \| Creating component library styles \|\n\| \\`extendStyle()\\` \| Adding/modifying specific properties \|\n\| \\`overrideStyle()\\` \| Completely custom styling \|\n\n## See Also\n\n- \\`idealyst://framework/theming\\` - Theme builder API\n- \\`idealyst://framework/babel-plugin\\` - Plugin configuration\n- \\`idealyst://framework/iterator-pattern\\` - $iterator expansion\n`,\n\n \"idealyst://framework/babel-plugin\": `# Idealyst Babel Plugin\n\nThe Idealyst Babel plugin transforms style definitions at build time.\n\n## Installation\n\nThe plugin is included with \\`@idealyst/theme\\`.\n\n## Configuration\n\n\\`\\`\\`javascript\n// babel.config.js\nmodule.exports = {\n presets: ['module:@react-native/babel-preset'],\n plugins: [\n ['@idealyst/theme/plugin', {\n // REQUIRED: Path to your theme file\n themePath: './src/theme/styles.ts',\n\n // Optional: Enable debug logging\n debug: false,\n verbose: false,\n\n // Optional: Paths to auto-process\n autoProcessPaths: [\n '@idealyst/components',\n '@idealyst/datepicker',\n 'src/',\n ],\n }],\n ],\n};\n\\`\\`\\`\n\n## What the Plugin Does\n\n### 1. Transforms defineStyle() to StyleSheet.create()\n\nInput:\n\\`\\`\\`typescript\ndefineStyle('Button', (theme) => ({\n button: { backgroundColor: theme.intents.primary.primary }\n}));\n\\`\\`\\`\n\nOutput:\n\\`\\`\\`typescript\nStyleSheet.create((theme) => ({\n button: { backgroundColor: theme.intents.primary.primary }\n}));\n\\`\\`\\`\n\n### 2. Expands $iterator Patterns\n\nInput:\n\\`\\`\\`typescript\ndefineStyle('Button', (theme) => ({\n button: {\n variants: {\n size: {\n paddingVertical: theme.sizes.$button.paddingVertical,\n },\n },\n },\n}));\n\\`\\`\\`\n\nOutput:\n\\`\\`\\`typescript\nStyleSheet.create((theme) => ({\n button: {\n variants: {\n size: {\n xs: { paddingVertical: theme.sizes.button.xs.paddingVertical },\n sm: { paddingVertical: theme.sizes.button.sm.paddingVertical },\n md: { paddingVertical: theme.sizes.button.md.paddingVertical },\n lg: { paddingVertical: theme.sizes.button.lg.paddingVertical },\n xl: { paddingVertical: theme.sizes.button.xl.paddingVertical },\n },\n },\n },\n}));\n\\`\\`\\`\n\n### 3. Merges Extensions at Build Time\n\n\\`\\`\\`typescript\n// Extension (processed first)\nextendStyle('Button', (theme) => ({\n button: { borderRadius: 9999 },\n}));\n\n// Base (merges with extension)\ndefineStyle('Button', (theme) => ({\n button: { padding: 16 },\n}));\n\n// Result: { padding: 16, borderRadius: 9999 }\n\\`\\`\\`\n\n### 4. Removes extendStyle/overrideStyle Calls\n\nAfter capturing extension definitions, the plugin removes the calls from the output since all merging happens at build time.\n\n## Theme Analysis\n\nThe plugin statically analyzes your theme file to extract:\n- Intent names (primary, success, error, etc.)\n- Size keys (xs, sm, md, lg, xl)\n- Radius names (none, sm, md, lg)\n- Shadow names (none, sm, md, lg, xl)\n\nThis enables $iterator expansion without runtime overhead.\n\n## Troubleshooting\n\n### Styles Not Applying\n\n1. Verify \\`themePath\\` points to your theme file\n2. Clear bundler cache: \\`yarn start --reset-cache\\`\n3. Check \\`void StyleSheet;\\` marker exists in style files\n\n### Theme Changes Not Detected\n\n1. Restart Metro bundler (theme is analyzed once)\n2. Verify theme exports correctly\n\n### Debug Mode\n\nEnable verbose logging:\n\n\\`\\`\\`javascript\n['@idealyst/theme/plugin', {\n themePath: './src/theme/styles.ts',\n verbose: true,\n}],\n\\`\\`\\`\n`,\n\n \"idealyst://framework/breakpoints\": `# Responsive Breakpoints\n\nIdealyst provides a responsive breakpoint system built on Unistyles v3, enabling width-based responsive styling across web and native platforms.\n\n## Default Breakpoints\n\nThe default themes include 5 breakpoints:\n\n\| Breakpoint \| Min Width \| Target Devices \|\n\|------------\|-----------\|----------------\|\n\| \\`xs\\` \| 0px \| Portrait phones \|\n\| \\`sm\\` \| 576px \| Landscape phones \|\n\| \\`md\\` \| 768px \| Tablets \|\n\| \\`lg\\` \| 992px \| Desktops \|\n\| \\`xl\\` \| 1200px \| Large desktops \|\n\n## Defining Breakpoints\n\n### Using setBreakpoints()\n\nSet all breakpoints at once:\n\n\\`\\`\\`typescript\nimport { createTheme } from '@idealyst/theme';\n\nconst theme = createTheme()\n // ... other theme config\n .setBreakpoints({\n xs: 0, // Must have one breakpoint at 0\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n })\n .build();\n\\`\\`\\`\n\n### Using addBreakpoint()\n\nAdd breakpoints individually:\n\n\\`\\`\\`typescript\nimport { fromTheme, lightTheme } from '@idealyst/theme';\n\nconst theme = fromTheme(lightTheme)\n .addBreakpoint('xxl', 1400) // Add extra large breakpoint\n .addBreakpoint('xxxl', 1800) // Add even larger\n .build();\n\\`\\`\\`\n\n## Using Breakpoints in Styles\n\n### In StyleSheet.create()\n\nUse object notation for responsive values:\n\n\\`\\`\\`typescript\nimport { StyleSheet } from 'react-native-unistyles';\n\nconst styles = StyleSheet.create((theme) => ({\n container: {\n // Responsive padding\n padding: {\n xs: 8,\n md: 16,\n xl: 24,\n },\n\n // Responsive flex direction\n flexDirection: {\n xs: 'column',\n md: 'row',\n },\n\n // Responsive gap\n gap: {\n xs: 8,\n sm: 12,\n lg: 16,\n },\n },\n\n text: {\n fontSize: {\n xs: 14,\n md: 16,\n lg: 18,\n },\n },\n}));\n\\`\\`\\`\n\n### Cascading Behavior\n\nValues cascade up - if a breakpoint isn't defined, it uses the nearest smaller one:\n\n\\`\\`\\`typescript\npadding: {\n xs: 8, // Used for xs, sm (no sm defined)\n md: 16, // Used for md, lg (no lg defined)\n xl: 24, // Used for xl\n}\n\\`\\`\\`\n\n## Runtime Utilities\n\n### getCurrentBreakpoint()\n\nGet the current active breakpoint:\n\n\\`\\`\\`typescript\nimport { getCurrentBreakpoint } from '@idealyst/theme';\n\nconst current = getCurrentBreakpoint();\nconsole.log(current); // 'md'\n\\`\\`\\`\n\n### getBreakpoints()\n\nGet all registered breakpoints:\n\n\\`\\`\\`typescript\nimport { getBreakpoints } from '@idealyst/theme';\n\nconst breakpoints = getBreakpoints();\n// { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }\n\\`\\`\\`\n\n### isBreakpointUp() / isBreakpointDown()\n\nCheck viewport against breakpoints:\n\n\\`\\`\\`typescript\nimport { isBreakpointUp, isBreakpointDown } from '@idealyst/theme';\n\nif (isBreakpointUp('md')) {\n // Tablet or larger\n}\n\nif (isBreakpointDown('md')) {\n // Mobile only (below tablet)\n}\n\\`\\`\\`\n\n### resolveResponsive()\n\nResolve a responsive value for the current breakpoint:\n\n\\`\\`\\`typescript\nimport { resolveResponsive } from '@idealyst/theme';\n\nconst padding = resolveResponsive({ xs: 8, md: 16, xl: 24 });\n// Returns 8 on mobile, 16 on tablet, 24 on desktop\n\\`\\`\\`\n\n## Responsive Type\n\nThe \\`Responsive<T>\\` type makes any value responsive:\n\n\\`\\`\\`typescript\nimport { Responsive, Size } from '@idealyst/theme';\n\n// Can be either a direct value or breakpoint map\ntype Props = {\n size: Responsive<Size>;\n};\n\n// Both are valid:\n<Component size=\"md\" />\n<Component size={{ xs: 'sm', md: 'lg' }} />\n\\`\\`\\`\n\n### Type Guard\n\nCheck if a value is responsive:\n\n\\`\\`\\`typescript\nimport { isResponsiveValue, Responsive, Size } from '@idealyst/theme';\n\nfunction handleSize(size: Responsive<Size>) {\n if (isResponsiveValue(size)) {\n // size is Partial<Record<Breakpoint, Size>>\n console.log(size.xs, size.md);\n } else {\n // size is Size\n console.log(size);\n }\n}\n\\`\\`\\`\n\n## TypeScript Support\n\nCustom breakpoints are fully typed:\n\n\\`\\`\\`typescript\nconst theme = createTheme()\n .setBreakpoints({\n mobile: 0,\n tablet: 768,\n desktop: 1024,\n })\n .build();\n\n// Register for type inference\ndeclare module '@idealyst/theme' {\n interface CustomThemeRegistry {\n theme: typeof theme;\n }\n}\n\n// Now Breakpoint = 'mobile' \| 'tablet' \| 'desktop'\nimport { Breakpoint } from '@idealyst/theme';\n\\`\\`\\`\n\n## Unistyles Integration\n\nBreakpoints are automatically registered with Unistyles:\n\n\\`\\`\\`typescript\nimport { UnistylesRegistry } from 'react-native-unistyles';\nimport { lightTheme, darkTheme } from '@idealyst/theme';\n\nUnistylesRegistry\n .addThemes({ light: lightTheme, dark: darkTheme })\n .addBreakpoints(lightTheme.breakpoints) // Register breakpoints\n .addConfig({ initialTheme: 'light' });\n\\`\\`\\`\n\n## Cross-Platform Behavior\n\n- Web: Breakpoints convert to CSS media queries automatically\n- Native: Uses device screen width (works with tablets, phones, etc.)\n- Same API: Write once, works everywhere\n\n## Best Practices\n\n1. Mobile-first: Start with \\`xs\\` and add larger breakpoints as needed\n2. Use cascading: Don't define every breakpoint - let values cascade\n3. Consistent breakpoints: Use the same breakpoints across themes\n4. Test on devices: Verify layouts on actual device widths\n5. Avoid over-responsiveness: Not everything needs to change per breakpoint\n`,\n\n \"idealyst://framework/iterator-pattern\": `# The $iterator Pattern\n\nThe \\`$iterator\\` pattern allows defining styles once that expand to all keys of a theme object.\n\n## ThemeStyleWrapper\n\nWrap your theme type to enable $iterator properties:\n\n\\`\\`\\`typescript\nimport { ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\\`\\`\\`\n\nThis adds \\`$property\\` versions of iterable theme properties:\n\n\| Original Path \| $iterator Path \|\n\|--------------------------\|---------------------------\|\n\| \\`theme.intents.primary\\` \| \\`theme.$intents.primary\\` \|\n\| \\`theme.sizes.button.md\\` \| \\`theme.sizes.$button.md\\` \|\n\n## Usage Examples\n\n### Expand Intents\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n intent: {\n backgroundColor: theme.$intents.light,\n borderColor: theme.$intents.primary,\n },\n}\n\n// Expands to all intent keys (primary, success, error, warning, etc.)\n// Result:\n// intent: {\n// primary: { backgroundColor: theme.intents.primary.light, borderColor: theme.intents.primary.primary },\n// success: { backgroundColor: theme.intents.success.light, borderColor: theme.intents.success.primary },\n// error: { ... },\n// ...\n// }\n\\`\\`\\`\n\n### Expand Sizes\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n size: {\n paddingVertical: theme.sizes.$button.paddingVertical,\n fontSize: theme.sizes.$button.fontSize,\n },\n}\n\n// Expands to all size keys (xs, sm, md, lg, xl)\n// Result:\n// size: {\n// xs: { paddingVertical: theme.sizes.button.xs.paddingVertical, fontSize: theme.sizes.button.xs.fontSize },\n// sm: { paddingVertical: theme.sizes.button.sm.paddingVertical, fontSize: theme.sizes.button.sm.fontSize },\n// md: { ... },\n// ...\n// }\n\\`\\`\\`\n\n## Complete Example\n\n\\`\\`\\`typescript\nimport { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\nexport const chipStyles = defineStyle('Chip', (theme: Theme) => ({\n chip: {\n borderRadius: 999,\n\n variants: {\n // Expand for all sizes\n size: {\n paddingVertical: theme.sizes.$chip.paddingVertical,\n paddingHorizontal: theme.sizes.$chip.paddingHorizontal,\n minHeight: theme.sizes.$chip.minHeight,\n },\n\n // Expand for all intents\n intent: {\n backgroundColor: theme.$intents.light,\n borderColor: theme.$intents.primary,\n },\n },\n },\n\n text: {\n variants: {\n size: {\n fontSize: theme.sizes.$chip.fontSize,\n lineHeight: theme.sizes.$chip.lineHeight,\n },\n\n intent: {\n color: theme.$intents.dark,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## createIteratorStyles()\n\nAlternative to defineStyle for custom components:\n\n\\`\\`\\`typescript\nimport { createIteratorStyles } from '@idealyst/theme';\n\nexport const styles = createIteratorStyles((theme) => ({\n box: {\n variants: {\n intent: {\n backgroundColor: theme.$intents.light,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## Benefits\n\n1. DRY Code: Define once, expand to many\n2. Type Safety: TypeScript validates iterator properties\n3. Maintainable: Adding new sizes/intents to theme auto-expands\n4. Zero Runtime Cost: Expansion happens at build time\n`,\n};\n","export const navigationGuides: Record<string, string> = {\n \"idealyst://navigation/overview\": `# Navigation System Overview\n\nThe Idealyst navigation system provides a unified API for both React Native and web applications, handling routing seamlessly across platforms.\n\n## Core Concepts\n\n### Cross-Platform Routing\n- Mobile (React Native): Uses React Navigation for native navigation patterns\n- Web: Uses React Router for browser-based routing\n- Unified API: Same code works on both platforms\n\n### Route Types\n\nThere are two fundamental route types:\n\n#### 1. Screen Routes\nRenders a component directly to the screen:\n\\`\\`\\`tsx\n{\n path: \"profile\",\n type: 'screen',\n component: ProfileScreen\n}\n\\`\\`\\`\n\n#### 2. Navigator Routes\nWraps child routes with navigation structure:\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'stack', // or 'tab', 'drawer', 'modal'\n routes: [\n { path: \"home\", type: 'screen', component: HomeScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n## Setup\n\n### Basic Setup\n\n\\`\\`\\`tsx\nimport { NavigatorProvider } from '@idealyst/navigation';\n\nfunction App() {\n return (\n <NavigatorProvider route={appRouter}>\n {/* Content managed by router /}\n </NavigatorProvider>\n );\n}\n\\`\\`\\`\n\n### Quick Start with Examples\n\nUse the pre-built example router for instant working navigation:\n\n\\`\\`\\`tsx\nimport { ExampleNavigationRouter } from '@idealyst/navigation/examples';\n\n<NavigatorProvider route={ExampleNavigationRouter} />\n\\`\\`\\`\n\nThe example router demonstrates:\n- Stack-based navigation structure\n- Custom web layouts with header and sidebar\n- Tab navigation for nested sections\n\n## Platform Differences\n\n### Mobile (React Native)\n- Stack navigator: Native stack navigation with animations\n- Tab navigator: Bottom tab bar\n- Drawer navigator: Side drawer with gestures\n- Modal navigator: Full-screen modal presentation\n\n### Web\n- Stack navigator: Browser history-based routing\n- Tab navigator: Top or side tab navigation\n- All navigators: Use URL paths for routing\n- Custom layouts: Can add headers, sidebars, footers\n\n## Key Features\n\n1. Type-Safe Navigation: Full TypeScript support\n2. Path Parameters: \\`/user/:id\\` support\n3. Nested Routes: Unlimited nesting depth\n4. Custom Layouts: Web-specific layout components\n5. Theme Integration: Works with @idealyst/theme\n6. Cross-Platform: Write once, run everywhere\n`,\n\n \"idealyst://navigation/route-configuration\": `# Route Configuration\n\nLearn how to define and structure routes in your Idealyst application.\n\n## Route Definition\n\n### Screen Route\n\nThe simplest route type - renders a component:\n\n\\`\\`\\`tsx\nimport { RouteParam } from '@idealyst/navigation';\n\nconst route: RouteParam = {\n path: \"profile\",\n type: 'screen',\n component: ProfileScreen,\n options: {\n title: \"User Profile\",\n headerShown: true\n }\n};\n\\`\\`\\`\n\n### Navigator Route\n\nA route that contains child routes:\n\n\\`\\`\\`tsx\nconst route: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n { path: \"home\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ],\n options: {\n headerShown: false\n }\n};\n\\`\\`\\`\n\n## Path Configuration\n\n### Basic Paths\n\n\\`\\`\\`tsx\n{ path: \"home\", ... } // Relative: /parent/home\n{ path: \"/home\", ... } // Absolute: /home\n{ path: \"\", ... } // Index route\n\\`\\`\\`\n\n### Path Parameters\n\n\\`\\`\\`tsx\n{\n path: \"user/:id\",\n type: 'screen',\n component: UserScreen\n}\n\n// Navigate with:\nnavigator.navigate({\n path: \"/user/:id\",\n vars: { id: \"123\" }\n});\n\n// Access in component:\nimport { useParams } from '@idealyst/navigation';\n\nconst params = useParams();\nconst userId = params.id;\n\\`\\`\\`\n\n### Optional Parameters\n\n\\`\\`\\`tsx\n{ path: \"search/:query?\" } // query is optional\n\\`\\`\\`\n\n## Screen Options\n\n### Common Options\n\n\\`\\`\\`tsx\ntype ScreenOptions = {\n title?: string; // Screen title\n headerShown?: boolean; // Show/hide header (mobile)\n};\n\\`\\`\\`\n\n### Tab-Specific Options\n\nFor tab navigators:\n\n\\`\\`\\`tsx\ntype TabBarScreenOptions = {\n tabBarIcon?: (props: {\n focused: boolean;\n color: string;\n size: string \| number\n }) => React.ReactElement;\n\n tabBarLabel?: string; // Tab label\n tabBarBadge?: string \| number; // Badge count\n tabBarVisible?: boolean; // Show/hide tab\n} & ScreenOptions;\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\n{\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ focused, color }) => (\n <Icon name=\"home\" color={color} />\n ),\n tabBarBadge: 5\n }\n}\n\\`\\`\\`\n\n## Navigator Options\n\nOptions for navigator routes:\n\n\\`\\`\\`tsx\ntype NavigatorOptions = {\n headerTitle?: React.ComponentType \| React.ReactElement \| string;\n headerLeft?: React.ComponentType \| React.ReactElement;\n headerBackVisible?: boolean;\n headerRight?: React.ComponentType \| React.ReactElement;\n headerShown?: boolean;\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\n{\n path: \"/app\",\n type: 'navigator',\n layout: 'stack',\n routes: [...],\n options: {\n headerTitle: \"My App\",\n headerShown: true,\n headerRight: <UserMenu />\n }\n}\n\\`\\`\\`\n\n## Invalid Route Handling\n\nNavigators can specify how to handle invalid routes:\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\n\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => (\n <View>\n <Text>Page not found: {path}</Text>\n </View>\n);\n\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n // Component to show when route is invalid\n notFoundComponent: NotFoundPage,\n // Handler to redirect or show 404\n onInvalidRoute: (path) => {\n if (path.startsWith('/old-')) {\n return { path: '/new-section', replace: true };\n }\n return undefined; // Show notFoundComponent\n },\n routes: [...]\n};\n\\`\\`\\`\n\nSee the Invalid Route Handling* guide for complete documentation.\n\n## Nested Routes\n\nCreate hierarchical navigation:\n\n\\`\\`\\`tsx\nconst appRouter: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n {\n path: \"dashboard\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n { path: \"overview\", type: 'screen', component: OverviewScreen },\n { path: \"analytics\", type: 'screen', component: AnalyticsScreen },\n { path: \"reports\", type: 'screen', component: ReportsScreen },\n ]\n },\n {\n path: \"settings\",\n type: 'screen',\n component: SettingsScreen\n },\n ]\n};\n\\`\\`\\`\n\n## Full Path Resolution\n\nFull paths are automatically computed:\n- \\`/dashboard/overview\\`\n- \\`/dashboard/analytics\\`\n- \\`/dashboard/reports\\`\n- \\`/settings\\`\n\n## Best Practices\n\n1. Use relative paths for child routes\n2. Keep nesting shallow (3 levels max recommended)\n3. Group related screens in navigators\n4. Use meaningful paths that reflect content\n5. Define index routes with empty path\n6. Set appropriate options for each screen type\n`,\n\n \"idealyst://navigation/navigator-types\": `# Navigator Types\n\nIdealyst supports four navigator types: stack, tab, drawer, and modal. Each provides different navigation patterns.\n\n## Stack Navigator\n\nLinear, hierarchical navigation - the most common pattern.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/app\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Native stack navigation with slide animations\n- Hardware back button support\n- Swipe-to-go-back gesture\n\nWeb:\n- Browser history integration\n- URL updates on navigation\n- Back/forward browser buttons work\n\n### Use Cases\n- Main app navigation\n- Detail views\n- Settings flows\n- Onboarding sequences\n\n## Tab Navigator\n\nSection-based navigation with a tab bar.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n {\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ color }) => <Icon name=\"home\" color={color} />\n }\n },\n {\n path: \"search\",\n type: 'screen',\n component: SearchScreen,\n options: {\n tabBarLabel: \"Search\",\n tabBarIcon: ({ color }) => <Icon name=\"search\" color={color} />\n }\n },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Bottom tab bar\n- Tab icons and labels\n- Badge support\n- Active tab highlighting\n\nWeb:\n- Top or side tabs\n- Can use custom layout component\n- URL-based tab switching\n\n### Use Cases\n- Main app sections\n- Content categories\n- Dashboard views\n- Multi-section interfaces\n\n## Drawer Navigator\n\nSide menu navigation, primarily for desktop/tablet.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'drawer',\n routes: [\n { path: \"dashboard\", type: 'screen', component: DashboardScreen },\n { path: \"users\", type: 'screen', component: UsersScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Slide-out drawer\n- Swipe gesture to open\n- Overlay when open\n\nWeb:\n- Sidebar navigation\n- Can be persistent or overlay\n- Responsive behavior\n\n### Use Cases\n- Admin panels\n- Desktop applications\n- Content management systems\n- Multi-section apps\n\n## Modal Navigator\n\nOverlay navigation for temporary screens.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/modals\",\n type: 'navigator',\n layout: 'modal',\n routes: [\n { path: \"new-post\", type: 'screen', component: NewPostScreen },\n { path: \"edit-profile\", type: 'screen', component: EditProfileScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Full-screen modal presentation\n- Slide-up animation\n- Close gesture support\n\nWeb:\n- Overlay modal\n- Background dimming\n- Click-outside to close\n\n### Use Cases\n- Forms and data entry\n- Action confirmations\n- Image viewers\n- Temporary content\n\n## Combining Navigator Types\n\nNavigators can be nested for complex flows:\n\n\\`\\`\\`tsx\nconst appRouter: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n {\n path: \"main\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n { path: \"feed\", type: 'screen', component: FeedScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n ]\n },\n {\n path: \"modals\",\n type: 'navigator',\n layout: 'modal',\n routes: [\n { path: \"create\", type: 'screen', component: CreateScreen },\n ]\n }\n ]\n};\n\\`\\`\\`\n\n## Choosing the Right Navigator\n\n\| Navigator \| Mobile \| Desktop \| Use Case \|\n\|-----------\|--------\|---------\|----------\|\n\| Stack \| ✅ Primary \| ✅ Primary \| Hierarchical navigation \|\n\| Tab \| ✅ Primary \| ✅ Secondary \| Section-based navigation \|\n\| Drawer \| ⚠️ Secondary \| ✅ Primary \| Menu-based navigation \|\n\| Modal \| ✅ Common \| ✅ Common \| Temporary overlays \|\n\n## Best Practices\n\n1. Use stack for most flows - It's the most universal pattern\n2. Limit tab count - 3-5 tabs maximum for mobile\n3. Reserve drawers for complex apps - Best on desktop\n4. Use modals sparingly - For focused, temporary tasks\n5. Consider platform - What works on mobile may not work on web\n6. Test navigation flow - Ensure intuitive user experience\n`,\n\n \"idealyst://navigation/custom-layouts\": `# Custom Layouts (Web Only)\n\nOn web, navigators can use custom layout components to add headers, sidebars, and other UI around route content.\n\n## GeneralLayout Component\n\nThe built-in \\`GeneralLayout\\` provides header and sidebar functionality:\n\n### Basic Usage\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\n\n<GeneralLayout\n header={{\n enabled: true,\n content: <Text>My App</Text>,\n }}\n sidebar={{\n enabled: true,\n content: <NavigationMenu />,\n }}\n>\n {children}\n</GeneralLayout>\n\\`\\`\\`\n\n### Header Configuration\n\n\\`\\`\\`tsx\ntype HeaderConfig = {\n enabled: boolean; // Show/hide header\n height?: number; // Header height (default: 64)\n content?: React.ReactNode; // Header content\n style?: ViewStyle; // Custom styles\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\nheader={{\n enabled: true,\n height: 80,\n content: (\n <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 16 }}>\n <Text size=\"lg\" weight=\"bold\">Dashboard</Text>\n <UserMenu />\n </View>\n )\n}}\n\\`\\`\\`\n\n### Sidebar Configuration\n\n\\`\\`\\`tsx\ntype SidebarConfig = {\n enabled: boolean; // Show/hide sidebar\n collapsible?: boolean; // Allow collapse/expand\n position?: 'left' \| 'right'; // Sidebar position\n initiallyExpanded?: boolean; // Initial state\n expandedWidth?: number; // Width when expanded (default: 240)\n collapsedWidth?: number; // Width when collapsed (default: 64)\n content?: React.ReactNode; // Sidebar content\n style?: ViewStyle; // Custom styles\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\nsidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n initiallyExpanded: true,\n expandedWidth: 280,\n collapsedWidth: 72,\n content: <NavigationSidebar />\n}}\n\\`\\`\\`\n\n## Using Layouts with Navigators\n\n### Stack Navigator with Layout\n\n\\`\\`\\`tsx\nimport { CustomStackLayout } from './layouts/CustomStackLayout';\n\nconst router: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: CustomStackLayout, // Web only!\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n### Tab Navigator with Layout\n\n\\`\\`\\`tsx\nimport { CustomTabLayout } from './layouts/CustomTabLayout';\n\nconst router: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'tab',\n layoutComponent: CustomTabLayout, // Web only!\n routes: [\n { path: \"feed\", type: 'screen', component: FeedScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n ]\n};\n\\`\\`\\`\n\n## Creating Custom Layouts\n\n### Stack Layout Component\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport const CustomStackLayout: React.FC<StackLayoutProps> = ({\n children,\n options,\n routes,\n currentPath\n}) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n content: (\n <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n <Text>{options?.headerTitle \|\| 'My App'}</Text>\n {options?.headerRight}\n </View>\n )\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n content: (\n <NavigationMenu routes={routes} currentPath={currentPath} />\n )\n }}\n >\n {children}\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n### Tab Layout Component\n\n\\`\\`\\`tsx\nimport type { TabLayoutProps } from '@idealyst/navigation';\n\nexport const CustomTabLayout: React.FC<TabLayoutProps> = ({\n children,\n routes,\n currentPath\n}) => {\n const navigator = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/* Custom tab bar /}\n <View style={{ flexDirection: 'row', borderBottom: '1px solid #ccc' }}>\n {routes.map(route => (\n <Pressable\n key={route.path}\n onPress={() => navigator.navigate({ path: route.fullPath, vars: {} })}\n style={{\n padding: 16,\n borderBottom: currentPath === route.fullPath ? '2px solid blue' : 'none'\n }}\n >\n <Text>{route.options?.tabBarLabel \|\| route.path}</Text>\n </Pressable>\n ))}\n </View>\n\n {/ Content /}\n <View style={{ flex: 1 }}>\n {children}\n </View>\n </View>\n );\n};\n\\`\\`\\`\n\n## Layout Props Reference\n\n### StackLayoutProps\n\n\\`\\`\\`tsx\ntype StackLayoutProps = {\n options?: NavigatorOptions; // Navigator options\n routes: RouteWithFullPath[]; // All routes with full paths\n currentPath: string; // Current active path\n children?: React.ReactNode; // Route content\n};\n\\`\\`\\`\n\n### TabLayoutProps\n\n\\`\\`\\`tsx\ntype TabLayoutProps = {\n options?: NavigatorOptions; // Navigator options\n routes: RouteWithFullPath<TabBarScreenOptions>[]; // Tab routes\n currentPath: string; // Current active path\n children?: React.ReactNode; // Route content\n};\n\\`\\`\\`\n\n## Real-World Examples\n\n### Dashboard Layout\n\n\\`\\`\\`tsx\nexport const DashboardLayout: React.FC<StackLayoutProps> = ({\n children,\n routes,\n currentPath\n}) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n height: 72,\n content: (\n <View style={{\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: 16\n }}>\n <Text size=\"xl\" weight=\"bold\">Dashboard</Text>\n <View style={{ flexDirection: 'row', gap: 16 }}>\n <NotificationBell />\n <UserAvatar />\n </View>\n </View>\n )\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n expandedWidth: 260,\n content: <DashboardSidebar routes={routes} currentPath={currentPath} />\n }}\n >\n {children}\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n### Admin Panel Layout\n\n\\`\\`\\`tsx\nexport const AdminLayout: React.FC<StackLayoutProps> = ({ children }) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n content: <AdminHeader />,\n style: { backgroundColor: '#1a1a1a', color: '#fff' }\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n initiallyExpanded: true,\n content: <AdminNavigationMenu />,\n style: { backgroundColor: '#2a2a2a' }\n }}\n >\n <View style={{ padding: 24 }}>\n {children}\n </View>\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n## Best Practices\n\n1. Use GeneralLayout as base* - Don't reinvent header/sidebar logic\n2. Keep layouts simple - Complex logic belongs in screens\n3. Make responsive - Consider different screen sizes\n4. Theme-aware - Use theme colors and spacing\n5. Accessible - Ensure keyboard and screen reader support\n6. Performance - Memoize layout components when possible\n7. Consistent - Use same layout for similar sections\n\n## Platform Considerations\n\n- Web only: Layout components only apply to web\n- Mobile: Uses native navigation components\n- Conditional rendering: Check platform if needed\n- Testing: Test both platforms separately\n`,\n\n \"idealyst://navigation/use-navigator\": `# useNavigator Hook\n\nThe \\`useNavigator\\` hook provides navigation functionality and route information within your components.\n\n## Basic Usage\n\n\\`\\`\\`tsx\nimport { useNavigator } from '@idealyst/navigation';\n\nfunction MyComponent() {\n const navigator = useNavigator();\n\n return (\n <Button onPress={() => navigator.navigate({ path: '/profile', vars: {} })}>\n Go to Profile\n </Button>\n );\n}\n\\`\\`\\`\n\n## API Reference\n\n### navigator.navigate()\n\nNavigate to a route:\n\n\\`\\`\\`tsx\nnavigator.navigate({\n path: string;\n vars?: Record<string, string>;\n replace?: boolean; // Replace history entry instead of push\n});\n\\`\\`\\`\n\nExamples:\n\\`\\`\\`tsx\n// Simple navigation\nnavigator.navigate({ path: '/home' });\n\n// With path parameters\nnavigator.navigate({\n path: '/user/:id',\n vars: { id: '123' }\n});\n\n// With query parameters\nnavigator.navigate({\n path: '/search',\n vars: { q: 'react', category: 'tutorial' }\n});\n\n// Replace current history entry (no back navigation to current page)\nnavigator.navigate({\n path: '/dashboard',\n replace: true\n});\n\\`\\`\\`\n\n### Replace vs Push Navigation\n\nBy default, navigation pushes a new entry onto the history stack. Use \\`replace: true\\` when you want to replace the current entry instead:\n\n\\`\\`\\`tsx\n// After login, replace login page in history\nnavigator.navigate({ path: '/dashboard', replace: true });\n\n// Redirect without adding to history\nnavigator.navigate({ path: '/new-location', replace: true });\n\\`\\`\\`\n\nUse cases for replace:\n- Post-login redirects (user shouldn't go back to login)\n- After form submission redirects\n- URL canonicalization/normalization\n- Redirect from deprecated routes\n\n## useParams Hook\n\nAccess current route path parameters:\n\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\nfunction UserScreen() {\n const params = useParams();\n const userId = params.id; // Path param from /user/:id\n\n return <Text>User ID: {userId}</Text>;\n}\n\\`\\`\\`\n\n## useNavigationState Hook\n\nAccess navigation state passed via the \\`state\\` property:\n\n\\`\\`\\`tsx\nimport { useNavigationState } from '@idealyst/navigation';\n\n// When navigating:\nnavigator.navigate({\n path: '/recording',\n state: { autostart: true, source: 'home' }\n});\n\n// In destination screen:\nfunction RecordingScreen() {\n const { autostart, source } = useNavigationState<{\n autostart?: boolean;\n source?: string;\n }>();\n\n // autostart = true, source = 'home'\n}\n\\`\\`\\`\n\n### Consuming State (Web)\n\nRemove state from URL after reading:\n\n\\`\\`\\`tsx\n// URL: /recording?autostart=true\nconst { autostart } = useNavigationState<{ autostart?: boolean }>({\n consume: ['autostart']\n});\n// autostart = true, URL becomes: /recording (param removed)\n\\`\\`\\`\n\n## useLocation (React Router)\n\nGet the current route path on web:\n\n\\`\\`\\`tsx\nimport { useLocation } from '@idealyst/navigation';\n\nfunction MyComponent() {\n const location = useLocation();\n console.log(location.pathname); // \"/user/123\"\n}\n\\`\\`\\`\n\n### navigator.canGoBack()\n\nCheck if back navigation is available:\n\n\\`\\`\\`tsx\nconst navigator = useNavigator();\n\nif (navigator.canGoBack()) {\n // Show back button\n}\n\\`\\`\\`\n\nPlatform behavior:\n- Web: Returns \\`true\\` if there's a valid parent route in the route hierarchy (e.g., \\`/users/123\\` can go back to \\`/users\\`)\n- Native: Uses React Navigation's \\`canGoBack()\\` to check navigation stack\n\n### navigator.goBack()\n\nNavigate back in the route hierarchy:\n\n\\`\\`\\`tsx\n<Button onPress={() => navigator.goBack()}>\n Go Back\n</Button>\n\\`\\`\\`\n\nPlatform behavior:\n- Web: Navigates to the parent route (e.g., \\`/users/123/edit\\` → \\`/users/123\\` → \\`/users\\` → \\`/\\`). Does NOT use browser history - navigates up the route tree.\n- Native: Uses React Navigation's \\`goBack()\\` to pop the navigation stack\n\nImportant: On web, this is NOT browser history back. It navigates to the parent path in the route hierarchy. Use this for \"up\" navigation within your app structure.\n\n## Path Parameters\n\n### Defining Parameters\n\nIn route configuration:\n\\`\\`\\`tsx\n{\n path: \"user/:id\",\n type: 'screen',\n component: UserScreen\n}\n\\`\\`\\`\n\n### Accessing Parameters\n\nIn the screen component:\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\nfunction UserScreen() {\n const params = useParams();\n const userId = params.id;\n\n return <Text>User ID: {userId}</Text>;\n}\n\\`\\`\\`\n\n### Multiple Parameters\n\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\n// Route: \"post/:postId/comment/:commentId\"\n\n// Navigate:\nnavigator.navigate({\n path: '/post/:postId/comment/:commentId',\n vars: { postId: '42', commentId: '7' }\n});\n\n// Access:\nconst params = useParams();\nconst postId = params.postId;\nconst commentId = params.commentId;\n\\`\\`\\`\n\n## Query Parameters\n\n### Passing Query Params\n\n\\`\\`\\`tsx\nnavigator.navigate({\n path: '/search',\n vars: {\n q: 'typescript',\n category: 'tutorial',\n sort: 'recent'\n }\n});\n\n// Results in: /search?q=typescript&category=tutorial&sort=recent\n\\`\\`\\`\n\n### Reading Query Params\n\n\\`\\`\\`tsx\nimport { useNavigationState } from '@idealyst/navigation';\n\nfunction SearchScreen() {\n // Query params are accessed via useNavigationState on web\n const { q, category, sort } = useNavigationState<{\n q?: string;\n category?: string;\n sort?: string;\n }>();\n\n // Use params...\n}\n\\`\\`\\`\n\n## Navigation Patterns\n\n### Programmatic Navigation\n\nNavigate based on conditions:\n\n\\`\\`\\`tsx\nfunction LoginScreen() {\n const navigator = useNavigator();\n\n const handleLogin = async () => {\n const success = await login(credentials);\n\n if (success) {\n navigator.navigate({ path: '/dashboard', vars: {} });\n }\n };\n\n return <Button onPress={handleLogin}>Login</Button>;\n}\n\\`\\`\\`\n\n### Navigation with Data\n\nPass data through navigation:\n\n\\`\\`\\`tsx\n// List screen\n<Button onPress={() => {\n navigator.navigate({\n path: '/product/:id',\n vars: { id: product.id }\n });\n}}>\n View Product\n</Button>\n\n// Detail screen\nfunction ProductScreen() {\n const params = useParams();\n const productId = params.id;\n\n const product = useProduct(productId);\n // Render product...\n}\n\\`\\`\\`\n\n### Conditional Navigation\n\nNavigate based on user state:\n\n\\`\\`\\`tsx\nfunction ProtectedScreen() {\n const navigator = useNavigator();\n const { user } = useAuth();\n\n useEffect(() => {\n if (!user) {\n navigator.navigate({ path: '/login', vars: {} });\n }\n }, [user]);\n\n return user ? <Content /> : null;\n}\n\\`\\`\\`\n\n## Advanced Usage\n\n### Navigation Guards\n\n\\`\\`\\`tsx\nimport { useNavigator, useLocation } from '@idealyst/navigation';\n\nfunction useAuthGuard() {\n const { navigate } = useNavigator();\n const location = useLocation();\n const { isAuthenticated } = useAuth();\n\n useEffect(() => {\n if (!isAuthenticated && location.pathname !== '/login') {\n navigate({ path: '/login' });\n }\n }, [isAuthenticated, location.pathname]);\n}\n\nfunction App() {\n useAuthGuard();\n return <AppContent />;\n}\n\\`\\`\\`\n\n### Deep Linking\n\nHandle deep links:\n\n\\`\\`\\`tsx\nuseEffect(() => {\n const handleDeepLink = (url: string) => {\n // Parse URL and navigate\n const path = parseDeepLink(url);\n navigator.navigate({ path, vars: {} });\n };\n\n // Add deep link listener\n const subscription = Linking.addEventListener('url', ({ url }) => {\n handleDeepLink(url);\n });\n\n return () => subscription.remove();\n}, []);\n\\`\\`\\`\n\n### Navigation History\n\nTrack navigation history:\n\n\\`\\`\\`tsx\nimport { useLocation } from '@idealyst/navigation';\n\nfunction useNavigationHistory() {\n const location = useLocation();\n const [history, setHistory] = useState<string[]>([]);\n\n useEffect(() => {\n setHistory(prev => [...prev, location.pathname]);\n }, [location.pathname]);\n\n return history;\n}\n\\`\\`\\`\n\n## TypeScript Support\n\nType-safe navigation:\n\n\\`\\`\\`tsx\ntype NavigateParams = {\n path: string;\n vars: Record<string, string>;\n};\n\n// Strongly typed vars\ntype UserRouteVars = {\n id: string;\n tab?: 'posts' \| 'comments' \| 'likes';\n};\n\n// Usage\nnavigator.navigate({\n path: '/user/:id',\n vars: { id: '123', tab: 'posts' } as UserRouteVars\n});\n\\`\\`\\`\n\n## Platform Differences\n\n### React Native\n- \\`canGoBack()\\` checks React Navigation stack\n- \\`goBack()\\` uses native navigation stack\n- Hardware back button supported\n- Gesture-based navigation\n\n### Web\n- \\`canGoBack()\\` checks for valid parent route in hierarchy\n- \\`goBack()\\` navigates to parent route (NOT browser history)\n- Browser back/forward buttons still work for browser history\n- URL updates automatically\n- Bookmarkable URLs\n\n## Best Practices\n\n1. Always provide vars - Even if empty: \\`{}\\`\n2. Type your routes - Use TypeScript for safety\n3. Handle errors - Check if navigation succeeded\n4. Avoid navigation in render - Use effects or handlers\n5. Clean up listeners - Remove event listeners on unmount\n6. Test navigation flow - Verify all paths work\n7. Use path params for IDs - Not query params\n8. Use query params for filters - Not path params\n\n## Common Patterns\n\n### Back Navigation\n\n\\`\\`\\`tsx\n// Conditionally show back button\nconst { canGoBack, goBack } = useNavigator();\n\n{canGoBack() && (\n <Button\n icon=\"arrow-left\"\n onPress={goBack}\n >\n Back\n </Button>\n)}\n\\`\\`\\`\n\n### Tab Navigation\n\n\\`\\`\\`tsx\nimport { useNavigator, useLocation } from '@idealyst/navigation';\n\nconst tabs = ['feed', 'search', 'profile'];\n\nfunction TabBar() {\n const { navigate } = useNavigator();\n const location = useLocation();\n\n return (\n <View>\n {tabs.map(tab => (\n <Button\n key={tab}\n onPress={() => navigate({ path: \\`/\\${tab}\\` })}\n type={location.pathname === \\`/\\${tab}\\` ? 'contained' : 'outlined'}\n >\n {tab}\n </Button>\n ))}\n </View>\n );\n}\n\\`\\`\\`\n\n### Modal Navigation\n\n\\`\\`\\`tsx\n<Button onPress={() => {\n navigator.navigate({\n path: '/modal/create-post',\n vars: {}\n });\n}}>\n Create Post\n</Button>\n\n// In modal:\n<Button onPress={() => navigator.goBack()}>\n Close\n</Button>\n\\`\\`\\`\n`,\n\n \"idealyst://navigation/invalid-route-handling\": `# Invalid Route Handling\n\nHandle 404 pages and invalid routes with customizable redirect logic and fallback components.\n\n## Overview\n\nThe navigation system provides two mechanisms for handling invalid routes:\n\n1. \\`onInvalidRoute\\` - A handler function that can redirect to a different route\n2. \\`notFoundComponent\\` - A fallback component to render when no redirect is specified\n\nThese can be configured at each navigator level and support bubbling up to parent navigators.\n\n## Basic Setup\n\n### Adding a 404 Page\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\n\n// 404 Component receives path and params\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => (\n <Screen>\n <View style={{ alignItems: 'center', padding: 24 }}>\n <Icon name=\"alert-circle\" size={64} color=\"red\" />\n <Text size=\"xl\">Page Not Found</Text>\n <Text color=\"secondary\">The path \"{path}\" doesn't exist.</Text>\n {params && Object.keys(params).length > 0 && (\n <Text size=\"sm\">Params: {JSON.stringify(params)}</Text>\n )}\n </View>\n </Screen>\n);\n\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: NotFoundPage,\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n## NotFoundComponentProps\n\nThe 404 component receives information about the attempted route:\n\n\\`\\`\\`tsx\ntype NotFoundComponentProps = {\n /** The full path that was attempted /\n path: string;\n /* Any route parameters that were parsed from the path /\n params?: Record<string, string>;\n};\n\\`\\`\\`\n\nExample usage:\n\\`\\`\\`tsx\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View style={{ padding: 16, gap: 24 }}>\n <Text size=\"xl\">404 - Page Not Found</Text>\n <Text>Attempted: {path}</Text>\n {params?.id && <Text>User ID: {params.id}</Text>}\n <Button onPress={() => navigate({ path: '/', replace: true })}>\n Go Home\n </Button>\n </View>\n </Screen>\n );\n};\n\\`\\`\\`\n\n## Redirect Handler\n\nUse \\`onInvalidRoute\\` to redirect certain invalid paths:\n\n\\`\\`\\`tsx\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: NotFoundPage,\n onInvalidRoute: (invalidPath) => {\n // Redirect old URLs to new locations\n if (invalidPath.startsWith('/old-blog')) {\n return { path: '/blog', replace: true };\n }\n\n // Redirect legacy paths\n if (invalidPath === '/legacy-dashboard') {\n return { path: '/dashboard', replace: true };\n }\n\n // Return undefined to show notFoundComponent\n return undefined;\n },\n routes: [...]\n};\n\\`\\`\\`\n\n### Handler Return Values\n\nThe \\`onInvalidRoute\\` handler can return:\n\n- \\`NavigateParams\\`* - Redirect to a different route\n- \\`undefined\\` - Show the \\`notFoundComponent\\` (or bubble up)\n\n\\`\\`\\`tsx\ntype NavigateParams = {\n path: string;\n vars?: Record<string, string>;\n replace?: boolean; // Recommended: true for redirects\n};\n\nonInvalidRoute: (path: string) => NavigateParams \| undefined\n\\`\\`\\`\n\n## Scoped Handlers (Nested Navigators)\n\nEach navigator can have its own 404 handling:\n\n\\`\\`\\`tsx\n// Settings-specific 404 page\nconst SettingsNotFound = ({ path }: NotFoundComponentProps) => (\n <Screen>\n <View style={{ alignItems: 'center' }}>\n <Icon name=\"cog-off\" size={48} color=\"orange\" />\n <Text>Settings page not found: {path}</Text>\n </View>\n </Screen>\n);\n\n// Nested settings navigator with its own handler\nconst SettingsNavigator: NavigatorParam = {\n path: \"settings\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: SettingsNotFound,\n onInvalidRoute: (path) => {\n // Redirect deprecated settings paths\n if (path.includes('legacy-setting')) {\n return { path: '/settings/general', replace: true };\n }\n return undefined; // Show SettingsNotFound\n },\n routes: [\n { path: \"\", type: 'screen', component: SettingsHome },\n { path: \"general\", type: 'screen', component: GeneralSettings },\n { path: \"account\", type: 'screen', component: AccountSettings },\n ]\n};\n\n// Root navigator with global 404\nconst AppRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: GlobalNotFound, // Fallback for non-settings routes\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n SettingsNavigator, // Has its own 404 handling\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n## Handler Bubbling\n\nInvalid routes bubble up through the navigator hierarchy:\n\n\\`\\`\\`\nInvalid route detected: /settings/invalid-page\n ↓\nCheck /settings navigator's onInvalidRoute\n ↓\n┌─────────────────────────────────────────┐\n│ Returns NavigateParams? │\n│ YES → Redirect to that route │\n│ NO (undefined) → Check notFoundComponent │\n└─────────────────────────────────────────┘\n ↓\nHas notFoundComponent?\n YES → Render it with { path, params }\n NO → Bubble up to parent navigator\n ↓\nNo parent handles it?\n → console.warn(\"No handler for invalid route\")\n\\`\\`\\`\n\n## Platform Behavior\n\n### Web\n\n- Invalid routes trigger the catch-all route at each navigator level\n- The \\`onInvalidRoute\\` handler is called when the 404 route is rendered\n- If handler returns \\`NavigateParams\\`, navigation uses \\`replace: true\\` by default\n- URL stays at the invalid path when showing \\`notFoundComponent\\`\n\n### Mobile (React Native)\n\n- Invalid routes trigger navigation to a hidden 404 screen\n- The handler is called during the \\`navigate()\\` function\n- If handler returns \\`NavigateParams\\`, redirects to that route\n- If no handler/component, logs a warning\n\n## Complete Example\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\nimport { Screen, View, Text, Button, Icon, Card } from '@idealyst/components';\n\n// Global 404 - detailed error page\nconst GlobalNotFound = ({ path, params }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View style={{ padding: 24, gap: 24, alignItems: 'center', flex: 1, justifyContent: 'center' }}>\n <Icon name=\"alert-circle-outline\" size={64} color=\"red\" />\n <Text size=\"xl\" weight=\"bold\">Page Not Found</Text>\n <Text color=\"secondary\">The page you're looking for doesn't exist.</Text>\n\n <Card style={{ marginTop: 16, padding: 16 }}>\n <Text size=\"sm\" weight=\"semibold\">Attempted path:</Text>\n <Text size=\"sm\" color=\"secondary\">{path}</Text>\n {params && Object.keys(params).length > 0 && (\n <>\n <Text size=\"sm\" weight=\"semibold\" style={{ marginTop: 8 }}>Params:</Text>\n <Text size=\"sm\" color=\"secondary\">{JSON.stringify(params)}</Text>\n </>\n )}\n </Card>\n\n <Button style={{ marginTop: 24 }} onPress={() => navigate({ path: '/', replace: true })}>\n Go Home\n </Button>\n </View>\n </Screen>\n );\n};\n\n// Admin section 404 - simpler style\nconst AdminNotFound = ({ path }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View padding={16} style={{ alignItems: 'center' }}>\n <Icon name=\"shield-off\" size={48} color=\"orange\" />\n <Text size=\"lg\">Admin page not found</Text>\n <Button\n type=\"outlined\"\n size=\"sm\"\n onPress={() => navigate({ path: '/admin', replace: true })}\n >\n Back to Admin\n </Button>\n </View>\n </Screen>\n );\n};\n\n// Admin navigator with redirect logic\nconst AdminNavigator: NavigatorParam = {\n path: \"admin\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: AdminNotFound,\n onInvalidRoute: (path) => {\n // Redirect old admin paths\n if (path.includes('old-users')) {\n return { path: '/admin/users', replace: true };\n }\n if (path.includes('deprecated')) {\n return { path: '/admin', replace: true };\n }\n return undefined; // Show AdminNotFound\n },\n routes: [\n { path: \"\", type: 'screen', component: AdminDashboard },\n { path: \"users\", type: 'screen', component: AdminUsers },\n { path: \"settings\", type: 'screen', component: AdminSettings },\n ]\n};\n\n// Root app router\nconst AppRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'drawer',\n notFoundComponent: GlobalNotFound,\n onInvalidRoute: (path) => {\n // Global redirects\n if (path === '/home') {\n return { path: '/', replace: true };\n }\n return undefined;\n },\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n AdminNavigator,\n { path: \"about\", type: 'screen', component: AboutScreen },\n { path: \"contact\", type: 'screen', component: ContactScreen },\n ]\n};\n\nexport default AppRouter;\n\\`\\`\\`\n\n## Best Practices\n\n1. Always provide a root notFoundComponent - Ensures all invalid routes are handled\n2. Use scoped handlers for sections - Different 404 styles for different app areas\n3. Redirect deprecated URLs - Use \\`onInvalidRoute\\` to maintain URL compatibility\n4. Include helpful information - Show the attempted path and suggest alternatives\n5. Provide navigation options - Add buttons to go home or back\n6. Use \\`replace: true\\` for redirects - Prevents invalid routes in browser history\n7. Log unhandled routes - Monitor for missing pages in production\n\n## TypeScript Types\n\n\\`\\`\\`tsx\nimport {\n NavigatorParam,\n NotFoundComponentProps,\n NavigateParams\n} from '@idealyst/navigation';\n\n// NotFoundComponentProps\ntype NotFoundComponentProps = {\n path: string;\n params?: Record<string, string>;\n};\n\n// Handler signature\ntype InvalidRouteHandler = (invalidPath: string) => NavigateParams \| undefined;\n\n// NavigateParams (used by handler return and navigate function)\ntype NavigateParams = {\n path: string;\n vars?: Record<string, string>;\n replace?: boolean;\n};\n\\`\\`\\`\n`,\n\n \"idealyst://navigation/web-mobile-parity\": `# Web/Mobile Navigation Parity\n\nUnderstanding how to achieve the same navigation experience on web that you get for free on mobile.\n\n## The Core Problem\n\nOn React Native, you get native navigation UI for free:\n- Stack navigator gives you headers with back buttons\n- Tab navigator gives you a bottom tab bar with icons\n- Drawer navigator gives you a slide-out menu\n\nOn Web, you get nothing but URL routing. No headers, no tab bars, no drawers. You must build these yourself using layout components.\n\n## The Solution: Layout Components\n\nThe \\`layoutComponent\\` prop on navigators is how you achieve parity. It wraps your route content and provides the navigation UI.\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: MyStackLayout, // <-- This is the key!\n routes: [...]\n}\n\\`\\`\\`\n\n## What Layout Components Receive\n\nEvery layout component receives these props:\n\n\\`\\`\\`tsx\ntype LayoutProps = {\n children: React.ReactNode; // The route content (renders via <Outlet />)\n options?: NavigatorOptions; // headerTitle, headerLeft, headerRight, etc.\n routes: RouteWithFullPath[]; // All child routes with their full paths\n currentPath: string; // Currently active route path\n};\n\\`\\`\\`\n\nThis gives you everything you need to build any navigation UI:\n- \\`options\\` - What to show in headers\n- \\`routes\\` - What tabs/menu items to render\n- \\`currentPath\\` - Which one is active\n- \\`children\\` - Where to render the screen content\n\n## Stack Navigator Parity\n\n### What Native Gives You\n- Header bar with title\n- Back button (automatic)\n- Right-side actions\n- Smooth transitions\n\n### Web Implementation\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, IconButton, Pressable } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport function StackLayout({ options, currentPath }: StackLayoutProps) {\n const { canGoBack, goBack } = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/* Header - mimics native stack header /}\n {options?.headerShown !== false && (\n <View style={{\n height: 56,\n flexDirection: 'row',\n alignItems: 'center',\n paddingHorizontal: 16,\n borderBottomWidth: 1,\n borderBottomColor: '#e0e0e0',\n backgroundColor: '#fff',\n }}>\n {/ Back button - like native /}\n {options?.headerBackVisible !== false && canGoBack() && (\n <IconButton\n icon=\"arrow-left\"\n onPress={goBack}\n style={{ marginRight: 8 }}\n />\n )}\n\n {/ Left slot /}\n {options?.headerLeft && (\n <View style={{ marginRight: 16 }}>\n {typeof options.headerLeft === 'function'\n ? options.headerLeft({})\n : options.headerLeft}\n </View>\n )}\n\n {/ Title - centered or left-aligned /}\n <View style={{ flex: 1 }}>\n {typeof options?.headerTitle === 'string' ? (\n <Text variant=\"title\">{options.headerTitle}</Text>\n ) : (\n options?.headerTitle\n )}\n </View>\n\n {/ Right slot /}\n {options?.headerRight && (\n <View>\n {typeof options.headerRight === 'function'\n ? options.headerRight({})\n : options.headerRight}\n </View>\n )}\n </View>\n )}\n\n {/ Content area /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Tab Navigator Parity\n\n### What Native Gives You\n- Bottom tab bar\n- Icons for each tab\n- Labels\n- Badge counts\n- Active state highlighting\n\n### Web Implementation\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, Pressable, Icon, Badge } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { TabLayoutProps } from '@idealyst/navigation';\n\nexport function TabLayout({ routes, currentPath }: TabLayoutProps) {\n const { navigate } = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/ Content area /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n\n {/ Bottom tab bar - mimics native /}\n <View style={{\n height: 56,\n flexDirection: 'row',\n borderTopWidth: 1,\n borderTopColor: '#e0e0e0',\n backgroundColor: '#fff',\n }}>\n {routes.map((route) => {\n const isActive = currentPath === route.fullPath;\n const options = route.options;\n\n return (\n <Pressable\n key={route.fullPath}\n onPress={() => navigate({ path: route.fullPath })}\n style={{\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n paddingVertical: 8,\n }}\n >\n {/ Icon with optional badge /}\n <View style={{ position: 'relative' }}>\n {options?.tabBarIcon?.({\n focused: isActive,\n color: isActive ? '#007AFF' : '#8E8E93',\n size: 24,\n })}\n {options?.tabBarBadge && (\n <Badge\n count={options.tabBarBadge}\n style={{ position: 'absolute', top: -4, right: -8 }}\n />\n )}\n </View>\n\n {/ Label /}\n {options?.tabBarLabel && (\n <Text\n size=\"xs\"\n style={{\n marginTop: 4,\n color: isActive ? '#007AFF' : '#8E8E93',\n }}\n >\n {options.tabBarLabel}\n </Text>\n )}\n </Pressable>\n );\n })}\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Drawer Navigator Parity\n\n### What Native Gives You\n- Slide-out drawer from edge\n- Overlay when open\n- Gesture to open/close\n- Menu items\n\n### Web Implementation\n\nOn web, drawers are typically persistent sidebars. Here's how to build both:\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, Pressable, Icon } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport function DrawerLayout({ routes, currentPath, options }: StackLayoutProps) {\n const { navigate } = useNavigator();\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <View style={{ flex: 1, flexDirection: 'row' }}>\n {/ Sidebar - always visible on web /}\n <View style={{\n width: isCollapsed ? 64 : 240,\n borderRightWidth: 1,\n borderRightColor: '#e0e0e0',\n backgroundColor: '#f8f8f8',\n transition: 'width 0.2s',\n }}>\n {/ Logo/Header /}\n <View style={{ height: 56, justifyContent: 'center', paddingHorizontal: 16 }}>\n {!isCollapsed && <Text variant=\"title\">My App</Text>}\n </View>\n\n {/ Menu Items /}\n {routes.map((route) => {\n const isActive = currentPath.startsWith(route.fullPath);\n return (\n <Pressable\n key={route.fullPath}\n onPress={() => navigate({ path: route.fullPath })}\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n padding: 12,\n backgroundColor: isActive ? 'rgba(0,0,0,0.08)' : 'transparent',\n }}\n >\n <Icon\n name={route.options?.icon \|\| 'circle'}\n size={24}\n color={isActive ? '#007AFF' : '#666'}\n />\n {!isCollapsed && (\n <Text style={{ marginLeft: 12, color: isActive ? '#007AFF' : '#333' }}>\n {route.options?.title \|\| route.path}\n </Text>\n )}\n </Pressable>\n );\n })}\n\n {/ Collapse toggle /}\n <Pressable\n onPress={() => setIsCollapsed(!isCollapsed)}\n style={{ padding: 12, marginTop: 'auto' }}\n >\n <Icon name={isCollapsed ? 'chevron-right' : 'chevron-left'} size={24} />\n </Pressable>\n </View>\n\n {/ Content /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Using GeneralLayout Helper\n\nThe \\`GeneralLayout\\` component simplifies building layouts:\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\n\nexport function AppLayout({ options, routes, currentPath, children }: StackLayoutProps) {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n height: 56,\n content: (\n <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>\n <Text variant=\"title\">{options?.headerTitle \|\| 'App'}</Text>\n <View style={{ marginLeft: 'auto' }}>{options?.headerRight}</View>\n </View>\n ),\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n expandedWidth: 240,\n collapsedWidth: 64,\n content: <SidebarMenu routes={routes} currentPath={currentPath} />,\n }}\n >\n {children}\n </GeneralLayout>\n );\n}\n\\`\\`\\`\n\n## Putting It All Together\n\nHere's a complete router setup with web layouts:\n\n\\`\\`\\`tsx\nimport { NavigatorParam } from '@idealyst/navigation';\nimport { StackLayout } from './layouts/StackLayout';\nimport { TabLayout } from './layouts/TabLayout';\n\nconst appRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: StackLayout, // Web header\n options: {\n headerTitle: \"My App\",\n headerRight: <UserMenu />,\n },\n routes: [\n {\n path: \"main\",\n type: 'navigator',\n layout: 'tab',\n layoutComponent: TabLayout, // Web tab bar\n routes: [\n {\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ color }) => <Icon name=\"home\" color={color} />,\n },\n },\n {\n path: \"search\",\n type: 'screen',\n component: SearchScreen,\n options: {\n tabBarLabel: \"Search\",\n tabBarIcon: ({ color }) => <Icon name=\"magnify\" color={color} />,\n },\n },\n ],\n },\n {\n path: \"settings\",\n type: 'screen',\n component: SettingsScreen,\n },\n ],\n};\n\\`\\`\\`\n\n## Key Insights\n\n1. layoutComponent is web-only* - Native ignores it and uses native navigators\n2. Same route config, different UI - Your routes stay the same, layouts differ\n3. Options are your data source - headerTitle, tabBarIcon, etc. drive your layout\n4. routes array is navigation menu - Use it to build sidebars, tab bars, menus\n5. currentPath enables active states - Compare to highlight current item\n6. Outlet renders children - From react-router-dom, this is where screen content goes\n\n## Common Patterns\n\n### Responsive Layout\n\\`\\`\\`tsx\nfunction ResponsiveLayout(props: StackLayoutProps) {\n const { width } = useWindowDimensions();\n const isMobile = width < 768;\n\n // Tabs on mobile, drawer on desktop\n return isMobile\n ? <TabLayout {...props} />\n : <DrawerLayout {...props} />;\n}\n\\`\\`\\`\n\n### Nested Headers\n\\`\\`\\`tsx\n// Parent navigator has app header\n// Child navigator has section header\n{\n path: \"/\",\n layoutComponent: AppHeaderLayout,\n routes: [{\n path: \"admin\",\n layoutComponent: AdminSectionHeader, // Adds another header\n routes: [...]\n }]\n}\n\\`\\`\\`\n\n### Hiding Navigation\n\\`\\`\\`tsx\nfunction ConditionalLayout(props: StackLayoutProps) {\n // Hide navigation on certain routes\n if (props.currentPath.includes('/fullscreen')) {\n return <Outlet />; // No chrome\n }\n return <FullLayout {...props} />;\n}\n\\`\\`\\`\n\n## Summary\n\n\| Native Gets \| Web Needs \|\n\|-------------\|-----------\|\n\| Stack header \| \\`layoutComponent\\` with header UI \|\n\| Tab bar \| \\`layoutComponent\\` with tab buttons \|\n\| Drawer \| \\`layoutComponent\\` with sidebar \|\n\| Back button \| \\`canGoBack()\\` + \\`goBack()\\` \|\n\| Active states \| Compare \\`currentPath\\` to \\`route.fullPath\\` \|\n\| Screen options \| Access via \\`options\\` and \\`route.options\\` \|\n\nThe key to web/mobile parity is understanding that layout components give web everything native navigators provide automatically.\n`,\n};\n","export const iconGuide = `# Material Design Icons Reference\n\nIdealyst uses Material Design Icons (@mdi/react) with 7,447 icons available.\n\n## Icon Usage\n\n### In Components\n\nIcons can be used by providing the icon name as a string:\n\n\\`\\`\\`tsx\nimport { Button, Icon, List, Badge } from '@idealyst/components';\n\n// Button with icon\n<Button icon=\"check\">Save</Button>\n\n// Standalone Icon\n<Icon name=\"home\" size=\"md\" color=\"primary\" />\n\n// List with icons\n<ListItem label=\"Settings\" leading=\"cog\" trailing=\"chevron-right\" />\n\n// Badge with icon\n<Badge icon=\"star\">Featured</Badge>\n\\`\\`\\`\n\n### Icon Properties\n\n\\`\\`\\`tsx\n<Icon\n name=\"home\" // Icon name (required)\n size=\"xs\|sm\|md\|lg\|xl\|number\" // Icon size\n color=\"primary\|secondary\|...\" // Theme color\n/>\n\\`\\`\\`\n\n## Common Icons by Category\n\n### Navigation & Actions\n- home - Home/dashboard\n- menu - Hamburger menu\n- arrow-left - Back/previous\n- arrow-right - Forward/next\n- chevron-left - Small back arrow\n- chevron-right - Small forward arrow\n- chevron-up - Collapse/up\n- chevron-down - Expand/down\n- close - Close/dismiss\n- check - Confirm/success\n- plus - Add/create\n- minus - Remove/subtract\n- delete - Delete/trash\n- dots-vertical - More options (vertical)\n- dots-horizontal - More options (horizontal)\n\n### User & Account\n- account - User profile\n- account-circle - User avatar\n- account-multiple - Multiple users/team\n- account-plus - Add user\n- account-minus - Remove user\n- account-edit - Edit profile\n- account-cog - User settings\n- login - Login/sign in\n- logout - Logout/sign out\n- account-key - Authentication\n\n### Communication\n- email - Email/mail\n- email-outline - Email outline variant\n- message - Message/chat\n- message-text - Text message\n- message-reply - Reply to message\n- phone - Phone/call\n- bell - Notifications\n- bell-outline - Notifications outline\n- comment - Comment/feedback\n- forum - Discussion/forum\n\n### File & Document\n- file - Generic file\n- file-document - Document\n- file-pdf - PDF file\n- file-image - Image file\n- folder - Folder\n- folder-open - Open folder\n- download - Download\n- upload - Upload\n- attachment - Attach file\n- cloud-upload - Cloud upload\n- cloud-download - Cloud download\n\n### Media\n- play - Play media\n- pause - Pause media\n- stop - Stop media\n- skip-next - Next track\n- skip-previous - Previous track\n- volume-high - High volume\n- volume-low - Low volume\n- volume-off - Muted\n- image - Picture/photo\n- camera - Camera\n- video - Video\n\n### Edit & Create\n- pencil - Edit\n- pencil-outline - Edit outline\n- content-save - Save\n- content-copy - Copy\n- content-cut - Cut\n- content-paste - Paste\n- undo - Undo\n- redo - Redo\n- format-bold - Bold text\n- format-italic - Italic text\n- format-underline - Underline text\n\n### Status & Alerts\n- check-circle - Success\n- check-circle-outline - Success outline\n- alert - Warning\n- alert-circle - Alert circle\n- alert-octagon - Critical alert\n- information - Information\n- information-outline - Info outline\n- help-circle - Help/question\n- close-circle - Error\n- clock - Time/pending\n\n### UI Elements\n- magnify - Search\n- filter - Filter\n- sort - Sort\n- tune - Settings/adjust\n- cog - Settings\n- palette - Theme/colors\n- eye - View/visible\n- eye-off - Hidden\n- heart - Favorite/like\n- heart-outline - Like outline\n- star - Star/rating\n- star-outline - Star outline\n- bookmark - Bookmark\n- bookmark-outline - Bookmark outline\n\n### Shopping & Commerce\n- cart - Shopping cart\n- cart-outline - Cart outline\n- cash - Money/payment\n- credit-card - Credit card\n- tag - Tag/label\n- sale - Sale/discount\n- receipt - Receipt\n- store - Store/shop\n\n### Social\n- share - Share\n- share-variant - Share variant\n- thumb-up - Like/upvote\n- thumb-down - Dislike/downvote\n- emoticon - Emoji/mood\n- emoticon-happy - Happy\n- emoticon-sad - Sad\n\n### Location & Map\n- map - Map\n- map-marker - Location pin\n- navigation - Navigation\n- compass - Compass\n- earth - Globe/world\n\n### Calendar & Time\n- calendar - Calendar\n- calendar-today - Today\n- calendar-month - Month view\n- clock-outline - Clock\n- timer - Timer\n\n### Device & Hardware\n- laptop - Laptop\n- cellphone - Mobile phone\n- tablet - Tablet\n- desktop-mac - Desktop\n- monitor - Monitor\n- printer - Printer\n- wifi - WiFi\n- bluetooth - Bluetooth\n\n### Weather\n- weather-sunny - Sunny\n- weather-cloudy - Cloudy\n- weather-rainy - Rainy\n- weather-snowy - Snowy\n- weather-night - Night\n- white-balance-sunny - Light mode\n- weather-night - Dark mode\n\n## Finding Icons\n\n### Total Available Icons\n7,447 icons from Material Design Icons\n\n### Browse All Icons\nVisit: https://pictogrammers.com/library/mdi/\n\n### Search Patterns\nIcons follow naming patterns:\n- Base name: \\`home\\`, \\`account\\`, \\`file\\`\n- Variants: \\`-outline\\`, \\`-filled\\`, \\`-off\\`, \\`-plus\\`, \\`-minus\\`\n- Combinations: \\`account-plus\\`, \\`file-document-outline\\`\n\n### Common Suffixes\n- -outline: Outline version\n- -off: Disabled/off state\n- -plus: Add/create\n- -minus: Remove/subtract\n- -edit: Edit action\n- -check: Verified/checked\n- -alert: Warning state\n\n## Icon Naming Tips\n\n1. Be Specific: Use descriptive names\n - ✅ \\`account-circle\\` for user avatar\n - ❌ \\`user\\` (not available)\n\n2. Check Variants: Try outline versions\n - \\`email\\` and \\`email-outline\\`\n - \\`heart\\` and \\`heart-outline\\`\n\n3. Common Prefixes:\n - \\`account-\\`: User-related\n - \\`file-\\`: File-related\n - \\`folder-\\`: Folder-related\n - \\`arrow-\\`: Arrows\n - \\`chevron-\\`: Small arrows\n - \\`content-\\`: Content actions\n\n4. Use Hyphens: Icon names use kebab-case\n - ✅ \\`arrow-left\\`\n - ❌ \\`arrowLeft\\` or \\`arrow_left\\`\n\n## Best Practices\n\n1. Semantic Meaning: Choose icons that match their function\n2. Consistency: Use the same icon for the same action throughout the app\n3. Size Appropriately: Match icon size to context\n4. Color Purposefully: Use theme colors for semantic meaning\n5. Accessibility: Always provide labels/tooltips for icon-only buttons\n\n## Examples\n\n### Button Icons\n\\`\\`\\`tsx\n<Button icon=\"content-save\">Save</Button>\n<Button icon=\"delete\" intent=\"error\">Delete</Button>\n<Button icon=\"pencil\">Edit</Button>\n<Button icon=\"plus\">Add New</Button>\n\\`\\`\\`\n\n### List Icons\n\\`\\`\\`tsx\n<ListItem label=\"Dashboard\" leading=\"view-dashboard\" />\n<ListItem label=\"Users\" leading=\"account-multiple\" />\n<ListItem label=\"Settings\" leading=\"cog\" />\n<ListItem label=\"Logout\" leading=\"logout\" intent=\"error\" />\n\\`\\`\\`\n\n### Navigation Icons\n\\`\\`\\`tsx\n<Button icon=\"arrow-left\" variant=\"text\">Back</Button>\n<Button icon=\"menu\" variant=\"text\">Menu</Button>\n<Button icon=\"close\" variant=\"text\">Close</Button>\n\\`\\`\\`\n\n### Status Icons\n\\`\\`\\`tsx\n<Icon name=\"check-circle\" color=\"success\" />\n<Icon name=\"alert-circle\" color=\"warning\" />\n<Icon name=\"close-circle\" color=\"error\" />\n<Icon name=\"information-outline\" color=\"primary\" />\n\\`\\`\\`\n`;\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACTA,IAAM,kBAA0C;AAAA,EACrD,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4FxC,4CAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoH5C,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6LhC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiN5B,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+JvC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsFrC,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyNtC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyJrC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2IrC,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmPpC,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsI3C;;;AC1sDO,IAAM,mBAA2C;AAAA,EACtD,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8FlC,6CAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0O7C,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyNzC,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoTxC,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgfvC,gDAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiWhD,2CAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6b7C;;;ACpmEO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH2BzB,IAAM,SAAS,IAAI;AAAA,EACjB;AAAA,IACE,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,cAAc;AAAA,MACZ,OAAO,CAAC;AAAA,MACR,WAAW,CAAC;AAAA,IACd;AAAA,EACF;AACF;AAGA,OAAO,kBAAkB,wBAAwB,YAAY;AAC3D,SAAO;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;AAGD,OAAO,kBAAkB,uBAAuB,OAAO,YAAY;AACjE,QAAM,EAAE,MAAM,WAAW,KAAK,IAAI,QAAQ;AAC1C,SAAO,SAAS,MAAM,QAAQ,CAAC,CAAC;AAClC,CAAC;AAGD,OAAO,kBAAkB,4BAA4B,YAAY;AAC/D,SAAO;AAAA,IACL,WAAW;AAAA,MACT;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGD,OAAO,kBAAkB,2BAA2B,OAAO,YAAY;AACrE,QAAM,EAAE,IAAI,IAAI,QAAQ;AAGxB,MAAI,QAAQ,gBAAgB,GAAG,KAAK,iBAAiB,GAAG,KAAK,gBAAgB,GAAG,KAAK,cAAc,GAAG;AAGtG,MAAI,QAAQ,8BAA8B;AACxC,YAAQ;AAAA,EACV;AAGA,MAAI,QAAQ,+BAA+B;AACzC,UAAM,aAAa,qBAAqB;AACxC,UAAM,iBAAyC;AAAA,MAC7C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAEA,QAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAMd,eAAW,CAAC,UAAU,UAAU,KAAK,OAAO,QAAQ,UAAU,GAAG;AAC/D,iBAAW,MAAM,eAAe,QAAQ,KAAK,QAAQ;AAAA;AAAA;AAErD,iBAAW,UAAU,YAAY;AAC/B,cAAM,KAAK,OAAO,QAAQ,OAAO,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AACrE,mBAAW,OAAO,OAAO,IAAI;AAAA,EACnC,OAAO,WAAW;AAAA;AAAA,oBAEA,OAAO,UAAU;AAAA,kBACnB,OAAO,SAAS,KAAK,IAAI,CAAC;AAAA,4CACA,EAAE;AAAA;AAAA;AAAA,MAGxC;AAAA,IACF;AAEA,YAAQ;AAAA,EACV;AAGA,MAAI,QAAQ,gCAAgC;AAC1C,UAAM,aAAa,sBAAsB;AACzC,UAAM,gBAAgB,CAAC,QAAQ,MAAM,QAAQ,SAAS,QAAQ,WAAW,SAAS;AAClF,UAAM,iBAAyC;AAAA,MAC7C,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAEA,QAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAMd,eAAW,YAAY,eAAe;AACpC,YAAM,OAAO,WAAW,QAAQ;AAChC,UAAI,CAAC,QAAQ,KAAK,WAAW,EAAG;AAEhC,iBAAW,MAAM,eAAe,QAAQ,KAAK,QAAQ;AAAA;AAAA;AAErD,iBAAW,OAAO,MAAM;AACtB,cAAM,YAAY,IAAI,UAAU,KAAK,IAAI;AACzC,mBAAW,OAAO,IAAI,IAAI,OAAO,IAAI,OAAO;AAAA,EAClD,IAAI,WAAW;AAAA;AAAA,mBAEE,SAAS;AAAA,mBACT,IAAI,YAAY;AAAA;AAAA;AAAA,MAG7B;AAAA,IACF;AAEA,YAAQ;AAAA,EACV;AAEA,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,uBAAuB,GAAG,EAAE;AAAA,EAC9C;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,MACR;AAAA,QACE;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGD,eAAe,OAAO;AACpB,QAAM,YAAY,IAAI,qBAAqB;AAC3C,QAAM,OAAO,QAAQ,SAAS;AAC9B,UAAQ,MAAM,sCAAsC;AACtD;AAEA,KAAK,EAAE,MAAM,CAAC,UAAU;AACtB,UAAQ,MAAM,gBAAgB,KAAK;AACnC,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}
1	+ {"version":3,"sources":["../src/index.ts","../src/data/framework-guides.ts","../src/data/navigation-guides.ts","../src/data/icon-guide.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport { Server } from \"@modelcontextprotocol/sdk/server/index.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol/sdk/server/stdio.js\";\nimport {\n ListToolsRequestSchema,\n CallToolRequestSchema,\n ListResourcesRequestSchema,\n ReadResourceRequestSchema,\n} from \"@modelcontextprotocol/sdk/types.js\";\nimport { frameworkGuides } from \"./data/framework-guides.js\";\nimport { navigationGuides } from \"./data/navigation-guides.js\";\nimport { translateGuides } from \"./data/translate-guides.js\";\nimport { storageGuides } from \"./data/storage-guides.js\";\nimport { iconGuide } from \"./data/icon-guide.js\";\nimport {\n packages,\n getPackagesByCategory,\n} from \"./data/packages.js\";\nimport {\n recipes,\n getRecipesByCategory,\n} from \"./data/recipes.js\";\n\n// Import tool definitions and handler from the extracted tools module\nimport { toolDefinitions, callTool } from \"./tools/index.js\";\n\nconst server = new Server(\n {\n name: \"@idealyst/mcp-server\",\n version: \"1.0.94\",\n },\n {\n capabilities: {\n tools: {},\n resources: {},\n },\n }\n);\n\n// List all available tools\nserver.setRequestHandler(ListToolsRequestSchema, async () => {\n return {\n tools: toolDefinitions,\n };\n});\n\n// Handle tool calls\nserver.setRequestHandler(CallToolRequestSchema, async (request) => {\n const { name, arguments: args } = request.params;\n return callTool(name, args \|\| {});\n});\n\n// List available resources\nserver.setRequestHandler(ListResourcesRequestSchema, async () => {\n return {\n resources: [\n {\n uri: \"idealyst://packages/overview\",\n name: \"Idealyst Packages Overview\",\n description: \"Overview of all available @idealyst packages organized by category\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://recipes/overview\",\n name: \"Idealyst Recipes Overview\",\n description: \"Overview of all available code recipes for common UI patterns\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/getting-started\",\n name: \"Getting Started with Idealyst\",\n description: \"Complete guide to setting up and using the Idealyst framework\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/components-overview\",\n name: \"Components Overview\",\n description: \"Overview of all available Idealyst components organized by category\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/theming\",\n name: \"Theming Guide\",\n description: \"Guide to customizing themes in Idealyst\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://framework/cli\",\n name: \"CLI Reference\",\n description: \"Complete reference for the Idealyst CLI\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/overview\",\n name: \"Navigation System Overview\",\n description: \"Overview of the Idealyst navigation system for cross-platform routing\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/route-configuration\",\n name: \"Route Configuration\",\n description: \"Learn how to define and structure routes in Idealyst\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/navigator-types\",\n name: \"Navigator Types\",\n description: \"Guide to stack, tab, drawer, and modal navigators\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/custom-layouts\",\n name: \"Custom Layouts (Web)\",\n description: \"Creating custom layouts with headers and sidebars for web applications\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/use-navigator\",\n name: \"useNavigator Hook\",\n description: \"Complete reference for the useNavigator hook API\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://navigation/web-mobile-parity\",\n name: \"Web/Mobile Navigation Parity\",\n description: \"How to achieve native-like navigation UI on web using layout components\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://icons/reference\",\n name: \"Icon Reference Guide\",\n description: \"Complete guide to Material Design Icons with 7,447 available icons, common icons by category, and usage examples\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/overview\",\n name: \"Translation Overview\",\n description: \"Overview of @idealyst/translate internationalization package\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/runtime-api\",\n name: \"Translation Runtime API\",\n description: \"Complete reference for TranslateProvider, useTranslation, useLanguage, and Trans component\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/babel-plugin\",\n name: \"Translation Babel Plugin\",\n description: \"Guide to the Babel plugin for static key extraction and missing translation detection\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/translation-files\",\n name: \"Translation File Format\",\n description: \"Guide to organizing and formatting translation JSON files\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://translate/examples\",\n name: \"Translation Examples\",\n description: \"Complete code examples for common translation patterns\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/overview\",\n name: \"Storage Overview\",\n description: \"Overview of @idealyst/storage cross-platform storage package\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/api\",\n name: \"Storage API Reference\",\n description: \"Complete API reference for @idealyst/storage\",\n mimeType: \"text/markdown\",\n },\n {\n uri: \"idealyst://storage/examples\",\n name: \"Storage Examples\",\n description: \"Complete code examples for common storage patterns\",\n mimeType: \"text/markdown\",\n },\n ],\n };\n});\n\n// Handle resource reads\nserver.setRequestHandler(ReadResourceRequestSchema, async (request) => {\n const { uri } = request.params;\n\n // Check all guide sources\n let guide = frameworkGuides[uri] \|\| navigationGuides[uri] \|\| translateGuides[uri] \|\| storageGuides[uri];\n\n // Handle icon reference\n if (uri === \"idealyst://icons/reference\") {\n guide = iconGuide;\n }\n\n // Handle recipes overview\n if (uri === \"idealyst://recipes/overview\") {\n const byCategory = getRecipesByCategory();\n const categoryLabels: Record<string, string> = {\n auth: \"Authentication\",\n forms: \"Forms & Validation\",\n navigation: \"Navigation\",\n data: \"Data & Lists\",\n layout: \"Layout & Modals\",\n settings: \"Settings & Preferences\",\n media: \"Media & Uploads\",\n };\n\n let content = `# Idealyst Recipes\n\nReady-to-use code examples for common UI patterns in Idealyst apps.\n\n`;\n\n for (const [category, recipeList] of Object.entries(byCategory)) {\n content += `## ${categoryLabels[category] \|\| category}\\n\\n`;\n\n for (const recipe of recipeList) {\n const id = Object.entries(recipes).find(([_, r]) => r === recipe)?.[0];\n content += `### ${recipe.name}\n${recipe.description}\n\n- Difficulty: ${recipe.difficulty}\n- Packages: ${recipe.packages.join(\", \")}\n- Get recipe: \\`get_recipe({ recipe: \"${id}\" })\\`\n\n`;\n }\n }\n\n guide = content;\n }\n\n // Handle packages overview\n if (uri === \"idealyst://packages/overview\") {\n const byCategory = getPackagesByCategory();\n const categoryOrder = [\"core\", \"ui\", \"data\", \"media\", \"auth\", \"utility\", \"tooling\"];\n const categoryLabels: Record<string, string> = {\n core: \"Core Packages\",\n ui: \"UI Components\",\n data: \"Data & Storage\",\n media: \"Media & Hardware\",\n auth: \"Authentication\",\n utility: \"Utilities\",\n tooling: \"Developer Tooling\",\n };\n\n let content = `# Idealyst Framework Packages\n\nThe Idealyst Framework provides a comprehensive set of packages for building cross-platform React applications.\n\n`;\n\n for (const category of categoryOrder) {\n const pkgs = byCategory[category];\n if (!pkgs \|\| pkgs.length === 0) continue;\n\n content += `## ${categoryLabels[category] \|\| category}\\n\\n`;\n\n for (const pkg of pkgs) {\n const platforms = pkg.platforms.join(\", \");\n content += `### ${pkg.name} (\\`${pkg.npmName}\\`)\n${pkg.description}\n\n- Platforms: ${platforms}\n- Install: \\`${pkg.installation}\\`\n\n`;\n }\n }\n\n guide = content;\n }\n\n if (!guide) {\n throw new Error(`Resource not found: ${uri}`);\n }\n\n return {\n contents: [\n {\n uri,\n mimeType: \"text/markdown\",\n text: guide,\n },\n ],\n };\n});\n\n// Start the server\nasync function main() {\n const transport = new StdioServerTransport();\n await server.connect(transport);\n console.error(\"Idealyst MCP Server running on stdio\");\n}\n\nmain().catch((error) => {\n console.error(\"Fatal error:\", error);\n process.exit(1);\n});\n","export const frameworkGuides: Record<string, string> = {\n \"idealyst://framework/getting-started\": `# Getting Started with Idealyst\n\nIdealyst is a modern, cross-platform framework for building React and React Native applications with a powerful component library, type-safe APIs, and monorepo tooling.\n\n## Quick Start\n\n### 1. Create a New Workspace\n\n\\`\\`\\`bash\nnpx @idealyst/cli init my-app\ncd my-app\n\\`\\`\\`\n\nThis single command creates a complete monorepo workspace with all 5 packages:\n- \\`packages/web/\\` - React web app (Vite)\n- \\`packages/native/\\` - React Native mobile app\n- \\`packages/api/\\` - tRPC API server with GraphQL\n- \\`packages/database/\\` - Prisma database layer\n- \\`packages/shared/\\` - Shared utilities and tRPC client\n\nPlus:\n- Yarn 3 workspace setup\n- TypeScript configuration\n- Jest testing setup\n- Git repository\n- Dev container configuration\n\n### 2. Start Development\n\n\\`\\`\\`bash\n# Start web dev server\ncd packages/web\nyarn dev\n\n# Start native dev (in another terminal)\ncd packages/native\nyarn start\n\n# Start API server (in another terminal)\ncd packages/api\nyarn dev\n\\`\\`\\`\n\n### 3. Configure Babel (Required for Styling)\n\nAdd the Idealyst plugin to your babel.config.js:\n\n\\`\\`\\`javascript\nmodule.exports = {\n presets: ['module:@react-native/babel-preset'],\n plugins: [\n ['@idealyst/theme/plugin', {\n themePath: './src/theme/styles.ts', // Path to your theme file\n }],\n ],\n};\n\\`\\`\\`\n\n## Project Structure\n\n\\`\\`\\`\nmy-app/\n├── packages/\n│ ├── web/ # React web app (Vite)\n│ ├── native/ # React Native app\n│ ├── api/ # tRPC + GraphQL API server\n│ ├── database/ # Prisma database layer\n│ └── shared/ # Shared utilities & tRPC client\n├── package.json\n├── tsconfig.json\n└── yarn.lock\n\\`\\`\\`\n\n## Key Features\n\n- Cross-Platform Components: Use the same components for web and native\n- Type-Safe APIs: End-to-end type safety with tRPC\n- Modern Tooling: Vite, TypeScript, Jest, Prisma\n- Monorepo Structure: Share code across packages\n- Theme System: Consistent styling with react-native-unistyles\n- Style Extensions: Customize component styles at build time\n- Navigation: Unified navigation for web and native\n\n## Next Steps\n\n1. Explore the component library: \\`@idealyst/components\\`\n2. Learn the style system: \\`idealyst://framework/style-system\\`\n3. Set up your database schema in \\`packages/database\\`\n4. Define your API routes in \\`packages/api\\`\n5. Build your UI using Idealyst components\n`,\n\n \"idealyst://framework/components-overview\": `# Idealyst Components Overview\n\nIdealyst provides a comprehensive library of cross-platform React components organized into categories.\n\n## Component Categories\n\n### Layout Components\n- View: Flex container with spacing system\n- Screen: Full-screen container with safe area handling\n- Divider: Visual separator with orientation options\n\n### Form Components\n- Button: Interactive button with variants, intents, and icons\n- Input: Text input with label, validation, and helper text\n- Checkbox: Form checkbox with label support\n- Select: Dropdown selection component\n- Switch: Toggle switch component\n- RadioButton: Radio button group\n- Slider: Range slider component\n- TextArea: Multi-line text input\n\n### Display Components\n- Text: Styled text with sizes and weights\n- Card: Content container with variants\n- Badge: Status indicator\n- Chip: Compact element for tags and filters\n- Avatar: User profile image\n- Icon: MDI icon with theming\n- Skeleton: Loading placeholder\n- Alert: Notification message\n- Accordion: Collapsible content sections\n- Image: Cross-platform image component\n- SVGImage: SVG image renderer\n- Video: Video player component\n\n### Navigation Components\n- Tabs: Tab navigation\n- TabBar: Bottom tab bar\n- Breadcrumb: Breadcrumb navigation\n- Menu: Dropdown menu\n- MenuItem: Individual menu item\n- List: Vertical list with sections\n- ListItem: Individual list item\n- Link: Navigation link component\n\n### Overlay Components\n- Dialog: Modal dialog\n- Popover: Contextual overlay\n- Tooltip: Hover tooltip\n\n### Feedback Components\n- Progress: Progress indicator (linear/circular)\n- ActivityIndicator: Loading spinner\n\n### Data Components\n- Table: Data table with sorting and filtering\n- DataGrid: Advanced data grid\n- DatePicker: Date selection component\n- TimePicker: Time selection component\n- DateTimePicker: Combined date and time picker\n\n## Common Props\n\nMost components share common props:\n- \\`style\\`: Custom styles\n- \\`testID\\`: Test identifier\n- \\`disabled\\`: Disable interaction\n\n### Intent Colors\nComponents support intent-based colors:\n- \\`primary\\`: Main brand actions\n- \\`neutral\\`: Secondary actions\n- \\`success\\`: Positive actions\n- \\`error\\`: Destructive actions\n- \\`warning\\`: Caution actions\n\n### Type/Variant Props\nMany components offer visual type or variant options:\n- Button \\`type\\`: \\`contained\\`, \\`outlined\\`, \\`text\\`\n- Card \\`type\\`: \\`default\\`, \\`outlined\\`, \\`elevated\\`, \\`filled\\`\n- Chip \\`type\\`: \\`filled\\`, \\`outlined\\`, \\`soft\\`\n- Progress \\`variant\\`: \\`linear\\`, \\`circular\\`\n\n### Sizes\nMost components support size variants:\n- \\`sm\\`, \\`md\\`, \\`lg\\`\n- Sometimes 'xs' and 'xl', but varies by component\n\n## Icon Support\n\nComponents with icon support accept:\n- String icon names: Material Design Icons\n- React elements: Custom icon components\n\nExample:\n\\`\\`\\`tsx\n<Button leftIcon=\"check\">Save</Button>\n<Button leftIcon={<CustomIcon />}>Save</Button>\n<Button rightIcon=\"arrow-right\">Next</Button>\n\\`\\`\\`\n\n## Theming\n\nAll components use the Unistyles theming system:\n- Light and dark mode support\n- Customizable color palettes\n- Responsive breakpoints\n- Platform-specific styles\n\n## Import Pattern\n\n\\`\\`\\`tsx\nimport { Button, Card, Text, View } from '@idealyst/components';\n\\`\\`\\`\n`,\n\n \"idealyst://framework/theming\": `# Theming Guide\n\nIdealyst uses react-native-unistyles for cross-platform theming with full TypeScript support. Themes are created using a fluent builder pattern.\n\n## Theme Builder API\n\nCreate themes using the builder pattern:\n\n\\`\\`\\`typescript\nimport { createTheme } from '@idealyst/theme';\n\nexport const myTheme = createTheme()\n // Add semantic intents\n .addIntent('primary', {\n primary: '#3b82f6', // Main color\n contrast: '#ffffff', // Text on primary background\n light: '#bfdbfe', // Lighter variant\n dark: '#1e40af', // Darker variant\n })\n .addIntent('success', {\n primary: '#22c55e',\n contrast: '#ffffff',\n light: '#a7f3d0',\n dark: '#165e29',\n })\n .addIntent('danger', {\n primary: '#ef4444',\n contrast: '#ffffff',\n light: '#fca5a1',\n dark: '#9b2222',\n })\n\n // Add border radii\n .addRadius('none', 0)\n .addRadius('sm', 4)\n .addRadius('md', 8)\n .addRadius('lg', 12)\n\n // Add shadows (cross-platform)\n .addShadow('sm', {\n elevation: 1,\n shadowColor: '#000000',\n shadowOffset: { width: 0, height: 1 },\n shadowOpacity: 0.08,\n shadowRadius: 1,\n boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)', // web-only\n })\n\n // Set colors\n .setColors({\n pallet: { /* color palette / },\n surface: {\n screen: '#ffffff',\n primary: '#ffffff',\n secondary: '#f5f5f5',\n inverse: '#000000',\n },\n text: {\n primary: '#000000',\n secondary: '#333333',\n inverse: '#ffffff',\n },\n border: {\n primary: '#e0e0e0',\n disabled: '#f0f0f0',\n },\n })\n\n // Set component sizes (xs, sm, md, lg, xl)\n .setSizes({\n button: {\n xs: { paddingVertical: 4, paddingHorizontal: 8, minHeight: 24, fontSize: 12 },\n sm: { paddingVertical: 6, paddingHorizontal: 12, minHeight: 32, fontSize: 14 },\n md: { paddingVertical: 8, paddingHorizontal: 16, minHeight: 40, fontSize: 16 },\n lg: { paddingVertical: 10, paddingHorizontal: 20, minHeight: 48, fontSize: 18 },\n xl: { paddingVertical: 12, paddingHorizontal: 24, minHeight: 56, fontSize: 20 },\n },\n // ... other components (chip, badge, icon, input, etc.)\n })\n\n // Set interaction styles\n .setInteraction({\n focusedBackground: 'rgba(59, 130, 246, 0.08)',\n focusBorder: 'rgba(59, 130, 246, 0.3)',\n opacity: { hover: 0.9, active: 0.75, disabled: 0.5 },\n })\n\n // Set responsive breakpoints\n .setBreakpoints({\n xs: 0, // Portrait phones\n sm: 576, // Landscape phones\n md: 768, // Tablets\n lg: 992, // Desktops\n xl: 1200, // Large desktops\n })\n\n .build();\n\\`\\`\\`\n\n## Intent Structure\n\nEach intent defines four color values:\n\n\| Property \| Purpose \|\n\|------------\|-----------------------------------\|\n\| \\`primary\\` \| Main color used for backgrounds \|\n\| \\`contrast\\` \| Text color on primary background \|\n\| \\`light\\` \| Lighter tint for subtle states \|\n\| \\`dark\\` \| Darker shade for pressed states \|\n\n## Extending an Existing Theme\n\nUse \\`fromTheme()\\` to extend a base theme:\n\n\\`\\`\\`typescript\nimport { fromTheme, lightTheme } from '@idealyst/theme';\n\nexport const brandTheme = fromTheme(lightTheme)\n .addIntent('brand', {\n primary: '#6366f1',\n contrast: '#ffffff',\n light: '#818cf8',\n dark: '#4f46e5',\n })\n .build();\n\\`\\`\\`\n\n## Modifying Intents\n\n### setIntent() - Replace an existing intent\n\nUse \\`setIntent()\\` to override an intent from a base theme:\n\n\\`\\`\\`typescript\nconst customTheme = fromTheme(lightTheme)\n .setIntent('primary', {\n primary: '#6366f1', // Change brand color\n contrast: '#ffffff',\n light: '#a5b4fc',\n dark: '#4338ca',\n })\n .build();\n\\`\\`\\`\n\n## Modifying Colors\n\n### Individual Color Methods\n\nInstead of replacing all colors with \\`setColors()\\`, you can add or modify individual colors:\n\n\\`\\`\\`typescript\nconst theme = fromTheme(lightTheme)\n // Add new surface colors\n .addSurfaceColor('card', '#ffffff')\n .addSurfaceColor('modal', 'rgba(0,0,0,0.5)')\n\n // Replace existing surface colors\n .setSurfaceColor('screen', '#fafafa')\n\n // Add new text colors\n .addTextColor('muted', '#9ca3af')\n .addTextColor('link', '#3b82f6')\n\n // Replace existing text colors\n .setTextColor('primary', '#111827')\n\n // Add new border colors\n .addBorderColor('focus', '#3b82f6')\n .addBorderColor('error', '#ef4444')\n\n // Replace existing border colors\n .setBorderColor('primary', '#d1d5db')\n\n // Add new pallet colors (full shade set)\n .addPalletColor('brand', {\n 50: '#eff6ff',\n 100: '#dbeafe',\n 200: '#bfdbfe',\n 300: '#93c5fd',\n 400: '#60a5fa',\n 500: '#3b82f6',\n 600: '#2563eb',\n 700: '#1d4ed8',\n 800: '#1e40af',\n 900: '#1e3a8a',\n })\n\n // Replace existing pallet colors\n .setPalletColor('blue', { / new shades / })\n\n .build();\n\\`\\`\\`\n\n### Color Method Reference\n\n\| Method \| Purpose \| Type Change \|\n\|--------\|---------\|-------------\|\n\| \\`addSurfaceColor(name, value)\\` \| Add new surface color \| Expands type union \|\n\| \\`setSurfaceColor(name, value)\\` \| Replace existing surface color \| No type change \|\n\| \\`addTextColor(name, value)\\` \| Add new text color \| Expands type union \|\n\| \\`setTextColor(name, value)\\` \| Replace existing text color \| No type change \|\n\| \\`addBorderColor(name, value)\\` \| Add new border color \| Expands type union \|\n\| \\`setBorderColor(name, value)\\` \| Replace existing border color \| No type change \|\n\| \\`addPalletColor(name, shades)\\` \| Add new pallet with all shades \| Expands type union \|\n\| \\`setPalletColor(name, shades)\\` \| Replace existing pallet \| No type change \|\n\n## Registering Your Theme\n\nFor full TypeScript inference:\n\n\\`\\`\\`typescript\n// src/theme/styles.ts\nexport const myTheme = createTheme()\n // ... builder chain\n .build();\n\n// Register the theme type\ndeclare module '@idealyst/theme' {\n interface RegisteredTheme {\n theme: typeof myTheme;\n }\n}\n\\`\\`\\`\n\n## Using Themes with Unistyles\n\n\\`\\`\\`typescript\nimport { UnistylesRegistry } from 'react-native-unistyles';\nimport { lightTheme, darkTheme } from '@idealyst/theme';\n\nUnistylesRegistry\n .addThemes({\n light: lightTheme,\n dark: darkTheme,\n })\n .addConfig({\n initialTheme: 'light',\n });\n\\`\\`\\`\n\n## Platform-Specific Styles\n\n\\`\\`\\`typescript\nconst styles = StyleSheet.create((theme) => ({\n button: {\n padding: 16,\n\n _web: {\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n _hover: { opacity: 0.9 },\n _active: { opacity: 0.75 },\n },\n\n _native: {\n elevation: 2,\n },\n },\n}));\n\\`\\`\\`\n\n## See Also\n\n- \\`idealyst://framework/style-system\\` - Style definition APIs (defineStyle, extendStyle)\n- \\`idealyst://framework/babel-plugin\\` - Babel plugin configuration\n- \\`idealyst://framework/breakpoints\\` - Responsive breakpoint system\n`,\n\n \"idealyst://framework/cli\": `# Idealyst CLI Reference\n\nThe Idealyst CLI provides commands for creating and managing Idealyst projects.\n\n## Installation\n\n\\`\\`\\`bash\nnpm install -g @idealyst/cli\n# or\nnpx @idealyst/cli <command>\n\\`\\`\\`\n\n## Commands\n\n### init\n\nInitialize a new Idealyst workspace.\n\n\\`\\`\\`bash\nidealyst init <workspace-name> [options]\n\\`\\`\\`\n\nArguments:\n- \\`workspace-name\\`: Name for the workspace directory\n\nOptions:\n- \\`--git\\`: Initialize git repository (default: true)\n- \\`--no-git\\`: Skip git initialization\n- \\`--install\\`: Install dependencies (default: true)\n- \\`--no-install\\`: Skip dependency installation\n\nExamples:\n\\`\\`\\`bash\nidealyst init my-app\nidealyst init my-company-app --no-git\n\\`\\`\\`\n\nCreates:\n- Monorepo workspace structure\n- package.json with workspaces\n- TypeScript configuration\n- Jest setup\n- Git repository (optional)\n- Dev container configuration\n\n### create\n\nCreate a new package in the workspace.\n\n\\`\\`\\`bash\nidealyst create <name> --type <type> [options]\n\\`\\`\\`\n\nArguments:\n- \\`name\\`: Package name\n\nOptions:\n- \\`--type <type>\\`: Package type (required)\n - \\`web\\`: React web app with Vite\n - \\`mobile\\`: React Native mobile app\n - \\`api\\`: tRPC API server\n - \\`shared\\`: Shared utilities library\n- \\`--app-name <name>\\`: Display name for mobile apps (required for mobile)\n- \\`--with-trpc\\`: Include tRPC setup (web/mobile)\n- \\`--no-trpc\\`: Exclude tRPC setup (web/mobile)\n\nExamples:\n\\`\\`\\`bash\n# Web app\nidealyst create web --type web --with-trpc\n\n# Mobile app\nidealyst create mobile --type mobile --app-name \"My App\" --with-trpc\n\n# API server\nidealyst create api --type api\n\n# Shared library\nidealyst create shared --type shared\n\\`\\`\\`\n\nNote:* The database package is automatically created during workspace initialization. Use the \\`init\\` command to create a new workspace with all packages including database.\n\n## Package Types\n\n### Web Package\n- Vite + React 19\n- TypeScript\n- React Router\n- Optional tRPC client\n- @idealyst/components\n- @idealyst/theme\n\n### Mobile Package\n- React Native 0.80\n- TypeScript\n- React Navigation\n- Optional tRPC client\n- @idealyst/components\n- @idealyst/navigation\n\n### API Package\n- tRPC server\n- Express\n- TypeScript\n- CORS enabled\n- WebSocket support\n\n### Database Package\n- Prisma ORM\n- TypeScript\n- Schema definition\n- Migration support\n- Multiple database support\n\n### Shared Package\n- TypeScript library\n- Utility functions\n- Type definitions\n- Shared between packages\n\n## Workspace Commands\n\nRun these from workspace root:\n\n\\`\\`\\`bash\n# Install all dependencies\nyarn install\n\n# Run tests\nyarn test\nyarn test:watch\nyarn test:coverage\n\n# Build all packages\nyarn workspaces foreach run build\n\n# Version management\nyarn version:patch # Bump patch version\nyarn version:minor # Bump minor version\nyarn version:major # Bump major version\n\n# Publish\nyarn publish:all\n\\`\\`\\`\n\n## Package Commands\n\nRun these from package directory:\n\n\\`\\`\\`bash\n# Development\nyarn dev\n\n# Build\nyarn build\n\n# Test\nyarn test\n\n# Type check\nyarn type-check\n\n# Lint\nyarn lint\n\\`\\`\\`\n\n## Project Structure\n\n\\`\\`\\`\nworkspace/\n├── packages/\n│ ├── web/\n│ │ ├── src/\n│ │ ├── public/\n│ │ ├── package.json\n│ │ └── vite.config.ts\n│ ├── mobile/\n│ │ ├── src/\n│ │ ├── android/\n│ │ ├── ios/\n│ │ └── package.json\n│ ├── api/\n│ │ ├── src/\n│ │ ├── trpc/\n│ │ └── package.json\n│ ├── database/\n│ │ ├── prisma/\n│ │ └── package.json\n│ └── shared/\n│ ├── src/\n│ └── package.json\n├── package.json\n├── tsconfig.json\n└── jest.config.js\n\\`\\`\\`\n\n## Best Practices\n\n1. Use workspaces: Keep related packages in the same workspace\n2. Share code: Use the shared package for utilities\n3. Type safety: Enable strict TypeScript\n4. Testing: Write tests for critical functionality\n5. Versioning: Keep package versions synchronized\n6. Documentation: Add README files to packages\n7. Git: Use conventional commits\n8. Dependencies: Share dependencies across packages when possible\n`,\n\n \"idealyst://framework/spacing-system\": `# Spacing System\n\nIdealyst components use a variant-based spacing system for consistent layouts. Instead of specifying numeric values, you use Size variants (xs, sm, md, lg, xl) that map to theme-defined values.\n\n## Spacing Prop Interfaces\n\nDifferent component types receive different spacing props based on their use case:\n\n### ContainerStyleProps (Layout Containers)\nComponents: View, Card, Screen, List, Accordion, Table, TabBar\n\n\\`\\`\\`typescript\ninterface ContainerStyleProps {\n gap?: Size; // Space between children\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n margin?: Size; // Margin on all sides\n marginVertical?: Size; // Top and bottom margin\n marginHorizontal?: Size; // Left and right margin\n}\n\\`\\`\\`\n\n### TextSpacingStyleProps (Text Components)\nComponents: Text\n\n\\`\\`\\`typescript\ninterface TextSpacingStyleProps {\n gap?: Size; // Space between nested elements\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n}\n\\`\\`\\`\n\n### PressableSpacingStyleProps (Interactive Elements)\nComponents: Pressable\n\n\\`\\`\\`typescript\ninterface PressableSpacingStyleProps {\n padding?: Size; // Padding on all sides\n paddingVertical?: Size; // Top and bottom padding\n paddingHorizontal?: Size; // Left and right padding\n}\n\\`\\`\\`\n\n### FormInputStyleProps (Form Inputs)\nComponents: Input, Select, TextArea, Checkbox, RadioButton, Switch, Slider\n\n\\`\\`\\`typescript\ninterface FormInputStyleProps {\n margin?: Size; // Margin on all sides\n marginVertical?: Size; // Top and bottom margin\n marginHorizontal?: Size; // Left and right margin\n}\n\\`\\`\\`\n\n## Size Values\n\nSize variants map to theme values:\n\n\| Size \| Padding \| Spacing (Gap) \|\n\|------\|---------\|---------------\|\n\| xs \| 4px \| 4px \|\n\| sm \| 8px \| 8px \|\n\| md \| 16px \| 16px \|\n\| lg \| 24px \| 24px \|\n\| xl \| 32px \| 32px \|\n\n## Usage Examples\n\n### Container Spacing\n\n\\`\\`\\`tsx\nimport { View, Card, Text } from '@idealyst/components';\n\n// Gap between children\n<View gap=\"md\">\n <Text>Item 1</Text>\n <Text>Item 2</Text>\n</View>\n\n// Padding inside container\n<Card padding=\"lg\" gap=\"sm\">\n <Text weight=\"bold\">Card Title</Text>\n <Text>Card content</Text>\n</Card>\n\n// Directional padding\n<View paddingVertical=\"md\" paddingHorizontal=\"lg\">\n <Text>Content with different vertical/horizontal padding</Text>\n</View>\n\n// Margin for spacing between containers\n<Card margin=\"md\" padding=\"lg\">\n <Text>Card with margin</Text>\n</Card>\n\\`\\`\\`\n\n### Form Input Spacing\n\n\\`\\`\\`tsx\nimport { Input, Checkbox, View } from '@idealyst/components';\n\n// Use margin to space form fields\n<View>\n <Input placeholder=\"Email\" marginVertical=\"sm\" />\n <Input placeholder=\"Password\" marginVertical=\"sm\" />\n <Checkbox label=\"Remember me\" marginVertical=\"md\" />\n</View>\n\\`\\`\\`\n\n### Combining with Style Prop\n\nThe spacing props work alongside the style prop:\n\n\\`\\`\\`tsx\n<View\n gap=\"md\"\n padding=\"lg\"\n style={{ backgroundColor: '#f5f5f5', borderRadius: 8 }}\n>\n <Text>Content</Text>\n</View>\n\\`\\`\\`\n\n## Custom Components\n\nYou can use the exported builder functions to add spacing variants to custom components:\n\n\\`\\`\\`typescript\nimport { StyleSheet } from 'react-native-unistyles';\nimport { Theme } from '@idealyst/theme';\nimport {\n buildGapVariants,\n buildPaddingVariants,\n buildMarginVariants,\n} from '@idealyst/components';\n\nexport const customStyles = StyleSheet.create((theme: Theme) => ({\n container: {\n variants: {\n gap: buildGapVariants(theme),\n padding: buildPaddingVariants(theme),\n margin: buildMarginVariants(theme),\n },\n },\n}));\n\\`\\`\\`\n\n## Best Practices\n\n1. Use variants for consistency: Prefer Size variants over numeric values for consistent spacing across your app\n2. Gap over margins for children: Use \\`gap\\` to space children instead of margins on individual items\n3. Directional props for precision: Use paddingVertical/paddingHorizontal when you need different spacing\n4. Form spacing with margin: Use marginVertical on form inputs to create consistent form layouts\n5. Combine with theme values: The variant values come from the theme, ensuring consistency\n`,\n\n \"idealyst://framework/api-overview\": `# API Architecture Overview\n\nIdealyst provides a dual API architecture with both tRPC and GraphQL, giving you flexibility for different use cases.\n\n## When to Use Each\n\n### tRPC (Type-Safe RPC)\n- Best for: Internal clients, same-team consumption\n- Benefits: End-to-end type safety, no code generation, fast development\n- Use when: Your frontend and backend are TypeScript\n\n### GraphQL\n- Best for: Public APIs, third-party integrations, mobile apps\n- Benefits: Flexible queries, schema documentation, wide ecosystem\n- Use when: You need schema introspection or have non-TypeScript clients\n\n## Architecture\n\nBoth APIs run on the same Express server:\n\n\\`\\`\\`\nServer (port 3000)\n├── /trpc/* → tRPC handlers\n├── /graphql → GraphQL Yoga endpoint\n└── Shared context (database, auth)\n\\`\\`\\`\n\n## File Structure\n\n\\`\\`\\`\npackages/api/src/\n├── routers/ # tRPC routers\n│ ├── index.ts # Root router\n│ └── test.ts # Example router\n├── graphql/ # GraphQL setup\n│ ├── builder.ts # Pothos schema builder\n│ ├── index.ts # Yoga server setup\n│ └── types/ # GraphQL type definitions\n│ └── test.ts # Example types\n├── context.ts # Shared context\n├── server.ts # Express server\n└── index.ts # Entry point\n\\`\\`\\`\n\n## Shared Context\n\nBoth APIs share the same context:\n\n\\`\\`\\`typescript\n// context.ts\nexport interface Context {\n db: PrismaClient;\n // Add auth, session, etc.\n}\n\nexport async function createContext(): Promise<Context> {\n return {\n db: prisma,\n };\n}\n\\`\\`\\`\n\n## Client Setup\n\nThe shared package provides clients for both:\n\n\\`\\`\\`typescript\n// In your App component\nimport { createTRPCClient, createGraphQLClient } from '@your-app/shared';\n\n// tRPC - automatic type inference\nconst trpcClient = createTRPCClient({ apiUrl: 'http://localhost:3000/trpc' });\n\n// GraphQL - manual queries with graphql-request\ncreateGraphQLClient({ apiUrl: 'http://localhost:3000/graphql' });\n\\`\\`\\`\n\n## Migration Path\n\nStart with tRPC for rapid development, add GraphQL when you need:\n- Public API documentation\n- Third-party integrations\n- Schema-first development\n- Non-TypeScript clients\n`,\n\n \"idealyst://framework/graphql-setup\": `# GraphQL Setup Guide\n\nIdealyst uses Pothos (code-first schema) with GraphQL Yoga server, integrated with Prisma.\n\n## Server Setup\n\n### 1. Schema Builder (builder.ts)\n\n\\`\\`\\`typescript\nimport SchemaBuilder from '@pothos/core';\nimport PrismaPlugin from '@pothos/plugin-prisma';\nimport type PrismaTypes from './generated';\nimport { prisma } from '@your-app/database';\n\nexport const builder = new SchemaBuilder<{\n PrismaTypes: PrismaTypes;\n Context: { db: typeof prisma };\n}>({\n plugins: [PrismaPlugin],\n prisma: {\n client: prisma,\n },\n});\n\n// Initialize Query and Mutation types\nbuilder.queryType({});\nbuilder.mutationType({});\n\\`\\`\\`\n\n### 2. Generate Prisma Types\n\n\\`\\`\\`bash\n# In packages/api\nnpx prisma generate --generator pothos\n\\`\\`\\`\n\nAdd to your prisma schema:\n\n\\`\\`\\`prisma\ngenerator pothos {\n provider = \"prisma-pothos-types\"\n output = \"../src/graphql/generated.ts\"\n}\n\\`\\`\\`\n\n### 3. Define Types (types/example.ts)\n\n\\`\\`\\`typescript\nimport { builder } from '../builder';\n\n// Object type from Prisma model\nbuilder.prismaObject('Test', {\n fields: (t) => ({\n id: t.exposeID('id'),\n name: t.exposeString('name'),\n message: t.exposeString('message'),\n status: t.exposeString('status'),\n createdAt: t.expose('createdAt', { type: 'DateTime' }),\n }),\n});\n\n// Input type for mutations\nconst CreateTestInput = builder.inputType('CreateTestInput', {\n fields: (t) => ({\n name: t.string({ required: true }),\n message: t.string({ required: true }),\n status: t.string({ required: true }),\n }),\n});\n\n// Query\nbuilder.queryField('tests', (t) =>\n t.prismaField({\n type: ['Test'],\n args: {\n take: t.arg.int(),\n skip: t.arg.int(),\n },\n resolve: async (query, _root, args, ctx) =>\n ctx.db.test.findMany({\n ...query,\n take: args.take ?? 10,\n skip: args.skip ?? 0,\n orderBy: { createdAt: 'desc' },\n }),\n })\n);\n\n// Mutation\nbuilder.mutationField('createTest', (t) =>\n t.prismaField({\n type: 'Test',\n args: {\n input: t.arg({ type: CreateTestInput, required: true }),\n },\n resolve: async (query, _root, args, ctx) =>\n ctx.db.test.create({\n ...query,\n data: args.input,\n }),\n })\n);\n\\`\\`\\`\n\n### 4. Yoga Server (index.ts)\n\n\\`\\`\\`typescript\nimport { createYoga } from 'graphql-yoga';\nimport { builder } from './builder';\nimport './types/test'; // Import all type definitions\n\nexport const yoga = createYoga({\n schema: builder.toSchema(),\n graphqlEndpoint: '/graphql',\n});\n\\`\\`\\`\n\n### 5. Mount in Express (server.ts)\n\n\\`\\`\\`typescript\nimport express from 'express';\nimport { yoga } from './graphql';\n\nconst app = express();\n\n// GraphQL endpoint\napp.use('/graphql', yoga);\n\n// tRPC endpoint\napp.use('/trpc', trpcMiddleware);\n\\`\\`\\`\n\n## Client Setup\n\n### 1. GraphQL Client (shared/src/graphql/client.ts)\n\n\\`\\`\\`typescript\nimport { GraphQLClient } from 'graphql-request';\n\nlet client: GraphQLClient \| null = null;\n\nexport function createGraphQLClient(config: { apiUrl: string }) {\n client = new GraphQLClient(config.apiUrl);\n return client;\n}\n\nexport function getGraphQLClient(): GraphQLClient {\n if (!client) throw new Error('GraphQL client not initialized');\n return client;\n}\n\nexport { gql } from 'graphql-request';\n\\`\\`\\`\n\n### 2. Using with React Query\n\n\\`\\`\\`typescript\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { getGraphQLClient, gql } from '../graphql/client';\n\nconst TESTS_QUERY = gql\\`\n query GetTests($take: Int) {\n tests(take: $take) {\n id\n name\n message\n }\n }\n\\`;\n\nconst CREATE_TEST = gql\\`\n mutation CreateTest($input: CreateTestInput!) {\n createTest(input: $input) {\n id\n name\n }\n }\n\\`;\n\n// Query hook\nconst { data, isLoading } = useQuery({\n queryKey: ['graphql', 'tests'],\n queryFn: () => getGraphQLClient().request(TESTS_QUERY, { take: 10 }),\n});\n\n// Mutation hook\nconst queryClient = useQueryClient();\nconst mutation = useMutation({\n mutationFn: (input) => getGraphQLClient().request(CREATE_TEST, { input }),\n onSuccess: () => {\n queryClient.invalidateQueries({ queryKey: ['graphql', 'tests'] });\n },\n});\n\\`\\`\\`\n\n## GraphQL Playground\n\nAccess the GraphQL playground at:\n\\`\\`\\`\nhttp://localhost:3000/graphql\n\\`\\`\\`\n\nFeatures:\n- Schema explorer\n- Query autocompletion\n- Documentation browser\n- Query history\n\n## Best Practices\n\n1. Use Input Types: Always use input types for mutations\n2. Pagination: Implement cursor-based pagination for lists\n3. Error Handling: Use Pothos error types\n4. Authorization: Add auth checks in resolvers\n5. N+1 Prevention: Use Prisma's query optimization\n`,\n\n \"idealyst://framework/style-system\": `# Style Definition System\n\nIdealyst provides a powerful style definition system with build-time transformations via Babel plugin.\n\n## Overview\n\nThe style system provides:\n- defineStyle(): Define base styles for components\n- extendStyle(): Merge additional styles with base styles\n- overrideStyle(): Completely replace component styles\n- $iterator pattern: Expand styles for all theme keys\n\n## defineStyle()\n\nDefine base styles for a component:\n\n\\`\\`\\`typescript\nimport { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\n// Wrap theme for $iterator support\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\nexport const buttonStyles = defineStyle('Button', (theme: Theme) => ({\n button: {\n borderRadius: theme.radii.md,\n backgroundColor: theme.intents.primary.primary,\n\n variants: {\n size: {\n // $iterator expands to all size keys (xs, sm, md, lg, xl)\n paddingVertical: theme.sizes.$button.paddingVertical,\n paddingHorizontal: theme.sizes.$button.paddingHorizontal,\n },\n disabled: {\n true: { opacity: 0.5 },\n false: { opacity: 1 },\n },\n },\n },\n text: {\n color: theme.intents.primary.contrast,\n variants: {\n size: {\n fontSize: theme.sizes.$button.fontSize,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## Dynamic Style Functions\n\nFor styles depending on runtime props:\n\n\\`\\`\\`typescript\nexport const buttonStyles = defineStyle('Button', (theme: Theme) => ({\n button: ({ intent = 'primary', type = 'contained' }: ButtonDynamicProps) => ({\n backgroundColor: type === 'contained'\n ? theme.intents[intent].primary\n : 'transparent',\n borderColor: type === 'outlined'\n ? theme.intents[intent].primary\n : 'transparent',\n }),\n}));\n\\`\\`\\`\n\n## Using Styles in Components\n\n\\`\\`\\`typescript\nimport { buttonStyles } from './Button.styles';\n\nconst Button = ({ size = 'md', disabled = false, intent, type }) => {\n // Apply variants\n buttonStyles.useVariants({ size, disabled });\n\n // Static styles - no function call\n const staticStyle = buttonStyles.button;\n\n // Dynamic styles - function call with props\n const dynamicStyle = (buttonStyles.button as any)({ intent, type });\n\n return (\n <TouchableOpacity style={dynamicStyle}>\n <Text style={buttonStyles.text}>Click me</Text>\n </TouchableOpacity>\n );\n};\n\\`\\`\\`\n\n## extendStyle()\n\nMerge additional styles with base component styles:\n\n\\`\\`\\`typescript\n// style-extensions.ts\nimport { extendStyle } from '@idealyst/theme';\n\nextendStyle('Button', (theme) => ({\n button: {\n borderRadius: 9999, // Make all buttons pill-shaped\n },\n text: {\n fontFamily: 'CustomFont',\n },\n}));\n\\`\\`\\`\n\n## overrideStyle()\n\nCompletely replace component styles:\n\n\\`\\`\\`typescript\nimport { overrideStyle } from '@idealyst/theme';\n\noverrideStyle('Button', (theme) => ({\n button: {\n backgroundColor: theme.colors.surface.primary,\n borderWidth: 2,\n borderColor: theme.intents.primary.primary,\n },\n text: {\n color: theme.intents.primary.primary,\n },\n}));\n\\`\\`\\`\n\n## Import Order Matters\n\nExtensions must be imported before components:\n\n\\`\\`\\`typescript\n// App.tsx\nimport './style-extensions'; // FIRST - registers extensions\nimport { Button } from '@idealyst/components'; // SECOND - uses extensions\n\\`\\`\\`\n\n## When to Use Each\n\n\| API \| Use When \|\n\|-----\|----------\|\n\| \\`defineStyle()\\` \| Creating component library styles \|\n\| \\`extendStyle()\\` \| Adding/modifying specific properties \|\n\| \\`overrideStyle()\\` \| Completely custom styling \|\n\n## See Also\n\n- \\`idealyst://framework/theming\\` - Theme builder API\n- \\`idealyst://framework/babel-plugin\\` - Plugin configuration\n- \\`idealyst://framework/iterator-pattern\\` - $iterator expansion\n`,\n\n \"idealyst://framework/babel-plugin\": `# Idealyst Babel Plugin\n\nThe Idealyst Babel plugin transforms style definitions at build time.\n\n## Installation\n\nThe plugin is included with \\`@idealyst/theme\\`.\n\n## Configuration\n\n\\`\\`\\`javascript\n// babel.config.js\nmodule.exports = {\n presets: ['module:@react-native/babel-preset'],\n plugins: [\n ['@idealyst/theme/plugin', {\n // REQUIRED: Path to your theme file\n themePath: './src/theme/styles.ts',\n\n // Optional: Enable debug logging\n debug: false,\n verbose: false,\n\n // Optional: Paths to auto-process\n autoProcessPaths: [\n '@idealyst/components',\n '@idealyst/datepicker',\n 'src/',\n ],\n }],\n ],\n};\n\\`\\`\\`\n\n## What the Plugin Does\n\n### 1. Transforms defineStyle() to StyleSheet.create()\n\nInput:\n\\`\\`\\`typescript\ndefineStyle('Button', (theme) => ({\n button: { backgroundColor: theme.intents.primary.primary }\n}));\n\\`\\`\\`\n\nOutput:\n\\`\\`\\`typescript\nStyleSheet.create((theme) => ({\n button: { backgroundColor: theme.intents.primary.primary }\n}));\n\\`\\`\\`\n\n### 2. Expands $iterator Patterns\n\nInput:\n\\`\\`\\`typescript\ndefineStyle('Button', (theme) => ({\n button: {\n variants: {\n size: {\n paddingVertical: theme.sizes.$button.paddingVertical,\n },\n },\n },\n}));\n\\`\\`\\`\n\nOutput:\n\\`\\`\\`typescript\nStyleSheet.create((theme) => ({\n button: {\n variants: {\n size: {\n xs: { paddingVertical: theme.sizes.button.xs.paddingVertical },\n sm: { paddingVertical: theme.sizes.button.sm.paddingVertical },\n md: { paddingVertical: theme.sizes.button.md.paddingVertical },\n lg: { paddingVertical: theme.sizes.button.lg.paddingVertical },\n xl: { paddingVertical: theme.sizes.button.xl.paddingVertical },\n },\n },\n },\n}));\n\\`\\`\\`\n\n### 3. Merges Extensions at Build Time\n\n\\`\\`\\`typescript\n// Extension (processed first)\nextendStyle('Button', (theme) => ({\n button: { borderRadius: 9999 },\n}));\n\n// Base (merges with extension)\ndefineStyle('Button', (theme) => ({\n button: { padding: 16 },\n}));\n\n// Result: { padding: 16, borderRadius: 9999 }\n\\`\\`\\`\n\n### 4. Expands Color Iterators\n\nInput:\n\\`\\`\\`typescript\ndefineStyle('Screen', (theme) => ({\n screen: {\n variants: {\n background: {\n backgroundColor: theme.colors.$surface,\n },\n },\n },\n}));\n\\`\\`\\`\n\nOutput:\n\\`\\`\\`typescript\nStyleSheet.create((theme) => ({\n screen: {\n variants: {\n background: {\n screen: { backgroundColor: theme.colors.surface.screen },\n primary: { backgroundColor: theme.colors.surface.primary },\n secondary: { backgroundColor: theme.colors.surface.secondary },\n // ... expands to all surface color keys\n },\n },\n },\n}));\n\\`\\`\\`\n\n### 5. Removes extendStyle/overrideStyle Calls\n\nAfter capturing extension definitions, the plugin removes the calls from the output since all merging happens at build time.\n\n## Theme Analysis\n\nThe plugin statically analyzes your theme file to extract:\n- Intent names (primary, success, error, etc.)\n- Size keys (xs, sm, md, lg, xl)\n- Radius names (none, sm, md, lg)\n- Shadow names (none, sm, md, lg, xl)\n- Surface color keys (screen, primary, secondary, etc.)\n- Text color keys (primary, secondary, inverse, etc.)\n- Border color keys (primary, secondary, disabled, etc.)\n\nThis enables $iterator expansion without runtime overhead.\n\n## Troubleshooting\n\n### Styles Not Applying\n\n1. Verify \\`themePath\\` points to your theme file\n2. Clear bundler cache: \\`yarn start --reset-cache\\`\n3. Check \\`void StyleSheet;\\` marker exists in style files\n\n### Theme Changes Not Detected\n\n1. Restart Metro bundler (theme is analyzed once)\n2. Verify theme exports correctly\n\n### Debug Mode\n\nEnable verbose logging:\n\n\\`\\`\\`javascript\n['@idealyst/theme/plugin', {\n themePath: './src/theme/styles.ts',\n verbose: true,\n}],\n\\`\\`\\`\n`,\n\n \"idealyst://framework/breakpoints\": `# Responsive Breakpoints\n\nIdealyst provides a responsive breakpoint system built on Unistyles v3, enabling width-based responsive styling across web and native platforms.\n\n## Default Breakpoints\n\nThe default themes include 5 breakpoints:\n\n\| Breakpoint \| Min Width \| Target Devices \|\n\|------------\|-----------\|----------------\|\n\| \\`xs\\` \| 0px \| Portrait phones \|\n\| \\`sm\\` \| 576px \| Landscape phones \|\n\| \\`md\\` \| 768px \| Tablets \|\n\| \\`lg\\` \| 992px \| Desktops \|\n\| \\`xl\\` \| 1200px \| Large desktops \|\n\n## Defining Breakpoints\n\n### Using setBreakpoints()\n\nSet all breakpoints at once:\n\n\\`\\`\\`typescript\nimport { createTheme } from '@idealyst/theme';\n\nconst theme = createTheme()\n // ... other theme config\n .setBreakpoints({\n xs: 0, // Must have one breakpoint at 0\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n })\n .build();\n\\`\\`\\`\n\n### Using addBreakpoint()\n\nAdd breakpoints individually:\n\n\\`\\`\\`typescript\nimport { fromTheme, lightTheme } from '@idealyst/theme';\n\nconst theme = fromTheme(lightTheme)\n .addBreakpoint('xxl', 1400) // Add extra large breakpoint\n .addBreakpoint('xxxl', 1800) // Add even larger\n .build();\n\\`\\`\\`\n\n## Using Breakpoints in Styles\n\n### In StyleSheet.create()\n\nUse object notation for responsive values:\n\n\\`\\`\\`typescript\nimport { StyleSheet } from 'react-native-unistyles';\n\nconst styles = StyleSheet.create((theme) => ({\n container: {\n // Responsive padding\n padding: {\n xs: 8,\n md: 16,\n xl: 24,\n },\n\n // Responsive flex direction\n flexDirection: {\n xs: 'column',\n md: 'row',\n },\n\n // Responsive gap\n gap: {\n xs: 8,\n sm: 12,\n lg: 16,\n },\n },\n\n text: {\n fontSize: {\n xs: 14,\n md: 16,\n lg: 18,\n },\n },\n}));\n\\`\\`\\`\n\n### Cascading Behavior\n\nValues cascade up - if a breakpoint isn't defined, it uses the nearest smaller one:\n\n\\`\\`\\`typescript\npadding: {\n xs: 8, // Used for xs, sm (no sm defined)\n md: 16, // Used for md, lg (no lg defined)\n xl: 24, // Used for xl\n}\n\\`\\`\\`\n\n## Runtime Utilities\n\n### getCurrentBreakpoint()\n\nGet the current active breakpoint:\n\n\\`\\`\\`typescript\nimport { getCurrentBreakpoint } from '@idealyst/theme';\n\nconst current = getCurrentBreakpoint();\nconsole.log(current); // 'md'\n\\`\\`\\`\n\n### getBreakpoints()\n\nGet all registered breakpoints:\n\n\\`\\`\\`typescript\nimport { getBreakpoints } from '@idealyst/theme';\n\nconst breakpoints = getBreakpoints();\n// { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }\n\\`\\`\\`\n\n### isBreakpointUp() / isBreakpointDown()\n\nCheck viewport against breakpoints:\n\n\\`\\`\\`typescript\nimport { isBreakpointUp, isBreakpointDown } from '@idealyst/theme';\n\nif (isBreakpointUp('md')) {\n // Tablet or larger\n}\n\nif (isBreakpointDown('md')) {\n // Mobile only (below tablet)\n}\n\\`\\`\\`\n\n### resolveResponsive()\n\nResolve a responsive value for the current breakpoint:\n\n\\`\\`\\`typescript\nimport { resolveResponsive } from '@idealyst/theme';\n\nconst padding = resolveResponsive({ xs: 8, md: 16, xl: 24 });\n// Returns 8 on mobile, 16 on tablet, 24 on desktop\n\\`\\`\\`\n\n## Responsive Type\n\nThe \\`Responsive<T>\\` type makes any value responsive:\n\n\\`\\`\\`typescript\nimport { Responsive, Size } from '@idealyst/theme';\n\n// Can be either a direct value or breakpoint map\ntype Props = {\n size: Responsive<Size>;\n};\n\n// Both are valid:\n<Component size=\"md\" />\n<Component size={{ xs: 'sm', md: 'lg' }} />\n\\`\\`\\`\n\n### Type Guard\n\nCheck if a value is responsive:\n\n\\`\\`\\`typescript\nimport { isResponsiveValue, Responsive, Size } from '@idealyst/theme';\n\nfunction handleSize(size: Responsive<Size>) {\n if (isResponsiveValue(size)) {\n // size is Partial<Record<Breakpoint, Size>>\n console.log(size.xs, size.md);\n } else {\n // size is Size\n console.log(size);\n }\n}\n\\`\\`\\`\n\n## TypeScript Support\n\nCustom breakpoints are fully typed:\n\n\\`\\`\\`typescript\nconst theme = createTheme()\n .setBreakpoints({\n mobile: 0,\n tablet: 768,\n desktop: 1024,\n })\n .build();\n\n// Register for type inference\ndeclare module '@idealyst/theme' {\n interface CustomThemeRegistry {\n theme: typeof theme;\n }\n}\n\n// Now Breakpoint = 'mobile' \| 'tablet' \| 'desktop'\nimport { Breakpoint } from '@idealyst/theme';\n\\`\\`\\`\n\n## Unistyles Integration\n\nBreakpoints are automatically registered with Unistyles:\n\n\\`\\`\\`typescript\nimport { UnistylesRegistry } from 'react-native-unistyles';\nimport { lightTheme, darkTheme } from '@idealyst/theme';\n\nUnistylesRegistry\n .addThemes({ light: lightTheme, dark: darkTheme })\n .addBreakpoints(lightTheme.breakpoints) // Register breakpoints\n .addConfig({ initialTheme: 'light' });\n\\`\\`\\`\n\n## Cross-Platform Behavior\n\n- Web: Breakpoints convert to CSS media queries automatically\n- Native: Uses device screen width (works with tablets, phones, etc.)\n- Same API: Write once, works everywhere\n\n## Best Practices\n\n1. Mobile-first: Start with \\`xs\\` and add larger breakpoints as needed\n2. Use cascading: Don't define every breakpoint - let values cascade\n3. Consistent breakpoints: Use the same breakpoints across themes\n4. Test on devices: Verify layouts on actual device widths\n5. Avoid over-responsiveness: Not everything needs to change per breakpoint\n`,\n\n \"idealyst://framework/iterator-pattern\": `# The $iterator Pattern\n\nThe \\`$iterator\\` pattern allows defining styles once that expand to all keys of a theme object.\n\n## ThemeStyleWrapper\n\nWrap your theme type to enable $iterator properties:\n\n\\`\\`\\`typescript\nimport { ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\\`\\`\\`\n\nThis adds \\`$property\\` versions of iterable theme properties:\n\n\| Original Path \| $iterator Path \|\n\|----------------------------\|-----------------------------\|\n\| \\`theme.intents.primary\\` \| \\`theme.$intents.primary\\` \|\n\| \\`theme.sizes.button.md\\` \| \\`theme.sizes.$button.md\\` \|\n\| \\`theme.colors.surface.screen\\` \| \\`theme.colors.$surface\\` \|\n\| \\`theme.colors.text.primary\\` \| \\`theme.colors.$text\\` \|\n\| \\`theme.colors.border.primary\\` \| \\`theme.colors.$border\\` \|\n\n## Usage Examples\n\n### Expand Intents\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n intent: {\n backgroundColor: theme.$intents.light,\n borderColor: theme.$intents.primary,\n },\n}\n\n// Expands to all intent keys (primary, success, danger, warning, etc.)\n// Result:\n// intent: {\n// primary: { backgroundColor: theme.intents.primary.light, borderColor: theme.intents.primary.primary },\n// success: { backgroundColor: theme.intents.success.light, borderColor: theme.intents.success.primary },\n// danger: { ... },\n// ...\n// }\n\\`\\`\\`\n\n### Expand Sizes\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n size: {\n paddingVertical: theme.sizes.$button.paddingVertical,\n fontSize: theme.sizes.$button.fontSize,\n },\n}\n\n// Expands to all size keys (xs, sm, md, lg, xl)\n// Result:\n// size: {\n// xs: { paddingVertical: theme.sizes.button.xs.paddingVertical, fontSize: theme.sizes.button.xs.fontSize },\n// sm: { paddingVertical: theme.sizes.button.sm.paddingVertical, fontSize: theme.sizes.button.sm.fontSize },\n// md: { ... },\n// ...\n// }\n\\`\\`\\`\n\n### Expand Surface Colors\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n background: {\n backgroundColor: theme.colors.$surface,\n },\n}\n\n// Expands to all surface color keys (screen, primary, secondary, tertiary, inverse, etc.)\n// Result:\n// background: {\n// screen: { backgroundColor: theme.colors.surface.screen },\n// primary: { backgroundColor: theme.colors.surface.primary },\n// secondary: { backgroundColor: theme.colors.surface.secondary },\n// tertiary: { backgroundColor: theme.colors.surface.tertiary },\n// inverse: { backgroundColor: theme.colors.surface.inverse },\n// ...\n// }\n\\`\\`\\`\n\n### Expand Text Colors\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n color: {\n color: theme.colors.$text,\n },\n}\n\n// Expands to all text color keys (primary, secondary, tertiary, inverse, etc.)\n// Result:\n// color: {\n// primary: { color: theme.colors.text.primary },\n// secondary: { color: theme.colors.text.secondary },\n// tertiary: { color: theme.colors.text.tertiary },\n// inverse: { color: theme.colors.text.inverse },\n// ...\n// }\n\\`\\`\\`\n\n### Expand Border Colors\n\n\\`\\`\\`typescript\n// Single definition\nvariants: {\n borderColor: {\n borderColor: theme.colors.$border,\n },\n}\n\n// Expands to all border color keys (primary, secondary, tertiary, disabled)\n// Result:\n// borderColor: {\n// primary: { borderColor: theme.colors.border.primary },\n// secondary: { borderColor: theme.colors.border.secondary },\n// tertiary: { borderColor: theme.colors.border.tertiary },\n// disabled: { borderColor: theme.colors.border.disabled },\n// }\n\\`\\`\\`\n\n## Complete Example\n\n\\`\\`\\`typescript\nimport { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';\nimport type { Theme as BaseTheme } from '@idealyst/theme';\n\ntype Theme = ThemeStyleWrapper<BaseTheme>;\n\nexport const chipStyles = defineStyle('Chip', (theme: Theme) => ({\n chip: {\n borderRadius: 999,\n\n variants: {\n // Expand for all sizes\n size: {\n paddingVertical: theme.sizes.$chip.paddingVertical,\n paddingHorizontal: theme.sizes.$chip.paddingHorizontal,\n minHeight: theme.sizes.$chip.minHeight,\n },\n\n // Expand for all intents\n intent: {\n backgroundColor: theme.$intents.light,\n borderColor: theme.$intents.primary,\n },\n },\n },\n\n text: {\n variants: {\n size: {\n fontSize: theme.sizes.$chip.fontSize,\n lineHeight: theme.sizes.$chip.lineHeight,\n },\n\n intent: {\n color: theme.$intents.dark,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## createIteratorStyles()\n\nAlternative to defineStyle for custom components:\n\n\\`\\`\\`typescript\nimport { createIteratorStyles } from '@idealyst/theme';\n\nexport const styles = createIteratorStyles((theme) => ({\n box: {\n variants: {\n intent: {\n backgroundColor: theme.$intents.light,\n },\n },\n },\n}));\n\\`\\`\\`\n\n## Supported Iterators\n\n\| Iterator \| Pattern \| Expands To \|\n\|----------\|---------\|------------\|\n\| Intents \| \\`theme.$intents.X\\` \| All intent keys (primary, success, danger, etc.) \|\n\| Sizes \| \\`theme.sizes.$component.X\\` \| All size keys (xs, sm, md, lg, xl) \|\n\| Surface Colors \| \\`theme.colors.$surface\\` \| All surface color keys \|\n\| Text Colors \| \\`theme.colors.$text\\` \| All text color keys \|\n\| Border Colors \| \\`theme.colors.$border\\` \| All border color keys \|\n\n## Benefits\n\n1. DRY Code: Define once, expand to many\n2. Type Safety: TypeScript validates iterator properties\n3. Maintainable: Adding new sizes/intents/colors to theme auto-expands\n4. Zero Runtime Cost: Expansion happens at build time\n`,\n};\n","export const navigationGuides: Record<string, string> = {\n \"idealyst://navigation/overview\": `# Navigation System Overview\n\nThe Idealyst navigation system provides a unified API for both React Native and web applications, handling routing seamlessly across platforms.\n\n## Core Concepts\n\n### Cross-Platform Routing\n- Mobile (React Native): Uses React Navigation for native navigation patterns\n- Web: Uses React Router for browser-based routing\n- Unified API: Same code works on both platforms\n\n### Route Types\n\nThere are two fundamental route types:\n\n#### 1. Screen Routes\nRenders a component directly to the screen:\n\\`\\`\\`tsx\n{\n path: \"profile\",\n type: 'screen',\n component: ProfileScreen\n}\n\\`\\`\\`\n\n#### 2. Navigator Routes\nWraps child routes with navigation structure:\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'stack', // or 'tab', 'drawer', 'modal'\n routes: [\n { path: \"home\", type: 'screen', component: HomeScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n## Setup\n\n### Basic Setup\n\n\\`\\`\\`tsx\nimport { NavigatorProvider } from '@idealyst/navigation';\n\nfunction App() {\n return (\n <NavigatorProvider route={appRouter}>\n {/* Content managed by router /}\n </NavigatorProvider>\n );\n}\n\\`\\`\\`\n\n### Quick Start with Examples\n\nUse the pre-built example router for instant working navigation:\n\n\\`\\`\\`tsx\nimport { ExampleNavigationRouter } from '@idealyst/navigation/examples';\n\n<NavigatorProvider route={ExampleNavigationRouter} />\n\\`\\`\\`\n\nThe example router demonstrates:\n- Stack-based navigation structure\n- Custom web layouts with header and sidebar\n- Tab navigation for nested sections\n\n## Platform Differences\n\n### Mobile (React Native)\n- Stack navigator: Native stack navigation with animations\n- Tab navigator: Bottom tab bar\n- Drawer navigator: Side drawer with gestures\n- Modal navigator: Full-screen modal presentation\n\n### Web\n- Stack navigator: Browser history-based routing\n- Tab navigator: Top or side tab navigation\n- All navigators: Use URL paths for routing\n- Custom layouts: Can add headers, sidebars, footers\n\n## Key Features\n\n1. Type-Safe Navigation: Full TypeScript support\n2. Path Parameters: \\`/user/:id\\` support\n3. Nested Routes: Unlimited nesting depth\n4. Custom Layouts: Web-specific layout components\n5. Theme Integration: Works with @idealyst/theme\n6. Cross-Platform: Write once, run everywhere\n`,\n\n \"idealyst://navigation/route-configuration\": `# Route Configuration\n\nLearn how to define and structure routes in your Idealyst application.\n\n## Route Definition\n\n### Screen Route\n\nThe simplest route type - renders a component:\n\n\\`\\`\\`tsx\nimport { RouteParam } from '@idealyst/navigation';\n\nconst route: RouteParam = {\n path: \"profile\",\n type: 'screen',\n component: ProfileScreen,\n options: {\n title: \"User Profile\",\n headerShown: true\n }\n};\n\\`\\`\\`\n\n### Navigator Route\n\nA route that contains child routes:\n\n\\`\\`\\`tsx\nconst route: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n { path: \"home\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ],\n options: {\n headerShown: false\n }\n};\n\\`\\`\\`\n\n## Path Configuration\n\n### Basic Paths\n\n\\`\\`\\`tsx\n{ path: \"home\", ... } // Relative: /parent/home\n{ path: \"/home\", ... } // Absolute: /home\n{ path: \"\", ... } // Index route\n\\`\\`\\`\n\n### Path Parameters\n\n\\`\\`\\`tsx\n{\n path: \"user/:id\",\n type: 'screen',\n component: UserScreen\n}\n\n// Navigate with:\nnavigator.navigate({\n path: \"/user/:id\",\n vars: { id: \"123\" }\n});\n\n// Access in component:\nimport { useParams } from '@idealyst/navigation';\n\nconst params = useParams();\nconst userId = params.id;\n\\`\\`\\`\n\n### Optional Parameters\n\n\\`\\`\\`tsx\n{ path: \"search/:query?\" } // query is optional\n\\`\\`\\`\n\n## Screen Options\n\n### Common Options\n\n\\`\\`\\`tsx\ntype ScreenOptions = {\n title?: string; // Screen title\n headerShown?: boolean; // Show/hide header (mobile)\n};\n\\`\\`\\`\n\n### Tab-Specific Options\n\nFor tab navigators:\n\n\\`\\`\\`tsx\ntype TabBarScreenOptions = {\n tabBarIcon?: (props: {\n focused: boolean;\n color: string;\n size: string \| number\n }) => React.ReactElement;\n\n tabBarLabel?: string; // Tab label\n tabBarBadge?: string \| number; // Badge count\n tabBarVisible?: boolean; // Show/hide tab\n} & ScreenOptions;\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\n{\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ focused, color }) => (\n <Icon name=\"home\" color={color} />\n ),\n tabBarBadge: 5\n }\n}\n\\`\\`\\`\n\n## Navigator Options\n\nOptions for navigator routes:\n\n\\`\\`\\`tsx\ntype NavigatorOptions = {\n headerTitle?: React.ComponentType \| React.ReactElement \| string;\n headerLeft?: React.ComponentType \| React.ReactElement;\n headerBackVisible?: boolean;\n headerRight?: React.ComponentType \| React.ReactElement;\n headerShown?: boolean;\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\n{\n path: \"/app\",\n type: 'navigator',\n layout: 'stack',\n routes: [...],\n options: {\n headerTitle: \"My App\",\n headerShown: true,\n headerRight: <UserMenu />\n }\n}\n\\`\\`\\`\n\n## Invalid Route Handling\n\nNavigators can specify how to handle invalid routes:\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\n\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => (\n <View>\n <Text>Page not found: {path}</Text>\n </View>\n);\n\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n // Component to show when route is invalid\n notFoundComponent: NotFoundPage,\n // Handler to redirect or show 404\n onInvalidRoute: (path) => {\n if (path.startsWith('/old-')) {\n return { path: '/new-section', replace: true };\n }\n return undefined; // Show notFoundComponent\n },\n routes: [...]\n};\n\\`\\`\\`\n\nSee the Invalid Route Handling* guide for complete documentation.\n\n## Nested Routes\n\nCreate hierarchical navigation:\n\n\\`\\`\\`tsx\nconst appRouter: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n {\n path: \"dashboard\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n { path: \"overview\", type: 'screen', component: OverviewScreen },\n { path: \"analytics\", type: 'screen', component: AnalyticsScreen },\n { path: \"reports\", type: 'screen', component: ReportsScreen },\n ]\n },\n {\n path: \"settings\",\n type: 'screen',\n component: SettingsScreen\n },\n ]\n};\n\\`\\`\\`\n\n## Full Path Resolution\n\nFull paths are automatically computed:\n- \\`/dashboard/overview\\`\n- \\`/dashboard/analytics\\`\n- \\`/dashboard/reports\\`\n- \\`/settings\\`\n\n## Best Practices\n\n1. Use relative paths for child routes\n2. Keep nesting shallow (3 levels max recommended)\n3. Group related screens in navigators\n4. Use meaningful paths that reflect content\n5. Define index routes with empty path\n6. Set appropriate options for each screen type\n`,\n\n \"idealyst://navigation/navigator-types\": `# Navigator Types\n\nIdealyst supports four navigator types: stack, tab, drawer, and modal. Each provides different navigation patterns.\n\n## Stack Navigator\n\nLinear, hierarchical navigation - the most common pattern.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/app\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Native stack navigation with slide animations\n- Hardware back button support\n- Swipe-to-go-back gesture\n\nWeb:\n- Browser history integration\n- URL updates on navigation\n- Back/forward browser buttons work\n\n### Use Cases\n- Main app navigation\n- Detail views\n- Settings flows\n- Onboarding sequences\n\n## Tab Navigator\n\nSection-based navigation with a tab bar.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n {\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ color }) => <Icon name=\"home\" color={color} />\n }\n },\n {\n path: \"search\",\n type: 'screen',\n component: SearchScreen,\n options: {\n tabBarLabel: \"Search\",\n tabBarIcon: ({ color }) => <Icon name=\"search\" color={color} />\n }\n },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Bottom tab bar\n- Tab icons and labels\n- Badge support\n- Active tab highlighting\n\nWeb:\n- Top or side tabs\n- Can use custom layout component\n- URL-based tab switching\n\n### Use Cases\n- Main app sections\n- Content categories\n- Dashboard views\n- Multi-section interfaces\n\n## Drawer Navigator\n\nSide menu navigation, primarily for desktop/tablet.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'drawer',\n routes: [\n { path: \"dashboard\", type: 'screen', component: DashboardScreen },\n { path: \"users\", type: 'screen', component: UsersScreen },\n { path: \"settings\", type: 'screen', component: SettingsScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Slide-out drawer\n- Swipe gesture to open\n- Overlay when open\n\nWeb:\n- Sidebar navigation\n- Can be persistent or overlay\n- Responsive behavior\n\n### Use Cases\n- Admin panels\n- Desktop applications\n- Content management systems\n- Multi-section apps\n\n## Modal Navigator\n\nOverlay navigation for temporary screens.\n\n### Configuration\n\n\\`\\`\\`tsx\n{\n path: \"/modals\",\n type: 'navigator',\n layout: 'modal',\n routes: [\n { path: \"new-post\", type: 'screen', component: NewPostScreen },\n { path: \"edit-profile\", type: 'screen', component: EditProfileScreen },\n ]\n}\n\\`\\`\\`\n\n### Platform Behavior\n\nMobile:\n- Full-screen modal presentation\n- Slide-up animation\n- Close gesture support\n\nWeb:\n- Overlay modal\n- Background dimming\n- Click-outside to close\n\n### Use Cases\n- Forms and data entry\n- Action confirmations\n- Image viewers\n- Temporary content\n\n## Combining Navigator Types\n\nNavigators can be nested for complex flows:\n\n\\`\\`\\`tsx\nconst appRouter: RouteParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n routes: [\n {\n path: \"main\",\n type: 'navigator',\n layout: 'tab',\n routes: [\n { path: \"feed\", type: 'screen', component: FeedScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n ]\n },\n {\n path: \"modals\",\n type: 'navigator',\n layout: 'modal',\n routes: [\n { path: \"create\", type: 'screen', component: CreateScreen },\n ]\n }\n ]\n};\n\\`\\`\\`\n\n## Choosing the Right Navigator\n\n\| Navigator \| Mobile \| Desktop \| Use Case \|\n\|-----------\|--------\|---------\|----------\|\n\| Stack \| ✅ Primary \| ✅ Primary \| Hierarchical navigation \|\n\| Tab \| ✅ Primary \| ✅ Secondary \| Section-based navigation \|\n\| Drawer \| ⚠️ Secondary \| ✅ Primary \| Menu-based navigation \|\n\| Modal \| ✅ Common \| ✅ Common \| Temporary overlays \|\n\n## Best Practices\n\n1. Use stack for most flows - It's the most universal pattern\n2. Limit tab count - 3-5 tabs maximum for mobile\n3. Reserve drawers for complex apps - Best on desktop\n4. Use modals sparingly - For focused, temporary tasks\n5. Consider platform - What works on mobile may not work on web\n6. Test navigation flow - Ensure intuitive user experience\n`,\n\n \"idealyst://navigation/custom-layouts\": `# Custom Layouts (Web Only)\n\nOn web, navigators can use custom layout components to add headers, sidebars, and other UI around route content.\n\n## GeneralLayout Component\n\nThe built-in \\`GeneralLayout\\` provides header and sidebar functionality:\n\n### Basic Usage\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\n\n<GeneralLayout\n header={{\n enabled: true,\n content: <Text>My App</Text>,\n }}\n sidebar={{\n enabled: true,\n content: <NavigationMenu />,\n }}\n>\n {children}\n</GeneralLayout>\n\\`\\`\\`\n\n### Header Configuration\n\n\\`\\`\\`tsx\ntype HeaderConfig = {\n enabled: boolean; // Show/hide header\n height?: number; // Header height (default: 64)\n content?: React.ReactNode; // Header content\n style?: ViewStyle; // Custom styles\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\nheader={{\n enabled: true,\n height: 80,\n content: (\n <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 16 }}>\n <Text size=\"lg\" weight=\"bold\">Dashboard</Text>\n <UserMenu />\n </View>\n )\n}}\n\\`\\`\\`\n\n### Sidebar Configuration\n\n\\`\\`\\`tsx\ntype SidebarConfig = {\n enabled: boolean; // Show/hide sidebar\n collapsible?: boolean; // Allow collapse/expand\n position?: 'left' \| 'right'; // Sidebar position\n initiallyExpanded?: boolean; // Initial state\n expandedWidth?: number; // Width when expanded (default: 240)\n collapsedWidth?: number; // Width when collapsed (default: 64)\n content?: React.ReactNode; // Sidebar content\n style?: ViewStyle; // Custom styles\n};\n\\`\\`\\`\n\nExample:\n\\`\\`\\`tsx\nsidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n initiallyExpanded: true,\n expandedWidth: 280,\n collapsedWidth: 72,\n content: <NavigationSidebar />\n}}\n\\`\\`\\`\n\n## Using Layouts with Navigators\n\n### Stack Navigator with Layout\n\n\\`\\`\\`tsx\nimport { CustomStackLayout } from './layouts/CustomStackLayout';\n\nconst router: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: CustomStackLayout, // Web only!\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n### Tab Navigator with Layout\n\n\\`\\`\\`tsx\nimport { CustomTabLayout } from './layouts/CustomTabLayout';\n\nconst router: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'tab',\n layoutComponent: CustomTabLayout, // Web only!\n routes: [\n { path: \"feed\", type: 'screen', component: FeedScreen },\n { path: \"profile\", type: 'screen', component: ProfileScreen },\n ]\n};\n\\`\\`\\`\n\n## Creating Custom Layouts\n\n### Stack Layout Component\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport const CustomStackLayout: React.FC<StackLayoutProps> = ({\n children,\n options,\n routes,\n currentPath\n}) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n content: (\n <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n <Text>{options?.headerTitle \|\| 'My App'}</Text>\n {options?.headerRight}\n </View>\n )\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n content: (\n <NavigationMenu routes={routes} currentPath={currentPath} />\n )\n }}\n >\n {children}\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n### Tab Layout Component\n\n\\`\\`\\`tsx\nimport type { TabLayoutProps } from '@idealyst/navigation';\n\nexport const CustomTabLayout: React.FC<TabLayoutProps> = ({\n children,\n routes,\n currentPath\n}) => {\n const navigator = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/* Custom tab bar /}\n <View style={{ flexDirection: 'row', borderBottom: '1px solid #ccc' }}>\n {routes.map(route => (\n <Pressable\n key={route.path}\n onPress={() => navigator.navigate({ path: route.fullPath, vars: {} })}\n style={{\n padding: 16,\n borderBottom: currentPath === route.fullPath ? '2px solid blue' : 'none'\n }}\n >\n <Text>{route.options?.tabBarLabel \|\| route.path}</Text>\n </Pressable>\n ))}\n </View>\n\n {/ Content /}\n <View style={{ flex: 1 }}>\n {children}\n </View>\n </View>\n );\n};\n\\`\\`\\`\n\n## Layout Props Reference\n\n### StackLayoutProps\n\n\\`\\`\\`tsx\ntype StackLayoutProps = {\n options?: NavigatorOptions; // Navigator options\n routes: RouteWithFullPath[]; // All routes with full paths\n currentPath: string; // Current active path\n children?: React.ReactNode; // Route content\n};\n\\`\\`\\`\n\n### TabLayoutProps\n\n\\`\\`\\`tsx\ntype TabLayoutProps = {\n options?: NavigatorOptions; // Navigator options\n routes: RouteWithFullPath<TabBarScreenOptions>[]; // Tab routes\n currentPath: string; // Current active path\n children?: React.ReactNode; // Route content\n};\n\\`\\`\\`\n\n## Real-World Examples\n\n### Dashboard Layout\n\n\\`\\`\\`tsx\nexport const DashboardLayout: React.FC<StackLayoutProps> = ({\n children,\n routes,\n currentPath\n}) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n height: 72,\n content: (\n <View style={{\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: 16\n }}>\n <Text size=\"xl\" weight=\"bold\">Dashboard</Text>\n <View style={{ flexDirection: 'row', gap: 16 }}>\n <NotificationBell />\n <UserAvatar />\n </View>\n </View>\n )\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n expandedWidth: 260,\n content: <DashboardSidebar routes={routes} currentPath={currentPath} />\n }}\n >\n {children}\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n### Admin Panel Layout\n\n\\`\\`\\`tsx\nexport const AdminLayout: React.FC<StackLayoutProps> = ({ children }) => {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n content: <AdminHeader />,\n style: { backgroundColor: '#1a1a1a', color: '#fff' }\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n position: 'left',\n initiallyExpanded: true,\n content: <AdminNavigationMenu />,\n style: { backgroundColor: '#2a2a2a' }\n }}\n >\n <View style={{ padding: 24 }}>\n {children}\n </View>\n </GeneralLayout>\n );\n};\n\\`\\`\\`\n\n## Best Practices\n\n1. Use GeneralLayout as base* - Don't reinvent header/sidebar logic\n2. Keep layouts simple - Complex logic belongs in screens\n3. Make responsive - Consider different screen sizes\n4. Theme-aware - Use theme colors and spacing\n5. Accessible - Ensure keyboard and screen reader support\n6. Performance - Memoize layout components when possible\n7. Consistent - Use same layout for similar sections\n\n## Platform Considerations\n\n- Web only: Layout components only apply to web\n- Mobile: Uses native navigation components\n- Conditional rendering: Check platform if needed\n- Testing: Test both platforms separately\n`,\n\n \"idealyst://navigation/use-navigator\": `# useNavigator Hook\n\nThe \\`useNavigator\\` hook provides navigation functionality and route information within your components.\n\n## Basic Usage\n\n\\`\\`\\`tsx\nimport { useNavigator } from '@idealyst/navigation';\n\nfunction MyComponent() {\n const navigator = useNavigator();\n\n return (\n <Button onPress={() => navigator.navigate({ path: '/profile', vars: {} })}>\n Go to Profile\n </Button>\n );\n}\n\\`\\`\\`\n\n## API Reference\n\n### navigator.navigate()\n\nNavigate to a route:\n\n\\`\\`\\`tsx\nnavigator.navigate({\n path: string;\n vars?: Record<string, string>;\n replace?: boolean; // Replace history entry instead of push\n});\n\\`\\`\\`\n\nExamples:\n\\`\\`\\`tsx\n// Simple navigation\nnavigator.navigate({ path: '/home' });\n\n// With path parameters\nnavigator.navigate({\n path: '/user/:id',\n vars: { id: '123' }\n});\n\n// With query parameters\nnavigator.navigate({\n path: '/search',\n vars: { q: 'react', category: 'tutorial' }\n});\n\n// Replace current history entry (no back navigation to current page)\nnavigator.navigate({\n path: '/dashboard',\n replace: true\n});\n\\`\\`\\`\n\n### Replace vs Push Navigation\n\nBy default, navigation pushes a new entry onto the history stack. Use \\`replace: true\\` when you want to replace the current entry instead:\n\n\\`\\`\\`tsx\n// After login, replace login page in history\nnavigator.navigate({ path: '/dashboard', replace: true });\n\n// Redirect without adding to history\nnavigator.navigate({ path: '/new-location', replace: true });\n\\`\\`\\`\n\nUse cases for replace:\n- Post-login redirects (user shouldn't go back to login)\n- After form submission redirects\n- URL canonicalization/normalization\n- Redirect from deprecated routes\n\n## useParams Hook\n\nAccess current route path parameters:\n\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\nfunction UserScreen() {\n const params = useParams();\n const userId = params.id; // Path param from /user/:id\n\n return <Text>User ID: {userId}</Text>;\n}\n\\`\\`\\`\n\n## useNavigationState Hook\n\nAccess navigation state passed via the \\`state\\` property:\n\n\\`\\`\\`tsx\nimport { useNavigationState } from '@idealyst/navigation';\n\n// When navigating:\nnavigator.navigate({\n path: '/recording',\n state: { autostart: true, source: 'home' }\n});\n\n// In destination screen:\nfunction RecordingScreen() {\n const { autostart, source } = useNavigationState<{\n autostart?: boolean;\n source?: string;\n }>();\n\n // autostart = true, source = 'home'\n}\n\\`\\`\\`\n\n### Consuming State (Web)\n\nRemove state from URL after reading:\n\n\\`\\`\\`tsx\n// URL: /recording?autostart=true\nconst { autostart } = useNavigationState<{ autostart?: boolean }>({\n consume: ['autostart']\n});\n// autostart = true, URL becomes: /recording (param removed)\n\\`\\`\\`\n\n## useLocation (React Router)\n\nGet the current route path on web:\n\n\\`\\`\\`tsx\nimport { useLocation } from '@idealyst/navigation';\n\nfunction MyComponent() {\n const location = useLocation();\n console.log(location.pathname); // \"/user/123\"\n}\n\\`\\`\\`\n\n### navigator.canGoBack()\n\nCheck if back navigation is available:\n\n\\`\\`\\`tsx\nconst navigator = useNavigator();\n\nif (navigator.canGoBack()) {\n // Show back button\n}\n\\`\\`\\`\n\nPlatform behavior:\n- Web: Returns \\`true\\` if there's a valid parent route in the route hierarchy (e.g., \\`/users/123\\` can go back to \\`/users\\`)\n- Native: Uses React Navigation's \\`canGoBack()\\` to check navigation stack\n\n### navigator.goBack()\n\nNavigate back in the route hierarchy:\n\n\\`\\`\\`tsx\n<Button onPress={() => navigator.goBack()}>\n Go Back\n</Button>\n\\`\\`\\`\n\nPlatform behavior:\n- Web: Navigates to the parent route (e.g., \\`/users/123/edit\\` → \\`/users/123\\` → \\`/users\\` → \\`/\\`). Does NOT use browser history - navigates up the route tree.\n- Native: Uses React Navigation's \\`goBack()\\` to pop the navigation stack\n\nImportant: On web, this is NOT browser history back. It navigates to the parent path in the route hierarchy. Use this for \"up\" navigation within your app structure.\n\n## Path Parameters\n\n### Defining Parameters\n\nIn route configuration:\n\\`\\`\\`tsx\n{\n path: \"user/:id\",\n type: 'screen',\n component: UserScreen\n}\n\\`\\`\\`\n\n### Accessing Parameters\n\nIn the screen component:\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\nfunction UserScreen() {\n const params = useParams();\n const userId = params.id;\n\n return <Text>User ID: {userId}</Text>;\n}\n\\`\\`\\`\n\n### Multiple Parameters\n\n\\`\\`\\`tsx\nimport { useParams } from '@idealyst/navigation';\n\n// Route: \"post/:postId/comment/:commentId\"\n\n// Navigate:\nnavigator.navigate({\n path: '/post/:postId/comment/:commentId',\n vars: { postId: '42', commentId: '7' }\n});\n\n// Access:\nconst params = useParams();\nconst postId = params.postId;\nconst commentId = params.commentId;\n\\`\\`\\`\n\n## Query Parameters\n\n### Passing Query Params\n\n\\`\\`\\`tsx\nnavigator.navigate({\n path: '/search',\n vars: {\n q: 'typescript',\n category: 'tutorial',\n sort: 'recent'\n }\n});\n\n// Results in: /search?q=typescript&category=tutorial&sort=recent\n\\`\\`\\`\n\n### Reading Query Params\n\n\\`\\`\\`tsx\nimport { useNavigationState } from '@idealyst/navigation';\n\nfunction SearchScreen() {\n // Query params are accessed via useNavigationState on web\n const { q, category, sort } = useNavigationState<{\n q?: string;\n category?: string;\n sort?: string;\n }>();\n\n // Use params...\n}\n\\`\\`\\`\n\n## Navigation Patterns\n\n### Programmatic Navigation\n\nNavigate based on conditions:\n\n\\`\\`\\`tsx\nfunction LoginScreen() {\n const navigator = useNavigator();\n\n const handleLogin = async () => {\n const success = await login(credentials);\n\n if (success) {\n navigator.navigate({ path: '/dashboard', vars: {} });\n }\n };\n\n return <Button onPress={handleLogin}>Login</Button>;\n}\n\\`\\`\\`\n\n### Navigation with Data\n\nPass data through navigation:\n\n\\`\\`\\`tsx\n// List screen\n<Button onPress={() => {\n navigator.navigate({\n path: '/product/:id',\n vars: { id: product.id }\n });\n}}>\n View Product\n</Button>\n\n// Detail screen\nfunction ProductScreen() {\n const params = useParams();\n const productId = params.id;\n\n const product = useProduct(productId);\n // Render product...\n}\n\\`\\`\\`\n\n### Conditional Navigation\n\nNavigate based on user state:\n\n\\`\\`\\`tsx\nfunction ProtectedScreen() {\n const navigator = useNavigator();\n const { user } = useAuth();\n\n useEffect(() => {\n if (!user) {\n navigator.navigate({ path: '/login', vars: {} });\n }\n }, [user]);\n\n return user ? <Content /> : null;\n}\n\\`\\`\\`\n\n## Advanced Usage\n\n### Navigation Guards\n\n\\`\\`\\`tsx\nimport { useNavigator, useLocation } from '@idealyst/navigation';\n\nfunction useAuthGuard() {\n const { navigate } = useNavigator();\n const location = useLocation();\n const { isAuthenticated } = useAuth();\n\n useEffect(() => {\n if (!isAuthenticated && location.pathname !== '/login') {\n navigate({ path: '/login' });\n }\n }, [isAuthenticated, location.pathname]);\n}\n\nfunction App() {\n useAuthGuard();\n return <AppContent />;\n}\n\\`\\`\\`\n\n### Deep Linking\n\nHandle deep links:\n\n\\`\\`\\`tsx\nuseEffect(() => {\n const handleDeepLink = (url: string) => {\n // Parse URL and navigate\n const path = parseDeepLink(url);\n navigator.navigate({ path, vars: {} });\n };\n\n // Add deep link listener\n const subscription = Linking.addEventListener('url', ({ url }) => {\n handleDeepLink(url);\n });\n\n return () => subscription.remove();\n}, []);\n\\`\\`\\`\n\n### Navigation History\n\nTrack navigation history:\n\n\\`\\`\\`tsx\nimport { useLocation } from '@idealyst/navigation';\n\nfunction useNavigationHistory() {\n const location = useLocation();\n const [history, setHistory] = useState<string[]>([]);\n\n useEffect(() => {\n setHistory(prev => [...prev, location.pathname]);\n }, [location.pathname]);\n\n return history;\n}\n\\`\\`\\`\n\n## TypeScript Support\n\nType-safe navigation:\n\n\\`\\`\\`tsx\ntype NavigateParams = {\n path: string;\n vars: Record<string, string>;\n};\n\n// Strongly typed vars\ntype UserRouteVars = {\n id: string;\n tab?: 'posts' \| 'comments' \| 'likes';\n};\n\n// Usage\nnavigator.navigate({\n path: '/user/:id',\n vars: { id: '123', tab: 'posts' } as UserRouteVars\n});\n\\`\\`\\`\n\n## Platform Differences\n\n### React Native\n- \\`canGoBack()\\` checks React Navigation stack\n- \\`goBack()\\` uses native navigation stack\n- Hardware back button supported\n- Gesture-based navigation\n\n### Web\n- \\`canGoBack()\\` checks for valid parent route in hierarchy\n- \\`goBack()\\` navigates to parent route (NOT browser history)\n- Browser back/forward buttons still work for browser history\n- URL updates automatically\n- Bookmarkable URLs\n\n## Best Practices\n\n1. Always provide vars - Even if empty: \\`{}\\`\n2. Type your routes - Use TypeScript for safety\n3. Handle errors - Check if navigation succeeded\n4. Avoid navigation in render - Use effects or handlers\n5. Clean up listeners - Remove event listeners on unmount\n6. Test navigation flow - Verify all paths work\n7. Use path params for IDs - Not query params\n8. Use query params for filters - Not path params\n\n## Common Patterns\n\n### Back Navigation\n\n\\`\\`\\`tsx\n// Conditionally show back button\nconst { canGoBack, goBack } = useNavigator();\n\n{canGoBack() && (\n <Button\n icon=\"arrow-left\"\n onPress={goBack}\n >\n Back\n </Button>\n)}\n\\`\\`\\`\n\n### Tab Navigation\n\n\\`\\`\\`tsx\nimport { useNavigator, useLocation } from '@idealyst/navigation';\n\nconst tabs = ['feed', 'search', 'profile'];\n\nfunction TabBar() {\n const { navigate } = useNavigator();\n const location = useLocation();\n\n return (\n <View>\n {tabs.map(tab => (\n <Button\n key={tab}\n onPress={() => navigate({ path: \\`/\\${tab}\\` })}\n type={location.pathname === \\`/\\${tab}\\` ? 'contained' : 'outlined'}\n >\n {tab}\n </Button>\n ))}\n </View>\n );\n}\n\\`\\`\\`\n\n### Modal Navigation\n\n\\`\\`\\`tsx\n<Button onPress={() => {\n navigator.navigate({\n path: '/modal/create-post',\n vars: {}\n });\n}}>\n Create Post\n</Button>\n\n// In modal:\n<Button onPress={() => navigator.goBack()}>\n Close\n</Button>\n\\`\\`\\`\n`,\n\n \"idealyst://navigation/invalid-route-handling\": `# Invalid Route Handling\n\nHandle 404 pages and invalid routes with customizable redirect logic and fallback components.\n\n## Overview\n\nThe navigation system provides two mechanisms for handling invalid routes:\n\n1. \\`onInvalidRoute\\` - A handler function that can redirect to a different route\n2. \\`notFoundComponent\\` - A fallback component to render when no redirect is specified\n\nThese can be configured at each navigator level and support bubbling up to parent navigators.\n\n## Basic Setup\n\n### Adding a 404 Page\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\n\n// 404 Component receives path and params\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => (\n <Screen>\n <View style={{ alignItems: 'center', padding: 24 }}>\n <Icon name=\"alert-circle\" size={64} color=\"red\" />\n <Text size=\"xl\">Page Not Found</Text>\n <Text color=\"secondary\">The path \"{path}\" doesn't exist.</Text>\n {params && Object.keys(params).length > 0 && (\n <Text size=\"sm\">Params: {JSON.stringify(params)}</Text>\n )}\n </View>\n </Screen>\n);\n\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: NotFoundPage,\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n## NotFoundComponentProps\n\nThe 404 component receives information about the attempted route:\n\n\\`\\`\\`tsx\ntype NotFoundComponentProps = {\n /** The full path that was attempted /\n path: string;\n /* Any route parameters that were parsed from the path /\n params?: Record<string, string>;\n};\n\\`\\`\\`\n\nExample usage:\n\\`\\`\\`tsx\nconst NotFoundPage = ({ path, params }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View style={{ padding: 16, gap: 24 }}>\n <Text size=\"xl\">404 - Page Not Found</Text>\n <Text>Attempted: {path}</Text>\n {params?.id && <Text>User ID: {params.id}</Text>}\n <Button onPress={() => navigate({ path: '/', replace: true })}>\n Go Home\n </Button>\n </View>\n </Screen>\n );\n};\n\\`\\`\\`\n\n## Redirect Handler\n\nUse \\`onInvalidRoute\\` to redirect certain invalid paths:\n\n\\`\\`\\`tsx\nconst routes: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: NotFoundPage,\n onInvalidRoute: (invalidPath) => {\n // Redirect old URLs to new locations\n if (invalidPath.startsWith('/old-blog')) {\n return { path: '/blog', replace: true };\n }\n\n // Redirect legacy paths\n if (invalidPath === '/legacy-dashboard') {\n return { path: '/dashboard', replace: true };\n }\n\n // Return undefined to show notFoundComponent\n return undefined;\n },\n routes: [...]\n};\n\\`\\`\\`\n\n### Handler Return Values\n\nThe \\`onInvalidRoute\\` handler can return:\n\n- \\`NavigateParams\\`* - Redirect to a different route\n- \\`undefined\\` - Show the \\`notFoundComponent\\` (or bubble up)\n\n\\`\\`\\`tsx\ntype NavigateParams = {\n path: string;\n vars?: Record<string, string>;\n replace?: boolean; // Recommended: true for redirects\n};\n\nonInvalidRoute: (path: string) => NavigateParams \| undefined\n\\`\\`\\`\n\n## Scoped Handlers (Nested Navigators)\n\nEach navigator can have its own 404 handling:\n\n\\`\\`\\`tsx\n// Settings-specific 404 page\nconst SettingsNotFound = ({ path }: NotFoundComponentProps) => (\n <Screen>\n <View style={{ alignItems: 'center' }}>\n <Icon name=\"cog-off\" size={48} color=\"orange\" />\n <Text>Settings page not found: {path}</Text>\n </View>\n </Screen>\n);\n\n// Nested settings navigator with its own handler\nconst SettingsNavigator: NavigatorParam = {\n path: \"settings\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: SettingsNotFound,\n onInvalidRoute: (path) => {\n // Redirect deprecated settings paths\n if (path.includes('legacy-setting')) {\n return { path: '/settings/general', replace: true };\n }\n return undefined; // Show SettingsNotFound\n },\n routes: [\n { path: \"\", type: 'screen', component: SettingsHome },\n { path: \"general\", type: 'screen', component: GeneralSettings },\n { path: \"account\", type: 'screen', component: AccountSettings },\n ]\n};\n\n// Root navigator with global 404\nconst AppRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: GlobalNotFound, // Fallback for non-settings routes\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n SettingsNavigator, // Has its own 404 handling\n { path: \"about\", type: 'screen', component: AboutScreen },\n ]\n};\n\\`\\`\\`\n\n## Handler Bubbling\n\nInvalid routes bubble up through the navigator hierarchy:\n\n\\`\\`\\`\nInvalid route detected: /settings/invalid-page\n ↓\nCheck /settings navigator's onInvalidRoute\n ↓\n┌─────────────────────────────────────────┐\n│ Returns NavigateParams? │\n│ YES → Redirect to that route │\n│ NO (undefined) → Check notFoundComponent │\n└─────────────────────────────────────────┘\n ↓\nHas notFoundComponent?\n YES → Render it with { path, params }\n NO → Bubble up to parent navigator\n ↓\nNo parent handles it?\n → console.warn(\"No handler for invalid route\")\n\\`\\`\\`\n\n## Platform Behavior\n\n### Web\n\n- Invalid routes trigger the catch-all route at each navigator level\n- The \\`onInvalidRoute\\` handler is called when the 404 route is rendered\n- If handler returns \\`NavigateParams\\`, navigation uses \\`replace: true\\` by default\n- URL stays at the invalid path when showing \\`notFoundComponent\\`\n\n### Mobile (React Native)\n\n- Invalid routes trigger navigation to a hidden 404 screen\n- The handler is called during the \\`navigate()\\` function\n- If handler returns \\`NavigateParams\\`, redirects to that route\n- If no handler/component, logs a warning\n\n## Complete Example\n\n\\`\\`\\`tsx\nimport { NavigatorParam, NotFoundComponentProps } from '@idealyst/navigation';\nimport { Screen, View, Text, Button, Icon, Card } from '@idealyst/components';\n\n// Global 404 - detailed error page\nconst GlobalNotFound = ({ path, params }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View style={{ padding: 24, gap: 24, alignItems: 'center', flex: 1, justifyContent: 'center' }}>\n <Icon name=\"alert-circle-outline\" size={64} color=\"red\" />\n <Text size=\"xl\" weight=\"bold\">Page Not Found</Text>\n <Text color=\"secondary\">The page you're looking for doesn't exist.</Text>\n\n <Card style={{ marginTop: 16, padding: 16 }}>\n <Text size=\"sm\" weight=\"semibold\">Attempted path:</Text>\n <Text size=\"sm\" color=\"secondary\">{path}</Text>\n {params && Object.keys(params).length > 0 && (\n <>\n <Text size=\"sm\" weight=\"semibold\" style={{ marginTop: 8 }}>Params:</Text>\n <Text size=\"sm\" color=\"secondary\">{JSON.stringify(params)}</Text>\n </>\n )}\n </Card>\n\n <Button style={{ marginTop: 24 }} onPress={() => navigate({ path: '/', replace: true })}>\n Go Home\n </Button>\n </View>\n </Screen>\n );\n};\n\n// Admin section 404 - simpler style\nconst AdminNotFound = ({ path }: NotFoundComponentProps) => {\n const { navigate } = useNavigator();\n\n return (\n <Screen>\n <View padding={16} style={{ alignItems: 'center' }}>\n <Icon name=\"shield-off\" size={48} color=\"orange\" />\n <Text size=\"lg\">Admin page not found</Text>\n <Button\n type=\"outlined\"\n size=\"sm\"\n onPress={() => navigate({ path: '/admin', replace: true })}\n >\n Back to Admin\n </Button>\n </View>\n </Screen>\n );\n};\n\n// Admin navigator with redirect logic\nconst AdminNavigator: NavigatorParam = {\n path: \"admin\",\n type: 'navigator',\n layout: 'stack',\n notFoundComponent: AdminNotFound,\n onInvalidRoute: (path) => {\n // Redirect old admin paths\n if (path.includes('old-users')) {\n return { path: '/admin/users', replace: true };\n }\n if (path.includes('deprecated')) {\n return { path: '/admin', replace: true };\n }\n return undefined; // Show AdminNotFound\n },\n routes: [\n { path: \"\", type: 'screen', component: AdminDashboard },\n { path: \"users\", type: 'screen', component: AdminUsers },\n { path: \"settings\", type: 'screen', component: AdminSettings },\n ]\n};\n\n// Root app router\nconst AppRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'drawer',\n notFoundComponent: GlobalNotFound,\n onInvalidRoute: (path) => {\n // Global redirects\n if (path === '/home') {\n return { path: '/', replace: true };\n }\n return undefined;\n },\n routes: [\n { path: \"\", type: 'screen', component: HomeScreen },\n AdminNavigator,\n { path: \"about\", type: 'screen', component: AboutScreen },\n { path: \"contact\", type: 'screen', component: ContactScreen },\n ]\n};\n\nexport default AppRouter;\n\\`\\`\\`\n\n## Best Practices\n\n1. Always provide a root notFoundComponent - Ensures all invalid routes are handled\n2. Use scoped handlers for sections - Different 404 styles for different app areas\n3. Redirect deprecated URLs - Use \\`onInvalidRoute\\` to maintain URL compatibility\n4. Include helpful information - Show the attempted path and suggest alternatives\n5. Provide navigation options - Add buttons to go home or back\n6. Use \\`replace: true\\` for redirects - Prevents invalid routes in browser history\n7. Log unhandled routes - Monitor for missing pages in production\n\n## TypeScript Types\n\n\\`\\`\\`tsx\nimport {\n NavigatorParam,\n NotFoundComponentProps,\n NavigateParams\n} from '@idealyst/navigation';\n\n// NotFoundComponentProps\ntype NotFoundComponentProps = {\n path: string;\n params?: Record<string, string>;\n};\n\n// Handler signature\ntype InvalidRouteHandler = (invalidPath: string) => NavigateParams \| undefined;\n\n// NavigateParams (used by handler return and navigate function)\ntype NavigateParams = {\n path: string;\n vars?: Record<string, string>;\n replace?: boolean;\n};\n\\`\\`\\`\n`,\n\n \"idealyst://navigation/web-mobile-parity\": `# Web/Mobile Navigation Parity\n\nUnderstanding how to achieve the same navigation experience on web that you get for free on mobile.\n\n## The Core Problem\n\nOn React Native, you get native navigation UI for free:\n- Stack navigator gives you headers with back buttons\n- Tab navigator gives you a bottom tab bar with icons\n- Drawer navigator gives you a slide-out menu\n\nOn Web, you get nothing but URL routing. No headers, no tab bars, no drawers. You must build these yourself using layout components.\n\n## The Solution: Layout Components\n\nThe \\`layoutComponent\\` prop on navigators is how you achieve parity. It wraps your route content and provides the navigation UI.\n\n\\`\\`\\`tsx\n{\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: MyStackLayout, // <-- This is the key!\n routes: [...]\n}\n\\`\\`\\`\n\n## What Layout Components Receive\n\nEvery layout component receives these props:\n\n\\`\\`\\`tsx\ntype LayoutProps = {\n children: React.ReactNode; // The route content (renders via <Outlet />)\n options?: NavigatorOptions; // headerTitle, headerLeft, headerRight, etc.\n routes: RouteWithFullPath[]; // All child routes with their full paths\n currentPath: string; // Currently active route path\n};\n\\`\\`\\`\n\nThis gives you everything you need to build any navigation UI:\n- \\`options\\` - What to show in headers\n- \\`routes\\` - What tabs/menu items to render\n- \\`currentPath\\` - Which one is active\n- \\`children\\` - Where to render the screen content\n\n## Stack Navigator Parity\n\n### What Native Gives You\n- Header bar with title\n- Back button (automatic)\n- Right-side actions\n- Smooth transitions\n\n### Web Implementation\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, IconButton, Pressable } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport function StackLayout({ options, currentPath }: StackLayoutProps) {\n const { canGoBack, goBack } = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/* Header - mimics native stack header /}\n {options?.headerShown !== false && (\n <View style={{\n height: 56,\n flexDirection: 'row',\n alignItems: 'center',\n paddingHorizontal: 16,\n borderBottomWidth: 1,\n borderBottomColor: '#e0e0e0',\n backgroundColor: '#fff',\n }}>\n {/ Back button - like native /}\n {options?.headerBackVisible !== false && canGoBack() && (\n <IconButton\n icon=\"arrow-left\"\n onPress={goBack}\n style={{ marginRight: 8 }}\n />\n )}\n\n {/ Left slot /}\n {options?.headerLeft && (\n <View style={{ marginRight: 16 }}>\n {typeof options.headerLeft === 'function'\n ? options.headerLeft({})\n : options.headerLeft}\n </View>\n )}\n\n {/ Title - centered or left-aligned /}\n <View style={{ flex: 1 }}>\n {typeof options?.headerTitle === 'string' ? (\n <Text variant=\"title\">{options.headerTitle}</Text>\n ) : (\n options?.headerTitle\n )}\n </View>\n\n {/ Right slot /}\n {options?.headerRight && (\n <View>\n {typeof options.headerRight === 'function'\n ? options.headerRight({})\n : options.headerRight}\n </View>\n )}\n </View>\n )}\n\n {/ Content area /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Tab Navigator Parity\n\n### What Native Gives You\n- Bottom tab bar\n- Icons for each tab\n- Labels\n- Badge counts\n- Active state highlighting\n\n### Web Implementation\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, Pressable, Icon, Badge } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { TabLayoutProps } from '@idealyst/navigation';\n\nexport function TabLayout({ routes, currentPath }: TabLayoutProps) {\n const { navigate } = useNavigator();\n\n return (\n <View style={{ flex: 1 }}>\n {/ Content area /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n\n {/ Bottom tab bar - mimics native /}\n <View style={{\n height: 56,\n flexDirection: 'row',\n borderTopWidth: 1,\n borderTopColor: '#e0e0e0',\n backgroundColor: '#fff',\n }}>\n {routes.map((route) => {\n const isActive = currentPath === route.fullPath;\n const options = route.options;\n\n return (\n <Pressable\n key={route.fullPath}\n onPress={() => navigate({ path: route.fullPath })}\n style={{\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n paddingVertical: 8,\n }}\n >\n {/ Icon with optional badge /}\n <View style={{ position: 'relative' }}>\n {options?.tabBarIcon?.({\n focused: isActive,\n color: isActive ? '#007AFF' : '#8E8E93',\n size: 24,\n })}\n {options?.tabBarBadge && (\n <Badge\n count={options.tabBarBadge}\n style={{ position: 'absolute', top: -4, right: -8 }}\n />\n )}\n </View>\n\n {/ Label /}\n {options?.tabBarLabel && (\n <Text\n size=\"xs\"\n style={{\n marginTop: 4,\n color: isActive ? '#007AFF' : '#8E8E93',\n }}\n >\n {options.tabBarLabel}\n </Text>\n )}\n </Pressable>\n );\n })}\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Drawer Navigator Parity\n\n### What Native Gives You\n- Slide-out drawer from edge\n- Overlay when open\n- Gesture to open/close\n- Menu items\n\n### Web Implementation\n\nOn web, drawers are typically persistent sidebars. Here's how to build both:\n\n\\`\\`\\`tsx\nimport { Outlet } from 'react-router-dom';\nimport { View, Text, Pressable, Icon } from '@idealyst/components';\nimport { useNavigator } from '@idealyst/navigation';\nimport type { StackLayoutProps } from '@idealyst/navigation';\n\nexport function DrawerLayout({ routes, currentPath, options }: StackLayoutProps) {\n const { navigate } = useNavigator();\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n return (\n <View style={{ flex: 1, flexDirection: 'row' }}>\n {/ Sidebar - always visible on web /}\n <View style={{\n width: isCollapsed ? 64 : 240,\n borderRightWidth: 1,\n borderRightColor: '#e0e0e0',\n backgroundColor: '#f8f8f8',\n transition: 'width 0.2s',\n }}>\n {/ Logo/Header /}\n <View style={{ height: 56, justifyContent: 'center', paddingHorizontal: 16 }}>\n {!isCollapsed && <Text variant=\"title\">My App</Text>}\n </View>\n\n {/ Menu Items /}\n {routes.map((route) => {\n const isActive = currentPath.startsWith(route.fullPath);\n return (\n <Pressable\n key={route.fullPath}\n onPress={() => navigate({ path: route.fullPath })}\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n padding: 12,\n backgroundColor: isActive ? 'rgba(0,0,0,0.08)' : 'transparent',\n }}\n >\n <Icon\n name={route.options?.icon \|\| 'circle'}\n size={24}\n color={isActive ? '#007AFF' : '#666'}\n />\n {!isCollapsed && (\n <Text style={{ marginLeft: 12, color: isActive ? '#007AFF' : '#333' }}>\n {route.options?.title \|\| route.path}\n </Text>\n )}\n </Pressable>\n );\n })}\n\n {/ Collapse toggle /}\n <Pressable\n onPress={() => setIsCollapsed(!isCollapsed)}\n style={{ padding: 12, marginTop: 'auto' }}\n >\n <Icon name={isCollapsed ? 'chevron-right' : 'chevron-left'} size={24} />\n </Pressable>\n </View>\n\n {/ Content /}\n <View style={{ flex: 1 }}>\n <Outlet />\n </View>\n </View>\n );\n}\n\\`\\`\\`\n\n## Using GeneralLayout Helper\n\nThe \\`GeneralLayout\\` component simplifies building layouts:\n\n\\`\\`\\`tsx\nimport { GeneralLayout } from '@idealyst/navigation';\n\nexport function AppLayout({ options, routes, currentPath, children }: StackLayoutProps) {\n return (\n <GeneralLayout\n header={{\n enabled: true,\n height: 56,\n content: (\n <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>\n <Text variant=\"title\">{options?.headerTitle \|\| 'App'}</Text>\n <View style={{ marginLeft: 'auto' }}>{options?.headerRight}</View>\n </View>\n ),\n }}\n sidebar={{\n enabled: true,\n collapsible: true,\n expandedWidth: 240,\n collapsedWidth: 64,\n content: <SidebarMenu routes={routes} currentPath={currentPath} />,\n }}\n >\n {children}\n </GeneralLayout>\n );\n}\n\\`\\`\\`\n\n## Putting It All Together\n\nHere's a complete router setup with web layouts:\n\n\\`\\`\\`tsx\nimport { NavigatorParam } from '@idealyst/navigation';\nimport { StackLayout } from './layouts/StackLayout';\nimport { TabLayout } from './layouts/TabLayout';\n\nconst appRouter: NavigatorParam = {\n path: \"/\",\n type: 'navigator',\n layout: 'stack',\n layoutComponent: StackLayout, // Web header\n options: {\n headerTitle: \"My App\",\n headerRight: <UserMenu />,\n },\n routes: [\n {\n path: \"main\",\n type: 'navigator',\n layout: 'tab',\n layoutComponent: TabLayout, // Web tab bar\n routes: [\n {\n path: \"home\",\n type: 'screen',\n component: HomeScreen,\n options: {\n tabBarLabel: \"Home\",\n tabBarIcon: ({ color }) => <Icon name=\"home\" color={color} />,\n },\n },\n {\n path: \"search\",\n type: 'screen',\n component: SearchScreen,\n options: {\n tabBarLabel: \"Search\",\n tabBarIcon: ({ color }) => <Icon name=\"magnify\" color={color} />,\n },\n },\n ],\n },\n {\n path: \"settings\",\n type: 'screen',\n component: SettingsScreen,\n },\n ],\n};\n\\`\\`\\`\n\n## Key Insights\n\n1. layoutComponent is web-only* - Native ignores it and uses native navigators\n2. Same route config, different UI - Your routes stay the same, layouts differ\n3. Options are your data source - headerTitle, tabBarIcon, etc. drive your layout\n4. routes array is navigation menu - Use it to build sidebars, tab bars, menus\n5. currentPath enables active states - Compare to highlight current item\n6. Outlet renders children - From react-router-dom, this is where screen content goes\n\n## Common Patterns\n\n### Responsive Layout\n\\`\\`\\`tsx\nfunction ResponsiveLayout(props: StackLayoutProps) {\n const { width } = useWindowDimensions();\n const isMobile = width < 768;\n\n // Tabs on mobile, drawer on desktop\n return isMobile\n ? <TabLayout {...props} />\n : <DrawerLayout {...props} />;\n}\n\\`\\`\\`\n\n### Nested Headers\n\\`\\`\\`tsx\n// Parent navigator has app header\n// Child navigator has section header\n{\n path: \"/\",\n layoutComponent: AppHeaderLayout,\n routes: [{\n path: \"admin\",\n layoutComponent: AdminSectionHeader, // Adds another header\n routes: [...]\n }]\n}\n\\`\\`\\`\n\n### Hiding Navigation\n\\`\\`\\`tsx\nfunction ConditionalLayout(props: StackLayoutProps) {\n // Hide navigation on certain routes\n if (props.currentPath.includes('/fullscreen')) {\n return <Outlet />; // No chrome\n }\n return <FullLayout {...props} />;\n}\n\\`\\`\\`\n\n## Summary\n\n\| Native Gets \| Web Needs \|\n\|-------------\|-----------\|\n\| Stack header \| \\`layoutComponent\\` with header UI \|\n\| Tab bar \| \\`layoutComponent\\` with tab buttons \|\n\| Drawer \| \\`layoutComponent\\` with sidebar \|\n\| Back button \| \\`canGoBack()\\` + \\`goBack()\\` \|\n\| Active states \| Compare \\`currentPath\\` to \\`route.fullPath\\` \|\n\| Screen options \| Access via \\`options\\` and \\`route.options\\` \|\n\nThe key to web/mobile parity is understanding that layout components give web everything native navigators provide automatically.\n`,\n};\n","export const iconGuide = `# Material Design Icons Reference\n\nIdealyst uses Material Design Icons (@mdi/react) with 7,447 icons available.\n\n## Icon Usage\n\n### In Components\n\nIcons can be used by providing the icon name as a string:\n\n\\`\\`\\`tsx\nimport { Button, Icon, List, Badge } from '@idealyst/components';\n\n// Button with icon\n<Button icon=\"check\">Save</Button>\n\n// Standalone Icon\n<Icon name=\"home\" size=\"md\" color=\"primary\" />\n\n// List with icons\n<ListItem label=\"Settings\" leading=\"cog\" trailing=\"chevron-right\" />\n\n// Badge with icon\n<Badge icon=\"star\">Featured</Badge>\n\\`\\`\\`\n\n### Icon Properties\n\n\\`\\`\\`tsx\n<Icon\n name=\"home\" // Icon name (required)\n size=\"xs\|sm\|md\|lg\|xl\|number\" // Icon size\n color=\"primary\|secondary\|...\" // Theme color\n/>\n\\`\\`\\`\n\n## Common Icons by Category\n\n### Navigation & Actions\n- home - Home/dashboard\n- menu - Hamburger menu\n- arrow-left - Back/previous\n- arrow-right - Forward/next\n- chevron-left - Small back arrow\n- chevron-right - Small forward arrow\n- chevron-up - Collapse/up\n- chevron-down - Expand/down\n- close - Close/dismiss\n- check - Confirm/success\n- plus - Add/create\n- minus - Remove/subtract\n- delete - Delete/trash\n- dots-vertical - More options (vertical)\n- dots-horizontal - More options (horizontal)\n\n### User & Account\n- account - User profile\n- account-circle - User avatar\n- account-multiple - Multiple users/team\n- account-plus - Add user\n- account-minus - Remove user\n- account-edit - Edit profile\n- account-cog - User settings\n- login - Login/sign in\n- logout - Logout/sign out\n- account-key - Authentication\n\n### Communication\n- email - Email/mail\n- email-outline - Email outline variant\n- message - Message/chat\n- message-text - Text message\n- message-reply - Reply to message\n- phone - Phone/call\n- bell - Notifications\n- bell-outline - Notifications outline\n- comment - Comment/feedback\n- forum - Discussion/forum\n\n### File & Document\n- file - Generic file\n- file-document - Document\n- file-pdf - PDF file\n- file-image - Image file\n- folder - Folder\n- folder-open - Open folder\n- download - Download\n- upload - Upload\n- attachment - Attach file\n- cloud-upload - Cloud upload\n- cloud-download - Cloud download\n\n### Media\n- play - Play media\n- pause - Pause media\n- stop - Stop media\n- skip-next - Next track\n- skip-previous - Previous track\n- volume-high - High volume\n- volume-low - Low volume\n- volume-off - Muted\n- image - Picture/photo\n- camera - Camera\n- video - Video\n\n### Edit & Create\n- pencil - Edit\n- pencil-outline - Edit outline\n- content-save - Save\n- content-copy - Copy\n- content-cut - Cut\n- content-paste - Paste\n- undo - Undo\n- redo - Redo\n- format-bold - Bold text\n- format-italic - Italic text\n- format-underline - Underline text\n\n### Status & Alerts\n- check-circle - Success\n- check-circle-outline - Success outline\n- alert - Warning\n- alert-circle - Alert circle\n- alert-octagon - Critical alert\n- information - Information\n- information-outline - Info outline\n- help-circle - Help/question\n- close-circle - Error\n- clock - Time/pending\n\n### UI Elements\n- magnify - Search\n- filter - Filter\n- sort - Sort\n- tune - Settings/adjust\n- cog - Settings\n- palette - Theme/colors\n- eye - View/visible\n- eye-off - Hidden\n- heart - Favorite/like\n- heart-outline - Like outline\n- star - Star/rating\n- star-outline - Star outline\n- bookmark - Bookmark\n- bookmark-outline - Bookmark outline\n\n### Shopping & Commerce\n- cart - Shopping cart\n- cart-outline - Cart outline\n- cash - Money/payment\n- credit-card - Credit card\n- tag - Tag/label\n- sale - Sale/discount\n- receipt - Receipt\n- store - Store/shop\n\n### Social\n- share - Share\n- share-variant - Share variant\n- thumb-up - Like/upvote\n- thumb-down - Dislike/downvote\n- emoticon - Emoji/mood\n- emoticon-happy - Happy\n- emoticon-sad - Sad\n\n### Location & Map\n- map - Map\n- map-marker - Location pin\n- navigation - Navigation\n- compass - Compass\n- earth - Globe/world\n\n### Calendar & Time\n- calendar - Calendar\n- calendar-today - Today\n- calendar-month - Month view\n- clock-outline - Clock\n- timer - Timer\n\n### Device & Hardware\n- laptop - Laptop\n- cellphone - Mobile phone\n- tablet - Tablet\n- desktop-mac - Desktop\n- monitor - Monitor\n- printer - Printer\n- wifi - WiFi\n- bluetooth - Bluetooth\n\n### Weather\n- weather-sunny - Sunny\n- weather-cloudy - Cloudy\n- weather-rainy - Rainy\n- weather-snowy - Snowy\n- weather-night - Night\n- white-balance-sunny - Light mode\n- weather-night - Dark mode\n\n## Finding Icons\n\n### Total Available Icons\n7,447 icons from Material Design Icons\n\n### Browse All Icons\nVisit: https://pictogrammers.com/library/mdi/\n\n### Search Patterns\nIcons follow naming patterns:\n- Base name: \\`home\\`, \\`account\\`, \\`file\\`\n- Variants: \\`-outline\\`, \\`-filled\\`, \\`-off\\`, \\`-plus\\`, \\`-minus\\`\n- Combinations: \\`account-plus\\`, \\`file-document-outline\\`\n\n### Common Suffixes\n- -outline: Outline version\n- -off: Disabled/off state\n- -plus: Add/create\n- -minus: Remove/subtract\n- -edit: Edit action\n- -check: Verified/checked\n- -alert: Warning state\n\n## Icon Naming Tips\n\n1. Be Specific: Use descriptive names\n - ✅ \\`account-circle\\` for user avatar\n - ❌ \\`user\\` (not available)\n\n2. Check Variants: Try outline versions\n - \\`email\\` and \\`email-outline\\`\n - \\`heart\\` and \\`heart-outline\\`\n\n3. Common Prefixes:\n - \\`account-\\`: User-related\n - \\`file-\\`: File-related\n - \\`folder-\\`: Folder-related\n - \\`arrow-\\`: Arrows\n - \\`chevron-\\`: Small arrows\n - \\`content-\\`: Content actions\n\n4. Use Hyphens: Icon names use kebab-case\n - ✅ \\`arrow-left\\`\n - ❌ \\`arrowLeft\\` or \\`arrow_left\\`\n\n## Best Practices\n\n1. Semantic Meaning: Choose icons that match their function\n2. Consistency: Use the same icon for the same action throughout the app\n3. Size Appropriately: Match icon size to context\n4. Color Purposefully: Use theme colors for semantic meaning\n5. Accessibility: Always provide labels/tooltips for icon-only buttons\n\n## Examples\n\n### Button Icons\n\\`\\`\\`tsx\n<Button icon=\"content-save\">Save</Button>\n<Button icon=\"delete\" intent=\"danger\">Delete</Button>\n<Button icon=\"pencil\">Edit</Button>\n<Button icon=\"plus\">Add New</Button>\n\\`\\`\\`\n\n### List Icons\n\\`\\`\\`tsx\n<ListItem label=\"Dashboard\" leading=\"view-dashboard\" />\n<ListItem label=\"Users\" leading=\"account-multiple\" />\n<ListItem label=\"Settings\" leading=\"cog\" />\n<ListItem label=\"Logout\" leading=\"logout\" intent=\"danger\" />\n\\`\\`\\`\n\n### Navigation Icons\n\\`\\`\\`tsx\n<Button icon=\"arrow-left\" variant=\"text\">Back</Button>\n<Button icon=\"menu\" variant=\"text\">Menu</Button>\n<Button icon=\"close\" variant=\"text\">Close</Button>\n\\`\\`\\`\n\n### Status Icons\n\\`\\`\\`tsx\n<Icon name=\"check-circle\" color=\"success\" />\n<Icon name=\"alert-circle\" color=\"warning\" />\n<Icon name=\"close-circle\" color=\"danger\" />\n<Icon name=\"information-outline\" color=\"primary\" />\n\\`\\`\\`\n`;\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACTA,IAAM,kBAA0C;AAAA,EACrD,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4FxC,4CAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoH5C,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4QhC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiN5B,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+JvC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsFrC,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyNtC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyJrC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6KrC,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmPpC,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkN3C;;;ACv4DO,IAAM,mBAA2C;AAAA,EACtD,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8FlC,6CAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0O7C,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyNzC,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoTxC,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgfvC,gDAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiWhD,2CAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6b7C;;;ACpmEO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH2BzB,IAAM,SAAS,IAAI;AAAA,EACjB;AAAA,IACE,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,cAAc;AAAA,MACZ,OAAO,CAAC;AAAA,MACR,WAAW,CAAC;AAAA,IACd;AAAA,EACF;AACF;AAGA,OAAO,kBAAkB,wBAAwB,YAAY;AAC3D,SAAO;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;AAGD,OAAO,kBAAkB,uBAAuB,OAAO,YAAY;AACjE,QAAM,EAAE,MAAM,WAAW,KAAK,IAAI,QAAQ;AAC1C,SAAO,SAAS,MAAM,QAAQ,CAAC,CAAC;AAClC,CAAC;AAGD,OAAO,kBAAkB,4BAA4B,YAAY;AAC/D,SAAO;AAAA,IACL,WAAW;AAAA,MACT;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGD,OAAO,kBAAkB,2BAA2B,OAAO,YAAY;AACrE,QAAM,EAAE,IAAI,IAAI,QAAQ;AAGxB,MAAI,QAAQ,gBAAgB,GAAG,KAAK,iBAAiB,GAAG,KAAK,gBAAgB,GAAG,KAAK,cAAc,GAAG;AAGtG,MAAI,QAAQ,8BAA8B;AACxC,YAAQ;AAAA,EACV;AAGA,MAAI,QAAQ,+BAA+B;AACzC,UAAM,aAAa,qBAAqB;AACxC,UAAM,iBAAyC;AAAA,MAC7C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAEA,QAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAMd,eAAW,CAAC,UAAU,UAAU,KAAK,OAAO,QAAQ,UAAU,GAAG;AAC/D,iBAAW,MAAM,eAAe,QAAQ,KAAK,QAAQ;AAAA;AAAA;AAErD,iBAAW,UAAU,YAAY;AAC/B,cAAM,KAAK,OAAO,QAAQ,OAAO,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AACrE,mBAAW,OAAO,OAAO,IAAI;AAAA,EACnC,OAAO,WAAW;AAAA;AAAA,oBAEA,OAAO,UAAU;AAAA,kBACnB,OAAO,SAAS,KAAK,IAAI,CAAC;AAAA,4CACA,EAAE;AAAA;AAAA;AAAA,MAGxC;AAAA,IACF;AAEA,YAAQ;AAAA,EACV;AAGA,MAAI,QAAQ,gCAAgC;AAC1C,UAAM,aAAa,sBAAsB;AACzC,UAAM,gBAAgB,CAAC,QAAQ,MAAM,QAAQ,SAAS,QAAQ,WAAW,SAAS;AAClF,UAAM,iBAAyC;AAAA,MAC7C,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAEA,QAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAMd,eAAW,YAAY,eAAe;AACpC,YAAM,OAAO,WAAW,QAAQ;AAChC,UAAI,CAAC,QAAQ,KAAK,WAAW,EAAG;AAEhC,iBAAW,MAAM,eAAe,QAAQ,KAAK,QAAQ;AAAA;AAAA;AAErD,iBAAW,OAAO,MAAM;AACtB,cAAM,YAAY,IAAI,UAAU,KAAK,IAAI;AACzC,mBAAW,OAAO,IAAI,IAAI,OAAO,IAAI,OAAO;AAAA,EAClD,IAAI,WAAW;AAAA;AAAA,mBAEE,SAAS;AAAA,mBACT,IAAI,YAAY;AAAA;AAAA;AAAA,MAG7B;AAAA,IACF;AAEA,YAAQ;AAAA,EACV;AAEA,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,uBAAuB,GAAG,EAAE;AAAA,EAC9C;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,MACR;AAAA,QACE;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGD,eAAe,OAAO;AACpB,QAAM,YAAY,IAAI,qBAAqB;AAC3C,QAAM,OAAO,QAAQ,SAAS;AAC9B,UAAQ,MAAM,sCAAsC;AACtD;AAEA,KAAK,EAAE,MAAM,CAAC,UAAU;AACtB,UAAQ,MAAM,gBAAgB,KAAK;AACnC,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}