[ { "path": ".dockerignore", "content": "# Ignore node_modules — let Docker install fresh inside the image\nnode_modules\n\n# Ignore environment files (not needed inside build context)\n.env\n.env.*\n\n\n\n# OS-specific\n.DS_Store\n\n# Git stuff\n.git\n.gitignore\n\n\n\n\n# Build artifacts\n.next\ndist\nout\n\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: [jnsahaj]\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n/.pnp\n.pnp.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n# bun lock\nbun.lock\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n.cursor\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n# build artifacts\npublic/r/themes\n" }, { "path": ".husky/pre-commit", "content": "npm run lint\n" }, { "path": ".prettierignore", "content": "# Builds\n.next/\ndist/\nbuild/\nout/\n\n# Dependencies\nnode_modules/\n\n# Coverage and tests\ncoverage/\n.nyc_output/\n\n# Misc\n.git/\n.github/\n.vscode/\n.cursor/\n.husky/\n\n# Package files\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n\n# Generated files\npublic/\nstubs/\ndrizzle/\n\n# Config files that should maintain their format\n*.config.js\n*.config.mjs\n*.config.cjs\n*.config.ts\n\n# Environment files\n.env*\n\n# Markdown files\n*.md " }, { "path": ".prettierrc", "content": "{\n \"semi\": true,\n \"singleQuote\": false,\n \"trailingComma\": \"es5\",\n \"tabWidth\": 2,\n \"printWidth\": 100,\n \"bracketSpacing\": true,\n \"arrowParens\": \"always\",\n \"endOfLine\": \"lf\",\n \"plugins\": [\"prettier-plugin-tailwindcss\"],\n \"pluginSearchDirs\": false\n} " }, { "path": "CONTRIBUTING.md", "content": "# Contributing to tweakcn.com\n\nThanks for your interest in contributing to tweakcn.com! We're excited to have you here.\n\nPlease take a moment to review this document before submitting your first pull request. We also strongly recommend checking open [Issues](https://github.com/jnsahaj/tweakcn/issues) and [Pull Requests](https://github.com/jnsahaj/tweakcn/pulls) to see if someone else is working on something similar.\n\nIf you need any help or want to discuss ideas, feel free to join our community on [Discord](https://discord.com/invite/Phs4u2NM3n).\n\n## About This Project\n\ntweakcn.com is a powerful Visual Theme Editor designed for Tailwind CSS & shadcn/ui components. Websites built with shadcn/ui often share a similar look; tweakcn helps you visually customize these components to make your projects stand out.\n\n## Project Structure\n\nThis repository contains the Next.js application for tweakcn.com. Here's a simplified overview of the project's directory structure:\n\n```\n├── actions/ # Next.js Server Actions\n├── app/\n ├── (auth)/ # Authentication routes\n ├── (legal)/ # Legal pages (privacy policy)\n ├── api/ # Public API endpoints\n ├── dashboard/ # User dashboard (saved themes)\n ├── editor/ # Main theme editor route\n ├── layout.tsx # Root application layout\n └── page.tsx # Landing page route\n├── components/\n ├── editor/ # Theme editor interface components\n ├── examples/ # Demo components for theme previews\n ├── home/ # Landing page components\n └── ui/ # Base shadcn/ui components\n├── config/ # App configuration & default values\n├── db/ # Database schema & logic (Drizzle ORM)\n├── hooks/ # Custom React hooks\n├── lib/ # 3rd-party library integrations & helpers\n├── public/\n └── r/ # Holds JSON files for the theme registry\n├── scripts/ # Utility scripts used during development\n├── store/ # Global state management (Zustand)\n└── utils/ # General utility functions and helpers\n```\n\n## How to Contribute\n\n### Non-Technical\n\nEven if you don't plan to write code, there are many ways to contribute:\n\n- **Create an Issue:** If you find a bug, have an idea for a new feature, or want to suggest an improvement, please [create an issue on GitHub](https://github.com/jnsahaj/tweakcn/issues). This helps us track and prioritize feedback.\n- **Spread the Word:** If you like tweakcn.com, please share it with your friends, colleagues, and on social media. Helping grow the community makes the tool better for everyone.\n- **Use tweakcn.com:** The best feedback comes from real-world usage! As you use the editor, if you encounter any issues or have ideas for improvement, please let us know by creating an issue or reaching out on [Discord](https://discord.com/invite/Phs4u2NM3n).\n\n### Prerequisites\n\n- Node.js 18+\n- npm / yarn / pnpm\n\n### Installation\n\n1. **Fork the Repository:** Start by creating your own copy of the [tweakcn repository](https://github.com/jnsahaj/tweakcn) on GitHub. Click the \"Fork\" button in the top-right corner.\n\n2. **Clone Your Fork:** Clone the repository you just forked to your local machine:\n\n ```bash\n git clone https://github.com/YOUR_USERNAME/tweakcn.git\n cd tweakcn\n ```\n\n Replace `YOUR_USERNAME` with your actual GitHub username.\n\n3. **Install Dependencies:** Install the necessary project dependencies:\n\n ```bash\n npm install\n ```\n\n### Set up the development environment (follow closely)\n\n1. **Configure Environment Variables:** \n\n ```bash\n cp .env.example .env.local # Copy the example environment file\n ```\n - Open the `.env.local` file and replace the placeholder values with your actual credentials obtained from the services.\n\n2. **Apply Database Schema:** Push the database schema defined in `db/schema.ts` to your Neon database using Drizzle Kit:\n\n ```bash\n npx drizzle-kit push\n ```\n\n - _(Optional)_ You can view your database structure using Drizzle Studio by running `npx drizzle-kit studio`.\n\n3. **Create a New Branch:** Before making changes, create a dedicated branch for your feature or bug fix:\n\n ```bash\n git checkout -b your-descriptive-branch-name\n ```\n\n (e.g., `feature/add-community-gallery`, `fix/login-button-style`)\n\n4. **Start the Development Server:**\n\n ```bash\n npm run dev\n ```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\nYou're now ready to start coding!\n\n### Troubleshooting Setup\n\nIf you encounter unexpected issues, especially after pulling new changes or related to database/auth setup, try resetting your local environment:\n\n1. Stop the development server (Ctrl+C).\n\n2. Delete the `node_modules` and `.next` directories:\n\n ```bash\n # On macOS / Linux:\n rm -rf node_modules .next\n\n # On Windows (PowerShell):\n Remove-Item -Recurse -Force node_modules, .next\n ```\n\n3. Reinstall dependencies:\n\n ```bash\n npm install\n ```\n\n4. Re-run the database push command (optional, but good practice if schema might have changed):\n\n ```bash\n npx drizzle-kit push\n ```\n\n5. Restart the development server:\n\n ```bash\n npm run dev\n ```\n\n## Submitting Your Changes (Pull Request Workflow)\n\nOnce you've made your changes and tested them locally, follow these steps to submit them for review:\n\n1. **Stage Your Changes:** Add the files you've modified to the Git staging area.\n\n ```bash\n git add .\n ```\n\n2. **Commit Your Changes:** Commit your staged changes with a descriptive message that follows the **Conventional Commits** specification. This helps automate releases and makes the commit history easier to understand.\n\n ```bash\n git commit -m \"feat(editor): Add contrast checker component\"\n ```\n\n - **Format:** `type(scope): description` (e.g., `fix(auth): Correct GitHub redirect URL`, `docs(readme): Update setup instructions`).\n - **Common Types:** `feat` (new feature), `fix` (bug fix), `docs` (documentation), `style` (code style), `chore` (build process, tooling).\n - Refer to the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) for more details.\n\n3. **Push to Your Fork:** Push your committed changes to the branch on your forked repository on GitHub.\n\n ```bash\n git push origin your-descriptive-branch-name\n ```\n\n Replace `your-descriptive-branch-name` with the actual name of your branch.\n\n4. **Open a Pull Request (PR):**\n\n - Go to the original [tweakcn repository](https://github.com/jnsahaj/tweakcn) on GitHub.\n - You should see a prompt suggesting you create a Pull Request from your recently pushed branch. Click on it. If not, navigate to the \"Pull requests\" tab and click \"New pull request\".\n - Ensure the base repository is `jnsahaj/tweakcn` and the base branch is `main` (or the appropriate target branch).\n - Ensure the head repository is your fork and the compare branch is `your-descriptive-branch-name`.\n - **Write a Clear Description:** Fill out the pull request template (if one exists). Provide a clear title and a detailed description of the changes you've made. Explain _why_ you made the changes and link to any relevant GitHub Issues (e.g., \"Closes #123\").\n\n5. **Review Process:**\n\n - Once submitted, maintainers will review your pull request.\n - Maintainers may provide feedback or request changes directly on the pull request. Please address these comments by pushing further commits to your branch.\n - Once approved, a maintainer will merge your changes into the main project.\n\nThank you for contributing!" }, { "path": "Dockerfile", "content": "FROM node:20-alpine\n\nWORKDIR /app\n\nCOPY package*.json ./\nRUN npm install\n\nCOPY . .\n\nEXPOSE 3000\n\nCMD [\"npm\", \"run\", \"dev\"]\n" }, { "path": "LICENSE", "content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright [yyyy] [name of copyright owner]\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "README.md", "content": "
\n

tweakcn.com

\n
\n\n
\n \n \"Vercel\n \n
\n
\n \n \"Discord\"\n \n \"GitHub\n \n \"X\n \n
\n\n
\n\n**[tweakcn](https://tweakcn.com)** is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI\n\n![tweakcn.com](public/og-image.v050725.png)\n\n## Motivation\n\nWebsites made with shadcn/ui famously look the same. tweakcn is a tool that helps you customize shadcn/ui components visually, to make your components stand-out. The goal is to build a platform where a user can discover endless customization options and then have the ability to put their own twist on it.\n\n## Current Features\n\nYou can find the full feature list here: https://tweakcn.com/#features\n\n## Run Locally\n\n**IMPORTANT: For contributions, please see [CONTRIBUTING.md](CONTRIBUTING.md).**\n\n### Prerequisites\n\n- Node.js 18+\n- npm / yarn / pnpm\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/jnsahaj/tweakcn.git\ncd tweakcn\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Contributors\n\n\n \n\n\nMade with [contrib.rocks](https://contrib.rocks).\n\n### Interested in Contributing?\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n# Star History\n\n

\n \n \n \n \"GitHub\n \n \n

\n\n\n" }, { "path": "actions/account.ts", "content": "\"use server\";\n\nimport { db } from \"@/db\";\nimport { user as userTable, subscription } from \"@/db/schema\";\nimport { eq } from \"drizzle-orm\";\nimport { getCurrentUserId } from \"@/lib/shared\";\nimport { logError } from \"@/lib/shared\";\nimport { actionError, actionSuccess, ErrorCode, type ActionResult } from \"@/types/errors\";\nimport { polar } from \"@/lib/polar\";\n\nexport async function deleteAccount(): Promise> {\n try {\n const userId = await getCurrentUserId();\n\n // Try to delete Polar customer (cancels subscriptions + revokes benefits)\n // Free users won't have a Polar customer, so we catch and ignore errors\n try {\n await polar.customers.deleteExternal({ externalId: userId });\n } catch (_e) {\n // Expected for free users — no Polar customer exists\n }\n\n // Delete subscription records (no CASCADE on this table)\n await db.delete(subscription).where(eq(subscription.userId, userId));\n\n // Delete user — CASCADE handles: sessions, accounts, themes,\n // communityThemes, communityThemeTags, themeLikes, aiUsage,\n // oauthAuthorizationCode, oauthToken\n await db.delete(userTable).where(eq(userTable.id, userId));\n\n return actionSuccess(true);\n } catch (error) {\n logError(error as Error, { action: \"deleteAccount\" });\n return actionError(ErrorCode.UNKNOWN_ERROR, \"Failed to delete account. Please try again.\");\n }\n}\n" }, { "path": "actions/ai-usage.ts", "content": "\"use server\";\n\nimport { db } from \"@/db\";\nimport { aiUsage } from \"@/db/schema\";\nimport { getCurrentUserId } from \"@/lib/shared\";\nimport { ValidationError } from \"@/types/errors\";\nimport cuid from \"cuid\";\nimport { and, count, eq, gte } from \"drizzle-orm\";\nimport { z } from \"zod\";\n\nconst getDaysSinceEpoch = (daysAgo: number = 0) =>\n Math.floor(Date.now() / (24 * 60 * 60 * 1000)) - daysAgo;\n\n// Schema for recording usage events (internal use - still tracks tokens)\nconst recordUsageSchema = z.object({\n promptTokens: z.number().min(0).default(0),\n completionTokens: z.number().min(0).default(0),\n modelId: z.string(),\n});\n\n// Schema for timeframe validation\nconst timeframeSchema = z.union([z.literal(\"1d\"), z.literal(\"7d\"), z.literal(\"30d\")]);\n\n// Types\ntype Timeframe = z.infer;\n\n// Simplified user-facing interface - only shows requests\ninterface UsageStats {\n requests: number;\n timeframe: Timeframe;\n}\n\ninterface ChartDataPoint {\n daysSinceEpoch?: number;\n hoursSinceEpoch?: number;\n date: string;\n totalRequests: number;\n}\n\nexport async function recordAIUsage(input: {\n modelId: string;\n promptTokens?: number;\n completionTokens?: number;\n}) {\n try {\n const userId = await getCurrentUserId();\n\n const validation = recordUsageSchema.safeParse(input);\n if (!validation.success) {\n throw new ValidationError(\"Invalid usage data\", validation.error.format());\n }\n\n const { promptTokens, completionTokens, modelId } = validation.data;\n const daysSinceEpoch = getDaysSinceEpoch(0);\n\n const [insertedUsage] = await db\n .insert(aiUsage)\n .values({\n id: cuid(),\n userId,\n modelId,\n promptTokens: promptTokens.toString(),\n completionTokens: completionTokens.toString(),\n daysSinceEpoch: daysSinceEpoch.toString(),\n createdAt: new Date(),\n })\n .returning();\n\n return insertedUsage;\n } catch (error) {\n console.error(\"Error recording usage:\", error);\n throw error;\n }\n}\n\nexport async function getMyUsageStats(timeframe: Timeframe): Promise {\n try {\n const userId = await getCurrentUserId();\n\n const validation = timeframeSchema.safeParse(timeframe);\n if (!validation.success) {\n throw new ValidationError(\"Invalid timeframe\");\n }\n\n const days = timeframe === \"1d\" ? 1 : timeframe === \"7d\" ? 7 : 30;\n const startDay = getDaysSinceEpoch(days);\n\n // Get user's events in time range\n const events = await db\n .select()\n .from(aiUsage)\n .where(and(eq(aiUsage.userId, userId), gte(aiUsage.daysSinceEpoch, startDay.toString())));\n\n return {\n requests: events.length,\n timeframe,\n };\n } catch (error) {\n console.error(\"Error getting usage stats:\", error);\n throw error;\n }\n}\n\nexport async function getMyAllTimeRequestCount(userId: string): Promise {\n try {\n const result = await db\n .select({ count: count() })\n .from(aiUsage)\n .where(eq(aiUsage.userId, userId));\n\n return result[0]?.count ?? 0;\n } catch (error) {\n console.error(\"Error getting all-time request count:\", error);\n throw error;\n }\n}\n\nexport async function getMyUsageChartData(timeframe: Timeframe): Promise {\n try {\n const userId = await getCurrentUserId();\n\n const validation = timeframeSchema.safeParse(timeframe);\n if (!validation.success) {\n throw new ValidationError(\"Invalid timeframe\");\n }\n\n // For 1d, we want hourly granularity\n if (timeframe === \"1d\") {\n const hours = 24;\n const startTime = Date.now() - hours * 60 * 60 * 1000;\n\n // Get user's events in the last 24 hours\n const events = await db\n .select()\n .from(aiUsage)\n .where(and(eq(aiUsage.userId, userId), gte(aiUsage.createdAt, new Date(startTime))));\n\n // Group by hour\n const chartData: ChartDataPoint[] = [];\n for (let i = hours - 1; i >= 0; i--) {\n const hourStart = Date.now() - i * 60 * 60 * 1000;\n const hourEnd = Date.now() - (i - 1) * 60 * 60 * 1000;\n const hourEvents = events.filter(\n (e) => e.createdAt.getTime() >= hourStart && e.createdAt.getTime() < hourEnd\n );\n\n const totalRequests = hourEvents.length;\n\n chartData.push({\n hoursSinceEpoch: Math.floor(hourStart / (60 * 60 * 1000)),\n date: new Date(hourStart).toISOString(),\n totalRequests,\n });\n }\n\n return chartData;\n }\n\n // Daily logic for 7d and 30d\n const days = timeframe === \"7d\" ? 7 : 30;\n const startDay = getDaysSinceEpoch(days);\n\n // Get user's events in time range\n const events = await db\n .select()\n .from(aiUsage)\n .where(and(eq(aiUsage.userId, userId), gte(aiUsage.daysSinceEpoch, startDay.toString())));\n\n // Group by day\n const chartData: ChartDataPoint[] = [];\n for (let i = days - 1; i >= 0; i--) {\n const daysSince = getDaysSinceEpoch(i);\n const dayEvents = events.filter((e) => parseInt(e.daysSinceEpoch) === daysSince);\n\n const totalRequests = dayEvents.length;\n\n chartData.push({\n daysSinceEpoch: daysSince,\n date: new Date(daysSince * 24 * 60 * 60 * 1000).toISOString().split(\"T\")[0],\n totalRequests,\n });\n }\n\n return chartData;\n } catch (error) {\n console.error(\"Error getting usage chart data:\", error);\n throw error;\n }\n}\n\n// Internal function for detailed usage (including tokens) - not exposed to users\nexport async function getDetailedUsageStats(\n timeframe: Timeframe,\n modelId: string\n): Promise<{\n requests: number;\n promptTokens: number;\n completionTokens: number;\n totalTokens: number;\n timeframe: Timeframe;\n}> {\n try {\n const userId = await getCurrentUserId();\n\n const validation = timeframeSchema.safeParse(timeframe);\n if (!validation.success) {\n throw new ValidationError(\"Invalid timeframe\");\n }\n\n const days = timeframe === \"1d\" ? 1 : timeframe === \"7d\" ? 7 : 30;\n const startDay = getDaysSinceEpoch(days);\n\n // Get user's events for the model\n const events = await db\n .select()\n .from(aiUsage)\n .where(\n and(\n eq(aiUsage.userId, userId),\n eq(aiUsage.modelId, modelId),\n gte(aiUsage.daysSinceEpoch, startDay.toString())\n )\n );\n\n const requests = events.length;\n const promptTokens = events.reduce((sum, e) => sum + parseInt(e.promptTokens), 0);\n const completionTokens = events.reduce((sum, e) => sum + parseInt(e.completionTokens), 0);\n const totalTokens = promptTokens + completionTokens;\n\n return {\n requests,\n promptTokens,\n completionTokens,\n totalTokens,\n timeframe,\n };\n } catch (error) {\n console.error(\"Error getting detailed usage stats:\", error);\n throw error;\n }\n}\n" }, { "path": "actions/checkout.ts", "content": "\"use server\";\n\nimport { polar } from \"@/lib/polar\";\nimport { getCurrentUser, logError } from \"@/lib/shared\";\nimport { getOrCreateCustomer } from \"./customer\";\n\nexport const createCheckout = async () => {\n try {\n const user = await getCurrentUser();\n const customer = await getOrCreateCustomer(user);\n const checkout = await polar.checkouts.create({\n products: [process.env.NEXT_PUBLIC_TWEAKCN_PRO_PRODUCT_ID!],\n customerId: customer?.id,\n successUrl: `${process.env.BASE_URL}/success?checkout_id={CHECKOUT_ID}`,\n });\n\n return { url: checkout.url };\n } catch (error) {\n logError(error as Error, { action: \"createCheckout\" });\n return { error: \"Failed to create checkout\" };\n }\n};\n" }, { "path": "actions/community-themes.ts", "content": "\"use server\";\n\nimport { z } from \"zod\";\nimport { db } from \"@/db\";\nimport {\n communityTheme,\n communityThemeTag,\n themeLike,\n theme as themeTable,\n user as userTable,\n} from \"@/db/schema\";\nimport { eq, and, desc, asc, sql, count, inArray } from \"drizzle-orm\";\nimport cuid from \"cuid\";\nimport { auth } from \"@/lib/auth\";\nimport { headers } from \"next/headers\";\nimport {\n UnauthorizedError,\n ValidationError,\n ThemeNotFoundError,\n ErrorCode,\n actionError,\n actionSuccess,\n type ActionResult,\n} from \"@/types/errors\";\nimport {\n COMMUNITY_THEMES_PAGE_SIZE,\n COMMUNITY_THEME_TAGS,\n MAX_TAGS_PER_THEME,\n} from \"@/lib/constants\";\nimport type {\n CommunityTheme,\n CommunitySortOption,\n CommunityFilterOption,\n CommunityTimeRange,\n CommunityThemesResponse,\n} from \"@/types/community\";\nimport { unstable_cache, revalidateTag } from \"next/cache\";\nimport { Ratelimit } from \"@upstash/ratelimit\";\nimport { kv } from \"@vercel/kv\";\n\nconst ratelimit = new Ratelimit({\n redis: kv,\n limiter: Ratelimit.fixedWindow(5, \"3600s\"),\n});\n\nasync function getOptionalUserId(): Promise {\n try {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n return session?.user?.id ?? null;\n } catch {\n return null;\n }\n}\n\nasync function getCurrentUserId(): Promise {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session?.user?.id) {\n throw new UnauthorizedError();\n }\n\n return session.user.id;\n}\n\nfunction logError(error: Error, context: Record) {\n if (error.name === \"UnauthorizedError\" || error.name === \"ValidationError\") {\n console.warn(\"Expected error:\", { error: error.message, context });\n } else {\n console.error(\"Unexpected error:\", {\n error: error.message,\n stack: error.stack,\n context,\n });\n }\n}\n\nconst getCommunityThemesSchema = z.object({\n sort: z.enum([\"popular\", \"newest\", \"oldest\"]).default(\"popular\"),\n cursor: z.union([z.string(), z.number()]).optional(),\n limit: z.number().min(1).max(50).default(COMMUNITY_THEMES_PAGE_SIZE),\n filter: z.enum([\"all\", \"mine\", \"liked\"]).default(\"all\"),\n tags: z.array(z.string()).default([]),\n timeRange: z.enum([\"weekly\", \"monthly\", \"all\"]).default(\"all\"),\n});\n\n// Core query logic for community themes (no headers() access — cacheable)\nasync function fetchCommunityThemesCore(\n sort: string,\n cursor: string | number | null,\n limit: number,\n filter: string,\n tags: string[],\n userId: string | null,\n timeRange: string = \"all\"\n): Promise {\n const fetchLimit = limit + 1;\n const conditions = [];\n\n if (filter === \"mine\") {\n if (!userId) throw new UnauthorizedError();\n conditions.push(eq(communityTheme.userId, userId));\n }\n\n if (filter === \"liked\") {\n if (!userId) throw new UnauthorizedError();\n conditions.push(\n sql`exists(select 1 from theme_like where theme_like.theme_id = ${communityTheme.id} and theme_like.user_id = ${userId})`\n );\n }\n\n if (tags.length > 0) {\n conditions.push(\n sql`exists(select 1 from community_theme_tag where community_theme_tag.community_theme_id = ${communityTheme.id} and community_theme_tag.tag in (${sql.join(\n tags.map((t) => sql`${t}`),\n sql`, `\n )}))`\n );\n }\n\n // For weekly/monthly popular sort, filter to themes published within the time range\n if (sort === \"popular\" && timeRange !== \"all\") {\n const intervalSql =\n timeRange === \"weekly\"\n ? sql`interval '7 days'`\n : sql`interval '30 days'`;\n conditions.push(\n sql`${communityTheme.publishedAt} > now() - ${intervalSql}`\n );\n }\n\n const selectFields = {\n id: communityTheme.id,\n themeId: communityTheme.themeId,\n publishedAt: communityTheme.publishedAt,\n themeName: themeTable.name,\n themeStyles: themeTable.styles,\n authorId: userTable.id,\n authorName: userTable.name,\n authorImage: userTable.image,\n likeCount: communityTheme.likeCount,\n ...(userId\n ? {\n isLikedByMe: sql`exists(\n select 1 from theme_like\n where theme_like.theme_id = ${communityTheme.id}\n and theme_like.user_id = ${userId}\n )`.as(\"is_liked_by_me\"),\n }\n : {}),\n };\n\n const baseQuery = db\n .select(selectFields)\n .from(communityTheme)\n .innerJoin(themeTable, eq(communityTheme.themeId, themeTable.id))\n .innerJoin(userTable, eq(communityTheme.userId, userTable.id));\n\n let results;\n\n if (sort === \"popular\") {\n const offset = typeof cursor === \"number\" ? cursor : 0;\n results = await baseQuery\n .where(conditions.length > 0 ? and(...conditions) : undefined)\n .orderBy(desc(communityTheme.likeCount), desc(communityTheme.publishedAt))\n .limit(fetchLimit)\n .offset(offset);\n } else if (sort === \"newest\") {\n if (cursor && typeof cursor === \"string\") {\n conditions.push(sql`${communityTheme.publishedAt} < ${cursor}`);\n }\n results = await baseQuery\n .where(conditions.length > 0 ? and(...conditions) : undefined)\n .orderBy(desc(communityTheme.publishedAt))\n .limit(fetchLimit);\n } else {\n if (cursor && typeof cursor === \"string\") {\n conditions.push(sql`${communityTheme.publishedAt} > ${cursor}`);\n }\n results = await baseQuery\n .where(conditions.length > 0 ? and(...conditions) : undefined)\n .orderBy(asc(communityTheme.publishedAt))\n .limit(fetchLimit);\n }\n\n const hasMore = results.length > limit;\n const themes = results.slice(0, limit);\n\n let nextCursor: string | number | null = null;\n if (hasMore) {\n if (sort === \"popular\") {\n nextCursor = (typeof cursor === \"number\" ? cursor : 0) + limit;\n } else {\n const lastTheme = themes[themes.length - 1];\n nextCursor = lastTheme.publishedAt.toISOString();\n }\n }\n\n const communityThemeIds = themes.map((t) => t.id);\n const tagsRows =\n communityThemeIds.length > 0\n ? await db\n .select({\n communityThemeId: communityThemeTag.communityThemeId,\n tag: communityThemeTag.tag,\n })\n .from(communityThemeTag)\n .where(\n inArray(communityThemeTag.communityThemeId, communityThemeIds)\n )\n : [];\n\n const tagsMap = new Map();\n for (const row of tagsRows) {\n const existing = tagsMap.get(row.communityThemeId) ?? [];\n existing.push(row.tag);\n tagsMap.set(row.communityThemeId, existing);\n }\n\n const mappedThemes: CommunityTheme[] = themes.map((row) => ({\n id: row.id,\n themeId: row.themeId,\n name: row.themeName,\n styles: row.themeStyles,\n author: {\n id: row.authorId,\n name: row.authorName,\n image: row.authorImage,\n },\n likeCount: Number(row.likeCount),\n isLikedByMe: \"isLikedByMe\" in row ? Boolean(row.isLikedByMe) : false,\n publishedAt: row.publishedAt.toISOString(),\n tags: tagsMap.get(row.id) ?? [],\n }));\n\n return { themes: mappedThemes, nextCursor };\n}\n\nconst getCachedCommunityThemes = unstable_cache(\n fetchCommunityThemesCore,\n [\"community-themes\"],\n { revalidate: 60, tags: [\"community-themes\"] }\n);\n\nexport async function getCommunityThemes(\n sort: CommunitySortOption = \"popular\",\n cursor?: string | number,\n limit: number = COMMUNITY_THEMES_PAGE_SIZE,\n filter: CommunityFilterOption = \"all\",\n tags: string[] = [],\n timeRange: CommunityTimeRange = \"all\"\n): Promise {\n try {\n const validation = getCommunityThemesSchema.safeParse({\n sort,\n cursor,\n limit,\n filter,\n tags,\n timeRange,\n });\n if (!validation.success) {\n throw new ValidationError(\"Invalid input\", validation.error.format());\n }\n\n const userId = await getOptionalUserId();\n return getCachedCommunityThemes(\n sort,\n cursor ?? null,\n limit,\n filter,\n tags,\n userId,\n timeRange\n );\n } catch (error) {\n logError(error as Error, { action: \"getCommunityThemes\", sort, cursor });\n throw error;\n }\n}\n\nexport async function publishTheme(\n themeId: string,\n tags: string[] = []\n): Promise> {\n try {\n const userId = await getCurrentUserId();\n\n if (!themeId) {\n throw new ValidationError(\"Theme ID required\");\n }\n\n // Validate tags\n if (tags.length > MAX_TAGS_PER_THEME) {\n throw new ValidationError(\n `You can select at most ${MAX_TAGS_PER_THEME} tags`\n );\n }\n const validTags = tags.filter((t): t is string =>\n (COMMUNITY_THEME_TAGS as readonly string[]).includes(t)\n );\n\n // Verify theme ownership\n const [existingTheme] = await db\n .select()\n .from(themeTable)\n .where(and(eq(themeTable.id, themeId), eq(themeTable.userId, userId)))\n .limit(1);\n\n if (!existingTheme) {\n throw new ThemeNotFoundError(\"Theme not found or not owned by user\");\n }\n\n // Check not already published\n const [existing] = await db\n .select()\n .from(communityTheme)\n .where(eq(communityTheme.themeId, themeId))\n .limit(1);\n\n if (existing) {\n return actionError(\n ErrorCode.ALREADY_PUBLISHED,\n \"This theme is already published to the community.\"\n );\n }\n\n // Rate limit\n if (process.env.NODE_ENV !== \"development\") {\n const { success } = await ratelimit.limit(`publish:${userId}`);\n if (!success) {\n return actionError(\n ErrorCode.UNKNOWN_ERROR,\n \"You're publishing too fast. Please try again later.\"\n );\n }\n }\n\n const id = cuid();\n await db.insert(communityTheme).values({\n id,\n themeId,\n userId,\n publishedAt: new Date(),\n });\n\n if (validTags.length > 0) {\n try {\n await db.insert(communityThemeTag).values(\n validTags.map((tag) => ({\n communityThemeId: id,\n tag,\n }))\n );\n } catch (tagError) {\n // Roll back the community theme row if tags insert fails\n await db.delete(communityTheme).where(eq(communityTheme.id, id));\n throw tagError;\n }\n }\n\n revalidateTag(\"community-themes\");\n revalidateTag(\"community-tag-counts\");\n\n return actionSuccess({ id });\n } catch (error) {\n logError(error as Error, { action: \"publishTheme\", themeId });\n throw error;\n }\n}\n\nexport async function unpublishTheme(\n themeId: string\n): Promise> {\n try {\n const userId = await getCurrentUserId();\n\n if (!themeId) {\n throw new ValidationError(\"Theme ID required\");\n }\n\n const [deleted] = await db\n .delete(communityTheme)\n .where(\n and(\n eq(communityTheme.themeId, themeId),\n eq(communityTheme.userId, userId)\n )\n )\n .returning({ id: communityTheme.id });\n\n if (!deleted) {\n throw new ThemeNotFoundError(\n \"Published theme not found or not owned by user\"\n );\n }\n\n revalidateTag(\"community-themes\");\n revalidateTag(\"community-tag-counts\");\n\n return actionSuccess({ success: true });\n } catch (error) {\n logError(error as Error, { action: \"unpublishTheme\", themeId });\n throw error;\n }\n}\n\nexport async function toggleLikeTheme(\n communityThemeId: string\n): Promise> {\n try {\n const userId = await getCurrentUserId();\n\n if (!communityThemeId) {\n throw new ValidationError(\"Community theme ID required\");\n }\n\n // Check if already liked\n const [existingLike] = await db\n .select()\n .from(themeLike)\n .where(\n and(\n eq(themeLike.userId, userId),\n eq(themeLike.themeId, communityThemeId)\n )\n )\n .limit(1);\n\n if (existingLike) {\n // Unlike: delete + decrement\n await db\n .delete(themeLike)\n .where(\n and(\n eq(themeLike.userId, userId),\n eq(themeLike.themeId, communityThemeId)\n )\n );\n const [updated] = await db\n .update(communityTheme)\n .set({\n likeCount: sql`GREATEST(${communityTheme.likeCount} - 1, 0)`,\n })\n .where(eq(communityTheme.id, communityThemeId))\n .returning({ likeCount: communityTheme.likeCount });\n\n revalidateTag(\"community-themes\");\n\n return actionSuccess({\n liked: false,\n likeCount: updated.likeCount,\n });\n } else {\n // Like: insert + increment\n await db.insert(themeLike).values({\n userId,\n themeId: communityThemeId,\n createdAt: new Date(),\n });\n const [updated] = await db\n .update(communityTheme)\n .set({ likeCount: sql`${communityTheme.likeCount} + 1` })\n .where(eq(communityTheme.id, communityThemeId))\n .returning({ likeCount: communityTheme.likeCount });\n\n revalidateTag(\"community-themes\");\n\n return actionSuccess({\n liked: true,\n likeCount: updated.likeCount,\n });\n }\n } catch (error) {\n logError(error as Error, {\n action: \"toggleLikeTheme\",\n communityThemeId,\n });\n throw error;\n }\n}\n\nasync function fetchCommunityDataForThemeCore(\n themeId: string,\n userId: string | null\n): Promise<{\n communityThemeId: string;\n author: { id: string; name: string; image: string | null };\n likeCount: number;\n isLikedByMe: boolean;\n publishedAt: string;\n tags: string[];\n} | null> {\n const [result] = await db\n .select({\n id: communityTheme.id,\n publishedAt: communityTheme.publishedAt,\n authorId: userTable.id,\n authorName: userTable.name,\n authorImage: userTable.image,\n likeCount: communityTheme.likeCount,\n ...(userId\n ? {\n isLikedByMe: sql`exists(\n select 1 from theme_like\n where theme_like.theme_id = ${communityTheme.id}\n and theme_like.user_id = ${userId}\n )`.as(\"is_liked_by_me\"),\n }\n : {}),\n })\n .from(communityTheme)\n .innerJoin(userTable, eq(communityTheme.userId, userTable.id))\n .where(eq(communityTheme.themeId, themeId))\n .limit(1);\n\n if (!result) return null;\n\n const tagRows = await db\n .select({ tag: communityThemeTag.tag })\n .from(communityThemeTag)\n .where(eq(communityThemeTag.communityThemeId, result.id));\n\n return {\n communityThemeId: result.id,\n author: {\n id: result.authorId,\n name: result.authorName,\n image: result.authorImage,\n },\n likeCount: Number(result.likeCount),\n isLikedByMe:\n \"isLikedByMe\" in result ? Boolean(result.isLikedByMe) : false,\n publishedAt: result.publishedAt.toISOString(),\n tags: tagRows.map((r) => r.tag),\n };\n}\n\nconst getCachedCommunityDataForTheme = unstable_cache(\n fetchCommunityDataForThemeCore,\n [\"community-theme-data\"],\n { revalidate: 60, tags: [\"community-themes\"] }\n);\n\nexport async function getCommunityDataForTheme(\n themeId: string\n): Promise<{\n communityThemeId: string;\n author: { id: string; name: string; image: string | null };\n likeCount: number;\n isLikedByMe: boolean;\n publishedAt: string;\n tags: string[];\n} | null> {\n try {\n const userId = await getOptionalUserId();\n return getCachedCommunityDataForTheme(themeId, userId);\n } catch (error) {\n logError(error as Error, {\n action: \"getCommunityDataForTheme\",\n themeId,\n });\n return null;\n }\n}\n\nexport async function getMyPublishedThemeIds(): Promise {\n try {\n const userId = await getCurrentUserId();\n\n const published = await db\n .select({ themeId: communityTheme.themeId })\n .from(communityTheme)\n .where(eq(communityTheme.userId, userId));\n\n return published.map((p) => p.themeId);\n } catch (error) {\n logError(error as Error, { action: \"getMyPublishedThemeIds\" });\n throw error;\n }\n}\n\nexport async function updateCommunityThemeTags(\n themeId: string,\n tags: string[]\n): Promise> {\n try {\n const userId = await getCurrentUserId();\n\n if (!themeId) {\n throw new ValidationError(\"Theme ID required\");\n }\n\n if (tags.length > MAX_TAGS_PER_THEME) {\n throw new ValidationError(\n `You can select at most ${MAX_TAGS_PER_THEME} tags`\n );\n }\n\n const validTags = tags.filter((t): t is string =>\n (COMMUNITY_THEME_TAGS as readonly string[]).includes(t)\n );\n\n // Verify ownership via the community_theme row\n const [ct] = await db\n .select({ id: communityTheme.id })\n .from(communityTheme)\n .where(\n and(\n eq(communityTheme.themeId, themeId),\n eq(communityTheme.userId, userId)\n )\n )\n .limit(1);\n\n if (!ct) {\n throw new ThemeNotFoundError(\n \"Published theme not found or not owned by user\"\n );\n }\n\n // Delete existing tags and insert new ones\n await db\n .delete(communityThemeTag)\n .where(eq(communityThemeTag.communityThemeId, ct.id));\n\n if (validTags.length > 0) {\n await db.insert(communityThemeTag).values(\n validTags.map((tag) => ({\n communityThemeId: ct.id,\n tag,\n }))\n );\n }\n\n revalidateTag(\"community-themes\");\n revalidateTag(\"community-tag-counts\");\n\n return actionSuccess({ tags: validTags });\n } catch (error) {\n logError(error as Error, {\n action: \"updateCommunityThemeTags\",\n themeId,\n });\n throw error;\n }\n}\n\nconst getCachedTagCounts = unstable_cache(\n async () => {\n const rows = await db\n .select({\n tag: communityThemeTag.tag,\n count: count().as(\"tag_count\"),\n })\n .from(communityThemeTag)\n .groupBy(communityThemeTag.tag)\n .orderBy(sql`tag_count desc`);\n\n return rows.map((r) => ({ tag: r.tag, count: Number(r.count) }));\n },\n [\"community-tag-counts\"],\n { revalidate: 300, tags: [\"community-tag-counts\"] }\n);\n\nexport async function getCommunityTagCounts(): Promise<\n { tag: string; count: number }[]\n> {\n try {\n return getCachedTagCounts();\n } catch (error) {\n logError(error as Error, { action: \"getCommunityTagCounts\" });\n return [];\n }\n}\n" }, { "path": "actions/customer.ts", "content": "import \"server-only\";\n\nimport { polar } from \"@/lib/polar\";\nimport { logError } from \"@/lib/shared\";\nimport { Customer } from \"@polar-sh/sdk/models/components/customer.js\";\nimport { User } from \"better-auth\";\n\nexport const getOrCreateCustomer = async (user: User) => {\n let customer: Customer | null = null;\n\n try {\n customer = await polar.customers.getExternal({ externalId: user.id });\n } catch (_e) {\n customer = null;\n }\n\n if (customer) return customer;\n\n try {\n const newCustomer = await polar.customers.create({\n email: user.email,\n externalId: user.id,\n name: user.name,\n });\n\n return newCustomer;\n } catch (err) {\n logError(err as Error, { action: \"createCustomer\", user });\n }\n\n return null;\n};\n" }, { "path": "actions/themes.ts", "content": "\"use server\";\n\nimport { z } from \"zod\";\nimport { db } from \"@/db\";\nimport { theme as themeTable, communityTheme } from \"@/db/schema\";\nimport { eq, and, sql } from \"drizzle-orm\";\nimport cuid from \"cuid\";\nimport { auth } from \"@/lib/auth\";\nimport { headers } from \"next/headers\";\nimport { themeStylesSchema, type ThemeStyles } from \"@/types/theme\";\nimport { cache } from \"react\";\nimport {\n UnauthorizedError,\n ValidationError,\n ThemeNotFoundError,\n ErrorCode,\n actionError,\n actionSuccess,\n type ActionResult,\n} from \"@/types/errors\";\nimport { MAX_FREE_THEMES } from \"@/lib/constants\";\nimport { getMyActiveSubscription } from \"@/lib/subscription\";\n\n// Helper to get user ID with better error handling\nasync function getCurrentUserId(): Promise {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session?.user?.id) {\n throw new UnauthorizedError();\n }\n\n return session.user.id;\n}\n\n// Log errors for observability\nfunction logError(error: Error, context: Record) {\n console.error(\"Theme action error:\", error, context);\n\n // TODO: Add server-side error reporting to PostHog or your preferred service\n // For production, you'd want to send critical errors to an external service\n if (error.name === \"UnauthorizedError\" || error.name === \"ValidationError\") {\n // These are expected errors, log but don't report\n console.warn(\"Expected error:\", { error: error.message, context });\n } else {\n // Unexpected errors should be reported\n console.error(\"Unexpected error:\", { error: error.message, stack: error.stack, context });\n }\n}\n\nconst createThemeSchema = z.object({\n name: z.string().min(1, \"Theme name cannot be empty\").max(50, \"Theme name too long\"),\n styles: themeStylesSchema,\n});\n\nconst updateThemeSchema = z.object({\n id: z.string().min(1, \"Theme ID required\"),\n name: z.string().min(1, \"Theme name cannot be empty\").max(50, \"Theme name too long\").optional(),\n styles: themeStylesSchema.optional(),\n});\n\n// Layer 1: Clean server actions with proper error handling\nexport async function getThemes() {\n try {\n const userId = await getCurrentUserId();\n const userThemes = await db\n .select({\n id: themeTable.id,\n userId: themeTable.userId,\n name: themeTable.name,\n styles: themeTable.styles,\n createdAt: themeTable.createdAt,\n updatedAt: themeTable.updatedAt,\n isPublished: sql`${communityTheme.id} is not null`.as(\n \"is_published\"\n ),\n })\n .from(themeTable)\n .leftJoin(communityTheme, eq(themeTable.id, communityTheme.themeId))\n .where(eq(themeTable.userId, userId));\n return userThemes;\n } catch (error) {\n logError(error as Error, { action: \"getThemes\" });\n throw error;\n }\n}\n\nexport const getTheme = cache(async (themeId: string) => {\n try {\n if (!themeId) {\n throw new ValidationError(\"Theme ID required\");\n }\n\n const [theme] = await db.select().from(themeTable).where(eq(themeTable.id, themeId)).limit(1);\n\n if (!theme) {\n throw new ThemeNotFoundError();\n }\n\n return theme;\n } catch (error) {\n logError(error as Error, { action: \"getTheme\", themeId });\n throw error;\n }\n});\n\nexport async function createTheme(formData: { name: string; styles: ThemeStyles }) {\n try {\n const userId = await getCurrentUserId();\n\n const validation = createThemeSchema.safeParse(formData);\n if (!validation.success) {\n throw new ValidationError(\"Invalid input\", validation.error.format());\n }\n\n // Check theme limit\n const userThemes = await db.select().from(themeTable).where(eq(themeTable.userId, userId));\n\n if (userThemes.length >= MAX_FREE_THEMES) {\n const activeSubscription = await getMyActiveSubscription(userId);\n const isSubscribed =\n !!activeSubscription &&\n activeSubscription?.productId === process.env.NEXT_PUBLIC_TWEAKCN_PRO_PRODUCT_ID;\n\n if (!isSubscribed) {\n return actionError(\n ErrorCode.THEME_LIMIT_REACHED,\n `You have reached the limit of ${MAX_FREE_THEMES} themes.`\n );\n }\n }\n\n const { name, styles } = validation.data;\n const newThemeId = cuid();\n const now = new Date();\n\n const [insertedTheme] = await db\n .insert(themeTable)\n .values({\n id: newThemeId,\n userId: userId,\n name: name,\n styles: styles,\n createdAt: now,\n updatedAt: now,\n })\n .returning();\n\n return actionSuccess(insertedTheme);\n } catch (error) {\n logError(error as Error, { action: \"createTheme\", formData: { name: formData.name } });\n throw error;\n }\n}\n\nexport async function updateTheme(formData: { id: string; name?: string; styles?: ThemeStyles }) {\n try {\n const userId = await getCurrentUserId();\n\n const validation = updateThemeSchema.safeParse(formData);\n if (!validation.success) {\n throw new ValidationError(\"Invalid input\", validation.error.format());\n }\n\n const { id: themeId, name, styles } = validation.data;\n\n if (!name && !styles) {\n throw new ValidationError(\"No update data provided\");\n }\n\n const updateData: Partial = {\n updatedAt: new Date(),\n };\n if (name) updateData.name = name;\n if (styles) updateData.styles = styles;\n\n const [updatedTheme] = await db\n .update(themeTable)\n .set(updateData)\n .where(and(eq(themeTable.id, themeId), eq(themeTable.userId, userId)))\n .returning();\n\n if (!updatedTheme) {\n throw new ThemeNotFoundError(\"Theme not found or not owned by user\");\n }\n\n return updatedTheme;\n } catch (error) {\n logError(error as Error, { action: \"updateTheme\", themeId: formData.id });\n throw error;\n }\n}\n\nexport async function deleteTheme(themeId: string) {\n try {\n const userId = await getCurrentUserId();\n\n if (!themeId) {\n throw new ValidationError(\"Theme ID required\");\n }\n\n const [deletedTheme] = await db\n .delete(themeTable)\n .where(and(eq(themeTable.id, themeId), eq(themeTable.userId, userId)))\n .returning({ id: themeTable.id, name: themeTable.name });\n\n if (!deletedTheme) {\n throw new ThemeNotFoundError(\"Theme not found or not owned by user\");\n }\n\n return deletedTheme;\n } catch (error) {\n logError(error as Error, { action: \"deleteTheme\", themeId });\n throw error;\n }\n}\n" }, { "path": "app/(auth)/components/auth-dialog.tsx", "content": "\"use client\";\n\nimport Github from \"@/assets/github.svg\";\nimport Google from \"@/assets/google.svg\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\nimport { PostLoginActionType } from \"@/hooks/use-post-login-action\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { Loader2 } from \"lucide-react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\n\ninterface AuthDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n initialMode?: \"signin\" | \"signup\";\n trigger?: React.ReactNode; // Optional trigger element\n postLoginActionType?: PostLoginActionType | null;\n}\n\n// Get contextual copy based on the post-login action\nfunction getContextualCopy(actionType?: PostLoginActionType | null) {\n switch (actionType) {\n case \"SAVE_THEME\":\n return {\n title: \"Sign in to Save\",\n description: \"Sign in to save your theme and access it from anywhere\",\n };\n case \"SAVE_THEME_FOR_SHARE\":\n return {\n title: \"Sign in to Share\",\n description: \"Sign in to save and share your theme with others\",\n };\n case \"SAVE_THEME_FOR_V0\":\n return {\n title: \"Sign in to open in v0\",\n description: \"Sign in to save your theme and open it in v0\",\n };\n case \"AI_GENERATE_FROM_PAGE\":\n case \"AI_GENERATE_FROM_CHAT\":\n case \"AI_GENERATE_FROM_CHAT_SUGGESTION\":\n case \"AI_GENERATE_EDIT\":\n case \"AI_GENERATE_RETRY\":\n return {\n title: \"Sign in for AI\",\n description: \"Sign in to use AI-powered theme generation\",\n };\n case \"CHECKOUT\":\n return {\n title: \"Sign in to continue\",\n description: \"Sign in to complete your purchase\",\n };\n default:\n return null;\n }\n}\n\nexport function AuthDialog({\n open,\n onOpenChange,\n initialMode = \"signin\",\n trigger,\n postLoginActionType,\n}: AuthDialogProps) {\n const pathname = usePathname();\n const searchParams = useSearchParams();\n const [isSignIn, setIsSignIn] = useState(initialMode === \"signin\");\n const [isGoogleLoading, setIsGoogleLoading] = useState(false);\n const [isGithubLoading, setIsGithubLoading] = useState(false);\n\n const contextualCopy = getContextualCopy(postLoginActionType);\n\n const getCallbackUrl = () => {\n const baseUrl = pathname || \"/editor/theme\";\n const queryString = searchParams.toString();\n return queryString ? `${baseUrl}?${queryString}` : baseUrl;\n };\n\n useEffect(() => {\n if (open) {\n setIsSignIn(initialMode === \"signin\");\n }\n }, [open, initialMode]);\n\n const handleGoogleSignIn = async () => {\n setIsGoogleLoading(true);\n try {\n await authClient.signIn.social({\n provider: \"google\",\n callbackURL: getCallbackUrl(),\n });\n } catch (error) {\n console.error(\"Google Sign In Error:\", error);\n // Handle error appropriately (e.g., show a toast notification)\n }\n };\n\n const handleGithubSignIn = async () => {\n setIsGithubLoading(true);\n try {\n await authClient.signIn.social({\n provider: \"github\",\n callbackURL: getCallbackUrl(),\n });\n } catch (error) {\n console.error(\"GitHub Sign In Error:\", error);\n // Handle error appropriately\n }\n };\n\n const toggleMode = () => {\n setIsSignIn(!isSignIn);\n };\n\n return (\n \n {trigger && {trigger}}\n \n
\n \n \n {contextualCopy?.title ?? (isSignIn ? \"Welcome back\" : \"Create account\")}\n \n

\n {contextualCopy?.description ??\n (isSignIn\n ? \"Sign in to your account to continue\"\n : \"Sign up to get started with tweakcn\")}\n

\n \n\n
\n
\n \n \n Continue with Google\n {isGoogleLoading && }\n \n\n \n \n Continue with GitHub\n {isGithubLoading && }\n \n
\n\n
\n
\n
\n \n
\n
\n \n {isSignIn ? \"New to tweakcn?\" : \"Already have an account?\"}\n \n
\n
\n\n
\n \n {isSignIn ? \"Create an account\" : \"Sign in to your account\"}\n \n
\n
\n
\n
\n \n \n );\n}\n" }, { "path": "app/(legal)/layout.tsx", "content": "import React from \"react\";\nimport { Header } from \"@/components/header\";\nimport { Footer } from \"@/components/footer\";\n\ninterface LegalLayoutProps {\n children: React.ReactNode;\n}\n\nexport default function LegalLayout({ children }: LegalLayoutProps) {\n return (\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/(legal)/privacy-policy/page.tsx", "content": "import { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n title: \"Privacy Policy | tweakcn\",\n description: \"Privacy Policy for tweakcn.\",\n};\n\nexport default function PrivacyPolicyPage() {\n return (\n
\n

Privacy Policy

\n

Last Updated: 24 Apr 2025

\n\n
\n

1. Introduction

\n

\n We value your privacy and are committed to safeguarding your personal data. This privacy\n policy explains how we collect, use, and protect your information when you use our\n website, as well as your privacy rights and how they are protected by law.\n

\n
\n\n
\n

2. Data Collection

\n

\n When you use our website, we collect and process the following types of data:\n

\n
    \n
  • \n Web Analytics: Anonymous user data is collecting using PostHog.\n
    • \n
  • \n Authentication Data: When you sign up, we collect necessary information\n such as your email address.\n
    • \n
\n
\n\n
\n

3. Sharing and Transferring Your Data

\n

\n We do not sell, lease, or trade your personal information. However, we may share your data\n with trusted third parties like to process payments or provide other services on our\n behalf. We ensure that all third-party providers we work with adhere to data protection\n standards, in compliance with relevant laws such as the Information Technology Act 2000\n and Digital Personal Data Protection Act 2023 under Indian law or any other applicable\n laws.\n

\n
\n\n
\n

4. Data Security

\n

\n We have implemented suitable technical and organizational measures as per the level of\n risk to protect your personal data from unauthorized access, loss, or misuse.\n

\n
\n\n
\n

5. Data Protection

\n

\n You have the following rights concerning your personal data:\n

\n
    \n
  • \n Access: You have the right to request a copy of the personal data we\n hold about you.\n
    • \n
  • \n Correction: If any of your data is incorrect or incomplete, you can\n request to have it updated.\n
    • \n
  • \n Erasure: You can request that we delete your personal data, subject to\n applicable legal exceptions.\n
    • \n
  • \n Objection: You can object to the processing of your personal data for\n certain purposes.\n
    • \n
  • \n Restriction: You can ask us to restrict the use of your data under\n certain conditions.\n
    • \n
  • \n Data Portability: You have the right to transfer your personal data to\n another service provider, if applicable.\n
    • \n
  • \n Withdrawal of Consent: You can withdraw your consent to process your\n personal data at any time.\n
    • \n
\n
\n\n
\n

6. Cookies

\n

\n Our website uses essential cookies necessary for user authentication and session\n management. These cookies help maintain your login status and ensure secure access to your\n account. We do not use cookies for tracking or advertising purposes.\n

\n
\n\n
\n

7. Modifications to This Privacy Policy

\n

\n We may update this privacy policy occasionally. Any changes will be posted here, and the\n effective date will be updated at this page. It shall be assumed that you are aware of any\n changes and accept the same.\n

\n
\n\n
\n

8. Contact Us

\n

\n If you have any questions or concerns about this privacy policy, please reach out at{\" \"}\n \n sahaj@tweakcn.com\n \n

\n
\n\n

\n By continuing to use this website, you confirm that you have read and understood this\n Privacy Policy.\n

\n
\n );\n}\n" }, { "path": "app/ai/components/ai-announcement.tsx", "content": "\"use client\";\n\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { ArrowRight } from \"lucide-react\";\nimport Link from \"next/link\";\n\nexport function AIAnnouncement() {\n const { subscriptionStatus, isPending } = useSubscription();\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n\n if (isPending || isPro) {\n return null;\n }\n\n return (\n
\n \n \n Upgrade to Pro for unlimited requests\n \n\n \n \n
\n );\n}\n" }, { "path": "app/ai/components/ai-chat-form.tsx", "content": "\"use client\";\n\nimport { AIChatFormBody } from \"@/components/editor/ai/ai-chat-form-body\";\nimport { AlertBanner } from \"@/components/editor/ai/alert-banner\";\nimport { EnhancePromptButton } from \"@/components/editor/ai/enhance-prompt-button\";\nimport { ImageUploader } from \"@/components/editor/ai/image-uploader\";\nimport ThemePresetSelect from \"@/components/editor/theme-preset-select\";\nimport { Button } from \"@/components/ui/button\";\nimport { useAIChatForm } from \"@/hooks/use-ai-chat-form\";\nimport { useAIEnhancePrompt } from \"@/hooks/use-ai-enhance-prompt\";\nimport { useGuards } from \"@/hooks/use-guards\";\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { MAX_IMAGE_FILES } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { ArrowUp, Loader, StopCircle } from \"lucide-react\";\n\nexport function AIChatForm({\n onThemeGeneration,\n isGeneratingTheme,\n onCancelThemeGeneration,\n}: {\n onThemeGeneration: (promptData: AIPromptData) => void;\n isGeneratingTheme: boolean;\n onCancelThemeGeneration: () => void;\n}) {\n const {\n editorContentDraft,\n handleContentChange,\n promptData,\n isEmptyPrompt,\n clearLocalDraft,\n uploadedImages,\n fileInputRef,\n handleImagesUpload,\n handleImageRemove,\n isSomeImageUploading,\n isUserDragging,\n isInitializing,\n } = useAIChatForm();\n\n const { checkValidSession, checkValidSubscription } = useGuards();\n const { subscriptionStatus } = useSubscription();\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n const hasFreeRequestsLeft = (subscriptionStatus?.requestsRemaining ?? 0) > 0;\n\n const { startEnhance, stopEnhance, enhancedPromptAsJsonContent, isEnhancingPrompt } =\n useAIEnhancePrompt();\n\n const handleEnhancePrompt = () => {\n if (!checkValidSession() || !checkValidSubscription()) return;\n\n // Only send images that are not loading, and strip loading property\n const images = uploadedImages.filter((img) => !img.loading).map(({ url }) => ({ url }));\n startEnhance({ ...promptData, images });\n };\n\n const handleGenerate = async () => {\n if (!checkValidSession() || !checkValidSubscription()) return; // Act as an early return\n\n // Only send images that are not loading, and strip loading property\n const images = uploadedImages.filter((img) => !img.loading).map(({ url }) => ({ url }));\n\n // Proceed only if there is text, or at least one image\n if (isEmptyPrompt && images.length === 0) return;\n\n onThemeGeneration({\n ...promptData,\n content: promptData?.content ?? \"\",\n mentions: promptData?.mentions ?? [],\n images,\n });\n\n clearLocalDraft();\n };\n\n return (\n
\n \n\n
\n \n\n
\n
\n \n
\n\n
\n {(isPro || hasFreeRequestsLeft) && promptData?.content ? (\n \n ) : null}\n\n fileInputRef.current?.click()}\n disabled={\n isGeneratingTheme ||\n isEnhancingPrompt ||\n isInitializing ||\n uploadedImages.some((img) => img.loading) ||\n uploadedImages.length >= MAX_IMAGE_FILES\n }\n />\n\n {isGeneratingTheme ? (\n \n \n Stop\n \n ) : (\n \n {isGeneratingTheme ? : }\n \n )}\n
\n
\n
\n
\n );\n}\n" }, { "path": "app/ai/components/ai-chat-hero.tsx", "content": "\"use client\";\n\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { useChatContext } from \"@/hooks/use-chat-context\";\nimport { useAIThemeGenerationCore } from \"@/hooks/use-ai-theme-generation-core\";\nimport { useGuards } from \"@/hooks/use-guards\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { usePreferencesStore } from \"@/store/preferences-store\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { useRouter } from \"next/navigation\";\nimport { AIChatForm } from \"./ai-chat-form\";\nimport { ChatHeading } from \"./chat-heading\";\nimport { SuggestedPillActions } from \"./suggested-pill-actions\";\n\nexport function AIChatHero() {\n const { startNewChat } = useChatContext();\n const { generateThemeCore, isGeneratingTheme, cancelThemeGeneration } =\n useAIThemeGenerationCore();\n const { checkValidSession, checkValidSubscription } = useGuards();\n const router = useRouter();\n\n const { setChatSuggestionsOpen } = usePreferencesStore();\n\n const handleRedirectAndThemeGeneration = (promptData: AIPromptData) => {\n if (!checkValidSession(\"signup\", \"AI_GENERATE_FROM_PAGE\", { promptData })) return;\n if (!checkValidSubscription()) return;\n\n startNewChat();\n setChatSuggestionsOpen(true);\n\n generateThemeCore(promptData);\n router.push(\"/editor/theme?tab=ai\");\n };\n\n usePostLoginAction(\"AI_GENERATE_FROM_PAGE\", ({ promptData }) => {\n handleRedirectAndThemeGeneration(promptData);\n });\n\n return (\n
\n
\n \n\n {/* Chat form input and suggestions */}\n
\n
\n \n
\n\n {/* Quick suggestions */}\n \n \n \n
\n
\n
\n );\n}\n" }, { "path": "app/ai/components/chat-heading.tsx", "content": "export function ChatHeading({ isGeneratingTheme }: { isGeneratingTheme: boolean }) {\n return (\n \n What can I help you theme?\n \n );\n}\n" }, { "path": "app/ai/components/community-theme-card.tsx", "content": "\"use client\";\n\nimport Logo from \"@/assets/logo.svg\";\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { Theme, ThemePreset } from \"@/types/theme\";\nimport { Moon, MoreVertical, Sun } from \"lucide-react\";\n\n// This is repeating from `dashboard/components/theme-card.tsx`\ntype SwatchDefinition = {\n name: string; // Text to display on hover\n bgKey: keyof Theme[\"styles\"][\"light\" | \"dark\"]; // Key for background color\n fgKey: keyof Theme[\"styles\"][\"light\" | \"dark\"]; // Key for text color\n};\n\n// This is repeating from `dashboard/components/theme-card.tsx`\nconst swatchDefinitions: SwatchDefinition[] = [\n { name: \"Primary\", bgKey: \"primary\", fgKey: \"primary-foreground\" },\n { name: \"Secondary\", bgKey: \"secondary\", fgKey: \"secondary-foreground\" },\n { name: \"Accent\", bgKey: \"accent\", fgKey: \"accent-foreground\" },\n { name: \"Muted\", bgKey: \"muted\", fgKey: \"muted-foreground\" },\n // Special case: Background swatch shows \"Foreground\" text using the main foreground color\n { name: \"Background\", bgKey: \"background\", fgKey: \"foreground\" },\n];\n\nexport function CommunityThemeCard({ themePreset }: { themePreset: ThemePreset }) {\n const { themeState } = useEditorStore();\n const mode = themeState.currentMode;\n\n return (\n
\n
\n
\n \n \n
\n\n {/* TEMPORARY CARD IMPLEMENTATION: Based on `dashboard/components/theme-card.tsx` */}\n
\n {/* Light mode swatches */}\n
\n
\n \n
\n {swatchDefinitions.map((swatch) => (\n
\n ))}\n
\n\n {/* Dark mode swatches */}\n
\n
\n \n
\n {swatchDefinitions.map((swatch) => (\n
\n ))}\n
\n
\n \n\n
\n \n \n
\n
\n

{themePreset.label}

\n

\n {themePreset.createdAt ?? \"Unknown creation date\"}\n

\n
\n\n \n \n \n );\n}\n\nexport function CommunityThemeCardSkeleton() {\n return (\n
\n \n\n
\n \n
\n \n \n
\n\n \n
\n
\n );\n}\n" }, { "path": "app/ai/components/community-themes.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Suspense } from \"react\";\nimport { CommunityThemeCard, CommunityThemeCardSkeleton } from \"./community-theme-card\";\nimport { ThemePreset } from \"@/types/theme\";\nimport { defaultPresets } from \"@/utils/theme-presets\";\n\n// TODO: Remove this once we have a real API to fetch the community themes\nconst getDefaultThemePresets = async () => {\n await new Promise((resolve) => setTimeout(resolve, 300));\n return defaultPresets;\n};\n\nexport async function CommunityThemes() {\n const themePresetsPromise = getDefaultThemePresets();\n\n return (\n <>\n
\n
\n

From the Community

\n \n
\n

\n Explore the themes the community is creating with tweakcn.\n

\n
\n\n
\n \n \n \n \n \n }\n >\n \n \n
\n \n );\n}\n\ninterface CommunityThemeCardsProps {\n themePresetsPromise: Promise>;\n}\n\nexport async function CommunityThemeCards({ themePresetsPromise }: CommunityThemeCardsProps) {\n const themePresets = await themePresetsPromise;\n const presets = Object.entries(themePresets).reduce(\n (acc, [id, preset]) => {\n acc[id] = {\n label: preset.label,\n styles: preset.styles,\n };\n return acc;\n },\n {} as Record\n );\n\n return (\n <>\n {Object.values(presets).map((preset) => (\n \n ))}\n \n );\n}\n" }, { "path": "app/ai/components/suggested-pill-actions.tsx", "content": "\"use client\";\n\nimport { PillActionButton } from \"@/components/editor/ai/pill-action-button\";\nimport { useImageUpload } from \"@/hooks/use-image-upload\";\nimport { imageUploadReducer } from \"@/hooks/use-image-upload-reducer\";\nimport { MAX_IMAGE_FILE_SIZE } from \"@/lib/constants\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { createCurrentThemePrompt } from \"@/utils/ai/ai-prompt\";\nimport { PROMPTS } from \"@/utils/ai/prompts\";\nimport { ImageIcon, Sparkles } from \"lucide-react\";\nimport { useEffect, useReducer } from \"react\";\n\nexport function SuggestedPillActions({\n onThemeGeneration,\n isGeneratingTheme,\n}: {\n onThemeGeneration: (promptData: AIPromptData) => void;\n isGeneratingTheme: boolean;\n}) {\n const [uploadedImages, dispatch] = useReducer(imageUploadReducer, []);\n\n const { fileInputRef, handleImagesUpload, canUploadMore, isSomeImageUploading } = useImageUpload({\n maxFiles: 1,\n maxFileSize: MAX_IMAGE_FILE_SIZE,\n images: uploadedImages,\n dispatch,\n });\n\n // Automatically send prompt when an image is selected and loaded\n useEffect(() => {\n if (uploadedImages.length > 0 && !isSomeImageUploading) {\n onThemeGeneration({\n content: \"\", // No text prompt\n mentions: [], // No mentions\n images: [uploadedImages[0]],\n });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [uploadedImages, isSomeImageUploading]);\n\n const handleSetPrompt = async (prompt: string) => {\n const promptData = createCurrentThemePrompt({ prompt });\n onThemeGeneration(promptData);\n };\n\n const handleImageButtonClick = () => {\n if (canUploadMore && fileInputRef.current) {\n fileInputRef.current.click();\n }\n };\n\n const handleImageUpload = (event: React.ChangeEvent) => {\n const fileList = event.target.files;\n if (!fileList) return;\n\n const files = Array.from(fileList);\n handleImagesUpload(files);\n };\n\n return (\n <>\n \n \n From an Image\n \n\n {Object.entries(PROMPTS).map(([key, { label, prompt }]) => (\n handleSetPrompt(prompt)}\n disabled={isGeneratingTheme}\n >\n {label}\n \n ))}\n \n );\n}\n" }, { "path": "app/ai/layout.tsx", "content": "import { Header } from \"@/components/header\";\n\nexport default function AiLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
{children}
\n
\n );\n}\n" }, { "path": "app/ai/loading.tsx", "content": "import { Loading } from \"@/components/loading\";\n\nexport default function AiLoading() {\n return ;\n}\n" }, { "path": "app/ai/page.tsx", "content": "import { type Metadata } from \"next\";\nimport { AIAnnouncement } from \"./components/ai-announcement\";\nimport { AIChatHero } from \"./components/ai-chat-hero\";\n\nexport const metadata: Metadata = {\n title: \"Image to shadcn/ui theme. Generate with AI — tweakcn\",\n description:\n \"Transform images into stunning shadcn/ui themes instantly with tweakcn's AI theme generator. Upload any image or describe your vision—our AI creates custom Tailwind CSS themes with real-time preview. Perfect for developers who want beautiful, production-ready themes in seconds.\",\n keywords:\n \"ai theme generator, image to theme, shadcn/ui themes, tailwind css generator, ai design tool, theme from image, ui customization, tweakcn, visual theme creator, color palette generator, design system ai, frontend theming, web design automation\",\n robots: \"index, follow\",\n};\n\nexport default function AiPage() {\n return (\n
\n {/* AI Chat entry point section */}\n
\n \n \n
\n
\n );\n}\n" }, { "path": "app/api/auth/[...all]/route.ts", "content": "import { auth } from \"@/lib/auth\";\nimport { toNextJsHandler } from \"better-auth/next-js\";\n\nexport const { GET, POST } = toNextJsHandler(auth.handler);\n" }, { "path": "app/api/enhance-prompt/route.ts", "content": "import { ENHANCE_PROMPT_SYSTEM } from \"@/lib/ai/prompts\";\nimport { baseProviderOptions, myProvider } from \"@/lib/ai/providers\";\nimport { handleError } from \"@/lib/error-response\";\nimport { requireSubscriptionOrFreeUsage } from \"@/lib/subscription\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { buildUserContentPartsFromPromptData } from \"@/utils/ai/message-converter\";\nimport { smoothStream, streamText } from \"ai\";\nimport { NextRequest } from \"next/server\";\n\nexport async function POST(req: NextRequest) {\n try {\n await requireSubscriptionOrFreeUsage(req);\n\n const body = await req.json();\n const { prompt: _prompt, promptData }: { prompt: string; promptData: AIPromptData } = body;\n const userContentParts = buildUserContentPartsFromPromptData(promptData);\n\n const result = streamText({\n system: ENHANCE_PROMPT_SYSTEM,\n messages: [\n {\n role: \"user\",\n content: userContentParts,\n },\n ],\n model: myProvider.languageModel(\"prompt-enhancement\"),\n providerOptions: baseProviderOptions,\n experimental_transform: smoothStream({\n delayInMs: 10,\n chunking: \"word\",\n }),\n });\n\n return result.toUIMessageStreamResponse();\n } catch (error) {\n return handleError(error, { route: \"/api/enhance-prompt\" });\n }\n}\n" }, { "path": "app/api/generate-theme/route.ts", "content": "import { recordAIUsage } from \"@/actions/ai-usage\";\nimport { THEME_GENERATION_TOOLS } from \"@/lib/ai/generate-theme/tools\";\nimport { GENERATE_THEME_SYSTEM } from \"@/lib/ai/prompts\";\nimport { baseProviderOptions, myProvider } from \"@/lib/ai/providers\";\nimport { handleError } from \"@/lib/error-response\";\nimport { getCurrentUserId, logError } from \"@/lib/shared\";\nimport { validateSubscriptionAndUsage } from \"@/lib/subscription\";\nimport { AdditionalAIContext, ChatMessage } from \"@/types/ai\";\nimport { SubscriptionRequiredError } from \"@/types/errors\";\nimport { convertMessagesToModelMessages } from \"@/utils/ai/message-converter\";\nimport { Ratelimit } from \"@upstash/ratelimit\";\nimport { kv } from \"@vercel/kv\";\nimport { createUIMessageStream, createUIMessageStreamResponse, stepCountIs, streamText } from \"ai\";\nimport { headers } from \"next/headers\";\nimport { NextRequest } from \"next/server\";\n\nconst ratelimit = new Ratelimit({\n redis: kv,\n limiter: Ratelimit.fixedWindow(5, \"60s\"),\n});\n\nexport async function POST(req: NextRequest) {\n try {\n const userId = await getCurrentUserId(req);\n const headersList = await headers();\n\n if (process.env.NODE_ENV !== \"development\") {\n const ip = headersList.get(\"x-forwarded-for\") ?? \"anonymous\";\n const { success, limit, reset, remaining } = await ratelimit.limit(ip);\n\n if (!success) {\n return new Response(\"Rate limit exceeded. Please try again later.\", {\n status: 429,\n headers: {\n \"X-RateLimit-Limit\": limit.toString(),\n \"X-RateLimit-Remaining\": remaining.toString(),\n \"X-RateLimit-Reset\": reset.toString(),\n },\n });\n }\n }\n\n const subscriptionCheck = await validateSubscriptionAndUsage(userId);\n\n if (!subscriptionCheck.canProceed) {\n throw new SubscriptionRequiredError(subscriptionCheck.error, {\n requestsRemaining: subscriptionCheck.requestsRemaining,\n });\n }\n\n const { messages }: { messages: ChatMessage[] } = await req.json();\n const modelMessages = await convertMessagesToModelMessages(messages);\n\n const stream = createUIMessageStream({\n execute: ({ writer }) => {\n const context: AdditionalAIContext = { writer };\n const model = myProvider.languageModel(\"base\");\n\n const result = streamText({\n abortSignal: req.signal,\n model: model,\n providerOptions: baseProviderOptions,\n system: GENERATE_THEME_SYSTEM,\n messages: modelMessages,\n tools: THEME_GENERATION_TOOLS,\n stopWhen: stepCountIs(5),\n onError: (error) => {\n if (error instanceof Error) console.error(error);\n },\n onFinish: async (result) => {\n const { totalUsage } = result;\n try {\n await recordAIUsage({\n modelId: model.modelId,\n promptTokens: totalUsage.inputTokens,\n completionTokens: totalUsage.outputTokens,\n });\n } catch (error) {\n logError(error as Error, { action: \"recordAIUsage\", totalUsage });\n }\n },\n experimental_context: context,\n });\n\n writer.merge(\n result.toUIMessageStream({\n messageMetadata: ({ part }) => {\n // `toolName` is not typed for some reason, must be kept in sync with the actual tool names\n if (part.type === \"tool-result\" && part.toolName === \"generateTheme\") {\n return { themeStyles: part.output };\n }\n },\n })\n );\n },\n });\n\n return createUIMessageStreamResponse({ stream });\n } catch (error) {\n if (\n error instanceof Error &&\n (error.name === \"AbortError\" || error.name === \"ResponseAborted\")\n ) {\n return new Response(\"Request aborted by user\", { status: 499 });\n }\n\n return handleError(error, { route: \"/api/generate-theme\" });\n }\n}\n" }, { "path": "app/api/google-fonts/route.ts", "content": "import { PaginatedFontsResponse } from \"@/types/fonts\";\nimport { FALLBACK_FONTS } from \"@/utils/fonts\";\nimport { fetchGoogleFonts } from \"@/utils/fonts/google-fonts\";\nimport { unstable_cache } from \"next/cache\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\nconst cachedFetchGoogleFonts = unstable_cache(fetchGoogleFonts, [\"google-fonts-catalogue\"], {\n tags: [\"google-fonts-catalogue\"],\n});\n\nexport async function GET(request: NextRequest) {\n try {\n const { searchParams } = new URL(request.url);\n const query = searchParams.get(\"q\")?.toLowerCase() || \"\";\n const category = searchParams.get(\"category\")?.toLowerCase();\n const limit = Math.min(Number(searchParams.get(\"limit\")) || 50, 100);\n const offset = Number(searchParams.get(\"offset\")) || 0;\n\n let googleFonts = FALLBACK_FONTS;\n\n try {\n googleFonts = await cachedFetchGoogleFonts(process.env.GOOGLE_FONTS_API_KEY);\n } catch (error) {\n console.error(\"Error fetching Google Fonts:\", error);\n console.log(\"Using fallback fonts\");\n }\n\n // Filter fonts based on search query and category\n let filteredFonts = googleFonts;\n\n if (query) {\n filteredFonts = filteredFonts.filter((font) => font.family.toLowerCase().includes(query));\n }\n\n if (category && category !== \"all\") {\n filteredFonts = filteredFonts.filter((font) => font.category === category);\n }\n\n const paginatedFonts = filteredFonts.slice(offset, offset + limit);\n\n const response: PaginatedFontsResponse = {\n fonts: paginatedFonts,\n total: filteredFonts.length,\n offset,\n limit,\n hasMore: offset + limit < filteredFonts.length,\n };\n\n return NextResponse.json(response);\n } catch (error) {\n console.error(\"Error in Google Fonts API:\", error);\n return NextResponse.json({ error: \"Failed to fetch fonts\" }, { status: 500 });\n }\n}\n" }, { "path": "app/api/oauth/app-info/route.ts", "content": "import { db } from \"@/db\";\nimport { oauthApp } from \"@/db/schema\";\nimport { oauthError } from \"@/lib/oauth\";\nimport { eq, and } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function GET(req: NextRequest) {\n const clientId = req.nextUrl.searchParams.get(\"client_id\");\n\n if (!clientId) {\n return oauthError(\"invalid_request\", \"Missing client_id\");\n }\n\n const [app] = await db\n .select({ name: oauthApp.name, description: oauthApp.description })\n .from(oauthApp)\n .where(and(eq(oauthApp.clientId, clientId), eq(oauthApp.isActive, true)))\n .limit(1);\n\n if (!app) {\n return oauthError(\"invalid_client\", \"Unknown client_id\");\n }\n\n return Response.json({ name: app.name, description: app.description });\n}\n" }, { "path": "app/api/oauth/authorize/route.ts", "content": "import { db } from \"@/db\";\nimport { oauthApp, oauthAuthorizationCode } from \"@/db/schema\";\nimport { OAUTH_AUTHORIZATION_CODE_EXPIRY_SECONDS } from \"@/lib/constants\";\nimport {\n generateSecureToken,\n oauthError,\n parseScopes,\n validateRedirectUri,\n validateScopes,\n} from \"@/lib/oauth\";\nimport { auth } from \"@/lib/auth\";\nimport { eq, and } from \"drizzle-orm\";\nimport { headers } from \"next/headers\";\nimport cuid from \"cuid\";\nimport { NextRequest } from \"next/server\";\n\nexport async function GET(req: NextRequest) {\n const params = req.nextUrl.searchParams;\n\n const clientId = params.get(\"client_id\");\n const redirectUri = params.get(\"redirect_uri\");\n const responseType = params.get(\"response_type\");\n const scopeParam = params.get(\"scope\");\n const state = params.get(\"state\");\n const codeChallenge = params.get(\"code_challenge\");\n const codeChallengeMethod = params.get(\"code_challenge_method\") ?? \"S256\";\n\n // Validate required params\n if (!clientId || !redirectUri || !responseType || !scopeParam) {\n return oauthError(\n \"invalid_request\",\n \"Missing required parameters: client_id, redirect_uri, response_type, scope\"\n );\n }\n\n if (responseType !== \"code\") {\n return oauthError(\n \"unsupported_response_type\",\n \"Only response_type=code is supported\"\n );\n }\n\n // Look up OAuth app\n const [app] = await db\n .select({ id: oauthApp.id, redirectUris: oauthApp.redirectUris })\n .from(oauthApp)\n .where(and(eq(oauthApp.clientId, clientId), eq(oauthApp.isActive, true)))\n .limit(1);\n\n if (!app) {\n return oauthError(\"invalid_client\", \"Unknown client_id\");\n }\n\n // Validate redirect URI\n if (!validateRedirectUri(redirectUri, app.redirectUris)) {\n return oauthError(\"invalid_request\", \"redirect_uri not registered\");\n }\n\n // Validate scopes\n const scopes = parseScopes(scopeParam);\n if (!validateScopes(scopes)) {\n return oauthError(\"invalid_scope\", \"Invalid or unsupported scope\");\n }\n\n // Check that the user is logged in\n const session = await auth.api.getSession({ headers: await headers() });\n if (!session?.user?.id) {\n // Redirect to the OAuth authorize page which handles sign-in\n const pageUrl = new URL(\"/oauth/authorize\", req.nextUrl.origin);\n req.nextUrl.searchParams.forEach((value, key) => {\n pageUrl.searchParams.set(key, value);\n });\n return Response.redirect(pageUrl.toString(), 302);\n }\n\n // Generate authorization code\n const code = generateSecureToken();\n const now = new Date();\n\n await db.insert(oauthAuthorizationCode).values({\n id: cuid(),\n code,\n appId: app.id,\n userId: session.user.id,\n scopes,\n redirectUri,\n codeChallenge: codeChallenge ?? null,\n codeChallengeMethod: codeChallenge ? codeChallengeMethod : null,\n expiresAt: new Date(\n now.getTime() + OAUTH_AUTHORIZATION_CODE_EXPIRY_SECONDS * 1000\n ),\n createdAt: now,\n });\n\n // Redirect back to the app with the code\n const redirectUrl = new URL(redirectUri);\n redirectUrl.searchParams.set(\"code\", code);\n if (state) redirectUrl.searchParams.set(\"state\", state);\n\n return Response.redirect(redirectUrl.toString(), 302);\n}\n" }, { "path": "app/api/oauth/revoke/route.ts", "content": "import { db } from \"@/db\";\nimport { oauthToken } from \"@/db/schema\";\nimport { hashToken, oauthError } from \"@/lib/oauth\";\nimport { eq, or } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function POST(req: NextRequest) {\n const body = await req.formData().catch(() => null);\n if (!body) {\n return oauthError(\"invalid_request\", \"Request body must be form-encoded\");\n }\n\n const token = body.get(\"token\") as string | null;\n if (!token) {\n return oauthError(\"invalid_request\", \"Missing required parameter: token\");\n }\n\n const tokenHash = hashToken(token);\n\n // Try to match as access token or refresh token\n const [record] = await db\n .select({ id: oauthToken.id })\n .from(oauthToken)\n .where(\n or(\n eq(oauthToken.accessTokenHash, tokenHash),\n eq(oauthToken.refreshTokenHash, tokenHash)\n )\n )\n .limit(1);\n\n if (record) {\n await db\n .update(oauthToken)\n .set({ revokedAt: new Date(), updatedAt: new Date() })\n .where(eq(oauthToken.id, record.id));\n }\n\n // RFC 7009: always return 200 even if token not found\n return new Response(null, { status: 200 });\n}\n" }, { "path": "app/api/oauth/token/route.ts", "content": "import { db } from \"@/db\";\nimport { oauthAuthorizationCode, oauthToken } from \"@/db/schema\";\nimport {\n authenticateClient,\n createTokenPair,\n hashToken,\n oauthError,\n verifyCodeChallenge,\n} from \"@/lib/oauth\";\nimport { eq, and, isNull } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function POST(req: NextRequest) {\n const body = await req.formData().catch(() => null);\n if (!body) {\n return oauthError(\"invalid_request\", \"Request body must be form-encoded\");\n }\n\n const grantType = body.get(\"grant_type\") as string | null;\n\n if (grantType === \"authorization_code\") {\n return handleAuthorizationCode(body);\n }\n\n if (grantType === \"refresh_token\") {\n return handleRefreshToken(body);\n }\n\n return oauthError(\"unsupported_grant_type\", \"Supported: authorization_code, refresh_token\");\n}\n\nasync function handleAuthorizationCode(body: FormData) {\n const clientId = body.get(\"client_id\") as string | null;\n const clientSecret = body.get(\"client_secret\") as string | null;\n const code = body.get(\"code\") as string | null;\n const redirectUri = body.get(\"redirect_uri\") as string | null;\n const codeVerifier = body.get(\"code_verifier\") as string | null;\n\n if (!clientId || !clientSecret || !code || !redirectUri) {\n return oauthError(\n \"invalid_request\",\n \"Missing required parameters: client_id, client_secret, code, redirect_uri\"\n );\n }\n\n // Authenticate the client\n const app = await authenticateClient(clientId, clientSecret);\n if (!app) {\n return oauthError(\"invalid_client\", \"Invalid client credentials\", 401);\n }\n\n // Look up the authorization code\n const [authCode] = await db\n .select({\n id: oauthAuthorizationCode.id,\n expiresAt: oauthAuthorizationCode.expiresAt,\n redirectUri: oauthAuthorizationCode.redirectUri,\n codeChallenge: oauthAuthorizationCode.codeChallenge,\n codeChallengeMethod: oauthAuthorizationCode.codeChallengeMethod,\n userId: oauthAuthorizationCode.userId,\n scopes: oauthAuthorizationCode.scopes,\n })\n .from(oauthAuthorizationCode)\n .where(\n and(\n eq(oauthAuthorizationCode.code, code),\n eq(oauthAuthorizationCode.appId, app.id),\n isNull(oauthAuthorizationCode.usedAt)\n )\n )\n .limit(1);\n\n if (!authCode) {\n return oauthError(\"invalid_grant\", \"Invalid or already used authorization code\");\n }\n\n // Check expiry\n if (new Date() > authCode.expiresAt) {\n return oauthError(\"invalid_grant\", \"Authorization code expired\");\n }\n\n // Check redirect URI matches\n if (authCode.redirectUri !== redirectUri) {\n return oauthError(\"invalid_grant\", \"redirect_uri mismatch\");\n }\n\n // Verify PKCE if code challenge was provided during authorization\n if (authCode.codeChallenge) {\n if (!codeVerifier) {\n return oauthError(\"invalid_request\", \"code_verifier required for PKCE\");\n }\n if (\n !verifyCodeChallenge(\n codeVerifier,\n authCode.codeChallenge,\n authCode.codeChallengeMethod ?? \"S256\"\n )\n ) {\n return oauthError(\"invalid_grant\", \"PKCE verification failed\");\n }\n }\n\n // Mark code as used\n await db\n .update(oauthAuthorizationCode)\n .set({ usedAt: new Date() })\n .where(eq(oauthAuthorizationCode.id, authCode.id));\n\n // Create tokens\n const tokenResponse = await createTokenPair(\n app.id,\n authCode.userId,\n authCode.scopes\n );\n\n return Response.json(tokenResponse);\n}\n\nasync function handleRefreshToken(body: FormData) {\n const clientId = body.get(\"client_id\") as string | null;\n const clientSecret = body.get(\"client_secret\") as string | null;\n const refreshToken = body.get(\"refresh_token\") as string | null;\n\n if (!clientId || !clientSecret || !refreshToken) {\n return oauthError(\n \"invalid_request\",\n \"Missing required parameters: client_id, client_secret, refresh_token\"\n );\n }\n\n const app = await authenticateClient(clientId, clientSecret);\n if (!app) {\n return oauthError(\"invalid_client\", \"Invalid client credentials\", 401);\n }\n\n // Look up the refresh token\n const refreshTokenHash = hashToken(refreshToken);\n const [tokenRecord] = await db\n .select({\n id: oauthToken.id,\n userId: oauthToken.userId,\n scopes: oauthToken.scopes,\n refreshTokenExpiresAt: oauthToken.refreshTokenExpiresAt,\n })\n .from(oauthToken)\n .where(\n and(\n eq(oauthToken.refreshTokenHash, refreshTokenHash),\n eq(oauthToken.appId, app.id),\n isNull(oauthToken.revokedAt)\n )\n )\n .limit(1);\n\n if (!tokenRecord) {\n return oauthError(\"invalid_grant\", \"Invalid refresh token\");\n }\n\n if (\n tokenRecord.refreshTokenExpiresAt &&\n new Date() > tokenRecord.refreshTokenExpiresAt\n ) {\n return oauthError(\"invalid_grant\", \"Refresh token expired\");\n }\n\n // Revoke the old token pair\n await db\n .update(oauthToken)\n .set({ revokedAt: new Date(), updatedAt: new Date() })\n .where(eq(oauthToken.id, tokenRecord.id));\n\n // Issue new token pair\n const tokenResponse = await createTokenPair(\n app.id,\n tokenRecord.userId,\n tokenRecord.scopes\n );\n\n return Response.json(tokenResponse);\n}\n" }, { "path": "app/api/oauth/userinfo/route.ts", "content": "import { db } from \"@/db\";\nimport { user as userTable } from \"@/db/schema\";\nimport { oauthError, requireScope, resolveUserFromBearerToken } from \"@/lib/oauth\";\nimport { eq } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\n/**\n * OpenID Connect-style userinfo endpoint.\n * Returns flat user fields for compatibility with generic OAuth clients\n * (e.g. Better Auth's genericOAuth plugin).\n */\nexport async function GET(req: NextRequest) {\n const tokenData = await resolveUserFromBearerToken(\n req.headers.get(\"authorization\")\n );\n\n if (!tokenData) {\n return oauthError(\"invalid_token\", \"Invalid or expired access token\", 401);\n }\n\n if (!requireScope(tokenData.scopes, \"profile:read\")) {\n return oauthError(\"insufficient_scope\", \"Requires profile:read scope\", 403);\n }\n\n const [profile] = await db\n .select({\n id: userTable.id,\n name: userTable.name,\n email: userTable.email,\n image: userTable.image,\n })\n .from(userTable)\n .where(eq(userTable.id, tokenData.userId))\n .limit(1);\n\n if (!profile) {\n return oauthError(\"invalid_token\", \"User not found\", 401);\n }\n\n return Response.json({\n sub: profile.id,\n name: profile.name,\n email: profile.email,\n picture: profile.image,\n });\n}\n" }, { "path": "app/api/subscription/route.ts", "content": "import { getCurrentUserId, logError } from \"@/lib/shared\";\nimport { validateSubscriptionAndUsage } from \"@/lib/subscription\";\nimport { SubscriptionStatus } from \"@/types/subscription\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\nexport async function GET(request: NextRequest) {\n try {\n const userId = await getCurrentUserId(request);\n const { isSubscribed, requestsRemaining, requestsUsed } =\n await validateSubscriptionAndUsage(userId);\n\n const response: SubscriptionStatus = {\n isSubscribed,\n requestsRemaining,\n requestsUsed,\n };\n\n return NextResponse.json(response);\n } catch (error) {\n logError(error as Error);\n return NextResponse.json({ error: \"Internal Server Error\" }, { status: 500 });\n }\n}\n" }, { "path": "app/api/v1/me/route.ts", "content": "import { db } from \"@/db\";\nimport { user as userTable } from \"@/db/schema\";\nimport { oauthError, requireAuth } from \"@/lib/oauth\";\nimport { eq } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function GET(req: NextRequest) {\n const auth = await requireAuth(req, \"profile:read\");\n if (auth.error) return auth.error;\n\n const [profile] = await db\n .select({\n id: userTable.id,\n name: userTable.name,\n email: userTable.email,\n image: userTable.image,\n })\n .from(userTable)\n .where(eq(userTable.id, auth.tokenData.userId))\n .limit(1);\n\n if (!profile) {\n return oauthError(\"invalid_token\", \"User not found\", 401);\n }\n\n return Response.json({ data: profile });\n}\n" }, { "path": "app/api/v1/themes/[themeId]/route.ts", "content": "import { db } from \"@/db\";\nimport { theme as themeTable } from \"@/db/schema\";\nimport { oauthError, requireAuth } from \"@/lib/oauth\";\nimport { eq, and } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function GET(\n req: NextRequest,\n { params }: { params: Promise<{ themeId: string }> }\n) {\n const auth = await requireAuth(req, \"themes:read\");\n if (auth.error) return auth.error;\n\n const { themeId } = await params;\n\n const [theme] = await db\n .select({\n id: themeTable.id,\n name: themeTable.name,\n styles: themeTable.styles,\n createdAt: themeTable.createdAt,\n updatedAt: themeTable.updatedAt,\n })\n .from(themeTable)\n .where(\n and(eq(themeTable.id, themeId), eq(themeTable.userId, auth.tokenData.userId))\n )\n .limit(1);\n\n if (!theme) {\n return oauthError(\"not_found\", \"Theme not found\", 404);\n }\n\n return Response.json({ data: theme });\n}\n" }, { "path": "app/api/v1/themes/route.ts", "content": "import { db } from \"@/db\";\nimport { theme as themeTable } from \"@/db/schema\";\nimport { requireAuth } from \"@/lib/oauth\";\nimport { eq } from \"drizzle-orm\";\nimport { NextRequest } from \"next/server\";\n\nexport async function GET(req: NextRequest) {\n const auth = await requireAuth(req, \"themes:read\");\n if (auth.error) return auth.error;\n\n const themes = await db\n .select({\n id: themeTable.id,\n name: themeTable.name,\n styles: themeTable.styles,\n createdAt: themeTable.createdAt,\n updatedAt: themeTable.updatedAt,\n })\n .from(themeTable)\n .where(eq(themeTable.userId, auth.tokenData.userId));\n\n return Response.json({ data: themes });\n}\n" }, { "path": "app/api/webhook/polar/route.ts", "content": "import { db } from \"@/db\";\nimport { subscription } from \"@/db/schema\";\nimport { Webhooks } from \"@polar-sh/nextjs\";\n\nfunction safeParseDate(value: string | Date | null | undefined): Date | null {\n if (!value) return null;\n if (value instanceof Date) return value;\n return new Date(value);\n}\n\nif (!process.env.POLAR_WEBHOOK_SECRET) {\n throw new Error(\"POLAR_WEBHOOK_SECRET environment variable is required\");\n}\n\nexport const POST = Webhooks({\n webhookSecret: process.env.POLAR_WEBHOOK_SECRET,\n onPayload: async ({ data, type }) => {\n if (\n type === \"subscription.created\" ||\n type === \"subscription.active\" ||\n type === \"subscription.canceled\" ||\n type === \"subscription.revoked\" ||\n type === \"subscription.uncanceled\" ||\n type === \"subscription.updated\"\n ) {\n console.log(\"🎯 Processing subscription webhook:\", type);\n console.log(\"📦 Payload data:\", JSON.stringify(data, null, 2));\n try {\n const userId = data.customer?.externalId;\n\n const subscriptionData = {\n id: data.id,\n createdAt: new Date(data.createdAt),\n modifiedAt: safeParseDate(data.modifiedAt),\n amount: data.amount,\n currency: data.currency,\n recurringInterval: data.recurringInterval,\n status: data.status,\n currentPeriodStart: safeParseDate(data.currentPeriodStart) || new Date(),\n currentPeriodEnd: safeParseDate(data.currentPeriodEnd) || new Date(),\n cancelAtPeriodEnd: data.cancelAtPeriodEnd || false,\n canceledAt: safeParseDate(data.canceledAt),\n startedAt: safeParseDate(data.startedAt) || new Date(),\n endsAt: safeParseDate(data.endsAt),\n endedAt: safeParseDate(data.endedAt),\n customerId: data.customerId,\n productId: data.productId,\n discountId: data.discountId || null,\n checkoutId: data.checkoutId || \"\",\n customerCancellationReason: data.customerCancellationReason || null,\n customerCancellationComment: data.customerCancellationComment || null,\n metadata: data.metadata ? JSON.stringify(data.metadata) : null,\n customFieldData: data.customFieldData ? JSON.stringify(data.customFieldData) : null,\n userId: userId as string | null,\n };\n\n console.log(\"💾 Final subscription data:\", {\n id: subscriptionData.id,\n status: subscriptionData.status,\n userId: subscriptionData.userId,\n amount: subscriptionData.amount,\n });\n\n await db\n .insert(subscription)\n .values(subscriptionData)\n .onConflictDoUpdate({\n target: subscription.id,\n set: {\n modifiedAt: subscriptionData.modifiedAt || new Date(),\n amount: subscriptionData.amount,\n currency: subscriptionData.currency,\n recurringInterval: subscriptionData.recurringInterval,\n status: subscriptionData.status,\n currentPeriodStart: subscriptionData.currentPeriodStart,\n currentPeriodEnd: subscriptionData.currentPeriodEnd,\n cancelAtPeriodEnd: subscriptionData.cancelAtPeriodEnd,\n canceledAt: subscriptionData.canceledAt,\n startedAt: subscriptionData.startedAt,\n endsAt: subscriptionData.endsAt,\n endedAt: subscriptionData.endedAt,\n customerId: subscriptionData.customerId,\n productId: subscriptionData.productId,\n discountId: subscriptionData.discountId,\n checkoutId: subscriptionData.checkoutId,\n customerCancellationReason: subscriptionData.customerCancellationReason,\n customerCancellationComment: subscriptionData.customerCancellationComment,\n metadata: subscriptionData.metadata,\n customFieldData: subscriptionData.customFieldData,\n userId: subscriptionData.userId,\n },\n });\n\n console.log(\"🎉 Subscription data upserted successfully\");\n } catch (error) {\n console.error(\"❌ Error processing subscription webhook:\", error);\n }\n }\n },\n});\n" }, { "path": "app/community/components/community-sidebar.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useCommunityTagCounts } from \"@/hooks/themes\";\nimport { useSessionGuard } from \"@/hooks/use-guards\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport type { CommunityFilterOption } from \"@/types/community\";\n\ninterface CommunitySidebarProps {\n filter: CommunityFilterOption;\n selectedTags: string[];\n onFilterChange: (filter: CommunityFilterOption) => void;\n onTagToggle: (tag: string) => void;\n}\n\nconst filterItems = [\n { value: \"all\" as const, label: \"All Themes\" },\n { value: \"mine\" as const, label: \"My Themes\" },\n { value: \"liked\" as const, label: \"Liked Themes\" },\n];\n\nexport function CommunitySidebarContent({\n filter,\n selectedTags,\n onFilterChange,\n onTagToggle,\n}: CommunitySidebarProps) {\n const { data: tagCounts = [], isLoading: isLoadingTags } =\n useCommunityTagCounts();\n const { checkValidSession } = useSessionGuard();\n\n const handleFilterClick = (value: CommunityFilterOption) => {\n if (value === \"mine\" || value === \"liked\") {\n if (!checkValidSession(\"signin\")) return;\n }\n onFilterChange(value);\n };\n\n return (\n \n );\n}\n" }, { "path": "app/community/components/community-theme-card.tsx", "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { Heart } from \"lucide-react\";\n\nimport { useTheme } from \"@/components/theme-provider\";\nimport { useToggleLike } from \"@/hooks/themes\";\nimport { useSessionGuard } from \"@/hooks/use-guards\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { ThemePreview } from \"@/components/theme-preview\";\nimport type { CommunityTheme } from \"@/types/community\";\n\ninterface CommunityThemeCardProps {\n theme: CommunityTheme;\n onPreview: (theme: CommunityTheme) => void;\n}\n\nexport function CommunityThemeCard({ theme, onPreview }: CommunityThemeCardProps) {\n const { theme: currentTheme } = useTheme();\n const toggleLike = useToggleLike();\n const { checkValidSession } = useSessionGuard();\n\n usePostLoginAction(\"LIKE_THEME\", (data?: { communityThemeId: string }) => {\n if (data?.communityThemeId === theme.id) {\n toggleLike.mutate(theme.id);\n }\n });\n\n const handleLike = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n if (\n !checkValidSession(\"signin\", \"LIKE_THEME\", {\n communityThemeId: theme.id,\n })\n ) {\n return;\n }\n\n toggleLike.mutate(theme.id);\n };\n\n const authorInitials = theme.author.name\n ?.split(\" \")\n .map((n) => n[0])\n .join(\"\")\n .slice(0, 2)\n .toUpperCase();\n\n const publishedDate = new Date(theme.publishedAt).toLocaleDateString(\n \"en-US\",\n { day: \"numeric\", month: \"short\" }\n );\n\n return (\n onPreview(theme)}\n className=\"group cursor-pointer\"\n >\n
\n \n {theme.tags.length > 0 && (\n
\n {theme.tags.slice(0, 2).map((tag) => (\n \n {tag}\n \n ))}\n {theme.tags.length > 2 && (\n \n +{theme.tags.length - 2}\n \n )}\n
\n )}\n
\n\n
\n
\n
\n
\n \n {theme.author.image && (\n \n )}\n \n {authorInitials}\n \n \n \n {theme.author.name}\n \n
\n \n {publishedDate}\n \n
\n
\n \n \n {theme.likeCount > 0 && {theme.likeCount}}\n \n
\n \n );\n}\n" }, { "path": "app/community/components/community-theme-preview-dialog.tsx", "content": "\"use client\";\n\nimport { lazy, useEffect, useCallback } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { cn } from \"@/lib/utils\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { useToggleLike } from \"@/hooks/themes\";\nimport { useSessionGuard } from \"@/hooks/use-guards\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"@/components/ui/avatar\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport ExamplesPreviewContainer from \"@/components/editor/theme-preview/examples-preview-container\";\nimport { Heart, Moon, Sun, ArrowUpRight, ChevronLeft, ChevronRight, Share2 } from \"lucide-react\";\nimport { toast } from \"@/components/ui/use-toast\";\nimport type { CommunityTheme } from \"@/types/community\";\n\nconst DemoCards = lazy(() => import(\"@/components/examples/cards\"));\n\ninterface CommunityThemePreviewDialogProps {\n theme: CommunityTheme | null;\n themes: CommunityTheme[];\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onNavigate: (theme: CommunityTheme) => void;\n}\n\nexport function CommunityThemePreviewDialog({\n theme,\n themes,\n open,\n onOpenChange,\n onNavigate,\n}: CommunityThemePreviewDialogProps) {\n const router = useRouter();\n const { themeState, setThemeState } = useEditorStore();\n const toggleLike = useToggleLike();\n const { checkValidSession } = useSessionGuard();\n\n const currentIndex = theme ? themes.findIndex((t) => t.id === theme.id) : -1;\n const hasPrev = currentIndex > 0;\n const hasNext = currentIndex >= 0 && currentIndex < themes.length - 1;\n\n const goToPrev = useCallback(() => {\n if (hasPrev) onNavigate(themes[currentIndex - 1]);\n }, [hasPrev, themes, currentIndex, onNavigate]);\n\n const goToNext = useCallback(() => {\n if (hasNext) onNavigate(themes[currentIndex + 1]);\n }, [hasNext, themes, currentIndex, onNavigate]);\n\n useEffect(() => {\n if (!open) return;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n goToPrev();\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault();\n goToNext();\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [open, goToPrev, goToNext]);\n\n usePostLoginAction(\"LIKE_THEME\", (data?: { communityThemeId: string }) => {\n if (theme && data?.communityThemeId === theme.id) {\n toggleLike.mutate(theme.id);\n }\n });\n\n if (!theme) return null;\n\n const currentMode = themeState.currentMode;\n\n const handleToggleTheme = () => {\n setThemeState({\n ...themeState,\n currentMode: currentMode === \"light\" ? \"dark\" : \"light\",\n });\n };\n\n const handleLike = () => {\n if (\n !checkValidSession(\"signin\", \"LIKE_THEME\", {\n communityThemeId: theme.id,\n })\n ) {\n return;\n }\n toggleLike.mutate(theme.id);\n };\n\n const handleViewDetails = () => {\n onOpenChange(false);\n router.push(`/themes/${theme.themeId}`);\n };\n\n const handleShare = () => {\n const url = `https://tweakcn.com/themes/${theme.themeId}`;\n navigator.clipboard.writeText(url);\n toast({\n title: \"Theme URL copied to clipboard!\",\n });\n };\n\n const authorInitials = theme.author.name\n ?.split(\" \")\n .map((n) => n[0])\n .join(\"\")\n .slice(0, 2)\n .toUpperCase();\n\n return (\n \n \n {/* Navigation arrows — positioned outside the dialog box */}\n {hasPrev && (\n \n \n \n )}\n {hasNext && (\n \n \n \n )}\n {/* Inner content wrapper — clips content within dialog bounds */}\n
\n {/* Header: name + author */}\n \n
\n \n {theme.name}\n \n |\n
\n \n {theme.author.image && (\n \n )}\n \n {authorInitials}\n \n \n {theme.author.name}\n
\n
\n \n\n {/* Toolbar */}\n
\n \n Preview\n \n
\n \n \n {theme.likeCount > 0 && {theme.likeCount}}\n \n \n \n \n \n {currentMode === \"dark\" ? (\n \n ) : (\n \n )}\n \n
\n \n
\n
\n\n {/* Card preview — scrollable */}\n
\n \n \n \n \n \n
\n
\n \n
\n );\n}\n" }, { "path": "app/community/components/community-themes-content.tsx", "content": "\"use client\";\n\nimport { useCommunityThemes } from \"@/hooks/themes\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport type {\n CommunityFilterOption,\n CommunityTimeRange,\n CommunityTheme,\n} from \"@/types/community\";\nimport {\n useQueryState,\n parseAsStringLiteral,\n parseAsArrayOf,\n parseAsString,\n} from \"nuqs\";\nimport { useEffect, useRef, useState, useCallback } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Flame, Loader2, Info, SlidersHorizontal, ChevronDown, Check } from \"lucide-react\";\nimport { CommunityThemeCard } from \"./community-theme-card\";\nimport { CommunityThemePreviewDialog } from \"./community-theme-preview-dialog\";\nimport { CommunitySidebarContent } from \"./community-sidebar\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport Link from \"next/link\";\n\nconst popularOptions: {\n timeRange: CommunityTimeRange;\n label: string;\n}[] = [\n { timeRange: \"all\", label: \"All Time\" },\n { timeRange: \"monthly\", label: \"This Month\" },\n { timeRange: \"weekly\", label: \"This Week\" },\n ];\n\nconst otherSortOptions: {\n sort: \"newest\" | \"oldest\";\n label: string;\n}[] = [\n { sort: \"newest\", label: \"Newest\" },\n { sort: \"oldest\", label: \"Oldest\" },\n ];\n\nexport function CommunityThemesContent() {\n const [sort, setSort] = useQueryState(\n \"sort\",\n parseAsStringLiteral([\"popular\", \"newest\", \"oldest\"] as const).withDefault(\n \"popular\"\n )\n );\n const [filter, setFilter] = useQueryState(\n \"filter\",\n parseAsStringLiteral([\"all\", \"mine\", \"liked\"] as const).withDefault(\"all\")\n );\n const [tags, setTags] = useQueryState(\n \"tags\",\n parseAsArrayOf(parseAsString, \",\").withDefault([])\n );\n const [timeRange, setTimeRange] = useQueryState(\n \"t\",\n parseAsStringLiteral([\"weekly\", \"monthly\", \"all\"] as const).withDefault(\n \"all\"\n )\n );\n const [sheetOpen, setSheetOpen] = useState(false);\n const [previewThemeId, setPreviewThemeId] = useState(null);\n const { themeState, setThemeState } = useEditorStore();\n\n const handlePreview = useCallback(\n (theme: CommunityTheme) => {\n setThemeState({ ...themeState, styles: theme.styles });\n setPreviewThemeId(theme.id);\n },\n [themeState, setThemeState]\n );\n\n const handleFilterChange = useCallback(\n (newFilter: CommunityFilterOption) => {\n setFilter(newFilter);\n setSheetOpen(false);\n },\n [setFilter]\n );\n\n const handleTagToggle = useCallback(\n (tag: string) => {\n setTags((prev) => (prev.includes(tag) ? [] : [tag]));\n },\n [setTags]\n );\n\n const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =\n useCommunityThemes(sort, filter, tags, sort === \"popular\" ? timeRange : \"all\");\n\n const themes = data?.pages.flatMap((page) => page.themes) ?? [];\n const previewTheme = previewThemeId\n ? themes.find((t) => t.id === previewThemeId) ?? null\n : null;\n\n const sentinelRef = useRef(null);\n\n useEffect(() => {\n const sentinel = sentinelRef.current;\n if (!sentinel) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {\n fetchNextPage();\n }\n },\n { rootMargin: \"200px\" }\n );\n\n observer.observe(sentinel);\n return () => observer.disconnect();\n }, [hasNextPage, isFetchingNextPage, fetchNextPage]);\n\n const hasActiveFilters = filter !== \"all\" || tags.length > 0;\n\n const sidebarProps = {\n filter,\n selectedTags: tags,\n onFilterChange: handleFilterChange,\n onTagToggle: handleTagToggle,\n };\n\n return (\n
\n {/* Desktop sidebar */}\n \n\n {/* Main content */}\n
\n
\n
\n
\n {/* Mobile filter button */}\n \n \n \n \n Filters\n {hasActiveFilters && (\n \n {(filter !== \"all\" ? 1 : 0) + tags.length}\n \n )}\n \n \n \n \n Community Themes\n \n
\n \n
\n \n \n\n \n \n \n {sort === \"popular\"\n ? `Popular / ${popularOptions.find((o) => o.timeRange === timeRange)?.label ?? \"All Time\"}`\n : sort === \"newest\"\n ? \"Newest\"\n : \"Oldest\"}\n \n \n \n \n Popular\n {popularOptions.map((option) => {\n const isActive =\n sort === \"popular\" && timeRange === option.timeRange;\n return (\n {\n setSort(\"popular\");\n setTimeRange(option.timeRange);\n }}\n className=\"cursor-pointer justify-between\"\n >\n {option.label}\n {isActive && }\n \n );\n })}\n \n {otherSortOptions.map((option) => {\n const isActive = sort === option.sort;\n return (\n {\n setSort(option.sort);\n }}\n className=\"cursor-pointer justify-between\"\n >\n {option.label}\n {isActive && }\n \n );\n })}\n \n \n
\n\n \n \n \n \n How to publish\n \n \n \n
\n

Publish your theme

\n

\n After saving a theme, click the{\" \"}\n \n Publish\n {\" \"}\n button in the editor to share it.\n

\n
\n \n
\n

\n You can also manage all your saved themes from{\" \"}\n \n Settings\n \n .\n

\n
\n \n \n
\n\n {isLoading ? (\n
\n {Array.from({ length: 8 }).map((_, i) => (\n \n \n
\n \n \n
\n
\n ))}\n
\n ) : themes.length === 0 ? (\n
\n
\n \n
\n

\n {filter === \"mine\"\n ? \"No published themes\"\n : filter === \"liked\"\n ? \"No liked themes\"\n : \"No themes yet\"}\n

\n

\n {filter === \"mine\"\n ? \"You haven't published any themes yet. Save a theme in the editor, then publish it.\"\n : filter === \"liked\"\n ? \"You haven't liked any themes yet. Browse community themes and like your favorites.\"\n : \"Be the first to publish a theme to the community! Save a theme in the editor, then publish it from your settings.\"}\n

\n
\n ) : (\n <>\n
\n {themes.map((theme) => (\n \n ))}\n
\n\n
\n {isFetchingNextPage && (\n \n )}\n
\n \n )}\n
\n
\n {\n if (!open) setPreviewThemeId(null);\n }}\n onNavigate={handlePreview}\n />\n \n );\n}\n" }, { "path": "app/community/layout.tsx", "content": "import { Footer } from \"@/components/footer\";\nimport { Header } from \"@/components/header\";\n\nexport default function CommunityLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/community/page.tsx", "content": "import { Metadata } from \"next\";\nimport { CommunityThemesContent } from \"./components/community-themes-content\";\nimport { COMMUNITY_THEME_TAGS } from \"@/lib/constants\";\n\nexport const metadata: Metadata = {\n title: \"Community Themes - tweakcn\",\n description:\n \"Discover and explore beautiful shadcn/ui themes created by the community.\",\n keywords: [...COMMUNITY_THEME_TAGS, \"shadcn\", \"theme\", \"ui\"],\n openGraph: {\n title: \"Community Themes - tweakcn\",\n description:\n \"Discover and explore beautiful shadcn/ui themes created by the community.\",\n type: \"website\",\n },\n twitter: {\n card: \"summary_large_image\",\n title: \"Community Themes - tweakcn\",\n description:\n \"Discover and explore beautiful shadcn/ui themes created by the community.\",\n },\n};\n\nexport default function CommunityPage() {\n return ;\n}\n" }, { "path": "app/dashboard/layout.tsx", "content": "import { Footer } from \"@/components/footer\";\nimport { Header } from \"@/components/header\";\n\nexport default function DashboardLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/dashboard/loading.tsx", "content": "import { Loading } from \"@/components/loading\";\n\nexport default function DashboardLoading() {\n return ;\n}\n" }, { "path": "app/dashboard/page.tsx", "content": "import { redirect } from \"next/navigation\";\n\n// This page is being moved to settings/themes\nexport default function DashboardRedirect() {\n redirect(\"/settings/themes\");\n}\n" }, { "path": "app/editor/theme/[[...themeId]]/layout.tsx", "content": "import { Header } from \"@/components/header\";\n\nexport default function EditorLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
{children}
\n
\n );\n}\n" }, { "path": "app/editor/theme/[[...themeId]]/loading.tsx", "content": "import { Loading } from \"@/components/loading\";\n\nexport default function EditorLoading() {\n return ;\n}\n" }, { "path": "app/editor/theme/[[...themeId]]/page.tsx", "content": "import { getTheme } from \"@/actions/themes\";\nimport Editor from \"@/components/editor/editor\";\nimport { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n title: \"tweakcn — Theme Generator for shadcn/ui\",\n description:\n \"Easily customize and preview your shadcn/ui theme with tweakcn. Modify colors, fonts, and styles in real-time.\",\n};\n\nexport default async function EditorPage({ params }: { params: Promise<{ themeId: string[] }> }) {\n const { themeId } = await params;\n const themePromise = themeId?.length > 0 ? getTheme(themeId?.[0]) : Promise.resolve(null);\n\n return ;\n}\n" }, { "path": "app/figma/layout.tsx", "content": "import { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n title: \"Apply Your tweakcn Theme to Shadcraft Figma UI Kit | Professional Design System\",\n description:\n \"Transform your tweakcn themes into stunning Figma designs with Shadcraft's premium UI kit. 51 components, 44 blocks, dark mode support, and 1500+ icons. Professional Figma design system for shadcn/ui themes.\",\n keywords:\n \"figma ui kit, shadcn ui figma, tweakcn themes, figma design system, ui components figma, design tokens figma, figma plugin, shadcraft, figma templates, design system integration\",\n authors: [{ name: \"tweakcn Team\" }],\n openGraph: {\n title: \"Apply Your tweakcn Theme to Shadcraft Figma UI Kit\",\n description:\n \"Professional Figma UI kit with 51 components, 44 blocks, and seamless tweakcn theme integration. Get the ultimate design system for your projects.\",\n url: \"https://tweakcn.com/figma\",\n siteName: \"tweakcn\",\n images: [\n {\n url: \"https://tweakcn.com/figma-onboarding/shadcraft-preview.jpg\",\n width: 1200,\n height: 630,\n alt: \"Shadcraft Figma UI Kit Preview\",\n },\n ],\n type: \"website\",\n },\n twitter: {\n card: \"summary_large_image\",\n title: \"Apply Your tweakcn Theme to Shadcraft Figma UI Kit\",\n description:\n \"Professional Figma UI kit with 51 components, 44 blocks, and seamless tweakcn theme integration.\",\n images: [\"https://tweakcn.com/figma-onboarding/shadcraft-preview.jpg\"],\n },\n robots: \"index, follow\",\n alternates: {\n canonical: \"https://tweakcn.com/figma\",\n },\n};\n\nexport default function FigmaLayout({ children }: { children: React.ReactNode }) {\n return <>{children};\n}\n" }, { "path": "app/figma/page.tsx", "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { FigmaHeader } from \"@/components/figma-header\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport Logo from \"@/assets/logo.svg\";\nimport Shadcraft from \"@/assets/shadcraft.svg\";\nimport FigmaIcon from \"@/assets/figma.svg\";\nimport { Check, X, ArrowUpRight, Figma, Cable, Paintbrush } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { FIGMA_CONSTANTS, redirectToShadcraft } from \"@/lib/figma-constants\";\n\nexport default function FigmaPage() {\n const [isScrolled, setIsScrolled] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n const steps = FIGMA_CONSTANTS.steps.map((step, index) => ({\n ...step,\n icon:\n index === 0 ? (\n \n ) : index === 1 ? (\n \n ) : (\n \n ),\n }));\n\n const handleGetStarted = () => {\n redirectToShadcraft();\n };\n\n useEffect(() => {\n const handleScroll = () => {\n if (window.scrollY > 10) {\n setIsScrolled(true);\n } else {\n setIsScrolled(false);\n }\n };\n\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n // Structured data for SEO\n const structuredData = {\n \"@context\": \"https://schema.org\",\n \"@type\": \"Product\",\n name: \"Shadcraft Figma UI Kit - tweakcn Integration\",\n description:\n \"Professional Figma UI kit with 51 components, 44 blocks, dark mode support, and seamless tweakcn theme integration\",\n image: \"https://tweakcn.com/figma-onboarding/shadcraft-preview.jpg\",\n brand: {\n \"@type\": \"Brand\",\n name: \"Shadcraft\",\n },\n offers: {\n \"@type\": \"Offer\",\n price: \"89\",\n priceCurrency: \"USD\",\n priceValidUntil: \"2025-12-31\",\n availability: \"https://schema.org/InStock\",\n url: FIGMA_CONSTANTS.shadcraftUrl,\n seller: {\n \"@type\": \"Organization\",\n name: \"Shadcraft\",\n },\n },\n aggregateRating: {\n \"@type\": \"AggregateRating\",\n ratingValue: \"5\",\n reviewCount: \"100+\",\n },\n category: \"Design Software\",\n additionalProperty: [\n {\n \"@type\": \"PropertyValue\",\n name: \"Components\",\n value: \"51\",\n },\n {\n \"@type\": \"PropertyValue\",\n name: \"Blocks\",\n value: \"44\",\n },\n {\n \"@type\": \"PropertyValue\",\n name: \"Icons\",\n value: \"1500+\",\n },\n ],\n };\n\n return (\n <>\n {/* Structured Data */}\n \n\n
\n {/* Gradient Background using CSS variables */}\n
\n
\n\n {/* Header */}\n \n\n {/* Main Content */}\n
\n {/* Header Section */}\n
\n
\n
\n \n
tweakcn
\n
\n \n \n
\n \n
shadcraft
\n
\n \n
\n
\n\n
\n {/* Hero Section */}\n
\n

\n Apply your theme to the ultimate Figma UI kit\n

\n\n
\n \n \n \n \n
\n\n
\n

Trusted by top designers

\n \n {FIGMA_CONSTANTS.designers.map((designer, index) => (\n \n \n {designer.fallback}\n \n ))}\n
\n
\n \n\n {/* How it works */}\n
\n

How it works

\n
\n
\n {steps.map((step, index) => (\n \n
\n {step.icon}\n
\n

{step.step}

\n

{step.title}

\n

{step.description}

\n \n ))}\n
\n
\n
\n\n {/* Feature Description */}\n
\n
\n

\n Top quality Figma UI kit for professionals\n

\n

\n Shadcraft is packed with top quality components, true to the shadcn/ui ethos.\n

\n
\n\n {/* Demo UI Preview */}\n
\n \n
\n\n \n \n \n
\n\n {/* Pricing */}\n
\n

Pricing

\n\n \n

What you get with Shadcraft

\n
\n
\n
    \n {FIGMA_CONSTANTS.features.map((feature, index) => (\n
  • \n \n {feature}\n
    • \n ))}\n
\n
\n\n
\n
\n
\n $119\n
\n
\n
\n \n \n \n \n
\n
\n
\n \n

Prices in USD

\n
\n
\n \n
\n \n );\n}\n" }, { "path": "app/globals.css", "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"streamdown/styles.css\";\n@import \"./loaders.css\";\n\n@source \"../node_modules/streamdown/dist\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n\n --font-sans: var(--font-sans);\n --font-mono: var(--font-mono);\n --font-serif: var(--font-serif);\n\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n\n /* Computed Shadow Variants */\n --shadow-2xs: var(--shadow-2xs);\n --shadow-xs: var(--shadow-xs);\n --shadow-sm: var(--shadow-sm);\n --shadow: var(--shadow);\n --shadow-md: var(--shadow-md);\n --shadow-lg: var(--shadow-lg);\n --shadow-xl: var(--shadow-xl);\n --shadow-2xl: var(--shadow-2xl);\n\n --tracking-tighter: calc(var(--letter-spacing) - 0.05em);\n --tracking-tight: calc(var(--letter-spacing) - 0.025em);\n --tracking-normal: var(--letter-spacing);\n --tracking-wide: calc(var(--letter-spacing) + 0.025em);\n --tracking-wider: calc(var(--letter-spacing) + 0.05em);\n --tracking-widest: calc(var(--letter-spacing) + 0.1em);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n* {\n color-scheme: light dark;\n border-color: var(--color-border);\n}\n\nbody {\n background-color: var(--color-background);\n color: var(--color-foreground);\n -webkit-font-smoothing: antialiased;\n letter-spacing: var(--letter-spacing);\n}\n\n@layer base {\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n\n/* View Transition Wave Effect */\n::view-transition-old(root),\n::view-transition-new(root) {\n animation: none;\n mix-blend-mode: normal;\n}\n\n::view-transition-old(root) {\n /* Ensure the outgoing view (old theme) is beneath */\n z-index: 0;\n}\n\n::view-transition-new(root) {\n /* Ensure the incoming view (new theme) is always on top */\n z-index: 1;\n}\n\n@keyframes reveal {\n from {\n /* Use CSS variables for the origin, defaulting to center if not set */\n clip-path: circle(0% at var(--x, 50%) var(--y, 50%));\n opacity: 0.7;\n }\n to {\n /* Use CSS variables for the origin, defaulting to center if not set */\n clip-path: circle(150% at var(--x, 50%) var(--y, 50%));\n opacity: 1;\n }\n}\n\n::view-transition-new(root) {\n /* Apply the reveal animation */\n animation: reveal 0.4s ease-in-out forwards;\n}\n\n/* Mention styles */\n.mention {\n @apply bg-primary/10 rounded-md px-1 font-mono text-sm font-semibold;\n}\n\n.code-inline {\n @apply bg-muted text-muted-foreground px-1.5 py-0.5 font-mono text-xs font-medium;\n}\n\n@keyframes text {\n from {\n background-position: 0% center;\n }\n to {\n background-position: -200% center;\n }\n}\n\n.animate-text {\n animation: text 3s linear infinite;\n}\n\n@utility scrollbar-thin {\n scrollbar-width: thin;\n scrollbar-color: var(--color-border) transparent;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n}\n\n@utility scrollbar-gutter-stable {\n scrollbar-gutter: stable;\n}\n\n@utility scrollbar-gutter-both {\n scrollbar-gutter: stable both-edges;\n}\n" }, { "path": "app/layout.tsx", "content": "import { AuthDialogWrapper } from \"@/components/auth-dialog-wrapper\";\nimport { DynamicFontLoader } from \"@/components/dynamic-font-loader\";\nimport { GetProDialogWrapper } from \"@/components/get-pro-dialog-wrapper\";\nimport { PostHogInit } from \"@/components/posthog-init\";\nimport { ThemeProvider } from \"@/components/theme-provider\";\nimport { ThemeScript } from \"@/components/theme-script\";\nimport { Toaster } from \"@/components/ui/toaster\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { ChatProvider } from \"@/hooks/use-chat-context\";\nimport { QueryProvider } from \"@/lib/query-client\";\nimport type { Metadata, Viewport } from \"next\";\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\nimport { Suspense } from \"react\";\nimport \"./globals.css\";\n\nexport const metadata: Metadata = {\n title: \"Beautiful themes for shadcn/ui — tweakcn | Theme Editor & Generator\",\n description:\n \"Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom styles. Modify properties, preview changes, and get the code in real time.\",\n keywords:\n \"theme editor, theme generator, shadcn, ui, components, react, tailwind, button, editor, visual editor, component editor, web development, frontend, design system, UI components, React components, Tailwind CSS, shadcn/ui themes\",\n authors: [{ name: \"Sahaj Jain\" }],\n openGraph: {\n title: \"Beautiful themes for shadcn/ui — tweakcn | Theme Editor & Generator\",\n description:\n \"Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom styles. Modify properties, preview changes, and get the code in real time.\",\n url: \"https://tweakcn.com/\",\n siteName: \"tweakcn\",\n images: [\n {\n url: \"https://tweakcn.com/og-image.v050725.png\",\n width: 1200,\n height: 630,\n },\n ],\n locale: \"en_US\",\n type: \"website\",\n },\n twitter: {\n card: \"summary_large_image\",\n title: \"Beautiful themes for shadcn/ui — tweakcn | Theme Editor & Generator\",\n description:\n \"Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom styles. Modify properties, preview changes, and get the code in real time.\",\n images: [\"https://tweakcn.com/og-image.v050725.png\"],\n },\n robots: \"index, follow\",\n};\n\nexport const viewport: Viewport = {\n width: \"device-width\",\n initialScale: 1.0,\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n \n \n \n \n \n\n {/* PRELOAD FONTS USED BY BUILT-IN THEMES */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {children}\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "app/loaders.css", "content": "/* keyframes for loaders */\n@theme {\n @keyframes typing {\n 0%,\n 100% {\n transform: translateY(0);\n opacity: 0.5;\n }\n 50% {\n transform: translateY(-2px);\n opacity: 1;\n }\n }\n\n @keyframes loading-dots {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n @keyframes wave {\n 0%,\n 100% {\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.6);\n }\n }\n\n @keyframes blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n @keyframes text-blink {\n 0%,\n 100% {\n color: var(--primary);\n }\n 50% {\n color: var(--muted-foreground);\n }\n }\n\n @keyframes bounce-dots {\n 0%,\n 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.2);\n opacity: 1;\n }\n }\n\n @keyframes thin-pulse {\n 0%,\n 100% {\n transform: scale(0.95);\n opacity: 0.8;\n }\n 50% {\n transform: scale(1.05);\n opacity: 0.4;\n }\n }\n\n @keyframes pulse-dot {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 0.8;\n }\n 50% {\n transform: scale(1.5);\n opacity: 1;\n }\n }\n\n @keyframes shimmer-text {\n 0% {\n background-position: 150% center;\n }\n 100% {\n background-position: -150% center;\n }\n }\n\n @keyframes wave-bars {\n 0%,\n 100% {\n transform: scaleY(1);\n opacity: 0.5;\n }\n 50% {\n transform: scaleY(0.6);\n opacity: 1;\n }\n }\n\n @keyframes shimmer {\n 0% {\n background-position: 200% 50%;\n }\n 100% {\n background-position: -200% 50%;\n }\n }\n\n @keyframes spinner-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n" }, { "path": "app/not-found.tsx", "content": "\"use client\";\n\nimport { ThemePresetButtons } from \"@/components/home/theme-preset-buttons\";\nimport { useTheme } from \"@/components/theme-provider\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { defaultPresets } from \"@/utils/theme-presets\";\nimport { Sun, Moon } from \"lucide-react\";\nimport Link from \"next/link\";\n\nexport default function NotFound() {\n const { theme, toggleTheme } = useTheme();\n const { themeState, applyThemePreset } = useEditorStore();\n const mode = themeState.currentMode;\n const presetNames = Object.keys(defaultPresets);\n return (\n
\n
\n \n \n toggleTheme({ x: e.clientX, y: e.clientY })}\n >\n {theme === \"light\" ? : }\n \n \n \n

Toggle theme

\n \n \n
\n\n \n 404\n \n

Oops, Lost in Space?

\n

\n Go home or try switching the theme!\n

\n\n \n Back to Home\n \n\n
\n \n
\n
\n );\n}\n" }, { "path": "app/oauth/authorize/page.tsx", "content": "\"use client\";\n\nimport Github from \"@/assets/github.svg\";\nimport Google from \"@/assets/google.svg\";\nimport { Button } from \"@/components/ui/button\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { Loader2 } from \"lucide-react\";\nimport { useSearchParams } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\n\nconst SCOPE_LABELS: Record = {\n \"themes:read\": \"Read your saved themes\",\n \"profile:read\": \"Read your profile (name, email)\",\n};\n\nexport default function OAuthAuthorizePage() {\n const searchParams = useSearchParams();\n const { data: session, isPending } = authClient.useSession();\n\n const [loadingProvider, setLoadingProvider] = useState(null);\n const [error, setError] = useState(null);\n const [appName, setAppName] = useState(null);\n const [redirecting, setRedirecting] = useState(false);\n\n const clientId = searchParams.get(\"client_id\");\n const scopes =\n searchParams\n .get(\"scope\")\n ?.split(/[\\s,]+/)\n .filter(Boolean) ?? [];\n\n useEffect(() => {\n if (!clientId) {\n setError(\"Missing client_id parameter\");\n return;\n }\n\n fetch(`/api/oauth/app-info?client_id=${encodeURIComponent(clientId)}`)\n .then((res) => res.json())\n .then((data) => {\n if (data.error) {\n setError(data.error_description ?? \"Invalid application\");\n } else {\n setAppName(data.name);\n }\n })\n .catch(() => setError(\"Failed to validate application\"));\n }, [clientId]);\n\n useEffect(() => {\n if (!session || redirecting || error) return;\n\n setRedirecting(true);\n const apiUrl = `/api/oauth/authorize?${searchParams.toString()}`;\n window.location.href = apiUrl;\n }, [session, searchParams, redirecting, error]);\n\n const callbackURL = `/oauth/authorize?${searchParams.toString()}`;\n\n const handleSignIn = async (provider: \"google\" | \"github\") => {\n setLoadingProvider(provider);\n try {\n await authClient.signIn.social({ provider, callbackURL });\n } catch {\n setLoadingProvider(null);\n }\n };\n\n const isLoading = loadingProvider !== null;\n\n if (error) {\n return (\n
\n
\n
\n {error}\n
\n
\n
\n );\n }\n\n if (isPending || redirecting || !appName) {\n return (\n
\n \n
\n );\n }\n\n return (\n
\n
\n
\n

Sign in to

\n

\n {appName}\n

\n
\n\n
\n handleSignIn(\"google\")}\n className=\"h-10 w-full justify-center gap-2\"\n disabled={isLoading}\n >\n \n Continue with Google\n {loadingProvider === \"google\" && }\n \n\n handleSignIn(\"github\")}\n className=\"h-10 w-full justify-center gap-2\"\n disabled={isLoading}\n >\n \n Continue with GitHub\n {loadingProvider === \"github\" && }\n \n
\n\n {scopes.length > 0 && (\n
\n

\n Permissions requested\n

\n
    \n {scopes.map((scope) => (\n
  • {SCOPE_LABELS[scope] ?? scope}
    • \n ))}\n
\n
\n )}\n\n

\n Authorizing will grant {appName} access to the permissions above.\n

\n
\n
\n );\n}\n" }, { "path": "app/page.tsx", "content": "\"use client\";\n\nimport { Footer } from \"@/components/footer\";\nimport { AIGenerationCTA } from \"@/components/home/ai-generation-cta\";\nimport { CTA } from \"@/components/home/cta\";\nimport { FAQ } from \"@/components/home/faq\";\nimport { Features } from \"@/components/home/features\";\nimport { Header } from \"@/components/home/header\";\nimport { Hero } from \"@/components/home/hero\";\nimport { HowItWorks } from \"@/components/home/how-it-works\";\nimport { Testimonials } from \"@/components/home/testimonials\";\n// import { ThemePresetSelector } from \"@/components/home/theme-preset-selector\";\nimport { useEffect, useState } from \"react\";\n\nexport default function Home() {\n const [isScrolled, setIsScrolled] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n useEffect(() => {\n const handleScroll = () => {\n if (window.scrollY > 10) {\n setIsScrolled(true);\n } else {\n setIsScrolled(false);\n }\n };\n\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n return (\n
\n \n
\n \n {/* */}\n \n \n \n \n \n \n
\n
\n
\n );\n}\n" }, { "path": "app/pricing/components/checkout-button.tsx", "content": "\"use client\";\n\nimport { createCheckout } from \"@/actions/checkout\";\nimport { Button } from \"@/components/ui/button\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { SUBSCRIPTION_STATUS_QUERY_KEY, useSubscription } from \"@/hooks/use-subscription\";\nimport { toast } from \"@/hooks/use-toast\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { cn } from \"@/lib/utils\";\nimport { useAuthStore } from \"@/store/auth-store\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Gem, Loader } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { ComponentProps, useTransition } from \"react\";\n\ninterface CheckoutButtonProps extends ComponentProps {}\n\nexport function CheckoutButton({ disabled, className, ...props }: CheckoutButtonProps) {\n const router = useRouter();\n const [isPending, startTransition] = useTransition();\n const { data: session } = authClient.useSession();\n const { openAuthDialog } = useAuthStore();\n\n usePostLoginAction(\"CHECKOUT\", () => {\n handleOpenCheckout();\n });\n\n const queryClient = useQueryClient();\n const { subscriptionStatus } = useSubscription();\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n\n const handleOpenCheckout = async () => {\n if (!session) {\n openAuthDialog(\"signup\", \"CHECKOUT\");\n return;\n }\n\n if (subscriptionStatus?.isSubscribed) {\n router.push(\"/settings\");\n return;\n }\n\n startTransition(async () => {\n const res = await createCheckout();\n\n if (\"error\" in res || !res.url) {\n toast({\n title: \"Error\",\n description: res.error || \"Failed to create checkout\",\n variant: \"destructive\",\n });\n return;\n }\n\n queryClient.invalidateQueries({ queryKey: [SUBSCRIPTION_STATUS_QUERY_KEY] });\n router.push(res.url);\n });\n };\n\n return (\n \n {isPending ? (\n
\n \n Redirecting to Checkout\n
\n ) : isPro ? (\n \n \n {`You're Subscribed to Pro`}\n \n ) : (\n \"Upgrade to Pro\"\n )}\n \n );\n}\n" }, { "path": "app/pricing/layout.tsx", "content": "import { Footer } from \"@/components/footer\";\nimport { Header } from \"@/components/header\";\n\nexport default function PricingLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/pricing/page.tsx", "content": "import { NoiseEffect } from \"@/components/effects/noise-effect\";\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { AI_REQUEST_FREE_TIER_LIMIT } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { FREE_SUB_FEATURES, PRO_SUB_FEATURES } from \"@/utils/subscription\";\nimport { Calendar, Check, Circle, Mail } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { CheckoutButton } from \"./components/checkout-button\";\nimport { Metadata } from \"next\";\nimport { Testimonials } from \"@/components/home/testimonials\";\n\nexport const metadata: Metadata = {\n title: \"Pricing — tweakcn\",\n robots: \"index, follow\",\n};\n\nexport default function PricingPage() {\n return (\n
\n {/* Background decoration */}\n
\n
\n
\n
\n\n
\n {/* Header Section */}\n
\n

\n Choose your perfect plan\n

\n

\n Start building beautiful themes for free. Upgrade to Pro when you're ready.\n

\n
\n\n {/* Pricing Cards */}\n
\n {/* Free Plan */}\n \n \n
\n Free\n
\n
\n $0\n /month\n
\n

No credit card required

\n \n \n
    \n {FREE_SUB_FEATURES.map((feature, index) => (\n
  • \n
    \n {feature.status === \"done\" ? (\n \n ) : (\n \n )}\n
    \n {feature.description}\n
    • \n ))}\n
\n \n \n \n Get Started Free\n \n \n \n\n {/* Pro Plan */}\n \n
\n \n \n\n
\n Pro\n
\n
\n $8\n /month\n
\n

Billed monthly • Cancel anytime

\n \n \n

\n Everything in Free, plus:\n

\n
    \n {PRO_SUB_FEATURES.map((feature, index) => (\n
  • \n \n {feature.status === \"done\" ? (\n \n ) : (\n \n )}\n
\n \n {feature.description}\n \n \n ))}\n \n \n \n \n \n
\n \n \n\n
\n \n
\n\n {/* FAQs Section */}\n
\n
\n

\n FAQs\n

\n

\n Here's everything you may want to know. For any other info, just{\" \"}\n \n reach us\n \n .\n

\n
\n\n \n {PRICING_FAQS.map((faq, i) => (\n \n \n {faq.question}\n \n {faq.answer}\n \n ))}\n \n
\n {/* Bottom Section */}\n
\n
\n

\n Need something custom or have questions?\n

\n \n \n \n
\n
\n
\n
\n );\n}\n\nconst PRICING_FAQS = [\n {\n question: \"What do I get when I upgrade to Pro?\",\n answer: `You get unlimited AI-generated themes, AI theme generation from images, unlimited saved themes, priority support, and more features coming soon. We're developing new features for Pro users!`,\n },\n {\n question: \"Can I still use tweakcn for free?\",\n answer: `Yes! tweakcn provides a comprehensive free tier that includes theme customization, access to preset themes, and up to ${AI_REQUEST_FREE_TIER_LIMIT} free AI-generated themes. You can build and export themes without any payment required.`,\n },\n {\n question: \"Does tweakcn offer a free trial for the Pro plan?\",\n answer: `No, there are no free trials. However, you get access to generate up to ${AI_REQUEST_FREE_TIER_LIMIT} themes with AI, plus unlimited manual theme customization using the free visual editor.`,\n },\n {\n question: \"What happens to saved themes when downgrading to free?\",\n answer:\n \"All your created themes remain yours forever. When you downgrade from Pro, you keep full access to all themes you've built, but you'll be limited to the free tier's AI generation quota and features.\",\n },\n {\n question: \"Can I cancel or switch at any time?\",\n answer:\n \"Yes! You have complete control over your subscription. Cancel anytime through your account settings, and you'll retain Pro access until your current billing period ends before automatically switching to the free tier.\",\n },\n {\n question: \"How secure is the payment?\",\n answer:\n \"We use Polar for secure payment processing, which handles all transactions with industry-standard encryption. Your payment details are never stored on our servers.\",\n },\n];\n" }, { "path": "app/r/themes/[id]/route.ts", "content": "import { NextResponse } from \"next/server\";\n\nimport { getTheme } from \"@/actions/themes\";\nimport { generateThemeRegistryItemFromStyles } from \"@/utils/registry/themes\";\nimport { registryItemSchema } from \"shadcn/schema\";\nimport { getBuiltInThemeStyles } from \"@/utils/theme-preset-helper\";\nimport { ThemeStyles } from \"@/types/theme\";\n\nexport const dynamic = \"force-static\";\n\nexport async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {\n const { id } = await params;\n\n try {\n // First, check if this is a built-in theme\n let themeName: string;\n let themeStyles: ThemeStyles;\n\n const builtInTheme = getBuiltInThemeStyles(id.replace(/\\.json$/, \"\"));\n if (builtInTheme) {\n themeName = builtInTheme.name;\n themeStyles = builtInTheme.styles;\n } else {\n // Fall back to database lookup for user-saved themes\n const theme = await getTheme(id);\n themeName = theme.name;\n themeStyles = theme.styles;\n }\n\n const generatedRegistryItem = generateThemeRegistryItemFromStyles(themeName, themeStyles);\n\n // Validate the generated registry item against the official shadcn registry item schema\n // https://ui.shadcn.com/docs/registry/registry-item-json\n const parsedRegistryItem = registryItemSchema.safeParse(generatedRegistryItem);\n if (!parsedRegistryItem.success) {\n console.error(\n \"Could not parse the registry item from the database:\",\n parsedRegistryItem.error.format()\n );\n\n return new NextResponse(\"Unexpected registry item format.\", {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n\n // If the parsing is successful, we can safely access the data property\n // and return it as the registry item json being sure it's in a correct format.\n const registryItem = parsedRegistryItem.data;\n return new NextResponse(JSON.stringify(registryItem), {\n status: 200,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (e) {\n console.error(\"Error fetching the theme registry item:\", e);\n\n return new NextResponse(\"Failed to fetch the theme registry item.\", {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n}\n" }, { "path": "app/r/v0/[id]/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport { getTheme } from \"@/actions/themes\";\nimport { generateV0RegistryPayload } from \"@/utils/registry/v0\";\nimport { getBuiltInThemeStyles } from \"@/utils/theme-preset-helper\";\n\nexport const dynamic = \"force-static\";\n\nexport async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {\n const { id } = await params;\n\n try {\n // First, check if this is a built-in theme\n const builtInTheme = getBuiltInThemeStyles(id.replace(/\\.json$/, \"\"));\n if (builtInTheme) {\n const payload = generateV0RegistryPayload(builtInTheme.name, builtInTheme.styles);\n return new NextResponse(JSON.stringify(payload), {\n status: 200,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n }\n\n // Fall back to database lookup for user-saved themes\n const theme = await getTheme(id);\n const payload = generateV0RegistryPayload(theme.name, theme.styles);\n\n return new NextResponse(JSON.stringify(payload), {\n status: 200,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (error) {\n console.error(\"Error generating v0 registry payload:\", error);\n\n const isNotFound =\n error instanceof Error &&\n (error.name === \"ThemeNotFoundError\" || error.message.includes(\"not found\"));\n\n return new NextResponse(isNotFound ? \"Theme not found\" : \"Failed to generate v0 payload\", {\n status: isNotFound ? 404 : 500,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n }\n}\n" }, { "path": "app/settings/account/components/delete-account-section.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { usePostHog } from \"posthog-js/react\";\nimport { AlertTriangle, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n AlertDialog,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogCancel,\n} from \"@/components/ui/alert-dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { toast } from \"@/hooks/use-toast\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { deleteAccount } from \"@/actions/account\";\n\nconst CONFIRMATION_TEXT = \"DELETE\";\n\nexport function DeleteAccountSection() {\n const [open, setOpen] = useState(false);\n const [confirmText, setConfirmText] = useState(\"\");\n const [isDeleting, setIsDeleting] = useState(false);\n const router = useRouter();\n const posthog = usePostHog();\n\n const isConfirmed = confirmText === CONFIRMATION_TEXT;\n\n const handleDelete = async () => {\n if (!isConfirmed) return;\n\n setIsDeleting(true);\n const result = await deleteAccount();\n\n if (result.success) {\n posthog.reset();\n await authClient.signOut();\n router.push(\"/\");\n } else {\n toast({\n title: \"Failed to delete account\",\n description: result.error.message,\n variant: \"destructive\",\n });\n setIsDeleting(false);\n }\n };\n\n return (\n <>\n
\n

Danger Zone

\n

\n Permanently delete your account and all associated data. This action\n cannot be undone.\n

\n setOpen(true)}\n >\n Delete Account\n \n
\n\n {\n if (!isDeleting) {\n setOpen(v);\n if (!v) setConfirmText(\"\");\n }\n }}>\n \n \n \n \n Delete your account\n \n \n
\n

\n This will permanently delete your account and all associated\n data, including:\n

\n
    \n
  • All saved themes
    • \n
  • Community published themes
    • \n
  • AI usage history
    • \n
  • Active subscription (if any)
    • \n
\n

This action cannot be undone.

\n
\n \n Type {CONFIRMATION_TEXT} to\n confirm\n \n setConfirmText(e.target.value)}\n placeholder={CONFIRMATION_TEXT}\n disabled={isDeleting}\n autoComplete=\"off\"\n />\n
\n
\n \n \n \n Cancel\n \n {isDeleting && }\n Delete Account\n \n \n \n \n \n );\n}\n" }, { "path": "app/settings/account/page.tsx", "content": "import { auth } from \"@/lib/auth\";\nimport { headers } from \"next/headers\";\nimport { redirect } from \"next/navigation\";\nimport { SettingsHeader } from \"../components/settings-header\";\nimport { DeleteAccountSection } from \"./components/delete-account-section\";\n\nexport default async function AccountPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) redirect(\"/editor/theme\");\n\n return (\n
\n \n \n
\n );\n}\n" }, { "path": "app/settings/components/customer-portal-link.tsx", "content": "import { auth } from \"@/lib/auth\";\nimport { polar } from \"@/lib/polar\";\nimport { cn } from \"@/lib/utils\";\nimport { headers } from \"next/headers\";\nimport Link from \"next/link\";\n\nexport async function CustomerPortalLink() {\n const session = await auth.api.getSession({ headers: await headers() });\n\n if (!session?.user.id) {\n return null;\n }\n\n const result = await polar.customerSessions.create({\n externalCustomerId: session?.user.id,\n });\n\n const customerPortalLink = result.customerPortalUrl;\n\n return (\n \n Manage Subscription\n \n );\n}\n" }, { "path": "app/settings/components/settings-header.tsx", "content": "export function SettingsHeader({ title, description }: { title: string; description?: string }) {\n return (\n
\n

{title}

\n {description &&

{description}

}\n
\n );\n}\n" }, { "path": "app/settings/components/settings-sidebar.tsx", "content": "\"use client\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { cn } from \"@/lib/utils\";\nimport { ChartNoAxesCombined, CreditCard, ExternalLink, LucideIcon, Palette, UserCog } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { useMemo } from \"react\";\n\ntype NavItem =\n | {\n type: \"link\";\n href: string;\n label: string;\n icon?: LucideIcon;\n isExternal?: boolean;\n }\n | {\n type: \"separator\";\n id: string;\n };\n\nconst BASE_NAV_ITEMS: NavItem[] = [\n { type: \"link\", href: \"/settings/themes\", label: \"Themes\", icon: Palette },\n { type: \"link\", href: \"/settings/usage\", label: \"AI Usage\", icon: ChartNoAxesCombined },\n { type: \"separator\", id: \"account-separator\" },\n { type: \"link\", href: \"/settings/account\", label: \"Account\", icon: UserCog },\n];\n\nconst getSubscriptionNavItems = (): NavItem[] => [\n { type: \"separator\", id: \"subscription-separator\" },\n {\n type: \"link\",\n href: \"/settings/portal\",\n label: \"Manage Subscription\",\n icon: CreditCard,\n isExternal: true,\n },\n];\n\nexport function SettingsSidebar() {\n const pathname = usePathname();\n const { subscriptionStatus } = useSubscription();\n\n const navItems = useMemo(() => {\n if (subscriptionStatus?.isSubscribed) {\n return [...BASE_NAV_ITEMS, ...getSubscriptionNavItems()];\n }\n return BASE_NAV_ITEMS;\n }, [subscriptionStatus?.isSubscribed]);\n\n return (\n \n );\n}\n" }, { "path": "app/settings/components/theme-card.tsx", "content": "\"use client\";\n\nimport { Theme } from \"@/types/theme\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { TagSelector } from \"@/components/tag-selector\";\nimport {\n MoreVertical,\n Trash2,\n Edit,\n Loader2,\n Zap,\n ExternalLink,\n Copy,\n Globe,\n GlobeLock,\n Tag,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { useState } from \"react\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { useDeleteTheme } from \"@/hooks/themes\";\nimport {\n usePublishTheme,\n useUnpublishTheme,\n useUpdateCommunityThemeTags,\n} from \"@/hooks/themes\";\nimport Link from \"next/link\";\nimport { toast } from \"@/components/ui/use-toast\";\nimport { ThemePreview } from \"@/components/theme-preview\";\n\ninterface ThemeCardProps {\n theme: Theme;\n isPublished?: boolean;\n className?: string;\n}\n\nexport function ThemeCard({\n theme,\n isPublished = false,\n className,\n}: ThemeCardProps) {\n const { themeState, setThemeState } = useEditorStore();\n const deleteThemeMutation = useDeleteTheme();\n const publishMutation = usePublishTheme();\n const unpublishMutation = useUnpublishTheme();\n const updateTagsMutation = useUpdateCommunityThemeTags();\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const [showPublishDialog, setShowPublishDialog] = useState(false);\n const [showEditTagsDialog, setShowEditTagsDialog] = useState(false);\n const [selectedTags, setSelectedTags] = useState([]);\n const mode = themeState.currentMode;\n\n const handleDelete = () => {\n setShowDeleteDialog(true);\n };\n\n const handleConfirmDelete = () => {\n deleteThemeMutation.mutate(theme.id, {\n onSuccess: () => {\n setShowDeleteDialog(false);\n },\n });\n };\n\n const handleQuickApply = () => {\n setThemeState({\n ...themeState,\n styles: theme.styles,\n });\n };\n\n const handleShare = () => {\n const url = `https://tweakcn.com/themes/${theme.id}`;\n navigator.clipboard.writeText(url);\n toast({\n title: \"Theme URL copied to clipboard!\",\n });\n };\n\n const handlePublish = () => {\n setShowPublishDialog(true);\n };\n\n const handleConfirmPublish = () => {\n publishMutation.mutate(\n { themeId: theme.id, tags: selectedTags },\n {\n onSuccess: () => {\n setShowPublishDialog(false);\n setSelectedTags([]);\n },\n }\n );\n };\n\n const handleEditTags = () => {\n setSelectedTags([]);\n setShowEditTagsDialog(true);\n };\n\n const handleConfirmEditTags = () => {\n updateTagsMutation.mutate(\n { themeId: theme.id, tags: selectedTags },\n {\n onSuccess: () => {\n setShowEditTagsDialog(false);\n setSelectedTags([]);\n },\n }\n );\n };\n\n const handleUnpublish = () => {\n unpublishMutation.mutate(theme.id);\n };\n\n return (\n \n
\n \n
\n\n
\n
\n
\n
\n

\n {theme.name}\n

\n {isPublished && (\n \n Published\n \n )}\n
\n

\n {new Date(theme.createdAt).toLocaleDateString(\"en-US\", {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n })}\n

\n
\n
\n \n \n
\n \n
\n \n \n \n \n Quick Apply\n \n \n \n \n Open Theme\n \n \n \n \n \n Edit Theme\n \n \n \n \n Copy URL\n \n \n {isPublished ? (\n <>\n \n \n Edit Tags\n \n \n {unpublishMutation.isPending ? (\n \n ) : (\n \n )}\n Unpublish from Community\n \n \n ) : (\n \n {publishMutation.isPending ? (\n \n ) : (\n \n )}\n Publish to Community\n \n )}\n \n \n {deleteThemeMutation.isPending ? (\n \n ) : (\n \n )}\n Delete Theme\n \n \n \n
\n\n \n \n \n \n Are you sure you want to delete your {theme.name} theme?\n \n \n This action cannot be undone. This will permanently delete your\n theme.\n {isPublished &&\n \" It will also be removed from the community.\"}\n \n \n \n Cancel\n \n {deleteThemeMutation.isPending ? (\n <>\n \n Deleting...\n \n ) : (\n \"Delete\"\n )}\n \n \n \n \n\n \n \n \n \n Publish "{theme.name}" to the community?\n \n \n Your theme will be publicly visible on the community page. You can\n unpublish it at any time.\n \n \n \n \n setShowPublishDialog(false)}\n >\n Cancel\n \n \n {publishMutation.isPending ? (\n <>\n \n Publishing...\n \n ) : (\n \"Publish\"\n )}\n \n \n \n \n\n \n \n \n Edit Tags\n \n Update the tags for "{theme.name}".\n \n \n \n \n setShowEditTagsDialog(false)}\n >\n Cancel\n \n \n {updateTagsMutation.isPending ? (\n <>\n \n Saving...\n \n ) : (\n \"Save Tags\"\n )}\n \n \n \n \n \n );\n}\n" }, { "path": "app/settings/components/themes-list.tsx", "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport type { Theme } from \"@/types/theme\";\nimport { ArrowUpDown, Search } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { ThemeCard } from \"./theme-card\";\n\ninterface ThemeWithPublished extends Theme {\n isPublished: boolean;\n}\n\ninterface ThemesListProps {\n themes: ThemeWithPublished[];\n}\n\nexport function ThemesList({ themes }: ThemesListProps) {\n const [filteredThemes, setFilteredThemes] =\n useState(themes);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [sortOption, setSortOption] = useState(\"newest\");\n const isMobile = useIsMobile();\n\n useEffect(() => {\n const filtered = themes.filter((theme) =>\n theme.name?.toLowerCase().includes(searchTerm.toLowerCase())\n );\n\n // Sort based on selected option\n const sorted = [...filtered].sort((a, b) => {\n switch (sortOption) {\n case \"newest\":\n return (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0);\n case \"oldest\":\n return (a.createdAt?.getTime() || 0) - (b.createdAt?.getTime() || 0);\n case \"name\":\n return (a.name || \"\").localeCompare(b.name || \"\");\n default:\n return 0;\n }\n });\n\n setFilteredThemes(sorted);\n }, [themes, searchTerm, sortOption]);\n\n return (\n
\n
\n
\n \n setSearchTerm(e.target.value)}\n />\n
\n \n
\n\n \n {filteredThemes.length === 0 && searchTerm ? (\n
\n \n

No themes found

\n

\n No themes match your search term "{searchTerm}".\n

\n
\n ) : (\n
\n {filteredThemes.map((theme) => (\n \n ))}\n
\n )}\n \n
\n );\n}\n" }, { "path": "app/settings/components/usage-stats.tsx", "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\";\nimport { BarChart, Bar, XAxis, YAxis } from \"recharts\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { getMyUsageStats, getMyUsageChartData } from \"@/actions/ai-usage\";\n\ntype Timeframe = \"1d\" | \"7d\" | \"30d\";\n\ninterface UsageStats {\n requests: number;\n timeframe: Timeframe;\n}\n\ninterface ChartDataPoint {\n daysSinceEpoch?: number;\n hoursSinceEpoch?: number;\n date: string;\n totalRequests: number;\n}\n\nconst timeframeLabels = {\n \"1d\": \"Last 24 hours\",\n \"7d\": \"Last 7 days\",\n \"30d\": \"Last 30 days\",\n};\n\nconst chartConfig = {\n totalRequests: {\n label: \"Requests\",\n color: \"var(--primary)\",\n },\n};\n\nexport function UsageStats() {\n const [timeframe, setTimeframe] = useState(\"7d\");\n const [stats, setStats] = useState(null);\n const [chartData, setChartData] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n try {\n const [statsData, chartDataResponse] = await Promise.all([\n getMyUsageStats(timeframe),\n getMyUsageChartData(timeframe),\n ]);\n setStats(statsData);\n setChartData(chartDataResponse);\n } catch (error) {\n console.error(\"Error fetching usage data:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n }, [timeframe]);\n\n const formatDate = (dateString: string, timeframe: Timeframe) => {\n const date = new Date(dateString);\n if (timeframe === \"1d\") {\n return date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n }\n return date.toLocaleDateString([], { month: \"short\", day: \"numeric\" });\n };\n\n return (\n
\n
\n \n
\n\n \n \n {loading ? (\n
\n \n \n
\n ) : (\n
\n
{stats?.requests || 0}
\n

\n requests in {timeframeLabels[timeframe].toLowerCase()}\n

\n
\n )}\n \n \n {loading ? (\n
\n
\n \n \n \n \n
\n \n
\n ) : chartData.length > 0 ? (\n \n \n formatDate(value, timeframe)}\n axisLine={false}\n tickLine={false}\n className=\"text-xs\"\n />\n \n }\n labelFormatter={(value) => formatDate(value, timeframe)}\n />\n \n \n \n ) : (\n
\n
\n

No usage data available

\n

\n Make some AI requests to see your usage statistics\n

\n
\n
\n )}\n \n \n
\n );\n}\n" }, { "path": "app/settings/components/user-info.tsx", "content": "\"use client\";\n\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { Gem } from \"lucide-react\";\n\nexport function UserInfo() {\n const { data: session } = authClient.useSession();\n const { subscriptionStatus } = useSubscription();\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n\n return (\n
\n

\n {session?.user.name}{\" \"}\n {isPro && (\n \n Pro\n \n )}\n

\n

{session?.user.email}

\n
\n );\n}\n" }, { "path": "app/settings/layout.tsx", "content": "import { Header } from \"@/components/header\";\nimport { ThemeToggle } from \"@/components/theme-toggle\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowLeft } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { SettingsSidebar } from \"./components/settings-sidebar\";\n\nexport default async function SettingsLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n\n
\n \n\n \n
\n\n
\n \n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/settings/page.tsx", "content": "import { auth } from \"@/lib/auth\";\nimport { headers } from \"next/headers\";\nimport { redirect } from \"next/navigation\";\n\nexport default async function SettingsIndex() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) redirect(\"/editor/theme\");\n\n redirect(\"/settings/themes\");\n}\n" }, { "path": "app/settings/portal/route.ts", "content": "import { polar } from \"@/lib/polar\";\nimport { getCurrentUserId } from \"@/lib/shared\";\nimport { CustomerPortal } from \"@polar-sh/nextjs\";\n\nexport const GET = CustomerPortal({\n accessToken: process.env.POLAR_ACCESS_TOKEN!,\n server: process.env.NODE_ENV === \"production\" ? \"production\" : \"sandbox\",\n getCustomerId: async (req) => {\n const userId = await getCurrentUserId(req);\n const customer = await polar.customers.getExternal({ externalId: userId });\n return customer.id;\n },\n});\n" }, { "path": "app/settings/themes/page.tsx", "content": "import { getThemes } from \"@/actions/themes\";\nimport { ThemesList } from \"@/app/settings/components/themes-list\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { auth } from \"@/lib/auth\";\nimport { Palette, Plus } from \"lucide-react\";\nimport { headers } from \"next/headers\";\nimport Link from \"next/link\";\nimport { redirect } from \"next/navigation\";\nimport { SettingsHeader } from \"../components/settings-header\";\n\nexport default async function ThemesPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) redirect(\"/editor/theme\");\n\n const themes = await getThemes();\n const sortedThemes = themes.sort((a, b) => {\n return (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0);\n });\n\n return (\n
\n \n {sortedThemes.length === 0 ? (\n \n
\n \n
\n

No themes created yet

\n

\n Create your first custom theme to personalize your projects with unique color palettes.\n

\n
\n \n \n \n
\n \n ) : (\n \n )}\n
\n );\n}\n" }, { "path": "app/settings/usage/page.tsx", "content": "import { UsageStats } from \"@/app/settings/components/usage-stats\";\nimport { auth } from \"@/lib/auth\";\nimport { headers } from \"next/headers\";\nimport { redirect } from \"next/navigation\";\nimport { SettingsHeader } from \"../components/settings-header\";\n\nexport default async function UsagePage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (!session) redirect(\"/editor/theme\");\n\n return (\n
\n \n \n
\n );\n}\n" }, { "path": "app/sitemap.ts", "content": "import { MetadataRoute } from \"next\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n const baseUrl = process.env.BASE_URL ?? \"https://tweakcn.com\";\n\n return [\n {\n url: baseUrl,\n lastModified: new Date(),\n changeFrequency: \"weekly\",\n priority: 1,\n },\n {\n url: `${baseUrl}/editor/theme`,\n lastModified: new Date(),\n changeFrequency: \"weekly\",\n priority: 0.8,\n },\n {\n url: `${baseUrl}/ai`,\n lastModified: new Date(),\n changeFrequency: \"weekly\",\n priority: 0.8,\n },\n {\n url: `${baseUrl}/pricing`,\n lastModified: new Date(),\n changeFrequency: \"weekly\",\n priority: 0.6,\n },\n {\n url: `${baseUrl}/community`,\n lastModified: new Date(),\n changeFrequency: \"daily\",\n priority: 0.8,\n },\n {\n url: `${baseUrl}/figma`,\n lastModified: new Date(),\n changeFrequency: \"monthly\",\n priority: 0.7,\n },\n ];\n}\n" }, { "path": "app/success/layout.tsx", "content": "export default function SuccessLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
{children}
\n
\n );\n}\n" }, { "path": "app/success/page.tsx", "content": "import { NoiseEffect } from \"@/components/effects/noise-effect\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { ArrowRight, CheckCircle } from \"lucide-react\";\nimport Link from \"next/link\";\n\nexport default function SuccessPage() {\n return (\n
\n \n \n {/* Success Icon */}\n
\n
\n
\n \n
\n
\n\n \n

\n Payment Successful!\n

\n \n \n

\n Welcome to tweakcn Pro! Your\n subscription is now active and you have access to all premium features.\n

\n \n \n\n \n \n\n \n \n\n \n \n

\n Need help?{\" \"}\n \n Contact us\n \n

\n \n \n
\n );\n}\n" }, { "path": "app/themes/[themeId]/error.tsx", "content": "\"use client\";\n\nimport { useEffect } from \"react\";\nimport Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ThemeError({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(error);\n }, [error]);\n\n return (\n
\n
\n

Something went wrong!

\n

\n There was an error loading this theme. Please try again later.\n

\n
\n \n \n
\n
\n
\n );\n}\n" }, { "path": "app/themes/[themeId]/layout.tsx", "content": "import { Footer } from \"@/components/footer\";\nimport { Header } from \"@/components/header\";\n\nexport default function ThemeLayout({ children }: { children: React.ReactNode }) {\n return (\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "app/themes/[themeId]/loading.tsx", "content": "import { Loading } from \"@/components/loading\";\n\nexport default function ThemeLoading() {\n return ;\n}\n" }, { "path": "app/themes/[themeId]/not-found.tsx", "content": "import Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ThemeNotFound() {\n return (\n
\n
\n

Theme Not Found

\n

\n The theme you're looking for doesn't exist or you don't\n have permission to view it.\n

\n \n
\n
\n );\n}\n" }, { "path": "app/themes/[themeId]/opengraph-image.alt.txt", "content": "Theme preview for tweakcn " }, { "path": "app/themes/[themeId]/opengraph-image.tsx", "content": "import { ImageResponse } from \"next/og\";\nimport { getTheme } from \"@/actions/themes\";\n\n// Image metadata\nexport const size = {\n width: 1200,\n height: 630,\n};\n\nexport const contentType = \"image/png\";\n\n// Dynamic route params\nexport default async function Image({\n params,\n}: {\n params: { themeId: string };\n}) {\n const theme = await getTheme(params.themeId);\n\n // Set default colors if theme doesn't exist\n const primaryColor = theme?.styles?.light?.primary || \"#000000\";\n const secondaryColor = theme?.styles?.light?.secondary || \"#ffffff\";\n const accentColor = theme?.styles?.light?.accent || \"#0070f3\";\n const mutedColor = theme?.styles?.light?.muted || \"#f5f5f5\";\n const borderColor = theme?.styles?.light?.border || \"#e5e5e5\";\n const backgroundColor = theme?.styles?.light?.background || \"#ffffff\";\n const foregroundColor = theme?.styles?.light?.foreground || \"#000000\";\n const themeName = theme?.name || \"Theme\";\n\n return new ImageResponse(\n (\n \n {/* Top section for theme name */}\n \n \n tweakcn.com\n
\n \n {themeName}\n
\n
\n\n {/* Bottom section with horizontal color swatches */}\n \n {/* Primary */}\n \n\n {/* Secondary */}\n \n\n {/* Accent */}\n \n\n {/* Muted */}\n \n\n {/* Border */}\n \n \n \n ),\n {\n ...size,\n }\n );\n}\n" }, { "path": "app/themes/[themeId]/page.tsx", "content": "import { getTheme } from \"@/actions/themes\";\nimport { getCommunityDataForTheme } from \"@/actions/community-themes\";\nimport ThemeView from \"@/components/theme-view\";\nimport { Metadata } from \"next\";\n\ninterface ThemePageProps {\n params: Promise<{\n themeId: string;\n }>;\n}\n\nexport async function generateMetadata({ params }: ThemePageProps): Promise {\n const { themeId } = await params;\n const [theme, communityData] = await Promise.all([\n getTheme(themeId),\n getCommunityDataForTheme(themeId),\n ]);\n\n const tags = communityData?.tags ?? [];\n const authorName = communityData?.author?.name;\n const description =\n tags.length > 0 && authorName\n ? `A ${tags.join(\", \")} shadcn/ui theme by ${authorName}`\n : `Discover shadcn/ui themes - ${theme?.name} theme`;\n\n return {\n title: theme?.name + \" - tweakcn\",\n description,\n keywords: tags.length > 0 ? tags : undefined,\n openGraph: {\n title: `${theme?.name} - tweakcn`,\n description,\n type: \"website\",\n },\n twitter: {\n card: \"summary_large_image\",\n title: `${theme?.name} - tweakcn`,\n description,\n },\n robots: {\n index: !!communityData,\n follow: true,\n },\n };\n}\n\nexport default async function ThemePage({ params }: ThemePageProps) {\n const { themeId } = await params;\n const [theme, communityData] = await Promise.all([\n getTheme(themeId),\n getCommunityDataForTheme(themeId),\n ]);\n\n return (\n
\n
\n \n
\n
\n );\n}\n" }, { "path": "components/ai-elements/code-block.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, useContext, useState } from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { oneDark, oneLight } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { useTheme } from \"../theme-provider\";\n\ntype CodeBlockContextType = {\n code: string;\n};\n\nconst CodeBlockContext = createContext({\n code: \"\",\n});\n\nexport type CodeBlockProps = HTMLAttributes & {\n code: string;\n language: string;\n showLineNumbers?: boolean;\n children?: ReactNode;\n};\n\nexport const CodeBlock = ({\n code,\n language,\n showLineNumbers = false,\n className,\n children,\n ...props\n}: CodeBlockProps) => {\n const { theme } = useTheme();\n return (\n \n \n
\n \n {code}\n \n {children && (\n
{children}
\n )}\n
\n \n \n );\n};\n\nexport type CodeBlockCopyButtonProps = ComponentProps & {\n onCopy?: () => void;\n onError?: (error: Error) => void;\n timeout?: number;\n};\n\nexport const CodeBlockCopyButton = ({\n onCopy,\n onError,\n timeout = 2000,\n children,\n className,\n ...props\n}: CodeBlockCopyButtonProps) => {\n const [isCopied, setIsCopied] = useState(false);\n const { code } = useContext(CodeBlockContext);\n\n const copyToClipboard = async () => {\n if (typeof window === \"undefined\" || !navigator.clipboard.writeText) {\n onError?.(new Error(\"Clipboard API not available\"));\n return;\n }\n\n try {\n await navigator.clipboard.writeText(code);\n setIsCopied(true);\n onCopy?.();\n setTimeout(() => setIsCopied(false), timeout);\n } catch (error) {\n onError?.(error as Error);\n }\n };\n\n const Icon = isCopied ? CheckIcon : CopyIcon;\n\n return (\n \n {children ?? }\n \n );\n};\n" }, { "path": "components/ai-elements/conversation.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowDownIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nexport type ConversationProps = ComponentProps;\n\nexport const Conversation = ({ className, ...props }: ConversationProps) => (\n \n);\n\nexport type ConversationContentProps = ComponentProps;\n\nexport const ConversationContent = ({ className, ...props }: ConversationContentProps) => (\n \n);\n\nexport type ConversationScrollButtonProps = ComponentProps;\n\nexport const ConversationScrollButton = ({\n className,\n ...props\n}: ConversationScrollButtonProps) => {\n const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n const handleScrollToBottom = useCallback(() => {\n scrollToBottom();\n }, [scrollToBottom]);\n\n return (\n !isAtBottom && (\n \n \n \n )\n );\n};\n" }, { "path": "components/ai-elements/response.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { type ComponentProps, memo } from \"react\";\nimport { Streamdown } from \"streamdown\";\n\ntype ResponseProps = ComponentProps;\n\nexport const Response = memo(\n ({ className, ...props }: ResponseProps) => (\n *:first-child]:mt-0 [&>*:last-child]:mb-0 [&_li>p]:my-0\",\n className\n )}\n {...props}\n />\n ),\n (prevProps, nextProps) =>\n prevProps.children === nextProps.children &&\n prevProps.isAnimating === nextProps.isAnimating\n);\n\nResponse.displayName = \"Response\";\n" }, { "path": "components/auth-dialog-wrapper.tsx", "content": "\"use client\";\n\nimport { AuthDialog } from \"@/app/(auth)/components/auth-dialog\";\nimport { useAuthStore } from \"@/store/auth-store\";\nimport { useEffect } from \"react\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { executePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { usePostHog } from \"posthog-js/react\";\n\nexport function AuthDialogWrapper() {\n const { isOpen, mode, closeAuthDialog, postLoginAction, clearPostLoginAction } = useAuthStore();\n const { data: session } = authClient.useSession();\n const posthog = usePostHog();\n\n useEffect(() => {\n if (isOpen && session) {\n closeAuthDialog();\n }\n\n if (session && session.user && session.user.email) {\n // Identify user with PostHog\n posthog.identify(session.user.email, {\n name: session.user.name,\n email: session.user.email,\n });\n }\n\n if (session && postLoginAction) {\n // Execute action immediately - the system will now handle waiting for handlers\n executePostLoginAction(postLoginAction);\n clearPostLoginAction();\n }\n }, [session, isOpen, closeAuthDialog, postLoginAction, clearPostLoginAction, posthog]);\n\n return (\n \n );\n}\n" }, { "path": "components/block-viewer.tsx", "content": "\"use client\";\nimport { Monitor, Smartphone, Tablet } from \"lucide-react\";\nimport React from \"react\";\nimport { PanelImperativeHandle } from \"react-resizable-panels\";\n\nimport { ComponentErrorBoundary } from \"@/components/error-boundary\";\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"@/components/ui/resizable\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\ntype BlockViewerContext = {\n resizablePanelRef: React.RefObject;\n toggleValue: string;\n setToggleValue: (value: string) => void;\n};\n\nconst BlockViewerContext = React.createContext(null);\n\nfunction useBlockViewer() {\n const context = React.useContext(BlockViewerContext);\n if (!context) {\n throw new Error(\"useBlockViewer must be used within a BlockViewerProvider.\");\n }\n return context;\n}\n\nfunction BlockViewerProvider({ children }: { children: React.ReactNode }) {\n const resizablePanelRef = React.useRef(null);\n const [toggleValue, setToggleValue] = React.useState(\"100\");\n\n return (\n \n {children}\n \n );\n}\n\nexport function BlockViewer({\n className,\n name,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n name: string;\n}) {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function BlockViewerToolbar({\n name,\n className,\n toolbarControls,\n}: React.ComponentProps<\"div\"> & {\n name: string;\n className?: string;\n toolbarControls?: React.ReactNode;\n}) {\n const { resizablePanelRef, toggleValue, setToggleValue } = useBlockViewer();\n\n return (\n
\n
\n
\n {!!toolbarControls ? (\n toolbarControls\n ) : (\n {name}\n )}\n
\n\n
\n {\n if (value && resizablePanelRef?.current) {\n resizablePanelRef.current.resize(parseInt(value));\n setToggleValue(value);\n }\n }}\n >\n \n \n \n\n \n \n \n\n \n \n \n \n
\n
\n
\n );\n}\n\nexport function BlockViewerDisplay({\n name,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n name: string;\n}) {\n const { resizablePanelRef, setToggleValue } = useBlockViewer();\n\n // Auto-resize to full width when screen goes under lg breakpoint (1024px)\n React.useEffect(() => {\n const mql = window.matchMedia(\"(max-width: 1023px)\");\n const resizePanel = () => {\n if (window.innerWidth < 1024 && resizablePanelRef?.current) {\n resizablePanelRef.current.resize(100);\n setToggleValue(\"100\");\n }\n };\n\n resizePanel();\n mql.addEventListener(\"change\", resizePanel);\n return () => mql.removeEventListener(\"change\", resizePanel);\n }, [resizablePanelRef, setToggleValue]);\n\n return (\n \n \n \n
\n\n \n {children}\n \n\n
\n \n );\n}\n" }, { "path": "components/copy-button.tsx", "content": "\"use client\";\n\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\nimport { cn } from \"@/lib/utils\";\nimport { Copy, CopyCheck } from \"lucide-react\";\nimport { ComponentProps } from \"react\";\nimport { TooltipWrapper } from \"./tooltip-wrapper\";\nimport { Button } from \"./ui/button\";\n\ninterface CopyButtonProps extends ComponentProps {\n textToCopy: string;\n successMessage?: {\n title?: string;\n description?: string;\n };\n}\n\nexport function CopyButton({ textToCopy, successMessage, className, ...props }: CopyButtonProps) {\n const { copyToClipboard, hasCopied } = useCopyToClipboard();\n\n return (\n \n svg]:size-3.5\", className)}\n onClick={() => copyToClipboard(textToCopy, successMessage)}\n {...props}\n >\n {hasCopied ? : }\n Copy\n \n \n );\n}\n" }, { "path": "components/debug-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Bug } from \"lucide-react\";\n\ninterface DebugButtonProps extends React.ComponentProps {\n debug?: boolean;\n}\n\nconst isDevMode = process.env.NODE_ENV === \"development\";\n\nexport function DebugButton({ className, debug = isDevMode, ...props }: DebugButtonProps) {\n if (!debug) return null;\n\n return (\n \n \n \n );\n}\n" }, { "path": "components/dynamic-font-loader.tsx", "content": "\"use client\";\n\nimport { useMounted } from \"@/hooks/use-mounted\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { extractFontFamily, getDefaultWeights } from \"@/utils/fonts\";\nimport { loadGoogleFont } from \"@/utils/fonts/google-fonts\";\nimport { useEffect, useMemo } from \"react\";\n\nexport function DynamicFontLoader() {\n const { themeState } = useEditorStore();\n const isMounted = useMounted();\n\n const fontSans = themeState.styles.light[\"font-sans\"];\n const fontSerif = themeState.styles.light[\"font-serif\"];\n const fontMono = themeState.styles.light[\"font-mono\"];\n\n const currentFonts = useMemo(() => {\n return {\n sans: fontSans,\n serif: fontSerif,\n mono: fontMono,\n } as const;\n }, [fontSans, fontSerif, fontMono]);\n\n useEffect(() => {\n if (!isMounted) return;\n\n try {\n Object.entries(currentFonts).forEach(([_type, fontValue]) => {\n const fontFamily = extractFontFamily(fontValue);\n if (fontFamily) {\n const weights = getDefaultWeights([\"400\", \"500\", \"600\", \"700\"]);\n loadGoogleFont(fontFamily, weights);\n }\n });\n } catch (e) {\n console.warn(\"DynamicFontLoader: Failed to load Google fonts:\", e);\n }\n }, [isMounted, currentFonts]);\n\n return null;\n}\n" }, { "path": "components/dynamic-website-preview.tsx", "content": "\"use client\";\n\nimport Logo from \"@/assets/logo.svg\";\nimport { CodeBlock, CodeBlockCopyButton } from \"@/components/ai-elements/code-block\";\nimport { BlockViewer, BlockViewerDisplay, BlockViewerToolbar } from \"@/components/block-viewer\";\nimport { LoadingLogo } from \"@/components/editor/ai/loading-logo\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { useIframeThemeInjector } from \"@/hooks/use-iframe-theme-injector\";\nimport { useWebsitePreview } from \"@/hooks/use-website-preview\";\nimport { cn } from \"@/lib/utils\";\nimport { IframeStatus } from \"@/types/live-preview-embed\";\nimport {\n AlertCircle,\n CheckCircle,\n CloudAlert,\n ExternalLink,\n Globe,\n Info,\n Loader,\n RefreshCw,\n X,\n XCircle,\n} from \"lucide-react\";\nimport { usePostHog } from \"posthog-js/react\";\nimport React, { useEffect, useRef } from \"react\";\n\n/**\n * Dynamic Website Preview - Load and theme external websites\n *\n * Usage Examples:\n *\n * // Same-origin mode (default) - direct DOM theme injection\n * \n *\n * // Cross-origin mode - requires external sites to include embed script\n * \n *\n * The allowCrossOrigin flag must be explicitly set to true to enable\n * external website theming via the embed script.\n */\n\nconst SCRIPT_URL = \"https://tweakcn.com/live-preview.min.js\";\n\n// Code snippets for quick installation across common setups\nconst HTML_SNIPPET = `\\n`;\n\nconst NEXT_APP_SNIPPET = `// app/layout.tsx\\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n \n \n \n \n {children}\n \n )\n}`;\n\nconst NEXT_PAGES_SNIPPET = `// pages/_document.tsx\\n\nimport { Html, Head, Main, NextScript } from 'next/document';\n\nexport default function Document() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n}`;\n\nconst VITE_SNIPPET = `\\n\n\n \n \n \n \n \n \n`;\n\nconst REMIX_SNIPPET = `// app/root.tsx\\nimport { Links, Meta, Outlet, Scripts } from \"@remix-run/react\";\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}`;\n\ntype DynamicWebsitePreviewContextType = ReturnType &\n Omit, \"ref\">;\n\nconst DynamicWebsitePreviewContext = React.createContext(\n null\n);\n\nfunction useDynamicWebsitePreview() {\n const context = React.useContext(DynamicWebsitePreviewContext);\n if (!context) {\n throw new Error(\n \"useDynamicWebsitePreview must be used within a DynamicWebsitePreviewProvider.\"\n );\n }\n return context;\n}\n\nfunction DynamicWebsitePreviewProvider({\n children,\n allowCrossOrigin = false,\n}: {\n children: React.ReactNode;\n allowCrossOrigin?: boolean;\n}) {\n const websitePreviewState = useWebsitePreview({ allowCrossOrigin });\n const posthog = usePostHog();\n\n const { status, retryValidation, themeInjectionError } = useIframeThemeInjector({\n allowCrossOrigin: allowCrossOrigin && !!websitePreviewState.currentUrl,\n iframeRef: websitePreviewState.iframeRef,\n });\n\n const statusRef = useRef(status);\n // eslint-disable-next-line\n statusRef.current = status;\n\n useEffect(() => {\n if (websitePreviewState.currentUrl) {\n setTimeout(() => {\n // capturing after 1s delay so status is finalized\n posthog.capture(\"DYNAMIC_PREVIEW_LOADED\", {\n previewUrl: websitePreviewState.currentUrl,\n status: statusRef.current,\n });\n }, 1000);\n }\n }, [websitePreviewState.currentUrl, posthog]);\n\n const contextValue = {\n ...websitePreviewState,\n status,\n retryValidation,\n themeInjectionError,\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport function DynamicWebsitePreview({\n className,\n name,\n allowCrossOrigin = false,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & {\n name: string;\n allowCrossOrigin?: boolean;\n}) {\n return (\n \n \n } className=\"bg-muted h-fit\" />\n \n \n \n );\n}\n\nfunction DynamicWebsitePreviewContent({ name }: { name: string }) {\n const { currentUrl, error: previewError } = useDynamicWebsitePreview();\n\n if (!currentUrl && !previewError) {\n return ;\n }\n\n if (previewError) {\n return ;\n }\n\n return ;\n}\n\nfunction Controls() {\n const {\n inputUrl,\n setInputUrl,\n currentUrl,\n isLoading: previewIsLoading,\n loadUrl,\n refreshIframe,\n openInNewTab,\n reset,\n allowCrossOrigin,\n } = useDynamicWebsitePreview();\n\n const handleReset = () => {\n if (currentUrl) {\n reset();\n setInputUrl(\"\");\n } else {\n setInputUrl(\"\");\n }\n };\n\n return (\n
\n
\n setInputUrl(e.target.value)}\n onKeyDown={(e) => {\n if (!inputUrl.trim()) return;\n if (e.key === \"Enter\") {\n loadUrl();\n }\n }}\n className={cn(\n \"peer bg-background text-foreground h-8 pl-8 text-sm shadow-none transition-all duration-200\",\n \"focus:bg-input/50 hover:bg-input/20\",\n currentUrl && \"pr-8\"\n )}\n />\n\n \n\n {(currentUrl || inputUrl) && (\n \n \n \n \n \n )}\n
\n\n \n \n \n \n \n\n \n \n \n \n \n
\n );\n}\n\nfunction NoWebsitePreviewLoaded() {\n return (\n
\n
\n
\n
\n \n
\n \n
\n \n
\n
\n\n

\n Preview your Website in tweakcn\n

\n\n
\n
\n 1.\n Add the script below to your website based on your framework\n
\n
\n 2.\n \n Paste your website's URL (e.g.,{\" \"}\n http://localhost:3000) above to preview it with\n the theme applied in real-time\n \n
\n
\n\n \n \n
\n \n \n Script Tag\n \n \n Next.js (App)\n \n \n Next.js (Pages)\n \n \n Vite\n \n \n Remix\n \n \n
\n\n
\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n
\n \n \n
\n
\n );\n}\n\nfunction WebsitePreviewLoading() {\n return (\n
\n
\n
\n \n
\n\n Loading website\n
\n
\n );\n}\n\nfunction WebsitePreviewError({ error }: { error: string }) {\n return (\n
\n
\n
\n \n
\n\n
\n

\n Error Loading Website Preview\n

\n {error}\n
\n
\n
\n );\n}\n\n/**\n * Content component that manages the iframe and its loading states\n * Theme injection is now handled entirely by the useIframeThemeInjector hook\n */\nfunction WebsitePreview({ name }: { name: string }) {\n const {\n currentUrl,\n isLoading: previewIsLoading,\n status,\n retryValidation,\n allowCrossOrigin,\n iframeRef,\n handleIframeLoad,\n handleIframeError,\n themeInjectionError,\n } = useDynamicWebsitePreview();\n\n return (\n \n {previewIsLoading && (\n
\n \n
\n )}\n\n \n\n {!previewIsLoading && !!status && allowCrossOrigin && (\n
\n \n
\n )}\n \n );\n}\n\nconst ConnectionStatus = React.memo(\n ({\n status,\n retryValidation,\n isLoading,\n errorMsg,\n }: {\n status: IframeStatus;\n retryValidation: () => void;\n isLoading: boolean;\n errorMsg?: string | null;\n }) => {\n const [isVisible, setIsVisible] = React.useState(false);\n const [displayedStatus, setDisplayedStatus] = React.useState(status);\n const showTimeoutRef = React.useRef(null);\n const hideTimeoutRef = React.useRef(null);\n const hasShownSupportedRef = React.useRef(false);\n\n React.useEffect(() => {\n // Clear any existing timeouts\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n\n // If we've already shown \"supported\" and hidden it, don't show it again\n // unless there was an error state in between\n if (status === \"supported\" && hasShownSupportedRef.current) {\n return;\n }\n\n // Reset the flag if we hit an error state\n if (status === \"missing\" || status === \"unsupported\" || status === \"error\") {\n hasShownSupportedRef.current = false;\n }\n\n // Debounce: Wait 1s before showing the status to avoid flashing\n showTimeoutRef.current = setTimeout(() => {\n setDisplayedStatus(status);\n setIsVisible(true);\n\n // Auto-hide after delay only for \"supported\" status\n if (status === \"supported\") {\n hasShownSupportedRef.current = true;\n hideTimeoutRef.current = setTimeout(() => {\n setIsVisible(false);\n }, 2000);\n }\n }, 500);\n\n return () => {\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n }\n };\n }, [status]);\n\n if (isLoading || status === \"unknown\" || !isVisible) return null;\n\n return (\n
\n
\n \n {errorMsg ? (\n \n {ICONS[displayedStatus]}\n \n
\n
\n \n

Error details:

\n
\n\n

{errorMsg}

\n
\n \n \n ) : (\n ICONS[displayedStatus]\n )}\n \n \n {TEXTS[displayedStatus]}\n \n
\n\n {(displayedStatus === \"missing\" ||\n displayedStatus === \"unsupported\" ||\n displayedStatus === \"error\") && (\n
\n \n Retry\n \n
\n )}\n
\n );\n }\n);\n\nConnectionStatus.displayName = \"ConnectionStatus\";\n\nconst ICONS: Record = {\n unknown: null,\n checking: ,\n connected: ,\n supported: ,\n unsupported: ,\n missing: ,\n error: ,\n};\n\nconst TEXTS: Record = {\n unknown: \"\",\n checking: \"Checking connection\",\n connected: \"Connected\",\n supported: \"Live preview enabled\",\n unsupported: \"Unsupported site\",\n missing: \"Script not found\",\n error: \"An error occurred\",\n};\n" }, { "path": "components/editor/action-bar/action-bar.tsx", "content": "\"use client\";\n\nimport { ActionBarButtons } from \"@/components/editor/action-bar/components/action-bar-buttons\";\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { useDialogActions } from \"@/hooks/use-dialog-actions\";\n\nexport function ActionBar() {\n const { isCreatingTheme, handleSaveClick, handleShareClick, setCssImportOpen, setCodePanelOpen } =\n useDialogActions();\n\n return (\n
\n \n setCssImportOpen(true)}\n onCodeClick={() => setCodePanelOpen(true)}\n onSaveClick={() => handleSaveClick()}\n isSaving={isCreatingTheme}\n onShareClick={handleShareClick}\n />\n \n
\n );\n}\n" }, { "path": "components/editor/action-bar/components/action-bar-buttons.tsx", "content": "import { Separator } from \"@/components/ui/separator\";\nimport { useAIThemeGenerationCore } from \"@/hooks/use-ai-theme-generation-core\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { useThemePresetStore } from \"@/store/theme-preset-store\";\nimport { useThemesData } from \"@/hooks/themes\";\nimport { CodeButton } from \"./code-button\";\nimport { ImportButton } from \"./import-button\";\nimport { MoreOptions } from \"./more-options\";\nimport { PublishButton } from \"./publish-button\";\nimport { ResetButton } from \"./reset-button\";\nimport { SaveButton } from \"./save-button\";\nimport { ShareButton } from \"./share-button\";\nimport { ThemeToggle } from \"./theme-toggle\";\nimport { UndoRedoButtons } from \"./undo-redo-buttons\";\nimport { useMemo } from \"react\";\n\ninterface ActionBarButtonsProps {\n onImportClick: () => void;\n onCodeClick: () => void;\n onSaveClick: () => void;\n onShareClick: (id?: string) => void;\n isSaving: boolean;\n}\n\nexport function ActionBarButtons({\n onImportClick,\n onCodeClick,\n onSaveClick,\n onShareClick,\n isSaving,\n}: ActionBarButtonsProps) {\n const { themeState, resetToCurrentPreset, hasUnsavedChanges } = useEditorStore();\n const { isGeneratingTheme } = useAIThemeGenerationCore();\n const { getPreset } = useThemePresetStore();\n const { data: themes } = useThemesData();\n const currentPreset = themeState?.preset ? getPreset(themeState?.preset) : undefined;\n const isSavedPreset = !!currentPreset && currentPreset.source === \"SAVED\";\n\n const isPublished = useMemo(() => {\n if (!isSavedPreset || !themes || !themeState.preset) return false;\n const theme = themes.find((t) => t.id === themeState.preset);\n return theme?.isPublished ?? false;\n }, [isSavedPreset, themes, themeState.preset]);\n\n const handleReset = () => {\n resetToCurrentPreset();\n };\n\n return (\n
\n \n \n \n \n \n \n \n
\n \n
\n \n onShareClick(themeState.preset)} disabled={isGeneratingTheme} />\n {isSavedPreset && !hasUnsavedChanges() ? (\n \n ) : (\n \n )}\n \n
\n );\n}\n" }, { "path": "components/editor/action-bar/components/ai-generate-button.tsx", "content": "import { Sparkles } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\ninterface AIGenerateButtonProps {\n onClick: () => void;\n}\n\nexport function AIGenerateButton({ onClick }: AIGenerateButtonProps) {\n return (\n \n \n \n \n \n \n \n Generate theme with AI\n \n );\n}\n" }, { "path": "components/editor/action-bar/components/code-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Braces } from \"lucide-react\";\n\ninterface CodeButtonProps extends React.ComponentProps {}\n\nexport function CodeButton({ className, ...props }: CodeButtonProps) {\n return (\n \n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/import-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { FileCode } from \"lucide-react\";\n\ninterface ImportButtonProps extends React.ComponentProps {}\n\nexport function ImportButton({ className, ...props }: ImportButtonProps) {\n return (\n \n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/mcp-dialog.tsx", "content": "import {\n Tabs,\n TabsContent,\n TabsIndicator,\n TabsList,\n TabsTrigger,\n} from \"@/components/ui/base-ui-tabs\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"@/components/ui/revola\";\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\nimport { Check, Copy } from \"lucide-react\";\nimport { usePostHog } from \"posthog-js/react\";\n\ninterface MCPDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\nconst mcpConfig = {\n mcpServers: {\n shadcn: {\n command: \"npx\",\n args: [\"-y\", \"shadcn@canary\", \"registry:mcp\"],\n env: {\n REGISTRY_URL: \"https://tweakcn.com/r/themes/registry.json\",\n },\n },\n },\n};\n\nexport function MCPDialog({ open, onOpenChange }: MCPDialogProps) {\n const { hasCopied, copyToClipboard } = useCopyToClipboard();\n const posthog = usePostHog();\n\n const handleCopy = async (config: typeof mcpConfig) => {\n copyToClipboard(JSON.stringify(config, null, 2));\n posthog.capture(\"COPY_MCP_SETUP\");\n };\n\n return (\n \n \n
\n \n Setup MCP\n \n Use the code below to configure the registry in your IDE.\n \n \n\n \n \n \n Cursor\n \n \n Windsurf\n \n \n \n\n
\n
\n \n

\n Copy and paste the code into{\" \"}\n \n .cursor/mcp.json\n \n

\n \n \n

\n Copy and paste the code into{\" \"}\n \n .codeium/windsurf/mcp_config.json\n \n

\n \n handleCopy(mcpConfig)}\n className=\"h-8\"\n aria-label={hasCopied ? \"Copied to clipboard\" : \"Copy to clipboard\"}\n >\n {hasCopied ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Copy\n \n )}\n \n
\n\n 
\n                {JSON.stringify(mcpConfig, null, 2)}\n
\n
\n \n
\n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/more-options.tsx", "content": "import McpIcon from \"@/assets/mcp.svg\";\nimport ContrastChecker from \"@/components/editor/contrast-checker\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { MoreVertical } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { MCPDialog } from \"./mcp-dialog\";\n\ninterface MoreOptionsProps extends React.ComponentProps {}\n\nexport function MoreOptions({ ...props }: MoreOptionsProps) {\n const [mcpDialogOpen, setMcpDialogOpen] = useState(false);\n const { themeState } = useEditorStore();\n\n return (\n <>\n \n \n \n \n \n setMcpDialogOpen(true)} asChild>\n \n \n e.preventDefault()} asChild>\n \n \n \n \n\n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/publish-button.tsx", "content": "\"use client\";\n\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { TagSelector } from \"@/components/tag-selector\";\nimport { cn } from \"@/lib/utils\";\nimport { Globe, Loader2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { usePublishTheme } from \"@/hooks/themes\";\n\ninterface PublishButtonProps {\n themeId: string;\n isPublished: boolean;\n disabled?: boolean;\n className?: string;\n}\n\nexport function PublishButton({\n themeId,\n isPublished,\n disabled,\n className,\n}: PublishButtonProps) {\n const publishMutation = usePublishTheme();\n const [showDialog, setShowDialog] = useState(false);\n const [selectedTags, setSelectedTags] = useState([]);\n\n if (isPublished) {\n return (\n \n \n \n Published\n \n \n );\n }\n\n const handleConfirmPublish = () => {\n publishMutation.mutate(\n { themeId, tags: selectedTags },\n {\n onSuccess: () => {\n setShowDialog(false);\n setSelectedTags([]);\n },\n }\n );\n };\n\n return (\n <>\n \n setShowDialog(true)}\n >\n {publishMutation.isPending ? (\n \n ) : (\n \n )}\n Publish\n \n \n\n \n \n \n Publish to the community?\n \n Your theme will be publicly visible on the community page. You can\n unpublish it at any time.\n \n \n \n \n \n \n {publishMutation.isPending ? (\n <>\n \n Publishing...\n \n ) : (\n \"Publish\"\n )}\n \n \n \n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/reset-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { RefreshCw } from \"lucide-react\";\n\ninterface ResetButtonProps extends React.ComponentProps {}\n\nexport function ResetButton({ className, ...props }: ResetButtonProps) {\n return (\n \n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/save-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Heart, Loader2 } from \"lucide-react\";\n\ninterface SaveButtonProps extends React.ComponentProps {\n isSaving: boolean;\n}\n\nexport function SaveButton({ isSaving, disabled, className, ...props }: SaveButtonProps) {\n return (\n \n \n {isSaving ? : }\n Save\n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/share-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Loader2, Share2 } from \"lucide-react\";\n\ninterface ShareButtonProps extends React.ComponentProps {\n isSharing?: boolean;\n}\n\nexport function ShareButton({\n onClick,\n isSharing,\n disabled,\n className,\n ...props\n}: ShareButtonProps) {\n return (\n \n \n {isSharing ? (\n \n ) : (\n \n )}\n Share\n \n \n );\n}\n" }, { "path": "components/editor/action-bar/components/theme-toggle.tsx", "content": "import { useTheme } from \"@/components/theme-provider\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { cn } from \"@/lib/utils\";\nimport { Switch as SwitchPrimitives } from \"radix-ui\";\nimport { Moon, Sun } from \"lucide-react\";\n\nexport function ThemeToggle() {\n const { theme, toggleTheme } = useTheme();\n\n const handleThemeToggle = (event: React.MouseEvent) => {\n const { clientX: x, clientY: y } = event;\n toggleTheme({ x, y });\n };\n\n return (\n
\n \n \n \n {theme === \"dark\" ? : }\n \n \n \n
\n );\n}\n" }, { "path": "components/editor/action-bar/components/undo-redo-buttons.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { Redo, Undo } from \"lucide-react\";\n\ninterface UndoRedoButtonsProps extends React.ComponentProps {}\n\nexport function UndoRedoButtons({ disabled, ...props }: UndoRedoButtonsProps) {\n const { undo, redo, canUndo, canRedo } = useEditorStore();\n\n return (\n
\n \n \n \n \n \n\n \n \n \n \n \n
\n );\n}\n" }, { "path": "components/editor/ai/ai-chat-form-body.tsx", "content": "\"use client\";\n\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { AI_PROMPT_CHARACTER_LIMIT } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { JSONContent } from \"@tiptap/react\";\nimport dynamic from \"next/dynamic\";\nimport { DragAndDropImageUploader } from \"./drag-and-drop-image-uploader\";\nimport { UploadedImagePreview } from \"./uploaded-image-preview\";\n\nconst CustomTextarea = dynamic(() => import(\"@/components/editor/custom-textarea\"), {\n ssr: false,\n loading: () => (\n
\n
\n
\n
\n ),\n});\n\ninterface AIChatFormBodyProps {\n isUserDragging: boolean;\n disabled: boolean;\n canSubmit: boolean;\n uploadedImages: { url: string; loading: boolean }[];\n handleImagesUpload: (files: File[]) => void;\n handleImageRemove: (index: number) => void;\n handleContentChange: (jsonContent: JSONContent) => void;\n handleGenerate: () => void;\n initialEditorContent: JSONContent | undefined;\n externalEditorContent?: JSONContent;\n textareaKey?: string | number;\n isStreamingContent?: boolean;\n}\n\nexport function AIChatFormBody({\n isUserDragging,\n disabled,\n canSubmit,\n uploadedImages,\n handleImagesUpload,\n handleImageRemove,\n handleContentChange,\n handleGenerate,\n initialEditorContent,\n externalEditorContent,\n textareaKey,\n isStreamingContent = false,\n}: AIChatFormBodyProps) {\n return (\n <>\n {isUserDragging && (\n
\n img.loading)}\n />\n
\n )}\n {uploadedImages.length > 0 && !isUserDragging && (\n \n \n {uploadedImages.map((img, idx) => (\n handleImageRemove(idx)}\n />\n ))}\n \n
\n )}\n
\n \n
\n \n
\n
\n \n );\n}\n" }, { "path": "components/editor/ai/alert-banner.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { AI_REQUEST_FREE_TIER_LIMIT } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { X } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\n\nexport function AlertBanner() {\n const [showBanner, setShowBanner] = useState(false);\n\n const { data: session } = authClient.useSession();\n const isLoggedIn = !!session?.user.id;\n const { subscriptionStatus, isPending } = useSubscription();\n\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n const freeProMessagesLeft = subscriptionStatus?.requestsRemaining ?? 0;\n\n useEffect(() => {\n let timer: NodeJS.Timeout;\n\n const shouldShowBanner =\n isLoggedIn && !isPro && freeProMessagesLeft <= AI_REQUEST_FREE_TIER_LIMIT;\n\n if (shouldShowBanner) {\n if (showBanner) return;\n\n timer = setTimeout(() => setShowBanner(true), 1000);\n } else {\n setShowBanner(false);\n }\n\n return () => clearTimeout(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isLoggedIn, isPro, freeProMessagesLeft]);\n\n const getBannerContent = () => {\n if (isLoggedIn && !isPro && freeProMessagesLeft > 0) {\n return (\n \n You have {freeProMessagesLeft} Free\n {` Pro `}\n messages left.\n \n );\n }\n\n if (isLoggedIn && !isPro && freeProMessagesLeft <= 0) {\n return (\n \n Upgrade to Pro to unlock unlimited\n requests.\n \n );\n }\n };\n\n if (isPro || isPending) return null;\n\n return (\n \n
\n

\n {getBannerContent()}\n

\n
\n \n \n \n\n svg]:size-3\"\n onClick={() => setShowBanner(false)}\n >\n \n \n
\n
\n \n );\n}\n\nexport function BannerWrapper({ children, show }: { children: React.ReactNode; show: boolean }) {\n return (\n
\n \n
\n {children}\n
\n\n
\n
\n
\n );\n}\n" }, { "path": "components/editor/ai/chat-image-preview.tsx", "content": "import {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\nimport { cn } from \"@/lib/utils\";\nimport { ImageIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { ComponentProps } from \"react\";\n\ninterface ChatImagePreviewProps extends ComponentProps {\n name?: string;\n}\n\nexport function ChatImagePreview({ name, src, className, alt, ...props }: ChatImagePreviewProps) {\n return (\n \n \n
\n \n\n
\n \n
\n
\n \n\n \n \n Image Preview\n \n \n \n \n );\n}\n" }, { "path": "components/editor/ai/chat-input.tsx", "content": "\"use client\";\n\nimport { Loader } from \"@/components/loader\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { useAIChatForm } from \"@/hooks/use-ai-chat-form\";\nimport { useAIEnhancePrompt } from \"@/hooks/use-ai-enhance-prompt\";\nimport { useChatContext } from \"@/hooks/use-chat-context\";\nimport { useGuards } from \"@/hooks/use-guards\";\nimport { useSubscription } from \"@/hooks/use-subscription\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { MAX_IMAGE_FILES } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { ArrowUp, Loader as LoaderIcon, Plus, StopCircle } from \"lucide-react\";\nimport { AIChatFormBody } from \"./ai-chat-form-body\";\nimport { AlertBanner, BannerWrapper } from \"./alert-banner\";\nimport { EnhancePromptButton } from \"./enhance-prompt-button\";\nimport { ImageUploader } from \"./image-uploader\";\n\ntype ThemeGenerationPayload = {\n promptData: AIPromptData;\n options: {\n shouldClearLocalDraft?: boolean;\n };\n};\n\ninterface ChatInputProps {\n onThemeGeneration: (promptData: AIPromptData) => Promise;\n isGeneratingTheme: boolean;\n onCancelThemeGeneration: () => void;\n}\n\nexport function ChatInput({\n onThemeGeneration,\n isGeneratingTheme,\n onCancelThemeGeneration,\n}: ChatInputProps) {\n const { messages, startNewChat } = useChatContext();\n const { checkValidSession, checkValidSubscription } = useGuards();\n const { subscriptionStatus } = useSubscription();\n const isPro = subscriptionStatus?.isSubscribed ?? false;\n const hasFreeRequestsLeft = (subscriptionStatus?.requestsRemaining ?? 0) > 0;\n\n const {\n editorContentDraft,\n handleContentChange,\n promptData,\n isEmptyPrompt,\n clearLocalDraft,\n uploadedImages,\n fileInputRef,\n handleImagesUpload,\n handleImageRemove,\n clearUploadedImages,\n isSomeImageUploading,\n isUserDragging,\n isInitializing,\n } = useAIChatForm();\n\n const handleNewChat = () => {\n startNewChat();\n clearLocalDraft();\n clearUploadedImages();\n };\n\n const { startEnhance, stopEnhance, enhancedPromptAsJsonContent, isEnhancingPrompt } =\n useAIEnhancePrompt();\n\n const handleEnhancePrompt = () => {\n if (!checkValidSession() || !checkValidSubscription()) return;\n\n // Only send images that are not loading, and strip loading property\n const images = uploadedImages.filter((img) => !img.loading).map(({ url }) => ({ url }));\n startEnhance({ ...promptData, images });\n };\n\n const generateTheme = async (payload: ThemeGenerationPayload) => {\n const { promptData, options } = payload;\n\n if (options.shouldClearLocalDraft) {\n clearLocalDraft();\n clearUploadedImages();\n }\n\n onThemeGeneration(promptData);\n };\n\n const handleGenerateSubmit = async () => {\n // Only send images that are not loading, and strip loading property\n const images = uploadedImages.filter((img) => !img.loading).map(({ url }) => ({ url }));\n\n // Proceed only if there is text, or at least one image\n if (isEmptyPrompt && images.length === 0) return;\n\n const payload: ThemeGenerationPayload = {\n promptData: {\n ...promptData,\n images,\n },\n options: {\n shouldClearLocalDraft: true,\n },\n };\n\n if (!checkValidSession(\"signup\", \"AI_GENERATE_FROM_CHAT\", payload)) return;\n if (!checkValidSubscription()) return;\n\n generateTheme(payload);\n };\n\n usePostLoginAction(\"AI_GENERATE_FROM_CHAT\", (payload) => {\n generateTheme(payload);\n });\n\n return (\n
\n \n
\n \n \n
\n \n\n \n
\n \n
\n \n \n \n New chat\n \n \n\n
\n {(isPro || hasFreeRequestsLeft) && promptData?.content ? (\n \n ) : null}\n\n fileInputRef.current?.click()}\n disabled={\n isGeneratingTheme ||\n isEnhancingPrompt ||\n isInitializing ||\n uploadedImages.some((img) => img.loading) ||\n uploadedImages.length >= MAX_IMAGE_FILES\n }\n />\n\n {isGeneratingTheme ? (\n \n \n \n Stop\n \n \n ) : (\n \n \n {isGeneratingTheme ? : }\n \n \n )}\n
\n
\n
\n
\n );\n}\n" }, { "path": "components/editor/ai/chat-interface.tsx", "content": "\"use client\";\n\nimport { useChatContext } from \"@/hooks/use-chat-context\";\nimport { useAIThemeGenerationCore } from \"@/hooks/use-ai-theme-generation-core\";\nimport { useGuards } from \"@/hooks/use-guards\";\nimport { usePostLoginAction } from \"@/hooks/use-post-login-action\";\nimport { toast } from \"@/hooks/use-toast\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData } from \"@/types/ai\";\nimport dynamic from \"next/dynamic\";\nimport React from \"react\";\nimport { ChatInput } from \"./chat-input\";\nimport { ClosableSuggestedPillActions } from \"./closeable-suggested-pill-actions\";\n\nconst Messages = dynamic(() => import(\"./messages\").then((mod) => mod.Messages), {\n ssr: false,\n});\n\nconst NoMessagesPlaceholder = dynamic(\n () => import(\"./no-messages-placeholder\").then((mod) => mod.NoMessagesPlaceholder),\n {\n ssr: false,\n }\n);\n\nexport function ChatInterface() {\n const { messages, regenerate, resetMessagesUpToIndex } = useChatContext();\n const { isGeneratingTheme, generateThemeCore, cancelThemeGeneration } =\n useAIThemeGenerationCore();\n\n const { checkValidSession, checkValidSubscription } = useGuards();\n\n const hasMessages = messages.length > 0;\n const [editingMessageIndex, setEditingMessageIndex] = React.useState(null);\n\n const handleGenerateFromSuggestion = (promptData: AIPromptData | undefined) => {\n if (!checkValidSession(\"signup\", \"AI_GENERATE_FROM_CHAT_SUGGESTION\", { promptData })) return;\n if (!checkValidSubscription()) return;\n\n generateThemeCore(promptData);\n };\n\n const handleRetry = (messageIndex: number) => {\n if (!checkValidSession(\"signup\", \"AI_GENERATE_RETRY\", { messageIndex })) return;\n if (!checkValidSubscription()) return;\n\n setEditingMessageIndex(null);\n const messageToRetry = messages[messageIndex];\n\n if (messageToRetry) {\n regenerate({ messageId: messageToRetry.id });\n } else {\n toast({\n title: \"Cannot retry this message\",\n description: \"Seems like this message is not longer available.\",\n variant: \"destructive\",\n });\n }\n };\n\n const handleEdit = (messageIndex: number) => {\n if (!checkValidSession()) return; // Simply act as an early return\n\n setEditingMessageIndex(messageIndex);\n };\n\n const handleEditCancel = () => {\n setEditingMessageIndex(null);\n };\n\n const handleEditSubmit = (messageIndex: number, promptData: AIPromptData) => {\n if (!checkValidSession(\"signup\", \"AI_GENERATE_EDIT\", { messageIndex, promptData })) {\n return;\n }\n if (!checkValidSubscription()) return;\n\n // Reset messages up to the edited message\n resetMessagesUpToIndex(messageIndex);\n setEditingMessageIndex(null);\n generateThemeCore(promptData);\n };\n\n usePostLoginAction(\"AI_GENERATE_FROM_CHAT_SUGGESTION\", ({ promptData }) => {\n handleGenerateFromSuggestion(promptData);\n });\n\n usePostLoginAction(\"AI_GENERATE_RETRY\", ({ messageIndex }) => {\n handleRetry(messageIndex);\n });\n\n usePostLoginAction(\"AI_GENERATE_EDIT\", ({ messageIndex, promptData }) => {\n handleEditSubmit(messageIndex, promptData);\n });\n\n return (\n
\n \n {hasMessages ? (\n \n ) : (\n
\n \n
\n )}\n \n\n {/* Chat form input and suggestions */}\n
\n \n \n
\n\n \n \n
\n );\n}\n" }, { "path": "components/editor/ai/chat-theme-preview.tsx", "content": "import { Loader } from \"@/components/loader\";\nimport { useTheme } from \"@/components/theme-provider\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { useFeedbackText } from \"@/hooks/use-feedback-text\";\nimport { cn } from \"@/lib/utils\";\nimport { ThemeStyles } from \"@/types/theme\";\nimport { applyGeneratedTheme } from \"@/utils/ai/apply-theme\";\nimport { AlertCircle, CheckCheck, ChevronsUpDown, Loader2, Zap } from \"lucide-react\";\nimport { ComponentProps, useState } from \"react\";\n\ntype ChatThemePreviewProps = ComponentProps<\"div\"> & ChatThemePreviewPropsBase;\n\ntype ChatThemePreviewPropsBase =\n | {\n status: \"loading\";\n expanded?: boolean;\n themeStyles?: Partial;\n }\n | {\n status: \"error\";\n expanded?: boolean;\n errorText?: string;\n themeStyles?: Partial;\n }\n | {\n status: \"complete\";\n expanded?: boolean;\n themeStyles: ThemeStyles;\n };\n\nexport function ChatThemePreview({\n status,\n expanded = false,\n themeStyles,\n className,\n children,\n ...props\n}: ChatThemePreviewProps) {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const { theme: mode } = useTheme();\n const loading = status === \"loading\";\n\n const feedbackText = useFeedbackText({\n showFeedbackText: loading,\n feedbackMessages: FEEDBACK_MESSAGES,\n rotationIntervalInSeconds: 8,\n });\n\n if (loading) {\n return (\n \n
\n
\n \n
\n\n \n
\n \n );\n }\n\n if (status === \"error\")\n return (\n \n
\n
\n \n
\n Generation cancelled or failed.\n
\n \n );\n\n const handleApplyTheme = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (status === \"complete\") applyGeneratedTheme(themeStyles);\n };\n\n if (status === \"complete\")\n return (\n \n setIsExpanded(!isExpanded)}\n >\n
\n \n
\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n Apply\n \n\n \n \n \n
\n \n\n \n
\n
\n {children}\n
\n
\n \n \n );\n\n return null;\n}\n\nconst FEEDBACK_MESSAGES = [\n \"Generating your theme...\",\n \"Tweaking color tokens...\",\n \"Making a good theme takes time...\",\n \"Still working on your theme...\",\n \"Almost there...\",\n];\n" }, { "path": "components/editor/ai/closeable-suggested-pill-actions.tsx", "content": "\"use client\";\n\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { Button } from \"@/components/ui/button\";\nimport { usePreferencesStore } from \"@/store/preferences-store\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { createCurrentThemePrompt } from \"@/utils/ai/ai-prompt\";\nimport { PROMPTS } from \"@/utils/ai/prompts\";\nimport { Sparkles, X } from \"lucide-react\";\nimport { PillActionButton } from \"./pill-action-button\";\n\nexport function ClosableSuggestedPillActions({\n onGenerateTheme,\n isGeneratingTheme,\n}: {\n onGenerateTheme: (promptData: AIPromptData) => void;\n isGeneratingTheme: boolean;\n}) {\n const { chatSuggestionsOpen, setChatSuggestionsOpen } = usePreferencesStore();\n\n const handleSetPrompt = async (prompt: string) => {\n const promptData = createCurrentThemePrompt({ prompt });\n onGenerateTheme(promptData);\n };\n\n if (!chatSuggestionsOpen) return null;\n\n return (\n
\n
\n

Suggestions

\n svg]:size-3\"\n onClick={() => setChatSuggestionsOpen(false)}\n >\n \n \n
\n\n \n {Object.entries(PROMPTS).map(([key, { label, prompt }]) => (\n handleSetPrompt(prompt)}\n disabled={isGeneratingTheme}\n >\n {label}\n \n ))}\n \n
\n );\n}\n" }, { "path": "components/editor/ai/drag-and-drop-image-uploader.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { Upload } from \"lucide-react\";\nimport { useDropzone } from \"react-dropzone\";\n\ninterface DragAndDropImageUploaderProps {\n onDrop: (files: File[]) => void;\n disabled?: boolean;\n className?: string;\n}\n\nexport function DragAndDropImageUploader({\n onDrop,\n disabled,\n className,\n}: DragAndDropImageUploaderProps) {\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n multiple: true,\n noClick: true,\n disabled,\n accept: {\n \"image/jpeg\": [],\n \"image/jpg\": [],\n \"image/png\": [],\n \"image/webp\": [],\n \"image/svg+xml\": [],\n },\n });\n\n return (\n <>\n
\n\n \n \n
\n \n Drop images here\n
\n
\n \n );\n}\n" }, { "path": "components/editor/ai/enhance-prompt-button.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { CircleStop, WandSparkles } from \"lucide-react\";\n\ninterface EnhancePromptButtonProps extends React.ComponentProps {\n isEnhancing: boolean;\n onStart: () => void;\n onStop: () => void;\n}\n\nexport function EnhancePromptButton({\n className,\n disabled,\n isEnhancing,\n onStart,\n onStop,\n ...props\n}: EnhancePromptButtonProps) {\n return (\n \n \n {isEnhancing ? : }\n \n \n );\n}\n" }, { "path": "components/editor/ai/image-uploader.tsx", "content": "import { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { MAX_IMAGE_FILE_SIZE, MAX_IMAGE_FILES } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { ALLOWED_IMAGE_TYPES } from \"@/utils/ai/image-upload\";\nimport { ImagePlus } from \"lucide-react\";\nimport { ComponentProps } from \"react\";\n\ninterface ImageUploaderProps extends ComponentProps {\n fileInputRef: React.RefObject;\n onImagesUpload: (files: File[]) => void;\n}\n\nexport function ImageUploader({\n fileInputRef,\n onImagesUpload,\n disabled,\n className,\n ...props\n}: ImageUploaderProps) {\n const handleImagesUpload = (event: React.ChangeEvent) => {\n const fileList = event.target.files;\n if (!fileList) return;\n\n const files = Array.from(fileList);\n onImagesUpload(files);\n };\n\n return (\n <>\n \n \n \n Image\n \n \n \n );\n}\n" }, { "path": "components/editor/ai/loading-logo.tsx", "content": "import Logo from \"@/assets/logo.svg\";\nimport { Sparkle } from \"lucide-react\";\n\nexport function LoadingLogo() {\n return (\n <>\n
\n
\n
\n
\n \n
\n \n
\n \n
\n
\n \n );\n}\n" }, { "path": "components/editor/ai/message-actions.tsx", "content": "import { CopyButton } from \"@/components/copy-button\";\nimport { DebugButton } from \"@/components/debug-button\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { type ChatMessage } from \"@/types/ai\";\nimport { Edit, RefreshCw } from \"lucide-react\";\n\ntype MessageActionsProps = {\n message: ChatMessage;\n onRetry?: () => void;\n onEdit?: () => void;\n isGeneratingTheme: boolean;\n isEditing?: boolean;\n};\n\nexport function MessageActions({\n message,\n onRetry,\n onEdit,\n isGeneratingTheme,\n isEditing,\n}: MessageActionsProps) {\n const isUser = message.role === \"user\";\n const isAssistant = message.role === \"assistant\";\n\n const getCopyContent = () => {\n const convertTextPartsToString = (message: ChatMessage) => {\n return (\n message.parts\n .filter((part) => part.type === \"text\")\n .map((part) => part.text)\n .join(\"\\n\") ?? \"\"\n );\n };\n\n if (isUser && message.metadata) {\n return message.metadata.promptData?.content ?? convertTextPartsToString(message);\n }\n\n return convertTextPartsToString(message);\n };\n\n return (\n \n {onRetry && (\n \n svg]:size-3.5\"\n disabled={isGeneratingTheme}\n onClick={onRetry}\n >\n \n \n \n )}\n\n {onEdit && isUser && (\n \n svg]:size-3.5\"\n disabled={isGeneratingTheme || isEditing}\n onClick={onEdit}\n >\n \n \n \n )}\n\n svg]:size-3.5\" />\n\n svg]:size-3.5\"\n onClick={() => {\n console.log(\"----- 🐛 Debugging Message -----\");\n console.dir(message, { depth: null });\n }}\n />\n
\n );\n}\n" }, { "path": "components/editor/ai/message-edit-form.tsx", "content": "import { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { useDocumentDragAndDropIntent } from \"@/hooks/use-document-drag-and-drop-intent\";\nimport { useImageUpload } from \"@/hooks/use-image-upload\";\nimport { imageUploadReducer } from \"@/hooks/use-image-upload-reducer\";\nimport { AI_PROMPT_CHARACTER_LIMIT, MAX_IMAGE_FILES, MAX_IMAGE_FILE_SIZE } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData, type ChatMessage } from \"@/types/ai\";\nimport {\n convertJSONContentToPromptData,\n convertPromptDataToJSONContent,\n isEmptyPromptData,\n} from \"@/utils/ai/ai-prompt\";\nimport { JSONContent } from \"@tiptap/react\";\nimport { Check, X } from \"lucide-react\";\nimport { useMemo, useReducer, useState } from \"react\";\nimport CustomTextarea from \"../custom-textarea\";\nimport { DragAndDropImageUploader } from \"./drag-and-drop-image-uploader\";\nimport { ImageUploader } from \"./image-uploader\";\nimport { UploadedImagePreview } from \"./uploaded-image-preview\";\n\ninterface MessageEditFormProps {\n message: ChatMessage;\n onEditSubmit: (newPromptData: AIPromptData) => void;\n onEditCancel: () => void;\n disabled: boolean;\n}\n\nexport function MessageEditForm({\n message,\n onEditSubmit,\n onEditCancel,\n disabled,\n}: MessageEditFormProps) {\n const promptData = message.metadata?.promptData;\n\n const [editJsonContent, setEditJsonContent] = useState(() => {\n if (!promptData) return { type: \"doc\", content: [] };\n return convertPromptDataToJSONContent(promptData);\n });\n\n const [uploadedImages, dispatch] = useReducer(\n imageUploadReducer,\n promptData?.images ? promptData.images.map((img) => ({ ...img, loading: false })) : []\n );\n\n const {\n fileInputRef,\n handleImagesUpload,\n handleImageRemove,\n isSomeImageUploading,\n canUploadMore,\n } = useImageUpload({\n maxFiles: MAX_IMAGE_FILES,\n maxFileSize: MAX_IMAGE_FILE_SIZE,\n images: uploadedImages,\n dispatch,\n });\n\n const newPromptData = useMemo(\n () => convertJSONContentToPromptData(editJsonContent),\n [editJsonContent]\n );\n const isEmptyPrompt = isEmptyPromptData(newPromptData, uploadedImages);\n\n const handleEditConfirm = () => {\n if (isEmptyPrompt) return;\n\n onEditSubmit({\n ...promptData,\n ...newPromptData,\n images: uploadedImages.filter((img) => !img.loading).map(({ url }) => ({ url })),\n });\n };\n\n const { isUserDragging } = useDocumentDragAndDropIntent();\n\n return (\n
\n {isUserDragging && (\n
\n img.loading)}\n />\n
\n )}\n {uploadedImages.length > 0 && !isUserDragging && (\n
\n \n {uploadedImages.map((img, idx) => (\n handleImageRemove(idx)}\n showPreviewOnHover={false}\n />\n ))}\n \n
\n )}\n\n \n\n
\n fileInputRef.current?.click()}\n disabled={!canUploadMore}\n />\n\n
\n \n \n \n \n \n\n \n \n \n \n \n
\n
\n
\n );\n}\n" }, { "path": "components/editor/ai/message.tsx", "content": "import Logo from \"@/assets/logo.svg\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { AIPromptData, type ChatMessage } from \"@/types/ai\";\nimport { buildAIPromptRender } from \"@/utils/ai/ai-prompt\";\nimport ColorPreview from \"../theme-preview/color-preview\";\nimport { ChatImagePreview } from \"./chat-image-preview\";\nimport { ChatThemePreview } from \"./chat-theme-preview\";\nimport { LoadingLogo } from \"./loading-logo\";\nimport { MessageActions } from \"./message-actions\";\nimport { MessageEditForm } from \"./message-edit-form\";\nimport { StreamText } from \"./stream-text\";\n\ntype MessageProps = {\n message: ChatMessage;\n onRetry: () => void;\n isEditing: boolean;\n onEdit: () => void;\n onEditSubmit: (newPromptData: AIPromptData) => void;\n onEditCancel: () => void;\n isLastMessageStreaming: boolean;\n isGeneratingTheme: boolean;\n};\n\nexport default function Message({\n message,\n onRetry,\n isEditing,\n onEdit,\n onEditSubmit,\n onEditCancel,\n isLastMessageStreaming,\n isGeneratingTheme,\n}: MessageProps) {\n const isUser = message.role === \"user\";\n const isAssistant = message.role === \"assistant\";\n\n const showMessageActions = !isLastMessageStreaming;\n\n return (\n
\n
\n \n {isUser && (\n \n )}\n\n {isAssistant && (\n \n )}\n\n {showMessageActions && (\n \n )}\n
\n
\n
\n );\n}\n\ninterface AssistantMessageProps {\n message: ChatMessage;\n isLastMessageStreaming: boolean;\n}\n\nfunction AssistantMessage({ message, isLastMessageStreaming }: AssistantMessageProps) {\n const { themeState } = useEditorStore();\n\n return (\n
\n {isLastMessageStreaming ? (\n
\n \n
\n ) : (\n \n \n
\n )}\n\n
\n {message.parts.map((part, idx) => {\n const { type } = part;\n const key = `message-${message.id}-part-${idx}`;\n\n if (type === \"text\") {\n return (\n \n );\n }\n\n if (type === \"tool-generateTheme\") {\n const { state } = part;\n\n if (state === \"output-available\") {\n const themeStyles = part.output;\n return (\n \n \n
\n \n
\n \n \n );\n }\n\n if (state === \"output-error\") {\n return ;\n }\n\n return ;\n }\n })}\n
\n \n );\n}\n\ninterface UserMessageProps {\n message: ChatMessage;\n isEditing: boolean;\n onRetry: () => void;\n onEdit: () => void;\n onEditSubmit: (newPromptData: AIPromptData) => void;\n onEditCancel: () => void;\n isGeneratingTheme: boolean;\n}\n\nfunction UserMessage({\n message,\n isEditing,\n onEditSubmit,\n onEditCancel,\n isGeneratingTheme,\n}: UserMessageProps) {\n const promptData = message.metadata?.promptData;\n const shouldDisplayMsgContent = promptData?.content?.trim() != \"\";\n\n const getDisplayContent = () => {\n if (promptData) {\n return buildAIPromptRender(promptData);\n }\n\n return message.parts.map((part) => (part.type === \"text\" ? part.text : \"\")).join(\"\");\n };\n\n const msgContent = getDisplayContent();\n\n const getImagesToDisplay = () => {\n const images = promptData?.images ?? [];\n\n if (images.length === 1) {\n return (\n
\n \n
\n );\n } else if (images.length > 1) {\n return (\n
\n {images.map((image, idx) => (\n
\n \n
\n ))}\n
\n );\n }\n\n return null;\n };\n\n const msgImages = getImagesToDisplay();\n\n if (isEditing) {\n return (\n \n );\n }\n\n return (\n
\n {msgImages}\n\n {shouldDisplayMsgContent && (\n \n {msgContent}\n
\n )}\n \n );\n}\n" }, { "path": "components/editor/ai/messages.tsx", "content": "import Logo from \"@/assets/logo.svg\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport { Loader } from \"@/components/loader\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { useChatContext } from \"@/hooks/use-chat-context\";\nimport { useScrollStartEnd } from \"@/hooks/use-scroll-start-end\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData, type ChatMessage } from \"@/types/ai\";\nimport {\n filterMessagesToDisplay,\n getLastAssistantMessage,\n getUserMessages,\n} from \"@/utils/ai/messages\";\nimport { parseAiSdkTransportError } from \"@/lib/ai/parse-ai-sdk-transport-error\";\nimport { X } from \"lucide-react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { LoadingLogo } from \"./loading-logo\";\nimport Message from \"./message\";\n\ntype ChatMessagesProps = {\n messages: ChatMessage[];\n onRetry: (messageIndex: number) => void;\n onEdit: (messageIndex: number) => void;\n onEditSubmit: (messageIndex: number, newPromptData: AIPromptData) => void;\n onEditCancel: () => void;\n editingMessageIndex?: number | null;\n isGeneratingTheme: boolean;\n};\n\nexport function Messages({\n messages,\n onRetry,\n onEdit,\n onEditSubmit,\n onEditCancel,\n editingMessageIndex,\n isGeneratingTheme,\n}: ChatMessagesProps) {\n const { status, error, clearError } = useChatContext();\n const { isScrollStart, isScrollEnd, scrollStartRef, scrollEndRef } = useScrollStartEnd();\n\n const previousUserMsgLength = useRef(\n messages.filter((message) => message.role === \"user\").length\n );\n\n // Scroll to the bottom of the conversation when a new user message is added\n useEffect(() => {\n const scrollEndElement = scrollEndRef.current;\n if (!scrollEndElement) return;\n\n const currentUserMsgCount = getUserMessages(messages).length;\n const didUserMsgCountChange = previousUserMsgLength.current !== currentUserMsgCount;\n\n if (!didUserMsgCountChange && status === \"streaming\") return;\n\n previousUserMsgLength.current = currentUserMsgCount;\n requestAnimationFrame(() => {\n console.log(\"scrolling to end\");\n scrollEndElement.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n });\n }, [messages, status]);\n\n const visibleMessages = useMemo(() => filterMessagesToDisplay(messages), [messages]);\n\n const showLoadingMessage = useMemo(() => {\n const isSubmitted = status === \"submitted\";\n const isStreaming = status === \"streaming\";\n const isError = status === \"error\";\n const lastAssistantMsgHasText = getLastAssistantMessage(messages)?.parts.some(\n (part) => part.type === \"text\" && Boolean(part.text)\n );\n\n return !isError && (isSubmitted || (isStreaming && !lastAssistantMsgHasText));\n }, [status, messages]);\n\n const errorText = useMemo(() => {\n if (!error) return undefined;\n const defaultMessage = \"Failed to generate theme. Please try again.\";\n const normalized = parseAiSdkTransportError(error, defaultMessage);\n return normalized.message ?? defaultMessage;\n }, [error]);\n\n return (\n
\n {/* Top fade out effect when scrolling */}\n \n\n div]:scrollbar-thin relative size-full overflow-hidden\">\n \n
\n
\n {visibleMessages.map((message, index) => {\n const isLastMessage = index === messages.length - 1;\n const isStreaming = status === \"submitted\" || status === \"streaming\";\n const isLastMessageStreaming =\n message.role === \"assistant\" && isStreaming && isLastMessage;\n return (\n onRetry(index)}\n isEditing={editingMessageIndex === index}\n onEdit={() => onEdit(index)}\n onEditSubmit={(newPromptData) => onEditSubmit(index, newPromptData)}\n onEditCancel={onEditCancel}\n isLastMessageStreaming={isLastMessageStreaming}\n isGeneratingTheme={isGeneratingTheme}\n />\n );\n })}\n\n {/* Loading message when AI is generating */}\n {showLoadingMessage && (\n
\n
\n \n
\n\n \n
\n )}\n\n {/* Error message when generating theme fails */}\n {status === \"error\" && error && (\n
\n \n \n
\n\n \n

{errorText}

\n\n \n svg]:size-3\"\n onClick={clearError}\n >\n \n \n \n
\n
\n )}\n
\n
\n \n \n \n\n {/* Bottom fade out effect when scrolling */}\n \n
\n );\n}\n" }, { "path": "components/editor/ai/no-messages-placeholder.tsx", "content": "import { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsContent, TabsList } from \"@/components/ui/tabs\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { cn } from \"@/lib/utils\";\nimport { AIPromptData } from \"@/types/ai\";\nimport { createCurrentThemePrompt, createPromptDataFromPreset } from \"@/utils/ai/ai-prompt\";\nimport { CREATE_PROMPTS, REMIX_PROMPTS, VARIANT_PROMPTS } from \"@/utils/ai/prompts\";\nimport { Blend, PaintRoller, WandSparkles } from \"lucide-react\";\nimport { ComponentProps, Fragment } from \"react\";\nimport TabsTriggerPill from \"../theme-preview/tabs-trigger-pill\";\n\nexport function NoMessagesPlaceholder({\n onGenerateTheme,\n isGeneratingTheme,\n}: {\n onGenerateTheme: (promptData: AIPromptData) => void;\n isGeneratingTheme: boolean;\n}) {\n const { data: session } = authClient.useSession();\n const userName = session?.user.name?.split(\" \")[0];\n const heading = `What can I help you theme${userName ? `, ${userName}` : \"\"}?`;\n\n return (\n
\n

\n {heading}\n

\n\n \n \n \n \n \n Create\n \n \n \n Remix\n \n \n \n Tweak\n \n \n \n\n \n {CREATE_PROMPTS.map((prompt, index) => (\n \n \n onGenerateTheme({\n content: prompt.prompt,\n mentions: [],\n })\n }\n >\n {prompt.displayContent}\n \n {index < CREATE_PROMPTS.length - 1 && }\n \n ))}\n \n\n \n {REMIX_PROMPTS.map((prompt, index) => (\n \n \n onGenerateTheme(createPromptDataFromPreset(prompt.prompt, prompt.basePreset))\n }\n >\n {prompt.displayContent}\n \n {index < REMIX_PROMPTS.length - 1 && }\n \n ))}\n \n\n \n {VARIANT_PROMPTS.map((prompt, index) => (\n \n onGenerateTheme(createCurrentThemePrompt({ prompt: prompt.prompt }))}\n >\n {prompt.displayContent}\n \n {index < VARIANT_PROMPTS.length - 1 && }\n \n ))}\n \n \n
\n );\n}\n\ninterface PromptButtonProps extends ComponentProps {}\n\nfunction PromptButton({ className, children, ...props }: PromptButtonProps) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "components/editor/ai/pill-action-button.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { ComponentProps } from \"react\";\n\nexport interface AIPillActionButtonProps extends ComponentProps {}\n\nexport function PillActionButton({\n className,\n children,\n disabled,\n ...props\n}: AIPillActionButtonProps) {\n return (\n
\n
\n svg]:size-3\",\n className\n )}\n disabled={disabled}\n {...props}\n >\n {children}\n \n
\n );\n}\n" }, { "path": "components/editor/ai/stream-text.tsx", "content": "import { Response } from \"@/components/ai-elements/response\";\n\ninterface StreamTextProps {\n text: string;\n animate?: boolean;\n markdown?: boolean;\n className?: string;\n}\n\nexport function StreamText({\n text,\n animate = false,\n markdown = false,\n className,\n}: StreamTextProps) {\n if (markdown)\n return (\n \n {text}\n \n );\n\n return {text};\n}\n" }, { "path": "components/editor/ai/uploaded-image-preview.tsx", "content": "\"use client\";\n\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { cn } from \"@/lib/utils\";\nimport { Loader, X } from \"lucide-react\";\nimport Image from \"next/image\";\n\ninterface ImagePreviewProps {\n src: string;\n isImageLoading: boolean;\n handleImageRemove: () => void;\n showPreviewOnHover?: boolean;\n}\n\nexport function UploadedImagePreview({\n src,\n isImageLoading,\n handleImageRemove,\n showPreviewOnHover = true,\n}: ImagePreviewProps) {\n if (isImageLoading) {\n return (\n
\n \n
\n );\n }\n\n return (\n \n \n \n \n\n \n \n \n \n \n
\n \n\n {showPreviewOnHover && (\n \n
\n \n
\n \n )}\n \n );\n}\n" }, { "path": "components/editor/code-panel-dialog.tsx", "content": "import CodePanel from \"./code-panel\";\nimport { ThemeEditorState } from \"@/types/editor\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"@/components/ui/revola\";\n\ninterface CodePanelDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n themeEditorState: ThemeEditorState;\n themeId?: string;\n}\n\nexport function CodePanelDialog({ open, onOpenChange, themeEditorState, themeId }: CodePanelDialogProps) {\n return (\n \n \n
\n \n Theme Code\n \n View and copy the code for your theme.\n \n \n \n
\n \n \n );\n}\n" }, { "path": "components/editor/code-panel.tsx", "content": "import { useMemo, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Copy, Check, Heart } from \"lucide-react\";\nimport { ThemeEditorState } from \"@/types/editor\";\nimport { ScrollArea, ScrollBar } from \"../ui/scroll-area\";\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\nimport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n TabsIndicator,\n} from \"@/components/ui/base-ui-tabs\";\nimport {\n Select,\n SelectContent,\n SelectTrigger,\n SelectValue,\n SelectItem,\n} from \"@/components/ui/select\";\nimport { usePostHog } from \"posthog-js/react\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { usePreferencesStore } from \"@/store/preferences-store\";\nimport {\n generateThemeCode,\n generateTailwindConfigCode,\n generateLayoutCode,\n} from \"@/utils/theme-style-generator\";\nimport { useThemePresetStore } from \"@/store/theme-preset-store\";\nimport { useDialogActions } from \"@/hooks/use-dialog-actions\";\nimport { ColorFormat } from \"@/types\";\n\ninterface CodePanelProps {\n themeEditorState: ThemeEditorState;\n themeId?: string;\n}\n\nconst CodePanel: React.FC = ({ themeEditorState, themeId }) => {\n const [registryCopied, setRegistryCopied] = useState(false);\n const [copied, setCopied] = useState(false);\n const [activeTab, setActiveTab] = useState(\"index.css\");\n const posthog = usePostHog();\n const { handleSaveClick } = useDialogActions();\n\n const preset = useEditorStore((state) => state.themeState.preset);\n const colorFormat = usePreferencesStore((state) => state.colorFormat);\n const tailwindVersion = usePreferencesStore((state) => state.tailwindVersion);\n const packageManager = usePreferencesStore((state) => state.packageManager);\n const setColorFormat = usePreferencesStore((state) => state.setColorFormat);\n const setTailwindVersion = usePreferencesStore((state) => state.setTailwindVersion);\n const setPackageManager = usePreferencesStore((state) => state.setPackageManager);\n const hasUnsavedChanges = useEditorStore((state) => state.hasUnsavedChanges);\n\n const isSavedPreset = useThemePresetStore(\n (state) => preset && state.getPreset(preset)?.source === \"SAVED\"\n );\n const getAvailableColorFormats = usePreferencesStore((state) => state.getAvailableColorFormats);\n\n const code = generateThemeCode(themeEditorState, colorFormat, tailwindVersion);\n const configCode = generateTailwindConfigCode(themeEditorState, colorFormat, tailwindVersion);\n const layoutCode = generateLayoutCode(themeEditorState);\n\n const getRegistryCommand = (id: string, isSaved: boolean) => {\n const url = isSaved\n ? `https://tweakcn.com/r/themes/${id}`\n : `https://tweakcn.com/r/themes/${id}.json`;\n switch (packageManager) {\n case \"pnpm\":\n return `pnpm dlx shadcn@latest add ${url}`;\n case \"npm\":\n return `npx shadcn@latest add ${url}`;\n case \"yarn\":\n return `yarn dlx shadcn@latest add ${url}`;\n case \"bun\":\n return `bunx shadcn@latest add ${url}`;\n }\n };\n\n const registryId = themeId ?? preset;\n const isRegistrySaved = !!themeId || !!isSavedPreset;\n\n const copyRegistryCommand = async () => {\n try {\n await navigator.clipboard.writeText(getRegistryCommand(registryId ?? \"default\", isRegistrySaved));\n setRegistryCopied(true);\n setTimeout(() => setRegistryCopied(false), 2000);\n captureCopyEvent(\"COPY_REGISTRY_COMMAND\");\n } catch (err) {\n console.error(\"Failed to copy text:\", err);\n }\n };\n\n const captureCopyEvent = (event: string) => {\n posthog.capture(event, {\n editorType: \"theme\",\n preset,\n colorFormat,\n tailwindVersion,\n });\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n captureCopyEvent(\"COPY_CODE\");\n } catch (err) {\n console.error(\"Failed to copy text:\", err);\n }\n };\n\n const showRegistryCommand = useMemo(() => {\n if (themeId) return true;\n return preset && preset !== \"default\" && !hasUnsavedChanges();\n }, [themeId, preset, hasUnsavedChanges]);\n\n const PackageManagerHeader = ({ actionButton }: { actionButton: React.ReactNode }) => (\n
\n {([\"pnpm\", \"npm\", \"yarn\", \"bun\"] as const).map((pm) => (\n setPackageManager(pm)}\n className={`px-3 py-1.5 text-sm font-medium ${\n packageManager === pm\n ? \"bg-muted text-foreground\"\n : \"text-muted-foreground hover:text-foreground\"\n }`}\n >\n {pm}\n \n ))}\n {actionButton}\n
\n );\n\n return (\n
\n
\n
\n

Theme Code

\n
\n
\n \n {registryCopied ? : }\n \n ) : (\n handleSaveClick()}\n className=\"ml-auto h-8 gap-1\"\n aria-label=\"Save theme\"\n >\n \n Save\n \n )\n }\n />\n
\n {showRegistryCommand ? (\n \n
\n {getRegistryCommand(registryId as string, isRegistrySaved)}\n
\n \n \n ) : (\n
\n Save your theme to get the registry command\n
\n )}\n
\n
\n
\n
\n {\n setTailwindVersion(value);\n if (value === \"4\" && colorFormat === \"hsl\") {\n setColorFormat(\"oklch\");\n }\n if (activeTab === \"tailwind.config.ts\") {\n setActiveTab(\"index.css\");\n }\n }}\n >\n \n \n \n \n Tailwind v3\n Tailwind v4\n \n \n \n
\n \n
\n \n \n index.css\n \n {tailwindVersion === \"3\" && (\n \n tailwind.config.ts\n \n )}\n \n layout.tsx (Next.js)\n \n \n \n\n
\n \n copyToClipboard(\n activeTab === \"index.css\"\n ? code\n : activeTab === \"layout.tsx\"\n ? layoutCode\n : configCode\n )\n }\n className=\"h-8\"\n aria-label={copied ? \"Copied to clipboard\" : \"Copy to clipboard\"}\n >\n {copied ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Copy\n \n )}\n \n
\n
\n\n \n \n \n \n \n \n \n\n {tailwindVersion === \"3\" && (\n \n \n \n \n \n \n \n )}\n\n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default CodePanel;\n" }, { "path": "components/editor/color-picker.tsx", "content": "import { DEBOUNCE_DELAY } from \"@/lib/constants\";\nimport { cn } from \"@/lib/utils\";\nimport { useColorControlFocus } from \"@/store/color-control-focus-store\";\nimport { ColorPickerProps } from \"@/types\";\nimport { debounce } from \"@/utils/debounce\";\nimport React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { ColorSelectorPopover } from \"./color-selector-popover\";\nimport { SectionContext } from \"./section-context\";\n\nconst ColorPicker = ({ color, onChange, label, name }: ColorPickerProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [shouldAnimate, setShouldAnimate] = useState(false);\n const rootRef = useRef(null);\n const textInputRef = useRef(null);\n const animationTimerRef = useRef(null);\n const sectionCtx = useContext(SectionContext);\n const { registerColor, unregisterColor, highlightTarget } = useColorControlFocus();\n\n useEffect(() => {\n if (!name) return;\n registerColor(name, rootRef.current);\n return () => unregisterColor(name);\n }, [name, registerColor, unregisterColor]);\n\n useEffect(() => {\n if (textInputRef.current) {\n textInputRef.current.value = color;\n }\n }, [color]);\n\n const debouncedOnChange = useMemo(\n () =>\n debounce((value: string) => {\n onChange(value);\n }, DEBOUNCE_DELAY),\n [onChange]\n );\n\n const handleColorChange = useCallback(\n (e: React.ChangeEvent) => {\n const newColor = e.target.value;\n debouncedOnChange(newColor);\n },\n [debouncedOnChange]\n );\n\n const handleTextInputChange = useCallback(\n (e: React.ChangeEvent) => {\n const colorString = e.target.value;\n debouncedOnChange(colorString);\n },\n [debouncedOnChange]\n );\n\n useEffect(() => {\n return () => debouncedOnChange.cancel();\n }, [debouncedOnChange]);\n\n const isHighlighted = name && highlightTarget === name;\n\n useEffect(() => {\n if (animationTimerRef.current) {\n clearTimeout(animationTimerRef.current);\n animationTimerRef.current = null;\n }\n\n if (isHighlighted) {\n setShouldAnimate(true);\n sectionCtx?.setIsExpanded(true);\n\n setTimeout(\n () => {\n rootRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n },\n sectionCtx?.isExpanded ? 0 : 100\n );\n\n animationTimerRef.current = setTimeout(() => {\n setShouldAnimate(false);\n animationTimerRef.current = null;\n }, 1500);\n } else {\n setShouldAnimate(false);\n }\n\n return () => {\n if (animationTimerRef.current) {\n clearTimeout(animationTimerRef.current);\n animationTimerRef.current = null;\n }\n };\n }, [isHighlighted, sectionCtx]);\n\n return (\n \n setIsOpen(!isOpen)}\n >\n \n \n\n {label}\n\n
\n \n \n
\n \n );\n};\n\nexport default ColorPicker;\n" }, { "path": "components/editor/color-selector-popover.tsx", "content": "\"use client\";\n\nimport TailwindCSS from \"@/components/icons/tailwind-css\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport { ColorSelectorTab, usePreferencesStore } from \"@/store/preferences-store\";\nimport { TAILWIND_PALETTE } from \"@/utils/registry/tailwind-colors\";\nimport { Check, LayoutGrid, List } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { formatHex, parse } from \"culori\";\nimport { Separator } from \"../ui/separator\";\n\ntype ColorSelectorPopoverProps = {\n currentColor: string;\n onChange: (color: string) => void;\n};\n\nexport function ColorSelectorPopover({ currentColor, onChange }: ColorSelectorPopoverProps) {\n const handleColorSelect = useCallback(\n (color: string) => {\n onChange(color);\n },\n [onChange]\n );\n\n const { setColorSelectorTab, colorSelectorTab } = usePreferencesStore();\n\n const handleTabChange = useCallback(\n (value: string) => {\n setColorSelectorTab(value as ColorSelectorTab);\n },\n [setColorSelectorTab]\n );\n\n const toHex = (c: string) => formatHex(parse(c));\n const isColorSelected = useCallback(\n (color: string) => {\n try {\n return toHex(currentColor) === toHex(color);\n } catch {\n return currentColor === color;\n }\n },\n [currentColor]\n );\n\n return (\n \n \n \n \n \n \n \n \n\n \n \n
\n
\n \n Tailwind v4\n
\n\n \n \n \n \n \n \n \n \n
\n \n\n \n \n \n \n \n No Tailwind color found.\n \n\n {Object.entries(TAILWIND_PALETTE).map(([key, colors]) => {\n const colorName = key.charAt(0).toUpperCase() + key.slice(1);\n return (\n \n {Object.entries(colors).map(([shade, color]) => {\n const isSelected = isColorSelected(color);\n\n return (\n handleColorSelect(color)}\n className=\"flex items-center gap-2\"\n >\n \n {shade === \"DEFAULT\" ? key : `${key}-${shade}`}\n {isSelected && }\n \n );\n })}\n \n );\n })}\n \n \n \n\n \n \n
\n {Object.entries(TAILWIND_PALETTE).map(([key, colors]) => {\n return (\n
\n {Object.entries(colors).map(([shade, color]) => {\n return (\n handleColorSelect(color)}\n className=\"rounded-none\"\n size=\"md\"\n />\n );\n })}\n
\n );\n })}\n
\n \n \n \n \n \n );\n}\n\ninterface ColorSwatchProps extends React.HTMLAttributes {\n isSelected: boolean;\n color: string;\n name: string;\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nfunction ColorSwatch({\n color,\n name,\n className,\n isSelected,\n size = \"sm\",\n ...props\n}: ColorSwatchProps) {\n const sizeClasses = {\n sm: \"size-5\",\n md: \"size-6\",\n lg: \"size-8\",\n };\n\n const isTransparent = color === \"transparent\";\n\n return (\n \n
\n \n );\n}" }, { "path": "components/editor/colors-tab-content.tsx", "content": "\"use client\";\n\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { RefreshCw, Search, X } from \"lucide-react\";\nimport ColorPicker from \"@/components/editor/color-picker\";\nimport ControlSection from \"@/components/editor/control-section\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { cn } from \"@/lib/utils\";\nimport { FocusColorId } from \"@/store/color-control-focus-store\";\nimport { ThemeStyleProps } from \"@/types/theme\";\n\ntype ColorEntry = {\n key: keyof ThemeStyleProps;\n name: FocusColorId;\n label: string;\n};\n\ntype ColorGroup = {\n title: string;\n expanded?: boolean;\n colors: ColorEntry[];\n};\n\nconst COLOR_GROUPS: ColorGroup[] = [\n {\n title: \"Primary\",\n expanded: true,\n colors: [\n { key: \"primary\", name: \"primary\", label: \"Background\" },\n { key: \"primary-foreground\", name: \"primary-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Secondary\",\n expanded: true,\n colors: [\n { key: \"secondary\", name: \"secondary\", label: \"Background\" },\n { key: \"secondary-foreground\", name: \"secondary-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Accent\",\n colors: [\n { key: \"accent\", name: \"accent\", label: \"Background\" },\n { key: \"accent-foreground\", name: \"accent-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Base\",\n colors: [\n { key: \"background\", name: \"background\", label: \"Background\" },\n { key: \"foreground\", name: \"foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Card\",\n colors: [\n { key: \"card\", name: \"card\", label: \"Background\" },\n { key: \"card-foreground\", name: \"card-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Popover\",\n colors: [\n { key: \"popover\", name: \"popover\", label: \"Background\" },\n { key: \"popover-foreground\", name: \"popover-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Muted\",\n colors: [\n { key: \"muted\", name: \"muted\", label: \"Background\" },\n { key: \"muted-foreground\", name: \"muted-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Destructive\",\n colors: [\n { key: \"destructive\", name: \"destructive\", label: \"Background\" },\n { key: \"destructive-foreground\", name: \"destructive-foreground\", label: \"Foreground\" },\n ],\n },\n {\n title: \"Border & Input\",\n colors: [\n { key: \"border\", name: \"border\", label: \"Border\" },\n { key: \"input\", name: \"input\", label: \"Input\" },\n { key: \"ring\", name: \"ring\", label: \"Ring\" },\n ],\n },\n {\n title: \"Chart\",\n colors: [\n { key: \"chart-1\", name: \"chart-1\", label: \"Chart 1\" },\n { key: \"chart-2\", name: \"chart-2\", label: \"Chart 2\" },\n { key: \"chart-3\", name: \"chart-3\", label: \"Chart 3\" },\n { key: \"chart-4\", name: \"chart-4\", label: \"Chart 4\" },\n { key: \"chart-5\", name: \"chart-5\", label: \"Chart 5\" },\n ],\n },\n {\n title: \"Sidebar\",\n colors: [\n { key: \"sidebar\", name: \"sidebar\", label: \"Background\" },\n { key: \"sidebar-foreground\", name: \"sidebar-foreground\", label: \"Foreground\" },\n { key: \"sidebar-primary\", name: \"sidebar-primary\", label: \"Primary\" },\n { key: \"sidebar-primary-foreground\", name: \"sidebar-primary-foreground\", label: \"Primary FG\" },\n { key: \"sidebar-accent\", name: \"sidebar-accent\", label: \"Accent\" },\n { key: \"sidebar-accent-foreground\", name: \"sidebar-accent-foreground\", label: \"Accent FG\" },\n { key: \"sidebar-border\", name: \"sidebar-border\", label: \"Border\" },\n { key: \"sidebar-ring\", name: \"sidebar-ring\", label: \"Ring\" },\n ],\n },\n];\n\n// Maps sidebar color keys to their base counterparts\nconst SIDEBAR_SYNC_MAP: Partial> = {\n sidebar: \"background\",\n \"sidebar-foreground\": \"foreground\",\n \"sidebar-primary\": \"primary\",\n \"sidebar-primary-foreground\": \"primary-foreground\",\n \"sidebar-accent\": \"accent\",\n \"sidebar-accent-foreground\": \"accent-foreground\",\n \"sidebar-border\": \"border\",\n \"sidebar-ring\": \"ring\",\n};\n\n// Reverse map: base key → sidebar key\nconst BASE_TO_SIDEBAR_MAP = Object.fromEntries(\n Object.entries(SIDEBAR_SYNC_MAP).map(([sidebar, base]) => [base, sidebar])\n) as Partial>;\n\ninterface ColorsTabContentProps {\n currentStyles: ThemeStyleProps;\n updateStyle: (key: K, value: ThemeStyleProps[K]) => void;\n updateStyles: (updates: Partial) => void;\n}\n\nexport function ColorsTabContent({ currentStyles, updateStyle, updateStyles }: ColorsTabContentProps) {\n const [search, setSearch] = useState(\"\");\n const [sidebarSyncEnabled, setSidebarSyncEnabled] = useState(false);\n\n // Sync all sidebar colors to their base counterparts in a single batch\n const syncSidebarToBase = useCallback(() => {\n const updates: Partial = {};\n for (const [sidebarKey, baseKey] of Object.entries(SIDEBAR_SYNC_MAP)) {\n const baseValue = currentStyles[baseKey as keyof ThemeStyleProps];\n if (baseValue !== undefined) {\n (updates as Record)[sidebarKey] = baseValue;\n }\n }\n updateStyles(updates);\n }, [currentStyles, updateStyles]);\n\n const toggleSidebarSync = useCallback(() => {\n setSidebarSyncEnabled((prev) => !prev);\n }, []);\n\n // Sync sidebar colors when toggle is turned on\n useEffect(() => {\n if (sidebarSyncEnabled) {\n syncSidebarToBase();\n }\n // Only run when sync is toggled on, not when syncSidebarToBase changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sidebarSyncEnabled]);\n\n // Keep sidebar in sync when base colors change while sync is enabled\n const wrappedUpdateStyle = useCallback(\n (key: K, value: ThemeStyleProps[K]) => {\n // If sync is on and a base color changed, batch both updates together\n if (sidebarSyncEnabled && key in BASE_TO_SIDEBAR_MAP) {\n const sidebarKey = BASE_TO_SIDEBAR_MAP[key]!;\n updateStyles({\n [key]: value,\n [sidebarKey]: value,\n } as Partial);\n } else {\n updateStyle(key, value);\n }\n },\n [updateStyle, updateStyles, sidebarSyncEnabled]\n );\n\n const filteredGroups = useMemo(() => {\n if (!search.trim()) return COLOR_GROUPS;\n\n const query = search.toLowerCase();\n return COLOR_GROUPS.map((group) => ({\n ...group,\n expanded: true,\n colors: group.colors.filter(\n (c) =>\n c.label.toLowerCase().includes(query) ||\n c.name.toLowerCase().includes(query) ||\n group.title.toLowerCase().includes(query)\n ),\n })).filter((group) => group.colors.length > 0);\n }, [search]);\n\n return (\n
\n
\n
\n \n setSearch(e.target.value)}\n placeholder=\"Search colors...\"\n className=\"text-foreground placeholder:text-muted-foreground h-9 min-w-0 flex-1 bg-transparent text-sm outline-none\"\n />\n {search && (\n setSearch(\"\")}\n className=\"text-muted-foreground hover:text-foreground shrink-0 transition-colors\"\n >\n \n \n )}\n
\n
\n\n \n {filteredGroups.length === 0 && (\n

No colors found

\n )}\n {filteredGroups.map((group) => (\n \n \n \n \n {sidebarSyncEnabled ? \"Sync on\" : \"Sync\"}\n \n \n \n ) : undefined\n }\n >\n {group.colors.map((color) => (\n wrappedUpdateStyle(color.key, value as ThemeStyleProps[typeof color.key])}\n label={color.label}\n />\n ))}\n \n ))}\n \n
\n );\n}\n" }, { "path": "components/editor/contrast-checker.tsx", "content": "import { useTheme } from \"@/components/theme-provider\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\nimport { ThemeStyleProps } from \"@/types/theme\";\nimport { AlertTriangle, Check, Contrast, Moon, Sun } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { useContrastChecker } from \"../../hooks/use-contrast-checker\";\nimport { Button } from \"../ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/tooltip\";\n\ntype ContrastCheckerProps = {\n currentStyles: ThemeStyleProps;\n};\n\nconst MIN_CONTRAST_RATIO = 4.5;\n\ntype ColorCategory = \"content\" | \"interactive\" | \"functional\";\n\ntype ColorPair = {\n id: string;\n foregroundId: keyof ThemeStyleProps;\n backgroundId: keyof ThemeStyleProps;\n foreground: string | undefined;\n background: string | undefined;\n label: string;\n category: ColorCategory;\n};\n\nconst ContrastChecker = ({ currentStyles }: ContrastCheckerProps) => {\n const [filter, setFilter] = useState<\"all\" | \"issues\">(\"all\");\n const { theme, toggleTheme } = useTheme();\n\n const colorPairsToCheck: ColorPair[] = [\n // Content - Base, background, cards, containers\n {\n id: \"base\",\n foregroundId: \"foreground\",\n backgroundId: \"background\",\n foreground: currentStyles?.[\"foreground\"],\n background: currentStyles?.[\"background\"],\n label: \"Base\",\n category: \"content\",\n },\n {\n id: \"card\",\n foregroundId: \"card-foreground\",\n backgroundId: \"card\",\n foreground: currentStyles?.[\"card-foreground\"],\n background: currentStyles?.[\"card\"],\n label: \"Card\",\n category: \"content\",\n },\n {\n id: \"popover\",\n foregroundId: \"popover-foreground\",\n backgroundId: \"popover\",\n foreground: currentStyles?.[\"popover-foreground\"],\n background: currentStyles?.[\"popover\"],\n label: \"Popover\",\n category: \"content\",\n },\n {\n id: \"muted\",\n foregroundId: \"muted-foreground\",\n backgroundId: \"muted\",\n foreground: currentStyles?.[\"muted-foreground\"],\n background: currentStyles?.[\"muted\"],\n label: \"Muted\",\n category: \"content\",\n },\n\n // Interactive - Buttons, links, actions\n {\n id: \"primary\",\n foregroundId: \"primary-foreground\",\n backgroundId: \"primary\",\n foreground: currentStyles?.[\"primary-foreground\"],\n background: currentStyles?.[\"primary\"],\n label: \"Primary\",\n category: \"interactive\",\n },\n {\n id: \"secondary\",\n foregroundId: \"secondary-foreground\",\n backgroundId: \"secondary\",\n foreground: currentStyles?.[\"secondary-foreground\"],\n background: currentStyles?.[\"secondary\"],\n label: \"Secondary\",\n category: \"interactive\",\n },\n {\n id: \"accent\",\n foregroundId: \"accent-foreground\",\n backgroundId: \"accent\",\n foreground: currentStyles?.[\"accent-foreground\"],\n background: currentStyles?.[\"accent\"],\n label: \"Accent\",\n category: \"interactive\",\n },\n\n // Functional - Sidebar, destructive, special purposes\n {\n id: \"destructive\",\n foregroundId: \"destructive-foreground\",\n backgroundId: \"destructive\",\n foreground: currentStyles?.[\"destructive-foreground\"],\n background: currentStyles?.[\"destructive\"],\n label: \"Destructive\",\n category: \"functional\",\n },\n {\n id: \"sidebar\",\n foregroundId: \"sidebar-foreground\",\n backgroundId: \"sidebar\",\n foreground: currentStyles?.[\"sidebar-foreground\"],\n background: currentStyles?.[\"sidebar\"],\n label: \"Sidebar Base\",\n category: \"functional\",\n },\n {\n id: \"sidebar-primary\",\n foregroundId: \"sidebar-primary-foreground\",\n backgroundId: \"sidebar-primary\",\n foreground: currentStyles?.[\"sidebar-primary-foreground\"],\n background: currentStyles?.[\"sidebar-primary\"],\n label: \"Sidebar Primary\",\n category: \"functional\",\n },\n {\n id: \"sidebar-accent\",\n foregroundId: \"sidebar-accent-foreground\",\n backgroundId: \"sidebar-accent\",\n foreground: currentStyles?.[\"sidebar-accent-foreground\"],\n background: currentStyles?.[\"sidebar-accent\"],\n label: \"Sidebar Accent\",\n category: \"functional\",\n },\n ];\n\n const validColorPairsToCheck = colorPairsToCheck.filter(\n (pair): pair is ColorPair & { foreground: string; background: string } =>\n !!pair.foreground && !!pair.background\n );\n const contrastResults = useContrastChecker(validColorPairsToCheck);\n\n const getContrastResult = (pairId: string) => {\n return contrastResults?.find((res) => res.id === pairId);\n };\n\n const totalIssues = contrastResults?.filter(\n (result) => result.contrastRatio < MIN_CONTRAST_RATIO\n ).length;\n\n const filteredPairs =\n filter === \"all\"\n ? colorPairsToCheck\n : colorPairsToCheck.filter((pair) => {\n const result = getContrastResult(pair.id);\n return result && result.contrastRatio < MIN_CONTRAST_RATIO;\n });\n\n // Group color pairs by category\n const categoryLabels: Record = {\n content: \"Content & Containers\",\n interactive: \"Interactive Elements\",\n functional: \"Navigation & Functional\",\n };\n\n const categories: ColorCategory[] = [\"content\", \"interactive\", \"functional\"];\n const groupedPairs = categories\n .map((category) => ({\n category,\n label: categoryLabels[category],\n pairs: filteredPairs.filter((pair) => pair.category === category),\n }))\n .filter((group) => group.pairs.length > 0);\n\n return (\n \n \n \n \n \n
\n \n Contrast Checker\n \n WCAG 2.0 AA requires a contrast ratio of at least {MIN_CONTRAST_RATIO}:1{\" • \"}\n \n Learn more\n \n \n \n\n
\n \n \n toggleTheme({ x: e.clientX, y: e.clientY })}\n >\n {theme === \"light\" ? (\n \n ) : (\n \n )}\n \n \n \n

Toggle theme

\n \n \n setFilter(\"all\")}\n >\n All\n \n setFilter(\"issues\")}\n >\n \n Issues ({totalIssues})\n \n
\n
\n\n \n
\n {groupedPairs.map((group) => (\n
\n
\n

{group.label}

\n \n
\n\n
\n {group.pairs.map((pair) => {\n const result = getContrastResult(pair.id);\n const isValid =\n result?.contrastRatio !== undefined &&\n result?.contrastRatio >= MIN_CONTRAST_RATIO;\n const contrastRatio = result?.contrastRatio?.toFixed(2) ?? \"N/A\";\n return (\n \n \n
\n \n {pair.label}\n {!isValid && }\n \n \n {isValid ? (\n <>\n \n {contrastRatio}\n \n ) : (\n <>\n \n {contrastRatio}\n \n )}\n \n
\n
\n
\n
\n
\n
\n Background\n \n {pair.background}\n \n
\n
\n
\n
\n
\n Foreground\n \n {pair.foreground}\n \n
\n
\n
\n \n {pair.foreground && pair.background ? (\n
\n \n Aa\n

\n \n Sample Text\n

\n
\n ) : (\n

Preview

\n )}\n
\n
\n \n \n );\n })}\n
\n \n ))}\n \n \n \n \n );\n};\n\nexport default ContrastChecker;\n" }, { "path": "components/editor/control-section.tsx", "content": "import React, { useState } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { ControlSectionProps } from \"@/types\";\nimport { SectionContext } from \"./section-context\";\n\nconst ControlSection = ({ title, children, expanded = false, className, headerAction }: ControlSectionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n\n return (\n setIsExpanded((prev) => !prev),\n }}\n >\n
\n
\n setIsExpanded(!isExpanded)}\n aria-label={isExpanded ? \"Collapse section\" : \"Expand section\"}\n >\n
\n \n \n {title}\n \n
\n \n {headerAction}\n
\n\n \n
{children}
\n
\n \n \n );\n};\n\nexport default ControlSection;\n" }, { "path": "components/editor/css-import-dialog.tsx", "content": "import { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"@/components/ui/revola\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { AlertCircle } from \"lucide-react\";\nimport React, { useState } from \"react\";\n\ninterface CssImportDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onImport: (css: string) => void;\n}\n\nconst CssImportDialog: React.FC = ({ open, onOpenChange, onImport }) => {\n const [cssText, setCssText] = useState(\"\");\n const [error, setError] = useState(null);\n\n const handleImport = () => {\n // Basic validation - check if the CSS contains some expected variables\n if (!cssText.trim()) {\n setError(\"Please enter CSS content\");\n return;\n }\n\n try {\n // Here you would add more sophisticated CSS parsing validation\n // For now we'll just do a simple check\n if (!cssText.includes(\"--\") || !cssText.includes(\":\")) {\n setError(\n \"Invalid CSS format. CSS should contain variable definitions like --primary: #color\"\n );\n return;\n }\n\n onImport(cssText);\n setCssText(\"\");\n setError(null);\n onOpenChange(false);\n } catch {\n setError(\"Failed to parse CSS. Please check your syntax.\");\n }\n };\n\n const handleClose = () => {\n setCssText(\"\");\n setError(null);\n onOpenChange(false);\n };\n\n return (\n \n \n [data-slot=scroll-area-viewport]]:pb-2 [&>[data-slot=scroll-area-viewport]>div]:space-y-6\">\n \n Import Custom CSS\n \n Paste your CSS file below to customize the theme colors. Make sure to include\n variables like --primary, --background, etc.\n \n \n\n
\n {error && (\n \n \n {error}\n \n )}\n {\n setCssText(e.target.value);\n if (error) setError(null);\n }}\n />\n
\n \n\n \n \n \n \n \n \n );\n};\n\nexport default CssImportDialog;\n" }, { "path": "components/editor/custom-textarea.tsx", "content": "\"use client\";\n\nimport { suggestion } from \"@/components/editor/mention-suggestion\";\nimport { toast } from \"@/hooks/use-toast\";\nimport { cn } from \"@/lib/utils\";\nimport CharacterCount from \"@tiptap/extension-character-count\";\nimport Mention from \"@tiptap/extension-mention\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { EditorContent, JSONContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect } from \"react\";\n\ninterface CustomTextareaProps {\n className?: string;\n disabled?: boolean;\n canSubmit?: boolean;\n onContentChange: (jsonContent: JSONContent) => void;\n onSubmit: () => void;\n onImagesPaste?: (files: File[]) => void;\n characterLimit?: number;\n initialEditorContent?: JSONContent | null;\n externalEditorContent?: JSONContent | null;\n isStreamingContent?: boolean;\n}\n\nexport default function CustomTextarea({\n className,\n disabled = false,\n canSubmit = false,\n onContentChange,\n onSubmit,\n onImagesPaste,\n characterLimit,\n initialEditorContent,\n externalEditorContent,\n isStreamingContent = false,\n}: CustomTextareaProps) {\n const editor = useEditor({\n immediatelyRender: false,\n editable: !disabled,\n extensions: [\n StarterKit,\n Mention.configure({\n HTMLAttributes: {\n class: \"mention\",\n },\n suggestion: suggestion,\n }),\n Placeholder.configure({\n placeholder: \"Describe your theme...\",\n emptyEditorClass:\n \"cursor-text before:content-[attr(data-placeholder)] before:absolute before:inset-x-1 before:top-1 before:opacity-50 before-pointer-events-none\",\n }),\n CharacterCount.configure({\n limit: characterLimit,\n }),\n ],\n autofocus: !disabled,\n editorProps: {\n attributes: {\n class: cn(\n \"min-w-0 min-h-[50px] max-h-[120px] wrap-anywhere text-foreground/90 scrollbar-thin overflow-y-auto w-full bg-background p-1 text-sm focus-visible:outline-none max-sm:text-[16px]! transition-all\",\n disabled && \"opacity-75 pointer-events-none\",\n className\n ),\n },\n handleKeyDown: (view, event) => {\n if (disabled) {\n event.preventDefault();\n return true;\n }\n\n if (event.key === \"Enter\" && !event.shiftKey && !disabled && canSubmit) {\n const mentionPluginKey = Mention.options.suggestion.pluginKey;\n\n if (!mentionPluginKey) {\n console.error(\"Mention plugin key not found.\");\n return false;\n }\n\n const { state } = view;\n const mentionState = mentionPluginKey.getState(state);\n\n if (mentionState?.active) {\n return false;\n } else {\n event.preventDefault();\n onSubmit();\n return true;\n }\n }\n return false;\n },\n handlePaste: (_view, event) => {\n if (disabled) {\n event.preventDefault();\n return true;\n }\n\n if (!characterLimit) return false;\n\n const clipboardData = event.clipboardData;\n if (!clipboardData) return false;\n\n // Check for image files\n if (onImagesPaste) {\n const files = Array.from(clipboardData.files);\n const imageFiles = files.filter((file) => file.type.startsWith(\"image/\"));\n\n if (imageFiles.length > 0) {\n event.preventDefault();\n onImagesPaste(imageFiles);\n return true;\n }\n }\n\n const pastedText = clipboardData.getData(\"text/plain\");\n const currentCharacterCount = editor?.storage.characterCount.characters() || 0;\n const totalCharacters = currentCharacterCount + pastedText.length;\n\n if (totalCharacters > characterLimit) {\n event.preventDefault();\n toast({\n title: \"Text too long\",\n description: `The pasted content would exceed the ${characterLimit} character limit.`,\n variant: \"destructive\",\n });\n return true;\n }\n\n return false;\n },\n },\n content: initialEditorContent || \"\",\n onCreate: ({ editor }) => {\n if (disabled) return;\n editor.commands.focus(\"end\");\n },\n onUpdate: ({ editor }) => {\n const jsonContent = editor.getJSON();\n onContentChange(jsonContent);\n },\n });\n\n useEffect(() => {\n if (!editor) return;\n editor.setEditable(!disabled);\n if (disabled) editor.commands.blur();\n else editor.commands.focus(\"end\");\n }, [disabled, editor]);\n\n // Stream external content into the editor\n useEffect(() => {\n if (!editor || !externalEditorContent || !isStreamingContent) return;\n\n try {\n const currentContent = JSON.stringify(editor.getJSON());\n const nextContent = JSON.stringify(externalEditorContent);\n if (currentContent === nextContent) return;\n\n // Preserve cursor position at the end\n editor.commands.setContent(externalEditorContent, false);\n editor.commands.focus(\"end\");\n } catch (_e) {\n // If setContent fails for any reason, silently ignore; user can keep typing\n }\n }, [externalEditorContent, editor, isStreamingContent]);\n\n if (!editor) {\n return null;\n }\n\n const characterCount = editor.storage.characterCount.characters();\n const isLimitExceeded = characterLimit && characterCount > characterLimit;\n const shouldShowCount = characterLimit && characterCount >= characterLimit * 0.9;\n\n return (\n
\n \n {shouldShowCount && (\n
\n \n {characterCount} / {characterLimit}\n \n
\n )}\n
\n );\n}\n" }, { "path": "components/editor/editor.tsx", "content": "\"use client\";\n\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"@/components/ui/resizable\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { DialogActionsProvider } from \"@/hooks/use-dialog-actions\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { Theme, ThemeStyles } from \"@/types/theme\";\nimport { Sliders } from \"lucide-react\";\nimport React, { use, useEffect } from \"react\";\nimport { ActionBar } from \"./action-bar/action-bar\";\nimport ThemeControlPanel from \"./theme-control-panel\";\nimport ThemePreviewPanel from \"./theme-preview-panel\";\n\ninterface EditorProps {\n themePromise: Promise;\n}\n\nconst isThemeStyles = (styles: unknown): styles is ThemeStyles => {\n return (\n !!styles &&\n typeof styles === \"object\" &&\n styles !== null &&\n \"light\" in styles &&\n \"dark\" in styles\n );\n};\n\nconst Editor: React.FC = ({ themePromise }) => {\n const themeState = useEditorStore((state) => state.themeState);\n const setThemeState = useEditorStore((state) => state.setThemeState);\n const isMobile = useIsMobile();\n\n const initialTheme = themePromise ? use(themePromise) : null;\n\n const handleStyleChange = React.useCallback(\n (newStyles: ThemeStyles) => {\n const prev = useEditorStore.getState().themeState;\n setThemeState({ ...prev, styles: newStyles });\n },\n [setThemeState]\n );\n\n useEffect(() => {\n if (initialTheme && isThemeStyles(initialTheme.styles)) {\n const prev = useEditorStore.getState().themeState;\n setThemeState({\n ...prev,\n styles: initialTheme.styles,\n preset: initialTheme.id,\n });\n }\n }, [initialTheme, setThemeState]);\n\n if (initialTheme && !isThemeStyles(initialTheme.styles)) {\n return (\n
\n Fetched theme data is invalid.\n
\n );\n }\n\n const styles = themeState.styles;\n\n // Mobile layout\n if (isMobile) {\n return (\n \n
\n
\n \n \n \n \n Controls\n \n \n Preview\n \n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n
\n \n );\n }\n\n // Desktop layout\n return (\n \n
\n
\n \n \n
\n \n
\n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n );\n};\n\nexport default Editor;\n" }, { "path": "components/editor/font-picker.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { FilterFontCategory, useFontSearch } from \"@/hooks/use-font-search\";\nimport { cn } from \"@/lib/utils\";\nimport { FontInfo } from \"@/types/fonts\";\nimport { buildFontFamily, getDefaultWeights, waitForFont } from \"@/utils/fonts\";\nimport { loadGoogleFont } from \"@/utils/fonts/google-fonts\";\nimport { Check, ChevronDown, FunnelX, Loader2 } from \"lucide-react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TooltipWrapper } from \"../tooltip-wrapper\";\n\nconst POPULAR_FONTS: Record = {\n \"sans-serif\": [\n { family: \"Inter\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Roboto\", category: \"sans-serif\", variants: [\"100\", \"300\", \"400\", \"500\", \"700\", \"900\"], variable: false },\n { family: \"Open Sans\", category: \"sans-serif\", variants: [\"300\", \"400\", \"500\", \"600\", \"700\", \"800\"], variable: true },\n { family: \"Poppins\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: false },\n { family: \"Montserrat\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Lato\", category: \"sans-serif\", variants: [\"100\", \"300\", \"400\", \"700\", \"900\"], variable: false },\n { family: \"Nunito\", category: \"sans-serif\", variants: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Raleway\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"DM Sans\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Plus Jakarta Sans\", category: \"sans-serif\", variants: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"], variable: true },\n { family: \"Geist\", category: \"sans-serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n ],\n serif: [\n { family: \"Playfair Display\", category: \"serif\", variants: [\"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Merriweather\", category: \"serif\", variants: [\"300\", \"400\", \"700\", \"900\"], variable: false },\n { family: \"Lora\", category: \"serif\", variants: [\"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"PT Serif\", category: \"serif\", variants: [\"400\", \"700\"], variable: false },\n { family: \"Noto Serif\", category: \"serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Source Serif 4\", category: \"serif\", variants: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Libre Baskerville\", category: \"serif\", variants: [\"400\", \"700\"], variable: false },\n { family: \"EB Garamond\", category: \"serif\", variants: [\"400\", \"500\", \"600\", \"700\", \"800\"], variable: true },\n { family: \"Crimson Text\", category: \"serif\", variants: [\"400\", \"600\", \"700\"], variable: false },\n { family: \"Bitter\", category: \"serif\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n ],\n monospace: [\n { family: \"JetBrains Mono\", category: \"monospace\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"], variable: true },\n { family: \"Fira Code\", category: \"monospace\", variants: [\"300\", \"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"Source Code Pro\", category: \"monospace\", variants: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Roboto Mono\", category: \"monospace\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"IBM Plex Mono\", category: \"monospace\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\"], variable: false },\n { family: \"Space Mono\", category: \"monospace\", variants: [\"400\", \"700\"], variable: false },\n { family: \"Ubuntu Mono\", category: \"monospace\", variants: [\"400\", \"700\"], variable: false },\n { family: \"Inconsolata\", category: \"monospace\", variants: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Geist Mono\", category: \"monospace\", variants: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"], variable: true },\n { family: \"Anonymous Pro\", category: \"monospace\", variants: [\"400\", \"700\"], variable: false },\n { family: \"Red Hat Mono\", category: \"monospace\", variants: [\"300\", \"400\", \"500\", \"600\", \"700\"], variable: true },\n ],\n display: [\n { family: \"Bebas Neue\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Abril Fatface\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Righteous\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Fredoka\", category: \"display\", variants: [\"300\", \"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"Lobster\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Comfortaa\", category: \"display\", variants: [\"300\", \"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"Alfa Slab One\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Bungee\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Lilita One\", category: \"display\", variants: [\"400\"], variable: false },\n { family: \"Permanent Marker\", category: \"display\", variants: [\"400\"], variable: false },\n ],\n handwriting: [\n { family: \"Dancing Script\", category: \"handwriting\", variants: [\"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"Pacifico\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Caveat\", category: \"handwriting\", variants: [\"400\", \"500\", \"600\", \"700\"], variable: true },\n { family: \"Satisfy\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Great Vibes\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Sacramento\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Kalam\", category: \"handwriting\", variants: [\"300\", \"400\", \"700\"], variable: false },\n { family: \"Patrick Hand\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Indie Flower\", category: \"handwriting\", variants: [\"400\"], variable: false },\n { family: \"Shadows Into Light\", category: \"handwriting\", variants: [\"400\"], variable: false },\n ],\n};\n\ninterface FontPickerProps {\n value?: string;\n category?: FilterFontCategory;\n onSelect: (font: FontInfo) => void;\n placeholder?: string;\n className?: string;\n}\n\nfunction FontItem({\n font,\n isSelected,\n isLoading,\n onSelect,\n selectedRef,\n}: {\n font: FontInfo;\n isSelected: boolean;\n isLoading: boolean;\n onSelect: (font: FontInfo) => void;\n selectedRef: React.Ref | null;\n}) {\n const fontFamily = buildFontFamily(font.family, font.category);\n\n return (\n onSelect(font)}\n disabled={isLoading}\n onMouseEnter={() => loadGoogleFont(font.family, [\"400\"])}\n ref={selectedRef}\n >\n
\n \n {font.family}\n {isLoading && }\n \n
\n {font.category}\n {font.variable && (\n \n •\n Variable\n \n )}\n
\n
\n {isSelected && }\n \n );\n}\n\nexport function FontPicker({\n value,\n category,\n onSelect,\n placeholder = \"Search fonts...\",\n className,\n}: FontPickerProps) {\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState(\"\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [selectedCategory, setSelectedCategory] = useState(category || \"all\");\n const [loadingFont, setLoadingFont] = useState(null);\n const scrollRef = useRef(null);\n\n const selectedFontRef = useRef(null);\n const hasScrolledToSelectedFont = useRef(false);\n\n const debouncedSetSearchQuery = useDebouncedCallback(setSearchQuery, 300);\n\n useEffect(() => {\n debouncedSetSearchQuery(inputValue);\n }, [inputValue, debouncedSetSearchQuery]);\n\n const fontQuery = useFontSearch({\n query: searchQuery,\n category: selectedCategory,\n limit: 15,\n enabled: open,\n });\n\n useEffect(() => {\n if (!open) return;\n scrollRef.current?.scrollTo({ top: 0 });\n }, [selectedCategory, searchQuery, open]);\n\n useEffect(() => {\n if (open && fontQuery.data && !hasScrolledToSelectedFont.current) {\n requestAnimationFrame(() => {\n selectedFontRef.current?.scrollIntoView({\n block: \"center\",\n inline: \"nearest\",\n });\n });\n hasScrolledToSelectedFont.current = true;\n } else if (!open) {\n hasScrolledToSelectedFont.current = false;\n }\n }, [open, fontQuery.data]);\n\n // Flatten all pages into a single array\n const allFonts = useMemo(() => {\n if (!fontQuery.data) return [];\n return fontQuery.data.pages.flatMap((page) => page.fonts);\n }, [fontQuery.data]);\n\n // Popular fonts for the current category (only shown when not searching)\n const popularFonts = useMemo(() => {\n if (searchQuery) return [];\n if (selectedCategory === \"all\") {\n // Show a mix from sans-serif, serif, monospace\n return [\n ...POPULAR_FONTS[\"sans-serif\"].slice(0, 2),\n ...POPULAR_FONTS[\"serif\"].slice(0, 1),\n ...POPULAR_FONTS[\"monospace\"].slice(0, 1),\n ];\n }\n return POPULAR_FONTS[selectedCategory] || [];\n }, [searchQuery, selectedCategory]);\n\n // Filter out popular fonts from the main list to avoid duplicates\n const remainingFonts = useMemo(() => {\n if (popularFonts.length === 0) return allFonts;\n const popularFamilies = new Set(popularFonts.map((f) => f.family));\n return allFonts.filter((font) => !popularFamilies.has(font.family));\n }, [allFonts, popularFonts]);\n\n // Intersection Observer ref callback for infinite scroll\n const loadMoreRefCallback = useCallback(\n (node: HTMLDivElement | null) => {\n if (!node) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n const entry = entries[0];\n if (entry.isIntersecting && fontQuery.hasNextPage && !fontQuery.isFetchingNextPage) {\n fontQuery.fetchNextPage();\n }\n },\n {\n root: scrollRef.current,\n rootMargin: \"100px\",\n threshold: 0,\n }\n );\n\n observer.observe(node);\n return () => observer.unobserve(node);\n },\n [fontQuery.hasNextPage, fontQuery.isFetchingNextPage, fontQuery.fetchNextPage]\n );\n\n const handleFontSelect = useCallback(\n async (font: FontInfo) => {\n setLoadingFont(font.family);\n\n try {\n const weights = getDefaultWeights(font.variants);\n loadGoogleFont(font.family, weights);\n await waitForFont(font.family, weights[0]);\n } catch (error) {\n console.warn(`Failed to load font ${font.family}:`, error);\n }\n\n setLoadingFont(null);\n onSelect(font);\n },\n [onSelect]\n );\n\n // Get current font info for display\n const currentFont = useMemo(() => {\n if (!value) return null;\n\n // First try to find the font in the search results\n const foundFont = allFonts.find((font: FontInfo) => font.family === value);\n if (foundFont) return foundFont;\n\n // If not found in search results, create a fallback FontInfo object\n // This happens when a font is selected and then the search changes\n const extractedFontName = value.split(\",\")[0].trim().replace(/['\"]/g, \"\");\n\n return {\n family: extractedFontName,\n category: category || \"sans-serif\",\n variants: [\"400\"],\n variable: false,\n } as FontInfo;\n }, [value, allFonts, category]);\n\n return (\n \n \n \n
\n {currentFont ? (\n \n \n {currentFont.family}\n \n \n ) : (\n {placeholder}\n )}\n
\n \n \n \n\n \n \n
\n
\n \n\n {inputValue && (\n \n setInputValue(\"\")}\n className=\"absolute top-2 right-2 size-6\"\n >\n \n \n \n )}\n
\n\n
\n setSelectedCategory(value as FilterFontCategory)}\n >\n \n \n \n \n All Fonts\n Sans Serif Fonts\n Serif Fonts\n Monospace Fonts\n Display Fonts\n Handwriting Fonts\n \n \n
\n
\n\n \n\n
\n {fontQuery.isLoading ? (\n
\n \n Loading fonts...\n
\n ) : allFonts.length === 0 ? (\n No fonts found.\n ) : (\n \n {popularFonts.length > 0 && (\n \n {popularFonts.map((font) => (\n \n ))}\n \n )}\n\n 0 ? \"All Fonts\" : undefined}>\n {remainingFonts.map((font: FontInfo) => (\n \n ))}\n \n\n {/* Load more trigger element */}\n {fontQuery.hasNextPage &&
}\n\n {/* Loading indicator for infinite scroll */}\n {fontQuery.isFetchingNextPage && (\n
\n \n Loading more fonts...\n
\n )}\n \n )}\n
\n \n \n \n );\n}\n" }, { "path": "components/editor/hsl-adjustment-controls.tsx", "content": "\"use client\";\n\nimport React, { useCallback, useMemo, useRef, useEffect, useState } from \"react\";\nimport { SliderWithInput } from \"./slider-with-input\";\nimport { useEditorStore } from \"../../store/editor-store\";\nimport { COMMON_STYLES, defaultThemeState } from \"../../config/theme\";\nimport { ThemeEditorState } from \"@/types/editor\";\nimport { converter, formatHex, Hsl } from \"culori\";\nimport { debounce } from \"@/utils/debounce\";\nimport { isDeepEqual } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { HslPresetButton } from \"./hsl-preset-button\";\nimport { ChevronDown } from \"lucide-react\";\n\n// Adjusts a color by modifying HSL values\nfunction adjustColorByHsl(\n color: string,\n hueShift: number,\n saturationScale: number,\n lightnessScale: number\n): string {\n const hsl = converter(\"hsl\")(color);\n const h = hsl?.h;\n const s = hsl?.s;\n const l = hsl?.l;\n\n if (h === undefined || s === undefined || l === undefined) {\n return color;\n }\n\n const adjustedHsl = {\n h: (((h + hueShift) % 360) + 360) % 360,\n s: Math.min(1, Math.max(0, s * saturationScale)),\n l: Math.min(1, Math.max(0.1, l * lightnessScale)),\n };\n\n const out = converter(\"hsl\")(adjustedHsl as Hsl);\n return formatHex(out);\n}\n\n// Preset HSL adjustment values\nconst HSL_PRESETS = [\n // Hue Adjustments\n { label: \"Hue (-120°)\", hueShift: -120, saturationScale: 1, lightnessScale: 1 },\n { label: \"Hue (-60°)\", hueShift: -60, saturationScale: 1, lightnessScale: 1 },\n { label: \"Hue (+60°)\", hueShift: 60, saturationScale: 1, lightnessScale: 1 },\n { label: \"Hue (+120°)\", hueShift: 120, saturationScale: 1, lightnessScale: 1 },\n { label: \"Hue Invert\", hueShift: 180, saturationScale: 1, lightnessScale: 1 },\n\n // Saturation Adjustments\n { label: \"Grayscale\", hueShift: 0, saturationScale: 0, lightnessScale: 1 },\n { label: \"Muted\", hueShift: 0, saturationScale: 0.6, lightnessScale: 1 },\n { label: \"Vibrant\", hueShift: 0, saturationScale: 1.4, lightnessScale: 1 },\n\n // Lightness Adjustments\n { label: \"Dimmer\", hueShift: 0, saturationScale: 1, lightnessScale: 0.8 },\n { label: \"Brighter\", hueShift: 0, saturationScale: 1, lightnessScale: 1.2 },\n\n // Combined Adjustments\n { label: \"H(+30) S(-50) L(-5%)\", hueShift: 30, saturationScale: 0.5, lightnessScale: 0.95 },\n { label: \"H(-20) S(+20) L(+5%)\", hueShift: -20, saturationScale: 1.2, lightnessScale: 1.05 },\n { label: \"H(+20) S(-30) L(-5%)\", hueShift: 20, saturationScale: 0.7, lightnessScale: 0.95 },\n { label: \"H(-10) S(-25) L(+10%)\", hueShift: -10, saturationScale: 0.75, lightnessScale: 1.1 },\n { label: \"H(+60) S(+50) L(+10%)\", hueShift: 60, saturationScale: 1.5, lightnessScale: 1.1 },\n];\n\nconst HslAdjustmentControls = () => {\n const { themeState, setThemeState, saveThemeCheckpoint, themeCheckpoint } = useEditorStore();\n const debouncedUpdateRef = useRef | null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n // Get current HSL adjustments with fallback to defaults\n const currentHslAdjustments = useMemo(\n () => themeState.hslAdjustments ?? defaultThemeState.hslAdjustments!,\n [themeState.hslAdjustments]\n );\n\n // Save checkpoint if HSL adjustments are at default values\n useEffect(() => {\n if (isDeepEqual(themeState.hslAdjustments, defaultThemeState.hslAdjustments)) {\n saveThemeCheckpoint();\n }\n }, [themeState.hslAdjustments, saveThemeCheckpoint]);\n\n // Setup debounced update function\n useEffect(() => {\n debouncedUpdateRef.current = debounce((hslAdjustments: ThemeEditorState[\"hslAdjustments\"]) => {\n const {\n hueShift = defaultThemeState.hslAdjustments!.hueShift,\n saturationScale = defaultThemeState.hslAdjustments!.saturationScale,\n lightnessScale = defaultThemeState.hslAdjustments!.lightnessScale,\n } = hslAdjustments ?? {};\n\n const adjustments = { hueShift, saturationScale, lightnessScale };\n const state = themeCheckpoint ?? themeState;\n const { light: lightStyles, dark: darkStyles } = state.styles;\n\n const updatedLightStyles = Object.keys(lightStyles)\n .filter((key) => !COMMON_STYLES.includes(key))\n .reduce>((acc, key) => {\n const colorKey = key as keyof typeof lightStyles;\n return {\n ...acc,\n [key]: adjustColorByHsl(\n lightStyles[colorKey] || \"\",\n adjustments.hueShift,\n adjustments.saturationScale,\n adjustments.lightnessScale\n ),\n };\n }, {});\n\n const updatedDarkStyles = Object.keys(darkStyles)\n .filter((key) => !COMMON_STYLES.includes(key))\n .reduce>((acc, key) => {\n const colorKey = key as keyof typeof darkStyles;\n return {\n ...acc,\n [key]: adjustColorByHsl(\n darkStyles[colorKey] || \"\",\n adjustments.hueShift,\n adjustments.saturationScale,\n adjustments.lightnessScale\n ),\n };\n }, {});\n\n // Update theme state with all changes\n setThemeState({\n ...themeState,\n hslAdjustments,\n styles: {\n light: { ...lightStyles, ...updatedLightStyles },\n dark: { ...darkStyles, ...updatedDarkStyles },\n },\n });\n }, 10);\n\n return () => debouncedUpdateRef.current?.cancel();\n }, [themeState, setThemeState, themeCheckpoint]);\n\n // Handle HSL value changes\n const handleHslChange = useCallback(\n (property: keyof typeof currentHslAdjustments, value: number) => {\n if (debouncedUpdateRef.current) {\n debouncedUpdateRef.current({\n ...currentHslAdjustments,\n [property]: value,\n });\n }\n },\n [currentHslAdjustments]\n );\n\n const handleBatchHslChange = useCallback((value: typeof currentHslAdjustments) => {\n if (debouncedUpdateRef.current) {\n debouncedUpdateRef.current(value);\n }\n }, []);\n\n const currentStyles = (themeCheckpoint ?? themeState).styles[themeState.currentMode];\n\n return (\n
\n {/* Responsive preset grid */}\n \n {HSL_PRESETS.map((preset) => (\n {\n handleBatchHslChange(preset);\n }}\n />\n ))}\n
\n\n {/* Show/Hide more button - shows if total presets exceed the smallest breakpoint's column count */}\n {HSL_PRESETS.length > 5 && (\n setIsExpanded(!isExpanded)}\n >\n {isExpanded ? \"Hide\" : \"Show more\"} presets\n \n \n )}\n\n handleHslChange(\"hueShift\", value)}\n unit=\"deg\"\n min={-180}\n max={180}\n step={1}\n label=\"Hue\"\n />\n handleHslChange(\"saturationScale\", value)}\n unit=\"x\"\n min={0}\n max={2}\n step={0.01}\n label=\"Saturation\"\n />\n handleHslChange(\"lightnessScale\", value)}\n unit=\"x\"\n min={0.2}\n max={2}\n step={0.01}\n label=\"Lightness\"\n />\n
\n );\n};\n\nexport default HslAdjustmentControls;\n" }, { "path": "components/editor/hsl-preset-button.tsx", "content": "\"use client\";\n\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\n\ninterface HslPresetButtonProps {\n label: string;\n hueShift: number;\n saturationScale: number;\n lightnessScale: number;\n baseBg: string;\n basePrimary: string;\n baseSecondary?: string;\n onClick: () => void;\n selected: boolean;\n adjustColorByHsl: (\n color: string,\n hueShift: number,\n saturationScale: number,\n lightnessScale: number\n ) => string;\n}\n\nexport const HslPresetButton: React.FC = ({\n label,\n hueShift,\n saturationScale,\n lightnessScale,\n baseBg,\n basePrimary,\n baseSecondary = \"#888888\",\n onClick,\n selected,\n adjustColorByHsl,\n}) => {\n const previewBg = adjustColorByHsl(baseBg, hueShift, saturationScale, lightnessScale);\n const previewPrimary = adjustColorByHsl(basePrimary, hueShift, saturationScale, lightnessScale);\n const previewSecondary = adjustColorByHsl(\n baseSecondary,\n hueShift,\n saturationScale,\n lightnessScale\n );\n\n return (\n \n \n \n \n
\n
\n
\n \n
\n
\n {selected && (\n
\n )}\n \n \n \n {label}\n \n \n \n );\n};\n" }, { "path": "components/editor/inspector-class-item.tsx", "content": "\"use client\";\n\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { SquarePen } from \"lucide-react\";\nimport { FocusColorId, useColorControlFocus } from \"@/store/color-control-focus-store\";\nimport { segmentClassName } from \"@/lib/inspector/segment-classname\";\nimport { useEditorStore } from \"@/store/editor-store\";\n\ninterface InspectorClassItemProps {\n className: string;\n}\n\nconst InspectorClassItem = memo(({ className }: InspectorClassItemProps) => {\n const { focusColor } = useColorControlFocus();\n const { themeState } = useEditorStore();\n const styles = themeState.styles[themeState.currentMode];\n const segments = useMemo(() => segmentClassName(className), [className]);\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n const color = segments.value;\n if (color) {\n focusColor(color as FocusColorId);\n }\n },\n [segments.value, focusColor]\n );\n\n const renderSegmentedClassName = useCallback((): React.ReactNode => {\n const parts = [];\n\n if (segments.selector) {\n parts.push(\n \n {segments.selector}:\n \n );\n }\n\n if (segments.prefix) {\n parts.push(\n \n {segments.prefix}\n \n );\n }\n\n if (segments.value) {\n parts.push(\n \n -\n ,\n \n {segments.value}\n \n );\n }\n\n if (segments.opacity) {\n parts.push(\n \n /\n ,\n \n {segments.opacity}\n \n );\n }\n\n return <>{parts};\n }, [segments]);\n\n return (\n \n
\n \n {renderSegmentedClassName()}\n
\n \n
\n );\n});\n\nInspectorClassItem.displayName = \"InspectorClassItem\";\n\nexport default InspectorClassItem;\n" }, { "path": "components/editor/inspector-overlay.tsx", "content": "\"use client\";\n\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { useClassNames } from \"@/hooks/use-theme-inspector-classnames\";\nimport { cn } from \"@/lib/utils\";\nimport { Inspect } from \"lucide-react\";\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport InspectorClassItem from \"./inspector-class-item\";\n\ninterface InspectorState {\n rect: DOMRect | null;\n className: string;\n}\n\ninterface InspectorOverlayProps {\n inspector: InspectorState;\n enabled: boolean;\n rootRef: React.RefObject;\n}\n\nconst InspectorOverlay = ({ inspector, enabled, rootRef }: InspectorOverlayProps) => {\n const classNames = useClassNames(inspector.className);\n\n if (!enabled || !inspector.rect || typeof window === \"undefined\" || !rootRef.current) {\n return null;\n }\n\n // Get the container's bounding rect to convert from viewport coordinates to container-relative coordinates\n const containerRect = rootRef.current.getBoundingClientRect();\n const relativeRect = {\n top: inspector.rect.top - containerRect.top,\n left: inspector.rect.left - containerRect.left,\n width: inspector.rect.width,\n height: inspector.rect.height,\n };\n\n return createPortal(\n \n \n \n \n\n \n
\n \n Inspector\n
\n \n
\n {classNames.map((cls) => (\n \n ))}\n
\n \n ,\n rootRef.current\n );\n};\n\nconst arePropsEqual = (\n prevProps: InspectorOverlayProps,\n nextProps: InspectorOverlayProps\n): boolean => {\n if (prevProps.enabled !== nextProps.enabled) return false;\n if (prevProps.rootRef !== nextProps.rootRef) return false;\n\n const prevRect = prevProps.inspector.rect;\n const nextRect = nextProps.inspector.rect;\n\n if (!prevRect && !nextRect)\n return prevProps.inspector.className === nextProps.inspector.className;\n if (!prevRect || !nextRect) return false;\n\n return (\n prevRect.top === nextRect.top &&\n prevRect.left === nextRect.left &&\n prevRect.width === nextRect.width &&\n prevRect.height === nextRect.height &&\n prevProps.inspector.className === nextProps.inspector.className\n );\n};\n\nexport default React.memo(InspectorOverlay, arePropsEqual);\n" }, { "path": "components/editor/mention-list.tsx", "content": "\"use client\";\n\nimport React, { forwardRef, useEffect, useImperativeHandle, useState, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Define the structure of the theme item object\ninterface ThemeItem {\n id: string;\n label: string;\n}\n\ninterface MentionListProps {\n items: ThemeItem[]; // Update items type to ThemeItem[]\n command: (item: { id: string; label: string }) => void; // Update command type if needed, here passing the whole object\n}\n\n// Use a type for the ref handle if needed, e.g., { onKeyDown: ... }\n// Using `any` for now as in the original code\nexport interface MentionListRef {\n onKeyDown: (props: { event: KeyboardEvent }) => boolean;\n}\n\nexport const MentionList = forwardRef((props, ref) => {\n const [selectedIndex, setSelectedIndex] = useState(0);\n const containerRef = useRef(null);\n const selectedItemRef = useRef(null);\n\n // Function to select item (adapted from reference)\n const selectItem = (index: number) => {\n const item = props.items[index];\n if (item) {\n // Pass the whole item object to the command function\n props.command(item);\n }\n };\n\n // Arrow key handlers using modulo (adapted from reference)\n const upHandler = () => {\n setSelectedIndex((prevIndex) => (prevIndex + props.items.length - 1) % props.items.length);\n };\n\n const downHandler = () => {\n setSelectedIndex((prevIndex) => (prevIndex + 1) % props.items.length);\n };\n\n const enterHandler = () => {\n selectItem(selectedIndex);\n };\n\n useEffect(() => setSelectedIndex(0), [props.items]);\n\n // Auto-scroll effect when selectedIndex changes\n useEffect(() => {\n if (selectedItemRef.current && containerRef.current) {\n selectedItemRef.current.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n }\n }, [selectedIndex]);\n\n useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }) => {\n if (event.key === \"ArrowUp\") {\n // Use modulo handlers\n upHandler();\n return true;\n }\n\n if (event.key === \"ArrowDown\") {\n // Use modulo handlers\n downHandler();\n return true;\n }\n\n if (event.key === \"Enter\") {\n // Use enter handler\n enterHandler();\n return true;\n }\n\n if (event.key === \"Tab\") {\n // Use tab handler\n enterHandler();\n return true;\n }\n\n return false;\n },\n }));\n\n return (\n \n {props.items.length ? (\n props.items.map((item, index) => (\n {\n e.stopPropagation();\n selectItem(index);\n }}\n >\n {item.label}\n \n ))\n ) : (\n \n No result\n
\n )}\n \n );\n});\n\nMentionList.displayName = \"MentionList\";\n" }, { "path": "components/editor/mention-suggestion.ts", "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { ReactRenderer } from \"@tiptap/react\";\nimport tippy from \"tippy.js\";\nimport { MentionList } from \"@/components/editor/mention-list\"; // We'll create this component next\nimport { useThemePresetStore } from \"@/store/theme-preset-store\"; // Import the theme store\n\nexport const suggestion = {\n items: ({ query }: { query: string }) => {\n // Get all presets from the store\n const allPresets = useThemePresetStore.getState().getAllPresets();\n\n // Convert presets object to the required array format { id: string, label: string }\n const themeItems = Object.entries(allPresets).map(([id, preset]) => ({\n id: id, // Use the preset key as the id\n label: preset.label, // Use the preset label\n }));\n\n // Filter based on the query\n return themeItems\n .filter((item) => {\n const labelWithoutSpaces =\n item.label?.replace(/\\s+/g, \"\").toLowerCase() || \"\";\n const queryWithoutSpaces = query.replace(/\\s+/g, \"\").toLowerCase();\n return labelWithoutSpaces.includes(queryWithoutSpaces);\n })\n .slice(0, 7)\n .concat({ id: \"editor:current-changes\", label: \"Current Theme\" }); // Limit to 5 suggestions\n },\n\n render: () => {\n let component: ReactRenderer | null = null;\n let popup: any | null = null;\n\n return {\n onStart: (props: any) => {\n component = new ReactRenderer(MentionList, {\n props,\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy(\"body\", {\n getReferenceClientRect: props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: true,\n interactive: true,\n trigger: \"manual\",\n placement: \"bottom-start\",\n });\n },\n\n onUpdate(props: any) {\n component?.updateProps(props);\n\n if (!props.clientRect) {\n return;\n }\n\n popup?.[0]?.setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown(props: any) {\n if (props.event.key === \"Escape\") {\n popup?.[0]?.hide();\n return true;\n }\n\n // @ts-expect-error - This is a valid way to access the component's methods\n return component?.ref?.onKeyDown(props);\n },\n\n onExit() {\n popup?.[0]?.destroy();\n component?.destroy();\n popup = null;\n component = null;\n },\n };\n },\n};\n" }, { "path": "components/editor/section-context.tsx", "content": "import { createContext } from \"react\";\n\ninterface SectionContextType {\n /** Whether the parent ControlSection is currently expanded */\n isExpanded: boolean;\n /** Set the expanded state explicitly */\n setIsExpanded: (expanded: boolean) => void;\n /** Helper to toggle the expanded state */\n toggleExpanded: () => void;\n}\n\n/**\n * Context that allows descendants of a ControlSection to query or mutate\n * the expanded / collapsed state of their parent section.\n */\nexport const SectionContext = createContext(undefined);\n" }, { "path": "components/editor/shadow-control.tsx", "content": "import React from \"react\";\nimport { SliderWithInput } from \"./slider-with-input\";\nimport ColorPicker from \"./color-picker\";\n\ninterface ShadowControlProps {\n shadowColor: string;\n shadowOpacity: number;\n shadowBlur: number;\n shadowSpread: number;\n shadowOffsetX: number;\n shadowOffsetY: number;\n onChange: (key: string, value: string | number) => void;\n}\n\nconst ShadowControl: React.FC = ({\n shadowColor,\n shadowOpacity,\n shadowBlur,\n shadowSpread,\n shadowOffsetX,\n shadowOffsetY,\n onChange,\n}) => {\n return (\n
\n onChange(\"shadow-color\", color)}\n label=\"Color\"\n />\n\n onChange(\"shadow-opacity\", value)}\n min={0}\n max={1}\n step={0.01}\n unit=\"\"\n label=\"Opacity\"\n />\n\n onChange(\"shadow-blur\", value)}\n min={0}\n max={50}\n step={0.5}\n unit=\"px\"\n label=\"Blur\"\n />\n\n onChange(\"shadow-spread\", value)}\n min={-50}\n max={50}\n step={0.5}\n unit=\"px\"\n label=\"Spread\"\n />\n\n onChange(\"shadow-offset-x\", value)}\n min={-50}\n max={50}\n step={0.5}\n unit=\"px\"\n label=\"Offset X\"\n />\n\n onChange(\"shadow-offset-y\", value)}\n min={-50}\n max={50}\n step={0.5}\n unit=\"px\"\n label=\"Offset Y\"\n />\n
\n );\n};\n\nexport default ShadowControl;\n" }, { "path": "components/editor/share-dialog.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"@/components/ui/revola\";\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\nimport { Check, Copy } from \"lucide-react\";\n\ninterface ShareDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n url: string;\n}\n\nexport function ShareDialog({ open, onOpenChange, url }: ShareDialogProps) {\n const { isCopying, hasCopied, copyToClipboard } = useCopyToClipboard();\n\n const handleCopy = async () => {\n await copyToClipboard(url, {\n title: \"Theme URL copied to clipboard!\",\n });\n };\n\n return (\n \n \n
\n \n Share Theme\n \n Anyone with this URL will be able to view this theme.\n \n \n\n
\n e.currentTarget.select()}\n className=\"selection:bg-primary selection:text-primary-foreground flex-1\"\n />\n \n
\n
\n \n \n );\n}\n" }, { "path": "components/editor/slider-with-input.tsx", "content": "import { useEffect, useState } from \"react\";\nimport { Label } from \"../ui/label\";\nimport { Input } from \"../ui/input\";\nimport { Slider } from \"../ui/slider\";\n\nexport const SliderWithInput = ({\n value,\n onChange,\n min,\n max,\n step = 1,\n label,\n unit = \"px\",\n}: {\n value: number;\n onChange: (value: number) => void;\n min: number;\n max: number;\n step?: number;\n label: string;\n unit?: string;\n}) => {\n const [localValue, setLocalValue] = useState(value.toString());\n\n useEffect(() => {\n setLocalValue(value.toString());\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent) => {\n const raw = e.target.value;\n setLocalValue(raw);\n const num = parseFloat(raw.replace(',', '.'));\n if (!isNaN(num)) {\n onChange(Math.max(min, Math.min(max, num)));\n }\n };\n\n return (\n
\n \n {label}\n \n {\n const newValue = values[0];\n setLocalValue(newValue.toString());\n onChange(newValue);\n }}\n className=\"min-w-0 flex-1\"\n />\n
\n setLocalValue(value.toString())}\n min={min}\n max={max}\n step={step}\n className=\"h-6 w-14 px-1.5 text-xs\"\n />\n {unit}\n
\n
\n );\n};\n" }, { "path": "components/editor/theme-control-actions.tsx", "content": "import { FileCode, Palette, RefreshCw, LucideIcon, Undo2 } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\ninterface MenuItemProps {\n icon: LucideIcon;\n label: string;\n onClick: () => void;\n disabled?: boolean;\n title?: string;\n}\n\nconst MenuItem = ({\n icon: Icon,\n label,\n onClick,\n disabled,\n title,\n}: MenuItemProps) => {\n return (\n \n \n {label}\n \n );\n};\n\ninterface ThemeControlActionsProps {\n hasChanges: boolean;\n hasPresetChanges: boolean;\n onReset: () => void;\n onResetToPreset: () => void;\n onImportClick: () => void;\n}\n\nconst ThemeControlActions = ({\n hasChanges,\n hasPresetChanges,\n onReset,\n onResetToPreset,\n onImportClick,\n}: ThemeControlActionsProps) => {\n const menuItems: MenuItemProps[] = [\n {\n icon: FileCode,\n label: \"Import from CSS file\",\n onClick: onImportClick,\n },\n {\n icon: RefreshCw,\n label: \"Reset to Current Preset\",\n onClick: onResetToPreset,\n disabled: !hasPresetChanges,\n title: hasPresetChanges ? \"Reset to current preset\" : \"No changes from preset\",\n },\n {\n icon: Undo2,\n label: \"Reset to Default Theme\",\n onClick: onReset,\n disabled: !hasChanges,\n title: hasChanges ? \"Reset to base theme\" : \"No changes to reset\",\n },\n ];\n\n return (\n \n \n \n \n Options\n \n \n \n {menuItems.map((item, index) => (\n \n ))}\n \n \n );\n};\n\nexport default ThemeControlActions;\n" }, { "path": "components/editor/theme-control-panel.tsx", "content": "\"use client\";\n\nimport { AlertCircle, Sparkle } from \"lucide-react\";\nimport React from \"react\";\n\nimport { ChatInterface } from \"@/components/editor/ai/chat-interface\";\nimport { ColorsTabContent } from \"@/components/editor/colors-tab-content\";\nimport ControlSection from \"@/components/editor/control-section\";\nimport { FontPicker } from \"@/components/editor/font-picker\";\nimport HslAdjustmentControls from \"@/components/editor/hsl-adjustment-controls\";\nimport ShadowControl from \"@/components/editor/shadow-control\";\nimport { SliderWithInput } from \"@/components/editor/slider-with-input\";\nimport ThemePresetSelect from \"@/components/editor/theme-preset-select\";\nimport TabsTriggerPill from \"@/components/editor/theme-preview/tabs-trigger-pill\";\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { Label } from \"@/components/ui/label\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Tabs, TabsContent, TabsList } from \"@/components/ui/tabs\";\nimport { COMMON_STYLES, defaultThemeState } from \"@/config/theme\";\nimport { useAIThemeGenerationCore } from \"@/hooks/use-ai-theme-generation-core\";\nimport { useControlsTabFromUrl, type ControlTab } from \"@/hooks/use-controls-tab-from-url\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { type FontInfo } from \"@/types/fonts\";\nimport { ThemeStyles, ThemeStyleProps } from \"@/types/theme\";\nimport { buildFontFamily } from \"@/utils/fonts\";\nimport { getAppliedThemeFont } from \"@/utils/theme-fonts\";\n\ninterface ThemeControlPanelProps {\n styles: ThemeStyles;\n currentMode: \"light\" | \"dark\";\n onChange: (styles: ThemeStyles) => void;\n}\n\nconst ThemeControlPanel = ({ styles, currentMode, onChange }: ThemeControlPanelProps) => {\n const { themeState } = useEditorStore();\n const { tab, handleSetTab } = useControlsTabFromUrl();\n const { isGeneratingTheme } = useAIThemeGenerationCore();\n\n const currentStyles = React.useMemo(\n () => ({\n ...defaultThemeState.styles[currentMode],\n ...styles?.[currentMode],\n }),\n [currentMode, styles]\n );\n\n const updateStyle = React.useCallback(\n (key: K, value: (typeof currentStyles)[K]) => {\n // apply common styles to both light and dark modes\n if (COMMON_STYLES.includes(key)) {\n onChange({\n ...styles,\n light: { ...styles.light, [key]: value },\n dark: { ...styles.dark, [key]: value },\n });\n return;\n }\n\n onChange({\n ...styles,\n [currentMode]: {\n ...currentStyles,\n [key]: value,\n },\n });\n },\n [onChange, styles, currentMode, currentStyles]\n );\n\n const updateStyles = React.useCallback(\n (updates: Partial) => {\n onChange({\n ...styles,\n [currentMode]: {\n ...currentStyles,\n ...updates,\n },\n });\n },\n [onChange, styles, currentMode, currentStyles]\n );\n\n // Ensure we have valid styles for the current mode\n if (!currentStyles) {\n return null; // Or some fallback UI\n }\n\n const radius = parseFloat(currentStyles.radius.replace(\"rem\", \"\"));\n\n return (\n <>\n
\n \n
\n
\n handleSetTab(v as ControlTab)}\n className=\"flex min-h-0 w-full flex-1 flex-col\"\n >\n \n \n Colors\n Typography\n Other\n \n \n \n Generate\n \n \n \n \n\n \n \n \n\n \n \n
\n \n

\n Custom fonts require embedding.{\" \"}\n \n Learn more\n \n

\n
\n\n \n
\n
\n \n
\n {\n const fontFamily = buildFontFamily(font.family, font.category);\n updateStyle(\"font-sans\", fontFamily);\n }}\n />\n
\n
\n\n
\n \n
\n {\n const fontFamily = buildFontFamily(font.family, font.category);\n updateStyle(\"font-serif\", fontFamily);\n }}\n />\n
\n
\n\n
\n \n
\n {\n const fontFamily = buildFontFamily(font.family, font.category);\n updateStyle(\"font-mono\", fontFamily);\n }}\n />\n
\n
\n
\n \n\n \n updateStyle(\"letter-spacing\", `${value}em`)}\n min={-0.5}\n max={0.5}\n step={0.025}\n unit=\"em\"\n label=\"Tracking\"\n />\n \n \n \n\n \n \n \n \n \n\n \n updateStyle(\"radius\", `${value}rem`)}\n min={0}\n max={5}\n step={0.025}\n unit=\"rem\"\n label=\"Radius\"\n />\n \n\n \n updateStyle(\"spacing\", `${value}rem`)}\n min={0.15}\n max={0.35}\n step={0.01}\n unit=\"rem\"\n label=\"Spacing\"\n />\n \n\n \n {\n if (key === \"shadow-color\") {\n updateStyle(key, value as string);\n } else if (key === \"shadow-opacity\") {\n updateStyle(key, value.toString());\n } else {\n updateStyle(key as keyof ThemeStyleProps, `${value}px`);\n }\n }}\n />\n \n \n \n\n \n \n \n \n
\n \n );\n};\n\nexport default ThemeControlPanel;\n" }, { "path": "components/editor/theme-font-select.tsx", "content": "// THIS COMPONENT MIGHT BE REPLACED BY THE GOOGLE FONT PICKER\n\nimport React, { useMemo } from \"react\";\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\n\ninterface ThemeFontSelectProps {\n fonts: Record;\n defaultValue: string;\n currentFont: string | null;\n onFontChange: (font: string) => void;\n}\n\nconst ThemeFontSelect: React.FC = ({\n fonts,\n defaultValue,\n currentFont,\n onFontChange,\n}) => {\n const fontNames = useMemo(() => [\"System\", ...Object.keys(fonts)], [fonts]);\n const value = currentFont ? (fonts[currentFont] ?? defaultValue) : defaultValue;\n\n return (\n \n );\n};\n\nexport default ThemeFontSelect;\n" }, { "path": "components/editor/theme-preset-select.tsx", "content": "import { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from \"@/components/ui/command\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { authClient } from \"@/lib/auth-client\";\nimport { cn } from \"@/lib/utils\";\nimport { useEditorStore } from \"@/store/editor-store\";\nimport { useThemePresetStore } from \"@/store/theme-preset-store\";\nimport { ThemePreset } from \"@/types/theme\";\nimport { getPresetThemeStyles } from \"@/utils/theme-preset-helper\";\nimport {\n ArrowLeft,\n ArrowRight,\n Check,\n ChevronDown,\n Heart,\n Search,\n Settings,\n Shuffle,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { ThemeToggle } from \"../theme-toggle\";\nimport { TooltipWrapper } from \"../tooltip-wrapper\";\n\ninterface ThemePresetSelectProps extends React.ComponentProps {\n withCycleThemes?: boolean;\n}\n\ninterface ColorBoxProps {\n color: string;\n}\n\nconst ColorBox: React.FC = ({ color }) => (\n
\n);\n\ninterface ThemeColorsProps {\n presetName: string;\n mode: \"light\" | \"dark\";\n}\n\nconst ThemeColors: React.FC = ({ presetName, mode }) => {\n const styles = getPresetThemeStyles(presetName)[mode];\n return (\n
\n \n \n \n \n
\n );\n};\n\nconst isThemeNew = (preset: ThemePreset) => {\n if (!preset.createdAt) return false;\n const createdAt = new Date(preset.createdAt);\n const timePeriod = new Date();\n timePeriod.setDate(timePeriod.getDate() - 5);\n return createdAt > timePeriod;\n};\n\nconst ThemeControls = () => {\n const applyThemePreset = useEditorStore((store) => store.applyThemePreset);\n const presets = useThemePresetStore((store) => store.getAllPresets());\n\n const presetNames = useMemo(() => [\"default\", ...Object.keys(presets)], [presets]);\n\n const randomize = useCallback(() => {\n const random = Math.floor(Math.random() * presetNames.length);\n applyThemePreset(presetNames[random]);\n }, [presetNames, applyThemePreset]);\n\n return (\n
\n \n\n \n \n \n
\n );\n};\n\ninterface ThemeCycleButtonProps extends React.ComponentProps {\n direction: \"prev\" | \"next\";\n}\n\nconst ThemeCycleButton: React.FC = ({\n direction,\n onClick,\n className,\n ...props\n}) => (\n \n \n \n {direction === \"prev\" ? (\n \n ) : (\n \n )}\n \n \n {direction === \"prev\" ? \"Previous theme\" : \"Next theme\"}\n \n);\n\ninterface ThemePresetCycleControlsProps extends React.ComponentProps {\n filteredPresets: string[];\n currentPresetName: string;\n className?: string;\n}\n\nconst ThemePresetCycleControls: React.FC = ({\n filteredPresets,\n currentPresetName,\n className,\n ...props\n}) => {\n const applyThemePreset = useEditorStore((store) => store.applyThemePreset);\n\n const currentIndex =\n useMemo(\n () => filteredPresets.indexOf(currentPresetName || \"default\"),\n [filteredPresets, currentPresetName]\n ) ?? 0;\n\n const cycleTheme = useCallback(\n (direction: \"prev\" | \"next\") => {\n const newIndex =\n direction === \"next\"\n ? (currentIndex + 1) % filteredPresets.length\n : (currentIndex - 1 + filteredPresets.length) % filteredPresets.length;\n applyThemePreset(filteredPresets[newIndex]);\n },\n [currentIndex, filteredPresets, applyThemePreset]\n );\n return (\n <>\n \n\n cycleTheme(\"prev\")}\n {...props}\n />\n\n \n\n cycleTheme(\"next\")}\n {...props}\n />\n \n );\n};\n\nconst ThemePresetSelect: React.FC = ({\n withCycleThemes = true,\n className,\n ...props\n}) => {\n const themeState = useEditorStore((store) => store.themeState);\n const applyThemePreset = useEditorStore((store) => store.applyThemePreset);\n const hasUnsavedChanges = useEditorStore((store) => store.hasUnsavedChanges);\n const currentPreset = themeState.preset;\n const mode = themeState.currentMode;\n\n const presets = useThemePresetStore((store) => store.getAllPresets());\n const loadSavedPresets = useThemePresetStore((store) => store.loadSavedPresets);\n const unloadSavedPresets = useThemePresetStore((store) => store.unloadSavedPresets);\n\n const [search, setSearch] = useState(\"\");\n\n const { data: session } = authClient.useSession();\n\n useEffect(() => {\n if (session?.user) {\n loadSavedPresets();\n } else {\n unloadSavedPresets();\n }\n }, [loadSavedPresets, unloadSavedPresets, session?.user]);\n\n const isSavedTheme = useCallback(\n (presetId: string) => {\n return presets[presetId]?.source === \"SAVED\";\n },\n [presets]\n );\n\n const presetNames = useMemo(() => [\"default\", ...Object.keys(presets)], [presets]);\n const currentPresetName = presetNames?.find((name) => name === currentPreset);\n\n const filteredPresets = useMemo(() => {\n const filteredList =\n search.trim() === \"\"\n ? presetNames\n : presetNames.filter((name) => {\n if (name === \"default\") {\n return \"default\".toLowerCase().includes(search.toLowerCase());\n }\n return presets[name]?.label?.toLowerCase().includes(search.toLowerCase());\n });\n\n // Separate saved and default themes\n const savedThemesList = filteredList.filter((name) => name !== \"default\" && isSavedTheme(name));\n const defaultThemesList = filteredList.filter((name) => !savedThemesList.includes(name));\n\n // Sort each list, with \"default\" at the top for default themes\n const sortThemes = (list: string[]) => {\n const defaultTheme = list.filter((name) => name === \"default\");\n const otherThemes = list\n .filter((name) => name !== \"default\")\n .sort((a, b) => {\n const labelA = presets[a]?.label || a;\n const labelB = presets[b]?.label || b;\n return labelA.localeCompare(labelB);\n });\n return [...defaultTheme, ...otherThemes];\n };\n\n // Combine saved themes first, then default themes\n return [...sortThemes(savedThemesList), ...sortThemes(defaultThemesList)];\n }, [presetNames, search, presets, isSavedTheme]);\n\n const filteredSavedThemes = useMemo(() => {\n return filteredPresets.filter((name) => name !== \"default\" && isSavedTheme(name));\n }, [filteredPresets, isSavedTheme]);\n\n const filteredDefaultThemes = useMemo(() => {\n return filteredPresets.filter((name) => name === \"default\" || !isSavedTheme(name));\n }, [filteredPresets, isSavedTheme]);\n\n return (\n
\n \n \n \n
\n
\n \n \n \n \n
\n {currentPresetName !== \"default\" &&\n currentPresetName &&\n isSavedTheme(currentPresetName) &&\n !hasUnsavedChanges() && (\n
\n \n
\n )}\n \n {presets[currentPresetName || \"default\"]?.label ||\n currentPresetName ||\n \"default\"}\n {hasUnsavedChanges() && \"*\"}\n \n
\n \n \n \n \n \n
\n
\n \n setSearch(e.target.value)}\n />\n
\n
\n
\n
\n {filteredPresets.length} theme\n {filteredPresets.length !== 1 ? \"s\" : \"\"}\n
\n \n
\n \n \n No themes found.\n\n {/* Saved Themes Group */}\n {filteredSavedThemes.length > 0 && (\n <>\n \n Saved Themes\n \n \n Manage\n \n \n \n
\n }\n >\n {filteredSavedThemes\n .filter((name) => name !== \"default\" && isSavedTheme(name))\n .map((presetName, index) => (\n {\n applyThemePreset(presetName);\n setSearch(\"\");\n }}\n className=\"data-[highlighted]:bg-secondary/50 flex items-center gap-2 py-2\"\n >\n \n
\n \n {presets[presetName]?.label || presetName}\n \n {presets[presetName] && isThemeNew(presets[presetName]) && (\n \n New\n \n )}\n
\n {presetName === currentPresetName && (\n \n )}\n \n ))}\n \n \n \n )}\n\n {filteredSavedThemes.length === 0 && search.trim() === \"\" && (\n <>\n
\n
\n \n Save\n
\n a theme to find it here.\n
\n \n \n )}\n\n {/* Default Theme Group */}\n {filteredDefaultThemes.length > 0 && (\n \n {filteredDefaultThemes.map((presetName, index) => (\n {\n applyThemePreset(presetName);\n setSearch(\"\");\n }}\n className=\"data-[highlighted]:bg-secondary/50 flex items-center gap-2 py-2\"\n >\n \n
\n \n {presets[presetName]?.label || presetName}\n \n {presets[presetName] && isThemeNew(presets[presetName]) && (\n \n New\n \n )}\n
\n {presetName === currentPresetName && (\n \n )}\n \n ))}\n \n )}\n \n
\n \n \n Discover more themes →\n \n \n
\n \n \n \n \n\n {withCycleThemes && (\n \n )}\n
\n );\n};\n\nexport default ThemePresetSelect;\n" }, { "path": "components/editor/theme-preview/color-preview.tsx", "content": "import { CopyButton } from \"@/components/copy-button\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport { FocusColorId, useColorControlFocus } from \"@/store/color-control-focus-store\";\nimport { ThemeEditorPreviewProps } from \"@/types/theme\";\nimport { SquarePen } from \"lucide-react\";\n\ninterface ColorPreviewProps {\n styles: ThemeEditorPreviewProps[\"styles\"];\n currentMode: ThemeEditorPreviewProps[\"currentMode\"];\n}\n\nfunction ColorPreviewItem({ label, color, name }: { label: string; color: string; name: string }) {\n const { focusColor } = useColorControlFocus();\n\n return (\n
\n \n
\n

{label}

\n

{color}

\n
\n\n
\n \n focusColor(name as FocusColorId)}\n className=\"size-7 @max-3xl:size-6 [&>svg]:size-3.5\"\n >\n \n \n \n \n
\n
\n );\n}\n\nconst ColorPreview = ({ styles, currentMode }: ColorPreviewProps) => {\n if (!styles || !styles[currentMode]) {\n return null;\n }\n\n return (\n
\n {/* Primary Colors */}\n
\n

Primary Theme Colors

\n
\n \n \n \n \n
\n
\n\n {/* Secondary & Accent Colors */}\n
\n

Secondary & Accent Colors

\n
\n \n \n \n \n
\n
\n\n {/* UI Component Colors */}\n
\n

UI Component Colors

\n
\n \n \n \n \n \n \n
\n
\n\n {/* Utility & Form Colors */}\n
\n

Utility & Form Colors

\n
\n \n \n \n
\n
\n\n {/* Status & Feedback Colors */}\n
\n

Status & Feedback Colors

\n
\n \n \n
\n
\n\n {/* Chart & Data Visualization Colors */}\n
\n

\n Chart & Visualization Colors\n

\n
\n \n \n \n \n \n
\n
\n\n {/* Sidebar Colors */}\n
\n

Sidebar & Navigation Colors

\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n );\n};\n\nexport default ColorPreview;\n" }, { "path": "components/editor/theme-preview/components-showcase.tsx", "content": "import { ThemeEditorPreviewProps } from \"@/types/theme\";\nimport { Settings, Info, AlertTriangle, Star } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport {\n Table,\n TableHeader,\n TableRow,\n TableHead,\n TableBody,\n TableCell,\n} from \"@/components/ui/table\";\n\ninterface ComponentsShowcaseProps {\n styles: ThemeEditorPreviewProps[\"styles\"];\n currentMode: ThemeEditorPreviewProps[\"currentMode\"];\n}\n\nconst ComponentsShowcase = ({ styles, currentMode }: ComponentsShowcaseProps) => {\n if (!styles || !styles[currentMode]) {\n return null;\n }\n\n return (\n
\n {/* Button showcase */}\n
\n

\n Buttons & Interactive Elements\n

\n
\n
\n \n \n \n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n {/* Cards & Containers */}\n
\n

Cards & Containers

\n
\n \n \n Feature Card\n \n Card description with muted foreground color\n \n \n \n

\n This card demonstrates the card background and foreground colors,\n with content showing regular text.\n

\n \n \n \n \n \n \n\n
\n \n

Popover Container

\n

\n This container shows popover colors and styling.\n

\n
\n\n \n

Muted Container

\n

\n Container with muted background and foreground colors.\n

\n
\n
\n \n \n\n {/* Status Indicators */}\n
\n

\n Status Indicators & Alerts\n

\n
\n
\n Default Badge\n Secondary\n Outline\n Error\n Custom\n
\n\n
\n \n \n Information\n \n Standard alert with default styling.\n \n \n\n \n \n Error\n \n Destructive alert showcasing error state colors.\n \n \n\n \n \n
\n
Success Alert
\n

\n Custom alert using accent colors with an opacity modifier.\n

\n
\n
\n
\n \n
\n\n {/* Data Display */}\n
\n

Data Display

\n \n \n \n User\n Status\n Role\n Actions\n \n \n \n \n Alex Johnson\n \n \n Active\n \n \n Admin\n \n \n \n \n \n Sarah Chen\n \n \n Inactive\n \n \n User\n \n \n \n \n \n
\n
\n \n );\n};\n\nexport default ComponentsShowcase;\n" }, { "path": "components/editor/theme-preview/examples-preview-container.tsx", "content": "import { Suspense } from \"react\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport { Loading } from \"@/components/loading\";\n\nconst LoadingSkeleton = () => (\n
\n
\n \n
\n\n
\n \n
\n
\n);\n\nconst ExamplesPreviewContainer = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => {\n return (\n
\n
\n }>{children}\n
\n
\n );\n};\n\nexport default ExamplesPreviewContainer;\n" }, { "path": "components/editor/theme-preview/tabs-trigger-pill.tsx", "content": "import { TabsTrigger } from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\nconst TabsTriggerPill = ({\n children,\n className,\n ...props\n}: React.ComponentPropsWithoutRef) => {\n return (\n \n {children}\n \n );\n};\n\nexport default TabsTriggerPill;\n" }, { "path": "components/editor/theme-preview-panel.tsx", "content": "\"use client\";\n\nimport ShadcnBlocksLogo from \"@/assets/shadcnblocks.svg\";\nimport { HorizontalScrollArea } from \"@/components/horizontal-scroll-area\";\nimport { ThemeToggle } from \"@/components/theme-toggle\";\nimport { TooltipWrapper } from \"@/components/tooltip-wrapper\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { Tabs, TabsContent, TabsList } from \"@/components/ui/tabs\";\nimport { useDialogActions } from \"@/hooks/use-dialog-actions\";\nimport { useFullscreen } from \"@/hooks/use-fullscreen\";\nimport { useThemeInspector } from \"@/hooks/use-theme-inspector\";\nimport { cn } from \"@/lib/utils\";\nimport { ThemeEditorPreviewProps } from \"@/types/theme\";\nimport { Inspect, Maximize, Minimize, MoreVertical } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useQueryState } from \"nuqs\";\nimport { lazy } from \"react\";\nimport InspectorOverlay from \"./inspector-overlay\";\nimport ColorPreview from \"./theme-preview/color-preview\";\nimport ExamplesPreviewContainer from \"./theme-preview/examples-preview-container\";\nimport TabsTriggerPill from \"./theme-preview/tabs-trigger-pill\";\n\nconst DemoCards = lazy(() => import(\"@/components/examples/cards\"));\nconst DemoMail = lazy(() => import(\"@/components/examples/mail\"));\nconst DemoDashboard = lazy(() => import(\"@/components/examples/dashboard\"));\nconst DemoPricing = lazy(() => import(\"@/components/examples/pricing/pricing\"));\nconst TypographyDemo = lazy(() => import(\"@/components/examples/typography/typography-demo\"));\nconst CustomDemo = lazy(() => import(\"@/components/examples/custom\"));\n\nconst V0Logo = ({ className }: { className?: string }) => (\n \n \n \n \n);\n\nconst ThemePreviewPanel = ({\n styles,\n currentMode,\n themeId,\n themeName,\n}: ThemeEditorPreviewProps & { themeId?: string; themeName?: string }) => {\n const { isFullscreen, toggleFullscreen } = useFullscreen();\n const [activeTab, setActiveTab] = useQueryState(\"p\", {\n defaultValue: \"cards\",\n });\n const { handleOpenInV0 } = useDialogActions();\n\n const {\n rootRef,\n inspector,\n inspectorEnabled,\n handleMouseMove,\n handleMouseLeave,\n toggleInspector,\n } = useThemeInspector();\n\n if (!styles || !styles[currentMode]) {\n return null;\n }\n\n const handleTabChange = (value: string) => {\n setActiveTab(value);\n };\n\n return (\n <>\n \n \n \n \n Custom\n Cards\n\n
\n Dashboard\n Mail\n
\n Pricing\n Color Palette\n\n \n \n \n \n \n \n \n handleTabChange(\"typography\")}>\n Typography\n \n \n \n \n\n
\n \n \n \n {isFullscreen && (\n svg]:scale-120 hover:[&>svg]:transition-all\"\n />\n )}\n {/* Inspector toggle button */}\n \n \n \n {inspectorEnabled && on}\n \n \n \n \n {isFullscreen ? (\n \n ) : (\n \n )}\n \n \n
\n \n\n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n
\n \n
\n \n \n \n \n\n \n \n
\n \n \n \n
\n \n \n \n \n \n\n \n \n \n
\n \n
\n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n
\n \n
\n \n \n \n
\n \n \n\n \n \n );\n};\n\nexport default ThemePreviewPanel;\n" }, { "path": "components/editor/theme-save-dialog.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Form,\n FormControl,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { Loader2 } from \"lucide-react\";\nimport { useEffect } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as z from \"zod\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"../ui/revola\";\n\nconst formSchema = z.object({\n themeName: z.string().min(1, \"Theme name cannot be empty.\"),\n});\n\ninterface ThemeSaveDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onSave: (themeName: string) => Promise;\n isSaving: boolean;\n initialThemeName?: string;\n ctaLabel?: string;\n title?: string;\n description?: string;\n existingThemeName?: string;\n onUpdateExisting?: () => Promise;\n isUpdating?: boolean;\n}\n\nexport function ThemeSaveDialog({\n open,\n onOpenChange,\n onSave,\n isSaving,\n initialThemeName = \"\",\n ctaLabel = \"Save Theme\",\n title = \"Save Theme\",\n description = \"Enter a name for your theme so you can find it later.\",\n existingThemeName,\n onUpdateExisting,\n isUpdating = false,\n}: ThemeSaveDialogProps) {\n const form = useForm>({\n resolver: zodResolver(formSchema),\n defaultValues: {\n themeName: initialThemeName,\n },\n });\n\n const onSubmit = (values: z.infer) => {\n onSave(values.themeName);\n };\n\n useEffect(() => {\n if (open) {\n form.reset({ themeName: initialThemeName });\n }\n }, [open, initialThemeName, form]);\n\n const handleOpenChange = (newOpen: boolean) => {\n onOpenChange(newOpen);\n };\n\n const hasUpdateOption = !!existingThemeName && !!onUpdateExisting;\n\n return (\n \n \n
\n \n {title}\n {description}\n \n\n {hasUpdateOption && (\n <>\n \n {isUpdating ? (\n <>\n \n Updating\n \n ) : (\n <>Update “{existingThemeName}”\n )}\n \n\n
\n \n or save as a new theme\n \n
\n \n )}\n\n
\n \n (\n \n Name\n \n \n \n \n \n )}\n />\n \n \n
\n \n onOpenChange(false)}\n >\n Cancel\n \n \n {isSaving || form.formState.isSubmitting ? (\n <>\n \n Saving\n \n ) : hasUpdateOption ? (\n \"Save as New\"\n ) : (\n ctaLabel\n )}\n \n \n \n \n );\n}\n" }, { "path": "components/effects/frame-highlight.tsx", "content": "import { cn } from \"@/lib/utils\";\nimport { ComponentProps } from \"react\";\n\nexport function FrameHighlight({ children, className, ...props }: ComponentProps<\"span\">) {\n return (\n <>\n {\" \"}\n \n \n {children}\n \n \n \n \n \n \n \n {\" \"}\n \n );\n}\n\nfunction Corner({ className }: ComponentProps<\"svg\">) {\n return (\n \n \n \n );\n}\n" }, { "path": "components/effects/noise-effect.tsx", "content": "export function NoiseEffect() {\n return (\n \n \n \n \n \n \n );\n}\n" }, { "path": "components/effects/spotlight.tsx", "content": "import { cn } from \"@/lib/utils\";\n\ntype SpotlightProps = {\n className?: string;\n fill?: string;\n};\n\nexport function Spotlight({ className, fill }: SpotlightProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "components/error-boundary.tsx", "content": "import { FileWarning } from \"lucide-react\";\nimport React from \"react\";\n\nexport class ComponentErrorBoundary extends React.Component<\n { children: React.ReactNode; name: string; fallback?: React.ReactNode },\n { hasError: boolean }\n> {\n constructor(props: { children: React.ReactNode; name: string; fallback: React.ReactNode }) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error(`Error in component ${this.props.name}:`, error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n if (this.props.fallback) {\n return this.props.fallback;\n }\n\n return (\n
\n \n

\n Something went wrong in component:{\" \"}\n {this.props.name}\n

\n
\n );\n }\n\n return this.props.children;\n }\n}\n" }, { "path": "components/examples/ai-chat-demo.tsx", "content": "\"use client\";\n\nimport Message from \"@/components/editor/ai/message\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { ChatMessage } from \"@/types/ai\";\nimport { ThemeStyles } from \"@/types/theme\";\nimport { defaultPresets } from \"@/utils/theme-presets\";\nimport { useEffect, useRef } from \"react\";\n\nexport function AIChatDemo({\n disabled = true,\n className,\n}: {\n disabled?: boolean;\n className?: string;\n}) {\n const ref = useRef(null);\n\n useEffect(() => {\n if (!ref.current) return;\n\n // Always block tabbing: set tabIndex=\"-1\" on all focusable children\n const focusables = ref.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n focusables.forEach((el) => {\n (el as HTMLElement).setAttribute(\"tabindex\", \"-1\");\n // Only set disabled if supported and disabled is true\n if (disabled && \"disabled\" in el) (el as HTMLButtonElement).disabled = true;\n if (!disabled && \"disabled\" in el) (el as HTMLButtonElement).disabled = false;\n });\n }, [disabled]);\n\n return (\n \n {/* Scrollable parent */}\n \n {/* Non-interactive chat content */}\n \n {CHAT_PLACEHOLDER_MESSAGES.map((msg) => (\n {}}\n isEditing={false}\n onEdit={() => {}}\n onEditSubmit={() => {}}\n onEditCancel={() => {}}\n />\n ))}\n \n \n \n );\n}\n\nconst CHAT_PLACEHOLDER_MESSAGES: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Can you generate a theme from this image?\",\n },\n ],\n metadata: {\n promptData: {\n content: \"Generate a theme from this image.\",\n mentions: [],\n images: [\n {\n url: \"/og-image.v050725.png\",\n },\n ],\n },\n },\n },\n {\n id: \"2\",\n role: \"assistant\",\n parts: [\n {\n type: \"text\",\n text: \"I've generated a Midnight Bloom theme based on your image. It features deep purples and blues for a calming, modern look.\",\n },\n ],\n metadata: {\n themeStyles: defaultPresets[\"midnight-bloom\"].styles as ThemeStyles,\n },\n },\n {\n id: \"3\",\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"Can you generate a theme inspired by @Twitter?\",\n },\n ],\n },\n {\n id: \"4\",\n role: \"assistant\",\n parts: [\n {\n type: \"text\",\n text: \"Alright, I've whipped up a Twitter-inspired theme. Expect bright blues and clean contrasts for a social, energetic vibe.\",\n },\n ],\n metadata: {\n themeStyles: defaultPresets[\"twitter\"].styles as ThemeStyles,\n },\n },\n {\n id: \"5\",\n role: \"user\",\n parts: [\n {\n type: \"text\",\n text: \"How about a @Supabase theme?\",\n },\n ],\n },\n {\n id: \"6\",\n role: \"assistant\",\n parts: [\n {\n type: \"text\",\n text: \"I've generated a Supabase theme for you. It uses fresh greens and dark backgrounds for a modern, developer-friendly feel.\",\n },\n ],\n metadata: {\n themeStyles: defaultPresets[\"supabase\"].styles as ThemeStyles,\n },\n },\n];\n" }, { "path": "components/examples/cards/activity-goal.tsx", "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Bar, BarChart } from \"recharts\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { ChartConfig, ChartContainer } from \"@/components/ui/chart\";\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n];\n\nconst chartConfig = {\n goal: {\n label: \"Goal\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig;\n\nexport function CardsActivityGoal() {\n const [goal, setGoal] = React.useState(350);\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)));\n }\n\n return (\n \n \n Move Goal\n Set your daily activity goal.\n \n \n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
{goal}
\n
Calories/day
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n \n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/calendar.tsx", "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\n\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\nconst start = new Date(2025, 5, 5);\n\nexport function CardsCalendar() {\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/chat.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n} from \"@/components/ui/revola\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowUpIcon, CheckIcon, PlusIcon } from \"lucide-react\";\n\nconst users = [\n {\n name: \"Olivia Martin\",\n email: \"m@example.com\",\n avatar: \"/avatars/01.png\",\n },\n {\n name: \"Isabella Nguyen\",\n email: \"isabella.nguyen@email.com\",\n avatar: \"/avatars/03.png\",\n },\n {\n name: \"Emma Wilson\",\n email: \"emma@example.com\",\n avatar: \"/avatars/05.png\",\n },\n {\n name: \"Jackson Lee\",\n email: \"lee@example.com\",\n avatar: \"/avatars/02.png\",\n },\n {\n name: \"William Kim\",\n email: \"will@email.com\",\n avatar: \"/avatars/04.png\",\n },\n] as const;\n\ntype User = (typeof users)[number];\n\nexport function CardsChat() {\n const [open, setOpen] = React.useState(false);\n const [selectedUsers, setSelectedUsers] = React.useState([]);\n\n const [messages, setMessages] = React.useState([\n {\n role: \"agent\",\n content: \"Hi, how can I help you today?\",\n },\n {\n role: \"user\",\n content: \"Hey, I'm having trouble with my account.\",\n },\n {\n role: \"agent\",\n content: \"What seems to be the problem?\",\n },\n {\n role: \"user\",\n content: \"I can't log in.\",\n },\n ]);\n const [input, setInput] = React.useState(\"\");\n const inputLength = input.trim().length;\n\n return (\n <>\n \n \n
\n \n \n S\n \n
\n

Sofia Davis

\n

m@example.com

\n
\n
\n \n \n \n setOpen(true)}\n >\n \n New message\n \n \n New message\n \n \n \n \n
\n {messages.map((message, index) => (\n \n {message.content}\n
\n ))}\n \n \n \n {\n event.preventDefault();\n if (inputLength === 0) return;\n setMessages([\n ...messages,\n {\n role: \"user\",\n content: input,\n },\n ]);\n setInput(\"\");\n }}\n className=\"relative w-full\"\n >\n setInput(event.target.value)}\n />\n \n \n Send\n \n \n \n \n \n \n \n New message\n \n Invite a user to this thread. This will create a new group message.\n \n \n\n \n \n \n No users found.\n \n {users.map((user) => (\n {\n if (selectedUsers.includes(user)) {\n return setSelectedUsers(\n selectedUsers.filter((selectedUser) => selectedUser !== user)\n );\n }\n return setSelectedUsers(\n [...users].filter((u) => [...selectedUsers, user].includes(u))\n );\n }}\n >\n \n \n {user.name[0]}\n \n
\n

{user.name}

\n

{user.email}

\n
\n {selectedUsers.includes(user) ? (\n \n ) : null}\n \n ))}\n \n \n \n\n \n {selectedUsers.length > 0 ? (\n
\n {selectedUsers.map((user) => (\n \n \n {user.name[0]}\n \n ))}\n
\n ) : (\n

Select users to add to this thread.

\n )}\n {\n setOpen(false);\n }}\n disabled={selectedUsers.length < 2}\n >\n Continue\n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/cookie-settings.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport function CardsCookieSettings() {\n return (\n \n \n Cookie Settings\n Manage your cookie settings here.\n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/create-account.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function CardsCreateAccount() {\n return (\n \n \n Create an account\n Enter your email below to create your account\n \n \n
\n \n \n
\n
\n
\n \n
\n
\n Or continue with\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/date-picker-with-range.tsx", "content": "\"use client\";\n\nimport { addDays, format } from \"date-fns\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\nexport function DatePickerWithRange({ className }: React.HTMLAttributes) {\n const [date, setDate] = React.useState({\n from: new Date(2022, 0, 20),\n to: addDays(new Date(2022, 0, 20), 20),\n });\n\n return (\n \n \n Date picker with range\n Select a date range.\n \n\n \n \n \n \n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/exercise-minutes.tsx", "content": "\"use client\";\n\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\";\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\";\n\nconst data = [\n {\n average: 400,\n today: 240,\n day: \"Monday\",\n },\n {\n average: 300,\n today: 139,\n day: \"Tuesday\",\n },\n {\n average: 200,\n today: 980,\n day: \"Wednesday\",\n },\n {\n average: 278,\n today: 390,\n day: \"Thursday\",\n },\n {\n average: 189,\n today: 480,\n day: \"Friday\",\n },\n {\n average: 239,\n today: 380,\n day: \"Saturday\",\n },\n {\n average: 349,\n today: 430,\n day: \"Sunday\",\n },\n];\n\nconst chartConfig = {\n today: {\n label: \"Today\",\n color: \"var(--primary)\",\n },\n average: {\n label: \"Average\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig;\n\nexport function CardsExerciseMinutes() {\n return (\n \n \n Exercise Minutes\n \n Your exercise minutes are ahead of where you normally are.\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n \n \n } />\n \n \n \n \n );\n}\n" }, { "path": "components/examples/cards/forms.tsx", "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nconst plans = [\n {\n id: \"starter\",\n name: \"Starter Plan\",\n description: \"Perfect for small businesses.\",\n price: \"$10\",\n },\n {\n id: \"pro\",\n name: \"Pro Plan\",\n description: \"More features and storage.\",\n price: \"$20\",\n },\n] as const;\n\nexport function CardsForms() {\n return (\n \n \n Upgrade your subscription\n \n You are currently on the free plan. Upgrade to the pro plan to get access to all features.\n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n
\n \n \n \n
\n
\n
\n Plan\n

\n Select the plan that best fits your needs.\n

\n \n {plans.map((plan) => (\n \n \n
\n
{plan.name}
\n
\n {plan.description}\n
\n
\n \n ))}\n \n
\n
\n \n