@magnet-cms/plugin-playground 2.0.0

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import { PluginMagnetProvider } from '@magnet-cms/common';
+export { PlaygroundModule } from './backend/index.cjs';
+
+/**
+ * Playground plugin (`@magnet-cms/plugin-playground`)
+ *
+ * Provides the Playground UI for creating and managing content schemas without
+ * writing code: visual editor, TypeScript generation, and NestJS module output.
+ *
+ * Features:
+ * - Visual schema editor with drag-and-drop field management
+ * - Real-time TypeScript code generation
+ * - Automatic module, controller, service, and DTO generation
+ * - Schema versioning and i18n support configuration
+ *
+ * The admin UI loads Playground from `dist/frontend/bundle.iife.js`. Build this
+ * package (`bun run build` here or via the monorepo) before expecting Playground
+ * in the sidebar.
+ */
+declare class PlaygroundPlugin {
+    /**
+     * Create a configured plugin provider for MagnetModule.forRoot().
+     *
+     * @example
+     * ```typescript
+     * MagnetModule.forRoot([
+     *   PlaygroundPlugin.forRoot(),
+     * ])
+     * ```
+     */
+    static forRoot(config?: {
+        modulesPath?: string;
+    }): PluginMagnetProvider;
+}
+
+export { PlaygroundPlugin };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { PluginMagnetProvider } from '@magnet-cms/common';
+export { PlaygroundModule } from './backend/index.js';
+
+/**
+ * Playground plugin (`@magnet-cms/plugin-playground`)
+ *
+ * Provides the Playground UI for creating and managing content schemas without
+ * writing code: visual editor, TypeScript generation, and NestJS module output.
+ *
+ * Features:
+ * - Visual schema editor with drag-and-drop field management
+ * - Real-time TypeScript code generation
+ * - Automatic module, controller, service, and DTO generation
+ * - Schema versioning and i18n support configuration
+ *
+ * The admin UI loads Playground from `dist/frontend/bundle.iife.js`. Build this
+ * package (`bun run build` here or via the monorepo) before expecting Playground
+ * in the sidebar.
+ */
+declare class PlaygroundPlugin {
+    /**
+     * Create a configured plugin provider for MagnetModule.forRoot().
+     *
+     * @example
+     * ```typescript
+     * MagnetModule.forRoot([
+     *   PlaygroundPlugin.forRoot(),
+     * ])
+     * ```
+     */
+    static forRoot(config?: {
+        modulesPath?: string;
+    }): PluginMagnetProvider;
+}
+
+export { PlaygroundPlugin };

package/dist/index.js

@@ -0,0 +1,76 @@
+import { __name, __toCommonJS, init_playground_module, playground_module_exports } from './chunk-WY4YMBWZ.js';
+export { PlaygroundModule } from './chunk-WY4YMBWZ.js';
+import { Plugin } from '@magnet-cms/core';
+
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate, "_ts_decorate");
+var PlaygroundPlugin = class _PlaygroundPlugin {
+  static {
+    __name(this, "PlaygroundPlugin");
+  }
+  /**
+  * Create a configured plugin provider for MagnetModule.forRoot().
+  *
+  * @example
+  * ```typescript
+  * MagnetModule.forRoot([
+  *   PlaygroundPlugin.forRoot(),
+  * ])
+  * ```
+  */
+  static forRoot(config) {
+    return {
+      type: "plugin",
+      plugin: _PlaygroundPlugin,
+      options: config,
+      envVars: []
+    };
+  }
+};
+PlaygroundPlugin = _ts_decorate([
+  Plugin({
+    name: "playground",
+    description: "Playground: visual schema builder and code generator for Magnet CMS",
+    version: "1.0.0",
+    module: /* @__PURE__ */ __name(() => (init_playground_module(), __toCommonJS(playground_module_exports)).PlaygroundModule, "module"),
+    frontend: {
+      routes: [
+        {
+          path: "playground",
+          componentId: "PlaygroundIndex",
+          requiresAuth: true,
+          children: [
+            {
+              path: "",
+              componentId: "PlaygroundIndex"
+            },
+            {
+              path: "new",
+              componentId: "PlaygroundEditor"
+            },
+            {
+              path: ":schemaName",
+              componentId: "PlaygroundEditor"
+            }
+          ]
+        }
+      ],
+      sidebar: [
+        {
+          id: "playground",
+          title: "Playground",
+          url: "/playground",
+          icon: "Boxes",
+          order: 20
+        }
+      ]
+    }
+  })
+], PlaygroundPlugin);
+
+export { PlaygroundPlugin };

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@magnet-cms/plugin-playground",
+  "version": "2.0.0",
+  "description": "Playground: visual schema builder and code generator for Magnet CMS",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./backend": {
+      "import": {
+        "types": "./dist/backend/index.d.ts",
+        "default": "./dist/backend/index.js"
+      },
+      "require": {
+        "types": "./dist/backend/index.d.cts",
+        "default": "./dist/backend/index.cjs"
+      }
+    },
+    "./frontend": {
+      "import": "./src/frontend/index.ts",
+      "types": "./src/frontend/index.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/frontend"
+  ],
+  "scripts": {
+    "build:dev": "tsup --watch",
+    "build": "tsup && bun run build:frontend",
+    "build:frontend": "vite build",
+    "build:frontend:watch": "vite build --watch"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@magnet-cms/admin": "workspace:*",
+    "@magnet-cms/common": "workspace:*",
+    "@magnet-cms/core": "workspace:*",
+    "@magnet-cms/ui": "workspace:*",
+    "@magnet-cms/utils": "workspace:*",
+    "@nestjs/common": "^11.1.12",
+    "@repo/biome": "workspace:*",
+    "@repo/tsup": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-router-dom": "^7.1.1",
+    "reflect-metadata": "0.2.2",
+    "vite": "^6.0.7"
+  },
+  "peerDependencies": {
+    "@magnet-cms/admin": "^0.2.0",
+    "@magnet-cms/common": "^0.2.0",
+    "@magnet-cms/core": "^2.0.0",
+    "@magnet-cms/ui": "^0.1.3",
+    "@magnet-cms/utils": "^0.1.1",
+    "@nestjs/common": "^11.1.12",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18.0.0",
+    "react-router-dom": ">=6.0.0",
+    "reflect-metadata": "0.2.2"
+  },
+  "magnet": {
+    "type": "plugin",
+    "backend": true,
+    "frontend": true
+  }
+}

package/src/frontend/index.ts

@@ -0,0 +1,110 @@
+/**
+ * Playground plugin — frontend entry
+ *
+ * This file automatically registers the plugin when loaded via script injection.
+ * The admin app loads plugin bundles at runtime and plugins self-register
+ * on window.__MAGNET_PLUGINS__.
+ */
+
+import type { ComponentType } from 'react'
+
+/**
+ * Plugin manifest type (inline to avoid import issues in UMD bundle)
+ */
+interface FrontendPluginManifest {
+	pluginName: string
+	routes?: {
+		path: string
+		componentId: string
+		children?: { path: string; componentId: string }[]
+	}[]
+	sidebar?: {
+		id: string
+		title: string
+		url: string
+		icon: string
+		order?: number
+	}[]
+}
+
+/**
+ * Plugin registration type
+ */
+interface PluginRegistration {
+	manifest: FrontendPluginManifest
+	components: Record<string, () => Promise<{ default: ComponentType<unknown> }>>
+}
+
+// Extend window for plugin registry
+declare global {
+	interface Window {
+		__MAGNET_PLUGINS__?: PluginRegistration[]
+	}
+}
+
+/**
+ * Plugin manifest defining routes and sidebar items
+ */
+const manifest: FrontendPluginManifest = {
+	pluginName: 'playground',
+	routes: [
+		{
+			path: 'playground',
+			componentId: 'PlaygroundIndex',
+			children: [
+				{ path: '', componentId: 'PlaygroundIndex' },
+				{ path: 'new', componentId: 'PlaygroundEditor' },
+				{ path: ':schemaName', componentId: 'PlaygroundEditor' },
+			],
+		},
+	],
+	sidebar: [
+		{
+			id: 'playground',
+			title: 'Playground',
+			url: '/playground',
+			icon: 'Boxes',
+			order: 20,
+		},
+	],
+}
+
+/**
+ * Component loaders for lazy loading
+ */
+const components: Record<
+	string,
+	() => Promise<{ default: ComponentType<unknown> }>
+> = {
+	PlaygroundIndex: () => import('./pages/Playground'),
+	PlaygroundEditor: () => import('./pages/Playground/Editor'),
+}
+
+/**
+ * Self-register the plugin when the script is loaded
+ */
+function registerPlugin() {
+	// Initialize registry if needed
+	if (!window.__MAGNET_PLUGINS__) {
+		window.__MAGNET_PLUGINS__ = []
+	}
+
+	// Check if already registered
+	const alreadyRegistered = window.__MAGNET_PLUGINS__.some(
+		(p) => p.manifest.pluginName === manifest.pluginName,
+	)
+
+	if (!alreadyRegistered) {
+		window.__MAGNET_PLUGINS__.push({ manifest, components })
+		console.log(`[Magnet] Plugin registered: ${manifest.pluginName}`)
+	}
+}
+
+// Auto-register on load
+registerPlugin()
+
+/**
+ * For `createMagnetAdmin({ plugins: [playgroundPlugin] })` (optional; admin usually loads the IIFE at runtime).
+ */
+export const playgroundPlugin = () => ({ manifest, components })
+export default playgroundPlugin

package/src/frontend/pages/Playground/Editor/AddFieldDialog.tsx

@@ -0,0 +1,187 @@
+import {
+	Button,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Input,
+	Label,
+} from '@magnet-cms/ui/components'
+import { cn } from '@magnet-cms/ui/lib'
+import { useState } from 'react'
+import {
+	FIELD_TYPES,
+	FIELD_TYPE_COLORS,
+	type FieldTypeDefinition,
+} from '../constants/field-types'
+import {
+	createFieldFromType,
+	useSchemaBuilder,
+} from '../hooks/useSchemaBuilder'
+import type { FieldType } from '../types/builder.types'
+
+interface AddFieldDialogProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}
+
+export function AddFieldDialog({ open, onOpenChange }: AddFieldDialogProps) {
+	const { addField } = useSchemaBuilder()
+	const [selectedType, setSelectedType] = useState<FieldType>('text')
+	const [displayName, setDisplayName] = useState('')
+	const [error, setError] = useState('')
+
+	const handleAdd = () => {
+		if (!displayName.trim()) {
+			setError('Display name is required')
+			return
+		}
+
+		const fieldData = createFieldFromType(selectedType, displayName.trim())
+		addField(fieldData)
+		handleClose()
+	}
+
+	const handleClose = () => {
+		setSelectedType('text')
+		setDisplayName('')
+		setError('')
+		onOpenChange(false)
+	}
+
+	const handleQuickAdd = (type: FieldTypeDefinition) => {
+		const fieldData = createFieldFromType(type.id, type.label)
+		addField(fieldData)
+		handleClose()
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Add New Field</DialogTitle>
+					<DialogDescription>
+						Choose a field type and enter a display name for your new field.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-6 py-4">
+					{/* Quick Add Section */}
+					<div>
+						<Label className="text-xs text-muted-foreground uppercase tracking-wider mb-3 block">
+							Quick Add
+						</Label>
+						<div className="grid grid-cols-3 gap-2">
+							{FIELD_TYPES.map((type) => {
+								const Icon = type.icon
+								return (
+									<button
+										key={type.id}
+										type="button"
+										onClick={() => handleQuickAdd(type)}
+										className={cn(
+											'p-3 rounded-lg border text-left hover:shadow-sm transition-all',
+											'hover:border-muted-foreground/50',
+										)}
+									>
+										<div
+											className={cn(
+												'w-8 h-8 rounded-lg flex items-center justify-center mb-2',
+												FIELD_TYPE_COLORS[type.id],
+											)}
+										>
+											<Icon className="h-4 w-4" />
+										</div>
+										<div className="text-sm font-medium">{type.label}</div>
+										<div className="text-[10px] text-muted-foreground line-clamp-1">
+											{type.description}
+										</div>
+									</button>
+								)
+							})}
+						</div>
+					</div>
+
+					<div className="relative">
+						<div className="absolute inset-0 flex items-center">
+							<span className="w-full border-t" />
+						</div>
+						<div className="relative flex justify-center text-xs uppercase">
+							<span className="bg-background px-2 text-muted-foreground">
+								Or customize
+							</span>
+						</div>
+					</div>
+
+					{/* Custom Field Section */}
+					<div className="space-y-4">
+						<div className="space-y-2">
+							<Label htmlFor="fieldType">Field Type</Label>
+							<div className="grid grid-cols-3 gap-2">
+								{FIELD_TYPES.map((type) => {
+									const Icon = type.icon
+									return (
+										<button
+											key={type.id}
+											type="button"
+											onClick={() => setSelectedType(type.id)}
+											className={cn(
+												'p-2 rounded-lg border flex items-center gap-2 transition-all',
+												selectedType === type.id
+													? 'border-foreground bg-muted'
+													: 'hover:border-muted-foreground/50',
+											)}
+										>
+											<div
+												className={cn(
+													'w-6 h-6 rounded flex items-center justify-center',
+													FIELD_TYPE_COLORS[type.id],
+												)}
+											>
+												<Icon className="h-3 w-3" />
+											</div>
+											<span className="text-sm">{type.label}</span>
+										</button>
+									)
+								})}
+							</div>
+						</div>
+
+						<div className="space-y-2">
+							<Label htmlFor="displayName">Display Name</Label>
+							<Input
+								id="displayName"
+								placeholder="e.g., First Name, Email Address, Birth Date..."
+								value={displayName}
+								onChange={(e) => {
+									setDisplayName(e.target.value)
+									setError('')
+								}}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter' && displayName.trim()) {
+										handleAdd()
+									}
+								}}
+							/>
+							{error && <p className="text-xs text-destructive">{error}</p>}
+							<p className="text-xs text-muted-foreground">
+								The API ID will be automatically generated from the display name
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<DialogFooter>
+					<Button variant="outline" onClick={handleClose}>
+						Cancel
+					</Button>
+					<Button onClick={handleAdd} disabled={!displayName.trim()}>
+						Add Field
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}

package/src/frontend/pages/Playground/Editor/CodePreview.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@magnet-cms/ui/components'
+import { Check, Copy } from 'lucide-react'
+import { useState } from 'react'
+import { useSchemaBuilder } from '../hooks/useSchemaBuilder'
+import type { ViewMode } from '../types/builder.types'
+
+interface CodePreviewProps {
+	mode: ViewMode
+}
+
+export function CodePreview({ mode }: CodePreviewProps) {
+	const { generatedCode, generatedJSON } = useSchemaBuilder()
+	const [copied, setCopied] = useState(false)
+
+	const content =
+		mode === 'code' ? generatedCode : JSON.stringify(generatedJSON, null, 2)
+
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(content)
+		setCopied(true)
+		setTimeout(() => setCopied(false), 2000)
+	}
+
+	return (
+		<div className="h-full flex flex-col border rounded-xl overflow-hidden bg-muted/30">
+			{/* Header */}
+			<div className="bg-muted/50 border-b px-4 py-2 flex items-center justify-between">
+				<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+					{mode === 'code' ? 'Generated TypeScript' : 'JSON Schema'}
+				</h3>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 text-xs"
+					onClick={handleCopy}
+				>
+					{copied ? (
+						<>
+							<Check className="h-3 w-3 mr-1.5 text-green-500" />
+							Copied
+						</>
+					) : (
+						<>
+							<Copy className="h-3 w-3 mr-1.5" />
+							Copy
+						</>
+					)}
+				</Button>
+			</div>
+
+			{/* Code Content */}
+			<div className="flex-1 overflow-auto p-4">
+				<pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap">
+					<code>{content}</code>
+				</pre>
+			</div>
+		</div>
+	)
+}