@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/previews/JobPreview.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * JobPreview — read-only summary of a Background Job draft.
+ *
+ * Canonical shape (see `packages/spec/src/system/job.zod.ts`):
+ *   schedule: { type: 'cron',     expression: string | { dialect:'cron', source:string }, timezone? }
+ *           | { type: 'interval', intervalMs: number }
+ *           | { type: 'once',     at: string (ISO) }
+ *   handler: string         — function key registered in defineStack({ functions })
+ *   retryPolicy?: { maxRetries, backoffMs, backoffMultiplier }
+ *   timeout?: number (ms)
+ *   enabled?: boolean
+ *
+ * Legacy / app-supplied flat shapes are also tolerated:
+ *   • `cron` (string)        — top-level cron expression
+ *   • `every` / `interval`   — interval like "5m" or millis number
+ *   • `at` / `runAs`         — one-shot ISO
+ *   • `timezone` / `tz`
+ *   • `active` / `enabled`
+ *
+ * For cron schedules we compute the **next 5 fire times** locally so
+ * operators can sanity-check the schedule without waiting for the
+ * runtime. The cron parser handles standard 5-field cron with `*`,
+ * `*\/N`, comma lists, and ranges (`a-b`). Special tokens like
+ * `@daily` / `@hourly` are also expanded.
+ */
+import * as React from 'react';
+import { AlarmClock, Calendar, Clock, Code2, Globe2, PlayCircle, Power, RotateCcw, Timer, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+const CRON_ALIASES = {
+    '@yearly': '0 0 1 1 *',
+    '@annually': '0 0 1 1 *',
+    '@monthly': '0 0 1 * *',
+    '@weekly': '0 0 * * 0',
+    '@daily': '0 0 * * *',
+    '@midnight': '0 0 * * *',
+    '@hourly': '0 * * * *',
+};
+function parseCronField(raw, min, max) {
+    const out = { values: new Set(), any: false };
+    if (raw === '*') {
+        for (let i = min; i <= max; i++)
+            out.values.add(i);
+        out.any = true;
+        return out;
+    }
+    for (const part of raw.split(',')) {
+        let stepStr;
+        let body = part;
+        if (part.includes('/')) {
+            const [b, s] = part.split('/');
+            body = b;
+            stepStr = s;
+        }
+        const step = stepStr ? Math.max(1, parseInt(stepStr, 10) || 1) : 1;
+        let lo = min;
+        let hi = max;
+        if (body !== '*') {
+            if (body.includes('-')) {
+                const [a, b] = body.split('-').map((n) => parseInt(n, 10));
+                if (Number.isNaN(a) || Number.isNaN(b))
+                    return null;
+                lo = a;
+                hi = b;
+            }
+            else {
+                const v = parseInt(body, 10);
+                if (Number.isNaN(v))
+                    return null;
+                lo = v;
+                hi = v;
+            }
+        }
+        for (let i = lo; i <= hi; i += step) {
+            if (i >= min && i <= max)
+                out.values.add(i);
+        }
+    }
+    return out;
+}
+function parseCron(expr) {
+    const aliased = CRON_ALIASES[expr.trim()] ?? expr.trim();
+    const parts = aliased.split(/\s+/);
+    if (parts.length !== 5 && parts.length !== 6)
+        return null;
+    // Strip optional 6th seconds field — we ignore second-resolution for preview.
+    const fields = parts.length === 6 ? parts.slice(1) : parts;
+    const [m, h, dom, mon, dow] = fields;
+    const minute = parseCronField(m, 0, 59);
+    const hour = parseCronField(h, 0, 23);
+    const domF = parseCronField(dom, 1, 31);
+    const month = parseCronField(mon, 1, 12);
+    const dowF = parseCronField(dow === '7' ? '0' : dow, 0, 6);
+    if (!minute || !hour || !domF || !month || !dowF)
+        return null;
+    return { minute, hour, dom: domF, month, dow: dowF };
+}
+function nextCronFires(expr, from, count) {
+    const cron = parseCron(expr);
+    if (!cron)
+        return [];
+    const results = [];
+    // Walk minute by minute up to ~366 days; bail early once we hit count.
+    const cursor = new Date(from.getTime());
+    cursor.setSeconds(0, 0);
+    cursor.setMinutes(cursor.getMinutes() + 1);
+    const limitMs = 366 * 24 * 60 * 60 * 1000;
+    const endAt = from.getTime() + limitMs;
+    while (results.length < count && cursor.getTime() <= endAt) {
+        if (cron.minute.values.has(cursor.getMinutes()) &&
+            cron.hour.values.has(cursor.getHours()) &&
+            cron.month.values.has(cursor.getMonth() + 1) &&
+            // POSIX cron OR semantics: when both DOM and DOW are restricted,
+            // a match in EITHER triggers; when one is `*`, the other governs.
+            (cron.dom.any || cron.dow.any
+                ? cron.dom.values.has(cursor.getDate()) && cron.dow.values.has(cursor.getDay())
+                : cron.dom.values.has(cursor.getDate()) || cron.dow.values.has(cursor.getDay()))) {
+            results.push(new Date(cursor.getTime()));
+        }
+        cursor.setMinutes(cursor.getMinutes() + 1);
+    }
+    return results;
+}
+function parseInterval(every) {
+    const m = /^(\d+)\s*(ms|s|m|h|d)$/.exec(every.trim());
+    if (!m)
+        return null;
+    const n = parseInt(m[1], 10);
+    switch (m[2]) {
+        case 'ms':
+            return n;
+        case 's':
+            return n * 1000;
+        case 'm':
+            return n * 60000;
+        case 'h':
+            return n * 3600000;
+        case 'd':
+            return n * 86400000;
+        default:
+            return null;
+    }
+}
+function nextIntervalFires(intervalMs, from, count) {
+    const out = [];
+    for (let i = 1; i <= count; i++)
+        out.push(new Date(from.getTime() + i * intervalMs));
+    return out;
+}
+function formatWhen(d) {
+    return d.toLocaleString(undefined, {
+        weekday: 'short',
+        month: 'short',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/**
+ * Normalize the canonical Schedule discriminated-union and legacy flat
+ * shapes into `{ cron?, every?, at?, timezone? }` for rendering.
+ *
+ * Supports:
+ *   • d.schedule = { type:'cron',     expression: string | {source}, timezone? }
+ *   • d.schedule = { type:'interval', intervalMs: number }
+ *   • d.schedule = { type:'once',     at: string }
+ *   • d.schedule = "0 9 * * 1-5"     (legacy: string cron)
+ *   • d.cron / d.every / d.interval / d.at / d.runAt / d.timezone / d.tz
+ */
+function normalizeSchedule(d) {
+    // Canonical discriminated-union schedule object.
+    if (d.schedule && typeof d.schedule === 'object') {
+        const s = d.schedule;
+        const t = String(s.type ?? '');
+        const tz = s.timezone ?? d.timezone ?? d.tz;
+        if (t === 'cron') {
+            const expr = s.expression;
+            const src = typeof expr === 'string'
+                ? expr
+                : expr && typeof expr === 'object' && typeof expr.source === 'string'
+                    ? expr.source
+                    : undefined;
+            return { cron: src, timezone: tz };
+        }
+        if (t === 'interval') {
+            const ms = Number(s.intervalMs);
+            return { every: Number.isFinite(ms) && ms > 0 ? humanizeMs(ms) : undefined, timezone: tz };
+        }
+        if (t === 'once') {
+            return { at: typeof s.at === 'string' ? s.at : undefined, timezone: tz };
+        }
+    }
+    // Flat legacy shapes.
+    const cron = typeof d.cron === 'string'
+        ? d.cron
+        : typeof d.schedule === 'string'
+            ? d.schedule
+            : undefined;
+    const everyRaw = d.every ?? d.interval;
+    const every = typeof everyRaw === 'string'
+        ? everyRaw
+        : typeof everyRaw === 'number'
+            ? humanizeMs(everyRaw)
+            : undefined;
+    const at = typeof d.at === 'string' ? d.at : typeof d.runAt === 'string' ? d.runAt : undefined;
+    const timezone = d.timezone ?? d.tz;
+    return { cron, every, at, timezone };
+}
+function humanizeMs(ms) {
+    if (ms % 86400000 === 0)
+        return `${ms / 86400000}d`;
+    if (ms % 3600000 === 0)
+        return `${ms / 3600000}h`;
+    if (ms % 60000 === 0)
+        return `${ms / 60000}m`;
+    if (ms % 1000 === 0)
+        return `${ms / 1000}s`;
+    return `${ms}ms`;
+}
+export function JobPreview({ name, draft }) {
+    const d = draft;
+    const jobName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? jobName);
+    const description = d.description ?? '';
+    const { cron, every, at, timezone } = normalizeSchedule(d);
+    const handler = d.handler
+        ?? d.target
+        ?? d.function
+        ?? d.functionName;
+    const active = d.active !== false && d.enabled !== false;
+    // Canonical: retryPolicy.{maxRetries,backoffMs,backoffMultiplier}; legacy: flat fields.
+    const retryPolicy = d.retryPolicy;
+    const maxRetries = retryPolicy?.maxRetries
+        ?? d.maxRetries
+        ?? d.retries;
+    const backoffMs = retryPolicy?.backoffMs;
+    const timeoutMs = d.timeout ?? d.timeoutMs;
+    const concurrency = d.concurrency;
+    const intervalMs = every ? parseInterval(every) : null;
+    const { nextFires, deltas } = React.useMemo(() => {
+        const now = new Date();
+        let fires = [];
+        if (cron)
+            fires = nextCronFires(cron, now, 5);
+        else if (intervalMs)
+            fires = nextIntervalFires(intervalMs, now, 5);
+        else if (at) {
+            const t = Date.parse(at);
+            if (!Number.isNaN(t))
+                fires = [new Date(t)];
+        }
+        return {
+            nextFires: fires,
+            deltas: fires.map((f) => humanDelta(f.getTime() - now.getTime())),
+        };
+    }, [cron, intervalMs, at]);
+    const scheduleInvalid = (cron && nextFires.length === 0) || (every && !intervalMs);
+    if (!jobName && !cron && !every && !at && !handler) {
+        return (_jsx(PreviewShell, { hint: "job", children: _jsx(PreviewMessage, { children: "Set a schedule (cron / every / at) and a handler to see the job preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: "job", children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlarmClock, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: jobName })] }), description && _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsx(Pill, { icon: Power, label: active ? 'Active' : 'Paused', tone: active ? 'green' : 'gray' }), timezone && _jsx(Pill, { icon: Globe2, label: timezone, mono: true }), maxRetries != null && _jsx(Pill, { icon: RotateCcw, label: `retries: ${maxRetries}${backoffMs ? ` (${humanizeMs(backoffMs)} backoff)` : ''}` }), timeoutMs != null && _jsx(Pill, { icon: Timer, label: `timeout: ${humanizeMs(timeoutMs)}` }), concurrency != null && _jsx(Pill, { label: `concurrency: ${concurrency}` })] })] })] }) }), _jsx(Section, { title: "Schedule", icon: Calendar, children: _jsxs("div", { className: "rounded border bg-background p-2.5 text-xs space-y-1", children: [cron && (_jsx(ScheduleLine, { label: "Cron", children: _jsx("code", { className: "font-mono", children: cron }) })), every && (_jsxs(ScheduleLine, { label: "Every", children: [_jsx("code", { className: "font-mono", children: every }), !intervalMs && _jsx("span", { className: "ml-2 text-amber-700", children: "unparseable" })] })), at && (_jsx(ScheduleLine, { label: "At", children: _jsx("code", { className: "font-mono", children: at }) })), !cron && !every && !at && (_jsx("div", { className: "text-muted-foreground italic", children: "No schedule set \u2014 runs only when triggered manually." }))] }) }), (cron || intervalMs || at) && (_jsx(Section, { title: `Next ${Math.max(nextFires.length, 1)} run${nextFires.length === 1 ? '' : 's'}`, icon: Clock, children: nextFires.length === 0 ? (_jsx("div", { className: "text-xs text-amber-700", children: scheduleInvalid
+                                ? 'Could not derive any future fire time. Check the schedule syntax.'
+                                : 'No upcoming runs in the next 366 days.' })) : (_jsx("ul", { className: "rounded border bg-background divide-y text-xs", children: nextFires.map((d, i) => (_jsxs("li", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [_jsx("span", { className: "w-4 text-right text-muted-foreground text-[10px]", children: i + 1 }), _jsx(Clock, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: "font-mono", children: formatWhen(d) }), _jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground", children: ["in ", deltas[i]] })] }, i))) })) })), _jsx(Section, { title: "Handler", icon: Code2, children: handler ? (_jsxs("div", { className: "rounded border bg-background px-2.5 py-1.5 text-xs flex items-center gap-2", children: [_jsx(PlayCircle, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("code", { className: "font-mono break-all", children: handler })] })) : (_jsx("div", { className: "text-xs text-amber-700", children: "No handler bound \u2014 the job will be a no-op." })) })] }) }) }));
+}
+function humanDelta(ms) {
+    if (ms <= 0)
+        return 'now';
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return `${s}s`;
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return `${m}m`;
+    const h = Math.round(m / 60);
+    if (h < 48)
+        return `${h}h`;
+    const days = Math.round(h / 24);
+    return `${days}d`;
+}
+function ScheduleLine({ label, children }) {
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-muted-foreground w-12 shrink-0", children: [label, ":"] }), _jsx("span", { className: "break-all", children: children })] }));
+}
+function Section({ title, icon: Icon, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [Icon && _jsx(Icon, { className: "h-3 w-3" }), _jsx("span", { children: title })] }), children] }));
+}
+function Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green' ? 'text-emerald-700' : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: `${cls} ${mono ? 'font-mono' : ''}`, children: label })] }));
+}

package/dist/views/metadata-admin/previews/ObjectFormCanvas.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectFormCanvas — form-designer-style preview for an Object
+ * metadata draft. Replaces the legacy CRUD grid in DesignerMode.
+ *
+ * Each field renders as the labeled input it will become at runtime
+ * (via {@link FieldStub}). Clicking a row selects it and the host
+ * swaps the inspector to {@link ObjectFieldInspector}. The trailing
+ * "+ Add field" button opens a categorized type picker — picking a
+ * type appends a fresh field and immediately selects it so authors
+ * can fill in name/label in the inspector.
+ *
+ * All edits go through the host's `onPatch` callback. Read-only
+ * surfaces (legacy tier objects, builtin objects) still render the
+ * preview but suppress selection chrome + the add button.
+ */
+import * as React from 'react';
+import type { MetadataSelection } from '../preview-registry';
+import { toFieldName } from './object-fields-io';
+export interface ObjectFormCanvasProps {
+    objectName: string;
+    draft: Record<string, unknown>;
+    /** Last published version, for the review/diff mode. */
+    baseline?: Record<string, unknown>;
+    onPatch?: (patch: Record<string, unknown>) => void;
+    selection?: MetadataSelection | null;
+    onSelectionChange?: (next: MetadataSelection | null) => void;
+    locale?: string;
+}
+export declare function ObjectFormCanvas({ objectName, draft, baseline, onPatch, selection, onSelectionChange, locale, }: ObjectFormCanvasProps): React.JSX.Element;
+export { toFieldName };