@object-ui/app-shell 3.3.0 → 3.3.1

package/dist/skeletons/SkeletonDetail.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SkeletonDetail
+ *
+ * Skeleton loading placeholder for record detail views.
+ * Renders animated pulse fields that mimic a detail form layout.
+ * @module
+ */
+import { Skeleton } from '@object-ui/components';
+export function SkeletonDetail({ fields = 8, columns = 2 }) {
+    return (_jsxs("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-8 w-8 rounded" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-6 w-48" }), _jsx(Skeleton, { className: "h-4 w-32" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-9 w-20" }), _jsx(Skeleton, { className: "h-9 w-20" })] })] }), _jsx(Skeleton, { className: "h-5 w-24" }), _jsx("div", { className: `grid grid-cols-1 ${columns === 2 ? 'md:grid-cols-2' : ''} gap-4`, children: Array.from({ length: fields }).map((_, i) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-9 w-full" })] }, `field-${i}`))) }), _jsxs("div", { className: "space-y-3 pt-4 border-t", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 py-2", children: [_jsx(Skeleton, { className: "h-8 w-8 rounded-full" }), _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] }, `related-${i}`))) })] })] }));
+}

package/dist/skeletons/SkeletonGrid.d.ts

@@ -0,0 +1,15 @@
+/**
+ * SkeletonGrid
+ *
+ * Skeleton loading placeholder for grid/table views.
+ * Renders animated pulse rows that mimic a data table layout.
+ * @module
+ */
+interface SkeletonGridProps {
+    /** Number of skeleton rows to render */
+    rows?: number;
+    /** Number of columns to render */
+    columns?: number;
+}
+export declare function SkeletonGrid({ rows, columns }: SkeletonGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/skeletons/SkeletonGrid.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SkeletonGrid
+ *
+ * Skeleton loading placeholder for grid/table views.
+ * Renders animated pulse rows that mimic a data table layout.
+ * @module
+ */
+import { Skeleton } from '@object-ui/components';
+export function SkeletonGrid({ rows = 8, columns = 5 }) {
+    return (_jsxs("div", { className: "w-full space-y-4 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-9 w-48" }), _jsx(Skeleton, { className: "h-9 w-24" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-9 w-9" }), _jsx(Skeleton, { className: "h-9 w-9" })] })] }), _jsxs("div", { className: "rounded-md border", children: [_jsx("div", { className: "flex items-center gap-4 border-b px-4 py-3 bg-muted/30", children: Array.from({ length: columns }).map((_, i) => (_jsx(Skeleton, { className: "h-4 flex-1" }, `header-${i}`))) }), Array.from({ length: rows }).map((_, rowIdx) => (_jsx("div", { className: "flex items-center gap-4 border-b last:border-b-0 px-4 py-3", children: Array.from({ length: columns }).map((_, colIdx) => (_jsx(Skeleton, { className: `h-4 flex-1 ${colIdx === 0 ? 'max-w-[200px]' : ''}` }, `cell-${rowIdx}-${colIdx}`))) }, `row-${rowIdx}`)))] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-8 w-8" }), _jsx(Skeleton, { className: "h-8 w-8" }), _jsx(Skeleton, { className: "h-8 w-8" })] })] })] }));
+}

package/dist/skeletons/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonGrid } from './SkeletonGrid';
+export { SkeletonDashboard } from './SkeletonDashboard';
+export { SkeletonDetail } from './SkeletonDetail';

package/dist/skeletons/index.js

@@ -0,0 +1,3 @@
+export { SkeletonGrid } from './SkeletonGrid';
+export { SkeletonDashboard } from './SkeletonDashboard';
+export { SkeletonDetail } from './SkeletonDetail';

package/dist/utils/getIcon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Icon utilities
+ *
+ * Helpers for resolving Lucide icons by name.
+ */
+/**
+ * Resolve a Lucide icon by name (kebab-case or PascalCase)
+ * Falls back to Database icon if not found
+ */
+export declare function getIcon(name?: string): React.ElementType;

package/dist/utils/getIcon.js

@@ -0,0 +1,24 @@
+/**
+ * Icon utilities
+ *
+ * Helpers for resolving Lucide icons by name.
+ */
+import * as LucideIcons from 'lucide-react';
+import { Database } from 'lucide-react';
+/**
+ * Resolve a Lucide icon by name (kebab-case or PascalCase)
+ * Falls back to Database icon if not found
+ */
+export function getIcon(name) {
+    if (!name)
+        return Database;
+    if (LucideIcons[name])
+        return LucideIcons[name];
+    const pascal = name
+        .split('-')
+        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
+        .join('');
+    if (LucideIcons[pascal])
+        return LucideIcons[pascal];
+    return Database;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Utility functions for ObjectStack Console
+ */
+/**
+ * Resolves an I18nLabel to a plain string.
+ * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
+ * When it's an object and a `t` function is provided, it resolves the key
+ * through the i18n translation system. Otherwise returns defaultValue or key.
+ */
+export declare function resolveI18nLabel(label: string | {
+    key: string;
+    defaultValue?: string;
+    params?: Record<string, any>;
+} | undefined, t?: (key: string, options?: any) => string): string | undefined;
+/**
+ * Capitalize the first letter of a string.
+ * Preferred over CSS `capitalize` for i18n compatibility.
+ */
+export declare function capitalizeFirst(str: string): string;
+/**
+ * Format a record title using the titleFormat pattern
+ * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"
+ * @param record The record data object
+ * @returns Formatted title string
+ */
+export declare function formatRecordTitle(titleFormat: string | undefined, record: any): string;
+/**
+ * Get display name for a record using titleFormat or fallback
+ * @param objectDef Object definition with optional titleFormat
+ * @param record The record data
+ * @returns Display name for the record
+ */
+export declare function getRecordDisplayName(objectDef: any, record: any): string;

package/dist/utils/index.js

@@ -0,0 +1,62 @@
+/**
+ * Utility functions for ObjectStack Console
+ */
+/**
+ * Resolves an I18nLabel to a plain string.
+ * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
+ * When it's an object and a `t` function is provided, it resolves the key
+ * through the i18n translation system. Otherwise returns defaultValue or key.
+ */
+export function resolveI18nLabel(label, t) {
+    if (label === undefined || label === null)
+        return undefined;
+    if (typeof label === 'string')
+        return label;
+    if (t) {
+        const result = t(label.key, { defaultValue: label.defaultValue, ...label.params });
+        if (result && result !== label.key)
+            return result;
+    }
+    return label.defaultValue || label.key;
+}
+/**
+ * Capitalize the first letter of a string.
+ * Preferred over CSS `capitalize` for i18n compatibility.
+ */
+export function capitalizeFirst(str) {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Format a record title using the titleFormat pattern
+ * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"
+ * @param record The record data object
+ * @returns Formatted title string
+ */
+export function formatRecordTitle(titleFormat, record) {
+    if (!titleFormat || !record) {
+        return record?.id || record?._id || 'Record';
+    }
+    // Replace {fieldName} patterns with actual values
+    return titleFormat.replace(/\{(\w+)\}/g, (_match, fieldName) => {
+        const value = record[fieldName];
+        if (value === null || value === undefined) {
+            return '';
+        }
+        return String(value);
+    });
+}
+/**
+ * Get display name for a record using titleFormat or fallback
+ * @param objectDef Object definition with optional titleFormat
+ * @param record The record data
+ * @returns Display name for the record
+ */
+export function getRecordDisplayName(objectDef, record) {
+    if (objectDef?.titleFormat) {
+        return formatRecordTitle(objectDef.titleFormat, record);
+    }
+    // Fallback: Try common name fields
+    return record?.name || record?.title || record?.label || record?.id || record?._id || 'Untitled';
+}

package/dist/utils/metadataConverters.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Metadata Converters
+ *
+ * Shared conversion functions for transforming raw metadata API objects
+ * (from the ObjectStack spec) to the UI types used by ObjectManager and
+ * FieldDesigner components.
+ *
+ * Extracted from ObjectManagerPage to enable reuse across pages.
+ *
+ * @module utils/metadataConverters
+ */
+import type { ObjectDefinition, DesignerFieldDefinition } from '@object-ui/types';
+/** Loose shape of a metadata object definition from the ObjectStack API. */
+export interface MetadataObject {
+    name?: string;
+    label?: string | {
+        defaultValue?: string;
+        key?: string;
+    };
+    pluralLabel?: string;
+    plural_label?: string;
+    description?: string | {
+        defaultValue?: string;
+    };
+    icon?: string;
+    enabled?: boolean;
+    fields?: MetadataField[] | Record<string, MetadataField>;
+    relationships?: Array<{
+        object?: string;
+        relatedObject?: string;
+        type?: string;
+        label?: string;
+        name?: string;
+        foreign_key?: string;
+        foreignKey?: string;
+    }>;
+}
+/** Loose shape of a metadata field definition from the ObjectStack API. */
+export interface MetadataField {
+    name?: string;
+    label?: string | {
+        defaultValue?: string;
+        key?: string;
+    };
+    type?: string;
+    group?: string;
+    description?: string;
+    help?: string;
+    required?: boolean;
+    unique?: boolean;
+    readonly?: boolean;
+    hidden?: boolean;
+    defaultValue?: string;
+    default_value?: string;
+    placeholder?: string;
+    options?: Array<string | {
+        label?: string;
+        value: string;
+        color?: string;
+    }>;
+    externalId?: boolean;
+    trackHistory?: boolean;
+    track_history?: boolean;
+    indexed?: boolean;
+    reference_to?: string;
+    referenceTo?: string;
+    formula?: string;
+}
+/**
+ * Convert a metadata object definition (from the API/spec) to the ObjectDefinition
+ * type used by the ObjectManager component.
+ */
+export declare function toObjectDefinition(obj: MetadataObject, index: number): ObjectDefinition;
+/**
+ * Convert a metadata field definition to the DesignerFieldDefinition
+ * type used by the FieldDesigner component.
+ */
+export declare function toFieldDefinition(field: MetadataField, index: number): DesignerFieldDefinition;

package/dist/utils/metadataConverters.js

@@ -0,0 +1,74 @@
+/**
+ * Metadata Converters
+ *
+ * Shared conversion functions for transforming raw metadata API objects
+ * (from the ObjectStack spec) to the UI types used by ObjectManager and
+ * FieldDesigner components.
+ *
+ * Extracted from ObjectManagerPage to enable reuse across pages.
+ *
+ * @module utils/metadataConverters
+ */
+// ---------------------------------------------------------------------------
+// Converters
+// ---------------------------------------------------------------------------
+/**
+ * Convert a metadata object definition (from the API/spec) to the ObjectDefinition
+ * type used by the ObjectManager component.
+ */
+export function toObjectDefinition(obj, index) {
+    const fields = Array.isArray(obj.fields) ? obj.fields : Object.values(obj.fields || {});
+    return {
+        id: obj.name || `obj_${index}`,
+        name: obj.name || '',
+        label: typeof obj.label === 'object' ? obj.label.defaultValue || obj.label.key || '' : (obj.label || obj.name || ''),
+        pluralLabel: obj.pluralLabel || obj.plural_label || undefined,
+        description: typeof obj.description === 'object' ? obj.description.defaultValue : (obj.description || undefined),
+        icon: obj.icon || undefined,
+        group: obj.name?.startsWith('sys_') ? 'System Objects' : 'Custom Objects',
+        sortOrder: index,
+        isSystem: obj.name?.startsWith('sys_') || false,
+        enabled: obj.enabled !== false,
+        fieldCount: fields.length,
+        relationships: Array.isArray(obj.relationships)
+            ? obj.relationships.map((r) => ({
+                relatedObject: r.object || r.relatedObject || '',
+                type: (r.type || 'one-to-many'),
+                label: r.label || r.name || undefined,
+                foreignKey: r.foreign_key || r.foreignKey || undefined,
+            }))
+            : undefined,
+    };
+}
+/**
+ * Convert a metadata field definition to the DesignerFieldDefinition
+ * type used by the FieldDesigner component.
+ */
+export function toFieldDefinition(field, index) {
+    return {
+        id: field.name || `fld_${index}`,
+        name: field.name || '',
+        label: typeof field.label === 'object' ? field.label.defaultValue || field.label.key || '' : (field.label || field.name || ''),
+        type: (field.type || 'text'),
+        group: field.group || undefined,
+        sortOrder: index,
+        description: field.description || field.help || undefined,
+        required: field.required || false,
+        unique: field.unique || false,
+        readonly: field.readonly || false,
+        hidden: field.hidden || false,
+        defaultValue: field.defaultValue || field.default_value || undefined,
+        placeholder: field.placeholder || undefined,
+        options: Array.isArray(field.options)
+            ? field.options.map((opt) => typeof opt === 'string'
+                ? { label: opt, value: opt }
+                : { label: opt.label || opt.value, value: opt.value, color: opt.color })
+            : undefined,
+        isSystem: field.readonly === true && (field.name === 'id' || field.name === 'createdAt' || field.name === 'updatedAt'),
+        externalId: field.externalId || false,
+        trackHistory: field.trackHistory || field.track_history || false,
+        indexed: field.indexed || false,
+        referenceTo: field.reference_to || field.referenceTo || undefined,
+        formula: field.formula || undefined,
+    };
+}

package/dist/views/ActionConfirmDialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ActionConfirmDialog — Promise-based confirmation dialog for action execution.
+ *
+ * Uses Shadcn AlertDialog to replace window.confirm with a styled, accessible
+ * confirmation dialog. Renders only when state.open is true.
+ */
+export interface ConfirmDialogState {
+    open: boolean;
+    message: string;
+    options?: {
+        title?: string;
+        confirmText?: string;
+        cancelText?: string;
+    };
+    resolve?: (value: boolean) => void;
+}
+interface ActionConfirmDialogProps {
+    state: ConfirmDialogState;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function ActionConfirmDialog({ state, onOpenChange }: ActionConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/views/ActionConfirmDialog.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActionConfirmDialog — Promise-based confirmation dialog for action execution.
+ *
+ * Uses Shadcn AlertDialog to replace window.confirm with a styled, accessible
+ * confirmation dialog. Renders only when state.open is true.
+ */
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@object-ui/components';
+export function ActionConfirmDialog({ state, onOpenChange }) {
+    const handleConfirm = () => {
+        state.resolve?.(true);
+        onOpenChange(false);
+    };
+    const handleCancel = () => {
+        state.resolve?.(false);
+        onOpenChange(false);
+    };
+    return (_jsx(AlertDialog, { open: state.open, onOpenChange: (open) => {
+            if (!open)
+                handleCancel();
+        }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: state.options?.title || 'Confirm Action' }), _jsx(AlertDialogDescription, { children: state.message })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: handleCancel, children: state.options?.cancelText || 'Cancel' }), _jsx(AlertDialogAction, { onClick: handleConfirm, children: state.options?.confirmText || 'Continue' })] })] }) }));
+}

package/dist/views/ActionParamDialog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ActionParamDialog — Collects user input for action parameters before execution.
+ *
+ * Dynamically renders form fields from ActionParamDef[] definitions:
+ *  - type: 'select' → Shadcn Select component
+ *  - type: 'text'   → Shadcn Input component
+ *  - type: 'textarea' → Shadcn Textarea component
+ *  - other types    → Shadcn Input with appropriate HTML type
+ *
+ * Returns collected param values or null on cancel.
+ */
+import type { ActionParamDef } from '@object-ui/core';
+export interface ParamDialogState {
+    open: boolean;
+    params: ActionParamDef[];
+    resolve?: (value: Record<string, any> | null) => void;
+}
+interface ActionParamDialogProps {
+    state: ParamDialogState;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/views/ActionParamDialog.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActionParamDialog — Collects user input for action parameters before execution.
+ *
+ * Dynamically renders form fields from ActionParamDef[] definitions:
+ *  - type: 'select' → Shadcn Select component
+ *  - type: 'text'   → Shadcn Input component
+ *  - type: 'textarea' → Shadcn Textarea component
+ *  - other types    → Shadcn Input with appropriate HTML type
+ *
+ * Returns collected param values or null on cancel.
+ */
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+export function ActionParamDialog({ state, onOpenChange }) {
+    const [values, setValues] = useState({});
+    const [errors, setErrors] = useState({});
+    // Reset values when params change
+    useEffect(() => {
+        if (state.open) {
+            const defaults = {};
+            for (const param of state.params) {
+                if (param.defaultValue !== undefined) {
+                    defaults[param.name] = param.defaultValue;
+                }
+            }
+            setValues(defaults);
+            setErrors({});
+        }
+    }, [state.open, state.params]);
+    const isMissingValue = (value) => {
+        if (value === undefined || value === null)
+            return true;
+        if (typeof value === 'string')
+            return value.trim() === '';
+        if (Array.isArray(value))
+            return value.length === 0;
+        return false;
+    };
+    const handleSubmit = () => {
+        // Validate required fields
+        const newErrors = {};
+        for (const param of state.params) {
+            if (param.required && isMissingValue(values[param.name])) {
+                newErrors[param.name] = true;
+            }
+        }
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
+            return;
+        }
+        state.resolve?.(values);
+        onOpenChange(false);
+    };
+    const handleCancel = () => {
+        state.resolve?.(null);
+        onOpenChange(false);
+    };
+    const updateValue = (name, value) => {
+        setValues(prev => ({ ...prev, [name]: value }));
+        setErrors(prev => ({ ...prev, [name]: false }));
+    };
+    return (_jsx(Dialog, { open: state.open, onOpenChange: (open) => {
+            if (!open)
+                handleCancel();
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Action Parameters" }), _jsx(DialogDescription, { children: "Please provide the required information to continue." })] }), _jsx("div", { className: "grid gap-4 py-4", children: state.params.map((param) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: param.name, children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), param.type === 'select' && param.options ? (_jsxs(Select, { value: values[param.name] ?? '', onValueChange: (val) => updateValue(param.name, val), children: [_jsx(SelectTrigger, { id: param.name, className: errors[param.name] ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: param.placeholder || `Select ${param.label}` }) }), _jsx(SelectContent, { children: param.options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : param.type === 'textarea' ? (_jsx(Textarea, { id: param.name, value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : param.type === 'number' ? (_jsx(Input, { id: param.name, type: "number", value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value === '' ? undefined : e.target.valueAsNumber), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : (_jsx(Input, { id: param.name, type: ['email', 'url', 'date', 'datetime-local', 'time', 'password'].includes(param.type) ? param.type : 'text', value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })), errors[param.name] && (_jsxs("p", { className: "text-xs text-destructive", children: [param.label, " is required"] })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: param.helpText }))] }, param.name))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleSubmit, children: "Confirm" })] })] }) }));
+}

package/dist/views/DashboardView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Dashboard View Component
+ * Renders a dashboard based on the dashboardName parameter.
+ * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
+ * on the right side, following the same pattern as ListView.
+ */
+export declare function DashboardView({ dataSource }: {
+    dataSource?: any;
+}): import("react/jsx-runtime").JSX.Element;