[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-clicode-component":3,"mdc--8am2yj-key":40,"related-repo-webflow-webflow-clicode-component":4655,"related-org-webflow-webflow-clicode-component":4762},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":35,"sourceUrl":38,"mdContent":39},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,20,23,24],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"CLI","cli",{"name":21,"slug":22,"type":16},"Deployment","deployment",{"name":10,"slug":9,"type":16},{"name":25,"slug":26,"type":16},"UI Components","ui-components",107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-05-18T06:47:41.421071",null,17,[33,34],"agent","skills",{"repoUrl":28,"stars":27,"forks":31,"topics":36,"description":37},[33,34],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fcode-component-command","---\nname: webflow-cli:code-component\ndescription: Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.\n---\n\n# Code Component\n\nCreate, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.\n\n## Important Note\n\n**ALWAYS use Bash tool for all Webflow CLI operations:**\n- Execute `webflow` CLI commands via Bash tool\n- Use Read tool to examine generated files (never modify)\n- Use Glob tool to discover project files\n- Verify CLI installation: `webflow --version`\n- Check authentication: On first `webflow library share`, workspace authentication happens automatically\n- DO NOT use Webflow MCP tools for CLI workflows\n- All CLI commands require proper descriptions (not context parameters)\n\n**Package Manager Detection:**\n- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)\n- If no lock file found, ask user which package manager to use (npm\u002Fpnpm\u002Fyarn)\n- Use detected package manager for all install\u002Fbuild commands\n\n## Instructions\n\n### Phase 1: Environment Verification\n1. **Verify CLI installed**: Run `webflow --version` to confirm CLI is installed\n2. **Check project state**: Determine if user has existing React project or needs guidance\n3. **Identify workspace**: Explain that workspace authentication happens on first share\n4. **Review configuration**: Check if webflow.json exists with library configuration\n\n### Phase 2: Project Configuration\n5. **Ask operation type**: Clarify what user wants to do:\n   - Configure existing React project for Code Components\n   - Add components to already-configured project\n   - Build and share existing library\n6. **Configure webflow.json**: Add library configuration to webflow.json:\n   - Library name (appears in Webflow Designer)\n   - Components glob pattern (e.g., `.\u002Fsrc\u002F**\u002F*.webflow.tsx`)\n   - Optional bundleConfig for custom webpack\n7. **Read configuration files**: Use Read tool to show:\n   - `webflow.json` - Library configuration\n   - `package.json` - Dependencies and scripts\n   - Component file structure\n8. **Verify dependencies**: Ensure React is installed and build scripts exist\n\n### Phase 3: Build & Bundle Validation\n9. **Run build**: Execute user's build command (e.g., `npm run build`, `yarn build`)\n10. **Validate build output**: Check for build errors or warnings\n11. **Run bundle command**: Execute `webflow library bundle` for local validation\n12. **Analyze bundle**:\n    - Bundle size (should be \u003C 2MB)\n    - Dependencies included\n    - Output location (default: `.\u002Fdist`)\n    - Validation warnings\n13. **Preview bundle details**: Show bundle summary with validation status\n\n### Phase 4: Preview & Approval\n14. **Show deployment preview**:\n    - Library name from webflow.json\n    - Component files included\n    - Bundle size and validation status\n    - Target workspace (will be selected on first share)\n    - Explain workspace authentication if first time\n15. **Explain deployment**: What happens when library is shared\n16. **Require explicit confirmation**: User must type \"share\" or \"deploy\" to proceed\n17. **Confirm workspace**: Explain browser will open for workspace selection (first time only)\n\n### Phase 5: Deployment & Verification\n18. **Execute share command**: Run `webflow library share`\n19. **Monitor deployment**: Show CLI output and progress\n20. **Handle workspace auth**: If first time, guide user through browser authentication\n21. **Verify deployment success**: Confirm library appears in workspace\n22. **Show .env updates**: Explain WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN added\n23. **Provide next steps**:\n    - How to use components in Designer\n    - How to update components\n    - Testing recommendations\n    - Using `webflow library log` for debugging\n\n## Examples\n\n### Example 1: Configure Existing React Project\n\n**User prompt:**\n```\nI have a React project with some components I want to share to Webflow\n```\n\n**Step 1: Environment Verification**\n```\n🔍 Webflow CLI Environment Check\n\nChecking CLI installation...\n✓ Webflow CLI installed: v1.5.2\n\nCurrent directory: \u002FUsers\u002Fuser\u002Fprojects\u002Fmy-components\n✓ Found package.json with React project\n✓ Found src\u002F directory with components\n\nChecking webflow.json...\n⚠️ No webflow.json found - needs configuration\n\nReady to configure for Code Components? (yes\u002Fno)\n```\n\n*User confirms: yes*\n\n**Step 2: Project Configuration**\n```\n📋 Configure Code Components Library\n\nI'll help you add the library configuration to webflow.json.\n\nQuestions:\n1. What should your library be called in Webflow Designer?\n   Example: \"My Component Library\"\n\n2. Where are your component files located?\n   Pattern examples:\n   - \".\u002Fsrc\u002F**\u002F*.webflow.tsx\" (components with .webflow.tsx extension)\n   - \".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\" (all components in src\u002Fcomponents\u002F)\n   - \".\u002Fsrc\u002FButton.tsx\" (specific files)\n\nLet me know the library name and component pattern.\n```\n\n*User provides: \"Acme Components\" and \".\u002Fsrc\u002F**\u002F*.webflow.tsx\"*\n\n```\nCreating webflow.json configuration...\n\n{\n  \"library\": {\n    \"name\": \"Acme Components\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"]\n  }\n}\n\n✓ Configuration ready\n\nFound component files:\n- src\u002FButton.webflow.tsx\n- src\u002FCard.webflow.tsx\n- src\u002FHero.webflow.tsx\n\nNext: Build your components and run bundle command.\n```\n\n**Step 3: Build & Bundle Validation**\n```\n🔨 Building Components\n\nWhat build command do you use? (e.g., npm run build, yarn build)\n```\n\n*User responds: npm run build*\n\n```\nExecuting: npm run build\n\nOutput:\n✓ TypeScript compilation successful\n✓ Components built to dist\u002F\n\nCreating bundle for validation...\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing 3 components\n✓ Bundling dependencies\n✓ Creating bundle\n✓ Bundle created: dist\u002Fbundle.js\n\n📦 Bundle Analysis:\n- Size: 287 KB (✓ within 2MB limit)\n- Components: 3 (Button, Card, Hero)\n- Dependencies: react@18.2.0, react-dom@18.2.0\n- Output: .\u002Fdist\n- Validation: ✅ All checks passed\n```\n\n**Step 4: Preview & Approval**\n```\n📋 Deployment Preview\n\nLibrary: Acme Components\nComponents: 3 (Button, Card, Hero)\nBundle Size: 287 KB\n\nWorkspace Authentication:\n⚠️ This appears to be your first deployment. When you run 'share':\n1. Browser will open for workspace authentication\n2. Select your target Webflow workspace\n3. Grant access to deploy components\n4. CLI will create .env with credentials:\n   - WEBFLOW_WORKSPACE_ID\n   - WEBFLOW_WORKSPACE_API_TOKEN\n\nValidation Status: ✅ Ready to deploy\n- Bundle size: ✓ 287 KB (\u003C 2MB limit)\n- Dependencies: ✓ Valid (React 18.2.0)\n- Configuration: ✓ webflow.json valid\n- Components: ✓ 3 components found\n\n⚠️ Type \"share\" to deploy this library to your workspace.\n```\n\n*User confirms: share*\n\n**Step 5: Deployment & Verification**\n```\n🚀 Deploying Library\n\nExecuting: webflow library share\n\nOutput:\n✓ Bundling library (287 KB)\n✓ Opening browser for workspace authentication...\n\n[Browser opens - user authenticates and selects workspace]\n\n✓ Workspace authenticated: Acme Corp\n✓ Uploading bundle\n✓ Validating components\n✓ Registering with workspace\n✓ Library deployed successfully\n\n✅ Library Deployed: Acme Components\n\nWorkspace: Acme Corp\nComponents: 3 (Button, Card, Hero)\nVersion: Latest\nStatus: Active\n\n📁 Environment Updated:\nCreated .env file with:\n- WEBFLOW_WORKSPACE_ID=workspace_abc123\n- WEBFLOW_WORKSPACE_API_TOKEN=************\n\n⚠️ Important: Add .env to your .gitignore file!\n\n📋 Next Steps:\n1. Open Webflow Designer\n2. Go to Add Elements → Code Components\n3. Find \"Acme Components\" in the list\n4. Drag components onto canvas to use\n\n💡 To update components:\n1. Make changes to your component files\n2. Run: npm run build\n3. Run: webflow library share\n   (No re-authentication needed - uses .env credentials)\n\n🔍 For debugging:\n- View logs: webflow library log\n- Bundle locally: webflow library bundle\n- Check bundle size: webflow library bundle --verbose\n\nComponent Library URL: https:\u002F\u002Fwebflow.com\u002Fdashboard\u002Fworkspaces\u002Facme-corp\u002Fcomponents\n```\n\n### Example 2: Update Existing Library\n\n**User prompt:**\n```\nUpdate my Code Components library with new changes\n```\n\n**Step 1: Environment Verification**\n```\n🔍 Code Components Library Check\n\nChecking configuration...\n✓ webflow.json found with library config\n✓ Library name: Acme Components\n✓ Components pattern: .\u002Fsrc\u002F**\u002F*.webflow.tsx\n\nChecking authentication...\n✓ Found .env with workspace credentials\n✓ Workspace: Acme Corp\n\nFound components:\n- src\u002FButton.webflow.tsx (modified)\n- src\u002FCard.webflow.tsx\n- src\u002FHero.webflow.tsx\n- src\u002FForm.webflow.tsx (new)\n\nReady to build and share updates? (yes\u002Fno)\n```\n\n**Step 2-3: Build & Bundle**\n```\n🔨 Building Components\n\nExecuting: npm run build\n✓ Build complete\n\nBundling for validation...\nExecuting: webflow library bundle\n\n📦 Bundle Analysis:\n- Size: 312 KB (✓ within 2MB limit)\n- Components: 4 (Button, Card, Hero, Form) [+1 new]\n- Changes: Button updated, Form added\n- Validation: ✅ All checks passed\n```\n\n**Step 4: Preview**\n```\n📋 Update Preview\n\nLibrary: Acme Components\nWorkspace: Acme Corp (already authenticated)\n\nChanges:\n✓ Button component (updated)\n✓ Form component (new)\n  Card component (unchanged)\n  Hero component (unchanged)\n\nBundle Size: 312 KB (+25 KB from 287 KB)\n\nNo re-authentication needed - using existing workspace credentials.\n\n⚠️ Type \"share\" to update the library.\n```\n\n**Step 5: Deployment**\n```\n🚀 Updating Library\n\nExecuting: webflow library share\n\nOutput:\n✓ Bundling library (312 KB)\n✓ Using workspace: Acme Corp\n✓ Uploading bundle\n✓ Validating components\n✓ Updating library\n✓ Library updated successfully\n\n✅ Library Updated: Acme Components\n\nChanges deployed:\n- Button: Updated ✨\n- Form: Added 🆕\n- Card: Unchanged\n- Hero: Unchanged\n\n💡 Refresh Webflow Designer to see changes:\n1. Open Designer\n2. Components may auto-refresh\n3. Or refresh browser if needed\n\nComponents updated in workspace!\n```\n\n### Example 3: First-Time Bundle Testing\n\n**User prompt:**\n```\nI want to test my bundle locally before sharing\n```\n\n**Step 1-2: Verification & Configuration**\n```\n🔍 Local Bundle Testing\n\n✓ webflow.json configured\n✓ Library: My Components\n✓ Components: .\u002Fsrc\u002F**\u002F*.webflow.tsx\n\nRunning local bundle only (no deployment)...\n```\n\n**Step 3: Bundle Validation**\n```\n🔨 Building Components\n\nExecuting: npm run build\n✓ Build complete\n\nCreating local bundle...\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing components\n✓ Bundling dependencies\n✓ Optimizing output\n✓ Bundle created: dist\u002Fbundle.js\n\n📦 Bundle Details:\n\nSize: 1.2 MB (✓ within 2MB limit)\n\nComponents (5):\n├── Button.webflow.tsx (25 KB)\n├── Card.webflow.tsx (18 KB)\n├── Hero.webflow.tsx (45 KB)\n├── Form.webflow.tsx (32 KB)\n└── Modal.webflow.tsx (28 KB)\n\nDependencies:\n├── react@18.2.0 (included)\n├── react-dom@18.2.0 (included)\n└── classnames@2.3.1 (included)\n\nOutput Directory: .\u002Fdist\u002F\n- bundle.js (1.2 MB)\n- manifest.json\n\nValidation: ✅ All checks passed\n\n💡 Bundle is valid and ready to share!\n   Run: webflow library share (when ready to deploy)\n```\n\n### Example 4: Bundle Too Large\n\n**User prompt:**\n```\nShare my components library\n```\n\n**Bundle Validation Error:**\n```\n🔨 Building and Bundling\n\nExecuting: npm run build\n✓ Build complete\n\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing components\n✓ Bundling dependencies\n⚠️ Bundle size check...\n\n📦 Bundle Analysis:\n- Size: 2.4 MB (❌ exceeds 2MB limit)\n- Components: 6\n- Dependencies: react@18.2.0, react-dom@18.2.0, lodash@4.17.21, moment@2.29.4\n- Validation: ❌ Issues found\n\n❌ Bundle Too Large\n\nCurrent size: 2.4 MB\nMaximum allowed: 2 MB\nExceeded by: 400 KB\n\n📊 Size Breakdown:\n- React + React DOM: ~800 KB\n- lodash: ~500 KB ⚠️\n- moment: ~350 KB ⚠️\n- Your components: ~750 KB\n\n💡 Recommendations:\n1. Remove lodash (use native JS instead)\n   - Replace _.map with Array.map\n   - Replace _.filter with Array.filter\n   - Or use lodash-es and import specific functions\n\n2. Replace moment with lighter alternative\n   - Use date-fns (~15 KB vs 350 KB)\n   - Or use native Intl.DateTimeFormat\n\n3. Optimize component code\n   - Remove unused imports\n   - Enable tree-shaking\n   - Split large components\n\n4. Use external assets\n   - Host large images externally\n   - Use CDN for static assets\n\nWould you like to:\n1. Continue anyway (using --force flag, not recommended)\n2. Review component imports to optimize\n3. Cancel and fix manually\n```\n\n### Example 5: CI\u002FCD Deployment\n\n**User prompt:**\n```\nHow do I deploy in CI\u002FCD pipeline?\n```\n\n**Response:**\n```\n🤖 CI\u002FCD Deployment Setup\n\nFor automated deployments, use non-interactive mode with API tokens.\n\n### Setup Steps:\n\n1. **Get Workspace API Token**\n   - Open Workspace Settings in Webflow\n   - Go to Integrations → Workspace API Token\n   - Generate new token\n   - Copy token securely\n\n2. **Add to CI\u002FCD Secrets**\n   - Add as environment variable: WORKSPACE_API_TOKEN\n   - Never commit tokens to version control\n\n3. **Deployment Command**\n   ```bash\n   webflow library share --api-token $WORKSPACE_API_TOKEN --no-input\n   ```\n\n### Example: GitHub Actions\n\n```yaml\nname: Deploy Components\non:\n  push:\n    branches: [main]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v3\n\n      - name: Setup Node\n        uses: actions\u002Fsetup-node@v3\n        with:\n          node-version: 18\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Install Webflow CLI\n        run: npm install -g @webflow\u002Fwebflow-cli\n\n      - name: Build components\n        run: npm run build\n\n      - name: Deploy to Webflow\n        run: |\n          webflow library share \\\n            --api-token ${{ secrets.WORKSPACE_API_TOKEN }} \\\n            --no-input \\\n            --force\n        env:\n          WORKSPACE_API_TOKEN: ${{ secrets.WORKSPACE_API_TOKEN }}\n```\n\n### Multiple Workspaces:\n\n```bash\n# Deploy to workspace 1\nwebflow library share \\\n  --api-token $WORKSPACE_1_TOKEN \\\n  --no-input\n\n# Deploy to workspace 2\nwebflow library share \\\n  --api-token $WORKSPACE_2_TOKEN \\\n  --no-input\n```\n\n### Options:\n- `--no-input` - Disables interactive prompts\n- `--force` - Continues even with warnings\n- `--verbose` - Shows detailed output\n- `--dev` - Bundles in development mode (for testing)\n\n⚠️ Security:\n- Never commit .env files\n- Use secrets management in CI\u002FCD\n- Rotate tokens regularly\n- Limit token permissions\n```\n\n## Guidelines\n\n### Phase 1: CLI Verification\n\n**Installation Check:**\n```bash\n# Check if CLI is installed\nwebflow --version\n\n# If not installed, guide user:\nnpm install -g @webflow\u002Fwebflow-cli\n```\n\n**Project Check:**\n```bash\n# Check for existing configuration\nls webflow.json\n\n# Check for React project\nls package.json\n\n# Check for components\nls src\u002F\n```\n\n**Authentication Note:**\nUnlike site authentication, workspace authentication for Code Components happens automatically on first `webflow library share`. The CLI will:\n1. Open browser for authentication\n2. Let user select workspace\n3. Create .env with WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN\n\n### Phase 2: Project Configuration\n\n**webflow.json Structure:**\n```json\n{\n  \"library\": {\n    \"name\": \"\u003CYour Library Name>\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"],\n    \"bundleConfig\": \".\u002Fwebpack.webflow.js\"\n  }\n}\n```\n\n**Configuration Fields:**\n- **name** (required): Library name as it appears in Webflow Designer\n- **components** (required): Glob pattern matching component files\n  - Example: `\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"` - all .webflow.tsx files in src\u002F\n  - Example: `\".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\"` - all .tsx files in src\u002Fcomponents\u002F\n- **bundleConfig** (optional): Path to custom webpack configuration\n\n**Component Naming Convention:**\n- Add `.webflow` before extension: `Button.webflow.tsx`\n- Or use glob pattern to include all files in specific directory\n- Components must be React components\n\n**No Init Command:**\nUnlike other CLI products, Code Components don't have an `init` command. Users configure existing React projects by adding webflow.json with library configuration.\n\n### Phase 3: Build & Bundle\n\n**Build Process:**\n```bash\n# Use project's build script\nnpm run build\n# or\nyarn build\n# or\npnpm build\n\n# Check for errors\necho $?  # 0 = success, non-zero = failure\n```\n\n**Bundle Command:**\n```bash\n# Bundle locally (optional - for testing\u002Fvalidation)\nwebflow library bundle\n\n# Bundle output: .\u002Fdist\u002F (default)\n# Can override: webflow library bundle --output-path .\u002Fbuild\n```\n\n**Bundle Options:**\n- `--output-path \u003Cpath>` - Override output directory (default: `.\u002Fdist`)\n- `--public-path \u003Cpath>` - Override public path\n- `--force` - Force bundling even with warnings\n- `--debug-bundler` - Show webpack configuration\n- `--dev` - Bundle in development mode\n- `--verbose` - Show detailed output\n\n**Bundle Validation:**\nCheck these aspects:\n- **Size limit**: Must be \u003C 2MB\n- **Dependencies**: React versions compatible\n- **Output**: Bundle created in dist\u002F directory\n- **Components**: All component files included\n\n**Common Build Errors:**\n- TypeScript compilation errors → Fix type issues\n- Missing dependencies → Run npm install\n- Import errors → Check file paths\n- Bundle too large → Optimize dependencies\n\n### Phase 4: Deployment Preview\n\n**Preview Format:**\n```\n📋 Deployment Preview\n\nLibrary: [Name from webflow.json]\nComponents: [Count] ([List of components])\nBundle Size: [Size in KB\u002FMB]\n\nWorkspace Authentication:\n[First time: Explain browser auth flow]\n[Subsequent: Show workspace from .env]\n\nValidation Status:\n✓ Bundle size: [X KB] (\u003C 2MB limit)\n✓ Dependencies: Valid\n✓ Configuration: webflow.json valid\n✓ Components: [N] components found\n\n⚠️ Type \"share\" to proceed\n```\n\n**First-Time Authentication:**\nExplain clearly:\n1. Browser will open\n2. User authenticates with Webflow\n3. User selects target workspace\n4. CLI creates .env with credentials\n5. Future shares use these credentials (no re-auth)\n\n### Phase 5: Deployment Execution\n\n**Share Command:**\n```bash\n# Standard share (interactive)\nwebflow library share\n\n# Non-interactive (for CI\u002FCD)\nwebflow library share --api-token \u003CTOKEN> --no-input\n\n# Force share (ignore warnings)\nwebflow library share --force\n\n# Development mode\nwebflow library share --dev\n```\n\n**Share Options:**\n- `--manifest` - Path to webflow.json (default: scans current directory)\n- `--api-token` - Workspace API token (for CI\u002FCD)\n- `--no-input` - Disable interactive prompts\n- `--force` - Force bundling even with warnings\n- `--debug-bundler` - Show bundler configuration\n- `--dev` - Bundle in development mode\n- `--verbose` - Show detailed output\n\n**Success Indicators:**\n- Bundle uploaded successfully\n- Library registered in workspace\n- Components available in Designer\n- .env file created\u002Fupdated (first time)\n\n**Environment File (.env):**\nAfter first successful share:\n```\nWEBFLOW_WORKSPACE_ID=your-workspace-id\nWEBFLOW_WORKSPACE_API_TOKEN=your-api-token\n```\n\n⚠️ **Critical**: Always add .env to .gitignore!\n\n**Verification Steps:**\n1. Check CLI output for success message\n2. Verify .env file created (first time)\n3. Provide Designer access instructions\n4. Show workspace dashboard URL\n\n### Phase 6: Debugging\n\n**Log Command:**\n```bash\n# Show latest log file location\nwebflow library log\n\n# Example output:\n# Latest log: \u002FUsers\u002Fuser\u002F.webflow\u002Flogs\u002Flibrary-2024-01-20-15-30-45.log\n```\n\nUse this command when:\n- Bundle fails with unclear error\n- Share command produces warnings\n- Need to debug webpack configuration\n- Investigating dependency issues\n\n**Common Issues:**\n\n**Issue: \"Could not find webflow.json\"**\n```\n❌ Configuration Not Found\n\nThe CLI couldn't find webflow.json in the current directory.\n\nSolution:\n1. Ensure you're in the project root\n2. Create webflow.json with library configuration:\n   {\n     \"library\": {\n       \"name\": \"Your Library Name\",\n       \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"]\n     }\n   }\n3. Run command again\n```\n\n**Issue: \"No components found\"**\n```\n❌ No Components Found\n\nThe components glob pattern didn't match any files.\n\nCurrent pattern: \".\u002Fsrc\u002F**\u002F*.webflow.tsx\"\n\nSolution:\n1. Check component files have correct naming\n2. Verify glob pattern in webflow.json\n3. Common patterns:\n   - \".\u002Fsrc\u002F**\u002F*.webflow.tsx\" (requires .webflow in name)\n   - \".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\" (all tsx in folder)\n   - \".\u002Fsrc\u002FButton.tsx\" (specific file)\n\nFound files:\n- src\u002FButton.tsx (not matching pattern)\n- src\u002FCard.tsx (not matching pattern)\n\nSuggestion: Rename to Button.webflow.tsx or update pattern\n```\n\n\n### Error Handling\n\n**CLI Not Installed:**\n```\n❌ Webflow CLI Not Found\n\nThe Webflow CLI is required for Code Components.\n\nInstallation:\nnpm install -g @webflow\u002Fwebflow-cli\n\nAfter installation, verify:\nwebflow --version\n\nDocumentation: https:\u002F\u002Fdevelopers.webflow.com\u002Fcli\n```\n\n\n\n**Build Failures:**\n```\n❌ Build Failed\n\nError: [Specific error message]\n\nCommon Fixes:\n- TypeScript errors: Review type definitions\n- Missing deps: Run npm install\n- Import errors: Check file paths\n- Syntax errors: Check React component syntax\n\nShow build output for details.\nNeed help? Run: webflow library log\n```\n\n**Bundle Failures:**\n```\n❌ Bundle Failed\n\nError: [Specific error from CLI]\n\nCommon Causes:\n- Invalid component files\n- Webpack configuration errors\n- Dependency conflicts\n- File path issues\n\nView detailed logs: webflow library log\n\nPossible solutions:\n1. Check component file syntax\n2. Verify webflow.json configuration\n3. Remove bundleConfig to use defaults\n4. Check dependencies in package.json\n```\n\n**Deployment Failures:**\n```\n❌ Share Failed\n\nError: [Specific error from CLI]\n\nPossible Causes:\n- Network connection issues\n- Workspace authentication expired\n- Bundle validation failed\n- Workspace permissions\n\nSolutions:\n1. Check internet connection\n2. Re-authenticate: Remove .env and run share again\n3. Fix bundle issues: Run webflow library bundle first\n4. Verify workspace access in Webflow dashboard\n\nRetry share? (yes\u002Fno)\n```\n\n### File Operations\n\n**Reading Files:**\nAlways use Read tool (never modify):\n```\n# View library configuration\nRead: webflow.json\n\n# View package dependencies\nRead: package.json\n\n# View component source\nRead: src\u002FButton.webflow.tsx\n\n# View environment (if exists)\nRead: .env\n```\n\n**Discovering Files:**\nUse Glob tool to find files:\n```\n# Find all webflow components\nGlob: **\u002F*.webflow.tsx\n\n# Find configuration files\nGlob: *.json\n\n# Find source files\nGlob: src\u002F**\u002F*\n\n# Find build output\nGlob: dist\u002F**\u002F*\n```\n\n**Never Use Write\u002FEdit Tools:**\n- Don't create webflow.json with Write (show user the structure)\n- Don't modify component files\n- Don't edit package.json\n- Let user make file changes\n- Only read files to show content\n\n### Progress Indicators\n\n**For Bundling:**\n```\n🔄 Bundling Components...\n\nAnalyzing components... ✓\nResolving dependencies... ✓\nBuilding bundle... ⏳\nOptimizing... ⏳\n\nElapsed: 8s\n```\n\n**For Deployment:**\n```\n🚀 Sharing Library...\n\nCreating bundle... ✓\nUploading to workspace... ⏳\nValidating components... ⏳\n\nUploaded: 287 KB\nElapsed: 12s\n```\n\n### Safety Patterns\n\n**Confirmation Keywords:**\n- \"share\" - Share library to workspace\n- \"deploy\" - Alternative to \"share\"\n- \"proceed\" - Continue with operation\n- \"cancel\" - Cancel operation\n- \"skip\" - Skip optional step\n\n**Preview Before Share:**\nAlways show:\n- What will be shared (library name, components)\n- Where it will go (workspace, or first-time auth needed)\n- Bundle size and validation status\n- Impact of changes (new\u002Fupdated components)\n\n**Transparency:**\n- Show all CLI commands before execution\n- Display CLI output in full\n- Report success\u002Ffailure clearly\n- Provide troubleshooting guidance\n- Show log location for debugging\n\n### Best Practices\n\n**Component Development:**\n- Use TypeScript for type safety\n- Follow React best practices\n- Keep bundle size small (\u003C 1MB ideal)\n- Name files with .webflow extension for clarity\n- Document component props\n\n**Dependency Management:**\n- Keep dependencies minimal\n- Avoid large libraries (lodash, moment)\n- Use tree-shakeable packages\n- Check bundle impact: `webflow library bundle --verbose`\n- Peer dependencies for React (not bundled)\n\n**Updates and Versioning:**\n- Build before sharing\n- Test bundle locally: `webflow library bundle`\n- Share to update: `webflow library share`\n- No version numbers needed (always \"latest\")\n- Test in Designer after deployment\n\n**Workspace Management:**\n- One workspace per .env file\n- Use --api-token for multiple workspaces\n- Add .env to .gitignore\n- Rotate tokens in CI\u002FCD\n- Document which workspace is configured\n\n**Configuration:**\n- Keep webflow.json in project root\n- Use clear library names\n- Use specific component glob patterns\n- Add bundleConfig only if needed\n- Version control webflow.json (not .env)\n\n### Component Lifecycle\n\n**Initial Setup:**\n1. Create\u002Fhave React project\n2. Add webflow.json with library configuration\n3. Name component files (e.g., .webflow.tsx)\n4. Build: `npm run build`\n5. Test bundle: `webflow library bundle`\n6. Share: `webflow library share` (authenticates first time)\n\n**Making Updates:**\n1. Edit component source files\n2. Build: `npm run build`\n3. Share: `webflow library share` (uses saved credentials)\n4. Refresh Designer to see changes\n\n**Testing:**\n1. Bundle locally: `webflow library bundle`\n2. Check bundle size and validation\n3. Fix any issues\n4. Share when ready: `webflow library share`\n5. Open Webflow Designer\n6. Add components to page\n7. Test functionality\n\n**Debugging:**\n1. View logs: `webflow library log`\n2. Bundle with verbose: `webflow library bundle --verbose`\n3. Check configuration: cat webflow.json\n4. Verify build: npm run build\n5. Test in development mode: `webflow library share --dev`\n\n### CLI Command Reference\n\n**Installation:**\n```bash\n# Install CLI globally\nnpm install -g @webflow\u002Fwebflow-cli\n\n# Verify installation\nwebflow --version\n```\n\n**Library Commands:**\n```bash\n# Bundle locally (testing\u002Fvalidation)\nwebflow library bundle [options]\n\n# Share to workspace (bundle + deploy)\nwebflow library share [options]\n\n# View latest log file\nwebflow library log\n```\n\n**Bundle Options:**\n```bash\n# Custom output path\nwebflow library bundle --output-path .\u002Fbuild\n\n# Force bundling (ignore warnings)\nwebflow library bundle --force\n\n# Development mode\nwebflow library bundle --dev\n\n# Show bundler config\nwebflow library bundle --debug-bundler\n\n# Verbose output\nwebflow library bundle --verbose\n```\n\n**Share Options:**\n```bash\n# Standard interactive share\nwebflow library share\n\n# Non-interactive (CI\u002FCD)\nwebflow library share --no-input --api-token \u003CTOKEN>\n\n# Force share (ignore warnings)\nwebflow library share --force\n\n# Development mode\nwebflow library share --dev\n\n# Custom manifest location\nwebflow library share --manifest .\u002Fconfig\u002Fwebflow.json\n```\n\n**Global Options:**\n```bash\n# Show version\nwebflow --version\n\n# Show help\nwebflow --help\nwebflow library --help\nwebflow library share --help\n```\n\n## Quick Reference\n\n**Workflow:** configure webflow.json → build → bundle → share\n\n**Key Commands:**\n- `webflow library bundle` - Bundle locally for testing\n- `webflow library share` - Bundle and deploy to workspace\n- `webflow library log` - View debug logs\n\n**Configuration:** webflow.json with library section\n\n**Authentication:** Automatic on first `webflow library share` (opens browser)\n\n**Environment:** WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN in .env\n\n**Verification:** Always check `webflow --version` first\n\n**Preview:** Show bundle details before sharing\n\n**Confirmation:** Require \"share\" keyword to proceed\n\n**Documentation:** https:\u002F\u002Fdevelopers.webflow.com\u002Fcode-components\u002Fintroduction\n",{"data":41,"body":42},{"name":5,"description":7},{"type":43,"children":44},"root",[45,54,60,67,76,138,146,188,194,201,252,258,376,382,489,495,566,572,670,676,682,690,702,710,719,728,736,745,755,764,772,781,789,798,806,815,823,831,840,846,853,862,869,878,886,895,903,912,920,929,935,942,951,959,968,976,985,991,998,1007,1015,1024,1030,1037,1046,1054,1063,1069,1575,1581,1697,1703,1750,1755,1778,1787,1795,1877,1894,1912,1917,1925,2101,2109,2167,2175,2207,2225,2231,2239,2345,2353,2407,2415,2487,2497,2540,2548,2571,2577,2585,2594,2604,2632,2638,2646,2807,2815,2887,2895,2918,2928,2937,2949,2957,2980,2986,2994,3048,3053,3076,3084,3092,3101,3109,3118,3124,3132,3141,3149,3158,3166,3175,3183,3192,3198,3208,3217,3227,3236,3244,3272,3278,3286,3295,3303,3312,3318,3326,3354,3364,3386,3394,3422,3428,3436,3464,3472,3506,3514,3552,3560,3588,3596,3624,3630,3638,3688,3696,3729,3737,3785,3793,3837,3843,3851,3915,3923,4023,4030,4207,4214,4406,4414,4501,4507,4517,4525,4558,4567,4584,4594,4611,4621,4631,4649],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"code-component",[51],{"type":52,"value":53},"text","Code Component",{"type":46,"tag":55,"props":56,"children":57},"p",{},[58],{"type":52,"value":59},"Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.",{"type":46,"tag":61,"props":62,"children":64},"h2",{"id":63},"important-note",[65],{"type":52,"value":66},"Important Note",{"type":46,"tag":55,"props":68,"children":69},{},[70],{"type":46,"tag":71,"props":72,"children":73},"strong",{},[74],{"type":52,"value":75},"ALWAYS use Bash tool for all Webflow CLI operations:",{"type":46,"tag":77,"props":78,"children":79},"ul",{},[80,94,99,104,115,128,133],{"type":46,"tag":81,"props":82,"children":83},"li",{},[84,86,92],{"type":52,"value":85},"Execute ",{"type":46,"tag":87,"props":88,"children":90},"code",{"className":89},[],[91],{"type":52,"value":9},{"type":52,"value":93}," CLI commands via Bash tool",{"type":46,"tag":81,"props":95,"children":96},{},[97],{"type":52,"value":98},"Use Read tool to examine generated files (never modify)",{"type":46,"tag":81,"props":100,"children":101},{},[102],{"type":52,"value":103},"Use Glob tool to discover project files",{"type":46,"tag":81,"props":105,"children":106},{},[107,109],{"type":52,"value":108},"Verify CLI installation: ",{"type":46,"tag":87,"props":110,"children":112},{"className":111},[],[113],{"type":52,"value":114},"webflow --version",{"type":46,"tag":81,"props":116,"children":117},{},[118,120,126],{"type":52,"value":119},"Check authentication: On first ",{"type":46,"tag":87,"props":121,"children":123},{"className":122},[],[124],{"type":52,"value":125},"webflow library share",{"type":52,"value":127},", workspace authentication happens automatically",{"type":46,"tag":81,"props":129,"children":130},{},[131],{"type":52,"value":132},"DO NOT use Webflow MCP tools for CLI workflows",{"type":46,"tag":81,"props":134,"children":135},{},[136],{"type":52,"value":137},"All CLI commands require proper descriptions (not context parameters)",{"type":46,"tag":55,"props":139,"children":140},{},[141],{"type":46,"tag":71,"props":142,"children":143},{},[144],{"type":52,"value":145},"Package Manager Detection:",{"type":46,"tag":77,"props":147,"children":148},{},[149,178,183],{"type":46,"tag":81,"props":150,"children":151},{},[152,154,160,162,168,170,176],{"type":52,"value":153},"Check for lock files: ",{"type":46,"tag":87,"props":155,"children":157},{"className":156},[],[158],{"type":52,"value":159},"package-lock.json",{"type":52,"value":161}," (npm), ",{"type":46,"tag":87,"props":163,"children":165},{"className":164},[],[166],{"type":52,"value":167},"pnpm-lock.yaml",{"type":52,"value":169}," (pnpm), ",{"type":46,"tag":87,"props":171,"children":173},{"className":172},[],[174],{"type":52,"value":175},"yarn.lock",{"type":52,"value":177}," (yarn)",{"type":46,"tag":81,"props":179,"children":180},{},[181],{"type":52,"value":182},"If no lock file found, ask user which package manager to use (npm\u002Fpnpm\u002Fyarn)",{"type":46,"tag":81,"props":184,"children":185},{},[186],{"type":52,"value":187},"Use detected package manager for all install\u002Fbuild commands",{"type":46,"tag":61,"props":189,"children":191},{"id":190},"instructions",[192],{"type":52,"value":193},"Instructions",{"type":46,"tag":195,"props":196,"children":198},"h3",{"id":197},"phase-1-environment-verification",[199],{"type":52,"value":200},"Phase 1: Environment Verification",{"type":46,"tag":202,"props":203,"children":204},"ol",{},[205,222,232,242],{"type":46,"tag":81,"props":206,"children":207},{},[208,213,215,220],{"type":46,"tag":71,"props":209,"children":210},{},[211],{"type":52,"value":212},"Verify CLI installed",{"type":52,"value":214},": Run ",{"type":46,"tag":87,"props":216,"children":218},{"className":217},[],[219],{"type":52,"value":114},{"type":52,"value":221}," to confirm CLI is installed",{"type":46,"tag":81,"props":223,"children":224},{},[225,230],{"type":46,"tag":71,"props":226,"children":227},{},[228],{"type":52,"value":229},"Check project state",{"type":52,"value":231},": Determine if user has existing React project or needs guidance",{"type":46,"tag":81,"props":233,"children":234},{},[235,240],{"type":46,"tag":71,"props":236,"children":237},{},[238],{"type":52,"value":239},"Identify workspace",{"type":52,"value":241},": Explain that workspace authentication happens on first share",{"type":46,"tag":81,"props":243,"children":244},{},[245,250],{"type":46,"tag":71,"props":246,"children":247},{},[248],{"type":52,"value":249},"Review configuration",{"type":52,"value":251},": Check if webflow.json exists with library configuration",{"type":46,"tag":195,"props":253,"children":255},{"id":254},"phase-2-project-configuration",[256],{"type":52,"value":257},"Phase 2: Project Configuration",{"type":46,"tag":202,"props":259,"children":261},{"start":260},5,[262,290,326,366],{"type":46,"tag":81,"props":263,"children":264},{},[265,270,272],{"type":46,"tag":71,"props":266,"children":267},{},[268],{"type":52,"value":269},"Ask operation type",{"type":52,"value":271},": Clarify what user wants to do:\n",{"type":46,"tag":77,"props":273,"children":274},{},[275,280,285],{"type":46,"tag":81,"props":276,"children":277},{},[278],{"type":52,"value":279},"Configure existing React project for Code Components",{"type":46,"tag":81,"props":281,"children":282},{},[283],{"type":52,"value":284},"Add components to already-configured project",{"type":46,"tag":81,"props":286,"children":287},{},[288],{"type":52,"value":289},"Build and share existing library",{"type":46,"tag":81,"props":291,"children":292},{},[293,298,300],{"type":46,"tag":71,"props":294,"children":295},{},[296],{"type":52,"value":297},"Configure webflow.json",{"type":52,"value":299},": Add library configuration to webflow.json:\n",{"type":46,"tag":77,"props":301,"children":302},{},[303,308,321],{"type":46,"tag":81,"props":304,"children":305},{},[306],{"type":52,"value":307},"Library name (appears in Webflow Designer)",{"type":46,"tag":81,"props":309,"children":310},{},[311,313,319],{"type":52,"value":312},"Components glob pattern (e.g., ",{"type":46,"tag":87,"props":314,"children":316},{"className":315},[],[317],{"type":52,"value":318},".\u002Fsrc\u002F**\u002F*.webflow.tsx",{"type":52,"value":320},")",{"type":46,"tag":81,"props":322,"children":323},{},[324],{"type":52,"value":325},"Optional bundleConfig for custom webpack",{"type":46,"tag":81,"props":327,"children":328},{},[329,334,336],{"type":46,"tag":71,"props":330,"children":331},{},[332],{"type":52,"value":333},"Read configuration files",{"type":52,"value":335},": Use Read tool to show:\n",{"type":46,"tag":77,"props":337,"children":338},{},[339,350,361],{"type":46,"tag":81,"props":340,"children":341},{},[342,348],{"type":46,"tag":87,"props":343,"children":345},{"className":344},[],[346],{"type":52,"value":347},"webflow.json",{"type":52,"value":349}," - Library configuration",{"type":46,"tag":81,"props":351,"children":352},{},[353,359],{"type":46,"tag":87,"props":354,"children":356},{"className":355},[],[357],{"type":52,"value":358},"package.json",{"type":52,"value":360}," - Dependencies and scripts",{"type":46,"tag":81,"props":362,"children":363},{},[364],{"type":52,"value":365},"Component file structure",{"type":46,"tag":81,"props":367,"children":368},{},[369,374],{"type":46,"tag":71,"props":370,"children":371},{},[372],{"type":52,"value":373},"Verify dependencies",{"type":52,"value":375},": Ensure React is installed and build scripts exist",{"type":46,"tag":195,"props":377,"children":379},{"id":378},"phase-3-build-bundle-validation",[380],{"type":52,"value":381},"Phase 3: Build & Bundle Validation",{"type":46,"tag":202,"props":383,"children":385},{"start":384},9,[386,411,421,439,479],{"type":46,"tag":81,"props":387,"children":388},{},[389,394,396,402,404,410],{"type":46,"tag":71,"props":390,"children":391},{},[392],{"type":52,"value":393},"Run build",{"type":52,"value":395},": Execute user's build command (e.g., ",{"type":46,"tag":87,"props":397,"children":399},{"className":398},[],[400],{"type":52,"value":401},"npm run build",{"type":52,"value":403},", ",{"type":46,"tag":87,"props":405,"children":407},{"className":406},[],[408],{"type":52,"value":409},"yarn build",{"type":52,"value":320},{"type":46,"tag":81,"props":412,"children":413},{},[414,419],{"type":46,"tag":71,"props":415,"children":416},{},[417],{"type":52,"value":418},"Validate build output",{"type":52,"value":420},": Check for build errors or warnings",{"type":46,"tag":81,"props":422,"children":423},{},[424,429,431,437],{"type":46,"tag":71,"props":425,"children":426},{},[427],{"type":52,"value":428},"Run bundle command",{"type":52,"value":430},": Execute ",{"type":46,"tag":87,"props":432,"children":434},{"className":433},[],[435],{"type":52,"value":436},"webflow library bundle",{"type":52,"value":438}," for local validation",{"type":46,"tag":81,"props":440,"children":441},{},[442,447,449],{"type":46,"tag":71,"props":443,"children":444},{},[445],{"type":52,"value":446},"Analyze bundle",{"type":52,"value":448},":\n",{"type":46,"tag":77,"props":450,"children":451},{},[452,457,462,474],{"type":46,"tag":81,"props":453,"children":454},{},[455],{"type":52,"value":456},"Bundle size (should be \u003C 2MB)",{"type":46,"tag":81,"props":458,"children":459},{},[460],{"type":52,"value":461},"Dependencies included",{"type":46,"tag":81,"props":463,"children":464},{},[465,467,473],{"type":52,"value":466},"Output location (default: ",{"type":46,"tag":87,"props":468,"children":470},{"className":469},[],[471],{"type":52,"value":472},".\u002Fdist",{"type":52,"value":320},{"type":46,"tag":81,"props":475,"children":476},{},[477],{"type":52,"value":478},"Validation warnings",{"type":46,"tag":81,"props":480,"children":481},{},[482,487],{"type":46,"tag":71,"props":483,"children":484},{},[485],{"type":52,"value":486},"Preview bundle details",{"type":52,"value":488},": Show bundle summary with validation status",{"type":46,"tag":195,"props":490,"children":492},{"id":491},"phase-4-preview-approval",[493],{"type":52,"value":494},"Phase 4: Preview & Approval",{"type":46,"tag":202,"props":496,"children":498},{"start":497},14,[499,536,546,556],{"type":46,"tag":81,"props":500,"children":501},{},[502,507,508],{"type":46,"tag":71,"props":503,"children":504},{},[505],{"type":52,"value":506},"Show deployment preview",{"type":52,"value":448},{"type":46,"tag":77,"props":509,"children":510},{},[511,516,521,526,531],{"type":46,"tag":81,"props":512,"children":513},{},[514],{"type":52,"value":515},"Library name from webflow.json",{"type":46,"tag":81,"props":517,"children":518},{},[519],{"type":52,"value":520},"Component files included",{"type":46,"tag":81,"props":522,"children":523},{},[524],{"type":52,"value":525},"Bundle size and validation status",{"type":46,"tag":81,"props":527,"children":528},{},[529],{"type":52,"value":530},"Target workspace (will be selected on first share)",{"type":46,"tag":81,"props":532,"children":533},{},[534],{"type":52,"value":535},"Explain workspace authentication if first time",{"type":46,"tag":81,"props":537,"children":538},{},[539,544],{"type":46,"tag":71,"props":540,"children":541},{},[542],{"type":52,"value":543},"Explain deployment",{"type":52,"value":545},": What happens when library is shared",{"type":46,"tag":81,"props":547,"children":548},{},[549,554],{"type":46,"tag":71,"props":550,"children":551},{},[552],{"type":52,"value":553},"Require explicit confirmation",{"type":52,"value":555},": User must type \"share\" or \"deploy\" to proceed",{"type":46,"tag":81,"props":557,"children":558},{},[559,564],{"type":46,"tag":71,"props":560,"children":561},{},[562],{"type":52,"value":563},"Confirm workspace",{"type":52,"value":565},": Explain browser will open for workspace selection (first time only)",{"type":46,"tag":195,"props":567,"children":569},{"id":568},"phase-5-deployment-verification",[570],{"type":52,"value":571},"Phase 5: Deployment & Verification",{"type":46,"tag":202,"props":573,"children":575},{"start":574},18,[576,590,600,610,620,630],{"type":46,"tag":81,"props":577,"children":578},{},[579,584,585],{"type":46,"tag":71,"props":580,"children":581},{},[582],{"type":52,"value":583},"Execute share command",{"type":52,"value":214},{"type":46,"tag":87,"props":586,"children":588},{"className":587},[],[589],{"type":52,"value":125},{"type":46,"tag":81,"props":591,"children":592},{},[593,598],{"type":46,"tag":71,"props":594,"children":595},{},[596],{"type":52,"value":597},"Monitor deployment",{"type":52,"value":599},": Show CLI output and progress",{"type":46,"tag":81,"props":601,"children":602},{},[603,608],{"type":46,"tag":71,"props":604,"children":605},{},[606],{"type":52,"value":607},"Handle workspace auth",{"type":52,"value":609},": If first time, guide user through browser authentication",{"type":46,"tag":81,"props":611,"children":612},{},[613,618],{"type":46,"tag":71,"props":614,"children":615},{},[616],{"type":52,"value":617},"Verify deployment success",{"type":52,"value":619},": Confirm library appears in workspace",{"type":46,"tag":81,"props":621,"children":622},{},[623,628],{"type":46,"tag":71,"props":624,"children":625},{},[626],{"type":52,"value":627},"Show .env updates",{"type":52,"value":629},": Explain WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN added",{"type":46,"tag":81,"props":631,"children":632},{},[633,638,639],{"type":46,"tag":71,"props":634,"children":635},{},[636],{"type":52,"value":637},"Provide next steps",{"type":52,"value":448},{"type":46,"tag":77,"props":640,"children":641},{},[642,647,652,657],{"type":46,"tag":81,"props":643,"children":644},{},[645],{"type":52,"value":646},"How to use components in Designer",{"type":46,"tag":81,"props":648,"children":649},{},[650],{"type":52,"value":651},"How to update components",{"type":46,"tag":81,"props":653,"children":654},{},[655],{"type":52,"value":656},"Testing recommendations",{"type":46,"tag":81,"props":658,"children":659},{},[660,662,668],{"type":52,"value":661},"Using ",{"type":46,"tag":87,"props":663,"children":665},{"className":664},[],[666],{"type":52,"value":667},"webflow library log",{"type":52,"value":669}," for debugging",{"type":46,"tag":61,"props":671,"children":673},{"id":672},"examples",[674],{"type":52,"value":675},"Examples",{"type":46,"tag":195,"props":677,"children":679},{"id":678},"example-1-configure-existing-react-project",[680],{"type":52,"value":681},"Example 1: Configure Existing React Project",{"type":46,"tag":55,"props":683,"children":684},{},[685],{"type":46,"tag":71,"props":686,"children":687},{},[688],{"type":52,"value":689},"User prompt:",{"type":46,"tag":691,"props":692,"children":696},"pre",{"className":693,"code":695,"language":52},[694],"language-text","I have a React project with some components I want to share to Webflow\n",[697],{"type":46,"tag":87,"props":698,"children":700},{"__ignoreMap":699},"",[701],{"type":52,"value":695},{"type":46,"tag":55,"props":703,"children":704},{},[705],{"type":46,"tag":71,"props":706,"children":707},{},[708],{"type":52,"value":709},"Step 1: Environment Verification",{"type":46,"tag":691,"props":711,"children":714},{"className":712,"code":713,"language":52},[694],"🔍 Webflow CLI Environment Check\n\nChecking CLI installation...\n✓ Webflow CLI installed: v1.5.2\n\nCurrent directory: \u002FUsers\u002Fuser\u002Fprojects\u002Fmy-components\n✓ Found package.json with React project\n✓ Found src\u002F directory with components\n\nChecking webflow.json...\n⚠️ No webflow.json found - needs configuration\n\nReady to configure for Code Components? (yes\u002Fno)\n",[715],{"type":46,"tag":87,"props":716,"children":717},{"__ignoreMap":699},[718],{"type":52,"value":713},{"type":46,"tag":55,"props":720,"children":721},{},[722],{"type":46,"tag":723,"props":724,"children":725},"em",{},[726],{"type":52,"value":727},"User confirms: yes",{"type":46,"tag":55,"props":729,"children":730},{},[731],{"type":46,"tag":71,"props":732,"children":733},{},[734],{"type":52,"value":735},"Step 2: Project Configuration",{"type":46,"tag":691,"props":737,"children":740},{"className":738,"code":739,"language":52},[694],"📋 Configure Code Components Library\n\nI'll help you add the library configuration to webflow.json.\n\nQuestions:\n1. What should your library be called in Webflow Designer?\n   Example: \"My Component Library\"\n\n2. Where are your component files located?\n   Pattern examples:\n   - \".\u002Fsrc\u002F**\u002F*.webflow.tsx\" (components with .webflow.tsx extension)\n   - \".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\" (all components in src\u002Fcomponents\u002F)\n   - \".\u002Fsrc\u002FButton.tsx\" (specific files)\n\nLet me know the library name and component pattern.\n",[741],{"type":46,"tag":87,"props":742,"children":743},{"__ignoreMap":699},[744],{"type":52,"value":739},{"type":46,"tag":55,"props":746,"children":747},{},[748,753],{"type":46,"tag":723,"props":749,"children":750},{},[751],{"type":52,"value":752},"User provides: \"Acme Components\" and \".\u002Fsrc\u002F**\u002F",{"type":52,"value":754},".webflow.tsx\"*",{"type":46,"tag":691,"props":756,"children":759},{"className":757,"code":758,"language":52},[694],"Creating webflow.json configuration...\n\n{\n  \"library\": {\n    \"name\": \"Acme Components\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"]\n  }\n}\n\n✓ Configuration ready\n\nFound component files:\n- src\u002FButton.webflow.tsx\n- src\u002FCard.webflow.tsx\n- src\u002FHero.webflow.tsx\n\nNext: Build your components and run bundle command.\n",[760],{"type":46,"tag":87,"props":761,"children":762},{"__ignoreMap":699},[763],{"type":52,"value":758},{"type":46,"tag":55,"props":765,"children":766},{},[767],{"type":46,"tag":71,"props":768,"children":769},{},[770],{"type":52,"value":771},"Step 3: Build & Bundle Validation",{"type":46,"tag":691,"props":773,"children":776},{"className":774,"code":775,"language":52},[694],"🔨 Building Components\n\nWhat build command do you use? (e.g., npm run build, yarn build)\n",[777],{"type":46,"tag":87,"props":778,"children":779},{"__ignoreMap":699},[780],{"type":52,"value":775},{"type":46,"tag":55,"props":782,"children":783},{},[784],{"type":46,"tag":723,"props":785,"children":786},{},[787],{"type":52,"value":788},"User responds: npm run build",{"type":46,"tag":691,"props":790,"children":793},{"className":791,"code":792,"language":52},[694],"Executing: npm run build\n\nOutput:\n✓ TypeScript compilation successful\n✓ Components built to dist\u002F\n\nCreating bundle for validation...\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing 3 components\n✓ Bundling dependencies\n✓ Creating bundle\n✓ Bundle created: dist\u002Fbundle.js\n\n📦 Bundle Analysis:\n- Size: 287 KB (✓ within 2MB limit)\n- Components: 3 (Button, Card, Hero)\n- Dependencies: react@18.2.0, react-dom@18.2.0\n- Output: .\u002Fdist\n- Validation: ✅ All checks passed\n",[794],{"type":46,"tag":87,"props":795,"children":796},{"__ignoreMap":699},[797],{"type":52,"value":792},{"type":46,"tag":55,"props":799,"children":800},{},[801],{"type":46,"tag":71,"props":802,"children":803},{},[804],{"type":52,"value":805},"Step 4: Preview & Approval",{"type":46,"tag":691,"props":807,"children":810},{"className":808,"code":809,"language":52},[694],"📋 Deployment Preview\n\nLibrary: Acme Components\nComponents: 3 (Button, Card, Hero)\nBundle Size: 287 KB\n\nWorkspace Authentication:\n⚠️ This appears to be your first deployment. When you run 'share':\n1. Browser will open for workspace authentication\n2. Select your target Webflow workspace\n3. Grant access to deploy components\n4. CLI will create .env with credentials:\n   - WEBFLOW_WORKSPACE_ID\n   - WEBFLOW_WORKSPACE_API_TOKEN\n\nValidation Status: ✅ Ready to deploy\n- Bundle size: ✓ 287 KB (\u003C 2MB limit)\n- Dependencies: ✓ Valid (React 18.2.0)\n- Configuration: ✓ webflow.json valid\n- Components: ✓ 3 components found\n\n⚠️ Type \"share\" to deploy this library to your workspace.\n",[811],{"type":46,"tag":87,"props":812,"children":813},{"__ignoreMap":699},[814],{"type":52,"value":809},{"type":46,"tag":55,"props":816,"children":817},{},[818],{"type":46,"tag":723,"props":819,"children":820},{},[821],{"type":52,"value":822},"User confirms: share",{"type":46,"tag":55,"props":824,"children":825},{},[826],{"type":46,"tag":71,"props":827,"children":828},{},[829],{"type":52,"value":830},"Step 5: Deployment & Verification",{"type":46,"tag":691,"props":832,"children":835},{"className":833,"code":834,"language":52},[694],"🚀 Deploying Library\n\nExecuting: webflow library share\n\nOutput:\n✓ Bundling library (287 KB)\n✓ Opening browser for workspace authentication...\n\n[Browser opens - user authenticates and selects workspace]\n\n✓ Workspace authenticated: Acme Corp\n✓ Uploading bundle\n✓ Validating components\n✓ Registering with workspace\n✓ Library deployed successfully\n\n✅ Library Deployed: Acme Components\n\nWorkspace: Acme Corp\nComponents: 3 (Button, Card, Hero)\nVersion: Latest\nStatus: Active\n\n📁 Environment Updated:\nCreated .env file with:\n- WEBFLOW_WORKSPACE_ID=workspace_abc123\n- WEBFLOW_WORKSPACE_API_TOKEN=************\n\n⚠️ Important: Add .env to your .gitignore file!\n\n📋 Next Steps:\n1. Open Webflow Designer\n2. Go to Add Elements → Code Components\n3. Find \"Acme Components\" in the list\n4. Drag components onto canvas to use\n\n💡 To update components:\n1. Make changes to your component files\n2. Run: npm run build\n3. Run: webflow library share\n   (No re-authentication needed - uses .env credentials)\n\n🔍 For debugging:\n- View logs: webflow library log\n- Bundle locally: webflow library bundle\n- Check bundle size: webflow library bundle --verbose\n\nComponent Library URL: https:\u002F\u002Fwebflow.com\u002Fdashboard\u002Fworkspaces\u002Facme-corp\u002Fcomponents\n",[836],{"type":46,"tag":87,"props":837,"children":838},{"__ignoreMap":699},[839],{"type":52,"value":834},{"type":46,"tag":195,"props":841,"children":843},{"id":842},"example-2-update-existing-library",[844],{"type":52,"value":845},"Example 2: Update Existing Library",{"type":46,"tag":55,"props":847,"children":848},{},[849],{"type":46,"tag":71,"props":850,"children":851},{},[852],{"type":52,"value":689},{"type":46,"tag":691,"props":854,"children":857},{"className":855,"code":856,"language":52},[694],"Update my Code Components library with new changes\n",[858],{"type":46,"tag":87,"props":859,"children":860},{"__ignoreMap":699},[861],{"type":52,"value":856},{"type":46,"tag":55,"props":863,"children":864},{},[865],{"type":46,"tag":71,"props":866,"children":867},{},[868],{"type":52,"value":709},{"type":46,"tag":691,"props":870,"children":873},{"className":871,"code":872,"language":52},[694],"🔍 Code Components Library Check\n\nChecking configuration...\n✓ webflow.json found with library config\n✓ Library name: Acme Components\n✓ Components pattern: .\u002Fsrc\u002F**\u002F*.webflow.tsx\n\nChecking authentication...\n✓ Found .env with workspace credentials\n✓ Workspace: Acme Corp\n\nFound components:\n- src\u002FButton.webflow.tsx (modified)\n- src\u002FCard.webflow.tsx\n- src\u002FHero.webflow.tsx\n- src\u002FForm.webflow.tsx (new)\n\nReady to build and share updates? (yes\u002Fno)\n",[874],{"type":46,"tag":87,"props":875,"children":876},{"__ignoreMap":699},[877],{"type":52,"value":872},{"type":46,"tag":55,"props":879,"children":880},{},[881],{"type":46,"tag":71,"props":882,"children":883},{},[884],{"type":52,"value":885},"Step 2-3: Build & Bundle",{"type":46,"tag":691,"props":887,"children":890},{"className":888,"code":889,"language":52},[694],"🔨 Building Components\n\nExecuting: npm run build\n✓ Build complete\n\nBundling for validation...\nExecuting: webflow library bundle\n\n📦 Bundle Analysis:\n- Size: 312 KB (✓ within 2MB limit)\n- Components: 4 (Button, Card, Hero, Form) [+1 new]\n- Changes: Button updated, Form added\n- Validation: ✅ All checks passed\n",[891],{"type":46,"tag":87,"props":892,"children":893},{"__ignoreMap":699},[894],{"type":52,"value":889},{"type":46,"tag":55,"props":896,"children":897},{},[898],{"type":46,"tag":71,"props":899,"children":900},{},[901],{"type":52,"value":902},"Step 4: Preview",{"type":46,"tag":691,"props":904,"children":907},{"className":905,"code":906,"language":52},[694],"📋 Update Preview\n\nLibrary: Acme Components\nWorkspace: Acme Corp (already authenticated)\n\nChanges:\n✓ Button component (updated)\n✓ Form component (new)\n  Card component (unchanged)\n  Hero component (unchanged)\n\nBundle Size: 312 KB (+25 KB from 287 KB)\n\nNo re-authentication needed - using existing workspace credentials.\n\n⚠️ Type \"share\" to update the library.\n",[908],{"type":46,"tag":87,"props":909,"children":910},{"__ignoreMap":699},[911],{"type":52,"value":906},{"type":46,"tag":55,"props":913,"children":914},{},[915],{"type":46,"tag":71,"props":916,"children":917},{},[918],{"type":52,"value":919},"Step 5: Deployment",{"type":46,"tag":691,"props":921,"children":924},{"className":922,"code":923,"language":52},[694],"🚀 Updating Library\n\nExecuting: webflow library share\n\nOutput:\n✓ Bundling library (312 KB)\n✓ Using workspace: Acme Corp\n✓ Uploading bundle\n✓ Validating components\n✓ Updating library\n✓ Library updated successfully\n\n✅ Library Updated: Acme Components\n\nChanges deployed:\n- Button: Updated ✨\n- Form: Added 🆕\n- Card: Unchanged\n- Hero: Unchanged\n\n💡 Refresh Webflow Designer to see changes:\n1. Open Designer\n2. Components may auto-refresh\n3. Or refresh browser if needed\n\nComponents updated in workspace!\n",[925],{"type":46,"tag":87,"props":926,"children":927},{"__ignoreMap":699},[928],{"type":52,"value":923},{"type":46,"tag":195,"props":930,"children":932},{"id":931},"example-3-first-time-bundle-testing",[933],{"type":52,"value":934},"Example 3: First-Time Bundle Testing",{"type":46,"tag":55,"props":936,"children":937},{},[938],{"type":46,"tag":71,"props":939,"children":940},{},[941],{"type":52,"value":689},{"type":46,"tag":691,"props":943,"children":946},{"className":944,"code":945,"language":52},[694],"I want to test my bundle locally before sharing\n",[947],{"type":46,"tag":87,"props":948,"children":949},{"__ignoreMap":699},[950],{"type":52,"value":945},{"type":46,"tag":55,"props":952,"children":953},{},[954],{"type":46,"tag":71,"props":955,"children":956},{},[957],{"type":52,"value":958},"Step 1-2: Verification & Configuration",{"type":46,"tag":691,"props":960,"children":963},{"className":961,"code":962,"language":52},[694],"🔍 Local Bundle Testing\n\n✓ webflow.json configured\n✓ Library: My Components\n✓ Components: .\u002Fsrc\u002F**\u002F*.webflow.tsx\n\nRunning local bundle only (no deployment)...\n",[964],{"type":46,"tag":87,"props":965,"children":966},{"__ignoreMap":699},[967],{"type":52,"value":962},{"type":46,"tag":55,"props":969,"children":970},{},[971],{"type":46,"tag":71,"props":972,"children":973},{},[974],{"type":52,"value":975},"Step 3: Bundle Validation",{"type":46,"tag":691,"props":977,"children":980},{"className":978,"code":979,"language":52},[694],"🔨 Building Components\n\nExecuting: npm run build\n✓ Build complete\n\nCreating local bundle...\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing components\n✓ Bundling dependencies\n✓ Optimizing output\n✓ Bundle created: dist\u002Fbundle.js\n\n📦 Bundle Details:\n\nSize: 1.2 MB (✓ within 2MB limit)\n\nComponents (5):\n├── Button.webflow.tsx (25 KB)\n├── Card.webflow.tsx (18 KB)\n├── Hero.webflow.tsx (45 KB)\n├── Form.webflow.tsx (32 KB)\n└── Modal.webflow.tsx (28 KB)\n\nDependencies:\n├── react@18.2.0 (included)\n├── react-dom@18.2.0 (included)\n└── classnames@2.3.1 (included)\n\nOutput Directory: .\u002Fdist\u002F\n- bundle.js (1.2 MB)\n- manifest.json\n\nValidation: ✅ All checks passed\n\n💡 Bundle is valid and ready to share!\n   Run: webflow library share (when ready to deploy)\n",[981],{"type":46,"tag":87,"props":982,"children":983},{"__ignoreMap":699},[984],{"type":52,"value":979},{"type":46,"tag":195,"props":986,"children":988},{"id":987},"example-4-bundle-too-large",[989],{"type":52,"value":990},"Example 4: Bundle Too Large",{"type":46,"tag":55,"props":992,"children":993},{},[994],{"type":46,"tag":71,"props":995,"children":996},{},[997],{"type":52,"value":689},{"type":46,"tag":691,"props":999,"children":1002},{"className":1000,"code":1001,"language":52},[694],"Share my components library\n",[1003],{"type":46,"tag":87,"props":1004,"children":1005},{"__ignoreMap":699},[1006],{"type":52,"value":1001},{"type":46,"tag":55,"props":1008,"children":1009},{},[1010],{"type":46,"tag":71,"props":1011,"children":1012},{},[1013],{"type":52,"value":1014},"Bundle Validation Error:",{"type":46,"tag":691,"props":1016,"children":1019},{"className":1017,"code":1018,"language":52},[694],"🔨 Building and Bundling\n\nExecuting: npm run build\n✓ Build complete\n\nExecuting: webflow library bundle\n\nOutput:\n✓ Analyzing components\n✓ Bundling dependencies\n⚠️ Bundle size check...\n\n📦 Bundle Analysis:\n- Size: 2.4 MB (❌ exceeds 2MB limit)\n- Components: 6\n- Dependencies: react@18.2.0, react-dom@18.2.0, lodash@4.17.21, moment@2.29.4\n- Validation: ❌ Issues found\n\n❌ Bundle Too Large\n\nCurrent size: 2.4 MB\nMaximum allowed: 2 MB\nExceeded by: 400 KB\n\n📊 Size Breakdown:\n- React + React DOM: ~800 KB\n- lodash: ~500 KB ⚠️\n- moment: ~350 KB ⚠️\n- Your components: ~750 KB\n\n💡 Recommendations:\n1. Remove lodash (use native JS instead)\n   - Replace _.map with Array.map\n   - Replace _.filter with Array.filter\n   - Or use lodash-es and import specific functions\n\n2. Replace moment with lighter alternative\n   - Use date-fns (~15 KB vs 350 KB)\n   - Or use native Intl.DateTimeFormat\n\n3. Optimize component code\n   - Remove unused imports\n   - Enable tree-shaking\n   - Split large components\n\n4. Use external assets\n   - Host large images externally\n   - Use CDN for static assets\n\nWould you like to:\n1. Continue anyway (using --force flag, not recommended)\n2. Review component imports to optimize\n3. Cancel and fix manually\n",[1020],{"type":46,"tag":87,"props":1021,"children":1022},{"__ignoreMap":699},[1023],{"type":52,"value":1018},{"type":46,"tag":195,"props":1025,"children":1027},{"id":1026},"example-5-cicd-deployment",[1028],{"type":52,"value":1029},"Example 5: CI\u002FCD Deployment",{"type":46,"tag":55,"props":1031,"children":1032},{},[1033],{"type":46,"tag":71,"props":1034,"children":1035},{},[1036],{"type":52,"value":689},{"type":46,"tag":691,"props":1038,"children":1041},{"className":1039,"code":1040,"language":52},[694],"How do I deploy in CI\u002FCD pipeline?\n",[1042],{"type":46,"tag":87,"props":1043,"children":1044},{"__ignoreMap":699},[1045],{"type":52,"value":1040},{"type":46,"tag":55,"props":1047,"children":1048},{},[1049],{"type":46,"tag":71,"props":1050,"children":1051},{},[1052],{"type":52,"value":1053},"Response:",{"type":46,"tag":691,"props":1055,"children":1058},{"className":1056,"code":1057,"language":52},[694],"🤖 CI\u002FCD Deployment Setup\n\nFor automated deployments, use non-interactive mode with API tokens.\n\n### Setup Steps:\n\n1. **Get Workspace API Token**\n   - Open Workspace Settings in Webflow\n   - Go to Integrations → Workspace API Token\n   - Generate new token\n   - Copy token securely\n\n2. **Add to CI\u002FCD Secrets**\n   - Add as environment variable: WORKSPACE_API_TOKEN\n   - Never commit tokens to version control\n\n3. **Deployment Command**\n   ```bash\n   webflow library share --api-token $WORKSPACE_API_TOKEN --no-input\n",[1059],{"type":46,"tag":87,"props":1060,"children":1061},{"__ignoreMap":699},[1062],{"type":52,"value":1057},{"type":46,"tag":195,"props":1064,"children":1066},{"id":1065},"example-github-actions",[1067],{"type":52,"value":1068},"Example: GitHub Actions",{"type":46,"tag":691,"props":1070,"children":1074},{"className":1071,"code":1072,"language":1073,"meta":699,"style":699},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","name: Deploy Components\non:\n  push:\n    branches: [main]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v3\n\n      - name: Setup Node\n        uses: actions\u002Fsetup-node@v3\n        with:\n          node-version: 18\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Install Webflow CLI\n        run: npm install -g @webflow\u002Fwebflow-cli\n\n      - name: Build components\n        run: npm run build\n\n      - name: Deploy to Webflow\n        run: |\n          webflow library share \\\n            --api-token ${{ secrets.WORKSPACE_API_TOKEN }} \\\n            --no-input \\\n            --force\n        env:\n          WORKSPACE_API_TOKEN: ${{ secrets.WORKSPACE_API_TOKEN }}\n","yaml",[1075],{"type":46,"tag":87,"props":1076,"children":1077},{"__ignoreMap":699},[1078,1102,1116,1129,1157,1166,1179,1192,1210,1222,1245,1253,1275,1293,1305,1324,1332,1352,1369,1377,1398,1415,1423,1444,1461,1469,1490,1508,1517,1526,1535,1544,1557],{"type":46,"tag":1079,"props":1080,"children":1083},"span",{"class":1081,"line":1082},"line",1,[1084,1090,1096],{"type":46,"tag":1079,"props":1085,"children":1087},{"style":1086},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1088],{"type":52,"value":1089},"name",{"type":46,"tag":1079,"props":1091,"children":1093},{"style":1092},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1094],{"type":52,"value":1095},":",{"type":46,"tag":1079,"props":1097,"children":1099},{"style":1098},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1100],{"type":52,"value":1101}," Deploy Components\n",{"type":46,"tag":1079,"props":1103,"children":1105},{"class":1081,"line":1104},2,[1106,1112],{"type":46,"tag":1079,"props":1107,"children":1109},{"style":1108},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1110],{"type":52,"value":1111},"on",{"type":46,"tag":1079,"props":1113,"children":1114},{"style":1092},[1115],{"type":52,"value":448},{"type":46,"tag":1079,"props":1117,"children":1119},{"class":1081,"line":1118},3,[1120,1125],{"type":46,"tag":1079,"props":1121,"children":1122},{"style":1086},[1123],{"type":52,"value":1124},"  push",{"type":46,"tag":1079,"props":1126,"children":1127},{"style":1092},[1128],{"type":52,"value":448},{"type":46,"tag":1079,"props":1130,"children":1132},{"class":1081,"line":1131},4,[1133,1138,1142,1147,1152],{"type":46,"tag":1079,"props":1134,"children":1135},{"style":1086},[1136],{"type":52,"value":1137},"    branches",{"type":46,"tag":1079,"props":1139,"children":1140},{"style":1092},[1141],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1143,"children":1144},{"style":1092},[1145],{"type":52,"value":1146}," [",{"type":46,"tag":1079,"props":1148,"children":1149},{"style":1098},[1150],{"type":52,"value":1151},"main",{"type":46,"tag":1079,"props":1153,"children":1154},{"style":1092},[1155],{"type":52,"value":1156},"]\n",{"type":46,"tag":1079,"props":1158,"children":1159},{"class":1081,"line":260},[1160],{"type":46,"tag":1079,"props":1161,"children":1163},{"emptyLinePlaceholder":1162},true,[1164],{"type":52,"value":1165},"\n",{"type":46,"tag":1079,"props":1167,"children":1169},{"class":1081,"line":1168},6,[1170,1175],{"type":46,"tag":1079,"props":1171,"children":1172},{"style":1086},[1173],{"type":52,"value":1174},"jobs",{"type":46,"tag":1079,"props":1176,"children":1177},{"style":1092},[1178],{"type":52,"value":448},{"type":46,"tag":1079,"props":1180,"children":1182},{"class":1081,"line":1181},7,[1183,1188],{"type":46,"tag":1079,"props":1184,"children":1185},{"style":1086},[1186],{"type":52,"value":1187},"  deploy",{"type":46,"tag":1079,"props":1189,"children":1190},{"style":1092},[1191],{"type":52,"value":448},{"type":46,"tag":1079,"props":1193,"children":1195},{"class":1081,"line":1194},8,[1196,1201,1205],{"type":46,"tag":1079,"props":1197,"children":1198},{"style":1086},[1199],{"type":52,"value":1200},"    runs-on",{"type":46,"tag":1079,"props":1202,"children":1203},{"style":1092},[1204],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1206,"children":1207},{"style":1098},[1208],{"type":52,"value":1209}," ubuntu-latest\n",{"type":46,"tag":1079,"props":1211,"children":1212},{"class":1081,"line":384},[1213,1218],{"type":46,"tag":1079,"props":1214,"children":1215},{"style":1086},[1216],{"type":52,"value":1217},"    steps",{"type":46,"tag":1079,"props":1219,"children":1220},{"style":1092},[1221],{"type":52,"value":448},{"type":46,"tag":1079,"props":1223,"children":1225},{"class":1081,"line":1224},10,[1226,1231,1236,1240],{"type":46,"tag":1079,"props":1227,"children":1228},{"style":1092},[1229],{"type":52,"value":1230},"      -",{"type":46,"tag":1079,"props":1232,"children":1233},{"style":1086},[1234],{"type":52,"value":1235}," uses",{"type":46,"tag":1079,"props":1237,"children":1238},{"style":1092},[1239],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1241,"children":1242},{"style":1098},[1243],{"type":52,"value":1244}," actions\u002Fcheckout@v3\n",{"type":46,"tag":1079,"props":1246,"children":1248},{"class":1081,"line":1247},11,[1249],{"type":46,"tag":1079,"props":1250,"children":1251},{"emptyLinePlaceholder":1162},[1252],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1254,"children":1256},{"class":1081,"line":1255},12,[1257,1261,1266,1270],{"type":46,"tag":1079,"props":1258,"children":1259},{"style":1092},[1260],{"type":52,"value":1230},{"type":46,"tag":1079,"props":1262,"children":1263},{"style":1086},[1264],{"type":52,"value":1265}," name",{"type":46,"tag":1079,"props":1267,"children":1268},{"style":1092},[1269],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1271,"children":1272},{"style":1098},[1273],{"type":52,"value":1274}," Setup Node\n",{"type":46,"tag":1079,"props":1276,"children":1278},{"class":1081,"line":1277},13,[1279,1284,1288],{"type":46,"tag":1079,"props":1280,"children":1281},{"style":1086},[1282],{"type":52,"value":1283},"        uses",{"type":46,"tag":1079,"props":1285,"children":1286},{"style":1092},[1287],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1289,"children":1290},{"style":1098},[1291],{"type":52,"value":1292}," actions\u002Fsetup-node@v3\n",{"type":46,"tag":1079,"props":1294,"children":1295},{"class":1081,"line":497},[1296,1301],{"type":46,"tag":1079,"props":1297,"children":1298},{"style":1086},[1299],{"type":52,"value":1300},"        with",{"type":46,"tag":1079,"props":1302,"children":1303},{"style":1092},[1304],{"type":52,"value":448},{"type":46,"tag":1079,"props":1306,"children":1308},{"class":1081,"line":1307},15,[1309,1314,1318],{"type":46,"tag":1079,"props":1310,"children":1311},{"style":1086},[1312],{"type":52,"value":1313},"          node-version",{"type":46,"tag":1079,"props":1315,"children":1316},{"style":1092},[1317],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1319,"children":1321},{"style":1320},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1322],{"type":52,"value":1323}," 18\n",{"type":46,"tag":1079,"props":1325,"children":1327},{"class":1081,"line":1326},16,[1328],{"type":46,"tag":1079,"props":1329,"children":1330},{"emptyLinePlaceholder":1162},[1331],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1333,"children":1334},{"class":1081,"line":31},[1335,1339,1343,1347],{"type":46,"tag":1079,"props":1336,"children":1337},{"style":1092},[1338],{"type":52,"value":1230},{"type":46,"tag":1079,"props":1340,"children":1341},{"style":1086},[1342],{"type":52,"value":1265},{"type":46,"tag":1079,"props":1344,"children":1345},{"style":1092},[1346],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1348,"children":1349},{"style":1098},[1350],{"type":52,"value":1351}," Install dependencies\n",{"type":46,"tag":1079,"props":1353,"children":1354},{"class":1081,"line":574},[1355,1360,1364],{"type":46,"tag":1079,"props":1356,"children":1357},{"style":1086},[1358],{"type":52,"value":1359},"        run",{"type":46,"tag":1079,"props":1361,"children":1362},{"style":1092},[1363],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1365,"children":1366},{"style":1098},[1367],{"type":52,"value":1368}," npm install\n",{"type":46,"tag":1079,"props":1370,"children":1372},{"class":1081,"line":1371},19,[1373],{"type":46,"tag":1079,"props":1374,"children":1375},{"emptyLinePlaceholder":1162},[1376],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1378,"children":1380},{"class":1081,"line":1379},20,[1381,1385,1389,1393],{"type":46,"tag":1079,"props":1382,"children":1383},{"style":1092},[1384],{"type":52,"value":1230},{"type":46,"tag":1079,"props":1386,"children":1387},{"style":1086},[1388],{"type":52,"value":1265},{"type":46,"tag":1079,"props":1390,"children":1391},{"style":1092},[1392],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1394,"children":1395},{"style":1098},[1396],{"type":52,"value":1397}," Install Webflow CLI\n",{"type":46,"tag":1079,"props":1399,"children":1401},{"class":1081,"line":1400},21,[1402,1406,1410],{"type":46,"tag":1079,"props":1403,"children":1404},{"style":1086},[1405],{"type":52,"value":1359},{"type":46,"tag":1079,"props":1407,"children":1408},{"style":1092},[1409],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1411,"children":1412},{"style":1098},[1413],{"type":52,"value":1414}," npm install -g @webflow\u002Fwebflow-cli\n",{"type":46,"tag":1079,"props":1416,"children":1418},{"class":1081,"line":1417},22,[1419],{"type":46,"tag":1079,"props":1420,"children":1421},{"emptyLinePlaceholder":1162},[1422],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1424,"children":1426},{"class":1081,"line":1425},23,[1427,1431,1435,1439],{"type":46,"tag":1079,"props":1428,"children":1429},{"style":1092},[1430],{"type":52,"value":1230},{"type":46,"tag":1079,"props":1432,"children":1433},{"style":1086},[1434],{"type":52,"value":1265},{"type":46,"tag":1079,"props":1436,"children":1437},{"style":1092},[1438],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1440,"children":1441},{"style":1098},[1442],{"type":52,"value":1443}," Build components\n",{"type":46,"tag":1079,"props":1445,"children":1447},{"class":1081,"line":1446},24,[1448,1452,1456],{"type":46,"tag":1079,"props":1449,"children":1450},{"style":1086},[1451],{"type":52,"value":1359},{"type":46,"tag":1079,"props":1453,"children":1454},{"style":1092},[1455],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1457,"children":1458},{"style":1098},[1459],{"type":52,"value":1460}," npm run build\n",{"type":46,"tag":1079,"props":1462,"children":1464},{"class":1081,"line":1463},25,[1465],{"type":46,"tag":1079,"props":1466,"children":1467},{"emptyLinePlaceholder":1162},[1468],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1470,"children":1472},{"class":1081,"line":1471},26,[1473,1477,1481,1485],{"type":46,"tag":1079,"props":1474,"children":1475},{"style":1092},[1476],{"type":52,"value":1230},{"type":46,"tag":1079,"props":1478,"children":1479},{"style":1086},[1480],{"type":52,"value":1265},{"type":46,"tag":1079,"props":1482,"children":1483},{"style":1092},[1484],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1486,"children":1487},{"style":1098},[1488],{"type":52,"value":1489}," Deploy to Webflow\n",{"type":46,"tag":1079,"props":1491,"children":1493},{"class":1081,"line":1492},27,[1494,1498,1502],{"type":46,"tag":1079,"props":1495,"children":1496},{"style":1086},[1497],{"type":52,"value":1359},{"type":46,"tag":1079,"props":1499,"children":1500},{"style":1092},[1501],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1503,"children":1505},{"style":1504},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1506],{"type":52,"value":1507}," |\n",{"type":46,"tag":1079,"props":1509,"children":1511},{"class":1081,"line":1510},28,[1512],{"type":46,"tag":1079,"props":1513,"children":1514},{"style":1098},[1515],{"type":52,"value":1516},"          webflow library share \\\n",{"type":46,"tag":1079,"props":1518,"children":1520},{"class":1081,"line":1519},29,[1521],{"type":46,"tag":1079,"props":1522,"children":1523},{"style":1098},[1524],{"type":52,"value":1525},"            --api-token ${{ secrets.WORKSPACE_API_TOKEN }} \\\n",{"type":46,"tag":1079,"props":1527,"children":1529},{"class":1081,"line":1528},30,[1530],{"type":46,"tag":1079,"props":1531,"children":1532},{"style":1098},[1533],{"type":52,"value":1534},"            --no-input \\\n",{"type":46,"tag":1079,"props":1536,"children":1538},{"class":1081,"line":1537},31,[1539],{"type":46,"tag":1079,"props":1540,"children":1541},{"style":1098},[1542],{"type":52,"value":1543},"            --force\n",{"type":46,"tag":1079,"props":1545,"children":1547},{"class":1081,"line":1546},32,[1548,1553],{"type":46,"tag":1079,"props":1549,"children":1550},{"style":1086},[1551],{"type":52,"value":1552},"        env",{"type":46,"tag":1079,"props":1554,"children":1555},{"style":1092},[1556],{"type":52,"value":448},{"type":46,"tag":1079,"props":1558,"children":1560},{"class":1081,"line":1559},33,[1561,1566,1570],{"type":46,"tag":1079,"props":1562,"children":1563},{"style":1086},[1564],{"type":52,"value":1565},"          WORKSPACE_API_TOKEN",{"type":46,"tag":1079,"props":1567,"children":1568},{"style":1092},[1569],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1571,"children":1572},{"style":1098},[1573],{"type":52,"value":1574}," ${{ secrets.WORKSPACE_API_TOKEN }}\n",{"type":46,"tag":195,"props":1576,"children":1578},{"id":1577},"multiple-workspaces",[1579],{"type":52,"value":1580},"Multiple Workspaces:",{"type":46,"tag":691,"props":1582,"children":1586},{"className":1583,"code":1584,"language":1585,"meta":699,"style":699},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Deploy to workspace 1\nwebflow library share \\\n  --api-token $WORKSPACE_1_TOKEN \\\n  --no-input\n\n# Deploy to workspace 2\nwebflow library share \\\n  --api-token $WORKSPACE_2_TOKEN \\\n  --no-input\n","bash",[1587],{"type":46,"tag":87,"props":1588,"children":1589},{"__ignoreMap":699},[1590,1599,1623,1636,1644,1651,1659,1678,1690],{"type":46,"tag":1079,"props":1591,"children":1592},{"class":1081,"line":1082},[1593],{"type":46,"tag":1079,"props":1594,"children":1596},{"style":1595},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1597],{"type":52,"value":1598},"# Deploy to workspace 1\n",{"type":46,"tag":1079,"props":1600,"children":1601},{"class":1081,"line":1104},[1602,1607,1612,1617],{"type":46,"tag":1079,"props":1603,"children":1605},{"style":1604},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1606],{"type":52,"value":9},{"type":46,"tag":1079,"props":1608,"children":1609},{"style":1098},[1610],{"type":52,"value":1611}," library",{"type":46,"tag":1079,"props":1613,"children":1614},{"style":1098},[1615],{"type":52,"value":1616}," share",{"type":46,"tag":1079,"props":1618,"children":1620},{"style":1619},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1621],{"type":52,"value":1622}," \\\n",{"type":46,"tag":1079,"props":1624,"children":1625},{"class":1081,"line":1118},[1626,1631],{"type":46,"tag":1079,"props":1627,"children":1628},{"style":1098},[1629],{"type":52,"value":1630},"  --api-token",{"type":46,"tag":1079,"props":1632,"children":1633},{"style":1619},[1634],{"type":52,"value":1635}," $WORKSPACE_1_TOKEN \\\n",{"type":46,"tag":1079,"props":1637,"children":1638},{"class":1081,"line":1131},[1639],{"type":46,"tag":1079,"props":1640,"children":1641},{"style":1098},[1642],{"type":52,"value":1643},"  --no-input\n",{"type":46,"tag":1079,"props":1645,"children":1646},{"class":1081,"line":260},[1647],{"type":46,"tag":1079,"props":1648,"children":1649},{"emptyLinePlaceholder":1162},[1650],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1652,"children":1653},{"class":1081,"line":1168},[1654],{"type":46,"tag":1079,"props":1655,"children":1656},{"style":1595},[1657],{"type":52,"value":1658},"# Deploy to workspace 2\n",{"type":46,"tag":1079,"props":1660,"children":1661},{"class":1081,"line":1181},[1662,1666,1670,1674],{"type":46,"tag":1079,"props":1663,"children":1664},{"style":1604},[1665],{"type":52,"value":9},{"type":46,"tag":1079,"props":1667,"children":1668},{"style":1098},[1669],{"type":52,"value":1611},{"type":46,"tag":1079,"props":1671,"children":1672},{"style":1098},[1673],{"type":52,"value":1616},{"type":46,"tag":1079,"props":1675,"children":1676},{"style":1619},[1677],{"type":52,"value":1622},{"type":46,"tag":1079,"props":1679,"children":1680},{"class":1081,"line":1194},[1681,1685],{"type":46,"tag":1079,"props":1682,"children":1683},{"style":1098},[1684],{"type":52,"value":1630},{"type":46,"tag":1079,"props":1686,"children":1687},{"style":1619},[1688],{"type":52,"value":1689}," $WORKSPACE_2_TOKEN \\\n",{"type":46,"tag":1079,"props":1691,"children":1692},{"class":1081,"line":384},[1693],{"type":46,"tag":1079,"props":1694,"children":1695},{"style":1098},[1696],{"type":52,"value":1643},{"type":46,"tag":195,"props":1698,"children":1700},{"id":1699},"options",[1701],{"type":52,"value":1702},"Options:",{"type":46,"tag":77,"props":1704,"children":1705},{},[1706,1717,1728,1739],{"type":46,"tag":81,"props":1707,"children":1708},{},[1709,1715],{"type":46,"tag":87,"props":1710,"children":1712},{"className":1711},[],[1713],{"type":52,"value":1714},"--no-input",{"type":52,"value":1716}," - Disables interactive prompts",{"type":46,"tag":81,"props":1718,"children":1719},{},[1720,1726],{"type":46,"tag":87,"props":1721,"children":1723},{"className":1722},[],[1724],{"type":52,"value":1725},"--force",{"type":52,"value":1727}," - Continues even with warnings",{"type":46,"tag":81,"props":1729,"children":1730},{},[1731,1737],{"type":46,"tag":87,"props":1732,"children":1734},{"className":1733},[],[1735],{"type":52,"value":1736},"--verbose",{"type":52,"value":1738}," - Shows detailed output",{"type":46,"tag":81,"props":1740,"children":1741},{},[1742,1748],{"type":46,"tag":87,"props":1743,"children":1745},{"className":1744},[],[1746],{"type":52,"value":1747},"--dev",{"type":52,"value":1749}," - Bundles in development mode (for testing)",{"type":46,"tag":55,"props":1751,"children":1752},{},[1753],{"type":52,"value":1754},"⚠️ Security:",{"type":46,"tag":77,"props":1756,"children":1757},{},[1758,1763,1768,1773],{"type":46,"tag":81,"props":1759,"children":1760},{},[1761],{"type":52,"value":1762},"Never commit .env files",{"type":46,"tag":81,"props":1764,"children":1765},{},[1766],{"type":52,"value":1767},"Use secrets management in CI\u002FCD",{"type":46,"tag":81,"props":1769,"children":1770},{},[1771],{"type":52,"value":1772},"Rotate tokens regularly",{"type":46,"tag":81,"props":1774,"children":1775},{},[1776],{"type":52,"value":1777},"Limit token permissions",{"type":46,"tag":691,"props":1779,"children":1782},{"className":1780,"code":1781,"language":52},[694],"\n## Guidelines\n\n### Phase 1: CLI Verification\n\n**Installation Check:**\n```bash\n# Check if CLI is installed\nwebflow --version\n\n# If not installed, guide user:\nnpm install -g @webflow\u002Fwebflow-cli\n",[1783],{"type":46,"tag":87,"props":1784,"children":1785},{"__ignoreMap":699},[1786],{"type":52,"value":1781},{"type":46,"tag":55,"props":1788,"children":1789},{},[1790],{"type":46,"tag":71,"props":1791,"children":1792},{},[1793],{"type":52,"value":1794},"Project Check:",{"type":46,"tag":691,"props":1796,"children":1798},{"className":1583,"code":1797,"language":1585,"meta":699,"style":699},"# Check for existing configuration\nls webflow.json\n\n# Check for React project\nls package.json\n\n# Check for components\nls src\u002F\n",[1799],{"type":46,"tag":87,"props":1800,"children":1801},{"__ignoreMap":699},[1802,1810,1823,1830,1838,1850,1857,1865],{"type":46,"tag":1079,"props":1803,"children":1804},{"class":1081,"line":1082},[1805],{"type":46,"tag":1079,"props":1806,"children":1807},{"style":1595},[1808],{"type":52,"value":1809},"# Check for existing configuration\n",{"type":46,"tag":1079,"props":1811,"children":1812},{"class":1081,"line":1104},[1813,1818],{"type":46,"tag":1079,"props":1814,"children":1815},{"style":1604},[1816],{"type":52,"value":1817},"ls",{"type":46,"tag":1079,"props":1819,"children":1820},{"style":1098},[1821],{"type":52,"value":1822}," webflow.json\n",{"type":46,"tag":1079,"props":1824,"children":1825},{"class":1081,"line":1118},[1826],{"type":46,"tag":1079,"props":1827,"children":1828},{"emptyLinePlaceholder":1162},[1829],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1831,"children":1832},{"class":1081,"line":1131},[1833],{"type":46,"tag":1079,"props":1834,"children":1835},{"style":1595},[1836],{"type":52,"value":1837},"# Check for React project\n",{"type":46,"tag":1079,"props":1839,"children":1840},{"class":1081,"line":260},[1841,1845],{"type":46,"tag":1079,"props":1842,"children":1843},{"style":1604},[1844],{"type":52,"value":1817},{"type":46,"tag":1079,"props":1846,"children":1847},{"style":1098},[1848],{"type":52,"value":1849}," package.json\n",{"type":46,"tag":1079,"props":1851,"children":1852},{"class":1081,"line":1168},[1853],{"type":46,"tag":1079,"props":1854,"children":1855},{"emptyLinePlaceholder":1162},[1856],{"type":52,"value":1165},{"type":46,"tag":1079,"props":1858,"children":1859},{"class":1081,"line":1181},[1860],{"type":46,"tag":1079,"props":1861,"children":1862},{"style":1595},[1863],{"type":52,"value":1864},"# Check for components\n",{"type":46,"tag":1079,"props":1866,"children":1867},{"class":1081,"line":1194},[1868,1872],{"type":46,"tag":1079,"props":1869,"children":1870},{"style":1604},[1871],{"type":52,"value":1817},{"type":46,"tag":1079,"props":1873,"children":1874},{"style":1098},[1875],{"type":52,"value":1876}," src\u002F\n",{"type":46,"tag":55,"props":1878,"children":1879},{},[1880,1885,1887,1892],{"type":46,"tag":71,"props":1881,"children":1882},{},[1883],{"type":52,"value":1884},"Authentication Note:",{"type":52,"value":1886},"\nUnlike site authentication, workspace authentication for Code Components happens automatically on first ",{"type":46,"tag":87,"props":1888,"children":1890},{"className":1889},[],[1891],{"type":52,"value":125},{"type":52,"value":1893},". The CLI will:",{"type":46,"tag":202,"props":1895,"children":1896},{},[1897,1902,1907],{"type":46,"tag":81,"props":1898,"children":1899},{},[1900],{"type":52,"value":1901},"Open browser for authentication",{"type":46,"tag":81,"props":1903,"children":1904},{},[1905],{"type":52,"value":1906},"Let user select workspace",{"type":46,"tag":81,"props":1908,"children":1909},{},[1910],{"type":52,"value":1911},"Create .env with WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN",{"type":46,"tag":195,"props":1913,"children":1915},{"id":1914},"phase-2-project-configuration-1",[1916],{"type":52,"value":257},{"type":46,"tag":55,"props":1918,"children":1919},{},[1920],{"type":46,"tag":71,"props":1921,"children":1922},{},[1923],{"type":52,"value":1924},"webflow.json Structure:",{"type":46,"tag":691,"props":1926,"children":1930},{"className":1927,"code":1928,"language":1929,"meta":699,"style":699},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"library\": {\n    \"name\": \"\u003CYour Library Name>\",\n    \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)\"],\n    \"bundleConfig\": \".\u002Fwebpack.webflow.js\"\n  }\n}\n","json",[1931],{"type":46,"tag":87,"props":1932,"children":1933},{"__ignoreMap":699},[1934,1942,1970,2009,2051,2085,2093],{"type":46,"tag":1079,"props":1935,"children":1936},{"class":1081,"line":1082},[1937],{"type":46,"tag":1079,"props":1938,"children":1939},{"style":1092},[1940],{"type":52,"value":1941},"{\n",{"type":46,"tag":1079,"props":1943,"children":1944},{"class":1081,"line":1104},[1945,1950,1956,1961,1965],{"type":46,"tag":1079,"props":1946,"children":1947},{"style":1092},[1948],{"type":52,"value":1949},"  \"",{"type":46,"tag":1079,"props":1951,"children":1953},{"style":1952},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1954],{"type":52,"value":1955},"library",{"type":46,"tag":1079,"props":1957,"children":1958},{"style":1092},[1959],{"type":52,"value":1960},"\"",{"type":46,"tag":1079,"props":1962,"children":1963},{"style":1092},[1964],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1966,"children":1967},{"style":1092},[1968],{"type":52,"value":1969}," {\n",{"type":46,"tag":1079,"props":1971,"children":1972},{"class":1081,"line":1118},[1973,1978,1982,1986,1990,1995,2000,2004],{"type":46,"tag":1079,"props":1974,"children":1975},{"style":1092},[1976],{"type":52,"value":1977},"    \"",{"type":46,"tag":1079,"props":1979,"children":1980},{"style":1604},[1981],{"type":52,"value":1089},{"type":46,"tag":1079,"props":1983,"children":1984},{"style":1092},[1985],{"type":52,"value":1960},{"type":46,"tag":1079,"props":1987,"children":1988},{"style":1092},[1989],{"type":52,"value":1095},{"type":46,"tag":1079,"props":1991,"children":1992},{"style":1092},[1993],{"type":52,"value":1994}," \"",{"type":46,"tag":1079,"props":1996,"children":1997},{"style":1098},[1998],{"type":52,"value":1999},"\u003CYour Library Name>",{"type":46,"tag":1079,"props":2001,"children":2002},{"style":1092},[2003],{"type":52,"value":1960},{"type":46,"tag":1079,"props":2005,"children":2006},{"style":1092},[2007],{"type":52,"value":2008},",\n",{"type":46,"tag":1079,"props":2010,"children":2011},{"class":1081,"line":1131},[2012,2016,2021,2025,2029,2033,2037,2042,2046],{"type":46,"tag":1079,"props":2013,"children":2014},{"style":1092},[2015],{"type":52,"value":1977},{"type":46,"tag":1079,"props":2017,"children":2018},{"style":1604},[2019],{"type":52,"value":2020},"components",{"type":46,"tag":1079,"props":2022,"children":2023},{"style":1092},[2024],{"type":52,"value":1960},{"type":46,"tag":1079,"props":2026,"children":2027},{"style":1092},[2028],{"type":52,"value":1095},{"type":46,"tag":1079,"props":2030,"children":2031},{"style":1092},[2032],{"type":52,"value":1146},{"type":46,"tag":1079,"props":2034,"children":2035},{"style":1092},[2036],{"type":52,"value":1960},{"type":46,"tag":1079,"props":2038,"children":2039},{"style":1098},[2040],{"type":52,"value":2041},".\u002Fsrc\u002F**\u002F*.webflow.@(js|jsx|mjs|ts|tsx)",{"type":46,"tag":1079,"props":2043,"children":2044},{"style":1092},[2045],{"type":52,"value":1960},{"type":46,"tag":1079,"props":2047,"children":2048},{"style":1092},[2049],{"type":52,"value":2050},"],\n",{"type":46,"tag":1079,"props":2052,"children":2053},{"class":1081,"line":260},[2054,2058,2063,2067,2071,2075,2080],{"type":46,"tag":1079,"props":2055,"children":2056},{"style":1092},[2057],{"type":52,"value":1977},{"type":46,"tag":1079,"props":2059,"children":2060},{"style":1604},[2061],{"type":52,"value":2062},"bundleConfig",{"type":46,"tag":1079,"props":2064,"children":2065},{"style":1092},[2066],{"type":52,"value":1960},{"type":46,"tag":1079,"props":2068,"children":2069},{"style":1092},[2070],{"type":52,"value":1095},{"type":46,"tag":1079,"props":2072,"children":2073},{"style":1092},[2074],{"type":52,"value":1994},{"type":46,"tag":1079,"props":2076,"children":2077},{"style":1098},[2078],{"type":52,"value":2079},".\u002Fwebpack.webflow.js",{"type":46,"tag":1079,"props":2081,"children":2082},{"style":1092},[2083],{"type":52,"value":2084},"\"\n",{"type":46,"tag":1079,"props":2086,"children":2087},{"class":1081,"line":1168},[2088],{"type":46,"tag":1079,"props":2089,"children":2090},{"style":1092},[2091],{"type":52,"value":2092},"  }\n",{"type":46,"tag":1079,"props":2094,"children":2095},{"class":1081,"line":1181},[2096],{"type":46,"tag":1079,"props":2097,"children":2098},{"style":1092},[2099],{"type":52,"value":2100},"}\n",{"type":46,"tag":55,"props":2102,"children":2103},{},[2104],{"type":46,"tag":71,"props":2105,"children":2106},{},[2107],{"type":52,"value":2108},"Configuration Fields:",{"type":46,"tag":77,"props":2110,"children":2111},{},[2112,2121,2158],{"type":46,"tag":81,"props":2113,"children":2114},{},[2115,2119],{"type":46,"tag":71,"props":2116,"children":2117},{},[2118],{"type":52,"value":1089},{"type":52,"value":2120}," (required): Library name as it appears in Webflow Designer",{"type":46,"tag":81,"props":2122,"children":2123},{},[2124,2128,2130],{"type":46,"tag":71,"props":2125,"children":2126},{},[2127],{"type":52,"value":2020},{"type":52,"value":2129}," (required): Glob pattern matching component files\n",{"type":46,"tag":77,"props":2131,"children":2132},{},[2133,2146],{"type":46,"tag":81,"props":2134,"children":2135},{},[2136,2138,2144],{"type":52,"value":2137},"Example: ",{"type":46,"tag":87,"props":2139,"children":2141},{"className":2140},[],[2142],{"type":52,"value":2143},"\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"",{"type":52,"value":2145}," - all .webflow.tsx files in src\u002F",{"type":46,"tag":81,"props":2147,"children":2148},{},[2149,2150,2156],{"type":52,"value":2137},{"type":46,"tag":87,"props":2151,"children":2153},{"className":2152},[],[2154],{"type":52,"value":2155},"\".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\"",{"type":52,"value":2157}," - all .tsx files in src\u002Fcomponents\u002F",{"type":46,"tag":81,"props":2159,"children":2160},{},[2161,2165],{"type":46,"tag":71,"props":2162,"children":2163},{},[2164],{"type":52,"value":2062},{"type":52,"value":2166}," (optional): Path to custom webpack configuration",{"type":46,"tag":55,"props":2168,"children":2169},{},[2170],{"type":46,"tag":71,"props":2171,"children":2172},{},[2173],{"type":52,"value":2174},"Component Naming Convention:",{"type":46,"tag":77,"props":2176,"children":2177},{},[2178,2197,2202],{"type":46,"tag":81,"props":2179,"children":2180},{},[2181,2183,2189,2191],{"type":52,"value":2182},"Add ",{"type":46,"tag":87,"props":2184,"children":2186},{"className":2185},[],[2187],{"type":52,"value":2188},".webflow",{"type":52,"value":2190}," before extension: ",{"type":46,"tag":87,"props":2192,"children":2194},{"className":2193},[],[2195],{"type":52,"value":2196},"Button.webflow.tsx",{"type":46,"tag":81,"props":2198,"children":2199},{},[2200],{"type":52,"value":2201},"Or use glob pattern to include all files in specific directory",{"type":46,"tag":81,"props":2203,"children":2204},{},[2205],{"type":52,"value":2206},"Components must be React components",{"type":46,"tag":55,"props":2208,"children":2209},{},[2210,2215,2217,2223],{"type":46,"tag":71,"props":2211,"children":2212},{},[2213],{"type":52,"value":2214},"No Init Command:",{"type":52,"value":2216},"\nUnlike other CLI products, Code Components don't have an ",{"type":46,"tag":87,"props":2218,"children":2220},{"className":2219},[],[2221],{"type":52,"value":2222},"init",{"type":52,"value":2224}," command. Users configure existing React projects by adding webflow.json with library configuration.",{"type":46,"tag":195,"props":2226,"children":2228},{"id":2227},"phase-3-build-bundle",[2229],{"type":52,"value":2230},"Phase 3: Build & Bundle",{"type":46,"tag":55,"props":2232,"children":2233},{},[2234],{"type":46,"tag":71,"props":2235,"children":2236},{},[2237],{"type":52,"value":2238},"Build Process:",{"type":46,"tag":691,"props":2240,"children":2242},{"className":1583,"code":2241,"language":1585,"meta":699,"style":699},"# Use project's build script\nnpm run build\n# or\nyarn build\n# or\npnpm build\n\n# Check for errors\necho $?  # 0 = success, non-zero = failure\n",[2243],{"type":46,"tag":87,"props":2244,"children":2245},{"__ignoreMap":699},[2246,2254,2272,2280,2292,2299,2311,2318,2326],{"type":46,"tag":1079,"props":2247,"children":2248},{"class":1081,"line":1082},[2249],{"type":46,"tag":1079,"props":2250,"children":2251},{"style":1595},[2252],{"type":52,"value":2253},"# Use project's build script\n",{"type":46,"tag":1079,"props":2255,"children":2256},{"class":1081,"line":1104},[2257,2262,2267],{"type":46,"tag":1079,"props":2258,"children":2259},{"style":1604},[2260],{"type":52,"value":2261},"npm",{"type":46,"tag":1079,"props":2263,"children":2264},{"style":1098},[2265],{"type":52,"value":2266}," run",{"type":46,"tag":1079,"props":2268,"children":2269},{"style":1098},[2270],{"type":52,"value":2271}," build\n",{"type":46,"tag":1079,"props":2273,"children":2274},{"class":1081,"line":1118},[2275],{"type":46,"tag":1079,"props":2276,"children":2277},{"style":1595},[2278],{"type":52,"value":2279},"# or\n",{"type":46,"tag":1079,"props":2281,"children":2282},{"class":1081,"line":1131},[2283,2288],{"type":46,"tag":1079,"props":2284,"children":2285},{"style":1604},[2286],{"type":52,"value":2287},"yarn",{"type":46,"tag":1079,"props":2289,"children":2290},{"style":1098},[2291],{"type":52,"value":2271},{"type":46,"tag":1079,"props":2293,"children":2294},{"class":1081,"line":260},[2295],{"type":46,"tag":1079,"props":2296,"children":2297},{"style":1595},[2298],{"type":52,"value":2279},{"type":46,"tag":1079,"props":2300,"children":2301},{"class":1081,"line":1168},[2302,2307],{"type":46,"tag":1079,"props":2303,"children":2304},{"style":1604},[2305],{"type":52,"value":2306},"pnpm",{"type":46,"tag":1079,"props":2308,"children":2309},{"style":1098},[2310],{"type":52,"value":2271},{"type":46,"tag":1079,"props":2312,"children":2313},{"class":1081,"line":1181},[2314],{"type":46,"tag":1079,"props":2315,"children":2316},{"emptyLinePlaceholder":1162},[2317],{"type":52,"value":1165},{"type":46,"tag":1079,"props":2319,"children":2320},{"class":1081,"line":1194},[2321],{"type":46,"tag":1079,"props":2322,"children":2323},{"style":1595},[2324],{"type":52,"value":2325},"# Check for errors\n",{"type":46,"tag":1079,"props":2327,"children":2328},{"class":1081,"line":384},[2329,2335,2340],{"type":46,"tag":1079,"props":2330,"children":2332},{"style":2331},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[2333],{"type":52,"value":2334},"echo",{"type":46,"tag":1079,"props":2336,"children":2337},{"style":1619},[2338],{"type":52,"value":2339}," $?  ",{"type":46,"tag":1079,"props":2341,"children":2342},{"style":1595},[2343],{"type":52,"value":2344},"# 0 = success, non-zero = failure\n",{"type":46,"tag":55,"props":2346,"children":2347},{},[2348],{"type":46,"tag":71,"props":2349,"children":2350},{},[2351],{"type":52,"value":2352},"Bundle Command:",{"type":46,"tag":691,"props":2354,"children":2356},{"className":1583,"code":2355,"language":1585,"meta":699,"style":699},"# Bundle locally (optional - for testing\u002Fvalidation)\nwebflow library bundle\n\n# Bundle output: .\u002Fdist\u002F (default)\n# Can override: webflow library bundle --output-path .\u002Fbuild\n",[2357],{"type":46,"tag":87,"props":2358,"children":2359},{"__ignoreMap":699},[2360,2368,2384,2391,2399],{"type":46,"tag":1079,"props":2361,"children":2362},{"class":1081,"line":1082},[2363],{"type":46,"tag":1079,"props":2364,"children":2365},{"style":1595},[2366],{"type":52,"value":2367},"# Bundle locally (optional - for testing\u002Fvalidation)\n",{"type":46,"tag":1079,"props":2369,"children":2370},{"class":1081,"line":1104},[2371,2375,2379],{"type":46,"tag":1079,"props":2372,"children":2373},{"style":1604},[2374],{"type":52,"value":9},{"type":46,"tag":1079,"props":2376,"children":2377},{"style":1098},[2378],{"type":52,"value":1611},{"type":46,"tag":1079,"props":2380,"children":2381},{"style":1098},[2382],{"type":52,"value":2383}," bundle\n",{"type":46,"tag":1079,"props":2385,"children":2386},{"class":1081,"line":1118},[2387],{"type":46,"tag":1079,"props":2388,"children":2389},{"emptyLinePlaceholder":1162},[2390],{"type":52,"value":1165},{"type":46,"tag":1079,"props":2392,"children":2393},{"class":1081,"line":1131},[2394],{"type":46,"tag":1079,"props":2395,"children":2396},{"style":1595},[2397],{"type":52,"value":2398},"# Bundle output: .\u002Fdist\u002F (default)\n",{"type":46,"tag":1079,"props":2400,"children":2401},{"class":1081,"line":260},[2402],{"type":46,"tag":1079,"props":2403,"children":2404},{"style":1595},[2405],{"type":52,"value":2406},"# Can override: webflow library bundle --output-path .\u002Fbuild\n",{"type":46,"tag":55,"props":2408,"children":2409},{},[2410],{"type":46,"tag":71,"props":2411,"children":2412},{},[2413],{"type":52,"value":2414},"Bundle Options:",{"type":46,"tag":77,"props":2416,"children":2417},{},[2418,2435,2446,2456,2467,2477],{"type":46,"tag":81,"props":2419,"children":2420},{},[2421,2427,2429,2434],{"type":46,"tag":87,"props":2422,"children":2424},{"className":2423},[],[2425],{"type":52,"value":2426},"--output-path \u003Cpath>",{"type":52,"value":2428}," - Override output directory (default: ",{"type":46,"tag":87,"props":2430,"children":2432},{"className":2431},[],[2433],{"type":52,"value":472},{"type":52,"value":320},{"type":46,"tag":81,"props":2436,"children":2437},{},[2438,2444],{"type":46,"tag":87,"props":2439,"children":2441},{"className":2440},[],[2442],{"type":52,"value":2443},"--public-path \u003Cpath>",{"type":52,"value":2445}," - Override public path",{"type":46,"tag":81,"props":2447,"children":2448},{},[2449,2454],{"type":46,"tag":87,"props":2450,"children":2452},{"className":2451},[],[2453],{"type":52,"value":1725},{"type":52,"value":2455}," - Force bundling even with warnings",{"type":46,"tag":81,"props":2457,"children":2458},{},[2459,2465],{"type":46,"tag":87,"props":2460,"children":2462},{"className":2461},[],[2463],{"type":52,"value":2464},"--debug-bundler",{"type":52,"value":2466}," - Show webpack configuration",{"type":46,"tag":81,"props":2468,"children":2469},{},[2470,2475],{"type":46,"tag":87,"props":2471,"children":2473},{"className":2472},[],[2474],{"type":52,"value":1747},{"type":52,"value":2476}," - Bundle in development mode",{"type":46,"tag":81,"props":2478,"children":2479},{},[2480,2485],{"type":46,"tag":87,"props":2481,"children":2483},{"className":2482},[],[2484],{"type":52,"value":1736},{"type":52,"value":2486}," - Show detailed output",{"type":46,"tag":55,"props":2488,"children":2489},{},[2490,2495],{"type":46,"tag":71,"props":2491,"children":2492},{},[2493],{"type":52,"value":2494},"Bundle Validation:",{"type":52,"value":2496},"\nCheck these aspects:",{"type":46,"tag":77,"props":2498,"children":2499},{},[2500,2510,2520,2530],{"type":46,"tag":81,"props":2501,"children":2502},{},[2503,2508],{"type":46,"tag":71,"props":2504,"children":2505},{},[2506],{"type":52,"value":2507},"Size limit",{"type":52,"value":2509},": Must be \u003C 2MB",{"type":46,"tag":81,"props":2511,"children":2512},{},[2513,2518],{"type":46,"tag":71,"props":2514,"children":2515},{},[2516],{"type":52,"value":2517},"Dependencies",{"type":52,"value":2519},": React versions compatible",{"type":46,"tag":81,"props":2521,"children":2522},{},[2523,2528],{"type":46,"tag":71,"props":2524,"children":2525},{},[2526],{"type":52,"value":2527},"Output",{"type":52,"value":2529},": Bundle created in dist\u002F directory",{"type":46,"tag":81,"props":2531,"children":2532},{},[2533,2538],{"type":46,"tag":71,"props":2534,"children":2535},{},[2536],{"type":52,"value":2537},"Components",{"type":52,"value":2539},": All component files included",{"type":46,"tag":55,"props":2541,"children":2542},{},[2543],{"type":46,"tag":71,"props":2544,"children":2545},{},[2546],{"type":52,"value":2547},"Common Build Errors:",{"type":46,"tag":77,"props":2549,"children":2550},{},[2551,2556,2561,2566],{"type":46,"tag":81,"props":2552,"children":2553},{},[2554],{"type":52,"value":2555},"TypeScript compilation errors → Fix type issues",{"type":46,"tag":81,"props":2557,"children":2558},{},[2559],{"type":52,"value":2560},"Missing dependencies → Run npm install",{"type":46,"tag":81,"props":2562,"children":2563},{},[2564],{"type":52,"value":2565},"Import errors → Check file paths",{"type":46,"tag":81,"props":2567,"children":2568},{},[2569],{"type":52,"value":2570},"Bundle too large → Optimize dependencies",{"type":46,"tag":195,"props":2572,"children":2574},{"id":2573},"phase-4-deployment-preview",[2575],{"type":52,"value":2576},"Phase 4: Deployment Preview",{"type":46,"tag":55,"props":2578,"children":2579},{},[2580],{"type":46,"tag":71,"props":2581,"children":2582},{},[2583],{"type":52,"value":2584},"Preview Format:",{"type":46,"tag":691,"props":2586,"children":2589},{"className":2587,"code":2588,"language":52},[694],"📋 Deployment Preview\n\nLibrary: [Name from webflow.json]\nComponents: [Count] ([List of components])\nBundle Size: [Size in KB\u002FMB]\n\nWorkspace Authentication:\n[First time: Explain browser auth flow]\n[Subsequent: Show workspace from .env]\n\nValidation Status:\n✓ Bundle size: [X KB] (\u003C 2MB limit)\n✓ Dependencies: Valid\n✓ Configuration: webflow.json valid\n✓ Components: [N] components found\n\n⚠️ Type \"share\" to proceed\n",[2590],{"type":46,"tag":87,"props":2591,"children":2592},{"__ignoreMap":699},[2593],{"type":52,"value":2588},{"type":46,"tag":55,"props":2595,"children":2596},{},[2597,2602],{"type":46,"tag":71,"props":2598,"children":2599},{},[2600],{"type":52,"value":2601},"First-Time Authentication:",{"type":52,"value":2603},"\nExplain clearly:",{"type":46,"tag":202,"props":2605,"children":2606},{},[2607,2612,2617,2622,2627],{"type":46,"tag":81,"props":2608,"children":2609},{},[2610],{"type":52,"value":2611},"Browser will open",{"type":46,"tag":81,"props":2613,"children":2614},{},[2615],{"type":52,"value":2616},"User authenticates with Webflow",{"type":46,"tag":81,"props":2618,"children":2619},{},[2620],{"type":52,"value":2621},"User selects target workspace",{"type":46,"tag":81,"props":2623,"children":2624},{},[2625],{"type":52,"value":2626},"CLI creates .env with credentials",{"type":46,"tag":81,"props":2628,"children":2629},{},[2630],{"type":52,"value":2631},"Future shares use these credentials (no re-auth)",{"type":46,"tag":195,"props":2633,"children":2635},{"id":2634},"phase-5-deployment-execution",[2636],{"type":52,"value":2637},"Phase 5: Deployment Execution",{"type":46,"tag":55,"props":2639,"children":2640},{},[2641],{"type":46,"tag":71,"props":2642,"children":2643},{},[2644],{"type":52,"value":2645},"Share Command:",{"type":46,"tag":691,"props":2647,"children":2649},{"className":1583,"code":2648,"language":1585,"meta":699,"style":699},"# Standard share (interactive)\nwebflow library share\n\n# Non-interactive (for CI\u002FCD)\nwebflow library share --api-token \u003CTOKEN> --no-input\n\n# Force share (ignore warnings)\nwebflow library share --force\n\n# Development mode\nwebflow library share --dev\n",[2650],{"type":46,"tag":87,"props":2651,"children":2652},{"__ignoreMap":699},[2653,2661,2677,2684,2692,2737,2744,2752,2772,2779,2787],{"type":46,"tag":1079,"props":2654,"children":2655},{"class":1081,"line":1082},[2656],{"type":46,"tag":1079,"props":2657,"children":2658},{"style":1595},[2659],{"type":52,"value":2660},"# Standard share (interactive)\n",{"type":46,"tag":1079,"props":2662,"children":2663},{"class":1081,"line":1104},[2664,2668,2672],{"type":46,"tag":1079,"props":2665,"children":2666},{"style":1604},[2667],{"type":52,"value":9},{"type":46,"tag":1079,"props":2669,"children":2670},{"style":1098},[2671],{"type":52,"value":1611},{"type":46,"tag":1079,"props":2673,"children":2674},{"style":1098},[2675],{"type":52,"value":2676}," share\n",{"type":46,"tag":1079,"props":2678,"children":2679},{"class":1081,"line":1118},[2680],{"type":46,"tag":1079,"props":2681,"children":2682},{"emptyLinePlaceholder":1162},[2683],{"type":52,"value":1165},{"type":46,"tag":1079,"props":2685,"children":2686},{"class":1081,"line":1131},[2687],{"type":46,"tag":1079,"props":2688,"children":2689},{"style":1595},[2690],{"type":52,"value":2691},"# Non-interactive (for CI\u002FCD)\n",{"type":46,"tag":1079,"props":2693,"children":2694},{"class":1081,"line":260},[2695,2699,2703,2707,2712,2717,2722,2727,2732],{"type":46,"tag":1079,"props":2696,"children":2697},{"style":1604},[2698],{"type":52,"value":9},{"type":46,"tag":1079,"props":2700,"children":2701},{"style":1098},[2702],{"type":52,"value":1611},{"type":46,"tag":1079,"props":2704,"children":2705},{"style":1098},[2706],{"type":52,"value":1616},{"type":46,"tag":1079,"props":2708,"children":2709},{"style":1098},[2710],{"type":52,"value":2711}," --api-token",{"type":46,"tag":1079,"props":2713,"children":2714},{"style":1092},[2715],{"type":52,"value":2716}," \u003C",{"type":46,"tag":1079,"props":2718,"children":2719},{"style":1098},[2720],{"type":52,"value":2721},"TOKE",{"type":46,"tag":1079,"props":2723,"children":2724},{"style":1619},[2725],{"type":52,"value":2726},"N",{"type":46,"tag":1079,"props":2728,"children":2729},{"style":1092},[2730],{"type":52,"value":2731},">",{"type":46,"tag":1079,"props":2733,"children":2734},{"style":1098},[2735],{"type":52,"value":2736}," --no-input\n",{"type":46,"tag":1079,"props":2738,"children":2739},{"class":1081,"line":1168},[2740],{"type":46,"tag":1079,"props":2741,"children":2742},{"emptyLinePlaceholder":1162},[2743],{"type":52,"value":1165},{"type":46,"tag":1079,"props":2745,"children":2746},{"class":1081,"line":1181},[2747],{"type":46,"tag":1079,"props":2748,"children":2749},{"style":1595},[2750],{"type":52,"value":2751},"# Force share (ignore warnings)\n",{"type":46,"tag":1079,"props":2753,"children":2754},{"class":1081,"line":1194},[2755,2759,2763,2767],{"type":46,"tag":1079,"props":2756,"children":2757},{"style":1604},[2758],{"type":52,"value":9},{"type":46,"tag":1079,"props":2760,"children":2761},{"style":1098},[2762],{"type":52,"value":1611},{"type":46,"tag":1079,"props":2764,"children":2765},{"style":1098},[2766],{"type":52,"value":1616},{"type":46,"tag":1079,"props":2768,"children":2769},{"style":1098},[2770],{"type":52,"value":2771}," --force\n",{"type":46,"tag":1079,"props":2773,"children":2774},{"class":1081,"line":384},[2775],{"type":46,"tag":1079,"props":2776,"children":2777},{"emptyLinePlaceholder":1162},[2778],{"type":52,"value":1165},{"type":46,"tag":1079,"props":2780,"children":2781},{"class":1081,"line":1224},[2782],{"type":46,"tag":1079,"props":2783,"children":2784},{"style":1595},[2785],{"type":52,"value":2786},"# Development mode\n",{"type":46,"tag":1079,"props":2788,"children":2789},{"class":1081,"line":1247},[2790,2794,2798,2802],{"type":46,"tag":1079,"props":2791,"children":2792},{"style":1604},[2793],{"type":52,"value":9},{"type":46,"tag":1079,"props":2795,"children":2796},{"style":1098},[2797],{"type":52,"value":1611},{"type":46,"tag":1079,"props":2799,"children":2800},{"style":1098},[2801],{"type":52,"value":1616},{"type":46,"tag":1079,"props":2803,"children":2804},{"style":1098},[2805],{"type":52,"value":2806}," --dev\n",{"type":46,"tag":55,"props":2808,"children":2809},{},[2810],{"type":46,"tag":71,"props":2811,"children":2812},{},[2813],{"type":52,"value":2814},"Share Options:",{"type":46,"tag":77,"props":2816,"children":2817},{},[2818,2829,2840,2850,2859,2869,2878],{"type":46,"tag":81,"props":2819,"children":2820},{},[2821,2827],{"type":46,"tag":87,"props":2822,"children":2824},{"className":2823},[],[2825],{"type":52,"value":2826},"--manifest",{"type":52,"value":2828}," - Path to webflow.json (default: scans current directory)",{"type":46,"tag":81,"props":2830,"children":2831},{},[2832,2838],{"type":46,"tag":87,"props":2833,"children":2835},{"className":2834},[],[2836],{"type":52,"value":2837},"--api-token",{"type":52,"value":2839}," - Workspace API token (for CI\u002FCD)",{"type":46,"tag":81,"props":2841,"children":2842},{},[2843,2848],{"type":46,"tag":87,"props":2844,"children":2846},{"className":2845},[],[2847],{"type":52,"value":1714},{"type":52,"value":2849}," - Disable interactive prompts",{"type":46,"tag":81,"props":2851,"children":2852},{},[2853,2858],{"type":46,"tag":87,"props":2854,"children":2856},{"className":2855},[],[2857],{"type":52,"value":1725},{"type":52,"value":2455},{"type":46,"tag":81,"props":2860,"children":2861},{},[2862,2867],{"type":46,"tag":87,"props":2863,"children":2865},{"className":2864},[],[2866],{"type":52,"value":2464},{"type":52,"value":2868}," - Show bundler configuration",{"type":46,"tag":81,"props":2870,"children":2871},{},[2872,2877],{"type":46,"tag":87,"props":2873,"children":2875},{"className":2874},[],[2876],{"type":52,"value":1747},{"type":52,"value":2476},{"type":46,"tag":81,"props":2879,"children":2880},{},[2881,2886],{"type":46,"tag":87,"props":2882,"children":2884},{"className":2883},[],[2885],{"type":52,"value":1736},{"type":52,"value":2486},{"type":46,"tag":55,"props":2888,"children":2889},{},[2890],{"type":46,"tag":71,"props":2891,"children":2892},{},[2893],{"type":52,"value":2894},"Success Indicators:",{"type":46,"tag":77,"props":2896,"children":2897},{},[2898,2903,2908,2913],{"type":46,"tag":81,"props":2899,"children":2900},{},[2901],{"type":52,"value":2902},"Bundle uploaded successfully",{"type":46,"tag":81,"props":2904,"children":2905},{},[2906],{"type":52,"value":2907},"Library registered in workspace",{"type":46,"tag":81,"props":2909,"children":2910},{},[2911],{"type":52,"value":2912},"Components available in Designer",{"type":46,"tag":81,"props":2914,"children":2915},{},[2916],{"type":52,"value":2917},".env file created\u002Fupdated (first time)",{"type":46,"tag":55,"props":2919,"children":2920},{},[2921,2926],{"type":46,"tag":71,"props":2922,"children":2923},{},[2924],{"type":52,"value":2925},"Environment File (.env):",{"type":52,"value":2927},"\nAfter first successful share:",{"type":46,"tag":691,"props":2929,"children":2932},{"className":2930,"code":2931,"language":52},[694],"WEBFLOW_WORKSPACE_ID=your-workspace-id\nWEBFLOW_WORKSPACE_API_TOKEN=your-api-token\n",[2933],{"type":46,"tag":87,"props":2934,"children":2935},{"__ignoreMap":699},[2936],{"type":52,"value":2931},{"type":46,"tag":55,"props":2938,"children":2939},{},[2940,2942,2947],{"type":52,"value":2941},"⚠️ ",{"type":46,"tag":71,"props":2943,"children":2944},{},[2945],{"type":52,"value":2946},"Critical",{"type":52,"value":2948},": Always add .env to .gitignore!",{"type":46,"tag":55,"props":2950,"children":2951},{},[2952],{"type":46,"tag":71,"props":2953,"children":2954},{},[2955],{"type":52,"value":2956},"Verification Steps:",{"type":46,"tag":202,"props":2958,"children":2959},{},[2960,2965,2970,2975],{"type":46,"tag":81,"props":2961,"children":2962},{},[2963],{"type":52,"value":2964},"Check CLI output for success message",{"type":46,"tag":81,"props":2966,"children":2967},{},[2968],{"type":52,"value":2969},"Verify .env file created (first time)",{"type":46,"tag":81,"props":2971,"children":2972},{},[2973],{"type":52,"value":2974},"Provide Designer access instructions",{"type":46,"tag":81,"props":2976,"children":2977},{},[2978],{"type":52,"value":2979},"Show workspace dashboard URL",{"type":46,"tag":195,"props":2981,"children":2983},{"id":2982},"phase-6-debugging",[2984],{"type":52,"value":2985},"Phase 6: Debugging",{"type":46,"tag":55,"props":2987,"children":2988},{},[2989],{"type":46,"tag":71,"props":2990,"children":2991},{},[2992],{"type":52,"value":2993},"Log Command:",{"type":46,"tag":691,"props":2995,"children":2997},{"className":1583,"code":2996,"language":1585,"meta":699,"style":699},"# Show latest log file location\nwebflow library log\n\n# Example output:\n# Latest log: \u002FUsers\u002Fuser\u002F.webflow\u002Flogs\u002Flibrary-2024-01-20-15-30-45.log\n",[2998],{"type":46,"tag":87,"props":2999,"children":3000},{"__ignoreMap":699},[3001,3009,3025,3032,3040],{"type":46,"tag":1079,"props":3002,"children":3003},{"class":1081,"line":1082},[3004],{"type":46,"tag":1079,"props":3005,"children":3006},{"style":1595},[3007],{"type":52,"value":3008},"# Show latest log file location\n",{"type":46,"tag":1079,"props":3010,"children":3011},{"class":1081,"line":1104},[3012,3016,3020],{"type":46,"tag":1079,"props":3013,"children":3014},{"style":1604},[3015],{"type":52,"value":9},{"type":46,"tag":1079,"props":3017,"children":3018},{"style":1098},[3019],{"type":52,"value":1611},{"type":46,"tag":1079,"props":3021,"children":3022},{"style":1098},[3023],{"type":52,"value":3024}," log\n",{"type":46,"tag":1079,"props":3026,"children":3027},{"class":1081,"line":1118},[3028],{"type":46,"tag":1079,"props":3029,"children":3030},{"emptyLinePlaceholder":1162},[3031],{"type":52,"value":1165},{"type":46,"tag":1079,"props":3033,"children":3034},{"class":1081,"line":1131},[3035],{"type":46,"tag":1079,"props":3036,"children":3037},{"style":1595},[3038],{"type":52,"value":3039},"# Example output:\n",{"type":46,"tag":1079,"props":3041,"children":3042},{"class":1081,"line":260},[3043],{"type":46,"tag":1079,"props":3044,"children":3045},{"style":1595},[3046],{"type":52,"value":3047},"# Latest log: \u002FUsers\u002Fuser\u002F.webflow\u002Flogs\u002Flibrary-2024-01-20-15-30-45.log\n",{"type":46,"tag":55,"props":3049,"children":3050},{},[3051],{"type":52,"value":3052},"Use this command when:",{"type":46,"tag":77,"props":3054,"children":3055},{},[3056,3061,3066,3071],{"type":46,"tag":81,"props":3057,"children":3058},{},[3059],{"type":52,"value":3060},"Bundle fails with unclear error",{"type":46,"tag":81,"props":3062,"children":3063},{},[3064],{"type":52,"value":3065},"Share command produces warnings",{"type":46,"tag":81,"props":3067,"children":3068},{},[3069],{"type":52,"value":3070},"Need to debug webpack configuration",{"type":46,"tag":81,"props":3072,"children":3073},{},[3074],{"type":52,"value":3075},"Investigating dependency issues",{"type":46,"tag":55,"props":3077,"children":3078},{},[3079],{"type":46,"tag":71,"props":3080,"children":3081},{},[3082],{"type":52,"value":3083},"Common Issues:",{"type":46,"tag":55,"props":3085,"children":3086},{},[3087],{"type":46,"tag":71,"props":3088,"children":3089},{},[3090],{"type":52,"value":3091},"Issue: \"Could not find webflow.json\"",{"type":46,"tag":691,"props":3093,"children":3096},{"className":3094,"code":3095,"language":52},[694],"❌ Configuration Not Found\n\nThe CLI couldn't find webflow.json in the current directory.\n\nSolution:\n1. Ensure you're in the project root\n2. Create webflow.json with library configuration:\n   {\n     \"library\": {\n       \"name\": \"Your Library Name\",\n       \"components\": [\".\u002Fsrc\u002F**\u002F*.webflow.tsx\"]\n     }\n   }\n3. Run command again\n",[3097],{"type":46,"tag":87,"props":3098,"children":3099},{"__ignoreMap":699},[3100],{"type":52,"value":3095},{"type":46,"tag":55,"props":3102,"children":3103},{},[3104],{"type":46,"tag":71,"props":3105,"children":3106},{},[3107],{"type":52,"value":3108},"Issue: \"No components found\"",{"type":46,"tag":691,"props":3110,"children":3113},{"className":3111,"code":3112,"language":52},[694],"❌ No Components Found\n\nThe components glob pattern didn't match any files.\n\nCurrent pattern: \".\u002Fsrc\u002F**\u002F*.webflow.tsx\"\n\nSolution:\n1. Check component files have correct naming\n2. Verify glob pattern in webflow.json\n3. Common patterns:\n   - \".\u002Fsrc\u002F**\u002F*.webflow.tsx\" (requires .webflow in name)\n   - \".\u002Fsrc\u002Fcomponents\u002F**\u002F*.tsx\" (all tsx in folder)\n   - \".\u002Fsrc\u002FButton.tsx\" (specific file)\n\nFound files:\n- src\u002FButton.tsx (not matching pattern)\n- src\u002FCard.tsx (not matching pattern)\n\nSuggestion: Rename to Button.webflow.tsx or update pattern\n",[3114],{"type":46,"tag":87,"props":3115,"children":3116},{"__ignoreMap":699},[3117],{"type":52,"value":3112},{"type":46,"tag":195,"props":3119,"children":3121},{"id":3120},"error-handling",[3122],{"type":52,"value":3123},"Error Handling",{"type":46,"tag":55,"props":3125,"children":3126},{},[3127],{"type":46,"tag":71,"props":3128,"children":3129},{},[3130],{"type":52,"value":3131},"CLI Not Installed:",{"type":46,"tag":691,"props":3133,"children":3136},{"className":3134,"code":3135,"language":52},[694],"❌ Webflow CLI Not Found\n\nThe Webflow CLI is required for Code Components.\n\nInstallation:\nnpm install -g @webflow\u002Fwebflow-cli\n\nAfter installation, verify:\nwebflow --version\n\nDocumentation: https:\u002F\u002Fdevelopers.webflow.com\u002Fcli\n",[3137],{"type":46,"tag":87,"props":3138,"children":3139},{"__ignoreMap":699},[3140],{"type":52,"value":3135},{"type":46,"tag":55,"props":3142,"children":3143},{},[3144],{"type":46,"tag":71,"props":3145,"children":3146},{},[3147],{"type":52,"value":3148},"Build Failures:",{"type":46,"tag":691,"props":3150,"children":3153},{"className":3151,"code":3152,"language":52},[694],"❌ Build Failed\n\nError: [Specific error message]\n\nCommon Fixes:\n- TypeScript errors: Review type definitions\n- Missing deps: Run npm install\n- Import errors: Check file paths\n- Syntax errors: Check React component syntax\n\nShow build output for details.\nNeed help? Run: webflow library log\n",[3154],{"type":46,"tag":87,"props":3155,"children":3156},{"__ignoreMap":699},[3157],{"type":52,"value":3152},{"type":46,"tag":55,"props":3159,"children":3160},{},[3161],{"type":46,"tag":71,"props":3162,"children":3163},{},[3164],{"type":52,"value":3165},"Bundle Failures:",{"type":46,"tag":691,"props":3167,"children":3170},{"className":3168,"code":3169,"language":52},[694],"❌ Bundle Failed\n\nError: [Specific error from CLI]\n\nCommon Causes:\n- Invalid component files\n- Webpack configuration errors\n- Dependency conflicts\n- File path issues\n\nView detailed logs: webflow library log\n\nPossible solutions:\n1. Check component file syntax\n2. Verify webflow.json configuration\n3. Remove bundleConfig to use defaults\n4. Check dependencies in package.json\n",[3171],{"type":46,"tag":87,"props":3172,"children":3173},{"__ignoreMap":699},[3174],{"type":52,"value":3169},{"type":46,"tag":55,"props":3176,"children":3177},{},[3178],{"type":46,"tag":71,"props":3179,"children":3180},{},[3181],{"type":52,"value":3182},"Deployment Failures:",{"type":46,"tag":691,"props":3184,"children":3187},{"className":3185,"code":3186,"language":52},[694],"❌ Share Failed\n\nError: [Specific error from CLI]\n\nPossible Causes:\n- Network connection issues\n- Workspace authentication expired\n- Bundle validation failed\n- Workspace permissions\n\nSolutions:\n1. Check internet connection\n2. Re-authenticate: Remove .env and run share again\n3. Fix bundle issues: Run webflow library bundle first\n4. Verify workspace access in Webflow dashboard\n\nRetry share? (yes\u002Fno)\n",[3188],{"type":46,"tag":87,"props":3189,"children":3190},{"__ignoreMap":699},[3191],{"type":52,"value":3186},{"type":46,"tag":195,"props":3193,"children":3195},{"id":3194},"file-operations",[3196],{"type":52,"value":3197},"File Operations",{"type":46,"tag":55,"props":3199,"children":3200},{},[3201,3206],{"type":46,"tag":71,"props":3202,"children":3203},{},[3204],{"type":52,"value":3205},"Reading Files:",{"type":52,"value":3207},"\nAlways use Read tool (never modify):",{"type":46,"tag":691,"props":3209,"children":3212},{"className":3210,"code":3211,"language":52},[694],"# View library configuration\nRead: webflow.json\n\n# View package dependencies\nRead: package.json\n\n# View component source\nRead: src\u002FButton.webflow.tsx\n\n# View environment (if exists)\nRead: .env\n",[3213],{"type":46,"tag":87,"props":3214,"children":3215},{"__ignoreMap":699},[3216],{"type":52,"value":3211},{"type":46,"tag":55,"props":3218,"children":3219},{},[3220,3225],{"type":46,"tag":71,"props":3221,"children":3222},{},[3223],{"type":52,"value":3224},"Discovering Files:",{"type":52,"value":3226},"\nUse Glob tool to find files:",{"type":46,"tag":691,"props":3228,"children":3231},{"className":3229,"code":3230,"language":52},[694],"# Find all webflow components\nGlob: **\u002F*.webflow.tsx\n\n# Find configuration files\nGlob: *.json\n\n# Find source files\nGlob: src\u002F**\u002F*\n\n# Find build output\nGlob: dist\u002F**\u002F*\n",[3232],{"type":46,"tag":87,"props":3233,"children":3234},{"__ignoreMap":699},[3235],{"type":52,"value":3230},{"type":46,"tag":55,"props":3237,"children":3238},{},[3239],{"type":46,"tag":71,"props":3240,"children":3241},{},[3242],{"type":52,"value":3243},"Never Use Write\u002FEdit Tools:",{"type":46,"tag":77,"props":3245,"children":3246},{},[3247,3252,3257,3262,3267],{"type":46,"tag":81,"props":3248,"children":3249},{},[3250],{"type":52,"value":3251},"Don't create webflow.json with Write (show user the structure)",{"type":46,"tag":81,"props":3253,"children":3254},{},[3255],{"type":52,"value":3256},"Don't modify component files",{"type":46,"tag":81,"props":3258,"children":3259},{},[3260],{"type":52,"value":3261},"Don't edit package.json",{"type":46,"tag":81,"props":3263,"children":3264},{},[3265],{"type":52,"value":3266},"Let user make file changes",{"type":46,"tag":81,"props":3268,"children":3269},{},[3270],{"type":52,"value":3271},"Only read files to show content",{"type":46,"tag":195,"props":3273,"children":3275},{"id":3274},"progress-indicators",[3276],{"type":52,"value":3277},"Progress Indicators",{"type":46,"tag":55,"props":3279,"children":3280},{},[3281],{"type":46,"tag":71,"props":3282,"children":3283},{},[3284],{"type":52,"value":3285},"For Bundling:",{"type":46,"tag":691,"props":3287,"children":3290},{"className":3288,"code":3289,"language":52},[694],"🔄 Bundling Components...\n\nAnalyzing components... ✓\nResolving dependencies... ✓\nBuilding bundle... ⏳\nOptimizing... ⏳\n\nElapsed: 8s\n",[3291],{"type":46,"tag":87,"props":3292,"children":3293},{"__ignoreMap":699},[3294],{"type":52,"value":3289},{"type":46,"tag":55,"props":3296,"children":3297},{},[3298],{"type":46,"tag":71,"props":3299,"children":3300},{},[3301],{"type":52,"value":3302},"For Deployment:",{"type":46,"tag":691,"props":3304,"children":3307},{"className":3305,"code":3306,"language":52},[694],"🚀 Sharing Library...\n\nCreating bundle... ✓\nUploading to workspace... ⏳\nValidating components... ⏳\n\nUploaded: 287 KB\nElapsed: 12s\n",[3308],{"type":46,"tag":87,"props":3309,"children":3310},{"__ignoreMap":699},[3311],{"type":52,"value":3306},{"type":46,"tag":195,"props":3313,"children":3315},{"id":3314},"safety-patterns",[3316],{"type":52,"value":3317},"Safety Patterns",{"type":46,"tag":55,"props":3319,"children":3320},{},[3321],{"type":46,"tag":71,"props":3322,"children":3323},{},[3324],{"type":52,"value":3325},"Confirmation Keywords:",{"type":46,"tag":77,"props":3327,"children":3328},{},[3329,3334,3339,3344,3349],{"type":46,"tag":81,"props":3330,"children":3331},{},[3332],{"type":52,"value":3333},"\"share\" - Share library to workspace",{"type":46,"tag":81,"props":3335,"children":3336},{},[3337],{"type":52,"value":3338},"\"deploy\" - Alternative to \"share\"",{"type":46,"tag":81,"props":3340,"children":3341},{},[3342],{"type":52,"value":3343},"\"proceed\" - Continue with operation",{"type":46,"tag":81,"props":3345,"children":3346},{},[3347],{"type":52,"value":3348},"\"cancel\" - Cancel operation",{"type":46,"tag":81,"props":3350,"children":3351},{},[3352],{"type":52,"value":3353},"\"skip\" - Skip optional step",{"type":46,"tag":55,"props":3355,"children":3356},{},[3357,3362],{"type":46,"tag":71,"props":3358,"children":3359},{},[3360],{"type":52,"value":3361},"Preview Before Share:",{"type":52,"value":3363},"\nAlways show:",{"type":46,"tag":77,"props":3365,"children":3366},{},[3367,3372,3377,3381],{"type":46,"tag":81,"props":3368,"children":3369},{},[3370],{"type":52,"value":3371},"What will be shared (library name, components)",{"type":46,"tag":81,"props":3373,"children":3374},{},[3375],{"type":52,"value":3376},"Where it will go (workspace, or first-time auth needed)",{"type":46,"tag":81,"props":3378,"children":3379},{},[3380],{"type":52,"value":525},{"type":46,"tag":81,"props":3382,"children":3383},{},[3384],{"type":52,"value":3385},"Impact of changes (new\u002Fupdated components)",{"type":46,"tag":55,"props":3387,"children":3388},{},[3389],{"type":46,"tag":71,"props":3390,"children":3391},{},[3392],{"type":52,"value":3393},"Transparency:",{"type":46,"tag":77,"props":3395,"children":3396},{},[3397,3402,3407,3412,3417],{"type":46,"tag":81,"props":3398,"children":3399},{},[3400],{"type":52,"value":3401},"Show all CLI commands before execution",{"type":46,"tag":81,"props":3403,"children":3404},{},[3405],{"type":52,"value":3406},"Display CLI output in full",{"type":46,"tag":81,"props":3408,"children":3409},{},[3410],{"type":52,"value":3411},"Report success\u002Ffailure clearly",{"type":46,"tag":81,"props":3413,"children":3414},{},[3415],{"type":52,"value":3416},"Provide troubleshooting guidance",{"type":46,"tag":81,"props":3418,"children":3419},{},[3420],{"type":52,"value":3421},"Show log location for debugging",{"type":46,"tag":195,"props":3423,"children":3425},{"id":3424},"best-practices",[3426],{"type":52,"value":3427},"Best Practices",{"type":46,"tag":55,"props":3429,"children":3430},{},[3431],{"type":46,"tag":71,"props":3432,"children":3433},{},[3434],{"type":52,"value":3435},"Component Development:",{"type":46,"tag":77,"props":3437,"children":3438},{},[3439,3444,3449,3454,3459],{"type":46,"tag":81,"props":3440,"children":3441},{},[3442],{"type":52,"value":3443},"Use TypeScript for type safety",{"type":46,"tag":81,"props":3445,"children":3446},{},[3447],{"type":52,"value":3448},"Follow React best practices",{"type":46,"tag":81,"props":3450,"children":3451},{},[3452],{"type":52,"value":3453},"Keep bundle size small (\u003C 1MB ideal)",{"type":46,"tag":81,"props":3455,"children":3456},{},[3457],{"type":52,"value":3458},"Name files with .webflow extension for clarity",{"type":46,"tag":81,"props":3460,"children":3461},{},[3462],{"type":52,"value":3463},"Document component props",{"type":46,"tag":55,"props":3465,"children":3466},{},[3467],{"type":46,"tag":71,"props":3468,"children":3469},{},[3470],{"type":52,"value":3471},"Dependency Management:",{"type":46,"tag":77,"props":3473,"children":3474},{},[3475,3480,3485,3490,3501],{"type":46,"tag":81,"props":3476,"children":3477},{},[3478],{"type":52,"value":3479},"Keep dependencies minimal",{"type":46,"tag":81,"props":3481,"children":3482},{},[3483],{"type":52,"value":3484},"Avoid large libraries (lodash, moment)",{"type":46,"tag":81,"props":3486,"children":3487},{},[3488],{"type":52,"value":3489},"Use tree-shakeable packages",{"type":46,"tag":81,"props":3491,"children":3492},{},[3493,3495],{"type":52,"value":3494},"Check bundle impact: ",{"type":46,"tag":87,"props":3496,"children":3498},{"className":3497},[],[3499],{"type":52,"value":3500},"webflow library bundle --verbose",{"type":46,"tag":81,"props":3502,"children":3503},{},[3504],{"type":52,"value":3505},"Peer dependencies for React (not bundled)",{"type":46,"tag":55,"props":3507,"children":3508},{},[3509],{"type":46,"tag":71,"props":3510,"children":3511},{},[3512],{"type":52,"value":3513},"Updates and Versioning:",{"type":46,"tag":77,"props":3515,"children":3516},{},[3517,3522,3532,3542,3547],{"type":46,"tag":81,"props":3518,"children":3519},{},[3520],{"type":52,"value":3521},"Build before sharing",{"type":46,"tag":81,"props":3523,"children":3524},{},[3525,3527],{"type":52,"value":3526},"Test bundle locally: ",{"type":46,"tag":87,"props":3528,"children":3530},{"className":3529},[],[3531],{"type":52,"value":436},{"type":46,"tag":81,"props":3533,"children":3534},{},[3535,3537],{"type":52,"value":3536},"Share to update: ",{"type":46,"tag":87,"props":3538,"children":3540},{"className":3539},[],[3541],{"type":52,"value":125},{"type":46,"tag":81,"props":3543,"children":3544},{},[3545],{"type":52,"value":3546},"No version numbers needed (always \"latest\")",{"type":46,"tag":81,"props":3548,"children":3549},{},[3550],{"type":52,"value":3551},"Test in Designer after deployment",{"type":46,"tag":55,"props":3553,"children":3554},{},[3555],{"type":46,"tag":71,"props":3556,"children":3557},{},[3558],{"type":52,"value":3559},"Workspace Management:",{"type":46,"tag":77,"props":3561,"children":3562},{},[3563,3568,3573,3578,3583],{"type":46,"tag":81,"props":3564,"children":3565},{},[3566],{"type":52,"value":3567},"One workspace per .env file",{"type":46,"tag":81,"props":3569,"children":3570},{},[3571],{"type":52,"value":3572},"Use --api-token for multiple workspaces",{"type":46,"tag":81,"props":3574,"children":3575},{},[3576],{"type":52,"value":3577},"Add .env to .gitignore",{"type":46,"tag":81,"props":3579,"children":3580},{},[3581],{"type":52,"value":3582},"Rotate tokens in CI\u002FCD",{"type":46,"tag":81,"props":3584,"children":3585},{},[3586],{"type":52,"value":3587},"Document which workspace is configured",{"type":46,"tag":55,"props":3589,"children":3590},{},[3591],{"type":46,"tag":71,"props":3592,"children":3593},{},[3594],{"type":52,"value":3595},"Configuration:",{"type":46,"tag":77,"props":3597,"children":3598},{},[3599,3604,3609,3614,3619],{"type":46,"tag":81,"props":3600,"children":3601},{},[3602],{"type":52,"value":3603},"Keep webflow.json in project root",{"type":46,"tag":81,"props":3605,"children":3606},{},[3607],{"type":52,"value":3608},"Use clear library names",{"type":46,"tag":81,"props":3610,"children":3611},{},[3612],{"type":52,"value":3613},"Use specific component glob patterns",{"type":46,"tag":81,"props":3615,"children":3616},{},[3617],{"type":52,"value":3618},"Add bundleConfig only if needed",{"type":46,"tag":81,"props":3620,"children":3621},{},[3622],{"type":52,"value":3623},"Version control webflow.json (not .env)",{"type":46,"tag":195,"props":3625,"children":3627},{"id":3626},"component-lifecycle",[3628],{"type":52,"value":3629},"Component Lifecycle",{"type":46,"tag":55,"props":3631,"children":3632},{},[3633],{"type":46,"tag":71,"props":3634,"children":3635},{},[3636],{"type":52,"value":3637},"Initial Setup:",{"type":46,"tag":202,"props":3639,"children":3640},{},[3641,3646,3651,3656,3666,3676],{"type":46,"tag":81,"props":3642,"children":3643},{},[3644],{"type":52,"value":3645},"Create\u002Fhave React project",{"type":46,"tag":81,"props":3647,"children":3648},{},[3649],{"type":52,"value":3650},"Add webflow.json with library configuration",{"type":46,"tag":81,"props":3652,"children":3653},{},[3654],{"type":52,"value":3655},"Name component files (e.g., .webflow.tsx)",{"type":46,"tag":81,"props":3657,"children":3658},{},[3659,3661],{"type":52,"value":3660},"Build: ",{"type":46,"tag":87,"props":3662,"children":3664},{"className":3663},[],[3665],{"type":52,"value":401},{"type":46,"tag":81,"props":3667,"children":3668},{},[3669,3671],{"type":52,"value":3670},"Test bundle: ",{"type":46,"tag":87,"props":3672,"children":3674},{"className":3673},[],[3675],{"type":52,"value":436},{"type":46,"tag":81,"props":3677,"children":3678},{},[3679,3681,3686],{"type":52,"value":3680},"Share: ",{"type":46,"tag":87,"props":3682,"children":3684},{"className":3683},[],[3685],{"type":52,"value":125},{"type":52,"value":3687}," (authenticates first time)",{"type":46,"tag":55,"props":3689,"children":3690},{},[3691],{"type":46,"tag":71,"props":3692,"children":3693},{},[3694],{"type":52,"value":3695},"Making Updates:",{"type":46,"tag":202,"props":3697,"children":3698},{},[3699,3704,3713,3724],{"type":46,"tag":81,"props":3700,"children":3701},{},[3702],{"type":52,"value":3703},"Edit component source files",{"type":46,"tag":81,"props":3705,"children":3706},{},[3707,3708],{"type":52,"value":3660},{"type":46,"tag":87,"props":3709,"children":3711},{"className":3710},[],[3712],{"type":52,"value":401},{"type":46,"tag":81,"props":3714,"children":3715},{},[3716,3717,3722],{"type":52,"value":3680},{"type":46,"tag":87,"props":3718,"children":3720},{"className":3719},[],[3721],{"type":52,"value":125},{"type":52,"value":3723}," (uses saved credentials)",{"type":46,"tag":81,"props":3725,"children":3726},{},[3727],{"type":52,"value":3728},"Refresh Designer to see changes",{"type":46,"tag":55,"props":3730,"children":3731},{},[3732],{"type":46,"tag":71,"props":3733,"children":3734},{},[3735],{"type":52,"value":3736},"Testing:",{"type":46,"tag":202,"props":3738,"children":3739},{},[3740,3750,3755,3760,3770,3775,3780],{"type":46,"tag":81,"props":3741,"children":3742},{},[3743,3745],{"type":52,"value":3744},"Bundle locally: ",{"type":46,"tag":87,"props":3746,"children":3748},{"className":3747},[],[3749],{"type":52,"value":436},{"type":46,"tag":81,"props":3751,"children":3752},{},[3753],{"type":52,"value":3754},"Check bundle size and validation",{"type":46,"tag":81,"props":3756,"children":3757},{},[3758],{"type":52,"value":3759},"Fix any issues",{"type":46,"tag":81,"props":3761,"children":3762},{},[3763,3765],{"type":52,"value":3764},"Share when ready: ",{"type":46,"tag":87,"props":3766,"children":3768},{"className":3767},[],[3769],{"type":52,"value":125},{"type":46,"tag":81,"props":3771,"children":3772},{},[3773],{"type":52,"value":3774},"Open Webflow Designer",{"type":46,"tag":81,"props":3776,"children":3777},{},[3778],{"type":52,"value":3779},"Add components to page",{"type":46,"tag":81,"props":3781,"children":3782},{},[3783],{"type":52,"value":3784},"Test functionality",{"type":46,"tag":55,"props":3786,"children":3787},{},[3788],{"type":46,"tag":71,"props":3789,"children":3790},{},[3791],{"type":52,"value":3792},"Debugging:",{"type":46,"tag":202,"props":3794,"children":3795},{},[3796,3806,3816,3821,3826],{"type":46,"tag":81,"props":3797,"children":3798},{},[3799,3801],{"type":52,"value":3800},"View logs: ",{"type":46,"tag":87,"props":3802,"children":3804},{"className":3803},[],[3805],{"type":52,"value":667},{"type":46,"tag":81,"props":3807,"children":3808},{},[3809,3811],{"type":52,"value":3810},"Bundle with verbose: ",{"type":46,"tag":87,"props":3812,"children":3814},{"className":3813},[],[3815],{"type":52,"value":3500},{"type":46,"tag":81,"props":3817,"children":3818},{},[3819],{"type":52,"value":3820},"Check configuration: cat webflow.json",{"type":46,"tag":81,"props":3822,"children":3823},{},[3824],{"type":52,"value":3825},"Verify build: npm run build",{"type":46,"tag":81,"props":3827,"children":3828},{},[3829,3831],{"type":52,"value":3830},"Test in development mode: ",{"type":46,"tag":87,"props":3832,"children":3834},{"className":3833},[],[3835],{"type":52,"value":3836},"webflow library share --dev",{"type":46,"tag":195,"props":3838,"children":3840},{"id":3839},"cli-command-reference",[3841],{"type":52,"value":3842},"CLI Command Reference",{"type":46,"tag":55,"props":3844,"children":3845},{},[3846],{"type":46,"tag":71,"props":3847,"children":3848},{},[3849],{"type":52,"value":3850},"Installation:",{"type":46,"tag":691,"props":3852,"children":3854},{"className":1583,"code":3853,"language":1585,"meta":699,"style":699},"# Install CLI globally\nnpm install -g @webflow\u002Fwebflow-cli\n\n# Verify installation\nwebflow --version\n",[3855],{"type":46,"tag":87,"props":3856,"children":3857},{"__ignoreMap":699},[3858,3866,3888,3895,3903],{"type":46,"tag":1079,"props":3859,"children":3860},{"class":1081,"line":1082},[3861],{"type":46,"tag":1079,"props":3862,"children":3863},{"style":1595},[3864],{"type":52,"value":3865},"# Install CLI globally\n",{"type":46,"tag":1079,"props":3867,"children":3868},{"class":1081,"line":1104},[3869,3873,3878,3883],{"type":46,"tag":1079,"props":3870,"children":3871},{"style":1604},[3872],{"type":52,"value":2261},{"type":46,"tag":1079,"props":3874,"children":3875},{"style":1098},[3876],{"type":52,"value":3877}," install",{"type":46,"tag":1079,"props":3879,"children":3880},{"style":1098},[3881],{"type":52,"value":3882}," -g",{"type":46,"tag":1079,"props":3884,"children":3885},{"style":1098},[3886],{"type":52,"value":3887}," @webflow\u002Fwebflow-cli\n",{"type":46,"tag":1079,"props":3889,"children":3890},{"class":1081,"line":1118},[3891],{"type":46,"tag":1079,"props":3892,"children":3893},{"emptyLinePlaceholder":1162},[3894],{"type":52,"value":1165},{"type":46,"tag":1079,"props":3896,"children":3897},{"class":1081,"line":1131},[3898],{"type":46,"tag":1079,"props":3899,"children":3900},{"style":1595},[3901],{"type":52,"value":3902},"# Verify installation\n",{"type":46,"tag":1079,"props":3904,"children":3905},{"class":1081,"line":260},[3906,3910],{"type":46,"tag":1079,"props":3907,"children":3908},{"style":1604},[3909],{"type":52,"value":9},{"type":46,"tag":1079,"props":3911,"children":3912},{"style":1098},[3913],{"type":52,"value":3914}," --version\n",{"type":46,"tag":55,"props":3916,"children":3917},{},[3918],{"type":46,"tag":71,"props":3919,"children":3920},{},[3921],{"type":52,"value":3922},"Library Commands:",{"type":46,"tag":691,"props":3924,"children":3926},{"className":1583,"code":3925,"language":1585,"meta":699,"style":699},"# Bundle locally (testing\u002Fvalidation)\nwebflow library bundle [options]\n\n# Share to workspace (bundle + deploy)\nwebflow library share [options]\n\n# View latest log file\nwebflow library log\n",[3927],{"type":46,"tag":87,"props":3928,"children":3929},{"__ignoreMap":699},[3930,3938,3959,3966,3974,3993,4000,4008],{"type":46,"tag":1079,"props":3931,"children":3932},{"class":1081,"line":1082},[3933],{"type":46,"tag":1079,"props":3934,"children":3935},{"style":1595},[3936],{"type":52,"value":3937},"# Bundle locally (testing\u002Fvalidation)\n",{"type":46,"tag":1079,"props":3939,"children":3940},{"class":1081,"line":1104},[3941,3945,3949,3954],{"type":46,"tag":1079,"props":3942,"children":3943},{"style":1604},[3944],{"type":52,"value":9},{"type":46,"tag":1079,"props":3946,"children":3947},{"style":1098},[3948],{"type":52,"value":1611},{"type":46,"tag":1079,"props":3950,"children":3951},{"style":1098},[3952],{"type":52,"value":3953}," bundle",{"type":46,"tag":1079,"props":3955,"children":3956},{"style":1619},[3957],{"type":52,"value":3958}," [options]\n",{"type":46,"tag":1079,"props":3960,"children":3961},{"class":1081,"line":1118},[3962],{"type":46,"tag":1079,"props":3963,"children":3964},{"emptyLinePlaceholder":1162},[3965],{"type":52,"value":1165},{"type":46,"tag":1079,"props":3967,"children":3968},{"class":1081,"line":1131},[3969],{"type":46,"tag":1079,"props":3970,"children":3971},{"style":1595},[3972],{"type":52,"value":3973},"# Share to workspace (bundle + deploy)\n",{"type":46,"tag":1079,"props":3975,"children":3976},{"class":1081,"line":260},[3977,3981,3985,3989],{"type":46,"tag":1079,"props":3978,"children":3979},{"style":1604},[3980],{"type":52,"value":9},{"type":46,"tag":1079,"props":3982,"children":3983},{"style":1098},[3984],{"type":52,"value":1611},{"type":46,"tag":1079,"props":3986,"children":3987},{"style":1098},[3988],{"type":52,"value":1616},{"type":46,"tag":1079,"props":3990,"children":3991},{"style":1619},[3992],{"type":52,"value":3958},{"type":46,"tag":1079,"props":3994,"children":3995},{"class":1081,"line":1168},[3996],{"type":46,"tag":1079,"props":3997,"children":3998},{"emptyLinePlaceholder":1162},[3999],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4001,"children":4002},{"class":1081,"line":1181},[4003],{"type":46,"tag":1079,"props":4004,"children":4005},{"style":1595},[4006],{"type":52,"value":4007},"# View latest log file\n",{"type":46,"tag":1079,"props":4009,"children":4010},{"class":1081,"line":1194},[4011,4015,4019],{"type":46,"tag":1079,"props":4012,"children":4013},{"style":1604},[4014],{"type":52,"value":9},{"type":46,"tag":1079,"props":4016,"children":4017},{"style":1098},[4018],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4020,"children":4021},{"style":1098},[4022],{"type":52,"value":3024},{"type":46,"tag":55,"props":4024,"children":4025},{},[4026],{"type":46,"tag":71,"props":4027,"children":4028},{},[4029],{"type":52,"value":2414},{"type":46,"tag":691,"props":4031,"children":4033},{"className":1583,"code":4032,"language":1585,"meta":699,"style":699},"# Custom output path\nwebflow library bundle --output-path .\u002Fbuild\n\n# Force bundling (ignore warnings)\nwebflow library bundle --force\n\n# Development mode\nwebflow library bundle --dev\n\n# Show bundler config\nwebflow library bundle --debug-bundler\n\n# Verbose output\nwebflow library bundle --verbose\n",[4034],{"type":46,"tag":87,"props":4035,"children":4036},{"__ignoreMap":699},[4037,4045,4070,4077,4085,4104,4111,4118,4137,4144,4152,4172,4179,4187],{"type":46,"tag":1079,"props":4038,"children":4039},{"class":1081,"line":1082},[4040],{"type":46,"tag":1079,"props":4041,"children":4042},{"style":1595},[4043],{"type":52,"value":4044},"# Custom output path\n",{"type":46,"tag":1079,"props":4046,"children":4047},{"class":1081,"line":1104},[4048,4052,4056,4060,4065],{"type":46,"tag":1079,"props":4049,"children":4050},{"style":1604},[4051],{"type":52,"value":9},{"type":46,"tag":1079,"props":4053,"children":4054},{"style":1098},[4055],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4057,"children":4058},{"style":1098},[4059],{"type":52,"value":3953},{"type":46,"tag":1079,"props":4061,"children":4062},{"style":1098},[4063],{"type":52,"value":4064}," --output-path",{"type":46,"tag":1079,"props":4066,"children":4067},{"style":1098},[4068],{"type":52,"value":4069}," .\u002Fbuild\n",{"type":46,"tag":1079,"props":4071,"children":4072},{"class":1081,"line":1118},[4073],{"type":46,"tag":1079,"props":4074,"children":4075},{"emptyLinePlaceholder":1162},[4076],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4078,"children":4079},{"class":1081,"line":1131},[4080],{"type":46,"tag":1079,"props":4081,"children":4082},{"style":1595},[4083],{"type":52,"value":4084},"# Force bundling (ignore warnings)\n",{"type":46,"tag":1079,"props":4086,"children":4087},{"class":1081,"line":260},[4088,4092,4096,4100],{"type":46,"tag":1079,"props":4089,"children":4090},{"style":1604},[4091],{"type":52,"value":9},{"type":46,"tag":1079,"props":4093,"children":4094},{"style":1098},[4095],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4097,"children":4098},{"style":1098},[4099],{"type":52,"value":3953},{"type":46,"tag":1079,"props":4101,"children":4102},{"style":1098},[4103],{"type":52,"value":2771},{"type":46,"tag":1079,"props":4105,"children":4106},{"class":1081,"line":1168},[4107],{"type":46,"tag":1079,"props":4108,"children":4109},{"emptyLinePlaceholder":1162},[4110],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4112,"children":4113},{"class":1081,"line":1181},[4114],{"type":46,"tag":1079,"props":4115,"children":4116},{"style":1595},[4117],{"type":52,"value":2786},{"type":46,"tag":1079,"props":4119,"children":4120},{"class":1081,"line":1194},[4121,4125,4129,4133],{"type":46,"tag":1079,"props":4122,"children":4123},{"style":1604},[4124],{"type":52,"value":9},{"type":46,"tag":1079,"props":4126,"children":4127},{"style":1098},[4128],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4130,"children":4131},{"style":1098},[4132],{"type":52,"value":3953},{"type":46,"tag":1079,"props":4134,"children":4135},{"style":1098},[4136],{"type":52,"value":2806},{"type":46,"tag":1079,"props":4138,"children":4139},{"class":1081,"line":384},[4140],{"type":46,"tag":1079,"props":4141,"children":4142},{"emptyLinePlaceholder":1162},[4143],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4145,"children":4146},{"class":1081,"line":1224},[4147],{"type":46,"tag":1079,"props":4148,"children":4149},{"style":1595},[4150],{"type":52,"value":4151},"# Show bundler config\n",{"type":46,"tag":1079,"props":4153,"children":4154},{"class":1081,"line":1247},[4155,4159,4163,4167],{"type":46,"tag":1079,"props":4156,"children":4157},{"style":1604},[4158],{"type":52,"value":9},{"type":46,"tag":1079,"props":4160,"children":4161},{"style":1098},[4162],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4164,"children":4165},{"style":1098},[4166],{"type":52,"value":3953},{"type":46,"tag":1079,"props":4168,"children":4169},{"style":1098},[4170],{"type":52,"value":4171}," --debug-bundler\n",{"type":46,"tag":1079,"props":4173,"children":4174},{"class":1081,"line":1255},[4175],{"type":46,"tag":1079,"props":4176,"children":4177},{"emptyLinePlaceholder":1162},[4178],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4180,"children":4181},{"class":1081,"line":1277},[4182],{"type":46,"tag":1079,"props":4183,"children":4184},{"style":1595},[4185],{"type":52,"value":4186},"# Verbose output\n",{"type":46,"tag":1079,"props":4188,"children":4189},{"class":1081,"line":497},[4190,4194,4198,4202],{"type":46,"tag":1079,"props":4191,"children":4192},{"style":1604},[4193],{"type":52,"value":9},{"type":46,"tag":1079,"props":4195,"children":4196},{"style":1098},[4197],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4199,"children":4200},{"style":1098},[4201],{"type":52,"value":3953},{"type":46,"tag":1079,"props":4203,"children":4204},{"style":1098},[4205],{"type":52,"value":4206}," --verbose\n",{"type":46,"tag":55,"props":4208,"children":4209},{},[4210],{"type":46,"tag":71,"props":4211,"children":4212},{},[4213],{"type":52,"value":2814},{"type":46,"tag":691,"props":4215,"children":4217},{"className":1583,"code":4216,"language":1585,"meta":699,"style":699},"# Standard interactive share\nwebflow library share\n\n# Non-interactive (CI\u002FCD)\nwebflow library share --no-input --api-token \u003CTOKEN>\n\n# Force share (ignore warnings)\nwebflow library share --force\n\n# Development mode\nwebflow library share --dev\n\n# Custom manifest location\nwebflow library share --manifest .\u002Fconfig\u002Fwebflow.json\n",[4218],{"type":46,"tag":87,"props":4219,"children":4220},{"__ignoreMap":699},[4221,4229,4244,4251,4259,4300,4307,4314,4333,4340,4347,4366,4373,4381],{"type":46,"tag":1079,"props":4222,"children":4223},{"class":1081,"line":1082},[4224],{"type":46,"tag":1079,"props":4225,"children":4226},{"style":1595},[4227],{"type":52,"value":4228},"# Standard interactive share\n",{"type":46,"tag":1079,"props":4230,"children":4231},{"class":1081,"line":1104},[4232,4236,4240],{"type":46,"tag":1079,"props":4233,"children":4234},{"style":1604},[4235],{"type":52,"value":9},{"type":46,"tag":1079,"props":4237,"children":4238},{"style":1098},[4239],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4241,"children":4242},{"style":1098},[4243],{"type":52,"value":2676},{"type":46,"tag":1079,"props":4245,"children":4246},{"class":1081,"line":1118},[4247],{"type":46,"tag":1079,"props":4248,"children":4249},{"emptyLinePlaceholder":1162},[4250],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4252,"children":4253},{"class":1081,"line":1131},[4254],{"type":46,"tag":1079,"props":4255,"children":4256},{"style":1595},[4257],{"type":52,"value":4258},"# Non-interactive (CI\u002FCD)\n",{"type":46,"tag":1079,"props":4260,"children":4261},{"class":1081,"line":260},[4262,4266,4270,4274,4279,4283,4287,4291,4295],{"type":46,"tag":1079,"props":4263,"children":4264},{"style":1604},[4265],{"type":52,"value":9},{"type":46,"tag":1079,"props":4267,"children":4268},{"style":1098},[4269],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4271,"children":4272},{"style":1098},[4273],{"type":52,"value":1616},{"type":46,"tag":1079,"props":4275,"children":4276},{"style":1098},[4277],{"type":52,"value":4278}," --no-input",{"type":46,"tag":1079,"props":4280,"children":4281},{"style":1098},[4282],{"type":52,"value":2711},{"type":46,"tag":1079,"props":4284,"children":4285},{"style":1092},[4286],{"type":52,"value":2716},{"type":46,"tag":1079,"props":4288,"children":4289},{"style":1098},[4290],{"type":52,"value":2721},{"type":46,"tag":1079,"props":4292,"children":4293},{"style":1619},[4294],{"type":52,"value":2726},{"type":46,"tag":1079,"props":4296,"children":4297},{"style":1092},[4298],{"type":52,"value":4299},">\n",{"type":46,"tag":1079,"props":4301,"children":4302},{"class":1081,"line":1168},[4303],{"type":46,"tag":1079,"props":4304,"children":4305},{"emptyLinePlaceholder":1162},[4306],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4308,"children":4309},{"class":1081,"line":1181},[4310],{"type":46,"tag":1079,"props":4311,"children":4312},{"style":1595},[4313],{"type":52,"value":2751},{"type":46,"tag":1079,"props":4315,"children":4316},{"class":1081,"line":1194},[4317,4321,4325,4329],{"type":46,"tag":1079,"props":4318,"children":4319},{"style":1604},[4320],{"type":52,"value":9},{"type":46,"tag":1079,"props":4322,"children":4323},{"style":1098},[4324],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4326,"children":4327},{"style":1098},[4328],{"type":52,"value":1616},{"type":46,"tag":1079,"props":4330,"children":4331},{"style":1098},[4332],{"type":52,"value":2771},{"type":46,"tag":1079,"props":4334,"children":4335},{"class":1081,"line":384},[4336],{"type":46,"tag":1079,"props":4337,"children":4338},{"emptyLinePlaceholder":1162},[4339],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4341,"children":4342},{"class":1081,"line":1224},[4343],{"type":46,"tag":1079,"props":4344,"children":4345},{"style":1595},[4346],{"type":52,"value":2786},{"type":46,"tag":1079,"props":4348,"children":4349},{"class":1081,"line":1247},[4350,4354,4358,4362],{"type":46,"tag":1079,"props":4351,"children":4352},{"style":1604},[4353],{"type":52,"value":9},{"type":46,"tag":1079,"props":4355,"children":4356},{"style":1098},[4357],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4359,"children":4360},{"style":1098},[4361],{"type":52,"value":1616},{"type":46,"tag":1079,"props":4363,"children":4364},{"style":1098},[4365],{"type":52,"value":2806},{"type":46,"tag":1079,"props":4367,"children":4368},{"class":1081,"line":1255},[4369],{"type":46,"tag":1079,"props":4370,"children":4371},{"emptyLinePlaceholder":1162},[4372],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4374,"children":4375},{"class":1081,"line":1277},[4376],{"type":46,"tag":1079,"props":4377,"children":4378},{"style":1595},[4379],{"type":52,"value":4380},"# Custom manifest location\n",{"type":46,"tag":1079,"props":4382,"children":4383},{"class":1081,"line":497},[4384,4388,4392,4396,4401],{"type":46,"tag":1079,"props":4385,"children":4386},{"style":1604},[4387],{"type":52,"value":9},{"type":46,"tag":1079,"props":4389,"children":4390},{"style":1098},[4391],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4393,"children":4394},{"style":1098},[4395],{"type":52,"value":1616},{"type":46,"tag":1079,"props":4397,"children":4398},{"style":1098},[4399],{"type":52,"value":4400}," --manifest",{"type":46,"tag":1079,"props":4402,"children":4403},{"style":1098},[4404],{"type":52,"value":4405}," .\u002Fconfig\u002Fwebflow.json\n",{"type":46,"tag":55,"props":4407,"children":4408},{},[4409],{"type":46,"tag":71,"props":4410,"children":4411},{},[4412],{"type":52,"value":4413},"Global Options:",{"type":46,"tag":691,"props":4415,"children":4417},{"className":1583,"code":4416,"language":1585,"meta":699,"style":699},"# Show version\nwebflow --version\n\n# Show help\nwebflow --help\nwebflow library --help\nwebflow library share --help\n",[4418],{"type":46,"tag":87,"props":4419,"children":4420},{"__ignoreMap":699},[4421,4429,4440,4447,4455,4467,4482],{"type":46,"tag":1079,"props":4422,"children":4423},{"class":1081,"line":1082},[4424],{"type":46,"tag":1079,"props":4425,"children":4426},{"style":1595},[4427],{"type":52,"value":4428},"# Show version\n",{"type":46,"tag":1079,"props":4430,"children":4431},{"class":1081,"line":1104},[4432,4436],{"type":46,"tag":1079,"props":4433,"children":4434},{"style":1604},[4435],{"type":52,"value":9},{"type":46,"tag":1079,"props":4437,"children":4438},{"style":1098},[4439],{"type":52,"value":3914},{"type":46,"tag":1079,"props":4441,"children":4442},{"class":1081,"line":1118},[4443],{"type":46,"tag":1079,"props":4444,"children":4445},{"emptyLinePlaceholder":1162},[4446],{"type":52,"value":1165},{"type":46,"tag":1079,"props":4448,"children":4449},{"class":1081,"line":1131},[4450],{"type":46,"tag":1079,"props":4451,"children":4452},{"style":1595},[4453],{"type":52,"value":4454},"# Show help\n",{"type":46,"tag":1079,"props":4456,"children":4457},{"class":1081,"line":260},[4458,4462],{"type":46,"tag":1079,"props":4459,"children":4460},{"style":1604},[4461],{"type":52,"value":9},{"type":46,"tag":1079,"props":4463,"children":4464},{"style":1098},[4465],{"type":52,"value":4466}," --help\n",{"type":46,"tag":1079,"props":4468,"children":4469},{"class":1081,"line":1168},[4470,4474,4478],{"type":46,"tag":1079,"props":4471,"children":4472},{"style":1604},[4473],{"type":52,"value":9},{"type":46,"tag":1079,"props":4475,"children":4476},{"style":1098},[4477],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4479,"children":4480},{"style":1098},[4481],{"type":52,"value":4466},{"type":46,"tag":1079,"props":4483,"children":4484},{"class":1081,"line":1181},[4485,4489,4493,4497],{"type":46,"tag":1079,"props":4486,"children":4487},{"style":1604},[4488],{"type":52,"value":9},{"type":46,"tag":1079,"props":4490,"children":4491},{"style":1098},[4492],{"type":52,"value":1611},{"type":46,"tag":1079,"props":4494,"children":4495},{"style":1098},[4496],{"type":52,"value":1616},{"type":46,"tag":1079,"props":4498,"children":4499},{"style":1098},[4500],{"type":52,"value":4466},{"type":46,"tag":61,"props":4502,"children":4504},{"id":4503},"quick-reference",[4505],{"type":52,"value":4506},"Quick Reference",{"type":46,"tag":55,"props":4508,"children":4509},{},[4510,4515],{"type":46,"tag":71,"props":4511,"children":4512},{},[4513],{"type":52,"value":4514},"Workflow:",{"type":52,"value":4516}," configure webflow.json → build → bundle → share",{"type":46,"tag":55,"props":4518,"children":4519},{},[4520],{"type":46,"tag":71,"props":4521,"children":4522},{},[4523],{"type":52,"value":4524},"Key Commands:",{"type":46,"tag":77,"props":4526,"children":4527},{},[4528,4538,4548],{"type":46,"tag":81,"props":4529,"children":4530},{},[4531,4536],{"type":46,"tag":87,"props":4532,"children":4534},{"className":4533},[],[4535],{"type":52,"value":436},{"type":52,"value":4537}," - Bundle locally for testing",{"type":46,"tag":81,"props":4539,"children":4540},{},[4541,4546],{"type":46,"tag":87,"props":4542,"children":4544},{"className":4543},[],[4545],{"type":52,"value":125},{"type":52,"value":4547}," - Bundle and deploy to workspace",{"type":46,"tag":81,"props":4549,"children":4550},{},[4551,4556],{"type":46,"tag":87,"props":4552,"children":4554},{"className":4553},[],[4555],{"type":52,"value":667},{"type":52,"value":4557}," - View debug logs",{"type":46,"tag":55,"props":4559,"children":4560},{},[4561,4565],{"type":46,"tag":71,"props":4562,"children":4563},{},[4564],{"type":52,"value":3595},{"type":52,"value":4566}," webflow.json with library section",{"type":46,"tag":55,"props":4568,"children":4569},{},[4570,4575,4577,4582],{"type":46,"tag":71,"props":4571,"children":4572},{},[4573],{"type":52,"value":4574},"Authentication:",{"type":52,"value":4576}," Automatic on first ",{"type":46,"tag":87,"props":4578,"children":4580},{"className":4579},[],[4581],{"type":52,"value":125},{"type":52,"value":4583}," (opens browser)",{"type":46,"tag":55,"props":4585,"children":4586},{},[4587,4592],{"type":46,"tag":71,"props":4588,"children":4589},{},[4590],{"type":52,"value":4591},"Environment:",{"type":52,"value":4593}," WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN in .env",{"type":46,"tag":55,"props":4595,"children":4596},{},[4597,4602,4604,4609],{"type":46,"tag":71,"props":4598,"children":4599},{},[4600],{"type":52,"value":4601},"Verification:",{"type":52,"value":4603}," Always check ",{"type":46,"tag":87,"props":4605,"children":4607},{"className":4606},[],[4608],{"type":52,"value":114},{"type":52,"value":4610}," first",{"type":46,"tag":55,"props":4612,"children":4613},{},[4614,4619],{"type":46,"tag":71,"props":4615,"children":4616},{},[4617],{"type":52,"value":4618},"Preview:",{"type":52,"value":4620}," Show bundle details before sharing",{"type":46,"tag":55,"props":4622,"children":4623},{},[4624,4629],{"type":46,"tag":71,"props":4625,"children":4626},{},[4627],{"type":52,"value":4628},"Confirmation:",{"type":52,"value":4630}," Require \"share\" keyword to proceed",{"type":46,"tag":55,"props":4632,"children":4633},{},[4634,4639,4641],{"type":46,"tag":71,"props":4635,"children":4636},{},[4637],{"type":52,"value":4638},"Documentation:",{"type":52,"value":4640}," ",{"type":46,"tag":4642,"props":4643,"children":4647},"a",{"href":4644,"rel":4645},"https:\u002F\u002Fdevelopers.webflow.com\u002Fcode-components\u002Fintroduction",[4646],"nofollow",[4648],{"type":52,"value":4644},{"type":46,"tag":4650,"props":4651,"children":4652},"style",{},[4653],{"type":52,"value":4654},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4656,"total":1510},[4657,4674,4682,4699,4716,4732,4748],{"slug":4658,"name":4659,"fn":4660,"description":4661,"org":4662,"tags":4663,"stars":27,"repoUrl":28,"updatedAt":4673},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4664,4665,4668,4669,4672],{"name":18,"slug":19,"type":16},{"name":4666,"slug":4667,"type":16},"Cloud","cloud",{"name":21,"slug":22,"type":16},{"name":4670,"slug":4671,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":4,"name":5,"fn":6,"description":7,"org":4675,"tags":4676,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4677,4678,4679,4680,4681],{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":25,"slug":26,"type":16},{"name":10,"slug":9,"type":16},{"slug":4683,"name":4684,"fn":4685,"description":4686,"org":4687,"tags":4688,"stars":27,"repoUrl":28,"updatedAt":4698},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4689,4690,4693,4694,4697],{"name":18,"slug":19,"type":16},{"name":4691,"slug":4692,"type":16},"Plugin Development","plugin-development",{"name":14,"slug":15,"type":16},{"name":4695,"slug":4696,"type":16},"TypeScript","typescript",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:43.853573",{"slug":4700,"name":4701,"fn":4702,"description":4703,"org":4704,"tags":4705,"stars":27,"repoUrl":28,"updatedAt":4715},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4706,4707,4710,4713,4714],{"name":18,"slug":19,"type":16},{"name":4708,"slug":4709,"type":16},"Frontend","frontend",{"name":4711,"slug":4712,"type":16},"Next.js","next-js",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":4717,"name":4718,"fn":4719,"description":4720,"org":4721,"tags":4722,"stars":27,"repoUrl":28,"updatedAt":4731},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4723,4724,4727,4730],{"name":18,"slug":19,"type":16},{"name":4725,"slug":4726,"type":16},"Configuration","configuration",{"name":4728,"slug":4729,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":4733,"name":4734,"fn":4735,"description":4736,"org":4737,"tags":4738,"stars":27,"repoUrl":28,"updatedAt":4747},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4739,4742,4745,4746],{"name":4740,"slug":4741,"type":16},"Architecture","architecture",{"name":4743,"slug":4744,"type":16},"Code Analysis","code-analysis",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":4749,"name":4750,"fn":4751,"description":4752,"org":4753,"tags":4754,"stars":27,"repoUrl":28,"updatedAt":4761},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4755,4756,4757,4760],{"name":4708,"slug":4709,"type":16},{"name":14,"slug":15,"type":16},{"name":4758,"slug":4759,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",{"items":4763,"total":1510},[4764,4772,4780,4788,4796,4803,4810,4817,4831,4843,4857,4873],{"slug":4658,"name":4659,"fn":4660,"description":4661,"org":4765,"tags":4766,"stars":27,"repoUrl":28,"updatedAt":4673},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4767,4768,4769,4770,4771],{"name":18,"slug":19,"type":16},{"name":4666,"slug":4667,"type":16},{"name":21,"slug":22,"type":16},{"name":4670,"slug":4671,"type":16},{"name":10,"slug":9,"type":16},{"slug":4,"name":5,"fn":6,"description":7,"org":4773,"tags":4774,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4775,4776,4777,4778,4779],{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":25,"slug":26,"type":16},{"name":10,"slug":9,"type":16},{"slug":4683,"name":4684,"fn":4685,"description":4686,"org":4781,"tags":4782,"stars":27,"repoUrl":28,"updatedAt":4698},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4783,4784,4785,4786,4787],{"name":18,"slug":19,"type":16},{"name":4691,"slug":4692,"type":16},{"name":14,"slug":15,"type":16},{"name":4695,"slug":4696,"type":16},{"name":10,"slug":9,"type":16},{"slug":4700,"name":4701,"fn":4702,"description":4703,"org":4789,"tags":4790,"stars":27,"repoUrl":28,"updatedAt":4715},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4791,4792,4793,4794,4795],{"name":18,"slug":19,"type":16},{"name":4708,"slug":4709,"type":16},{"name":4711,"slug":4712,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":4717,"name":4718,"fn":4719,"description":4720,"org":4797,"tags":4798,"stars":27,"repoUrl":28,"updatedAt":4731},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4799,4800,4801,4802],{"name":18,"slug":19,"type":16},{"name":4725,"slug":4726,"type":16},{"name":4728,"slug":4729,"type":16},{"name":10,"slug":9,"type":16},{"slug":4733,"name":4734,"fn":4735,"description":4736,"org":4804,"tags":4805,"stars":27,"repoUrl":28,"updatedAt":4747},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4806,4807,4808,4809],{"name":4740,"slug":4741,"type":16},{"name":4743,"slug":4744,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},{"slug":4749,"name":4750,"fn":4751,"description":4752,"org":4811,"tags":4812,"stars":27,"repoUrl":28,"updatedAt":4761},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4813,4814,4815,4816],{"name":4708,"slug":4709,"type":16},{"name":14,"slug":15,"type":16},{"name":4758,"slug":4759,"type":16},{"name":10,"slug":9,"type":16},{"slug":4818,"name":4819,"fn":4820,"description":4821,"org":4822,"tags":4823,"stars":27,"repoUrl":28,"updatedAt":4830},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4824,4827,4828,4829],{"name":4825,"slug":4826,"type":16},"Migration","migration",{"name":14,"slug":15,"type":16},{"name":4695,"slug":4696,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:52.523608",{"slug":4832,"name":4833,"fn":4834,"description":4835,"org":4836,"tags":4837,"stars":27,"repoUrl":28,"updatedAt":4842},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4838,4839,4840,4841],{"name":21,"slug":22,"type":16},{"name":4708,"slug":4709,"type":16},{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":4844,"name":4845,"fn":4846,"description":4847,"org":4848,"tags":4849,"stars":27,"repoUrl":28,"updatedAt":4856},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4850,4851,4854,4855],{"name":4725,"slug":4726,"type":16},{"name":4852,"slug":4853,"type":16},"Local Development","local-development",{"name":14,"slug":15,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":4858,"name":4859,"fn":4860,"description":4861,"org":4862,"tags":4863,"stars":27,"repoUrl":28,"updatedAt":4872},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4864,4865,4868,4871],{"name":21,"slug":22,"type":16},{"name":4866,"slug":4867,"type":16},"QA","qa",{"name":4869,"slug":4870,"type":16},"Validation","validation",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:51.300653",{"slug":4874,"name":4875,"fn":4876,"description":4877,"org":4878,"tags":4879,"stars":27,"repoUrl":28,"updatedAt":4886},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4880,4881,4882,4885],{"name":4728,"slug":4729,"type":16},{"name":21,"slug":22,"type":16},{"name":4883,"slug":4884,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571"]