@net-protocol/profiles 0.1.4 → 0.1.6

package/README.md

@@ -104,6 +104,7 @@ function UpdateProfile() {
 | X Username | Your X (Twitter) handle | Stored without @ prefix (e.g., `myusername`) |
 | Bio | Short profile bio | Max 280 characters |
 | Display Name | User-chosen display name | Max 25 characters |
+| Token Address | ERC-20 token that represents you | Valid EVM address (0x-prefixed) |
 | Canvas | Custom HTML profile page | For advanced customization |
 
 ## Storage Keys
@@ -111,7 +112,8 @@ function UpdateProfile() {
 | Key | Description | Data Format |
 |-----|-------------|-------------|
 | `PROFILE_PICTURE_STORAGE_KEY` | Profile picture URL | Plain string (URL) |
-| `PROFILE_METADATA_STORAGE_KEY` | Profile metadata JSON | `{ x_username: "handle", bio: "...", display_name: "..." }` |
+| `PROFILE_X_USERNAME_STORAGE_KEY` | X username (legacy, prefer metadata) | Plain string |
+| `PROFILE_METADATA_STORAGE_KEY` | Profile metadata JSON | `{ x_username: "handle", bio: "...", display_name: "...", token_address: "0x..." }` |
 | `PROFILE_CANVAS_STORAGE_KEY` | Custom HTML canvas | HTML string |
 
 ## API Reference
@@ -121,7 +123,7 @@ function UpdateProfile() {
 - `useProfilePicture({ chainId, userAddress })` - Fetch profile picture URL
 - `useProfileXUsername({ chainId, userAddress })` - Fetch X username
 - `useProfileCanvas({ chainId, userAddress })` - Fetch canvas HTML
-- `useBasicUserProfileMetadata({ chainId, userAddress })` - Batch fetch picture & username
+- `useBasicUserProfileMetadata({ chainId, userAddress })` - Batch fetch picture, username, bio, display name, and token address
 
 ### Utilities (from `@net-protocol/profiles`)
 
@@ -136,6 +138,8 @@ function UpdateProfile() {
 - `isValidXUsername(username)` - Validate X username format
 - `isValidBio(bio)` - Validate bio format (max 280 chars, no control chars)
 - `isValidDisplayName(displayName)` - Validate display name format (max 25 chars, no control chars)
+- `getTokenAddressStorageArgs(tokenAddress)` - Prepare token address update args
+- `isValidTokenAddress(address)` - Validate EVM token address format
 
 ## Dependencies
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { P as ProfileStorageArgs, a as ProfileMetadata } from './types-DSRRz8Ug.mjs';
-export { B as BasicUserProfileMetadata, b as UseProfileOptions, U as UserDisplayName, c as UserProfile } from './types-DSRRz8Ug.mjs';
+import { P as ProfileStorageArgs, a as ProfileMetadata } from './types-DDKLfc0r.mjs';
+export { B as BasicUserProfileMetadata, b as UseProfileOptions, U as UserDisplayName, c as UserProfile } from './types-DDKLfc0r.mjs';
 export { STORAGE_CONTRACT } from '@net-protocol/storage';
 
 /**
@@ -22,6 +22,8 @@ declare const PROFILE_METADATA_STORAGE_KEY = "net-beta0.0.1-profile-metadata";
 declare const PROFILE_PICTURE_TOPIC = "profile-picture";
 declare const PROFILE_METADATA_TOPIC = "profile-metadata";
 declare const PROFILE_CANVAS_TOPIC = "profile-canvas";
+declare const PROFILE_CSS_STORAGE_KEY = "net-beta0.0.1-profile-css";
+declare const PROFILE_CSS_TOPIC = "profile-css";
 
 /**
  * Convert a string value to hex for storage
@@ -154,5 +156,96 @@ declare function getTokenAddressStorageArgs(tokenAddress: string): ProfileStorag
  * Returns true if valid (0x-prefixed, 40 hex characters)
  */
 declare function isValidTokenAddress(address: string): boolean;
+/**
+ * Maximum CSS size in bytes (10KB — CSS should be small)
+ */
+declare const MAX_CSS_SIZE: number;
+/**
+ * Prepare transaction arguments for updating profile custom CSS
+ *
+ * @param cssContent - CSS string to store
+ * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]
+ *
+ * @example
+ * ```ts
+ * const args = getProfileCSSStorageArgs(".profile-themed { --primary: 210 40% 98%; }");
+ * writeContract({
+ *   abi: STORAGE_CONTRACT.abi,
+ *   address: STORAGE_CONTRACT.address,
+ *   functionName: "put",
+ *   args: [args.bytesKey, args.topic, args.bytesValue],
+ * });
+ * ```
+ */
+declare function getProfileCSSStorageArgs(cssContent: string): ProfileStorageArgs;
+/**
+ * Sanitize user CSS to prevent injection attacks.
+ * - Strips </style> (which could break out of the style element during SSR)
+ * - Strips <script> tags
+ * - Removes javascript: URIs, expression(), behavior: (legacy IE vectors)
+ * - Removes @import rules (could load external resources / exfiltrate data)
+ */
+declare function sanitizeCSS(css: string): string;
+/**
+ * Validate CSS content
+ * Returns true if valid (non-empty, within size limit, no script injection)
+ */
+declare function isValidCSS(css: string): boolean;
+
+/**
+ * Single source of truth for profile CSS theming.
+ *
+ * This file defines:
+ * 1. THEME_SELECTORS — the stable set of CSS selectors/variables available for theming
+ * 2. DEMO_THEMES — example CSS themes users can apply
+ * 3. buildCSSPrompt() — generates an AI prompt describing what can be themed
+ *
+ * When the profile page structure changes, update THEME_SELECTORS here and
+ * everything downstream (AI prompt, docs, validation) stays in sync.
+ */
+/**
+ * A themeable selector or CSS variable group
+ */
+interface ThemeSelector {
+    /** CSS selector or variable name */
+    selector: string;
+    /** Human-readable description of what it targets */
+    description: string;
+    /** Category for grouping in documentation */
+    category: "variable" | "layout" | "component";
+}
+/**
+ * All themeable selectors available for profile CSS.
+ *
+ * CSS variables (category: "variable") are the most stable —
+ * they survive page restructuring because they're part of the
+ * shadcn/Tailwind design system.
+ *
+ * Layout and component selectors may break when the page structure changes.
+ */
+declare const THEME_SELECTORS: ThemeSelector[];
+/**
+ * Demo themes that users can choose from as starting points.
+ * Each is a complete CSS string ready to store on-chain.
+ *
+ * Themes include CSS variable overrides, @keyframes animations,
+ * backdrop-filter effects, and full component selector coverage
+ * including .profile-content overrides.
+ */
+declare const DEMO_THEMES: Record<string, {
+    name: string;
+    css: string;
+}>;
+/**
+ * Build an AI prompt that describes the available theming surface.
+ * Feed this to an LLM alongside a user's description to generate CSS.
+ *
+ * The prompt includes per-selector documentation, animation guidance,
+ * !important rules for beating Tailwind utilities, and supported
+ * properties like backdrop-filter and box-shadow.
+ *
+ * @returns A prompt string listing all available selectors and usage rules
+ */
+declare function buildCSSPrompt(): string;
 
-export { PROFILE_CANVAS_STORAGE_KEY, PROFILE_CANVAS_TOPIC, PROFILE_METADATA_STORAGE_KEY, PROFILE_METADATA_TOPIC, PROFILE_PICTURE_STORAGE_KEY, PROFILE_PICTURE_TOPIC, PROFILE_X_USERNAME_STORAGE_KEY, ProfileMetadata, ProfileStorageArgs, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata };
+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, ProfileMetadata, ProfileStorageArgs, THEME_SELECTORS, type ThemeSelector, buildCSSPrompt, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCSSStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidCSS, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata, sanitizeCSS };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as ProfileStorageArgs, a as ProfileMetadata } from './types-DSRRz8Ug.js';
-export { B as BasicUserProfileMetadata, b as UseProfileOptions, U as UserDisplayName, c as UserProfile } from './types-DSRRz8Ug.js';
+import { P as ProfileStorageArgs, a as ProfileMetadata } from './types-DDKLfc0r.js';
+export { B as BasicUserProfileMetadata, b as UseProfileOptions, U as UserDisplayName, c as UserProfile } from './types-DDKLfc0r.js';
 export { STORAGE_CONTRACT } from '@net-protocol/storage';
 
 /**
@@ -22,6 +22,8 @@ declare const PROFILE_METADATA_STORAGE_KEY = "net-beta0.0.1-profile-metadata";
 declare const PROFILE_PICTURE_TOPIC = "profile-picture";
 declare const PROFILE_METADATA_TOPIC = "profile-metadata";
 declare const PROFILE_CANVAS_TOPIC = "profile-canvas";
+declare const PROFILE_CSS_STORAGE_KEY = "net-beta0.0.1-profile-css";
+declare const PROFILE_CSS_TOPIC = "profile-css";
 
 /**
  * Convert a string value to hex for storage
@@ -154,5 +156,96 @@ declare function getTokenAddressStorageArgs(tokenAddress: string): ProfileStorag
  * Returns true if valid (0x-prefixed, 40 hex characters)
  */
 declare function isValidTokenAddress(address: string): boolean;
+/**
+ * Maximum CSS size in bytes (10KB — CSS should be small)
+ */
+declare const MAX_CSS_SIZE: number;
+/**
+ * Prepare transaction arguments for updating profile custom CSS
+ *
+ * @param cssContent - CSS string to store
+ * @returns Arguments for Storage.put() - [bytesKey, topic, bytesValue]
+ *
+ * @example
+ * ```ts
+ * const args = getProfileCSSStorageArgs(".profile-themed { --primary: 210 40% 98%; }");
+ * writeContract({
+ *   abi: STORAGE_CONTRACT.abi,
+ *   address: STORAGE_CONTRACT.address,
+ *   functionName: "put",
+ *   args: [args.bytesKey, args.topic, args.bytesValue],
+ * });
+ * ```
+ */
+declare function getProfileCSSStorageArgs(cssContent: string): ProfileStorageArgs;
+/**
+ * Sanitize user CSS to prevent injection attacks.
+ * - Strips </style> (which could break out of the style element during SSR)
+ * - Strips <script> tags
+ * - Removes javascript: URIs, expression(), behavior: (legacy IE vectors)
+ * - Removes @import rules (could load external resources / exfiltrate data)
+ */
+declare function sanitizeCSS(css: string): string;
+/**
+ * Validate CSS content
+ * Returns true if valid (non-empty, within size limit, no script injection)
+ */
+declare function isValidCSS(css: string): boolean;
+
+/**
+ * Single source of truth for profile CSS theming.
+ *
+ * This file defines:
+ * 1. THEME_SELECTORS — the stable set of CSS selectors/variables available for theming
+ * 2. DEMO_THEMES — example CSS themes users can apply
+ * 3. buildCSSPrompt() — generates an AI prompt describing what can be themed
+ *
+ * When the profile page structure changes, update THEME_SELECTORS here and
+ * everything downstream (AI prompt, docs, validation) stays in sync.
+ */
+/**
+ * A themeable selector or CSS variable group
+ */
+interface ThemeSelector {
+    /** CSS selector or variable name */
+    selector: string;
+    /** Human-readable description of what it targets */
+    description: string;
+    /** Category for grouping in documentation */
+    category: "variable" | "layout" | "component";
+}
+/**
+ * All themeable selectors available for profile CSS.
+ *
+ * CSS variables (category: "variable") are the most stable —
+ * they survive page restructuring because they're part of the
+ * shadcn/Tailwind design system.
+ *
+ * Layout and component selectors may break when the page structure changes.
+ */
+declare const THEME_SELECTORS: ThemeSelector[];
+/**
+ * Demo themes that users can choose from as starting points.
+ * Each is a complete CSS string ready to store on-chain.
+ *
+ * Themes include CSS variable overrides, @keyframes animations,
+ * backdrop-filter effects, and full component selector coverage
+ * including .profile-content overrides.
+ */
+declare const DEMO_THEMES: Record<string, {
+    name: string;
+    css: string;
+}>;
+/**
+ * Build an AI prompt that describes the available theming surface.
+ * Feed this to an LLM alongside a user's description to generate CSS.
+ *
+ * The prompt includes per-selector documentation, animation guidance,
+ * !important rules for beating Tailwind utilities, and supported
+ * properties like backdrop-filter and box-shadow.
+ *
+ * @returns A prompt string listing all available selectors and usage rules
+ */
+declare function buildCSSPrompt(): string;
 
-export { PROFILE_CANVAS_STORAGE_KEY, PROFILE_CANVAS_TOPIC, PROFILE_METADATA_STORAGE_KEY, PROFILE_METADATA_TOPIC, PROFILE_PICTURE_STORAGE_KEY, PROFILE_PICTURE_TOPIC, PROFILE_X_USERNAME_STORAGE_KEY, ProfileMetadata, ProfileStorageArgs, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata };
+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, ProfileMetadata, ProfileStorageArgs, THEME_SELECTORS, type ThemeSelector, buildCSSPrompt, getBioStorageArgs, getBytesArgsForStorage, getDisplayNameStorageArgs, getProfileCSSStorageArgs, getProfileCanvasStorageArgs, getProfileMetadataStorageArgs, getProfilePictureStorageArgs, getTokenAddressStorageArgs, getValueArgForStorage, getXUsernameStorageArgs, isValidBio, isValidCSS, isValidDisplayName, isValidTokenAddress, isValidUrl, isValidXUsername, parseProfileMetadata, sanitizeCSS };