paperclip-theme 0.1.0 → 0.2.0

package/src/constants.ts

@@ -11,8 +11,12 @@ export const EXPORT_NAMES = {
 
 export const STATE_KEYS = {
   activeTheme: "active-theme",
+  userThemes: "user-themes",
 } as const;
 
+export const REMOTE_REGISTRY_URL =
+  "https://raw.githubusercontent.com/Khaleeq2/paperclip-plugins/master/registry/themes.json";
+
 export const DATA_ENDPOINTS = {
   activeTheme: "active-theme",
   presets: "presets",
@@ -21,6 +25,8 @@ export const DATA_ENDPOINTS = {
 export const ACTION_NAMES = {
   applyTheme: "apply-theme",
   resetTheme: "reset-theme",
+  importTheme: "import-theme",
+  removeUserTheme: "remove-user-theme",
 } as const;
 
 /**
@@ -110,9 +116,9 @@ export const PAPERCLIP_LIGHT_DEFAULTS: Record<string, string> = {
   "--card-foreground": "oklch(14.5% 0 0)",
   "--primary": "oklch(20.5% 0 0)",
   "--primary-foreground": "oklch(98.5% 0 0)",
-  "--muted": "oklch(97% 0 0)",
-  "--muted-foreground": "oklch(55.6% 0 0)",
-  "--accent": "oklch(97% 0 0)",
+  "--muted": "oklch(92% 0 0)",
+  "--muted-foreground": "oklch(40% 0 0)",
+  "--accent": "oklch(91% 0 0)",
   "--accent-foreground": "oklch(20.5% 0 0)",
   "--destructive": "oklch(57.7% 0.245 27.325)",
   "--destructive-foreground": "oklch(57.7% 0.245 27.325)",
@@ -228,17 +234,17 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--foreground": "oklch(20% 0.02 60)",
       "--card": "oklch(99% 0.005 75)",
       "--card-foreground": "oklch(20% 0.02 60)",
-      "--primary": "oklch(45% 0.12 55)",
+      "--primary": "oklch(38% 0.10 55)",
       "--primary-foreground": "oklch(98% 0.005 75)",
-      "--muted": "oklch(93% 0.01 75)",
-      "--muted-foreground": "oklch(50% 0.02 60)",
-      "--accent": "oklch(93% 0.015 75)",
-      "--accent-foreground": "oklch(25% 0.02 60)",
-      "--destructive": "oklch(55% 0.22 25)",
-      "--destructive-foreground": "oklch(55% 0.22 25)",
-      "--border": "oklch(88% 0.015 75)",
-      "--input": "oklch(88% 0.015 75)",
-      "--ring": "oklch(45% 0.12 55)",
+      "--muted": "oklch(86% 0.02 75)",
+      "--muted-foreground": "oklch(35% 0.02 60)",
+      "--accent": "oklch(85% 0.025 75)",
+      "--accent-foreground": "oklch(22% 0.02 60)",
+      "--destructive": "oklch(50% 0.22 25)",
+      "--destructive-foreground": "oklch(98% 0 0)",
+      "--border": "oklch(82% 0.02 75)",
+      "--input": "oklch(82% 0.02 75)",
+      "--ring": "oklch(38% 0.10 55)",
       "--chart-1": "oklch(55% 0.18 40)",
       "--chart-2": "oklch(58% 0.12 180)",
       "--chart-3": "oklch(45% 0.08 280)",
@@ -295,7 +301,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(72% 0.12 210)",
       "--primary-foreground": "oklch(16% 0.015 230)",
       "--muted": "oklch(23% 0.015 230)",
-      "--muted-foreground": "oklch(65% 0.02 220)",
+      "--muted-foreground": "oklch(70% 0.02 220)",
       "--accent": "oklch(25% 0.02 230)",
       "--accent-foreground": "oklch(93% 0.01 220)",
       "--destructive": "oklch(58% 0.20 25)",
@@ -327,7 +333,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(70% 0.16 200)",
       "--primary-foreground": "oklch(14% 0.03 275)",
       "--muted": "oklch(21% 0.025 275)",
-      "--muted-foreground": "oklch(62% 0.03 260)",
+      "--muted-foreground": "oklch(68% 0.03 260)",
       "--accent": "oklch(24% 0.03 275)",
       "--accent-foreground": "oklch(90% 0.015 250)",
       "--destructive": "oklch(60% 0.22 20)",
@@ -359,7 +365,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(65% 0.20 310)",
       "--primary-foreground": "oklch(98% 0 0)",
       "--muted": "oklch(24% 0.02 290)",
-      "--muted-foreground": "oklch(65% 0.02 270)",
+      "--muted-foreground": "oklch(70% 0.02 270)",
       "--accent": "oklch(27% 0.025 290)",
       "--accent-foreground": "oklch(94% 0.01 80)",
       "--destructive": "oklch(62% 0.24 15)",
@@ -391,7 +397,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(72% 0.12 290)",
       "--primary-foreground": "oklch(17% 0.01 280)",
       "--muted": "oklch(24% 0.01 280)",
-      "--muted-foreground": "oklch(65% 0.02 280)",
+      "--muted-foreground": "oklch(70% 0.02 280)",
       "--accent": "oklch(27% 0.015 280)",
       "--accent-foreground": "oklch(91% 0.01 290)",
       "--destructive": "oklch(62% 0.18 15)",
@@ -423,7 +429,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(75% 0.14 80)",
       "--primary-foreground": "oklch(18% 0.01 230)",
       "--muted": "oklch(25% 0.01 230)",
-      "--muted-foreground": "oklch(60% 0.015 220)",
+      "--muted-foreground": "oklch(68% 0.015 220)",
       "--accent": "oklch(27% 0.015 230)",
       "--accent-foreground": "oklch(88% 0.01 80)",
       "--destructive": "oklch(58% 0.20 20)",
@@ -455,7 +461,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(70% 0.20 290)",
       "--primary-foreground": "oklch(98% 0 0)",
       "--muted": "oklch(22% 0.03 290)",
-      "--muted-foreground": "oklch(62% 0.03 290)",
+      "--muted-foreground": "oklch(68% 0.03 290)",
       "--accent": "oklch(25% 0.04 290)",
       "--accent-foreground": "oklch(92% 0.01 300)",
       "--destructive": "oklch(58% 0.22 20)",
@@ -487,7 +493,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(72% 0.14 60)",
       "--primary-foreground": "oklch(16% 0.02 245)",
       "--muted": "oklch(23% 0.02 245)",
-      "--muted-foreground": "oklch(62% 0.02 240)",
+      "--muted-foreground": "oklch(68% 0.02 240)",
       "--accent": "oklch(26% 0.025 245)",
       "--accent-foreground": "oklch(90% 0.01 60)",
       "--destructive": "oklch(58% 0.22 20)",
@@ -516,16 +522,16 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--foreground": "oklch(30% 0.04 230)",
       "--card": "oklch(98% 0.008 85)",
       "--card-foreground": "oklch(30% 0.04 230)",
-      "--primary": "oklch(50% 0.14 230)",
+      "--primary": "oklch(42% 0.14 230)",
       "--primary-foreground": "oklch(97% 0.005 85)",
-      "--muted": "oklch(92% 0.01 85)",
-      "--muted-foreground": "oklch(48% 0.03 200)",
-      "--accent": "oklch(92% 0.012 85)",
-      "--accent-foreground": "oklch(30% 0.04 230)",
-      "--destructive": "oklch(55% 0.22 25)",
-      "--destructive-foreground": "oklch(55% 0.22 25)",
-      "--border": "oklch(87% 0.012 85)",
-      "--input": "oklch(87% 0.012 85)",
+      "--muted": "oklch(86% 0.015 85)",
+      "--muted-foreground": "oklch(35% 0.03 200)",
+      "--accent": "oklch(85% 0.018 85)",
+      "--accent-foreground": "oklch(28% 0.04 230)",
+      "--destructive": "oklch(50% 0.22 25)",
+      "--destructive-foreground": "oklch(98% 0 0)",
+      "--border": "oklch(81% 0.015 85)",
+      "--input": "oklch(81% 0.015 85)",
       "--ring": "oklch(50% 0.14 230)",
       "--chart-1": "oklch(55% 0.16 230)",
       "--chart-2": "oklch(60% 0.14 155)",
@@ -548,16 +554,16 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--foreground": "oklch(25% 0.02 55)",
       "--card": "oklch(99.5% 0.003 80)",
       "--card-foreground": "oklch(25% 0.02 55)",
-      "--primary": "oklch(62% 0.16 40)",
+      "--primary": "oklch(52% 0.16 40)",
       "--primary-foreground": "oklch(99% 0 0)",
-      "--muted": "oklch(95% 0.008 80)",
-      "--muted-foreground": "oklch(48% 0.02 55)",
-      "--accent": "oklch(95% 0.01 80)",
-      "--accent-foreground": "oklch(25% 0.02 55)",
-      "--destructive": "oklch(55% 0.22 20)",
-      "--destructive-foreground": "oklch(55% 0.22 20)",
-      "--border": "oklch(90% 0.01 80)",
-      "--input": "oklch(90% 0.01 80)",
+      "--muted": "oklch(88% 0.012 80)",
+      "--muted-foreground": "oklch(35% 0.02 55)",
+      "--accent": "oklch(87% 0.015 80)",
+      "--accent-foreground": "oklch(22% 0.02 55)",
+      "--destructive": "oklch(50% 0.22 20)",
+      "--destructive-foreground": "oklch(98% 0 0)",
+      "--border": "oklch(83% 0.015 80)",
+      "--input": "oklch(83% 0.015 80)",
       "--ring": "oklch(62% 0.16 40)",
       "--chart-1": "oklch(62% 0.16 40)",
       "--chart-2": "oklch(60% 0.12 190)",
@@ -583,7 +589,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(65% 0.12 140)",
       "--primary-foreground": "oklch(98% 0 0)",
       "--muted": "oklch(23% 0.01 140)",
-      "--muted-foreground": "oklch(62% 0.02 130)",
+      "--muted-foreground": "oklch(68% 0.02 130)",
       "--accent": "oklch(26% 0.015 140)",
       "--accent-foreground": "oklch(90% 0.01 120)",
       "--destructive": "oklch(58% 0.20 25)",
@@ -615,7 +621,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(72% 0.22 330)",
       "--primary-foreground": "oklch(10% 0 0)",
       "--muted": "oklch(18% 0 0)",
-      "--muted-foreground": "oklch(55% 0.08 145)",
+      "--muted-foreground": "oklch(62% 0.08 145)",
       "--accent": "oklch(20% 0.005 330)",
       "--accent-foreground": "oklch(85% 0.18 145)",
       "--destructive": "oklch(62% 0.24 15)",
@@ -647,7 +653,7 @@ export const THEME_PRESETS: ThemeConfig[] = [
       "--primary": "oklch(68% 0.16 240)",
       "--primary-foreground": "oklch(98% 0 0)",
       "--muted": "oklch(21% 0.02 250)",
-      "--muted-foreground": "oklch(65% 0.02 240)",
+      "--muted-foreground": "oklch(70% 0.02 240)",
       "--accent": "oklch(24% 0.025 250)",
       "--accent-foreground": "oklch(96% 0.005 240)",
       "--destructive": "oklch(60% 0.22 20)",

package/src/ui/index.tsx

@@ -690,13 +690,16 @@ export function ThemeSettingsPage() {
   const presetsResult = usePluginData<ThemeConfig[]>("presets");
   const applyTheme = usePluginAction("apply-theme");
   const resetTheme = usePluginAction("reset-theme");
+  const importThemeAction = usePluginAction("import-theme");
 
   const [localTheme, setLocalTheme] = useState<ThemeConfig | null>(null);
   const [saving, setSaving] = useState(false);
   const [savedAt, setSavedAt] = useState<string | null>(null);
   const [hasUnsaved, setHasUnsaved] = useState(false);
   const [showModal, setShowModal] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
   const initialLoadDone = useRef(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const presets: ThemeConfig[] = presetsResult.data ?? [];
   const serverTheme: ThemeConfig | null = activeThemeResult.data ?? null;
@@ -785,6 +788,54 @@ export function ThemeSettingsPage() {
     }
   }, [resetTheme]);
 
+  const handleExport = useCallback(() => {
+    if (!localTheme) return;
+    const payload = JSON.stringify(localTheme, null, 2);
+    const blob = new Blob([payload], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${localTheme.id}.theme.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [localTheme]);
+
+  const handleImportFile = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      setImportError(null);
+      const file = e.target.files?.[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const parsed: unknown = JSON.parse(text);
+        if (
+          typeof parsed !== "object" ||
+          parsed === null ||
+          typeof (parsed as Record<string, unknown>).id !== "string" ||
+          typeof (parsed as Record<string, unknown>).name !== "string" ||
+          typeof (parsed as Record<string, unknown>).tokens !== "object" ||
+          typeof (parsed as Record<string, unknown>).isDark !== "boolean"
+        ) {
+          setImportError("Invalid theme file: must contain id, name, tokens, and isDark fields.");
+          return;
+        }
+        const result = await importThemeAction(parsed);
+        const imported = result as unknown as ThemeConfig;
+        setLocalTheme(imported);
+        injectThemeCSS(imported);
+        setHasUnsaved(true);
+        setSavedAt(null);
+      } catch (err) {
+        setImportError(`Import failed: ${String(err)}`);
+      } finally {
+        if (fileInputRef.current) fileInputRef.current.value = "";
+      }
+    },
+    [importThemeAction],
+  );
+
   const radiusNum = parseFloat(localTheme?.radius ?? "0") || 0;
 
   return (
@@ -909,6 +960,47 @@ export function ThemeSettingsPage() {
           <span style={{ ...styles.saved, color: "var(--chart-1)" }}>Unsaved changes</span>
         )}
       </div>
+
+      {/* Import / Export */}
+      <div style={styles.section}>
+        <p style={styles.sectionLabel}>Share</p>
+        <p style={{ ...styles.subtitle, marginTop: -8 }}>
+          Export your current theme as a JSON file to share with others, or import a community theme.
+        </p>
+        <div style={styles.actions}>
+          <button
+            type="button"
+            style={{
+              ...styles.btnSecondary,
+              opacity: localTheme ? 1 : 0.5,
+              pointerEvents: localTheme ? "auto" : "none",
+            }}
+            onClick={handleExport}
+            disabled={!localTheme}
+          >
+            Export Theme
+          </button>
+          <button
+            type="button"
+            style={styles.btnSecondary}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            Import Theme
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json,application/json"
+            style={{ display: "none" }}
+            onChange={handleImportFile}
+          />
+        </div>
+        {importError && (
+          <p style={{ fontSize: 12, color: "var(--destructive)", margin: 0 }}>
+            {importError}
+          </p>
+        )}
+      </div>
     </div>
   );
 }

package/src/worker.ts

@@ -11,11 +11,17 @@ import {
   DATA_ENDPOINTS,
   ACTION_NAMES,
   THEME_PRESETS,
+  REMOTE_REGISTRY_URL,
   type ThemeConfig,
 } from "./constants.js";
 
 let currentContext: PluginContext | null = null;
 
+/** In-memory cache of remote themes, refreshed on startup. */
+let remoteThemes: ThemeConfig[] = [];
+
+/* ─── State helpers ──────────────────────────────────────────────── */
+
 async function readTheme(ctx: PluginContext): Promise<ThemeConfig | null> {
   return (await ctx.state.get({
     scopeKind: "instance",
@@ -33,16 +39,104 @@ async function writeTheme(
   );
 }
 
+async function readUserThemes(ctx: PluginContext): Promise<ThemeConfig[]> {
+  const stored = await ctx.state.get({
+    scopeKind: "instance",
+    stateKey: STATE_KEYS.userThemes,
+  });
+  if (!Array.isArray(stored)) return [];
+  return stored as ThemeConfig[];
+}
+
+async function writeUserThemes(
+  ctx: PluginContext,
+  themes: ThemeConfig[],
+): Promise<void> {
+  await ctx.state.set(
+    { scopeKind: "instance", stateKey: STATE_KEYS.userThemes },
+    themes,
+  );
+}
+
+/* ─── Remote registry fetch ──────────────────────────────────────── */
+
+interface RegistryPayload {
+  version: number;
+  updatedAt: string;
+  themes: ThemeConfig[];
+}
+
+function isValidTheme(t: unknown): t is ThemeConfig {
+  if (typeof t !== "object" || t === null) return false;
+  const obj = t as Record<string, unknown>;
+  return (
+    typeof obj.id === "string" &&
+    typeof obj.name === "string" &&
+    typeof obj.tokens === "object" &&
+    obj.tokens !== null &&
+    typeof obj.isDark === "boolean"
+  );
+}
+
+async function fetchRemoteThemes(logger: PluginContext["logger"]): Promise<ThemeConfig[]> {
+  try {
+    const response = await fetch(REMOTE_REGISTRY_URL);
+    if (!response.ok) {
+      logger.warn(`Remote theme registry returned ${response.status}, using bundled fallback`);
+      return [];
+    }
+    const payload: unknown = await response.json();
+    if (
+      typeof payload !== "object" ||
+      payload === null ||
+      !Array.isArray((payload as RegistryPayload).themes)
+    ) {
+      logger.warn("Remote theme registry has invalid shape, using bundled fallback");
+      return [];
+    }
+    const themes = (payload as RegistryPayload).themes.filter(isValidTheme);
+    logger.info(`Fetched ${themes.length} themes from remote registry`);
+    return themes;
+  } catch (err) {
+    logger.warn(`Failed to fetch remote theme registry: ${String(err)}`);
+    return [];
+  }
+}
+
+/* ─── Merge logic: remote wins over bundled, user themes appended ── */
+
+function mergePresets(
+  bundled: ThemeConfig[],
+  remote: ThemeConfig[],
+  user: ThemeConfig[],
+): ThemeConfig[] {
+  const merged = new Map<string, ThemeConfig>();
+  for (const t of bundled) merged.set(t.id, t);
+  for (const t of remote) merged.set(t.id, t);
+  const result = Array.from(merged.values());
+  for (const t of user) {
+    if (!merged.has(t.id)) {
+      result.push(t);
+    }
+  }
+  return result;
+}
+
+/* ─── Plugin definition ──────────────────────────────────────────── */
+
 const plugin: PaperclipPlugin = definePlugin({
   async setup(ctx) {
     currentContext = ctx;
 
+    remoteThemes = await fetchRemoteThemes(ctx.logger);
+
     ctx.data.register(DATA_ENDPOINTS.activeTheme, async () => {
       return await readTheme(ctx);
     });
 
     ctx.data.register(DATA_ENDPOINTS.presets, async () => {
-      return THEME_PRESETS;
+      const userThemes = await readUserThemes(ctx);
+      return mergePresets(THEME_PRESETS, remoteThemes, userThemes);
     });
 
     ctx.actions.register(ACTION_NAMES.applyTheme, async (params) => {
@@ -52,7 +146,12 @@ const plugin: PaperclipPlugin = definePlugin({
         throw new Error("Theme id is required");
       }
 
-      const preset = THEME_PRESETS.find((p) => p.id === incoming.id);
+      const allPresets = mergePresets(
+        THEME_PRESETS,
+        remoteThemes,
+        await readUserThemes(ctx),
+      );
+      const preset = allPresets.find((p) => p.id === incoming.id);
 
       const theme: ThemeConfig = preset
         ? {
@@ -78,24 +177,66 @@ const plugin: PaperclipPlugin = definePlugin({
     });
 
     ctx.actions.register(ACTION_NAMES.resetTheme, async () => {
-      const defaultTheme = THEME_PRESETS[0];
+      const allPresets = mergePresets(
+        THEME_PRESETS,
+        remoteThemes,
+        await readUserThemes(ctx),
+      );
+      const defaultTheme = allPresets[0];
       if (!defaultTheme) {
         throw new Error("No default preset found");
       }
       await writeTheme(ctx, defaultTheme);
       return defaultTheme;
     });
+
+    ctx.actions.register(ACTION_NAMES.importTheme, async (params) => {
+      const incoming = params as unknown;
+      if (!isValidTheme(incoming)) {
+        throw new Error(
+          "Invalid theme: must include id (string), name (string), tokens (object), isDark (boolean)",
+        );
+      }
+      const theme: ThemeConfig = {
+        id: incoming.id,
+        name: incoming.name,
+        description: incoming.description ?? "",
+        author: incoming.author ?? "Community",
+        isDark: incoming.isDark,
+        tokens: incoming.tokens,
+        radius: incoming.radius ?? "0",
+        createdAt: incoming.createdAt ?? new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+      const existing = await readUserThemes(ctx);
+      const filtered = existing.filter((t) => t.id !== theme.id);
+      filtered.push(theme);
+      await writeUserThemes(ctx, filtered);
+      return theme;
+    });
+
+    ctx.actions.register(ACTION_NAMES.removeUserTheme, async (params) => {
+      const { id } = params as { id?: string };
+      if (!id) throw new Error("Theme id is required");
+      const existing = await readUserThemes(ctx);
+      const filtered = existing.filter((t) => t.id !== id);
+      await writeUserThemes(ctx, filtered);
+      return { removed: id };
+    });
   },
 
   async onHealth(): Promise<PluginHealthDiagnostics> {
     const ctx = currentContext;
     const activeTheme = ctx ? await readTheme(ctx) : null;
+    const userThemes = ctx ? await readUserThemes(ctx) : [];
     return {
       status: "ok",
       message: "Theme Customizer ready",
       details: {
         activePreset: activeTheme?.name ?? "Default (unset)",
-        presetsAvailable: THEME_PRESETS.length,
+        bundledPresets: THEME_PRESETS.length,
+        remotePresets: remoteThemes.length,
+        userImported: userThemes.length,
       },
     };
   },