@object-ui/app-shell 6.0.4 → 6.2.0

package/dist/views/metadata-admin/widgets.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Built-in widget renderers for SchemaForm.
+ *
+ * These cover the common widget hints declared in spec `*.form.ts`
+ * files (e.g. `widget: 'ref:object'`, `widget: 'master-detail'`).
+ *
+ * Each widget receives `WidgetProps`:
+ *   - schema     — the JSONSchema fragment for THIS field (so widgets
+ *                  for nested arrays can read items.properties)
+ *   - value      — the current value
+ *   - onChange   — write-back callback
+ *   - readOnly   — disable
+ *   - context    — out-of-band data (object list, ObjectQL fields, …)
+ *
+ * To register a new widget, add an entry to `WIDGETS` below. To wire
+ * extra context (e.g. a fields list), extend `WidgetContext` in
+ * SchemaForm.tsx and prefetch it in ResourceEditPage.
+ */
+import * as React from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Input, Button, } from '@object-ui/components';
+import { Plus, Trash2 } from 'lucide-react';
+/* -------------------------------------------------------------------------- */
+/* ref:object — pick an object by name                                        */
+/* -------------------------------------------------------------------------- */
+function RefObjectWidget({ id, value, onChange, readOnly, context, }) {
+    const names = context?.objectNames ?? [];
+    const v = value == null ? '' : String(value);
+    if (context?.objectsLoading) {
+        return (_jsx(Input, { id: id, value: v, disabled: true, placeholder: "Loading objects\u2026" }));
+    }
+    // If list is empty (e.g. no objects defined yet), fall back to a
+    // freeform text input so the user can still type a value.
+    if (names.length === 0) {
+        return (_jsx(Input, { id: id, value: v, disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), placeholder: "object_name (no objects detected)" }));
+    }
+    return (_jsxs(Select, { value: v, onValueChange: (next) => onChange(next || undefined), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select object\u2026" }) }), _jsx(SelectContent, { children: names.map((n) => (_jsx(SelectItem, { value: n, children: n }, n))) })] }));
+}
+/* -------------------------------------------------------------------------- */
+/* object-selector — multi-select object picker                               */
+/* -------------------------------------------------------------------------- */
+function ObjectSelectorWidget({ id, value, onChange, readOnly, context, fieldSpec, }) {
+    const names = context?.objectNames ?? [];
+    const multiple = fieldSpec?.multiple ?? false;
+    // Parse value: string[], string (comma-separated), or empty
+    const selectedValues = React.useMemo(() => {
+        if (!value)
+            return [];
+        if (Array.isArray(value))
+            return value.map(String);
+        return String(value).split(',').map(s => s.trim()).filter(Boolean);
+    }, [value]);
+    const handleToggle = (objName) => {
+        if (readOnly)
+            return;
+        if (!multiple) {
+            onChange(objName);
+            return;
+        }
+        const newSelection = selectedValues.includes(objName)
+            ? selectedValues.filter(v => v !== objName)
+            : [...selectedValues, objName];
+        onChange(newSelection);
+    };
+    const handleRemove = (objName) => {
+        if (readOnly)
+            return;
+        const newSelection = selectedValues.filter(v => v !== objName);
+        onChange(multiple ? newSelection : '');
+    };
+    if (context?.objectsLoading) {
+        return _jsx(Input, { id: id, value: "Loading objects...", readOnly: true, disabled: true });
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map(obj => (_jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-1 text-sm", children: [_jsx("span", { children: obj }), !readOnly && (_jsx("button", { type: "button", onClick: () => handleRemove(obj), className: "text-muted-foreground hover:text-foreground", children: "\u00D7" }))] }, obj))) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || names.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? "Add objects..." : "Select object..." }) }), _jsx(SelectContent, { children: names.map(name => (_jsxs(SelectItem, { value: name, disabled: !multiple && selectedValues.includes(name), children: [name, selectedValues.includes(name) && ' ✓'] }, name))) })] })] }));
+}
+/* -------------------------------------------------------------------------- */
+/* field-selector — smart field picker (depends on selected object)          */
+/* -------------------------------------------------------------------------- */
+function FieldSelectorWidget({ id, value, onChange, readOnly, fieldSpec, formData, }) {
+    const [fields, setFields] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    // Resolve dependency: fieldSpec.dependsOn or fieldSpec.reference or 'objectName'
+    const dependsOnRaw = fieldSpec?.dependsOn || fieldSpec?.reference || 'objectName';
+    const dependsOnField = Array.isArray(dependsOnRaw) ? dependsOnRaw[0] : dependsOnRaw;
+    const objectName = formData?.[dependsOnField];
+    // Load fields when objectName changes
+    React.useEffect(() => {
+        if (!objectName) {
+            setFields([]);
+            return;
+        }
+        setLoading(true);
+        fetch(`/api/v1/objects/${objectName}/fields`)
+            .then(r => r.json())
+            .then(data => {
+            setFields(data.fields || []);
+            setLoading(false);
+        })
+            .catch(err => {
+            console.error('Failed to load fields:', err);
+            setFields([]);
+            setLoading(false);
+        });
+    }, [objectName]);
+    const multiple = fieldSpec?.multiple ?? false;
+    // Parse value
+    const selectedValues = React.useMemo(() => {
+        if (!value)
+            return [];
+        if (Array.isArray(value))
+            return value.map(String);
+        return String(value).split(',').map(s => s.trim()).filter(Boolean);
+    }, [value]);
+    const handleToggle = (fieldName) => {
+        if (readOnly)
+            return;
+        if (!multiple) {
+            onChange(fieldName);
+            return;
+        }
+        const newSelection = selectedValues.includes(fieldName)
+            ? selectedValues.filter(v => v !== fieldName)
+            : [...selectedValues, fieldName];
+        onChange(newSelection);
+    };
+    const handleRemove = (fieldName) => {
+        if (readOnly)
+            return;
+        const newSelection = selectedValues.filter(v => v !== fieldName);
+        onChange(multiple ? newSelection : '');
+    };
+    if (!objectName) {
+        return _jsx(Input, { id: id, value: "(Select an object first)", readOnly: true, disabled: true });
+    }
+    if (loading) {
+        return _jsx(Input, { id: id, value: "Loading fields...", readOnly: true, disabled: true });
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map(field => {
+                    const fieldMeta = fields.find(f => f.name === field);
+                    return (_jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-1 text-sm", children: [_jsx("span", { children: fieldMeta?.label || field }), _jsx("code", { className: "text-xs text-muted-foreground", children: fieldMeta?.type }), !readOnly && (_jsx("button", { type: "button", onClick: () => handleRemove(field), className: "text-muted-foreground hover:text-foreground", children: "\u00D7" }))] }, field));
+                }) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || fields.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? "Add fields..." : "Select field..." }) }), _jsx(SelectContent, { children: fields.map(f => (_jsx(SelectItem, { value: f.name, disabled: !multiple && selectedValues.includes(f.name), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: f.label || f.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: f.type }), selectedValues.includes(f.name) && ' ✓'] }) }, f.name))) })] })] }));
+}
+/* -------------------------------------------------------------------------- */
+/* master-detail — inline row editor for array-of-object fields               */
+/* -------------------------------------------------------------------------- */
+function MasterDetailWidget({ schema, value, onChange, readOnly, context, }) {
+    // Unwrap anyOf/oneOf: pick the first array-of-object branch.
+    let resolved = schema;
+    if (resolved?.anyOf || resolved?.oneOf) {
+        const branches = (resolved.anyOf ?? resolved.oneOf);
+        const objBranch = branches.find((b) => b?.type === 'array' && b?.items?.type === 'object');
+        if (objBranch)
+            resolved = { ...resolved, ...objBranch };
+    }
+    const items = (resolved?.items ?? {});
+    const itemProps = (items.properties ?? {});
+    const required = new Set(Array.isArray(items.required) ? items.required : []);
+    const rows = Array.isArray(value) ? value : [];
+    const cols = Object.keys(itemProps);
+    if (cols.length === 0) {
+        // Falls back to JSON if the array items aren't a typed object.
+        return (_jsxs("div", { className: "rounded border border-dashed border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-300", children: ["master-detail widget requires ", _jsx("code", { children: "items.properties" }), " on the JSON schema (or an ", _jsx("code", { children: "anyOf" }), " branch that has them)."] }));
+    }
+    function updateRow(idx, patch) {
+        const next = rows.slice();
+        next[idx] = { ...(next[idx] ?? {}), ...patch };
+        onChange(next);
+    }
+    function addRow() {
+        onChange([...rows, {}]);
+    }
+    function removeRow(idx) {
+        const next = rows.slice();
+        next.splice(idx, 1);
+        onChange(next);
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded border border-border/40", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [cols.map((c) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium text-muted-foreground", children: [itemProps[c]?.title ?? c, required.has(c) && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }, c))), _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: cols.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "No rows. Click + to add." }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30", children: [cols.map((c) => (_jsx("td", { className: "p-1", children: _jsx(RowCell, { schema: itemProps[c], value: (row ?? {})[c], readOnly: readOnly, context: context, onChange: (v) => updateRow(idx, { [c]: v }) }) }, c))), _jsx("td", { className: "p-1 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeRow(idx), disabled: readOnly, className: "h-7 w-7 p-0", "aria-label": "Remove row", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, idx)))] })] }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, disabled: readOnly, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add row"] })] }));
+}
+function RowCell({ schema, value, readOnly, context, onChange, }) {
+    // ref:object hint inside a row cell
+    if (schema?.widget === 'ref:object') {
+        return (_jsx(RefObjectWidget, { schema: schema, value: value, onChange: onChange, readOnly: readOnly, context: context }));
+    }
+    // enum → dropdown
+    const enumVals = schema?.enum;
+    if (Array.isArray(enumVals) && enumVals.length > 0) {
+        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v || undefined), disabled: readOnly, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, { placeholder: "\u2014" }) }), _jsx(SelectContent, { children: enumVals.map((o) => (_jsx(SelectItem, { value: String(o), children: String(o) }, String(o)))) })] }));
+    }
+    // boolean → checkbox-ish
+    if (schema?.type === 'boolean') {
+        return (_jsx("input", { type: "checkbox", checked: !!value, disabled: readOnly, onChange: (e) => onChange(e.target.checked), className: "h-4 w-4" }));
+    }
+    // number
+    if (schema?.type === 'number' || schema?.type === 'integer') {
+        return (_jsx(Input, { type: "number", value: value == null ? '' : String(value), disabled: readOnly, onChange: (e) => {
+                const n = e.target.valueAsNumber;
+                onChange(Number.isFinite(n) ? n : undefined);
+            }, className: "h-8 text-xs" }));
+    }
+    // default: text
+    return (_jsx(Input, { value: value == null ? '' : String(value), disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), className: "h-8 text-xs" }));
+}
+/* -------------------------------------------------------------------------- */
+/* string-tags — chip input for string[] (e.g. searchableFields)              */
+/* -------------------------------------------------------------------------- */
+function StringTagsWidget({ id, value, onChange, readOnly, }) {
+    const tags = Array.isArray(value) ? value : [];
+    const [draft, setDraft] = React.useState('');
+    function add(raw) {
+        const parts = raw
+            .split(/[,\n]/)
+            .map((s) => s.trim())
+            .filter(Boolean);
+        if (parts.length === 0)
+            return;
+        const next = [...tags];
+        for (const p of parts)
+            if (!next.includes(p))
+                next.push(p);
+        onChange(next);
+        setDraft('');
+    }
+    function remove(idx) {
+        const next = tags.slice();
+        next.splice(idx, 1);
+        onChange(next);
+    }
+    return (_jsx("div", { className: "rounded border border-input bg-background p-1.5", children: _jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [tags.map((t, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "font-mono", children: t }), !readOnly && (_jsx("button", { type: "button", "aria-label": `Remove ${t}`, onClick: () => remove(i), className: "text-muted-foreground hover:text-destructive", children: "\u00D7" }))] }, i))), _jsx("input", { id: id, type: "text", value: draft, disabled: readOnly, placeholder: tags.length === 0 ? 'Type and press Enter…' : '', onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ',') {
+                            e.preventDefault();
+                            add(draft);
+                        }
+                        else if (e.key === 'Backspace' && !draft && tags.length > 0) {
+                            remove(tags.length - 1);
+                        }
+                    }, onBlur: () => draft && add(draft), className: "min-w-[8rem] flex-1 bg-transparent text-sm outline-none" })] }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* registry                                                                   */
+/* -------------------------------------------------------------------------- */
+export const WIDGETS = {
+    'ref:object': RefObjectWidget,
+    'object-selector': ObjectSelectorWidget,
+    'field-selector': FieldSelectorWidget,
+    'master-detail': MasterDetailWidget,
+    'string-tags': StringTagsWidget,
+    'code': CodeWidget,
+    // Reasonable fallbacks until dedicated builders ship:
+    'filter-builder': MasterDetailWidget,
+};
+/* -------------------------------------------------------------------------- */
+/* CodeWidget — Monaco editor for `type: 'code'` fields                       */
+/* -------------------------------------------------------------------------- */
+/**
+ * Infer language from fieldSpec.language → schema.format → field name.
+ */
+function inferCodeLanguage(fieldSpec, schema) {
+    if (fieldSpec?.language)
+        return fieldSpec.language;
+    if (typeof schema?.format === 'string') {
+        const f = schema.format.toLowerCase();
+        if (f === 'sql' || f === 'javascript' || f === 'typescript' || f === 'json' || f === 'yaml' || f === 'html' || f === 'css' || f === 'python')
+            return f;
+    }
+    // Common hook/action field name heuristics
+    const name = fieldSpec?.field?.toLowerCase() ?? '';
+    if (name.includes('sql') || name === 'query')
+        return 'sql';
+    if (name === 'source' || name === 'body' || name === 'script' || name === 'handler')
+        return 'javascript';
+    if (name === 'expression' || name === 'predicate' || name === 'formula' || name === 'condition')
+        return 'javascript';
+    return 'javascript';
+}
+const LazyCodeEditor = React.lazy(() => import('@object-ui/plugin-editor').then((m) => ({ default: m.CodeEditorRenderer })));
+export function CodeWidget({ schema, value, onChange, readOnly, fieldSpec, }) {
+    const language = inferCodeLanguage(fieldSpec, schema);
+    const stringValue = typeof value === 'string' ? value : (value == null ? '' : String(value));
+    return (_jsxs("div", { className: "rounded-md border border-border/50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-2 py-1 bg-muted/40 border-b border-border/30 text-[10px] font-mono text-muted-foreground", children: [_jsx("span", { children: language }), readOnly && _jsx("span", { children: "read-only" })] }), _jsx(React.Suspense, { fallback: _jsx("div", { className: "h-[280px] flex items-center justify-center text-xs text-muted-foreground", children: "Loading editor\u2026" }), children: _jsx(LazyCodeEditor, { schema: {
+                        type: 'code',
+                        language,
+                        theme: 'vs-dark',
+                        height: '280px',
+                        readOnly,
+                    }, value: stringValue, onChange: (v) => onChange(v ?? '') }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "6.0.4",
+  "version": "6.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -25,42 +25,43 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@sentry/react": "^8.55.2",
+    "@sentry/react": "^10.53.1",
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "6.0.4",
-    "@object-ui/collaboration": "6.0.4",
-    "@object-ui/components": "6.0.4",
-    "@object-ui/core": "6.0.4",
-    "@object-ui/data-objectstack": "6.0.4",
-    "@object-ui/fields": "6.0.4",
-    "@object-ui/i18n": "6.0.4",
-    "@object-ui/layout": "6.0.4",
-    "@object-ui/permissions": "6.0.4",
-    "@object-ui/providers": "6.0.4",
-    "@object-ui/react": "6.0.4",
-    "@object-ui/types": "6.0.4"
+    "@object-ui/auth": "6.2.0",
+    "@object-ui/collaboration": "6.2.0",
+    "@object-ui/components": "6.2.0",
+    "@object-ui/plugin-editor": "6.2.0",
+    "@object-ui/core": "6.2.0",
+    "@object-ui/data-objectstack": "6.2.0",
+    "@object-ui/fields": "6.2.0",
+    "@object-ui/i18n": "6.2.0",
+    "@object-ui/layout": "6.2.0",
+    "@object-ui/permissions": "6.2.0",
+    "@object-ui/providers": "6.2.0",
+    "@object-ui/react": "6.2.0",
+    "@object-ui/types": "6.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^6.0.4",
-    "@object-ui/plugin-charts": "^6.0.4",
-    "@object-ui/plugin-chatbot": "^6.0.4",
-    "@object-ui/plugin-dashboard": "^6.0.4",
-    "@object-ui/plugin-designer": "^6.0.4",
-    "@object-ui/plugin-detail": "^6.0.4",
-    "@object-ui/plugin-form": "^6.0.4",
-    "@object-ui/plugin-grid": "^6.0.4",
-    "@object-ui/plugin-kanban": "^6.0.4",
-    "@object-ui/plugin-list": "^6.0.4",
-    "@object-ui/plugin-report": "^6.0.4",
-    "@object-ui/plugin-view": "^6.0.4"
+    "@object-ui/plugin-calendar": "^6.2.0",
+    "@object-ui/plugin-charts": "^6.2.0",
+    "@object-ui/plugin-chatbot": "^6.2.0",
+    "@object-ui/plugin-dashboard": "^6.2.0",
+    "@object-ui/plugin-designer": "^6.2.0",
+    "@object-ui/plugin-detail": "^6.2.0",
+    "@object-ui/plugin-form": "^6.2.0",
+    "@object-ui/plugin-grid": "^6.2.0",
+    "@object-ui/plugin-kanban": "^6.2.0",
+    "@object-ui/plugin-list": "^6.2.0",
+    "@object-ui/plugin-report": "^6.2.0",
+    "@object-ui/plugin-view": "^6.2.0"
   },
   "devDependencies": {
-    "@types/node": "^25.9.0",
-    "@types/react": "19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
     "react": "19.2.6",
     "react-dom": "19.2.6",