@net-protocol/profiles 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/index.d.mts +17 -1
- package/dist/index.d.ts +17 -1
- package/dist/index.js +298 -79
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +298 -80
- package/dist/index.mjs.map +1 -1
- package/dist/react.js.map +1 -1
- package/dist/react.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/utils.ts","../src/theme-selectors.ts"],"names":["stringToHex","toBytes32"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Profile-related storage keys\n *\n * Using descriptive keys under 32 bytes to avoid hashing complexity and work seamlessly\n * with existing storage infrastructure. The key includes app prefix and versioning for\n * clarity and future-proofing.\n *\n * NOTE: if we change these keys, users will not be able to see their profile data\n */\nexport const PROFILE_CANVAS_STORAGE_KEY = \"net-beta0.0.1-profile-canvas\";\nexport const PROFILE_PICTURE_STORAGE_KEY = \"net-beta0.0.1-profile-picture\";\nexport const PROFILE_X_USERNAME_STORAGE_KEY =\n \"net-beta0.0.1-profile-x-username\";\nexport const PROFILE_METADATA_STORAGE_KEY = \"net-beta0.0.1-profile-metadata\";\n\n/**\n * Topic strings used when writing to storage\n * These are the second argument to Storage.put()\n */\nexport const PROFILE_PICTURE_TOPIC = \"profile-picture\";\nexport const PROFILE_METADATA_TOPIC = \"profile-metadata\";\nexport const PROFILE_CANVAS_TOPIC = \"profile-canvas\";\nexport const PROFILE_CSS_STORAGE_KEY = \"net-beta0.0.1-profile-css\";\nexport const PROFILE_CSS_TOPIC = \"profile-css\";\n","import { stringToHex } from \"viem\";\nimport { toBytes32 } from \"@net-protocol/core\";\nimport {\n PROFILE_PICTURE_STORAGE_KEY,\n PROFILE_METADATA_STORAGE_KEY,\n PROFILE_CANVAS_STORAGE_KEY,\n PROFILE_CSS_STORAGE_KEY,\n PROFILE_PICTURE_TOPIC,\n PROFILE_METADATA_TOPIC,\n PROFILE_CANVAS_TOPIC,\n PROFILE_CSS_TOPIC,\n} from \"./constants\";\nimport type { ProfileMetadata, ProfileStorageArgs } from \"./types\";\n\n/**\n * Convert a string value to hex for storage\n */\nexport function getValueArgForStorage(value: string): `0x${string}` {\n return stringToHex(value);\n}\n\n/**\n * Get storage args (key as bytes32, value as hex)\n */\nexport function getBytesArgsForStorage(\n key: string,\n value: string\n): { bytesKey: `0x${string}`; bytesValue: `0x${string}` } {\n const bytesKey = toBytes32(key) as `0x${string}`;\n const bytesValue = getValueArgForStorage(value);\n return { bytesKey, bytesValue };\n}\n\n/**\n * Prepare transaction arguments for updating profile picture\n *\n * @param imageUrl - The URL of the profile picture\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfilePictureStorageArgs(\"https://example.com/image.jpg\");\n * // Use with wagmi writeContract:\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfilePictureStorageArgs(\n imageUrl: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_PICTURE_STORAGE_KEY,\n imageUrl\n );\n return {\n bytesKey,\n topic: PROFILE_PICTURE_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Prepare transaction arguments for updating profile metadata (X username, etc.)\n *\n * @param metadata - Profile metadata object to store\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfileMetadataStorageArgs({ x_username: \"myusername\" });\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileMetadataStorageArgs(\n metadata: ProfileMetadata\n): ProfileStorageArgs {\n const jsonString = JSON.stringify(metadata);\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_METADATA_STORAGE_KEY,\n jsonString\n );\n return {\n bytesKey,\n topic: PROFILE_METADATA_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Prepare transaction arguments for updating X username\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * Note: Username is stored WITHOUT the @ prefix. The @ is stripped if provided.\n *\n * @param username - X/Twitter username (with or without @)\n * @returns Arguments for Storage.put()\n */\nexport function getXUsernameStorageArgs(username: string): ProfileStorageArgs {\n // Strip @ prefix if present - store username without @\n const normalizedUsername = username.startsWith(\"@\")\n ? username.slice(1)\n : username;\n return getProfileMetadataStorageArgs({ x_username: normalizedUsername });\n}\n\n/**\n * Prepare transaction arguments for updating profile canvas (HTML content)\n *\n * @param htmlContent - HTML content for the profile canvas\n * @returns Arguments for Storage.put()\n *\n * @example\n * ```ts\n * const args = getProfileCanvasStorageArgs(\"<div>My custom profile</div>\");\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileCanvasStorageArgs(\n htmlContent: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_CANVAS_STORAGE_KEY,\n htmlContent\n );\n return {\n bytesKey,\n topic: PROFILE_CANVAS_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Parse profile metadata JSON and extract profile data\n *\n * @param jsonData - JSON string from storage\n * @returns Parsed profile metadata or undefined if invalid\n */\nexport function parseProfileMetadata(\n jsonData: string\n): ProfileMetadata | undefined {\n try {\n const parsed = JSON.parse(jsonData);\n const storedUsername =\n parsed?.x_username &&\n typeof parsed.x_username === \"string\" &&\n parsed.x_username.length > 0\n ? parsed.x_username\n : undefined;\n\n // Strip @ if present for backwards compatibility with older stored data\n const usernameWithoutAt = storedUsername?.startsWith(\"@\")\n ? storedUsername.slice(1)\n : storedUsername;\n\n // Extract bio if present\n const bio =\n parsed?.bio && typeof parsed.bio === \"string\" && parsed.bio.length > 0\n ? parsed.bio\n : undefined;\n\n // Extract display name if present\n const display_name =\n parsed?.display_name &&\n typeof parsed.display_name === \"string\" &&\n parsed.display_name.length > 0\n ? parsed.display_name\n : undefined;\n\n // Extract token address if present (stored as lowercase)\n const token_address =\n parsed?.token_address &&\n typeof parsed.token_address === \"string\" &&\n parsed.token_address.length > 0\n ? parsed.token_address.toLowerCase()\n : undefined;\n\n return {\n x_username: usernameWithoutAt,\n bio,\n display_name,\n token_address,\n };\n } catch {\n return undefined;\n }\n}\n\n/**\n * Validate that a string is a valid URL\n */\nexport function isValidUrl(url: string): boolean {\n if (!url) return false;\n try {\n new URL(url);\n return true;\n } catch {\n return false;\n }\n}\n\n/**\n * Validate X/Twitter username format\n * Returns true if valid (alphanumeric and underscores, 1-15 chars)\n */\nexport function isValidXUsername(username: string): boolean {\n if (!username) return false;\n // Remove @ prefix if present\n const cleanUsername = username.startsWith(\"@\") ? username.slice(1) : username;\n // X usernames: 1-15 chars, alphanumeric and underscores only\n return /^[a-zA-Z0-9_]{1,15}$/.test(cleanUsername);\n}\n\n/**\n * Validate bio format\n * Returns true if valid (max 280 chars, no control characters except newlines)\n */\nexport function isValidBio(bio: string): boolean {\n if (!bio) return false;\n if (bio.length > 280) return false;\n // Allow printable characters, spaces, and newlines. Disallow other control chars.\n // eslint-disable-next-line no-control-regex\n const hasControlChars = /[\\x00-\\x08\\x0B\\x0C\\x0E-\\x1F\\x7F]/.test(bio);\n return !hasControlChars;\n}\n\n/**\n * Validate display name format\n * Returns true if valid (1-25 characters, no control characters except spaces)\n */\nexport function isValidDisplayName(displayName: string): boolean {\n if (!displayName) return false;\n if (displayName.length > 25) return false;\n // Disallow control characters\n // eslint-disable-next-line no-control-regex\n const hasControlChars = /[\\x00-\\x1F\\x7F]/.test(displayName);\n return !hasControlChars;\n}\n\n/**\n * Prepare transaction arguments for updating bio\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param bio - The bio text\n * @returns Arguments for Storage.put()\n */\nexport function getBioStorageArgs(bio: string): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({ bio });\n}\n\n/**\n * Prepare transaction arguments for updating display name\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param displayName - The display name (max 25 characters)\n * @returns Arguments for Storage.put()\n */\nexport function getDisplayNameStorageArgs(\n displayName: string\n): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({ display_name: displayName });\n}\n\n/**\n * Prepare transaction arguments for updating token address\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param tokenAddress - The ERC-20 token contract address (stored as lowercase)\n * @returns Arguments for Storage.put()\n */\nexport function getTokenAddressStorageArgs(\n tokenAddress: string\n): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({\n token_address: tokenAddress.toLowerCase(),\n });\n}\n\n/**\n * Validate that a string is a valid EVM token address\n * Returns true if valid (0x-prefixed, 40 hex characters)\n */\nexport function isValidTokenAddress(address: string): boolean {\n if (!address) return false;\n return /^0x[a-fA-F0-9]{40}$/.test(address);\n}\n\n/**\n * Maximum CSS size in bytes (10KB — CSS should be small)\n */\nexport const MAX_CSS_SIZE = 10 * 1024;\n\n/**\n * Prepare transaction arguments for updating profile custom CSS\n *\n * @param cssContent - CSS string to store\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfileCSSStorageArgs(\".profile-themed { --primary: 210 40% 98%; }\");\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileCSSStorageArgs(\n cssContent: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_CSS_STORAGE_KEY,\n cssContent\n );\n return {\n bytesKey,\n topic: PROFILE_CSS_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Validate CSS content\n * Returns true if valid (non-empty, within size limit, no script injection)\n */\nexport function isValidCSS(css: string): boolean {\n if (!css || css.trim().length === 0) return false;\n if (Buffer.byteLength(css, \"utf-8\") > MAX_CSS_SIZE) return false;\n // Block script injection via CSS expressions/behavior/url(javascript:)\n const lowerCSS = css.toLowerCase();\n if (lowerCSS.includes(\"expression(\")) return false;\n if (lowerCSS.includes(\"behavior:\")) return false;\n if (lowerCSS.includes(\"javascript:\")) return false;\n if (/<script/i.test(css)) return false;\n return true;\n}\n","/**\n * Single source of truth for profile CSS theming.\n *\n * This file defines:\n * 1. THEME_SELECTORS — the stable set of CSS selectors/variables available for theming\n * 2. DEMO_THEMES — example CSS themes users can apply\n * 3. buildCSSPrompt() — generates an AI prompt describing what can be themed\n *\n * When the profile page structure changes, update THEME_SELECTORS here and\n * everything downstream (AI prompt, docs, validation) stays in sync.\n */\n\n/**\n * A themeable selector or CSS variable group\n */\nexport interface ThemeSelector {\n /** CSS selector or variable name */\n selector: string;\n /** Human-readable description of what it targets */\n description: string;\n /** Category for grouping in documentation */\n category: \"variable\" | \"layout\" | \"component\";\n}\n\n/**\n * All themeable selectors available for profile CSS.\n *\n * CSS variables (category: \"variable\") are the most stable —\n * they survive page restructuring because they're part of the\n * shadcn/Tailwind design system.\n *\n * Layout and component selectors may break when the page structure changes.\n */\nexport const THEME_SELECTORS: ThemeSelector[] = [\n // --- CSS Variables (stable) ---\n {\n selector: \"--background\",\n description: \"Page background color (HSL values, e.g. '210 40% 2%')\",\n category: \"variable\",\n },\n {\n selector: \"--foreground\",\n description: \"Default text color\",\n category: \"variable\",\n },\n {\n selector: \"--primary\",\n description: \"Primary accent color (buttons, links, headings)\",\n category: \"variable\",\n },\n {\n selector: \"--primary-foreground\",\n description: \"Text on primary-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--secondary\",\n description: \"Secondary accent color\",\n category: \"variable\",\n },\n {\n selector: \"--secondary-foreground\",\n description: \"Text on secondary-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--muted\",\n description: \"Muted/subdued background\",\n category: \"variable\",\n },\n {\n selector: \"--muted-foreground\",\n description: \"Text on muted backgrounds\",\n category: \"variable\",\n },\n {\n selector: \"--accent\",\n description: \"Accent color for highlights\",\n category: \"variable\",\n },\n {\n selector: \"--accent-foreground\",\n description: \"Text on accent-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--card\",\n description: \"Card/panel background color\",\n category: \"variable\",\n },\n {\n selector: \"--card-foreground\",\n description: \"Text inside cards\",\n category: \"variable\",\n },\n {\n selector: \"--border\",\n description: \"Border color\",\n category: \"variable\",\n },\n {\n selector: \"--ring\",\n description: \"Focus ring color\",\n category: \"variable\",\n },\n {\n selector: \"--radius\",\n description: \"Border radius (e.g. '0.5rem')\",\n category: \"variable\",\n },\n\n // --- Layout selectors (may change with page restructuring) ---\n {\n selector: \".profile-themed\",\n description: \"Root wrapper for all themed profile content\",\n category: \"layout\",\n },\n\n // --- Component selectors (may change with page restructuring) ---\n {\n selector: \".profile-themed .profile-header\",\n description: \"Profile header area (name, picture, bio)\",\n category: \"component\",\n },\n {\n selector: \".profile-themed .profile-tabs\",\n description: \"Tab navigation bar\",\n category: \"component\",\n },\n {\n selector: \".profile-themed .profile-content\",\n description: \"Main content area below tabs\",\n category: \"component\",\n },\n];\n\n/**\n * Demo themes that users can choose from as starting points.\n * Each is a complete CSS string ready to store on-chain.\n */\nexport const DEMO_THEMES: Record<string, { name: string; css: string }> = {\n hotPink: {\n name: \"Hot Pink Scene\",\n css: `.profile-themed {\n --background: 320 80% 4%;\n --foreground: 320 20% 95%;\n --primary: 330 100% 60%;\n --primary-foreground: 0 0% 100%;\n --secondary: 280 60% 20%;\n --secondary-foreground: 320 20% 95%;\n --muted: 320 40% 12%;\n --muted-foreground: 320 20% 70%;\n --accent: 330 100% 60%;\n --accent-foreground: 0 0% 100%;\n --card: 320 60% 6%;\n --card-foreground: 320 20% 95%;\n --border: 330 60% 25%;\n --ring: 330 100% 60%;\n}`,\n },\n midnightGrunge: {\n name: \"Midnight Grunge\",\n css: `.profile-themed {\n --background: 220 30% 3%;\n --foreground: 220 10% 80%;\n --primary: 45 90% 55%;\n --primary-foreground: 220 30% 5%;\n --secondary: 220 20% 12%;\n --secondary-foreground: 220 10% 80%;\n --muted: 220 20% 8%;\n --muted-foreground: 220 10% 50%;\n --accent: 45 90% 55%;\n --accent-foreground: 220 30% 5%;\n --card: 220 25% 5%;\n --card-foreground: 220 10% 80%;\n --border: 220 15% 15%;\n --ring: 45 90% 55%;\n}`,\n },\n ocean: {\n name: \"Deep Ocean\",\n css: `.profile-themed {\n --background: 200 60% 3%;\n --foreground: 190 20% 90%;\n --primary: 190 80% 50%;\n --primary-foreground: 200 60% 5%;\n --secondary: 210 40% 15%;\n --secondary-foreground: 190 20% 90%;\n --muted: 200 40% 8%;\n --muted-foreground: 190 20% 55%;\n --accent: 170 70% 45%;\n --accent-foreground: 200 60% 5%;\n --card: 200 50% 5%;\n --card-foreground: 190 20% 90%;\n --border: 200 30% 18%;\n --ring: 190 80% 50%;\n}`,\n },\n};\n\n/**\n * Build an AI prompt that describes the available theming surface.\n * Feed this to an LLM alongside a user's description to generate CSS.\n *\n * @returns A prompt string listing all available selectors and usage rules\n */\nexport function buildCSSPrompt(): string {\n const variableLines = THEME_SELECTORS.filter(\n (s) => s.category === \"variable\"\n )\n .map((s) => ` ${s.selector}: ${s.description}`)\n .join(\"\\n\");\n\n const layoutLines = THEME_SELECTORS.filter((s) => s.category === \"layout\")\n .map((s) => ` ${s.selector} — ${s.description}`)\n .join(\"\\n\");\n\n const componentLines = THEME_SELECTORS.filter(\n (s) => s.category === \"component\"\n )\n .map((s) => ` ${s.selector} — ${s.description}`)\n .join(\"\\n\");\n\n return `You are a CSS theme generator for a user profile page.\nAll styles MUST be scoped under the .profile-themed wrapper class.\n\n## CSS Variables (stable — preferred for theming)\nThese use HSL values WITHOUT the hsl() wrapper (e.g. \"210 40% 98%\"):\n${variableLines}\n\n## Layout Selectors (may change across site updates)\n${layoutLines}\n\n## Component Selectors (may change across site updates)\n${componentLines}\n\n## Rules\n1. All selectors MUST start with .profile-themed\n2. CSS variables go inside .profile-themed { ... } as custom properties\n3. Use only valid CSS — no JavaScript, no expressions, no imports\n4. Keep the output under 10KB\n5. Prefer CSS variables over direct selector styling for durability\n6. HSL values are bare numbers: \"210 40% 98%\" not \"hsl(210, 40%, 98%)\"\n\nGiven a user description, output ONLY the CSS (no explanation, no markdown fences).`;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/utils.ts","../src/theme-selectors.ts"],"names":["stringToHex","toBytes32"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Profile-related storage keys\n *\n * Using descriptive keys under 32 bytes to avoid hashing complexity and work seamlessly\n * with existing storage infrastructure. The key includes app prefix and versioning for\n * clarity and future-proofing.\n *\n * NOTE: if we change these keys, users will not be able to see their profile data\n */\nexport const PROFILE_CANVAS_STORAGE_KEY = \"net-beta0.0.1-profile-canvas\";\nexport const PROFILE_PICTURE_STORAGE_KEY = \"net-beta0.0.1-profile-picture\";\nexport const PROFILE_X_USERNAME_STORAGE_KEY =\n \"net-beta0.0.1-profile-x-username\";\nexport const PROFILE_METADATA_STORAGE_KEY = \"net-beta0.0.1-profile-metadata\";\n\n/**\n * Topic strings used when writing to storage\n * These are the second argument to Storage.put()\n */\nexport const PROFILE_PICTURE_TOPIC = \"profile-picture\";\nexport const PROFILE_METADATA_TOPIC = \"profile-metadata\";\nexport const PROFILE_CANVAS_TOPIC = \"profile-canvas\";\nexport const PROFILE_CSS_STORAGE_KEY = \"net-beta0.0.1-profile-css\";\nexport const PROFILE_CSS_TOPIC = \"profile-css\";\n","import { stringToHex } from \"viem\";\nimport { toBytes32 } from \"@net-protocol/core\";\nimport {\n PROFILE_PICTURE_STORAGE_KEY,\n PROFILE_METADATA_STORAGE_KEY,\n PROFILE_CANVAS_STORAGE_KEY,\n PROFILE_CSS_STORAGE_KEY,\n PROFILE_PICTURE_TOPIC,\n PROFILE_METADATA_TOPIC,\n PROFILE_CANVAS_TOPIC,\n PROFILE_CSS_TOPIC,\n} from \"./constants\";\nimport type { ProfileMetadata, ProfileStorageArgs } from \"./types\";\n\n/**\n * Convert a string value to hex for storage\n */\nexport function getValueArgForStorage(value: string): `0x${string}` {\n return stringToHex(value);\n}\n\n/**\n * Get storage args (key as bytes32, value as hex)\n */\nexport function getBytesArgsForStorage(\n key: string,\n value: string\n): { bytesKey: `0x${string}`; bytesValue: `0x${string}` } {\n const bytesKey = toBytes32(key) as `0x${string}`;\n const bytesValue = getValueArgForStorage(value);\n return { bytesKey, bytesValue };\n}\n\n/**\n * Prepare transaction arguments for updating profile picture\n *\n * @param imageUrl - The URL of the profile picture\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfilePictureStorageArgs(\"https://example.com/image.jpg\");\n * // Use with wagmi writeContract:\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfilePictureStorageArgs(\n imageUrl: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_PICTURE_STORAGE_KEY,\n imageUrl\n );\n return {\n bytesKey,\n topic: PROFILE_PICTURE_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Prepare transaction arguments for updating profile metadata (X username, etc.)\n *\n * @param metadata - Profile metadata object to store\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfileMetadataStorageArgs({ x_username: \"myusername\" });\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileMetadataStorageArgs(\n metadata: ProfileMetadata\n): ProfileStorageArgs {\n const jsonString = JSON.stringify(metadata);\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_METADATA_STORAGE_KEY,\n jsonString\n );\n return {\n bytesKey,\n topic: PROFILE_METADATA_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Prepare transaction arguments for updating X username\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * Note: Username is stored WITHOUT the @ prefix. The @ is stripped if provided.\n *\n * @param username - X/Twitter username (with or without @)\n * @returns Arguments for Storage.put()\n */\nexport function getXUsernameStorageArgs(username: string): ProfileStorageArgs {\n // Strip @ prefix if present - store username without @\n const normalizedUsername = username.startsWith(\"@\")\n ? username.slice(1)\n : username;\n return getProfileMetadataStorageArgs({ x_username: normalizedUsername });\n}\n\n/**\n * Prepare transaction arguments for updating profile canvas (HTML content)\n *\n * @param htmlContent - HTML content for the profile canvas\n * @returns Arguments for Storage.put()\n *\n * @example\n * ```ts\n * const args = getProfileCanvasStorageArgs(\"<div>My custom profile</div>\");\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileCanvasStorageArgs(\n htmlContent: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_CANVAS_STORAGE_KEY,\n htmlContent\n );\n return {\n bytesKey,\n topic: PROFILE_CANVAS_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Parse profile metadata JSON and extract profile data\n *\n * @param jsonData - JSON string from storage\n * @returns Parsed profile metadata or undefined if invalid\n */\nexport function parseProfileMetadata(\n jsonData: string\n): ProfileMetadata | undefined {\n try {\n const parsed = JSON.parse(jsonData);\n const storedUsername =\n parsed?.x_username &&\n typeof parsed.x_username === \"string\" &&\n parsed.x_username.length > 0\n ? parsed.x_username\n : undefined;\n\n // Strip @ if present for backwards compatibility with older stored data\n const usernameWithoutAt = storedUsername?.startsWith(\"@\")\n ? storedUsername.slice(1)\n : storedUsername;\n\n // Extract bio if present\n const bio =\n parsed?.bio && typeof parsed.bio === \"string\" && parsed.bio.length > 0\n ? parsed.bio\n : undefined;\n\n // Extract display name if present\n const display_name =\n parsed?.display_name &&\n typeof parsed.display_name === \"string\" &&\n parsed.display_name.length > 0\n ? parsed.display_name\n : undefined;\n\n // Extract token address if present (stored as lowercase)\n const token_address =\n parsed?.token_address &&\n typeof parsed.token_address === \"string\" &&\n parsed.token_address.length > 0\n ? parsed.token_address.toLowerCase()\n : undefined;\n\n return {\n x_username: usernameWithoutAt,\n bio,\n display_name,\n token_address,\n };\n } catch {\n return undefined;\n }\n}\n\n/**\n * Validate that a string is a valid URL\n */\nexport function isValidUrl(url: string): boolean {\n if (!url) return false;\n try {\n new URL(url);\n return true;\n } catch {\n return false;\n }\n}\n\n/**\n * Validate X/Twitter username format\n * Returns true if valid (alphanumeric and underscores, 1-15 chars)\n */\nexport function isValidXUsername(username: string): boolean {\n if (!username) return false;\n // Remove @ prefix if present\n const cleanUsername = username.startsWith(\"@\") ? username.slice(1) : username;\n // X usernames: 1-15 chars, alphanumeric and underscores only\n return /^[a-zA-Z0-9_]{1,15}$/.test(cleanUsername);\n}\n\n/**\n * Validate bio format\n * Returns true if valid (max 280 chars, no control characters except newlines)\n */\nexport function isValidBio(bio: string): boolean {\n if (!bio) return false;\n if (bio.length > 280) return false;\n // Allow printable characters, spaces, and newlines. Disallow other control chars.\n // eslint-disable-next-line no-control-regex\n const hasControlChars = /[\\x00-\\x08\\x0B\\x0C\\x0E-\\x1F\\x7F]/.test(bio);\n return !hasControlChars;\n}\n\n/**\n * Validate display name format\n * Returns true if valid (1-25 characters, no control characters except spaces)\n */\nexport function isValidDisplayName(displayName: string): boolean {\n if (!displayName) return false;\n if (displayName.length > 25) return false;\n // Disallow control characters\n // eslint-disable-next-line no-control-regex\n const hasControlChars = /[\\x00-\\x1F\\x7F]/.test(displayName);\n return !hasControlChars;\n}\n\n/**\n * Prepare transaction arguments for updating bio\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param bio - The bio text\n * @returns Arguments for Storage.put()\n */\nexport function getBioStorageArgs(bio: string): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({ bio });\n}\n\n/**\n * Prepare transaction arguments for updating display name\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param displayName - The display name (max 25 characters)\n * @returns Arguments for Storage.put()\n */\nexport function getDisplayNameStorageArgs(\n displayName: string\n): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({ display_name: displayName });\n}\n\n/**\n * Prepare transaction arguments for updating token address\n * This is a convenience wrapper around getProfileMetadataStorageArgs\n *\n * @param tokenAddress - The ERC-20 token contract address (stored as lowercase)\n * @returns Arguments for Storage.put()\n */\nexport function getTokenAddressStorageArgs(\n tokenAddress: string\n): ProfileStorageArgs {\n return getProfileMetadataStorageArgs({\n token_address: tokenAddress.toLowerCase(),\n });\n}\n\n/**\n * Validate that a string is a valid EVM token address\n * Returns true if valid (0x-prefixed, 40 hex characters)\n */\nexport function isValidTokenAddress(address: string): boolean {\n if (!address) return false;\n return /^0x[a-fA-F0-9]{40}$/.test(address);\n}\n\n/**\n * Maximum CSS size in bytes (10KB — CSS should be small)\n */\nexport const MAX_CSS_SIZE = 10 * 1024;\n\n/**\n * Prepare transaction arguments for updating profile custom CSS\n *\n * @param cssContent - CSS string to store\n * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]\n *\n * @example\n * ```ts\n * const args = getProfileCSSStorageArgs(\".profile-themed { --primary: 210 40% 98%; }\");\n * writeContract({\n * abi: STORAGE_CONTRACT.abi,\n * address: STORAGE_CONTRACT.address,\n * functionName: \"put\",\n * args: [args.bytesKey, args.topic, args.bytesValue],\n * });\n * ```\n */\nexport function getProfileCSSStorageArgs(\n cssContent: string\n): ProfileStorageArgs {\n const { bytesKey, bytesValue } = getBytesArgsForStorage(\n PROFILE_CSS_STORAGE_KEY,\n cssContent\n );\n return {\n bytesKey,\n topic: PROFILE_CSS_TOPIC,\n bytesValue,\n };\n}\n\n/**\n * Sanitize user CSS to prevent injection attacks.\n * - Strips </style> (which could break out of the style element during SSR)\n * - Strips <script> tags\n * - Removes javascript: URIs, expression(), behavior: (legacy IE vectors)\n * - Removes @import rules (could load external resources / exfiltrate data)\n */\nexport function sanitizeCSS(css: string): string {\n return css\n .replace(/<\\/style>/gi, \"\")\n .replace(/<script[\\s\\S]*?<\\/script>/gi, \"\")\n .replace(/javascript\\s*:/gi, \"\")\n .replace(/expression\\s*\\(/gi, \"\")\n .replace(/behavior\\s*:/gi, \"\")\n .replace(/@import\\b[^;]*;?/gi, \"\");\n}\n\n/**\n * Validate CSS content\n * Returns true if valid (non-empty, within size limit, no script injection)\n */\nexport function isValidCSS(css: string): boolean {\n if (!css || css.trim().length === 0) return false;\n if (Buffer.byteLength(css, \"utf-8\") > MAX_CSS_SIZE) return false;\n const lowerCSS = css.toLowerCase();\n // Block script injection via CSS expressions/behavior/url(javascript:)\n if (lowerCSS.includes(\"expression(\")) return false;\n if (lowerCSS.includes(\"behavior:\")) return false;\n if (lowerCSS.includes(\"javascript:\")) return false;\n if (/<script/i.test(css)) return false;\n // Block </style> which could break out of the style element during SSR\n if (lowerCSS.includes(\"</style\")) return false;\n // Block @import which could load external resources / exfiltrate data\n if (/@import\\b/.test(lowerCSS)) return false;\n return true;\n}\n","/**\n * Single source of truth for profile CSS theming.\n *\n * This file defines:\n * 1. THEME_SELECTORS — the stable set of CSS selectors/variables available for theming\n * 2. DEMO_THEMES — example CSS themes users can apply\n * 3. buildCSSPrompt() — generates an AI prompt describing what can be themed\n *\n * When the profile page structure changes, update THEME_SELECTORS here and\n * everything downstream (AI prompt, docs, validation) stays in sync.\n */\n\n/**\n * A themeable selector or CSS variable group\n */\nexport interface ThemeSelector {\n /** CSS selector or variable name */\n selector: string;\n /** Human-readable description of what it targets */\n description: string;\n /** Category for grouping in documentation */\n category: \"variable\" | \"layout\" | \"component\";\n}\n\n/**\n * All themeable selectors available for profile CSS.\n *\n * CSS variables (category: \"variable\") are the most stable —\n * they survive page restructuring because they're part of the\n * shadcn/Tailwind design system.\n *\n * Layout and component selectors may break when the page structure changes.\n */\nexport const THEME_SELECTORS: ThemeSelector[] = [\n // --- CSS Variables (stable) ---\n {\n selector: \"--background\",\n description: \"Page background color (HSL values, e.g. '210 40% 2%')\",\n category: \"variable\",\n },\n {\n selector: \"--foreground\",\n description: \"Default text color\",\n category: \"variable\",\n },\n {\n selector: \"--primary\",\n description: \"Primary accent color (buttons, links, headings)\",\n category: \"variable\",\n },\n {\n selector: \"--primary-foreground\",\n description: \"Text on primary-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--secondary\",\n description: \"Secondary accent color\",\n category: \"variable\",\n },\n {\n selector: \"--secondary-foreground\",\n description: \"Text on secondary-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--muted\",\n description: \"Muted/subdued background\",\n category: \"variable\",\n },\n {\n selector: \"--muted-foreground\",\n description: \"Text on muted backgrounds\",\n category: \"variable\",\n },\n {\n selector: \"--accent\",\n description: \"Accent color for highlights\",\n category: \"variable\",\n },\n {\n selector: \"--accent-foreground\",\n description: \"Text on accent-colored elements\",\n category: \"variable\",\n },\n {\n selector: \"--card\",\n description: \"Card/panel background color\",\n category: \"variable\",\n },\n {\n selector: \"--card-foreground\",\n description: \"Text inside cards\",\n category: \"variable\",\n },\n {\n selector: \"--border\",\n description: \"Border color\",\n category: \"variable\",\n },\n {\n selector: \"--ring\",\n description: \"Focus ring color\",\n category: \"variable\",\n },\n {\n selector: \"--radius\",\n description: \"Border radius (e.g. '0.5rem')\",\n category: \"variable\",\n },\n\n // --- Layout selectors ---\n {\n selector: \".profile-themed\",\n description: \"Root wrapper for all themed profile content\",\n category: \"layout\",\n },\n\n // --- Component selectors ---\n {\n selector: \".profile-header\",\n description:\n \"Profile header card (name, avatar, bio, stat pills). Uses bg-gradient from-gray-900 to-gray-800, border-green-500\",\n category: \"component\",\n },\n {\n selector: \".profile-tabs\",\n description:\n \"Tab navigation bar (Canvas, Posts, Feed, Activity). Uses bg-gray-800, border-gray-700. Active tab uses bg-green-600\",\n category: \"component\",\n },\n {\n selector: \".profile-content\",\n description: \"Main content area below tabs (posts, canvas, feed, activity)\",\n category: \"component\",\n },\n];\n\n/**\n * Demo themes that users can choose from as starting points.\n * Each is a complete CSS string ready to store on-chain.\n *\n * Themes include CSS variable overrides, @keyframes animations,\n * backdrop-filter effects, and full component selector coverage\n * including .profile-content overrides.\n */\nexport const DEMO_THEMES: Record<string, { name: string; css: string }> = {\n checkerboard: {\n name: \"Checkerboard\",\n css: `@keyframes checker-scroll {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n}\n.profile-themed {\n --primary: 0 0% 100%;\n --primary-foreground: 0 0% 0%;\n --card: 0 0% 5%;\n --card-foreground: 0 0% 95%;\n --border: 0 0% 30%;\n --ring: 0 0% 100%;\n --muted-foreground: 0 0% 60%;\n --radius: 0px;\n color: #e0e0e0;\n background-image: repeating-conic-gradient(#333 0% 25%, #111 0% 50%);\n background-size: 40px 40px;\n animation: checker-scroll 3s linear infinite;\n}\n.profile-themed .profile-header {\n background: rgba(0,0,0,0.4) !important;\n background-color: rgba(0,0,0,0.4) !important;\n background-image: none !important;\n border-color: #fff !important;\n border-width: 2px;\n border-radius: 0 !important;\n backdrop-filter: blur(4px);\n}\n.profile-themed .profile-tabs {\n background: rgba(0,0,0,0.35) !important;\n background-color: rgba(0,0,0,0.35) !important;\n border-color: #555 !important;\n border-radius: 0 !important;\n backdrop-filter: blur(4px);\n}\n.profile-themed .profile-tabs button { color: #888 !important; }\n.profile-themed .profile-tabs button.bg-green-600 {\n background-color: rgba(255,255,255,0.9) !important;\n color: #000 !important;\n border-radius: 0 !important;\n}\n.profile-themed .profile-content .border-green-400 {\n border-color: #555 !important;\n border-radius: 0 !important;\n background: rgba(0,0,0,0.35) !important;\n background-color: rgba(0,0,0,0.35) !important;\n backdrop-filter: blur(4px);\n}\n.profile-themed .profile-content .text-green-400 { color: #fff !important; }\n.profile-themed .profile-content .text-green-300 { color: #ccc !important; }\n.profile-themed .profile-content .text-white { color: #e0e0e0 !important; }\n.profile-themed .profile-content .text-gray-500 { color: #666 !important; }\n.profile-themed .profile-content .text-gray-400 { color: #888 !important; }`,\n },\n neonPulse: {\n name: \"Neon Pulse\",\n css: `@keyframes neon-glow {\n 0%, 100% { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff44; }\n 33% { border-color: #00ffff; box-shadow: 0 0 15px #00ffff44; }\n 66% { border-color: #ffff00; box-shadow: 0 0 15px #ffff0044; }\n}\n@keyframes hue-rotate {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n}\n.profile-themed {\n --primary: 300 100% 60%;\n --primary-foreground: 0 0% 100%;\n --card: 260 80% 4%;\n --card-foreground: 280 50% 92%;\n --border: 300 100% 40%;\n --ring: 300 100% 60%;\n --muted-foreground: 280 30% 55%;\n color: #e8d0ff;\n}\n.profile-themed .profile-header {\n background: linear-gradient(135deg, #1a0030, #0d001a) !important;\n border-width: 2px !important;\n border-style: solid !important;\n animation: neon-glow 4s ease-in-out infinite;\n}\n.profile-themed .profile-tabs {\n background-color: #0d001a !important;\n border-color: #6600aa !important;\n}\n.profile-themed .profile-tabs button { color: #aa66dd !important; }\n.profile-themed .profile-tabs button.bg-green-600 {\n background: linear-gradient(90deg, #ff00ff, #00ffff) !important;\n color: #000 !important;\n animation: hue-rotate 6s linear infinite;\n}\n.profile-themed .profile-content .border-green-400 {\n border-width: 1px !important;\n border-style: solid !important;\n animation: neon-glow 4s ease-in-out infinite;\n}\n.profile-themed .profile-content .text-green-400 { color: #ff66ff !important; }\n.profile-themed .profile-content .text-green-300 { color: #cc88ff !important; }\n.profile-themed .profile-content .text-white { color: #e8d0ff !important; }\n.profile-themed .profile-content .text-gray-500 { color: #6644aa !important; }\n.profile-themed .profile-content .text-gray-400 { color: #9966cc !important; }`,\n },\n sunset: {\n name: \"Sunset\",\n css: `@keyframes sunset-shift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n}\n.profile-themed {\n --primary: 25 100% 55%;\n --primary-foreground: 0 0% 100%;\n --card: 15 60% 6%;\n --card-foreground: 35 80% 90%;\n --border: 20 80% 30%;\n --ring: 25 100% 55%;\n --muted-foreground: 20 40% 50%;\n color: #fde4c8;\n background: linear-gradient(135deg, #1a0a00, #2d0a1e, #0a0a2d, #1a0a00);\n background-size: 400% 400%;\n animation: sunset-shift 15s ease-in-out infinite;\n}\n.profile-themed .profile-header {\n background: linear-gradient(135deg, #3d1200, #2d0a1e, #1a0033) !important;\n border-color: #ff6600 !important;\n border-width: 2px;\n box-shadow: 0 0 30px #ff440022;\n}\n.profile-themed .profile-tabs {\n background-color: #1a0a00dd !important;\n border-color: #663300 !important;\n}\n.profile-themed .profile-tabs button { color: #cc8855 !important; }\n.profile-themed .profile-tabs button.bg-green-600 {\n background: linear-gradient(90deg, #ff4400, #ff8800) !important;\n color: #fff !important;\n}\n.profile-themed .profile-content .border-green-400 {\n border-color: #ff660044 !important;\n box-shadow: 0 0 10px #ff440011;\n}\n.profile-themed .profile-content .text-green-400 { color: #ff8844 !important; }\n.profile-themed .profile-content .text-green-300 { color: #ffaa66 !important; }\n.profile-themed .profile-content .text-white { color: #fde4c8 !important; }\n.profile-themed .profile-content .text-gray-500 { color: #8a6040 !important; }\n.profile-themed .profile-content .text-gray-400 { color: #bb8866 !important; }`,\n },\n psychedelic: {\n name: \"Dreamscape\",\n css: `@keyframes dreamDrift {\n 0% { background-position: 0% 50%; }\n 25% { background-position: 100% 30%; }\n 50% { background-position: 80% 100%; }\n 75% { background-position: 20% 60%; }\n 100% { background-position: 0% 50%; }\n}\n@keyframes floatCircles {\n 0% { transform: translate(0, 0) rotate(0deg); }\n 33% { transform: translate(20px, -30px) rotate(120deg); }\n 66% { transform: translate(-15px, 20px) rotate(240deg); }\n 100% { transform: translate(0, 0) rotate(360deg); }\n}\n@keyframes flowBorder {\n 0% { background-position: 0 0, 0% 0%; }\n 100% { background-position: 0 0, 300% 300%; }\n}\n@keyframes glowPulse {\n 0% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }\n 50% { box-shadow: 0 0 25px hsl(220 60% 70% / 0.4), 0 0 50px hsl(220 50% 65% / 0.15); }\n 100% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }\n}\n@keyframes tabGlow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n.profile-themed {\n --background: 260 30% 6%;\n --foreground: 250 30% 90%;\n --primary: 270 60% 72%;\n --primary-foreground: 260 30% 10%;\n --secondary: 220 50% 65%;\n --secondary-foreground: 260 30% 10%;\n --muted: 260 20% 15%;\n --muted-foreground: 250 25% 65%;\n --accent: 200 50% 70%;\n --accent-foreground: 260 30% 10%;\n --card: 260 25% 10%;\n --card-foreground: 250 30% 90%;\n --border: 270 40% 50%;\n --ring: 270 60% 72%;\n --radius: 0.75rem;\n color: hsl(250 30% 90%) !important;\n position: relative;\n overflow: hidden;\n background-image: linear-gradient(-45deg, hsl(260 30% 8%), hsl(270 50% 30%), hsl(220 40% 25%), hsl(280 40% 20%), hsl(240 30% 12%)) !important;\n background-size: 400% 400%;\n animation: dreamDrift 20s ease-in-out infinite;\n}\n.profile-themed::after {\n content: \"\";\n position: absolute;\n top: 40px;\n left: 30px;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: hsl(270 60% 80% / 0.12);\n box-shadow:\n 200px 100px 0 40px hsl(220 60% 80% / 0.1),\n 50px 300px 0 60px hsl(280 50% 75% / 0.1),\n 320px 400px 0 35px hsl(200 50% 80% / 0.12),\n 150px 550px 0 50px hsl(260 50% 75% / 0.1);\n filter: blur(10px);\n animation: floatCircles 30s ease-in-out infinite;\n z-index: 2;\n pointer-events: none;\n}\n.profile-themed .profile-header {\n background: hsl(260 25% 10% / 0.75) !important;\n background-image: none !important;\n border-color: hsl(270 40% 50% / 0.3) !important;\n backdrop-filter: blur(30px) saturate(140%);\n box-shadow: 0 0 30px hsl(270 50% 60% / 0.15);\n}\n.profile-themed .profile-tabs {\n background-color: hsl(260 25% 12% / 0.8) !important;\n border-color: hsl(270 40% 50% / 0.3) !important;\n backdrop-filter: blur(20px) saturate(140%);\n}\n.profile-themed .profile-tabs button {\n color: hsl(250 25% 65%) !important;\n}\n.profile-themed .profile-tabs button.bg-green-600 {\n background-image: linear-gradient(90deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(280 50% 70%)) !important;\n background-size: 300% 300%;\n animation: tabGlow 8s ease infinite;\n color: hsl(0 0% 100%) !important;\n}\n.profile-themed .profile-content {\n background: hsl(260 25% 8% / 0.6) !important;\n}\n.profile-themed .profile-content .border-green-400 {\n border: 2px solid transparent !important;\n background-image:\n linear-gradient(hsl(260 25% 12% / 0.85), hsl(260 25% 12% / 0.85)),\n linear-gradient(135deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(200 50% 70%), hsl(280 50% 70%), hsl(270 60% 65%)) !important;\n background-origin: border-box !important;\n background-clip: padding-box, border-box !important;\n background-size: 100% 100%, 400% 400% !important;\n backdrop-filter: blur(15px) saturate(140%);\n animation: flowBorder 6s linear infinite, glowPulse 4s ease-in-out infinite;\n}\n.profile-themed .profile-content .text-green-400 {\n color: hsl(270 60% 75%) !important;\n text-shadow: 0 0 12px hsl(270 60% 70% / 0.4);\n}\n.profile-themed .profile-content .text-green-300 { color: hsl(220 50% 75%) !important; }\n.profile-themed .profile-content .text-white { color: hsl(250 30% 90%) !important; }\n.profile-themed .profile-content .text-gray-500 { color: hsl(250 20% 50%) !important; }\n.profile-themed .profile-content .text-gray-400 { color: hsl(250 25% 65%) !important; }`,\n },\n};\n\n/**\n * Build an AI prompt that describes the available theming surface.\n * Feed this to an LLM alongside a user's description to generate CSS.\n *\n * The prompt includes per-selector documentation, animation guidance,\n * !important rules for beating Tailwind utilities, and supported\n * properties like backdrop-filter and box-shadow.\n *\n * @returns A prompt string listing all available selectors and usage rules\n */\nexport function buildCSSPrompt(): string {\n const variableLines = THEME_SELECTORS.filter(\n (s) => s.category === \"variable\"\n )\n .map((s) => ` ${s.selector}: ${s.description}`)\n .join(\"\\n\");\n\n return `You are a CSS theme generator for a user profile page.\nAll styles MUST be scoped under .profile-themed.\n\n## CSS Variables (set inside .profile-themed { ... })\nHSL values WITHOUT hsl() wrapper (e.g. \"210 40% 98%\"):\n${variableLines}\n\n## Component Selectors\n .profile-themed — root wrapper; set CSS variables, \\`color\\`, and optionally background/background-image/animation for full-page effects\n .profile-themed .profile-header — header card; override background, background-image: none, border-color\n .profile-themed .profile-tabs — tab bar; override background-color, border-color\n .profile-themed .profile-tabs button — inactive tab text color\n .profile-themed .profile-tabs button.bg-green-600 — active tab background + color\n .profile-themed .profile-content — content area below tabs\n .profile-themed .profile-content .border-green-400 — post card borders + background\n .profile-themed .profile-content .text-green-400 — post links/usernames\n .profile-themed .profile-content .text-green-300 — secondary links\n .profile-themed .profile-content .text-white — post body text\n .profile-themed .profile-content .text-gray-500 — timestamps\n .profile-themed .profile-content .text-gray-400 — secondary text\n\n## Rules\n1. All selectors MUST start with .profile-themed\n2. Use !important on color, background, background-color, background-image, border-color overrides (needed to beat Tailwind utilities)\n3. Set background-image: none !important on .profile-header to clear its default gradient\n4. Set \\`color\\` on .profile-themed for inherited text color\n5. @keyframes animations are encouraged — use for backgrounds, borders, glows\n6. IMPORTANT: Do NOT use \\`background\\` shorthand with !important if you animate background-position — the shorthand locks background-position with !important and animations cannot override it. Use \\`background-image\\` instead.\n7. backdrop-filter, box-shadow, and gradients are supported\n8. Use valid CSS only — no JS, no expressions, no imports\n9. Keep under 10KB\n10. HSL values are bare: \"210 40% 98%\" not \"hsl(210, 40%, 98%)\"\n\nOutput ONLY the CSS.`;\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -129,6 +129,9 @@ function getProfileCSSStorageArgs(cssContent) {
|
|
|
129
129
|
bytesValue
|
|
130
130
|
};
|
|
131
131
|
}
|
|
132
|
+
function sanitizeCSS(css) {
|
|
133
|
+
return css.replace(/<\/style>/gi, "").replace(/<script[\s\S]*?<\/script>/gi, "").replace(/javascript\s*:/gi, "").replace(/expression\s*\(/gi, "").replace(/behavior\s*:/gi, "").replace(/@import\b[^;]*;?/gi, "");
|
|
134
|
+
}
|
|
132
135
|
function isValidCSS(css) {
|
|
133
136
|
if (!css || css.trim().length === 0) return false;
|
|
134
137
|
if (Buffer.byteLength(css, "utf-8") > MAX_CSS_SIZE) return false;
|
|
@@ -137,6 +140,8 @@ function isValidCSS(css) {
|
|
|
137
140
|
if (lowerCSS.includes("behavior:")) return false;
|
|
138
141
|
if (lowerCSS.includes("javascript:")) return false;
|
|
139
142
|
if (/<script/i.test(css)) return false;
|
|
143
|
+
if (lowerCSS.includes("</style")) return false;
|
|
144
|
+
if (/@import\b/.test(lowerCSS)) return false;
|
|
140
145
|
return true;
|
|
141
146
|
}
|
|
142
147
|
|
|
@@ -218,120 +223,333 @@ var THEME_SELECTORS = [
|
|
|
218
223
|
description: "Border radius (e.g. '0.5rem')",
|
|
219
224
|
category: "variable"
|
|
220
225
|
},
|
|
221
|
-
// --- Layout selectors
|
|
226
|
+
// --- Layout selectors ---
|
|
222
227
|
{
|
|
223
228
|
selector: ".profile-themed",
|
|
224
229
|
description: "Root wrapper for all themed profile content",
|
|
225
230
|
category: "layout"
|
|
226
231
|
},
|
|
227
|
-
// --- Component selectors
|
|
232
|
+
// --- Component selectors ---
|
|
228
233
|
{
|
|
229
|
-
selector: ".profile-
|
|
230
|
-
description: "Profile header
|
|
234
|
+
selector: ".profile-header",
|
|
235
|
+
description: "Profile header card (name, avatar, bio, stat pills). Uses bg-gradient from-gray-900 to-gray-800, border-green-500",
|
|
231
236
|
category: "component"
|
|
232
237
|
},
|
|
233
238
|
{
|
|
234
|
-
selector: ".profile-
|
|
235
|
-
description: "Tab navigation bar",
|
|
239
|
+
selector: ".profile-tabs",
|
|
240
|
+
description: "Tab navigation bar (Canvas, Posts, Feed, Activity). Uses bg-gray-800, border-gray-700. Active tab uses bg-green-600",
|
|
236
241
|
category: "component"
|
|
237
242
|
},
|
|
238
243
|
{
|
|
239
|
-
selector: ".profile-
|
|
240
|
-
description: "Main content area below tabs",
|
|
244
|
+
selector: ".profile-content",
|
|
245
|
+
description: "Main content area below tabs (posts, canvas, feed, activity)",
|
|
241
246
|
category: "component"
|
|
242
247
|
}
|
|
243
248
|
];
|
|
244
249
|
var DEMO_THEMES = {
|
|
245
|
-
|
|
246
|
-
name: "
|
|
247
|
-
css:
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
250
|
+
checkerboard: {
|
|
251
|
+
name: "Checkerboard",
|
|
252
|
+
css: `@keyframes checker-scroll {
|
|
253
|
+
0% { background-position: 0 0; }
|
|
254
|
+
100% { background-position: 40px 40px; }
|
|
255
|
+
}
|
|
256
|
+
.profile-themed {
|
|
257
|
+
--primary: 0 0% 100%;
|
|
258
|
+
--primary-foreground: 0 0% 0%;
|
|
259
|
+
--card: 0 0% 5%;
|
|
260
|
+
--card-foreground: 0 0% 95%;
|
|
261
|
+
--border: 0 0% 30%;
|
|
262
|
+
--ring: 0 0% 100%;
|
|
263
|
+
--muted-foreground: 0 0% 60%;
|
|
264
|
+
--radius: 0px;
|
|
265
|
+
color: #e0e0e0;
|
|
266
|
+
background-image: repeating-conic-gradient(#333 0% 25%, #111 0% 50%);
|
|
267
|
+
background-size: 40px 40px;
|
|
268
|
+
animation: checker-scroll 3s linear infinite;
|
|
269
|
+
}
|
|
270
|
+
.profile-themed .profile-header {
|
|
271
|
+
background: rgba(0,0,0,0.4) !important;
|
|
272
|
+
background-color: rgba(0,0,0,0.4) !important;
|
|
273
|
+
background-image: none !important;
|
|
274
|
+
border-color: #fff !important;
|
|
275
|
+
border-width: 2px;
|
|
276
|
+
border-radius: 0 !important;
|
|
277
|
+
backdrop-filter: blur(4px);
|
|
278
|
+
}
|
|
279
|
+
.profile-themed .profile-tabs {
|
|
280
|
+
background: rgba(0,0,0,0.35) !important;
|
|
281
|
+
background-color: rgba(0,0,0,0.35) !important;
|
|
282
|
+
border-color: #555 !important;
|
|
283
|
+
border-radius: 0 !important;
|
|
284
|
+
backdrop-filter: blur(4px);
|
|
285
|
+
}
|
|
286
|
+
.profile-themed .profile-tabs button { color: #888 !important; }
|
|
287
|
+
.profile-themed .profile-tabs button.bg-green-600 {
|
|
288
|
+
background-color: rgba(255,255,255,0.9) !important;
|
|
289
|
+
color: #000 !important;
|
|
290
|
+
border-radius: 0 !important;
|
|
291
|
+
}
|
|
292
|
+
.profile-themed .profile-content .border-green-400 {
|
|
293
|
+
border-color: #555 !important;
|
|
294
|
+
border-radius: 0 !important;
|
|
295
|
+
background: rgba(0,0,0,0.35) !important;
|
|
296
|
+
background-color: rgba(0,0,0,0.35) !important;
|
|
297
|
+
backdrop-filter: blur(4px);
|
|
298
|
+
}
|
|
299
|
+
.profile-themed .profile-content .text-green-400 { color: #fff !important; }
|
|
300
|
+
.profile-themed .profile-content .text-green-300 { color: #ccc !important; }
|
|
301
|
+
.profile-themed .profile-content .text-white { color: #e0e0e0 !important; }
|
|
302
|
+
.profile-themed .profile-content .text-gray-500 { color: #666 !important; }
|
|
303
|
+
.profile-themed .profile-content .text-gray-400 { color: #888 !important; }`
|
|
304
|
+
},
|
|
305
|
+
neonPulse: {
|
|
306
|
+
name: "Neon Pulse",
|
|
307
|
+
css: `@keyframes neon-glow {
|
|
308
|
+
0%, 100% { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff44; }
|
|
309
|
+
33% { border-color: #00ffff; box-shadow: 0 0 15px #00ffff44; }
|
|
310
|
+
66% { border-color: #ffff00; box-shadow: 0 0 15px #ffff0044; }
|
|
311
|
+
}
|
|
312
|
+
@keyframes hue-rotate {
|
|
313
|
+
0% { filter: hue-rotate(0deg); }
|
|
314
|
+
100% { filter: hue-rotate(360deg); }
|
|
315
|
+
}
|
|
316
|
+
.profile-themed {
|
|
317
|
+
--primary: 300 100% 60%;
|
|
251
318
|
--primary-foreground: 0 0% 100%;
|
|
252
|
-
--
|
|
253
|
-
--
|
|
254
|
-
--
|
|
255
|
-
--
|
|
256
|
-
--
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
319
|
+
--card: 260 80% 4%;
|
|
320
|
+
--card-foreground: 280 50% 92%;
|
|
321
|
+
--border: 300 100% 40%;
|
|
322
|
+
--ring: 300 100% 60%;
|
|
323
|
+
--muted-foreground: 280 30% 55%;
|
|
324
|
+
color: #e8d0ff;
|
|
325
|
+
}
|
|
326
|
+
.profile-themed .profile-header {
|
|
327
|
+
background: linear-gradient(135deg, #1a0030, #0d001a) !important;
|
|
328
|
+
border-width: 2px !important;
|
|
329
|
+
border-style: solid !important;
|
|
330
|
+
animation: neon-glow 4s ease-in-out infinite;
|
|
331
|
+
}
|
|
332
|
+
.profile-themed .profile-tabs {
|
|
333
|
+
background-color: #0d001a !important;
|
|
334
|
+
border-color: #6600aa !important;
|
|
335
|
+
}
|
|
336
|
+
.profile-themed .profile-tabs button { color: #aa66dd !important; }
|
|
337
|
+
.profile-themed .profile-tabs button.bg-green-600 {
|
|
338
|
+
background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
|
|
339
|
+
color: #000 !important;
|
|
340
|
+
animation: hue-rotate 6s linear infinite;
|
|
341
|
+
}
|
|
342
|
+
.profile-themed .profile-content .border-green-400 {
|
|
343
|
+
border-width: 1px !important;
|
|
344
|
+
border-style: solid !important;
|
|
345
|
+
animation: neon-glow 4s ease-in-out infinite;
|
|
346
|
+
}
|
|
347
|
+
.profile-themed .profile-content .text-green-400 { color: #ff66ff !important; }
|
|
348
|
+
.profile-themed .profile-content .text-green-300 { color: #cc88ff !important; }
|
|
349
|
+
.profile-themed .profile-content .text-white { color: #e8d0ff !important; }
|
|
350
|
+
.profile-themed .profile-content .text-gray-500 { color: #6644aa !important; }
|
|
351
|
+
.profile-themed .profile-content .text-gray-400 { color: #9966cc !important; }`
|
|
263
352
|
},
|
|
264
|
-
|
|
265
|
-
name: "
|
|
266
|
-
css:
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
--
|
|
272
|
-
--
|
|
273
|
-
--
|
|
274
|
-
--
|
|
275
|
-
--
|
|
276
|
-
--
|
|
277
|
-
--
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
353
|
+
sunset: {
|
|
354
|
+
name: "Sunset",
|
|
355
|
+
css: `@keyframes sunset-shift {
|
|
356
|
+
0%, 100% { background-position: 0% 50%; }
|
|
357
|
+
50% { background-position: 100% 50%; }
|
|
358
|
+
}
|
|
359
|
+
.profile-themed {
|
|
360
|
+
--primary: 25 100% 55%;
|
|
361
|
+
--primary-foreground: 0 0% 100%;
|
|
362
|
+
--card: 15 60% 6%;
|
|
363
|
+
--card-foreground: 35 80% 90%;
|
|
364
|
+
--border: 20 80% 30%;
|
|
365
|
+
--ring: 25 100% 55%;
|
|
366
|
+
--muted-foreground: 20 40% 50%;
|
|
367
|
+
color: #fde4c8;
|
|
368
|
+
background: linear-gradient(135deg, #1a0a00, #2d0a1e, #0a0a2d, #1a0a00);
|
|
369
|
+
background-size: 400% 400%;
|
|
370
|
+
animation: sunset-shift 15s ease-in-out infinite;
|
|
371
|
+
}
|
|
372
|
+
.profile-themed .profile-header {
|
|
373
|
+
background: linear-gradient(135deg, #3d1200, #2d0a1e, #1a0033) !important;
|
|
374
|
+
border-color: #ff6600 !important;
|
|
375
|
+
border-width: 2px;
|
|
376
|
+
box-shadow: 0 0 30px #ff440022;
|
|
377
|
+
}
|
|
378
|
+
.profile-themed .profile-tabs {
|
|
379
|
+
background-color: #1a0a00dd !important;
|
|
380
|
+
border-color: #663300 !important;
|
|
381
|
+
}
|
|
382
|
+
.profile-themed .profile-tabs button { color: #cc8855 !important; }
|
|
383
|
+
.profile-themed .profile-tabs button.bg-green-600 {
|
|
384
|
+
background: linear-gradient(90deg, #ff4400, #ff8800) !important;
|
|
385
|
+
color: #fff !important;
|
|
386
|
+
}
|
|
387
|
+
.profile-themed .profile-content .border-green-400 {
|
|
388
|
+
border-color: #ff660044 !important;
|
|
389
|
+
box-shadow: 0 0 10px #ff440011;
|
|
390
|
+
}
|
|
391
|
+
.profile-themed .profile-content .text-green-400 { color: #ff8844 !important; }
|
|
392
|
+
.profile-themed .profile-content .text-green-300 { color: #ffaa66 !important; }
|
|
393
|
+
.profile-themed .profile-content .text-white { color: #fde4c8 !important; }
|
|
394
|
+
.profile-themed .profile-content .text-gray-500 { color: #8a6040 !important; }
|
|
395
|
+
.profile-themed .profile-content .text-gray-400 { color: #bb8866 !important; }`
|
|
282
396
|
},
|
|
283
|
-
|
|
284
|
-
name: "
|
|
285
|
-
css:
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}
|
|
397
|
+
psychedelic: {
|
|
398
|
+
name: "Dreamscape",
|
|
399
|
+
css: `@keyframes dreamDrift {
|
|
400
|
+
0% { background-position: 0% 50%; }
|
|
401
|
+
25% { background-position: 100% 30%; }
|
|
402
|
+
50% { background-position: 80% 100%; }
|
|
403
|
+
75% { background-position: 20% 60%; }
|
|
404
|
+
100% { background-position: 0% 50%; }
|
|
405
|
+
}
|
|
406
|
+
@keyframes floatCircles {
|
|
407
|
+
0% { transform: translate(0, 0) rotate(0deg); }
|
|
408
|
+
33% { transform: translate(20px, -30px) rotate(120deg); }
|
|
409
|
+
66% { transform: translate(-15px, 20px) rotate(240deg); }
|
|
410
|
+
100% { transform: translate(0, 0) rotate(360deg); }
|
|
411
|
+
}
|
|
412
|
+
@keyframes flowBorder {
|
|
413
|
+
0% { background-position: 0 0, 0% 0%; }
|
|
414
|
+
100% { background-position: 0 0, 300% 300%; }
|
|
415
|
+
}
|
|
416
|
+
@keyframes glowPulse {
|
|
417
|
+
0% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }
|
|
418
|
+
50% { box-shadow: 0 0 25px hsl(220 60% 70% / 0.4), 0 0 50px hsl(220 50% 65% / 0.15); }
|
|
419
|
+
100% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }
|
|
420
|
+
}
|
|
421
|
+
@keyframes tabGlow {
|
|
422
|
+
0% { background-position: 0% 50%; }
|
|
423
|
+
50% { background-position: 100% 50%; }
|
|
424
|
+
100% { background-position: 0% 50%; }
|
|
425
|
+
}
|
|
426
|
+
.profile-themed {
|
|
427
|
+
--background: 260 30% 6%;
|
|
428
|
+
--foreground: 250 30% 90%;
|
|
429
|
+
--primary: 270 60% 72%;
|
|
430
|
+
--primary-foreground: 260 30% 10%;
|
|
431
|
+
--secondary: 220 50% 65%;
|
|
432
|
+
--secondary-foreground: 260 30% 10%;
|
|
433
|
+
--muted: 260 20% 15%;
|
|
434
|
+
--muted-foreground: 250 25% 65%;
|
|
435
|
+
--accent: 200 50% 70%;
|
|
436
|
+
--accent-foreground: 260 30% 10%;
|
|
437
|
+
--card: 260 25% 10%;
|
|
438
|
+
--card-foreground: 250 30% 90%;
|
|
439
|
+
--border: 270 40% 50%;
|
|
440
|
+
--ring: 270 60% 72%;
|
|
441
|
+
--radius: 0.75rem;
|
|
442
|
+
color: hsl(250 30% 90%) !important;
|
|
443
|
+
position: relative;
|
|
444
|
+
overflow: hidden;
|
|
445
|
+
background-image: linear-gradient(-45deg, hsl(260 30% 8%), hsl(270 50% 30%), hsl(220 40% 25%), hsl(280 40% 20%), hsl(240 30% 12%)) !important;
|
|
446
|
+
background-size: 400% 400%;
|
|
447
|
+
animation: dreamDrift 20s ease-in-out infinite;
|
|
448
|
+
}
|
|
449
|
+
.profile-themed::after {
|
|
450
|
+
content: "";
|
|
451
|
+
position: absolute;
|
|
452
|
+
top: 40px;
|
|
453
|
+
left: 30px;
|
|
454
|
+
width: 80px;
|
|
455
|
+
height: 80px;
|
|
456
|
+
border-radius: 50%;
|
|
457
|
+
background: hsl(270 60% 80% / 0.12);
|
|
458
|
+
box-shadow:
|
|
459
|
+
200px 100px 0 40px hsl(220 60% 80% / 0.1),
|
|
460
|
+
50px 300px 0 60px hsl(280 50% 75% / 0.1),
|
|
461
|
+
320px 400px 0 35px hsl(200 50% 80% / 0.12),
|
|
462
|
+
150px 550px 0 50px hsl(260 50% 75% / 0.1);
|
|
463
|
+
filter: blur(10px);
|
|
464
|
+
animation: floatCircles 30s ease-in-out infinite;
|
|
465
|
+
z-index: 2;
|
|
466
|
+
pointer-events: none;
|
|
467
|
+
}
|
|
468
|
+
.profile-themed .profile-header {
|
|
469
|
+
background: hsl(260 25% 10% / 0.75) !important;
|
|
470
|
+
background-image: none !important;
|
|
471
|
+
border-color: hsl(270 40% 50% / 0.3) !important;
|
|
472
|
+
backdrop-filter: blur(30px) saturate(140%);
|
|
473
|
+
box-shadow: 0 0 30px hsl(270 50% 60% / 0.15);
|
|
474
|
+
}
|
|
475
|
+
.profile-themed .profile-tabs {
|
|
476
|
+
background-color: hsl(260 25% 12% / 0.8) !important;
|
|
477
|
+
border-color: hsl(270 40% 50% / 0.3) !important;
|
|
478
|
+
backdrop-filter: blur(20px) saturate(140%);
|
|
479
|
+
}
|
|
480
|
+
.profile-themed .profile-tabs button {
|
|
481
|
+
color: hsl(250 25% 65%) !important;
|
|
482
|
+
}
|
|
483
|
+
.profile-themed .profile-tabs button.bg-green-600 {
|
|
484
|
+
background-image: linear-gradient(90deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(280 50% 70%)) !important;
|
|
485
|
+
background-size: 300% 300%;
|
|
486
|
+
animation: tabGlow 8s ease infinite;
|
|
487
|
+
color: hsl(0 0% 100%) !important;
|
|
488
|
+
}
|
|
489
|
+
.profile-themed .profile-content {
|
|
490
|
+
background: hsl(260 25% 8% / 0.6) !important;
|
|
491
|
+
}
|
|
492
|
+
.profile-themed .profile-content .border-green-400 {
|
|
493
|
+
border: 2px solid transparent !important;
|
|
494
|
+
background-image:
|
|
495
|
+
linear-gradient(hsl(260 25% 12% / 0.85), hsl(260 25% 12% / 0.85)),
|
|
496
|
+
linear-gradient(135deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(200 50% 70%), hsl(280 50% 70%), hsl(270 60% 65%)) !important;
|
|
497
|
+
background-origin: border-box !important;
|
|
498
|
+
background-clip: padding-box, border-box !important;
|
|
499
|
+
background-size: 100% 100%, 400% 400% !important;
|
|
500
|
+
backdrop-filter: blur(15px) saturate(140%);
|
|
501
|
+
animation: flowBorder 6s linear infinite, glowPulse 4s ease-in-out infinite;
|
|
502
|
+
}
|
|
503
|
+
.profile-themed .profile-content .text-green-400 {
|
|
504
|
+
color: hsl(270 60% 75%) !important;
|
|
505
|
+
text-shadow: 0 0 12px hsl(270 60% 70% / 0.4);
|
|
506
|
+
}
|
|
507
|
+
.profile-themed .profile-content .text-green-300 { color: hsl(220 50% 75%) !important; }
|
|
508
|
+
.profile-themed .profile-content .text-white { color: hsl(250 30% 90%) !important; }
|
|
509
|
+
.profile-themed .profile-content .text-gray-500 { color: hsl(250 20% 50%) !important; }
|
|
510
|
+
.profile-themed .profile-content .text-gray-400 { color: hsl(250 25% 65%) !important; }`
|
|
301
511
|
}
|
|
302
512
|
};
|
|
303
513
|
function buildCSSPrompt() {
|
|
304
514
|
const variableLines = THEME_SELECTORS.filter(
|
|
305
515
|
(s) => s.category === "variable"
|
|
306
516
|
).map((s) => ` ${s.selector}: ${s.description}`).join("\n");
|
|
307
|
-
const layoutLines = THEME_SELECTORS.filter((s) => s.category === "layout").map((s) => ` ${s.selector} \u2014 ${s.description}`).join("\n");
|
|
308
|
-
const componentLines = THEME_SELECTORS.filter(
|
|
309
|
-
(s) => s.category === "component"
|
|
310
|
-
).map((s) => ` ${s.selector} \u2014 ${s.description}`).join("\n");
|
|
311
517
|
return `You are a CSS theme generator for a user profile page.
|
|
312
|
-
All styles MUST be scoped under
|
|
518
|
+
All styles MUST be scoped under .profile-themed.
|
|
313
519
|
|
|
314
|
-
## CSS Variables (
|
|
315
|
-
|
|
520
|
+
## CSS Variables (set inside .profile-themed { ... })
|
|
521
|
+
HSL values WITHOUT hsl() wrapper (e.g. "210 40% 98%"):
|
|
316
522
|
${variableLines}
|
|
317
523
|
|
|
318
|
-
##
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
524
|
+
## Component Selectors
|
|
525
|
+
.profile-themed \u2014 root wrapper; set CSS variables, \`color\`, and optionally background/background-image/animation for full-page effects
|
|
526
|
+
.profile-themed .profile-header \u2014 header card; override background, background-image: none, border-color
|
|
527
|
+
.profile-themed .profile-tabs \u2014 tab bar; override background-color, border-color
|
|
528
|
+
.profile-themed .profile-tabs button \u2014 inactive tab text color
|
|
529
|
+
.profile-themed .profile-tabs button.bg-green-600 \u2014 active tab background + color
|
|
530
|
+
.profile-themed .profile-content \u2014 content area below tabs
|
|
531
|
+
.profile-themed .profile-content .border-green-400 \u2014 post card borders + background
|
|
532
|
+
.profile-themed .profile-content .text-green-400 \u2014 post links/usernames
|
|
533
|
+
.profile-themed .profile-content .text-green-300 \u2014 secondary links
|
|
534
|
+
.profile-themed .profile-content .text-white \u2014 post body text
|
|
535
|
+
.profile-themed .profile-content .text-gray-500 \u2014 timestamps
|
|
536
|
+
.profile-themed .profile-content .text-gray-400 \u2014 secondary text
|
|
323
537
|
|
|
324
538
|
## Rules
|
|
325
539
|
1. All selectors MUST start with .profile-themed
|
|
326
|
-
2.
|
|
327
|
-
3.
|
|
328
|
-
4.
|
|
329
|
-
5.
|
|
330
|
-
6.
|
|
540
|
+
2. Use !important on color, background, background-color, background-image, border-color overrides (needed to beat Tailwind utilities)
|
|
541
|
+
3. Set background-image: none !important on .profile-header to clear its default gradient
|
|
542
|
+
4. Set \`color\` on .profile-themed for inherited text color
|
|
543
|
+
5. @keyframes animations are encouraged \u2014 use for backgrounds, borders, glows
|
|
544
|
+
6. IMPORTANT: Do NOT use \`background\` shorthand with !important if you animate background-position \u2014 the shorthand locks background-position with !important and animations cannot override it. Use \`background-image\` instead.
|
|
545
|
+
7. backdrop-filter, box-shadow, and gradients are supported
|
|
546
|
+
8. Use valid CSS only \u2014 no JS, no expressions, no imports
|
|
547
|
+
9. Keep under 10KB
|
|
548
|
+
10. HSL values are bare: "210 40% 98%" not "hsl(210, 40%, 98%)"
|
|
331
549
|
|
|
332
|
-
|
|
550
|
+
Output ONLY the CSS.`;
|
|
333
551
|
}
|
|
334
552
|
|
|
335
|
-
export { DEMO_THEMES, MAX_CSS_SIZE, PROFILE_CANVAS_STORAGE_KEY, PROFILE_CANVAS_TOPIC, PROFILE_CSS_STORAGE_KEY, PROFILE_CSS_TOPIC, PROFILE_METADATA_STORAGE_KEY, PROFILE_METADATA_TOPIC, PROFILE_PICTURE_STORAGE_KEY, PROFILE_PICTURE_TOPIC, PROFILE_X_USERNAME_STORAGE_KEY, THEME_SELECTORS, buildCSSPrompt, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCSSStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidCSS, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata };
|
|
553
|
+
export { DEMO_THEMES, MAX_CSS_SIZE, PROFILE_CANVAS_STORAGE_KEY, PROFILE_CANVAS_TOPIC, PROFILE_CSS_STORAGE_KEY, PROFILE_CSS_TOPIC, PROFILE_METADATA_STORAGE_KEY, PROFILE_METADATA_TOPIC, PROFILE_PICTURE_STORAGE_KEY, PROFILE_PICTURE_TOPIC, PROFILE_X_USERNAME_STORAGE_KEY, THEME_SELECTORS, buildCSSPrompt, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCSSStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidCSS, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata, sanitizeCSS };
|
|
336
554
|
//# sourceMappingURL=index.mjs.map
|
|
337
555
|
//# sourceMappingURL=index.mjs.map
|