{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-token-provider", "title": "Theme Token Provider", "author": "Satchmo ", "description": "On-chain theme picker using @theme-token/sdk. Provider context and settings panel for selecting, applying, and persisting blockchain-inscribed ThemeTokens.", "dependencies": [ "@theme-token/sdk", "lucide-react" ], "registryDependencies": [ "button", "card", "input", "label", "badge", "separator" ], "files": [ { "path": "registry/new-york/blocks/theme-token-provider/index.tsx", "content": "\"use client\"\n\nimport { createContext, useContext } from \"react\"\nimport {\n useThemeToken,\n type UseThemeTokenOptions,\n type UseThemeTokenReturn,\n} from \"./use-theme-token\"\nimport {\n ThemeTokenSettingsUi,\n type ThemeTokenSettingsUiProps,\n} from \"./theme-token-settings-ui\"\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport { useThemeToken } from \"./use-theme-token\"\nexport type {\n UseThemeTokenOptions,\n UseThemeTokenReturn,\n ThemeTokenStatus,\n} from \"./use-theme-token\"\nexport { ThemeTokenSettingsUi } from \"./theme-token-settings-ui\"\nexport type { ThemeTokenSettingsUiProps } from \"./theme-token-settings-ui\"\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ThemeTokenContext = createContext(null)\n\n/**\n * Access the ThemeToken context provided by `ThemeTokenProvider`.\n *\n * @throws If called outside of a `ThemeTokenProvider`.\n *\n * @example\n * ```tsx\n * const { origin, setOrigin, clearOrigin, isLoading } = useThemeTokenContext()\n * ```\n */\nexport function useThemeTokenContext(): UseThemeTokenReturn {\n const ctx = useContext(ThemeTokenContext)\n if (!ctx) {\n throw new Error(\n \"useThemeTokenContext must be used within a \",\n )\n }\n return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Provider\n// ---------------------------------------------------------------------------\n\n/** Props for the ThemeTokenProvider component */\nexport interface ThemeTokenProviderProps extends UseThemeTokenOptions {\n /** Child elements to wrap */\n children?: React.ReactNode\n /** Additional CSS classes on the wrapper div */\n className?: string\n}\n\n/**\n * Provides on-chain theme state to the component tree.\n *\n * On mount, reads the saved origin from localStorage (or uses `defaultOrigin`),\n * fetches the ThemeToken from the blockchain, and applies its CSS variables to\n * the document root. All children can access the theme state via\n * `useThemeTokenContext()`.\n *\n * @example\n * ```tsx\n * \n * \n * \n * ```\n */\nexport function ThemeTokenProvider({\n children,\n className,\n defaultOrigin,\n storageKey,\n onThemeApplied,\n onThemeCleared,\n onError,\n}: ThemeTokenProviderProps) {\n const themeToken = useThemeToken({\n defaultOrigin,\n storageKey,\n onThemeApplied,\n onThemeCleared,\n onError,\n })\n\n return (\n \n
{children}
\n \n )\n}\n\n// ---------------------------------------------------------------------------\n// Settings (composed)\n// ---------------------------------------------------------------------------\n\n/** Props for the composed ThemeTokenSettings component */\nexport interface ThemeTokenSettingsProps {\n /** Callback fired after a theme is applied */\n onApply?: (origin: string) => void\n /** Callback fired when the theme is cleared */\n onClear?: () => void\n /** Additional CSS classes */\n className?: string\n}\n\n/**\n * Settings panel that reads from `ThemeTokenProvider` context.\n *\n * Must be rendered inside a ``. Wires the\n * `ThemeTokenSettingsUi` to the context's state and actions.\n *\n * @example\n * ```tsx\n * \n * \n * \n * ```\n */\nexport function ThemeTokenSettings({\n onApply,\n onClear,\n className,\n}: ThemeTokenSettingsProps) {\n const { origin, theme, status, error, setOrigin, clearOrigin } =\n useThemeTokenContext()\n\n const handleApply = async (newOrigin: string) => {\n await setOrigin(newOrigin)\n onApply?.(newOrigin)\n }\n\n const handleClear = () => {\n clearOrigin()\n onClear?.()\n }\n\n return (\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/theme-token-provider/index.tsx" }, { "path": "registry/new-york/blocks/theme-token-provider/theme-token-settings-ui.tsx", "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport { Loader2, Palette, RotateCcw, Check, AlertCircle } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\nimport type { ThemeTokenStatus } from \"./use-theme-token\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Color swatch entry for the preview grid */\ninterface ColorSwatch {\n /** Display label */\n label: string\n /** CSS variable name (e.g. \"primary\") */\n variable: string\n}\n\n/** Props for the settings panel UI */\nexport interface ThemeTokenSettingsUiProps {\n /** Currently active theme origin, or null */\n origin: string | null\n /** Theme name from the fetched ThemeToken */\n themeName: string | null\n /** Current lifecycle status */\n status: ThemeTokenStatus\n /** Error message if status is \"error\" */\n errorMessage: string | null\n /** Callback to apply a theme by origin */\n onApply: (origin: string) => void\n /** Callback to clear the active theme */\n onClear: () => void\n /** Additional CSS classes */\n className?: string\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst COLOR_SWATCHES: ColorSwatch[] = [\n { label: \"Primary\", variable: \"primary\" },\n { label: \"Secondary\", variable: \"secondary\" },\n { label: \"Accent\", variable: \"accent\" },\n { label: \"Muted\", variable: \"muted\" },\n { label: \"Destructive\", variable: \"destructive\" },\n { label: \"Background\", variable: \"background\" },\n { label: \"Card\", variable: \"card\" },\n { label: \"Border\", variable: \"border\" },\n]\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Settings panel for selecting and applying on-chain themes.\n *\n * Displays an origin input, apply/reset buttons, the current theme status,\n * and a preview grid of the active color swatches read from CSS variables.\n */\nexport function ThemeTokenSettingsUi({\n origin,\n themeName,\n status,\n errorMessage,\n onApply,\n onClear,\n className,\n}: ThemeTokenSettingsUiProps) {\n const [inputValue, setInputValue] = useState(origin ?? \"\")\n\n const handleApply = useCallback(() => {\n const trimmed = inputValue.trim()\n if (trimmed.length === 0) return\n onApply(trimmed)\n }, [inputValue, onApply])\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\") {\n handleApply()\n }\n },\n [handleApply],\n )\n\n const isLoading = status === \"loading\"\n const isApplied = status === \"applied\"\n const isError = status === \"error\"\n\n return (\n \n \n
\n \n Theme Token\n
\n \n Apply an on-chain theme by entering its origin (txid_vout format).\n \n \n\n \n {/* Origin input */}\n
\n \n setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n disabled={isLoading}\n aria-describedby=\"theme-origin-hint\"\n />\n

\n The origin outpoint of an inscribed ThemeToken.\n

\n
\n\n {/* Status badge */}\n {status !== \"idle\" && (\n
\n {isLoading && (\n \n \n Loading theme...\n \n )}\n {isApplied && (\n \n \n {themeName ?? \"Theme applied\"}\n \n )}\n {isError && (\n \n \n {errorMessage ?? \"Error\"}\n \n )}\n
\n )}\n\n {/* Color swatches preview */}\n {isApplied && (\n <>\n \n
\n

\n Active Colors\n

\n
\n {COLOR_SWATCHES.map((swatch) => (\n \n \n \n {swatch.label}\n \n
\n ))}\n
\n \n \n )}\n \n\n \n \n {isLoading ? (\n \n ) : (\n \n )}\n Apply Theme\n \n\n \n \n Reset to Default\n \n \n \n )\n}\n", "type": "registry:component", "target": "~/components/blocks/theme-token-provider/theme-token-settings-ui.tsx" }, { "path": "registry/new-york/blocks/theme-token-provider/use-theme-token.ts", "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n fetchThemeByOrigin,\n applyThemeModeWithAssets,\n clearTheme,\n type ThemeToken,\n type PublishedTheme,\n} from \"@theme-token/sdk\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Status of the theme fetching/applying lifecycle */\nexport type ThemeTokenStatus = \"idle\" | \"loading\" | \"applied\" | \"error\"\n\n/** Options for the useThemeToken hook */\nexport interface UseThemeTokenOptions {\n /** Default origin to load on mount (overridden by localStorage if set) */\n defaultOrigin?: string\n /** localStorage key for persisting the active origin */\n storageKey?: string\n /** Callback fired after a theme is successfully applied */\n onThemeApplied?: (origin: string) => void\n /** Callback fired when the theme is cleared */\n onThemeCleared?: () => void\n /** Callback fired when an error occurs */\n onError?: (error: Error) => void\n}\n\n/** Return value of the useThemeToken hook */\nexport interface UseThemeTokenReturn {\n /** Currently active theme origin, or null if none */\n origin: string | null\n /** The fetched ThemeToken data, or null */\n theme: ThemeToken | null\n /** Current lifecycle status */\n status: ThemeTokenStatus\n /** Error if status is \"error\" */\n error: Error | null\n /** Apply a theme by origin (fetches from chain, applies CSS vars, persists) */\n setOrigin: (origin: string) => Promise\n /** Clear the active theme and revert to default CSS vars */\n clearOrigin: () => void\n /** Whether a theme operation is in progress */\n isLoading: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst DEFAULT_STORAGE_KEY = \"bigblocks-theme-origin\"\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Manages on-chain theme loading, application, and localStorage persistence.\n *\n * Reads the saved origin from localStorage on mount, fetches the ThemeToken\n * from the blockchain via `@theme-token/sdk`, and applies its CSS variables\n * to the document root. Provides imperative methods to switch or clear themes.\n */\nexport function useThemeToken({\n defaultOrigin,\n storageKey = DEFAULT_STORAGE_KEY,\n onThemeApplied,\n onThemeCleared,\n onError,\n}: UseThemeTokenOptions = {}): UseThemeTokenReturn {\n const [origin, setOriginState] = useState(null)\n const [theme, setTheme] = useState(null)\n const [status, setStatus] = useState(\"idle\")\n const [error, setError] = useState(null)\n\n // Stable refs for callbacks to avoid re-triggering effects\n const onThemeAppliedRef = useRef(onThemeApplied)\n onThemeAppliedRef.current = onThemeApplied\n const onThemeClearedRef = useRef(onThemeCleared)\n onThemeClearedRef.current = onThemeCleared\n const onErrorRef = useRef(onError)\n onErrorRef.current = onError\n\n // ------------------------------------------------------------------\n // Core: fetch + apply a theme by origin\n // ------------------------------------------------------------------\n\n const applyOrigin = useCallback(\n async (targetOrigin: string) => {\n setStatus(\"loading\")\n setError(null)\n\n try {\n const published: PublishedTheme | null =\n await fetchThemeByOrigin(targetOrigin)\n\n if (!published) {\n throw new Error(\n `Theme not found for origin \"${targetOrigin}\". Verify the origin is a valid ThemeToken inscription.`,\n )\n }\n\n // Detect current color scheme\n const isDark =\n typeof document !== \"undefined\" &&\n document.documentElement.classList.contains(\"dark\")\n const mode = isDark ? \"dark\" : \"light\"\n\n await applyThemeModeWithAssets(published.theme, mode)\n\n setOriginState(targetOrigin)\n setTheme(published.theme)\n setStatus(\"applied\")\n\n // Persist\n if (typeof window !== \"undefined\") {\n localStorage.setItem(storageKey, targetOrigin)\n }\n\n onThemeAppliedRef.current?.(targetOrigin)\n } catch (err) {\n const e = err instanceof Error ? err : new Error(String(err))\n setError(e)\n setStatus(\"error\")\n onErrorRef.current?.(e)\n }\n },\n [storageKey],\n )\n\n // ------------------------------------------------------------------\n // Public: set a new origin\n // ------------------------------------------------------------------\n\n const setOrigin = useCallback(\n async (newOrigin: string) => {\n await applyOrigin(newOrigin)\n },\n [applyOrigin],\n )\n\n // ------------------------------------------------------------------\n // Public: clear theme\n // ------------------------------------------------------------------\n\n const clearOrigin = useCallback(() => {\n clearTheme()\n setOriginState(null)\n setTheme(null)\n setStatus(\"idle\")\n setError(null)\n\n if (typeof window !== \"undefined\") {\n localStorage.removeItem(storageKey)\n }\n\n onThemeClearedRef.current?.()\n }, [storageKey])\n\n // ------------------------------------------------------------------\n // Mount: restore persisted origin (or use default)\n // ------------------------------------------------------------------\n\n const mountedRef = useRef(false)\n\n useEffect(() => {\n if (mountedRef.current) return\n mountedRef.current = true\n\n if (typeof window === \"undefined\") return\n\n const saved = localStorage.getItem(storageKey)\n const initial = saved ?? defaultOrigin\n\n if (initial) {\n void applyOrigin(initial)\n }\n }, [storageKey, defaultOrigin, applyOrigin])\n\n return {\n origin,\n theme,\n status,\n error,\n setOrigin,\n clearOrigin,\n isLoading: status === \"loading\",\n }\n}\n", "type": "registry:hook", "target": "~/components/blocks/theme-token-provider/use-theme-token.ts" } ], "type": "registry:block" }