paperclip-theme 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# @blazo/paperclip-theme
+
+In-app theme customizer for [Paperclip](https://github.com/paperclipai/paperclip) with live preview, curated presets, and shareable configurations.
+
+## Features
+
+- **Live Preview** — Changes apply instantly via CSS custom property injection. No rebuild, no refresh.
+- **Curated Presets** — Ship with 6 carefully designed themes (dark + light variants).
+- **Token Editor** — Fine-tune individual design tokens with color pickers grouped by role.
+- **Border Radius** — Adjust global corner rounding with a visual slider.
+- **Persistent** — Theme choices are saved server-side and restored on page load.
+- **Shareable** — Export/import theme configs as JSON (coming soon).
+
+## Presets
+
+| Preset | Mode | Description |
+|--------|------|-------------|
+| Paperclip Dark | Dark | The stock Paperclip dark theme |
+| Paperclip Light | Light | The stock Paperclip light theme |
+| Midnight Blue | Dark | Deep navy surfaces with electric blue accents |
+| Emerald Noir | Dark | Elegant dark with rich green highlights |
+| Warm Sand | Light | Soft warm light theme with earthy tones |
+| Rosé Twilight | Dark | Dusky pink-tinted dark theme with warm accents |
+
+## Installation
+
+```bash
+# From the monorepo root
+pnpm install
+pnpm build
+
+# Install into your Paperclip instance
+paperclipai plugin install ./plugins/theme
+```
+
+## Usage
+
+After installation, navigate to **Settings** in Paperclip. You'll find a new **Theme** section where you can:
+
+1. Click a preset to instantly preview it
+2. Fine-tune any token with the color picker
+3. Adjust border radius with the slider
+4. Click **Save Theme** to persist your choice
+
+## License
+
+MIT

package/dist/constants.d.ts

@@ -0,0 +1,82 @@
+export declare const PLUGIN_ID = "blazo.paperclip-theme";
+export declare const PLUGIN_VERSION = "0.1.0";
+export declare const SLOT_IDS: {
+    readonly settingsPage: "theme-settings-page";
+};
+export declare const EXPORT_NAMES: {
+    readonly settingsPage: "ThemeSettingsPage";
+};
+export declare const STATE_KEYS: {
+    readonly activeTheme: "active-theme";
+};
+export declare const DATA_ENDPOINTS: {
+    readonly activeTheme: "active-theme";
+    readonly presets: "presets";
+};
+export declare const ACTION_NAMES: {
+    readonly applyTheme: "apply-theme";
+    readonly resetTheme: "reset-theme";
+};
+/**
+ * Semantic CSS custom properties that control Paperclip's entire look.
+ * Grouped by role for the settings UI.
+ */
+export declare const TOKEN_GROUPS: {
+    readonly surface: {
+        readonly label: "Surfaces";
+        readonly description: "Background and card colors";
+        readonly tokens: readonly ["--background", "--card", "--muted", "--accent"];
+    };
+    readonly text: {
+        readonly label: "Text";
+        readonly description: "Foreground and label colors";
+        readonly tokens: readonly ["--foreground", "--card-foreground", "--muted-foreground", "--accent-foreground"];
+    };
+    readonly interactive: {
+        readonly label: "Interactive";
+        readonly description: "Buttons, links, and primary actions";
+        readonly tokens: readonly ["--primary", "--primary-foreground"];
+    };
+    readonly feedback: {
+        readonly label: "Feedback";
+        readonly description: "Errors and destructive actions";
+        readonly tokens: readonly ["--destructive", "--destructive-foreground"];
+    };
+    readonly structure: {
+        readonly label: "Structure";
+        readonly description: "Borders, radius, and layout";
+        readonly tokens: readonly ["--border", "--input", "--ring"];
+    };
+    readonly charts: {
+        readonly label: "Charts";
+        readonly description: "Dashboard visualization colors";
+        readonly tokens: readonly ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+    };
+};
+/**
+ * Complete theme configuration shape.
+ * Values are raw CSS values (oklch, hex, px, etc.).
+ */
+export interface ThemeConfig {
+    id: string;
+    name: string;
+    description: string;
+    author: string;
+    isDark: boolean;
+    tokens: Record<string, string>;
+    radius: string;
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * The default Paperclip dark theme — extracted from the shipped CSS.
+ * This is the baseline; all presets override from here.
+ */
+export declare const PAPERCLIP_DARK_DEFAULTS: Record<string, string>;
+export declare const PAPERCLIP_LIGHT_DEFAULTS: Record<string, string>;
+/**
+ * Curated theme presets.
+ * Each preset provides a complete token override set.
+ */
+export declare const THEME_PRESETS: ThemeConfig[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,0BAA0B,CAAC;AACjD,eAAO,MAAM,cAAc,UAAU,CAAC;AAEtC,eAAO,MAAM,QAAQ;;CAEX,CAAC;AAEX,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,UAAU;;CAEb,CAAC;AAEX,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bf,CAAC;AAEX;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqB1D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqB3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,EAuhBtC,CAAC"}