@object-ui/plugin-designer 3.0.3 → 3.1.1

package/dist/plugin-designer/src/AppCreationWizard.d.ts

@@ -0,0 +1,24 @@
+import { AppWizardDraft, ObjectSelection } from '../../types/src';
+export interface AppCreationWizardProps {
+    /** Available business objects to select from */
+    availableObjects?: ObjectSelection[];
+    /** Available templates */
+    templates?: Array<{
+        id: string;
+        label: string;
+        description?: string;
+    }>;
+    /** Initial draft state (for editing existing apps) */
+    initialDraft?: Partial<AppWizardDraft>;
+    /** Callback when wizard completes */
+    onComplete?: (draft: AppWizardDraft) => void;
+    /** Callback when wizard is cancelled */
+    onCancel?: () => void;
+    /** Callback to save draft (partial progress) */
+    onSaveDraft?: (draft: AppWizardDraft) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class */
+    className?: string;
+}
+export declare function AppCreationWizard({ availableObjects, templates, initialDraft, onComplete, onCancel, onSaveDraft, readOnly, className, }: AppCreationWizardProps): import("react/jsx-runtime").JSX.Element;

package/dist/plugin-designer/src/BrandingEditor.d.ts

@@ -0,0 +1,18 @@
+import { BrandingConfig } from '../../types/src';
+export interface BrandingEditorProps {
+    /** Current branding configuration */
+    branding: BrandingConfig;
+    /** Callback when branding changes */
+    onChange: (branding: BrandingConfig) => void;
+    /** Application title for preview */
+    appTitle?: string;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class */
+    className?: string;
+    /** Callback to export branding config */
+    onExport?: (branding: BrandingConfig) => void;
+    /** Callback to import branding config */
+    onImport?: (branding: BrandingConfig) => void;
+}
+export declare function BrandingEditor({ branding: initialBranding, onChange, appTitle, readOnly, className, onExport, onImport, }: BrandingEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/plugin-designer/src/DashboardEditor.d.ts

@@ -0,0 +1,21 @@
+import { DashboardSchema } from '../../types/src';
+export interface DashboardEditorProps {
+    /** Dashboard schema to edit */
+    schema: DashboardSchema;
+    /** Callback when schema changes */
+    onChange: (schema: DashboardSchema) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class */
+    className?: string;
+    /** Callback when JSON is exported */
+    onExport?: (schema: DashboardSchema) => void;
+    /** Callback when JSON is imported */
+    onImport?: (schema: DashboardSchema) => void;
+    /** Externally controlled selected widget ID */
+    selectedWidgetId?: string | null;
+    /** Callback when widget selection changes (for external sync) */
+    onWidgetSelect?: (widgetId: string | null) => void;
+}
+export declare function DashboardEditor({ schema, onChange, readOnly, className, onExport, onImport, selectedWidgetId: externalSelectedWidgetId, onWidgetSelect, }: DashboardEditorProps): import("react/jsx-runtime").JSX.Element;
+export default DashboardEditor;

package/dist/plugin-designer/src/DashboardEditor.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+import { DashboardEditor } from './DashboardEditor';
+declare const meta: {
+    title: string;
+    component: typeof DashboardEditor;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof DashboardEditor>;
+export declare const Default: Story;
+export declare const WithWidgets: Story;
+export declare const ReadOnly: Story;

package/dist/plugin-designer/src/EditorModeToggle.d.ts

@@ -0,0 +1,21 @@
+import { EditorMode } from '../../types/src';
+export interface EditorModeToggleProps {
+    /** Current mode */
+    mode: EditorMode;
+    /** Callback when mode changes */
+    onChange: (mode: EditorMode) => void;
+    /** Disable mode switching */
+    disabled?: boolean;
+    /** CSS class */
+    className?: string;
+}
+/**
+ * Three-way toggle for Edit / Preview / Code modes.
+ *
+ * @example
+ * ```tsx
+ * <EditorModeToggle mode={mode} onChange={setMode} />
+ * ```
+ */
+export declare function EditorModeToggle({ mode, onChange, disabled, className, }: EditorModeToggleProps): import("react/jsx-runtime").JSX.Element;
+export default EditorModeToggle;

package/dist/plugin-designer/src/NavigationDesigner.d.ts

@@ -0,0 +1,19 @@
+import { NavigationItem } from '../../types/src';
+export interface NavigationDesignerProps {
+    /** Navigation items to edit */
+    items: NavigationItem[];
+    /** Callback when items change */
+    onChange: (items: NavigationItem[]) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Show live preview sidebar */
+    showPreview?: boolean;
+    /** CSS class */
+    className?: string;
+    /** Callback to export navigation schema */
+    onExport?: (items: NavigationItem[]) => void;
+    /** Callback to import navigation schema */
+    onImport?: (items: NavigationItem[]) => void;
+}
+export declare function NavigationDesigner({ items, onChange, readOnly, showPreview, className, onExport, onImport, }: NavigationDesignerProps): import("react/jsx-runtime").JSX.Element;
+export default NavigationDesigner;

package/dist/plugin-designer/src/ObjectViewConfigurator.d.ts

@@ -0,0 +1,41 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export type ViewType = 'grid' | 'kanban' | 'calendar' | 'gallery' | 'timeline' | 'map' | 'gantt';
+export interface ViewColumn {
+    name: string;
+    label: string;
+    visible: boolean;
+    width?: number;
+}
+export interface ViewConfig {
+    viewType: ViewType;
+    columns: ViewColumn[];
+    showSearch: boolean;
+    showFilters: boolean;
+    showSort: boolean;
+    rowHeight: 'compact' | 'medium' | 'tall';
+    striped: boolean;
+    bordered: boolean;
+    groupBy?: string;
+    sortField?: string;
+    sortDirection?: 'asc' | 'desc';
+}
+export interface ObjectViewConfiguratorProps {
+    /** Current view configuration */
+    config: ViewConfig;
+    /** Callback when config changes */
+    onChange: (config: ViewConfig) => void;
+    /** Available view types */
+    availableViewTypes?: ViewType[];
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class */
+    className?: string;
+}
+export declare function ObjectViewConfigurator({ config, onChange, availableViewTypes, readOnly, className, }: ObjectViewConfiguratorProps): import("react/jsx-runtime").JSX.Element;
+export default ObjectViewConfigurator;

package/dist/plugin-designer/src/PageCanvasEditor.d.ts

@@ -0,0 +1,24 @@
+import { PageSchema } from '../../types/src';
+export interface PageCanvasEditorProps {
+    /** Page schema to edit */
+    schema: PageSchema;
+    /** Callback when schema changes */
+    onChange: (schema: PageSchema) => void;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class */
+    className?: string;
+    /** Callback when JSON is exported */
+    onExport?: (schema: PageSchema) => void;
+    /** Callback when JSON is imported */
+    onImport?: (schema: PageSchema) => void;
+}
+/** Simplified component entry for the canvas */
+export interface CanvasComponent {
+    id: string;
+    type: string;
+    label: string;
+    props?: Record<string, unknown>;
+}
+export declare function PageCanvasEditor({ schema, onChange, readOnly, className, onExport, onImport, }: PageCanvasEditorProps): import("react/jsx-runtime").JSX.Element;
+export default PageCanvasEditor;

package/dist/plugin-designer/src/PageCanvasEditor.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+import { PageCanvasEditor } from './PageCanvasEditor';
+declare const meta: {
+    title: string;
+    component: typeof PageCanvasEditor;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof PageCanvasEditor>;
+export declare const Default: Story;
+export declare const WithComponents: Story;
+export declare const ReadOnly: Story;

package/dist/plugin-designer/src/hooks/index.d.ts

@@ -7,6 +7,8 @@
  */
 export { useUndoRedo } from './useUndoRedo';
 export type { UndoRedoState, UndoRedoOptions } from './useUndoRedo';
+export { useDesignerHistory } from './useDesignerHistory';
+export type { DesignerHistoryState, DesignerHistoryOptions } from './useDesignerHistory';
 export { useConfirmDialog } from './useConfirmDialog';
 export type { ConfirmDialogState } from './useConfirmDialog';
 export { useClipboard } from './useClipboard';
@@ -15,3 +17,4 @@ export { useMultiSelect } from './useMultiSelect';
 export type { MultiSelectState } from './useMultiSelect';
 export { useCanvasPanZoom } from './useCanvasPanZoom';
 export type { PanZoomState, PanZoomOptions } from './useCanvasPanZoom';
+export { useDesignerTranslation } from './useDesignerTranslation';

package/dist/plugin-designer/src/hooks/useDesignerHistory.d.ts

@@ -0,0 +1,23 @@
+import { UndoRedoOptions, UndoRedoState } from './useUndoRedo';
+/** Options for the designer history hook */
+export interface DesignerHistoryOptions extends UndoRedoOptions {
+}
+/** Designer history state — command-pattern wrapper around undo/redo */
+export interface DesignerHistoryState<T> extends UndoRedoState<T> {
+}
+/**
+ * Hook providing command-pattern undo/redo history for designer components.
+ *
+ * Wraps {@link useUndoRedo} with designer-specific naming conventions.
+ * Each `push()` call records a snapshot; `undo()` / `redo()` navigate
+ * the history stack. The `reset()` method clears all history.
+ *
+ * @example
+ * ```ts
+ * const history = useDesignerHistory<DesignerState>(initialState, { maxHistory: 50 });
+ * history.push(newState);
+ * history.undo();
+ * history.redo();
+ * ```
+ */
+export declare function useDesignerHistory<T>(initialState: T, options?: DesignerHistoryOptions): DesignerHistoryState<T>;

package/dist/plugin-designer/src/hooks/useDesignerTranslation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare function useDesignerTranslation(): {
+    t: (key: string, options?: Record<string, unknown>) => string;
+} | {
+    t: import('i18next').TFunction<string, undefined>;
+};

package/dist/plugin-designer/src/index.d.ts

@@ -3,10 +3,23 @@ import { DataModelDesigner } from './DataModelDesigner';
 import { ProcessDesigner } from './ProcessDesigner';
 import { ReportDesigner } from './ReportDesigner';
 import { CollaborationProvider, ConnectionStatusIndicator } from './CollaborationProvider';
-import { ViewDesigner } from './ViewDesigner';
-export { PageDesigner, DataModelDesigner, ProcessDesigner, ReportDesigner, CollaborationProvider, ConnectionStatusIndicator, ViewDesigner, };
-export type { ViewDesignerProps, ViewDesignerConfig } from './ViewDesigner';
+import { AppCreationWizard } from './AppCreationWizard';
+import { NavigationDesigner } from './NavigationDesigner';
+import { EditorModeToggle } from './EditorModeToggle';
+import { DashboardEditor } from './DashboardEditor';
+import { PageCanvasEditor } from './PageCanvasEditor';
+import { ObjectViewConfigurator } from './ObjectViewConfigurator';
+import { BrandingEditor } from './BrandingEditor';
+export { PageDesigner, DataModelDesigner, ProcessDesigner, ReportDesigner, CollaborationProvider, ConnectionStatusIndicator, AppCreationWizard, NavigationDesigner, EditorModeToggle, DashboardEditor, PageCanvasEditor, ObjectViewConfigurator, BrandingEditor, };
+export type { AppCreationWizardProps } from './AppCreationWizard';
+export type { NavigationDesignerProps } from './NavigationDesigner';
+export type { EditorModeToggleProps } from './EditorModeToggle';
+export type { DashboardEditorProps } from './DashboardEditor';
+export type { PageCanvasEditorProps, CanvasComponent } from './PageCanvasEditor';
+export type { ObjectViewConfiguratorProps, ViewConfig, ViewColumn, ViewType } from './ObjectViewConfigurator';
+export type { BrandingEditorProps } from './BrandingEditor';
 export { useUndoRedo } from './hooks/useUndoRedo';
+export { useDesignerHistory } from './hooks/useDesignerHistory';
 export { useConfirmDialog } from './hooks/useConfirmDialog';
 export { useClipboard } from './hooks/useClipboard';
 export { useMultiSelect } from './hooks/useMultiSelect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-designer",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Visual designer plugin for Object UI with page, data model, process, and report designers plus collaborative editing.",
@@ -20,19 +20,23 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@object-ui/components": "3.0.3",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/react": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@object-ui/components": "3.1.1",
+    "@object-ui/core": "3.1.1",
+    "@object-ui/react": "3.1.1",
+    "@object-ui/types": "3.1.1"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.344.0",
-    "tailwind-merge": "^2.6.1"
+    "lucide-react": "^0.576.0",
+    "tailwind-merge": "^3.5.0",
+    "@object-ui/i18n": "3.1.1"
   },
   "devDependencies": {
-    "@types/node": "^25.2.3",
-    "@types/react": "19.2.13",
+    "@types/node": "^25.3.3",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "vite": "^7.3.1",

package/dist/plugin-designer/src/ViewDesigner.d.ts

@@ -1,67 +0,0 @@
-import { ViewDesignerColumn } from '../../types/src';
-type ViewType = 'grid' | 'kanban' | 'gallery' | 'calendar' | 'timeline' | 'gantt' | 'map';
-export interface ViewDesignerProps {
-    /** Object name this view is for */
-    objectName: string;
-    /** View identifier (for editing existing views) */
-    viewId?: string;
-    /** Initial view label */
-    viewLabel?: string;
-    /** Initial view type */
-    viewType?: ViewType;
-    /** Initial columns configuration */
-    columns?: ViewDesignerColumn[];
-    /** Initial filter conditions */
-    filters?: Array<{
-        field: string;
-        operator: string;
-        value: any;
-    }>;
-    /** Initial sort configuration */
-    sort?: Array<{
-        field: string;
-        direction: 'asc' | 'desc';
-    }>;
-    /** Available fields from the object schema */
-    availableFields?: Array<{
-        name: string;
-        label: string;
-        type: string;
-    }>;
-    /** Type-specific options (kanban groupField, calendar startDateField, etc.) */
-    options?: Record<string, any>;
-    /** Read-only mode */
-    readOnly?: boolean;
-    /** Callback when save is clicked */
-    onSave?: (config: ViewDesignerConfig) => void;
-    /** Callback when cancel is clicked */
-    onCancel?: () => void;
-    /** Custom CSS class */
-    className?: string;
-}
-/** The output configuration from the view designer */
-export interface ViewDesignerConfig {
-    viewId?: string;
-    viewLabel: string;
-    viewType: ViewType;
-    columns: ViewDesignerColumn[];
-    filters: Array<{
-        field: string;
-        operator: string;
-        value: any;
-    }>;
-    sort: Array<{
-        field: string;
-        direction: 'asc' | 'desc';
-    }>;
-    options: Record<string, any>;
-}
-/**
- * Visual designer for creating and editing list views.
- * Provides a 3-panel layout:
- * - Left: Field palette (available fields to add)
- * - Center: View layout preview (columns, order)
- * - Right: Properties panel (view settings, filters, sort)
- */
-export declare function ViewDesigner({ objectName, viewId, viewLabel: initialViewLabel, viewType: initialViewType, columns: initialColumns, filters: initialFilters, sort: initialSort, availableFields, options: initialOptions, readOnly, onSave, onCancel, className, }: ViewDesignerProps): import("react/jsx-runtime").JSX.Element;
-export {};