@net-protocol/profiles 0.1.4 → 0.1.6

package/dist/index.js

@@ -12,6 +12,8 @@ var PROFILE_METADATA_STORAGE_KEY = "net-beta0.0.1-profile-metadata";
 var PROFILE_PICTURE_TOPIC = "profile-picture";
 var PROFILE_METADATA_TOPIC = "profile-metadata";
 var PROFILE_CANVAS_TOPIC = "profile-canvas";
+var PROFILE_CSS_STORAGE_KEY = "net-beta0.0.1-profile-css";
+var PROFILE_CSS_TOPIC = "profile-css";
 function getValueArgForStorage(value) {
   return viem.stringToHex(value);
 }
@@ -117,21 +119,460 @@ function isValidTokenAddress(address) {
   if (!address) return false;
   return /^0x[a-fA-F0-9]{40}$/.test(address);
 }
+var MAX_CSS_SIZE = 10 * 1024;
+function getProfileCSSStorageArgs(cssContent) {
+  const { bytesKey, bytesValue } = getBytesArgsForStorage(
+    PROFILE_CSS_STORAGE_KEY,
+    cssContent
+  );
+  return {
+    bytesKey,
+    topic: PROFILE_CSS_TOPIC,
+    bytesValue
+  };
+}
+function sanitizeCSS(css) {
+  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, "");
+}
+function isValidCSS(css) {
+  if (!css || css.trim().length === 0) return false;
+  if (Buffer.byteLength(css, "utf-8") > MAX_CSS_SIZE) return false;
+  const lowerCSS = css.toLowerCase();
+  if (lowerCSS.includes("expression(")) return false;
+  if (lowerCSS.includes("behavior:")) return false;
+  if (lowerCSS.includes("javascript:")) return false;
+  if (/<script/i.test(css)) return false;
+  if (lowerCSS.includes("</style")) return false;
+  if (/@import\b/.test(lowerCSS)) return false;
+  return true;
+}
+
+// src/theme-selectors.ts
+var THEME_SELECTORS = [
+  // --- CSS Variables (stable) ---
+  {
+    selector: "--background",
+    description: "Page background color (HSL values, e.g. '210 40% 2%')",
+    category: "variable"
+  },
+  {
+    selector: "--foreground",
+    description: "Default text color",
+    category: "variable"
+  },
+  {
+    selector: "--primary",
+    description: "Primary accent color (buttons, links, headings)",
+    category: "variable"
+  },
+  {
+    selector: "--primary-foreground",
+    description: "Text on primary-colored elements",
+    category: "variable"
+  },
+  {
+    selector: "--secondary",
+    description: "Secondary accent color",
+    category: "variable"
+  },
+  {
+    selector: "--secondary-foreground",
+    description: "Text on secondary-colored elements",
+    category: "variable"
+  },
+  {
+    selector: "--muted",
+    description: "Muted/subdued background",
+    category: "variable"
+  },
+  {
+    selector: "--muted-foreground",
+    description: "Text on muted backgrounds",
+    category: "variable"
+  },
+  {
+    selector: "--accent",
+    description: "Accent color for highlights",
+    category: "variable"
+  },
+  {
+    selector: "--accent-foreground",
+    description: "Text on accent-colored elements",
+    category: "variable"
+  },
+  {
+    selector: "--card",
+    description: "Card/panel background color",
+    category: "variable"
+  },
+  {
+    selector: "--card-foreground",
+    description: "Text inside cards",
+    category: "variable"
+  },
+  {
+    selector: "--border",
+    description: "Border color",
+    category: "variable"
+  },
+  {
+    selector: "--ring",
+    description: "Focus ring color",
+    category: "variable"
+  },
+  {
+    selector: "--radius",
+    description: "Border radius (e.g. '0.5rem')",
+    category: "variable"
+  },
+  // --- Layout selectors ---
+  {
+    selector: ".profile-themed",
+    description: "Root wrapper for all themed profile content",
+    category: "layout"
+  },
+  // --- Component selectors ---
+  {
+    selector: ".profile-header",
+    description: "Profile header card (name, avatar, bio, stat pills). Uses bg-gradient from-gray-900 to-gray-800, border-green-500",
+    category: "component"
+  },
+  {
+    selector: ".profile-tabs",
+    description: "Tab navigation bar (Canvas, Posts, Feed, Activity). Uses bg-gray-800, border-gray-700. Active tab uses bg-green-600",
+    category: "component"
+  },
+  {
+    selector: ".profile-content",
+    description: "Main content area below tabs (posts, canvas, feed, activity)",
+    category: "component"
+  }
+];
+var DEMO_THEMES = {
+  checkerboard: {
+    name: "Checkerboard",
+    css: `@keyframes checker-scroll {
+  0% { background-position: 0 0; }
+  100% { background-position: 40px 40px; }
+}
+.profile-themed {
+  --primary: 0 0% 100%;
+  --primary-foreground: 0 0% 0%;
+  --card: 0 0% 5%;
+  --card-foreground: 0 0% 95%;
+  --border: 0 0% 30%;
+  --ring: 0 0% 100%;
+  --muted-foreground: 0 0% 60%;
+  --radius: 0px;
+  color: #e0e0e0;
+  background-image: repeating-conic-gradient(#333 0% 25%, #111 0% 50%);
+  background-size: 40px 40px;
+  animation: checker-scroll 3s linear infinite;
+}
+.profile-themed .profile-header {
+  background: rgba(0,0,0,0.4) !important;
+  background-color: rgba(0,0,0,0.4) !important;
+  background-image: none !important;
+  border-color: #fff !important;
+  border-width: 2px;
+  border-radius: 0 !important;
+  backdrop-filter: blur(4px);
+}
+.profile-themed .profile-tabs {
+  background: rgba(0,0,0,0.35) !important;
+  background-color: rgba(0,0,0,0.35) !important;
+  border-color: #555 !important;
+  border-radius: 0 !important;
+  backdrop-filter: blur(4px);
+}
+.profile-themed .profile-tabs button { color: #888 !important; }
+.profile-themed .profile-tabs button.bg-green-600 {
+  background-color: rgba(255,255,255,0.9) !important;
+  color: #000 !important;
+  border-radius: 0 !important;
+}
+.profile-themed .profile-content .border-green-400 {
+  border-color: #555 !important;
+  border-radius: 0 !important;
+  background: rgba(0,0,0,0.35) !important;
+  background-color: rgba(0,0,0,0.35) !important;
+  backdrop-filter: blur(4px);
+}
+.profile-themed .profile-content .text-green-400 { color: #fff !important; }
+.profile-themed .profile-content .text-green-300 { color: #ccc !important; }
+.profile-themed .profile-content .text-white { color: #e0e0e0 !important; }
+.profile-themed .profile-content .text-gray-500 { color: #666 !important; }
+.profile-themed .profile-content .text-gray-400 { color: #888 !important; }`
+  },
+  neonPulse: {
+    name: "Neon Pulse",
+    css: `@keyframes neon-glow {
+  0%, 100% { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff44; }
+  33% { border-color: #00ffff; box-shadow: 0 0 15px #00ffff44; }
+  66% { border-color: #ffff00; box-shadow: 0 0 15px #ffff0044; }
+}
+@keyframes hue-rotate {
+  0% { filter: hue-rotate(0deg); }
+  100% { filter: hue-rotate(360deg); }
+}
+.profile-themed {
+  --primary: 300 100% 60%;
+  --primary-foreground: 0 0% 100%;
+  --card: 260 80% 4%;
+  --card-foreground: 280 50% 92%;
+  --border: 300 100% 40%;
+  --ring: 300 100% 60%;
+  --muted-foreground: 280 30% 55%;
+  color: #e8d0ff;
+}
+.profile-themed .profile-header {
+  background: linear-gradient(135deg, #1a0030, #0d001a) !important;
+  border-width: 2px !important;
+  border-style: solid !important;
+  animation: neon-glow 4s ease-in-out infinite;
+}
+.profile-themed .profile-tabs {
+  background-color: #0d001a !important;
+  border-color: #6600aa !important;
+}
+.profile-themed .profile-tabs button { color: #aa66dd !important; }
+.profile-themed .profile-tabs button.bg-green-600 {
+  background: linear-gradient(90deg, #ff00ff, #00ffff) !important;
+  color: #000 !important;
+  animation: hue-rotate 6s linear infinite;
+}
+.profile-themed .profile-content .border-green-400 {
+  border-width: 1px !important;
+  border-style: solid !important;
+  animation: neon-glow 4s ease-in-out infinite;
+}
+.profile-themed .profile-content .text-green-400 { color: #ff66ff !important; }
+.profile-themed .profile-content .text-green-300 { color: #cc88ff !important; }
+.profile-themed .profile-content .text-white { color: #e8d0ff !important; }
+.profile-themed .profile-content .text-gray-500 { color: #6644aa !important; }
+.profile-themed .profile-content .text-gray-400 { color: #9966cc !important; }`
+  },
+  sunset: {
+    name: "Sunset",
+    css: `@keyframes sunset-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+.profile-themed {
+  --primary: 25 100% 55%;
+  --primary-foreground: 0 0% 100%;
+  --card: 15 60% 6%;
+  --card-foreground: 35 80% 90%;
+  --border: 20 80% 30%;
+  --ring: 25 100% 55%;
+  --muted-foreground: 20 40% 50%;
+  color: #fde4c8;
+  background: linear-gradient(135deg, #1a0a00, #2d0a1e, #0a0a2d, #1a0a00);
+  background-size: 400% 400%;
+  animation: sunset-shift 15s ease-in-out infinite;
+}
+.profile-themed .profile-header {
+  background: linear-gradient(135deg, #3d1200, #2d0a1e, #1a0033) !important;
+  border-color: #ff6600 !important;
+  border-width: 2px;
+  box-shadow: 0 0 30px #ff440022;
+}
+.profile-themed .profile-tabs {
+  background-color: #1a0a00dd !important;
+  border-color: #663300 !important;
+}
+.profile-themed .profile-tabs button { color: #cc8855 !important; }
+.profile-themed .profile-tabs button.bg-green-600 {
+  background: linear-gradient(90deg, #ff4400, #ff8800) !important;
+  color: #fff !important;
+}
+.profile-themed .profile-content .border-green-400 {
+  border-color: #ff660044 !important;
+  box-shadow: 0 0 10px #ff440011;
+}
+.profile-themed .profile-content .text-green-400 { color: #ff8844 !important; }
+.profile-themed .profile-content .text-green-300 { color: #ffaa66 !important; }
+.profile-themed .profile-content .text-white { color: #fde4c8 !important; }
+.profile-themed .profile-content .text-gray-500 { color: #8a6040 !important; }
+.profile-themed .profile-content .text-gray-400 { color: #bb8866 !important; }`
+  },
+  psychedelic: {
+    name: "Dreamscape",
+    css: `@keyframes dreamDrift {
+  0% { background-position: 0% 50%; }
+  25% { background-position: 100% 30%; }
+  50% { background-position: 80% 100%; }
+  75% { background-position: 20% 60%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes floatCircles {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  33% { transform: translate(20px, -30px) rotate(120deg); }
+  66% { transform: translate(-15px, 20px) rotate(240deg); }
+  100% { transform: translate(0, 0) rotate(360deg); }
+}
+@keyframes flowBorder {
+  0% { background-position: 0 0, 0% 0%; }
+  100% { background-position: 0 0, 300% 300%; }
+}
+@keyframes glowPulse {
+  0% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }
+  50% { box-shadow: 0 0 25px hsl(220 60% 70% / 0.4), 0 0 50px hsl(220 50% 65% / 0.15); }
+  100% { box-shadow: 0 0 15px hsl(270 60% 70% / 0.3), 0 0 30px hsl(270 60% 65% / 0.1); }
+}
+@keyframes tabGlow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.profile-themed {
+  --background: 260 30% 6%;
+  --foreground: 250 30% 90%;
+  --primary: 270 60% 72%;
+  --primary-foreground: 260 30% 10%;
+  --secondary: 220 50% 65%;
+  --secondary-foreground: 260 30% 10%;
+  --muted: 260 20% 15%;
+  --muted-foreground: 250 25% 65%;
+  --accent: 200 50% 70%;
+  --accent-foreground: 260 30% 10%;
+  --card: 260 25% 10%;
+  --card-foreground: 250 30% 90%;
+  --border: 270 40% 50%;
+  --ring: 270 60% 72%;
+  --radius: 0.75rem;
+  color: hsl(250 30% 90%) !important;
+  position: relative;
+  overflow: hidden;
+  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;
+  background-size: 400% 400%;
+  animation: dreamDrift 20s ease-in-out infinite;
+}
+.profile-themed::after {
+  content: "";
+  position: absolute;
+  top: 40px;
+  left: 30px;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: hsl(270 60% 80% / 0.12);
+  box-shadow:
+    200px 100px 0 40px hsl(220 60% 80% / 0.1),
+    50px 300px 0 60px hsl(280 50% 75% / 0.1),
+    320px 400px 0 35px hsl(200 50% 80% / 0.12),
+    150px 550px 0 50px hsl(260 50% 75% / 0.1);
+  filter: blur(10px);
+  animation: floatCircles 30s ease-in-out infinite;
+  z-index: 2;
+  pointer-events: none;
+}
+.profile-themed .profile-header {
+  background: hsl(260 25% 10% / 0.75) !important;
+  background-image: none !important;
+  border-color: hsl(270 40% 50% / 0.3) !important;
+  backdrop-filter: blur(30px) saturate(140%);
+  box-shadow: 0 0 30px hsl(270 50% 60% / 0.15);
+}
+.profile-themed .profile-tabs {
+  background-color: hsl(260 25% 12% / 0.8) !important;
+  border-color: hsl(270 40% 50% / 0.3) !important;
+  backdrop-filter: blur(20px) saturate(140%);
+}
+.profile-themed .profile-tabs button {
+  color: hsl(250 25% 65%) !important;
+}
+.profile-themed .profile-tabs button.bg-green-600 {
+  background-image: linear-gradient(90deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(280 50% 70%)) !important;
+  background-size: 300% 300%;
+  animation: tabGlow 8s ease infinite;
+  color: hsl(0 0% 100%) !important;
+}
+.profile-themed .profile-content {
+  background: hsl(260 25% 8% / 0.6) !important;
+}
+.profile-themed .profile-content .border-green-400 {
+  border: 2px solid transparent !important;
+  background-image:
+    linear-gradient(hsl(260 25% 12% / 0.85), hsl(260 25% 12% / 0.85)),
+    linear-gradient(135deg, hsl(270 60% 65%), hsl(220 50% 65%), hsl(200 50% 70%), hsl(280 50% 70%), hsl(270 60% 65%)) !important;
+  background-origin: border-box !important;
+  background-clip: padding-box, border-box !important;
+  background-size: 100% 100%, 400% 400% !important;
+  backdrop-filter: blur(15px) saturate(140%);
+  animation: flowBorder 6s linear infinite, glowPulse 4s ease-in-out infinite;
+}
+.profile-themed .profile-content .text-green-400 {
+  color: hsl(270 60% 75%) !important;
+  text-shadow: 0 0 12px hsl(270 60% 70% / 0.4);
+}
+.profile-themed .profile-content .text-green-300 { color: hsl(220 50% 75%) !important; }
+.profile-themed .profile-content .text-white { color: hsl(250 30% 90%) !important; }
+.profile-themed .profile-content .text-gray-500 { color: hsl(250 20% 50%) !important; }
+.profile-themed .profile-content .text-gray-400 { color: hsl(250 25% 65%) !important; }`
+  }
+};
+function buildCSSPrompt() {
+  const variableLines = THEME_SELECTORS.filter(
+    (s) => s.category === "variable"
+  ).map((s) => `  ${s.selector}: ${s.description}`).join("\n");
+  return `You are a CSS theme generator for a user profile page.
+All styles MUST be scoped under .profile-themed.
+
+## CSS Variables (set inside .profile-themed { ... })
+HSL values WITHOUT hsl() wrapper (e.g. "210 40% 98%"):
+${variableLines}
+
+## Component Selectors
+  .profile-themed \u2014 root wrapper; set CSS variables, \`color\`, and optionally background/background-image/animation for full-page effects
+  .profile-themed .profile-header \u2014 header card; override background, background-image: none, border-color
+  .profile-themed .profile-tabs \u2014 tab bar; override background-color, border-color
+  .profile-themed .profile-tabs button \u2014 inactive tab text color
+  .profile-themed .profile-tabs button.bg-green-600 \u2014 active tab background + color
+  .profile-themed .profile-content \u2014 content area below tabs
+  .profile-themed .profile-content .border-green-400 \u2014 post card borders + background
+  .profile-themed .profile-content .text-green-400 \u2014 post links/usernames
+  .profile-themed .profile-content .text-green-300 \u2014 secondary links
+  .profile-themed .profile-content .text-white \u2014 post body text
+  .profile-themed .profile-content .text-gray-500 \u2014 timestamps
+  .profile-themed .profile-content .text-gray-400 \u2014 secondary text
+
+## Rules
+1. All selectors MUST start with .profile-themed
+2. Use !important on color, background, background-color, background-image, border-color overrides (needed to beat Tailwind utilities)
+3. Set background-image: none !important on .profile-header to clear its default gradient
+4. Set \`color\` on .profile-themed for inherited text color
+5. @keyframes animations are encouraged \u2014 use for backgrounds, borders, glows
+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.
+7. backdrop-filter, box-shadow, and gradients are supported
+8. Use valid CSS only \u2014 no JS, no expressions, no imports
+9. Keep under 10KB
+10. HSL values are bare: "210 40% 98%" not "hsl(210, 40%, 98%)"
+
+Output ONLY the CSS.`;
+}
 
 Object.defineProperty(exports, "STORAGE_CONTRACT", {
   enumerable: true,
   get: function () { return storage.STORAGE_CONTRACT; }
 });
+exports.DEMO_THEMES = DEMO_THEMES;
+exports.MAX_CSS_SIZE = MAX_CSS_SIZE;
 exports.PROFILE_CANVAS_STORAGE_KEY = PROFILE_CANVAS_STORAGE_KEY;
 exports.PROFILE_CANVAS_TOPIC = PROFILE_CANVAS_TOPIC;
+exports.PROFILE_CSS_STORAGE_KEY = PROFILE_CSS_STORAGE_KEY;
+exports.PROFILE_CSS_TOPIC = PROFILE_CSS_TOPIC;
 exports.PROFILE_METADATA_STORAGE_KEY = PROFILE_METADATA_STORAGE_KEY;
 exports.PROFILE_METADATA_TOPIC = PROFILE_METADATA_TOPIC;
 exports.PROFILE_PICTURE_STORAGE_KEY = PROFILE_PICTURE_STORAGE_KEY;
 exports.PROFILE_PICTURE_TOPIC = PROFILE_PICTURE_TOPIC;
 exports.PROFILE_X_USERNAME_STORAGE_KEY = PROFILE_X_USERNAME_STORAGE_KEY;
+exports.THEME_SELECTORS = THEME_SELECTORS;
+exports.buildCSSPrompt = buildCSSPrompt;
 exports.getBioStorageArgs = getBioStorageArgs;
 exports.getBytesArgsForStorage = getBytesArgsForStorage;
 exports.getDisplayNameStorageArgs = getDisplayNameStorageArgs;
+exports.getProfileCSSStorageArgs = getProfileCSSStorageArgs;
 exports.getProfileCanvasStorageArgs = getProfileCanvasStorageArgs;
 exports.getProfileMetadataStorageArgs = getProfileMetadataStorageArgs;
 exports.getProfilePictureStorageArgs = getProfilePictureStorageArgs;
@@ -139,10 +580,12 @@ exports.getTokenAddressStorageArgs = getTokenAddressStorageArgs;
 exports.getValueArgForStorage = getValueArgForStorage;
 exports.getXUsernameStorageArgs = getXUsernameStorageArgs;
 exports.isValidBio = isValidBio;
+exports.isValidCSS = isValidCSS;
 exports.isValidDisplayName = isValidDisplayName;
 exports.isValidTokenAddress = isValidTokenAddress;
 exports.isValidUrl = isValidUrl;
 exports.isValidXUsername = isValidXUsername;
 exports.parseProfileMetadata = parseProfileMetadata;
+exports.sanitizeCSS = sanitizeCSS;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts","../src/utils.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\";\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_PICTURE_TOPIC,\n  PROFILE_METADATA_TOPIC,\n  PROFILE_CANVAS_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"]}
+{"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"]}