@object-ui/app-shell 3.3.0 → 3.3.2

package/dist/providers/MetadataProvider.js

@@ -0,0 +1,324 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo, } from 'react';
+import { MetadataCtx, useMetadata } from '@object-ui/react';
+export { useMetadataItem } from '@object-ui/react';
+export { useMetadata };
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DEFAULT_TTL_MS = 5 * 60 * 1000;
+const EAGER_TYPES = ['app'];
+const TYPE_BY_STATE_KEY = {
+    apps: 'app',
+    objects: 'object',
+    dashboards: 'dashboard',
+    reports: 'report',
+    pages: 'page',
+};
+const SESSION_STORAGE_PREFIX = 'objectui:metadata:';
+function isDev() {
+    try {
+        const meta = import.meta;
+        if (meta && meta.env && typeof meta.env.MODE === 'string') {
+            return meta.env.MODE !== 'production';
+        }
+    }
+    catch {
+        /* import.meta unavailable */
+    }
+    if (typeof process !== 'undefined' && process.env && typeof process.env.NODE_ENV === 'string') {
+        return process.env.NODE_ENV !== 'production';
+    }
+    return false;
+}
+const DEV = isDev();
+function debug(...args) {
+    if (DEV) {
+        // eslint-disable-next-line no-console
+        console.debug('[MetadataProvider]', ...args);
+    }
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function extractItems(res) {
+    if (res && typeof res === 'object' && 'items' in res && Array.isArray(res.items)) {
+        return res.items;
+    }
+    return [];
+}
+function extractItem(res) {
+    if (res == null)
+        return null;
+    if (typeof res === 'object' && 'item' in res) {
+        return res.item ?? null;
+    }
+    return res;
+}
+function isNamedItem(item) {
+    return (!!item &&
+        typeof item === 'object' &&
+        'name' in item &&
+        typeof item.name === 'string');
+}
+function emptyEntry() {
+    return {
+        status: 'idle',
+        items: [],
+        byName: new Map(),
+        error: null,
+        fetchedAt: 0,
+        promise: null,
+    };
+}
+function loadFromSession(type) {
+    if (typeof sessionStorage === 'undefined')
+        return null;
+    try {
+        const raw = sessionStorage.getItem(SESSION_STORAGE_PREFIX + type);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function saveToSession(type, items) {
+    if (typeof sessionStorage === 'undefined')
+        return;
+    try {
+        sessionStorage.setItem(SESSION_STORAGE_PREFIX + type, JSON.stringify(items));
+    }
+    catch {
+        /* quota or serialization failure */
+    }
+}
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+export function MetadataProvider({ children, adapter, ttlMs = DEFAULT_TTL_MS }) {
+    const cacheRef = useRef(new Map());
+    const itemPromisesRef = useRef(new Map());
+    const adapterRef = useRef(adapter);
+    adapterRef.current = adapter;
+    const [version, setVersion] = useState(0);
+    // Defer state bumps so they never occur synchronously during a consumer's
+    // render phase. `ensureType` may be invoked from inside `useMemo` getters
+    // (e.g. when a list-page renders and triggers a lazy fetch), and React
+    // forbids cross-component setState during render. queueMicrotask schedules
+    // the update after the current render has committed.
+    const bump = useCallback(() => {
+        if (typeof queueMicrotask === 'function') {
+            queueMicrotask(() => setVersion(v => v + 1));
+        }
+        else {
+            Promise.resolve().then(() => setVersion(v => v + 1));
+        }
+    }, []);
+    const getEntry = useCallback((type) => {
+        let entry = cacheRef.current.get(type);
+        if (!entry) {
+            entry = emptyEntry();
+            cacheRef.current.set(type, entry);
+        }
+        return entry;
+    }, []);
+    const ensureType = useCallback((type) => {
+        const entry = getEntry(type);
+        if (entry.promise)
+            return entry.promise;
+        if (entry.status === 'ready' && Date.now() - entry.fetchedAt < ttlMs) {
+            debug(`cache hit (fresh) type=${type} items=${entry.items.length}`);
+            return Promise.resolve(entry.items);
+        }
+        const started = Date.now();
+        entry.status = 'loading';
+        entry.error = null;
+        const client = adapterRef.current.getClient();
+        const promise = client.meta
+            .getItems(type)
+            .then((res) => {
+            const items = extractItems(res);
+            entry.items = items;
+            entry.status = 'ready';
+            entry.error = null;
+            entry.fetchedAt = Date.now();
+            entry.promise = null;
+            entry.byName.clear();
+            for (const it of items) {
+                if (isNamedItem(it)) {
+                    entry.byName.set(it.name, it);
+                }
+            }
+            if (type === 'app')
+                saveToSession(type, items);
+            debug(`fetched type=${type} items=${items.length} in ${Date.now() - started}ms`);
+            bump();
+            return items;
+        })
+            .catch((err) => {
+            const error = err instanceof Error ? err : new Error(String(err));
+            entry.status = 'error';
+            entry.error = error;
+            entry.promise = null;
+            debug(`fetch failed type=${type}`, error);
+            bump();
+            return [];
+        });
+        entry.promise = promise;
+        // No synchronous bump here: the only externally-visible state change at
+        // this point is `status: 'loading'`, which no consumer reads. Bumping
+        // from inside a render-phase getter (see useMemo below) would trigger
+        // React's "Cannot update a component while rendering" warning.
+        return promise;
+    }, [bump, getEntry, ttlMs]);
+    const getItem = useCallback((type, name) => {
+        const entry = getEntry(type);
+        if (entry.byName.has(name)) {
+            debug(`item cache hit type=${type} name=${name}`);
+            return Promise.resolve(entry.byName.get(name) ?? null);
+        }
+        let pending = itemPromisesRef.current.get(type);
+        if (!pending) {
+            pending = new Map();
+            itemPromisesRef.current.set(type, pending);
+        }
+        const existing = pending.get(name);
+        if (existing)
+            return existing;
+        const started = Date.now();
+        const client = adapterRef.current.getClient();
+        const promise = client.meta
+            .getItem(type, name)
+            .then((res) => {
+            const item = extractItem(res);
+            if (item)
+                entry.byName.set(name, item);
+            debug(`fetched item type=${type} name=${name} in ${Date.now() - started}ms`);
+            pending.delete(name);
+            return item;
+        })
+            .catch((err) => {
+            pending.delete(name);
+            debug(`fetch item failed type=${type} name=${name}`, err);
+            return null;
+        });
+        pending.set(name, promise);
+        return promise;
+    }, [getEntry]);
+    const refresh = useCallback(async (type) => {
+        if (type) {
+            const entry = getEntry(type);
+            entry.fetchedAt = 0;
+            entry.byName.clear();
+            await ensureType(type);
+            return;
+        }
+        const types = Array.from(cacheRef.current.keys()).filter(t => cacheRef.current.get(t).status !== 'idle');
+        await Promise.all(types.map(t => {
+            const entry = cacheRef.current.get(t);
+            entry.fetchedAt = 0;
+            entry.byName.clear();
+            return ensureType(t);
+        }));
+    }, [ensureType, getEntry]);
+    const invalidate = useCallback((type, name) => {
+        const entry = cacheRef.current.get(type);
+        if (!entry)
+            return;
+        if (name) {
+            entry.byName.delete(name);
+            entry.items = entry.items.filter((it) => it?.name !== name);
+            debug(`invalidated type=${type} name=${name}`);
+        }
+        else {
+            entry.status = 'idle';
+            entry.items = [];
+            entry.byName.clear();
+            entry.error = null;
+            entry.fetchedAt = 0;
+            debug(`invalidated type=${type}`);
+        }
+        bump();
+    }, [bump]);
+    const [initialLoading, setInitialLoading] = useState(true);
+    const [initialError, setInitialError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        const cached = loadFromSession('app');
+        if (cached) {
+            const entry = getEntry('app');
+            entry.items = cached;
+            entry.status = 'ready';
+            entry.fetchedAt = 0;
+            for (const it of cached) {
+                if (isNamedItem(it)) {
+                    entry.byName.set(it.name, it);
+                }
+            }
+            bump();
+            setInitialLoading(false);
+        }
+        (async () => {
+            for (const type of EAGER_TYPES) {
+                try {
+                    await ensureType(type);
+                    if (!cancelled)
+                        setInitialError(null);
+                }
+                catch (err) {
+                    if (!cancelled) {
+                        setInitialError(err instanceof Error ? err : new Error(String(err)));
+                    }
+                }
+            }
+            if (!cancelled)
+                setInitialLoading(false);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, ensureType, getEntry, bump]);
+    const value = useMemo(() => {
+        void version;
+        const readType = (type) => {
+            const entry = getEntry(type);
+            if (entry.status === 'idle') {
+                void ensureType(type);
+            }
+            return entry.items;
+        };
+        const getItemsByType = (type) => readType(type);
+        const base = {
+            apps: getEntry('app').items,
+            get objects() {
+                return readType(TYPE_BY_STATE_KEY.objects);
+            },
+            get dashboards() {
+                return readType(TYPE_BY_STATE_KEY.dashboards);
+            },
+            get reports() {
+                return readType(TYPE_BY_STATE_KEY.reports);
+            },
+            get pages() {
+                return readType(TYPE_BY_STATE_KEY.pages);
+            },
+            loading: initialLoading,
+            error: initialError ?? getEntry('app').error,
+            refresh,
+            invalidate,
+            ensureType,
+            getItem,
+            getItemsByType,
+        };
+        return base;
+    }, [version, initialLoading, initialError, ensureType, getItem, getEntry, refresh, invalidate]);
+    return _jsx(MetadataCtx.Provider, { value: value, children: children });
+}
+export function useMetadataType(type) {
+    const ctx = useMetadata();
+    const items = ctx.getItemsByType(type);
+    return { items, loading: ctx.loading && type === 'app', error: ctx.error };
+}

package/dist/services/MetadataService.d.ts

@@ -0,0 +1,119 @@
+/**
+ * MetadataService
+ *
+ * Encapsulates CRUD operations for object definitions and field definitions
+ * against the ObjectStack metadata API (`client.meta.saveItem`).
+ *
+ * This service bridges the gap between the local-state-only ObjectManager /
+ * FieldDesigner components and the backend persistence layer.
+ *
+ * Pattern:
+ *   1. Optimistically update local UI state
+ *   2. Persist via `client.meta.saveItem('object', name, data)`
+ *   3. Refresh MetadataProvider cache on success
+ *   4. Rollback local state on failure
+ *
+ * @module services/MetadataService
+ */
+import type { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import type { ObjectDefinition, DesignerFieldDefinition } from '@object-ui/types';
+/** Shape written to the metadata API for an object definition. */
+export interface ObjectMetadataPayload {
+    name: string;
+    label?: string;
+    pluralLabel?: string;
+    description?: string;
+    icon?: string;
+    group?: string;
+    sortOrder?: number;
+    enabled?: boolean;
+    fields?: FieldMetadataPayload[];
+    relationships?: Array<{
+        relatedObject: string;
+        type: string;
+        label?: string;
+        foreignKey?: string;
+    }>;
+}
+/** Shape written to the metadata API for a field definition. */
+export interface FieldMetadataPayload {
+    name: string;
+    label?: string;
+    type: string;
+    group?: string;
+    description?: string;
+    required?: boolean;
+    unique?: boolean;
+    readonly?: boolean;
+    hidden?: boolean;
+    defaultValue?: string;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: string;
+        color?: string;
+    }>;
+    externalId?: boolean;
+    trackHistory?: boolean;
+    indexed?: boolean;
+    referenceTo?: string;
+    formula?: string;
+    sortOrder?: number;
+}
+export declare class MetadataService {
+    private adapter;
+    constructor(adapter: ObjectStackAdapter);
+    /**
+     * Fetch all items for a given metadata category.
+     * Returns the items array from the API response, defaulting to `[]`.
+     */
+    getItems(category: string): Promise<Record<string, unknown>[]>;
+    /**
+     * Persist a metadata item (upsert) for any category.
+     */
+    saveMetadataItem(category: string, name: string, data: Record<string, unknown>): Promise<void>;
+    /**
+     * Soft-delete a metadata item by persisting it with `enabled: false` and
+     * `_deleted: true`. Works for any metadata category.
+     */
+    deleteMetadataItem(category: string, name: string): Promise<void>;
+    /**
+     * Persist an object definition to the backend.
+     * Works for both create and update (the API is an upsert).
+     */
+    saveObject(obj: ObjectDefinition, existingFields?: FieldMetadataPayload[]): Promise<void>;
+    /**
+     * Delete an object definition from the backend.
+     *
+     * NOTE: The ObjectStack metadata API currently exposes `saveItem` but no
+     * dedicated `deleteItem`.  We persist the object with `enabled: false` so
+     * the intent is recorded and the object is hidden from active use.
+     * A full hard-delete can be added once the backend supports it.
+     */
+    deleteObject(objectName: string): Promise<void>;
+    /**
+     * Persist updated fields for an object.
+     *
+     * Fetches the current object metadata, replaces its `fields` array with the
+     * provided designer fields, and saves the whole object back.
+     */
+    saveFields(objectName: string, fields: DesignerFieldDefinition[]): Promise<void>;
+    /**
+     * Detect changes between previous and next object arrays.
+     *
+     * Returns the single object that was created, updated, or deleted.
+     * If multiple objects changed simultaneously the function returns `null`
+     * (callers should treat this as a bulk save of the entire array).
+     */
+    static diffObjects(prev: ObjectDefinition[], next: ObjectDefinition[]): {
+        type: 'create' | 'update' | 'delete';
+        object: ObjectDefinition;
+    } | null;
+    /**
+     * Detect changes between previous and next field arrays.
+     */
+    static diffFields(prev: DesignerFieldDefinition[], next: DesignerFieldDefinition[]): {
+        type: 'create' | 'update' | 'delete';
+        field: DesignerFieldDefinition;
+    } | null;
+}

package/dist/services/MetadataService.js

@@ -0,0 +1,211 @@
+/**
+ * MetadataService
+ *
+ * Encapsulates CRUD operations for object definitions and field definitions
+ * against the ObjectStack metadata API (`client.meta.saveItem`).
+ *
+ * This service bridges the gap between the local-state-only ObjectManager /
+ * FieldDesigner components and the backend persistence layer.
+ *
+ * Pattern:
+ *   1. Optimistically update local UI state
+ *   2. Persist via `client.meta.saveItem('object', name, data)`
+ *   3. Refresh MetadataProvider cache on success
+ *   4. Rollback local state on failure
+ *
+ * @module services/MetadataService
+ */
+// ---------------------------------------------------------------------------
+// Converters: UI types → API payloads
+// ---------------------------------------------------------------------------
+/** Convert an `ObjectDefinition` (UI) to the API payload shape. */
+function toObjectPayload(obj, fields) {
+    return {
+        name: obj.name,
+        label: obj.label,
+        pluralLabel: obj.pluralLabel,
+        description: obj.description,
+        icon: obj.icon,
+        group: obj.group,
+        sortOrder: obj.sortOrder,
+        enabled: obj.enabled,
+        fields,
+        relationships: obj.relationships,
+    };
+}
+/** Convert a `DesignerFieldDefinition` (UI) to the API payload shape. */
+function toFieldPayload(field) {
+    return {
+        name: field.name,
+        label: field.label,
+        type: field.type,
+        group: field.group,
+        description: field.description,
+        required: field.required,
+        unique: field.unique,
+        readonly: field.readonly,
+        hidden: field.hidden,
+        defaultValue: field.defaultValue,
+        placeholder: field.placeholder,
+        options: field.options,
+        externalId: field.externalId,
+        trackHistory: field.trackHistory,
+        indexed: field.indexed,
+        referenceTo: field.referenceTo,
+        formula: field.formula,
+        sortOrder: field.sortOrder,
+    };
+}
+// ---------------------------------------------------------------------------
+// Service
+// ---------------------------------------------------------------------------
+export class MetadataService {
+    constructor(adapter) {
+        Object.defineProperty(this, "adapter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: adapter
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Generic metadata operations (any type)
+    // -----------------------------------------------------------------------
+    /**
+     * Fetch all items for a given metadata category.
+     * Returns the items array from the API response, defaulting to `[]`.
+     */
+    async getItems(category) {
+        const client = this.adapter.getClient();
+        const res = await client.meta.getItems(category);
+        if (res && typeof res === 'object' && 'items' in res && Array.isArray(res.items)) {
+            return res.items;
+        }
+        return [];
+    }
+    /**
+     * Persist a metadata item (upsert) for any category.
+     */
+    async saveMetadataItem(category, name, data) {
+        const client = this.adapter.getClient();
+        await client.meta.saveItem(category, name, data);
+        this.adapter.invalidateCache(`${category}:${name}`);
+    }
+    /**
+     * Soft-delete a metadata item by persisting it with `enabled: false` and
+     * `_deleted: true`. Works for any metadata category.
+     */
+    async deleteMetadataItem(category, name) {
+        const client = this.adapter.getClient();
+        await client.meta.saveItem(category, name, { name, enabled: false, _deleted: true });
+        this.adapter.invalidateCache(`${category}:${name}`);
+    }
+    // -----------------------------------------------------------------------
+    // Object operations
+    // -----------------------------------------------------------------------
+    /**
+     * Persist an object definition to the backend.
+     * Works for both create and update (the API is an upsert).
+     */
+    async saveObject(obj, existingFields) {
+        const client = this.adapter.getClient();
+        const payload = toObjectPayload(obj, existingFields);
+        await client.meta.saveItem('object', obj.name, payload);
+        this.adapter.invalidateCache(`object:${obj.name}`);
+    }
+    /**
+     * Delete an object definition from the backend.
+     *
+     * NOTE: The ObjectStack metadata API currently exposes `saveItem` but no
+     * dedicated `deleteItem`.  We persist the object with `enabled: false` so
+     * the intent is recorded and the object is hidden from active use.
+     * A full hard-delete can be added once the backend supports it.
+     */
+    async deleteObject(objectName) {
+        const client = this.adapter.getClient();
+        await client.meta.saveItem('object', objectName, { name: objectName, enabled: false, _deleted: true });
+        this.adapter.invalidateCache(`object:${objectName}`);
+    }
+    // -----------------------------------------------------------------------
+    // Field operations (fields are stored as part of their parent object)
+    // -----------------------------------------------------------------------
+    /**
+     * Persist updated fields for an object.
+     *
+     * Fetches the current object metadata, replaces its `fields` array with the
+     * provided designer fields, and saves the whole object back.
+     */
+    async saveFields(objectName, fields) {
+        const client = this.adapter.getClient();
+        // Fetch current object metadata to preserve non-field properties
+        let existingObject = {};
+        try {
+            const raw = await client.meta.getItem('object', objectName);
+            existingObject = raw?.item ?? raw ?? {};
+        }
+        catch {
+            // Object may not exist yet on the backend; proceed with fields-only save
+        }
+        const updatedObject = {
+            ...existingObject,
+            name: objectName,
+            fields: fields.map(toFieldPayload),
+        };
+        await client.meta.saveItem('object', objectName, updatedObject);
+        this.adapter.invalidateCache(`object:${objectName}`);
+    }
+    // -----------------------------------------------------------------------
+    // Diff helpers — determine what changed between two arrays
+    // -----------------------------------------------------------------------
+    /**
+     * Detect changes between previous and next object arrays.
+     *
+     * Returns the single object that was created, updated, or deleted.
+     * If multiple objects changed simultaneously the function returns `null`
+     * (callers should treat this as a bulk save of the entire array).
+     */
+    static diffObjects(prev, next) {
+        const prevMap = new Map(prev.map((o) => [o.id, o]));
+        const nextMap = new Map(next.map((o) => [o.id, o]));
+        // Detect creation (exists in next but not prev)
+        for (const [id, obj] of nextMap) {
+            if (!prevMap.has(id))
+                return { type: 'create', object: obj };
+        }
+        // Detect deletion (exists in prev but not next)
+        for (const [id, obj] of prevMap) {
+            if (!nextMap.has(id))
+                return { type: 'delete', object: obj };
+        }
+        // Detect update (same id but different content)
+        for (const [id, nextObj] of nextMap) {
+            const prevObj = prevMap.get(id);
+            if (prevObj && JSON.stringify(prevObj) !== JSON.stringify(nextObj)) {
+                return { type: 'update', object: nextObj };
+            }
+        }
+        return null;
+    }
+    /**
+     * Detect changes between previous and next field arrays.
+     */
+    static diffFields(prev, next) {
+        const prevMap = new Map(prev.map((f) => [f.id, f]));
+        const nextMap = new Map(next.map((f) => [f.id, f]));
+        for (const [id, field] of nextMap) {
+            if (!prevMap.has(id))
+                return { type: 'create', field };
+        }
+        for (const [id, field] of prevMap) {
+            if (!nextMap.has(id))
+                return { type: 'delete', field };
+        }
+        for (const [id, nextField] of nextMap) {
+            const prevField = prevMap.get(id);
+            if (prevField && JSON.stringify(prevField) !== JSON.stringify(nextField)) {
+                return { type: 'update', field: nextField };
+            }
+        }
+        return null;
+    }
+}

package/dist/skeletons/SkeletonDashboard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SkeletonDashboard
+ *
+ * Skeleton loading placeholder for dashboard views.
+ * Renders animated pulse cards that mimic a dashboard grid layout.
+ * @module
+ */
+interface SkeletonDashboardProps {
+    /** Number of widget cards to render */
+    cards?: number;
+}
+export declare function SkeletonDashboard({ cards }: SkeletonDashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/skeletons/SkeletonDashboard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SkeletonDashboard
+ *
+ * Skeleton loading placeholder for dashboard views.
+ * Renders animated pulse cards that mimic a dashboard grid layout.
+ * @module
+ */
+import { Skeleton } from '@object-ui/components';
+export function SkeletonDashboard({ cards = 6 }) {
+    return (_jsxs("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-56" }), _jsx(Skeleton, { className: "h-4 w-80" })] }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-lg border p-4 space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-20" }), _jsx(Skeleton, { className: "h-8 w-24" }), _jsx(Skeleton, { className: "h-3 w-16" })] }, `stat-${i}`))) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: Array.from({ length: cards }).map((_, i) => (_jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-5 w-5 rounded-full" })] }), _jsx(Skeleton, { className: "h-40 w-full" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3 w-16" }), _jsx(Skeleton, { className: "h-3 w-12" })] })] }, `widget-${i}`))) })] }));
+}

package/dist/skeletons/SkeletonDetail.d.ts

@@ -0,0 +1,15 @@
+/**
+ * SkeletonDetail
+ *
+ * Skeleton loading placeholder for record detail views.
+ * Renders animated pulse fields that mimic a detail form layout.
+ * @module
+ */
+interface SkeletonDetailProps {
+    /** Number of field rows to render */
+    fields?: number;
+    /** Number of columns */
+    columns?: number;
+}
+export declare function SkeletonDetail({ fields, columns }: SkeletonDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};