paperclip-theme 0.1.1 → 0.2.1

package/src/ui/index.tsx

@@ -25,6 +25,28 @@ const CARD_WIDTH = 192;
 const CARD_GAP = 10;
 const SWATCH_TOKENS = ["--background", "--primary", "--accent", "--chart-1", "--destructive"];
 
+const FONT_OPTIONS_SANS = [
+  { label: "System Default", value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" },
+  { label: "Inter", value: "'Inter', sans-serif" },
+  { label: "Geist", value: "'Geist', sans-serif" },
+  { label: "DM Sans", value: "'DM Sans', sans-serif" },
+  { label: "Manrope", value: "'Manrope', sans-serif" },
+  { label: "Plus Jakarta Sans", value: "'Plus Jakarta Sans', sans-serif" },
+  { label: "IBM Plex Sans", value: "'IBM Plex Sans', sans-serif" },
+  { label: "Nunito", value: "'Nunito', sans-serif" },
+  { label: "Custom", value: "__custom__" },
+];
+
+const FONT_OPTIONS_MONO = [
+  { label: "System Default", value: "'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace" },
+  { label: "Geist Mono", value: "'Geist Mono', monospace" },
+  { label: "JetBrains Mono", value: "'JetBrains Mono', monospace" },
+  { label: "Fira Code", value: "'Fira Code', monospace" },
+  { label: "IBM Plex Mono", value: "'IBM Plex Mono', monospace" },
+  { label: "Cascadia Code", value: "'Cascadia Code', monospace" },
+  { label: "Custom", value: "__custom__" },
+];
+
 /* ─── CSS injection engine ───────────────────────────────────────── */
 
 const STYLE_ELEMENT_ID = "blazo-theme-overrides";
@@ -385,6 +407,43 @@ const styles = {
     background: "var(--accent)",
     flexShrink: 0,
   }),
+  stickyBar: {
+    position: "sticky" as const,
+    top: 0,
+    zIndex: 50,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "10px 16px",
+    background: "var(--card)",
+    borderBottom: "1px solid var(--border)",
+    borderRadius: 8,
+    marginBottom: -8,
+  },
+  stickyThemeInfo: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: 1,
+    minWidth: 0,
+  },
+  stickyThemeName: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--foreground)",
+    whiteSpace: "nowrap" as const,
+    overflow: "hidden" as const,
+    textOverflow: "ellipsis" as const,
+  },
+  stickyStatus: {
+    fontSize: 11,
+    color: "var(--muted-foreground)",
+  },
+  stickyBtns: {
+    display: "flex",
+    gap: 8,
+    flexShrink: 0,
+  },
   actions: {
     display: "flex",
     gap: 10,
@@ -420,6 +479,41 @@ const styles = {
     alignSelf: "center" as const,
     transition: "opacity 300ms ease",
   },
+  fontRow: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: 4,
+    padding: "6px 0",
+  },
+  fontLabel: {
+    fontSize: 13,
+    fontWeight: 400,
+    color: "var(--foreground)",
+  },
+  fontSelect: {
+    padding: "7px 10px",
+    borderRadius: 6,
+    border: "1.5px solid var(--border)",
+    background: "var(--muted)",
+    color: "var(--foreground)",
+    fontSize: 13,
+    cursor: "pointer",
+    outline: "none",
+    width: "100%",
+  },
+  fontCustomInput: {
+    marginTop: 6,
+    padding: "7px 10px",
+    borderRadius: 6,
+    border: "1.5px solid var(--border)",
+    background: "var(--muted)",
+    color: "var(--foreground)",
+    fontSize: 12,
+    fontFamily: "var(--font-mono, monospace)",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box" as const,
+  },
   overlay: {
     position: "fixed" as const,
     inset: 0,
@@ -683,6 +777,69 @@ function TokenRow({
   );
 }
 
+/* ─── Font Row ───────────────────────────────────────────────────── */
+
+function FontRow({
+  label,
+  token,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  token: string;
+  value: string;
+  options: { label: string; value: string }[];
+  onChange: (token: string, value: string) => void;
+}) {
+  const knownOption = options.find((o) => o.value !== "__custom__" && o.value === value);
+  const isCustom = !knownOption && value !== "";
+  const selectValue = isCustom ? "__custom__" : (value || options[0]!.value);
+  const [showCustom, setShowCustom] = useState(isCustom);
+
+  return (
+    <div style={styles.fontRow}>
+      <span style={styles.fontLabel}>{label}</span>
+      <select
+        style={styles.fontSelect}
+        value={selectValue}
+        onChange={(e) => {
+          if (e.target.value === "__custom__") {
+            setShowCustom(true);
+          } else {
+            setShowCustom(false);
+            onChange(token, e.target.value);
+          }
+        }}
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      {showCustom && (
+        <input
+          type="text"
+          placeholder="e.g. 'Roboto', sans-serif"
+          defaultValue={isCustom ? value : ""}
+          style={styles.fontCustomInput}
+          onBlur={(e) => {
+            const v = e.target.value.trim();
+            if (v) onChange(token, v);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              const v = (e.target as HTMLInputElement).value.trim();
+              if (v) onChange(token, v);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
 /* ─── Main Settings Page Component ───────────────────────────────── */
 
 export function ThemeSettingsPage() {
@@ -690,13 +847,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,10 +945,104 @@ 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 (
     <div style={styles.root}>
+      {/* Sticky Save Bar */}
+      <div style={styles.stickyBar}>
+        <div style={styles.stickyThemeInfo}>
+          <span style={styles.stickyThemeName}>
+            {localTheme ? localTheme.name : "No theme selected"}
+          </span>
+          <span style={styles.stickyStatus}>
+            {saving
+              ? "Saving\u2026"
+              : savedAt
+              ? `Saved at ${savedAt}`
+              : hasUnsaved
+              ? "Unsaved changes"
+              : "Saved"}
+          </span>
+        </div>
+        <div style={styles.stickyBtns}>
+          <button
+            type="button"
+            style={{
+              ...styles.btnSecondary,
+              padding: "7px 14px",
+              fontSize: 12,
+            }}
+            onClick={handleReset}
+            disabled={saving}
+          >
+            Reset
+          </button>
+          <button
+            type="button"
+            style={{
+              ...styles.btnPrimary,
+              padding: "7px 14px",
+              fontSize: 12,
+              opacity: saving || !hasUnsaved ? 0.45 : 1,
+              pointerEvents: saving || !hasUnsaved ? "none" : "auto",
+            }}
+            onClick={handleSave}
+            disabled={saving || !hasUnsaved}
+          >
+            Save Theme
+          </button>
+        </div>
+      </div>
+
       {/* Header */}
       <div style={styles.header}>
         <h2 style={styles.title}>Theme</h2>
@@ -860,6 +1114,30 @@ export function ThemeSettingsPage() {
         </div>
       )}
 
+      {/* Typography */}
+      {localTheme && (
+        <div style={styles.section}>
+          <p style={styles.sectionLabel}>Typography</p>
+          <p style={{ ...styles.subtitle, marginTop: -8 }}>
+            Choose fonts for the UI. Select a preset or enter a custom CSS font stack.
+          </p>
+          <FontRow
+            label="Sans-serif (UI font)"
+            token="--font-sans"
+            value={localTheme.tokens["--font-sans"] ?? ""}
+            options={FONT_OPTIONS_SANS}
+            onChange={updateToken}
+          />
+          <FontRow
+            label="Monospace (code font)"
+            token="--font-mono"
+            value={localTheme.tokens["--font-mono"] ?? ""}
+            options={FONT_OPTIONS_MONO}
+            onChange={updateToken}
+          />
+        </div>
+      )}
+
       {/* Radius */}
       {localTheme && (
         <div style={styles.section}>
@@ -880,33 +1158,44 @@ export function ThemeSettingsPage() {
         </div>
       )}
 
-      {/* Actions */}
-      <div style={styles.actions}>
-        <button
-          type="button"
-          style={{
-            ...styles.btnPrimary,
-            opacity: saving || !hasUnsaved ? 0.5 : 1,
-            pointerEvents: saving || !hasUnsaved ? "none" : "auto",
-          }}
-          onClick={handleSave}
-          disabled={saving || !hasUnsaved}
-        >
-          {saving ? "Saving\u2026" : "Save Theme"}
-        </button>
-        <button
-          type="button"
-          style={styles.btnSecondary}
-          onClick={handleReset}
-          disabled={saving}
-        >
-          Reset to Default
-        </button>
-        {savedAt && (
-          <span style={styles.saved}>Saved at {savedAt}</span>
-        )}
-        {hasUnsaved && !savedAt && (
-          <span style={{ ...styles.saved, color: "var(--chart-1)" }}>Unsaved changes</span>
+      {/* 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,
       },
     };
   },