@12nil/theme-registry-package 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,179 @@
+# theme-registry-package
+
+A small TypeScript package for registering themes and using them in React applications.
+
+## Install
+
+```bash
+npm install theme-registry-package
+```
+
+## Usage
+
+```tsx
+import React from 'react'
+import { ThemeProvider, useTheme } from 'theme-registry-package'
+
+function ThemeSwitcher() {
+  const { themes, currentTheme, currentMode, availableModes, setTheme, setMode } = useTheme()
+
+  return (
+    <div>
+      <p>
+        Current: {currentTheme} ({currentMode})
+      </p>
+
+      {themes.map((theme) => (
+        <button key={theme.name} onClick={() => setTheme(theme.name, availableModes[0])}>
+          {theme.name}
+        </button>
+      ))}
+
+      {availableModes.map((mode) => (
+        <button key={mode} onClick={() => setMode(mode)}>
+          {mode}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <ThemeSwitcher />
+    </ThemeProvider>
+  )
+}
+```
+
+## Phase 2 Features
+
+```ts
+import { themeRegistry } from 'theme-registry-package'
+
+const unsubscribe = themeRegistry.onThemeChanged(({ themeName, modeName }) => {
+  console.log('theme changed', themeName, modeName)
+})
+
+themeRegistry.registerPlugin({
+  name: 'CRM',
+  version: '1.0.0',
+  minRegistryVersion: '0.2.0',
+  themes: [
+    {
+      name: 'crm',
+      metadata: {
+        version: '1.0.0',
+        compatibility: { minRegistryVersion: '0.2.0' },
+      },
+      modes: {
+        light: {
+          primary: '#1d4ed8',
+          secondary: '#2563eb',
+          background: '#ffffff',
+          text: '#0f172a',
+          accent: '#1d4ed8',
+          muted: '#64748b',
+          error: '#dc2626',
+          warning: '#f59e0b',
+          success: '#16a34a',
+          info: '#0ea5e9',
+        },
+      },
+    },
+  ],
+})
+
+unsubscribe()
+```
+
+Contribution lookup:
+
+```ts
+const crmContrib = themeRegistry.getPluginContributions('CRM')
+const merged = themeRegistry.getMergedPluginContributions()
+
+console.log(crmContrib?.icons)
+console.log(merged.spacing)
+```
+
+## Phase 3 Features (In Progress)
+
+```ts
+import { themeRegistry } from 'theme-registry-package'
+
+themeRegistry.registerCompositionLayer({
+  type: 'brand',
+  name: 'fnp',
+  tokens: {
+    primary: '#031011',
+    secondary: '#153e46',
+    background: '#ffffff',
+    text: '#031011',
+    accent: '#378d93',
+    muted: '#667085',
+    error: '#DF1C41',
+    warning: '#F4C790',
+    success: '#27AE60',
+    info: '#378d93',
+  },
+})
+
+themeRegistry.registerCompositionLayer({
+  type: 'appearance',
+  name: 'dark',
+  tokens: {
+    background: '#031011',
+    text: '#c4e8ee',
+    secondary: '#378d93',
+    primary: '#c4e8ee',
+    accent: '#378d93',
+    muted: '#667085',
+    error: '#DF1C41',
+    warning: '#F4C790',
+    success: '#27AE60',
+    info: '#378d93',
+  },
+})
+
+const composed = themeRegistry.compose({ brand: 'fnp', appearance: 'dark' })
+
+await themeRegistry.load('/api/themes', {
+  ifExists: 'merge',
+  cacheKey: 'customer-themes',
+  maxAgeMs: 5 * 60 * 1000,
+})
+
+// Force refresh if cache should be bypassed.
+await themeRegistry.load('/api/themes', {
+  ifExists: 'merge',
+  cacheKey: 'customer-themes',
+  forceRefresh: true,
+})
+
+// SSR/hydration helpers.
+const attrs = themeRegistry.getInitialThemeAttributes('fnp', 'dark')
+const hydrated = themeRegistry.hydrateThemeOnDocument('fnp', 'dark')
+
+// Optional cache management.
+themeRegistry.clearLoadCache('customer-themes')
+themeRegistry.clearLoadCache()
+```
+
+## Development
+
+```bash
+npm.cmd install
+npm.cmd run build
+```
+
+## Publish
+
+1. Update `name` and `version` in `package.json`.
+2. Log in: `npm.cmd login`.
+3. Publish: `npm.cmd publish --access public`.
+
+## Roadmap
+
+See [ROADMAP.md](ROADMAP.md) for the phased feature plan from semantic tokens to plugin architecture, SSR support, CLI tooling, and v1 marketplace goals.

package/dist/app_theme-K3SQNO7I.js

@@ -0,0 +1,7 @@
+import {
+  themeRegistry
+} from "./chunk-GUPUN2GN.js";
+export {
+  themeRegistry
+};
+//# sourceMappingURL=app_theme-K3SQNO7I.js.map

package/dist/app_theme-K3SQNO7I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}