@treeline-money/plugin-sdk 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,266 @@
+/**
+ * Treeline Plugin SDK
+ *
+ * TypeScript types and interfaces for building Treeline plugins.
+ * Install: npm install @treeline-money/plugin-sdk
+ *
+ * @packageDocumentation
+ */
+/**
+ * Plugin manifest describing the plugin's metadata and permissions.
+ */
+export interface PluginManifest {
+    /** Unique identifier (e.g., "subscriptions", "goals") */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Version string (semver) */
+    version: string;
+    /** Short description */
+    description: string;
+    /** Author name or organization */
+    author: string;
+    /** Optional icon (emoji or icon name) */
+    icon?: string;
+    /** Permissions this plugin requires */
+    permissions?: PluginPermissions;
+}
+/**
+ * Permissions a plugin can request.
+ */
+export interface PluginPermissions {
+    /** Table permissions for this plugin */
+    tables?: {
+        /** Tables this plugin can SELECT from */
+        read?: string[];
+        /** Tables this plugin can INSERT/UPDATE/DELETE */
+        write?: string[];
+        /** Tables this plugin can CREATE/DROP (must match sys_plugin_{id}_* pattern) */
+        create?: string[];
+    };
+}
+/**
+ * The SDK object passed to plugin views via props.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import type { PluginSDK } from '@treeline-money/plugin-sdk';
+ *
+ *   interface Props {
+ *     sdk: PluginSDK;
+ *   }
+ *   const { sdk }: Props = $props();
+ *
+ *   // Query transactions
+ *   const transactions = await sdk.query('SELECT * FROM transactions LIMIT 10');
+ *
+ *   // Show a toast
+ *   sdk.toast.success('Data loaded!');
+ * </script>
+ * ```
+ */
+export interface PluginSDK {
+    /**
+     * Execute a read-only SQL query against the database.
+     * @param sql - SQL SELECT query
+     * @returns Array of row objects
+     */
+    query: <T = Record<string, unknown>>(sql: string) => Promise<T[]>;
+    /**
+     * Execute a write SQL query (INSERT/UPDATE/DELETE).
+     * Restricted to tables allowed in plugin permissions.
+     * @param sql - SQL write query
+     * @returns Object with rowsAffected count
+     */
+    execute: (sql: string) => Promise<{
+        rowsAffected: number;
+    }>;
+    /**
+     * Toast notification methods.
+     */
+    toast: {
+        /** Show an info toast */
+        show: (message: string, description?: string) => void;
+        /** Show a success toast */
+        success: (message: string, description?: string) => void;
+        /** Show an error toast */
+        error: (message: string, description?: string) => void;
+        /** Show a warning toast */
+        warning: (message: string, description?: string) => void;
+        /** Show an info toast */
+        info: (message: string, description?: string) => void;
+    };
+    /**
+     * Navigate to another view.
+     * @param viewId - The view ID to open
+     * @param props - Optional props to pass to the view
+     */
+    openView: (viewId: string, props?: Record<string, unknown>) => void;
+    /**
+     * Subscribe to data refresh events (called after sync/import).
+     * @param callback - Function to call when data is refreshed
+     * @returns Unsubscribe function
+     */
+    onDataRefresh: (callback: () => void) => () => void;
+    /**
+     * Emit a data refresh event. Call this after modifying data
+     * so other views can update.
+     */
+    emitDataRefresh: () => void;
+    /**
+     * Update the badge count shown on this plugin's sidebar item.
+     * @param count - Badge count (0 or undefined to hide)
+     */
+    updateBadge: (count: number | undefined) => void;
+    /**
+     * Theme utilities.
+     */
+    theme: {
+        /** Get current theme ("light" or "dark") */
+        current: () => "light" | "dark";
+        /** Subscribe to theme changes */
+        subscribe: (callback: (theme: string) => void) => () => void;
+    };
+    /**
+     * Platform-aware modifier key display string.
+     * Returns "Cmd" on Mac, "Ctrl" on Windows/Linux.
+     */
+    modKey: "Cmd" | "Ctrl";
+    /**
+     * Format a keyboard shortcut for display.
+     * Converts "mod+p" to "⌘P" on Mac or "Ctrl+P" on Windows.
+     * @param shortcut - Shortcut string (e.g., "mod+shift+p")
+     */
+    formatShortcut: (shortcut: string) => string;
+    /**
+     * Plugin settings (persisted, scoped to plugin ID).
+     */
+    settings: {
+        /** Get all settings for this plugin */
+        get: <T extends Record<string, unknown>>() => Promise<T>;
+        /** Save settings for this plugin */
+        set: <T extends Record<string, unknown>>(settings: T) => Promise<void>;
+    };
+    /**
+     * Plugin state (ephemeral, scoped to plugin ID).
+     * Use for runtime state that doesn't need to persist.
+     */
+    state: {
+        /** Read plugin state */
+        read: <T>() => Promise<T | null>;
+        /** Write plugin state */
+        write: <T>(state: T) => Promise<void>;
+    };
+    /**
+     * Currency formatting utilities.
+     */
+    currency: {
+        /** Format amount with currency symbol (e.g., "$1,234.56") */
+        format: (amount: number, currency?: string) => string;
+        /** Format compactly for large amounts (e.g., "$1.2M") */
+        formatCompact: (amount: number, currency?: string) => string;
+        /** Format just the number without symbol (e.g., "1,234.56") */
+        formatAmount: (amount: number) => string;
+        /** Get symbol for a currency code (e.g., "USD" -> "$") */
+        getSymbol: (currency: string) => string;
+        /** Get the user's configured currency code */
+        getUserCurrency: () => string;
+        /** List of supported currency codes */
+        supportedCurrencies: string[];
+    };
+}
+/**
+ * Sidebar section definition.
+ */
+export interface SidebarSection {
+    /** Section ID */
+    id: string;
+    /** Section title (shown as header) */
+    title: string;
+    /** Sort order (lower = higher) */
+    order: number;
+}
+/**
+ * Sidebar item definition.
+ */
+export interface SidebarItem {
+    /** Unique ID */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon (emoji or icon name) */
+    icon: string;
+    /** Section this belongs to */
+    sectionId: string;
+    /** View to open when clicked */
+    viewId: string;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+    /** Sort order within section */
+    order?: number;
+}
+/**
+ * View definition for plugin views.
+ */
+export interface ViewDefinition {
+    /** Unique view ID */
+    id: string;
+    /** Display name (shown in tab) */
+    name: string;
+    /** Icon for tab */
+    icon: string;
+    /**
+     * Mount function that renders into the target element.
+     * @param target - DOM element to render into
+     * @param props - Props including the SDK
+     * @returns Cleanup function to call when unmounting
+     */
+    mount: (target: HTMLElement, props: {
+        sdk: PluginSDK;
+    }) => () => void;
+    /** Can multiple instances be open? */
+    allowMultiple?: boolean;
+}
+/**
+ * Command definition for the command palette.
+ */
+export interface Command {
+    /** Unique command ID */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Category for grouping */
+    category?: string;
+    /** Keyboard shortcut */
+    shortcut?: string;
+    /** Function to execute */
+    execute: () => void | Promise<void>;
+}
+/**
+ * Plugin context provided during activation.
+ */
+export interface PluginContext {
+    /** Register a sidebar section */
+    registerSidebarSection: (section: SidebarSection) => void;
+    /** Register a sidebar item */
+    registerSidebarItem: (item: SidebarItem) => void;
+    /** Register a view */
+    registerView: (view: ViewDefinition) => void;
+    /** Register a command */
+    registerCommand: (command: Command) => void;
+    /** Open a view */
+    openView: (viewId: string, props?: Record<string, unknown>) => void;
+}
+/**
+ * Plugin interface that all plugins must implement.
+ */
+export interface Plugin {
+    /** Plugin manifest */
+    manifest: PluginManifest;
+    /** Called when plugin is activated */
+    activate: (ctx: PluginContext) => void | Promise<void>;
+    /** Called when plugin is deactivated */
+    deactivate?: () => void | Promise<void>;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,9 @@
+/**
+ * Treeline Plugin SDK
+ *
+ * TypeScript types and interfaces for building Treeline plugins.
+ * Install: npm install @treeline-money/plugin-sdk
+ *
+ * @packageDocumentation
+ */
+export {};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@treeline-money/plugin-sdk",
+  "version": "0.1.0",
+  "description": "TypeScript SDK for building Treeline plugins",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./styles/plugin.css"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "treeline",
+    "plugin",
+    "sdk",
+    "personal-finance"
+  ],
+  "author": "Treeline Money",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/treeline-money/treeline.git",
+    "directory": "plugin-sdk"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

package/styles/plugin.css

@@ -0,0 +1,503 @@
+/**
+ * Treeline Plugin Styles
+ *
+ * Shared CSS classes for community plugins to match the app's look and feel.
+ * Import this in your plugin: import '@treeline-money/plugin-sdk/styles'
+ *
+ * All classes are prefixed with `tl-` to avoid conflicts.
+ */
+
+/* ============================================================================
+ * Layout
+ * ============================================================================ */
+
+.tl-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+}
+
+.tl-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-lg, 16px);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.tl-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px);
+}
+
+.tl-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 12px);
+}
+
+.tl-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.tl-subtitle {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.tl-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-lg, 16px);
+}
+
+/* ============================================================================
+ * Buttons
+ * ============================================================================ */
+
+.tl-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: var(--radius-sm, 4px);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.tl-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tl-btn-primary {
+  background: var(--accent-primary);
+  color: var(--bg-primary);
+}
+
+.tl-btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.tl-btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
+}
+
+.tl-btn-secondary:hover:not(:disabled) {
+  background: var(--bg-secondary);
+}
+
+.tl-btn-danger {
+  background: var(--accent-danger);
+  color: white;
+}
+
+.tl-btn-danger:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.tl-btn-text {
+  background: transparent;
+  color: var(--text-secondary);
+  padding: 4px 8px;
+}
+
+.tl-btn-text:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.tl-btn-icon {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: all 0.15s;
+}
+
+.tl-btn-icon:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+/* ============================================================================
+ * Cards
+ * ============================================================================ */
+
+.tl-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--spacing-md, 12px);
+  margin-bottom: var(--spacing-lg, 16px);
+}
+
+.tl-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 6px);
+  padding: var(--spacing-md, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px);
+}
+
+.tl-card-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+}
+
+.tl-card-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.tl-card-value-sm {
+  font-size: 18px;
+}
+
+/* ============================================================================
+ * Tables
+ * ============================================================================ */
+
+.tl-table-container {
+  overflow-x: auto;
+}
+
+.tl-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.tl-table th {
+  text-align: left;
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 2px solid var(--border-primary);
+  white-space: nowrap;
+}
+
+.tl-table th.tl-sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+
+.tl-table th.tl-sortable:hover {
+  color: var(--text-primary);
+}
+
+.tl-table th.tl-sorted {
+  color: var(--accent-primary);
+}
+
+.tl-table td {
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--text-primary);
+}
+
+.tl-table tbody tr:hover {
+  background: var(--bg-secondary);
+}
+
+.tl-table tbody tr.tl-selected {
+  background: var(--bg-active);
+}
+
+.tl-table tbody tr.tl-muted {
+  opacity: 0.5;
+}
+
+/* Table cell types */
+.tl-cell-mono {
+  font-family: var(--font-mono);
+}
+
+.tl-cell-number {
+  font-family: var(--font-mono);
+  text-align: right;
+}
+
+.tl-cell-date {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.tl-cell-positive {
+  color: var(--color-positive);
+  font-family: var(--font-mono);
+}
+
+.tl-cell-negative {
+  color: var(--color-negative);
+  font-family: var(--font-mono);
+}
+
+.tl-cell-actions {
+  display: flex;
+  gap: var(--spacing-xs, 4px);
+  justify-content: flex-end;
+}
+
+/* ============================================================================
+ * Badges
+ * ============================================================================ */
+
+.tl-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  background: var(--bg-tertiary);
+  color: var(--accent-primary);
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: var(--radius-sm, 4px);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.tl-badge-success {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--accent-success);
+}
+
+.tl-badge-warning {
+  background: rgba(210, 153, 34, 0.15);
+  color: var(--accent-warning);
+}
+
+.tl-badge-danger {
+  background: rgba(248, 81, 73, 0.15);
+  color: var(--accent-danger);
+}
+
+.tl-badge-muted {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+
+/* ============================================================================
+ * Form Elements
+ * ============================================================================ */
+
+.tl-input {
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s;
+}
+
+.tl-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.tl-input::placeholder {
+  color: var(--text-muted);
+}
+
+.tl-select {
+  padding: 8px 28px 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.tl-select:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.tl-select option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.tl-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.tl-checkbox input {
+  accent-color: var(--accent-primary);
+}
+
+.tl-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-xs, 4px);
+}
+
+.tl-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px);
+  margin-bottom: var(--spacing-md, 12px);
+}
+
+/* ============================================================================
+ * Empty State
+ * ============================================================================ */
+
+.tl-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-xl, 24px);
+  color: var(--text-muted);
+  min-height: 200px;
+}
+
+.tl-empty-icon {
+  font-size: 48px;
+  margin-bottom: var(--spacing-md, 12px);
+  opacity: 0.5;
+}
+
+.tl-empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm, 8px);
+}
+
+.tl-empty-message {
+  font-size: 13px;
+  max-width: 400px;
+}
+
+/* ============================================================================
+ * Loading State
+ * ============================================================================ */
+
+.tl-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl, 24px);
+  color: var(--text-muted);
+  gap: var(--spacing-md, 12px);
+}
+
+.tl-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border-primary);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: tl-spin 0.8s linear infinite;
+}
+
+@keyframes tl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+ * Utility Classes
+ * ============================================================================ */
+
+.tl-mono {
+  font-family: var(--font-mono);
+}
+
+.tl-muted {
+  color: var(--text-muted);
+}
+
+.tl-positive {
+  color: var(--color-positive);
+}
+
+.tl-negative {
+  color: var(--color-negative);
+}
+
+.tl-text-sm {
+  font-size: 12px;
+}
+
+.tl-text-xs {
+  font-size: 11px;
+}
+
+.tl-font-semibold {
+  font-weight: 600;
+}
+
+.tl-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tl-gap-sm {
+  gap: var(--spacing-sm, 8px);
+}
+
+.tl-gap-md {
+  gap: var(--spacing-md, 12px);
+}
+
+.tl-mt-md {
+  margin-top: var(--spacing-md, 12px);
+}
+
+.tl-mb-md {
+  margin-bottom: var(--spacing-md, 12px);
+}