@joewinke/jatui 0.1.24 → 0.1.26

package/dist/types/pipeline.d.ts

@@ -0,0 +1,115 @@
+/** A single stage (column) in the pipeline */
+export interface PipelineStage {
+    id: string;
+    label: string;
+    order: number;
+    /** oklch color string, e.g. "oklch(0.70 0.18 240)" */
+    color?: string;
+    /** DaisyUI semantic color fallback: "primary" | "secondary" | "success" | "warning" | "error" | "info" */
+    semantic?: string;
+    /** Optional icon (SVG path or component name) */
+    icon?: string;
+    /** Whether cards can be dragged out of this column */
+    draggableOut?: boolean;
+    /** Whether cards can be dropped into this column */
+    droppableIn?: boolean;
+}
+/** Resolved colors for a stage, computed from PipelineStage.color or .semantic */
+export interface StageColors {
+    bg: string;
+    text: string;
+    border: string;
+    accent: string;
+}
+/** A single item (card) in the pipeline. Generic — consumers extend with their own fields. */
+export interface PipelineItem {
+    id: string;
+    stageId: string;
+    title: string;
+    /** Optional subtitle (e.g. client name, company) */
+    subtitle?: string;
+    /** Numeric value for metrics aggregation (e.g. deal value, session cost) */
+    value?: number;
+    /** ISO date string — when the item entered the current stage */
+    stageEnteredAt?: string;
+    /** ISO date string — expected completion/close date */
+    expectedDate?: string;
+    /** Priority: 0 = highest */
+    priority?: number;
+    /** Assignee name or ID */
+    assignee?: string;
+    /** Freeform labels/tags */
+    labels?: string[];
+    /** Arbitrary metadata for card snippets to consume */
+    meta?: Record<string, unknown>;
+}
+/** A single metric to display in the pipeline header */
+export interface PipelineMetric {
+    label: string;
+    value: string | number;
+    /** Optional format hint: "currency" | "percent" | "number" */
+    format?: 'currency' | 'percent' | 'number';
+    /** Change from previous period, e.g. +5 or -2.3 */
+    change?: number;
+    /** DaisyUI color for the metric card */
+    color?: string;
+}
+/** Per-stage aggregate computed by the Pipeline component */
+export interface StageMetrics {
+    stageId: string;
+    count: number;
+    totalValue: number;
+}
+/** View mode for the pipeline display */
+export type PipelineViewMode = 'kanban' | 'table';
+/** Table column definition for table view */
+export interface PipelineTableColumn {
+    key: string;
+    label: string;
+    /** Width hint: "sm" (80px) | "md" (120px) | "lg" (200px) | "flex" (fill) */
+    width?: 'sm' | 'md' | 'lg' | 'flex';
+    /** Sort direction if sortable */
+    sortable?: boolean;
+}
+/** Drag-drop configuration */
+export interface PipelineDragConfig {
+    enabled: boolean;
+    /** Duration for flip animation in ms (default: 200) */
+    flipDurationMs?: number;
+    /** CSS class applied to the drop zone during drag */
+    dropTargetClass?: string;
+    /** Stage IDs where drag is disabled (overrides per-stage draggableOut/droppableIn) */
+    disabledStages?: string[];
+}
+/** Top-level pipeline configuration */
+export interface PipelineConfig {
+    /** Which views are available */
+    views?: PipelineViewMode[];
+    /** Default view on mount */
+    defaultView?: PipelineViewMode;
+    /** Drag-drop settings */
+    drag?: PipelineDragConfig;
+    /** Whether columns can be collapsed */
+    collapsible?: boolean;
+    /** Column min-height in px (default: 200) */
+    columnMinHeight?: number;
+    /** Table columns for table view */
+    tableColumns?: PipelineTableColumn[];
+    /** Currency code for value formatting (default: "USD") */
+    currency?: string;
+}
+/** Fired when an item is moved between stages via drag-drop */
+export interface PipelineStageChangeEvent {
+    itemId: string;
+    fromStageId: string;
+    toStageId: string;
+    /** New index within the target stage */
+    newIndex: number;
+}
+/** Fired when an item is clicked */
+export interface PipelineItemClickEvent {
+    item: PipelineItem;
+    stageId: string;
+}
+export declare const DEFAULT_DRAG_CONFIG: PipelineDragConfig;
+export declare const DEFAULT_PIPELINE_CONFIG: PipelineConfig;

package/dist/types/pipeline.js

@@ -0,0 +1,15 @@
+// ─── Core Stage/Column Types ───
+// ─── Defaults ───
+export var DEFAULT_DRAG_CONFIG = {
+    enabled: true,
+    flipDurationMs: 200,
+    dropTargetClass: 'outline-dashed outline-2 outline-base-content/20'
+};
+export var DEFAULT_PIPELINE_CONFIG = {
+    views: ['kanban'],
+    defaultView: 'kanban',
+    drag: DEFAULT_DRAG_CONFIG,
+    collapsible: true,
+    columnMinHeight: 200,
+    currency: 'USD'
+};

package/dist/types/smartImageEditor.d.ts

@@ -0,0 +1,42 @@
+export interface ImageVariantSpec {
+    name: string;
+    width: number;
+    height: number;
+    fit?: "contain" | "cover" | "fill";
+    /** CSS hex color or "transparent". Transparent background when omitted. */
+    background?: string;
+    /**
+     * Optional Gemini edit instruction run on the (background-removed) source
+     * before Sharp's deterministic resize. Used to intelligently re-frame the
+     * variant — e.g. crop a logo down to just the brand mark, or compose an OG
+     * card. Falls back to Sharp-only if the Gemini call fails.
+     */
+    aiPrompt?: string;
+}
+export interface ImageProcessingSpec {
+    removeBackground?: boolean;
+    aspectRatio?: string;
+    variants: ImageVariantSpec[];
+}
+export interface VariantResult {
+    name: string;
+    url: string;
+    width: number;
+    height: number;
+    backgroundRemovalFailed?: boolean;
+    /** True when this variant had an aiPrompt but the Gemini edit call failed
+     *  and we fell back to Sharp-only. The result is still uploaded; this is a
+     *  non-blocking signal that the smart re-frame didn't happen. */
+    aiEditFailed?: boolean;
+}
+export type VariantState = {
+    status: "idle";
+} | {
+    status: "loading";
+} | {
+    status: "done";
+    result: VariantResult;
+} | {
+    status: "error";
+    message: string;
+};

package/dist/types/smartImageEditor.js

@@ -0,0 +1 @@
+export {};

package/dist/types/templateVars.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Template variable types — shared shape between the JST server-side registry
+ * (`src/lib/server/template-vars.ts`, `getVarsForCategory`) and the
+ * VariablePicker component.
+ *
+ * jatui cannot import the host app's `$lib/server` module (server-only), so
+ * these types are mirrored here. They are kept structurally identical to the
+ * registry's output so `getVarsForCategory(category, availableVars)` can be
+ * passed straight into `<VariablePicker groups={...} />` with no mapping —
+ * same jst↔jatui structural-compatibility pattern used by CommentThread.
+ */
+/** A single insertable merge variable. */
+export interface TemplateVar {
+    /**
+     * Dotted variable path inserted into the template as `{{name}}`.
+     * e.g. `contact.name`, `org.logo_url`, `total`.
+     */
+    name: string;
+    /** Human label shown in the picker, e.g. "Contact name". */
+    label: string;
+    /** Optional one-line help text describing the value. */
+    description?: string;
+    /** Optional sample value shown as a hint, e.g. "Acme Inc.". */
+    example?: string;
+}
+/** Variable context group, e.g. all client/org/financial/custom vars. */
+export interface TemplateVarGroup {
+    /** Stable group id — matches VarGroupId in the host app's template-vars registry. */
+    id: string;
+    /** Group heading shown in the picker, e.g. "Client". */
+    label: string;
+    /** Variables in this group (never empty — empty groups are omitted). */
+    vars: TemplateVar[];
+}

package/dist/types/templateVars.js

@@ -0,0 +1,12 @@
+/**
+ * Template variable types — shared shape between the JST server-side registry
+ * (`src/lib/server/template-vars.ts`, `getVarsForCategory`) and the
+ * VariablePicker component.
+ *
+ * jatui cannot import the host app's `$lib/server` module (server-only), so
+ * these types are mirrored here. They are kept structurally identical to the
+ * registry's output so `getVarsForCategory(category, availableVars)` can be
+ * passed straight into `<VariablePicker groups={...} />` with no mapping —
+ * same jst↔jatui structural-compatibility pattern used by CommentThread.
+ */
+export {};

package/dist/utils/currency.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Currency formatting utilities
+ */
+/**
+ * Format a number as USD currency string.
+ * Override locale/currency by passing options.
+ */
+export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;

package/dist/utils/currency.js

@@ -0,0 +1,17 @@
+/**
+ * Currency formatting utilities
+ */
+/**
+ * Format a number as USD currency string.
+ * Override locale/currency by passing options.
+ */
+export function formatCurrency(amount, locale, currency) {
+    if (locale === void 0) { locale = 'en-US'; }
+    if (currency === void 0) { currency = 'USD'; }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(amount);
+}

package/dist/utils/daisyuiColors.d.ts

@@ -0,0 +1,37 @@
+/**
+ * DaisyUI Color Utility — runtime CSS-var resolution for JS/Canvas contexts.
+ *
+ * Reads --color-* custom properties at runtime so any custom DaisyUI theme
+ * works correctly. SSR-safe: falls back to transparent/black when window is absent.
+ */
+/**
+ * Get a DaisyUI semantic color string usable in Canvas / JS.
+ * Returns the raw CSS value (hex, oklch, or similar) from the active theme.
+ */
+export declare function getDaisyUIColor(colorName: string): string;
+/**
+ * Create a lighter version of a color using color-mix (works with hex and oklch).
+ */
+export declare function lightenColor(color: string, amount?: number): string;
+/**
+ * Create a darker version of a color using color-mix.
+ */
+export declare function darkenColor(color: string, amount?: number): string;
+/**
+ * Setup theme change detection.
+ * Clears color cache when theme changes and optionally calls a callback.
+ */
+export declare function watchThemeChanges(onThemeChange?: () => void): () => void;
+/**
+ * Check if we're currently in a dark theme by comparing base luminance.
+ * Uses a hidden canvas pixel to resolve the computed color to RGB.
+ */
+export declare function isDarkTheme(): boolean;
+/**
+ * Get the current theme name if available.
+ */
+export declare function getCurrentTheme(): string | null;
+/**
+ * Clear the color cache manually.
+ */
+export declare function clearColorCache(): void;

package/dist/utils/daisyuiColors.js

@@ -0,0 +1,152 @@
+/**
+ * DaisyUI Color Utility — runtime CSS-var resolution for JS/Canvas contexts.
+ *
+ * Reads --color-* custom properties at runtime so any custom DaisyUI theme
+ * works correctly. SSR-safe: falls back to transparent/black when window is absent.
+ */
+var colorCache = new Map();
+var themeObserver = null;
+function resolveViaDOM(colorName) {
+    var el = document.documentElement;
+    var raw = getComputedStyle(el).getPropertyValue("--color-".concat(colorName)).trim();
+    if (raw)
+        return raw;
+    // DaisyUI v4 used shortened oklch channel vars (e.g. --p); try that form
+    var shortMap = {
+        primary: '--p',
+        'primary-content': '--pc',
+        secondary: '--s',
+        'secondary-content': '--sc',
+        accent: '--a',
+        'accent-content': '--ac',
+        neutral: '--n',
+        'neutral-content': '--nc',
+        'base-100': '--b1',
+        'base-200': '--b2',
+        'base-300': '--b3',
+        'base-content': '--bc',
+        info: '--in',
+        'info-content': '--inc',
+        success: '--su',
+        'success-content': '--suc',
+        warning: '--wa',
+        'warning-content': '--wac',
+        error: '--er',
+        'error-content': '--erc',
+    };
+    var shortVar = shortMap[colorName];
+    if (shortVar) {
+        var shortRaw = getComputedStyle(el).getPropertyValue(shortVar).trim();
+        if (shortRaw)
+            return "oklch(".concat(shortRaw, ")");
+    }
+    return 'oklch(0.5 0 0)';
+}
+/**
+ * Get a DaisyUI semantic color string usable in Canvas / JS.
+ * Returns the raw CSS value (hex, oklch, or similar) from the active theme.
+ */
+export function getDaisyUIColor(colorName) {
+    if (typeof window === 'undefined')
+        return 'oklch(0.5 0 0)';
+    if (colorCache.has(colorName)) {
+        return colorCache.get(colorName);
+    }
+    var resolved = resolveViaDOM(colorName);
+    colorCache.set(colorName, resolved);
+    return resolved;
+}
+/**
+ * Create a lighter version of a color using color-mix (works with hex and oklch).
+ */
+export function lightenColor(color, amount) {
+    if (amount === void 0) { amount = 0.2; }
+    var pct = Math.round(amount * 100);
+    return "color-mix(in oklch, white ".concat(pct, "%, ").concat(color, ")");
+}
+/**
+ * Create a darker version of a color using color-mix.
+ */
+export function darkenColor(color, amount) {
+    if (amount === void 0) { amount = 0.2; }
+    var pct = Math.round(amount * 100);
+    return "color-mix(in oklch, black ".concat(pct, "%, ").concat(color, ")");
+}
+/**
+ * Setup theme change detection.
+ * Clears color cache when theme changes and optionally calls a callback.
+ */
+export function watchThemeChanges(onThemeChange) {
+    if (themeObserver) {
+        themeObserver.disconnect();
+    }
+    themeObserver = new MutationObserver(function (mutations) {
+        var themeChanged = false;
+        mutations.forEach(function (mutation) {
+            if (mutation.type === 'attributes' &&
+                (mutation.attributeName === 'data-theme' ||
+                    mutation.attributeName === 'class')) {
+                themeChanged = true;
+            }
+        });
+        if (themeChanged) {
+            colorCache.clear();
+            if (onThemeChange) {
+                onThemeChange();
+            }
+        }
+    });
+    themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme', 'class'],
+    });
+    return function () {
+        if (themeObserver) {
+            themeObserver.disconnect();
+            themeObserver = null;
+        }
+    };
+}
+/**
+ * Check if we're currently in a dark theme by comparing base luminance.
+ * Uses a hidden canvas pixel to resolve the computed color to RGB.
+ */
+export function isDarkTheme() {
+    if (typeof window === 'undefined')
+        return false;
+    var baseContent = getDaisyUIColor('base-content');
+    var base100 = getDaisyUIColor('base-100');
+    return getLuminance(baseContent) > getLuminance(base100);
+}
+function getLuminance(color) {
+    // Resolve via a temporary off-screen canvas pixel
+    var canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return 0.5;
+    try {
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+        var _a = ctx.getImageData(0, 0, 1, 1).data, r = _a[0], g = _a[1], b = _a[2];
+        return (r * 299 + g * 587 + b * 114) / (1000 * 255);
+    }
+    catch (_b) {
+        return 0.5;
+    }
+}
+/**
+ * Get the current theme name if available.
+ */
+export function getCurrentTheme() {
+    if (typeof window === 'undefined')
+        return null;
+    return document.documentElement.getAttribute('data-theme');
+}
+/**
+ * Clear the color cache manually.
+ */
+export function clearColorCache() {
+    colorCache.clear();
+}

package/dist/utils/dateFormatters.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Date formatting utilities for consistent date/time display.
+ *
+ * UTC/ISO Timestamp Handling:
+ * Database timestamps are often stored without timezone info (e.g., "2024-11-21 15:30:00").
+ * These utilities normalize timestamps to ensure correct UTC parsing.
+ */
+/**
+ * Normalize a timestamp string to proper ISO 8601 format.
+ * Handles database timestamps that may lack 'T' separator or 'Z' suffix.
+ */
+export declare function normalizeTimestamp(timestamp: string): string;
+/**
+ * Parse a potentially non-standard timestamp into a Date object.
+ * Accepts a Date (returned by postgres.js), ISO string, or null/undefined.
+ */
+export declare function parseTimestamp(timestamp: Date | string | null | undefined): Date | null;
+/**
+ * Format relative time (e.g., "2d", "3mo", "1y").
+ * Compact format suitable for tables and compact UIs.
+ */
+export declare function formatRelativeTime(dateStr: Date | string | null | undefined): string;
+/**
+ * Format full date and time for tooltips and detailed views.
+ */
+export declare function formatFullDate(dateStr: Date | string | null | undefined): string;
+/**
+ * Format short date for compact displays (e.g., date range picker).
+ */
+export declare function formatShortDate(dateStr: Date | string | null | undefined): string;
+/**
+ * Format last activity time for agent cards.
+ * Shows "Just now", "Xm ago", "Xh ago", or "Xd ago".
+ */
+export declare function formatLastActivity(timestamp: Date | string | null | undefined): string;
+/**
+ * Format date for display (simple locale string).
+ */
+export declare function formatDate(dateString: Date | string | null | undefined): string;
+/**
+ * Get milliseconds since timestamp (for calculations).
+ */
+export declare function getTimeSinceMs(timestamp: Date | string | null | undefined): number;
+/**
+ * Get minutes since timestamp.
+ */
+export declare function getTimeSinceMinutes(timestamp: Date | string | null | undefined): number;
+/**
+ * Check if timestamp is within a given number of minutes.
+ */
+export declare function isWithinMinutes(timestamp: Date | string | null | undefined, minutes: number): boolean;
+/**
+ * Format date + time for detail views (e.g. "Jan 5, 2:30 PM").
+ * No year — use formatFullDate when year is needed.
+ */
+export declare function formatDateTime(dateStr: Date | string | null | undefined): string;
+/**
+ * Color-coded relative age for task rows.
+ * Returns a label (e.g. "3d", "2w") and an oklch color string
+ * that shifts from green (fresh) → blue → amber → orange → red (stale).
+ *
+ * Usage:
+ *   const age = taskAge(task.created_at)
+ *   // <span style="color: {age.color}">{age.label}</span>
+ */
+export declare function taskAge(dateStr: string): {
+    label: string;
+    color: string;
+};