@magnet-cms/plugin-playground 2.0.0

package/dist/frontend/bundle.iife.js

@@ -0,0 +1,2163 @@
+var MagnetPluginPlayground = (function(exports, react, reactRouterDom, jsxRuntime, admin, components$1, lucideReact, lib, utils) {
+  "use strict";
+  const manifest = {
+    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
+      }
+    ]
+  };
+  const components = {
+    PlaygroundIndex: () => Promise.resolve().then(() => index$1),
+    PlaygroundEditor: () => Promise.resolve().then(() => index)
+  };
+  function registerPlugin() {
+    if (!window.__MAGNET_PLUGINS__) {
+      window.__MAGNET_PLUGINS__ = [];
+    }
+    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}`);
+    }
+  }
+  registerPlugin();
+  const playgroundPlugin = () => ({ manifest, components });
+  const Playground = () => {
+    const navigate = reactRouterDom.useNavigate();
+    react.useEffect(() => {
+      navigate("/playground/new", { replace: true });
+    }, [navigate]);
+    return null;
+  };
+  const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: Playground
+  }, Symbol.toStringTag, { value: "Module" }));
+  const FIELD_TYPES = [
+    {
+      id: "text",
+      label: "Text",
+      description: "Short or long text content",
+      icon: lucideReact.Type,
+      tsType: "string",
+      defaultValidations: [{ type: "IsString" }, { type: "IsNotEmpty" }],
+      defaultUI: { type: "text" }
+    },
+    {
+      id: "number",
+      label: "Number",
+      description: "Integer or decimal numbers",
+      icon: lucideReact.Hash,
+      tsType: "number",
+      defaultValidations: [{ type: "IsNumber" }],
+      defaultUI: { type: "number" }
+    },
+    {
+      id: "date",
+      label: "Date",
+      description: "Date and time values",
+      icon: lucideReact.Calendar,
+      tsType: "Date",
+      defaultValidations: [{ type: "IsDate" }],
+      defaultUI: { type: "date" },
+      requiresTransformer: true
+    },
+    {
+      id: "boolean",
+      label: "Boolean",
+      description: "True or false toggle",
+      icon: lucideReact.ToggleLeft,
+      tsType: "boolean",
+      defaultValidations: [{ type: "IsBoolean" }],
+      defaultUI: { type: "switch" }
+    },
+    {
+      id: "select",
+      label: "Select",
+      description: "Dropdown with predefined options",
+      icon: lucideReact.List,
+      tsType: "string",
+      defaultValidations: [{ type: "IsString" }],
+      defaultUI: { type: "select", options: [] },
+      hasOptions: true
+    },
+    {
+      id: "relation",
+      label: "Relation",
+      description: "Reference to another schema",
+      icon: lucideReact.Link2,
+      tsType: "string",
+      defaultValidations: [{ type: "IsString" }],
+      defaultUI: { type: "relationship" },
+      hasRelationConfig: true
+    }
+  ];
+  function getFieldTypeDefinition(type) {
+    return FIELD_TYPES.find((ft) => ft.id === type);
+  }
+  const UI_SUBTYPES = {
+    text: [
+      { id: "text", label: "Text Input", description: "Single line text" },
+      { id: "textarea", label: "Text Area", description: "Multi-line text" },
+      { id: "email", label: "Email", description: "Email with validation" },
+      { id: "phone", label: "Phone", description: "Phone number input" },
+      { id: "richText", label: "Rich Text", description: "Rich text editor" }
+    ],
+    number: [
+      {
+        id: "number",
+        label: "Number Input",
+        description: "Standard number field"
+      },
+      {
+        id: "quantity",
+        label: "Quantity",
+        description: "Number with +/- buttons"
+      }
+    ],
+    date: [
+      {
+        id: "date",
+        label: "Date Picker",
+        description: "Calendar date selection"
+      }
+    ],
+    boolean: [
+      { id: "switch", label: "Switch", description: "Toggle switch" },
+      { id: "checkbox", label: "Checkbox", description: "Checkbox input" }
+    ],
+    select: [
+      { id: "select", label: "Dropdown", description: "Single select dropdown" },
+      {
+        id: "multiSelect",
+        label: "Multi Select",
+        description: "Select multiple options"
+      },
+      { id: "combobox", label: "Combobox", description: "Searchable dropdown" },
+      { id: "radio", label: "Radio Group", description: "Radio button options" }
+    ],
+    relation: [
+      {
+        id: "relationship",
+        label: "Relationship",
+        description: "Link to another schema"
+      }
+    ]
+  };
+  const VALIDATION_RULES_BY_TYPE = {
+    text: [
+      "IsString",
+      "IsNotEmpty",
+      "Length",
+      "MinLength",
+      "MaxLength",
+      "IsEmail",
+      "IsUrl",
+      "IsUUID",
+      "Matches"
+    ],
+    number: ["IsNumber", "IsInt", "IsPositive", "IsNegative", "Min", "Max"],
+    date: ["IsDate", "IsNotEmpty", "MinDate", "MaxDate"],
+    boolean: ["IsBoolean"],
+    select: ["IsString", "IsNotEmpty", "IsIn"],
+    relation: ["IsString", "IsNotEmpty", "IsMongoId"]
+  };
+  const VALIDATION_RULE_DEFINITIONS = [
+    {
+      type: "IsString",
+      label: "Is String",
+      description: "Must be a string",
+      constraintCount: 0
+    },
+    {
+      type: "IsNumber",
+      label: "Is Number",
+      description: "Must be a number",
+      constraintCount: 0
+    },
+    {
+      type: "IsInt",
+      label: "Is Integer",
+      description: "Must be an integer",
+      constraintCount: 0
+    },
+    {
+      type: "IsBoolean",
+      label: "Is Boolean",
+      description: "Must be true or false",
+      constraintCount: 0
+    },
+    {
+      type: "IsDate",
+      label: "Is Date",
+      description: "Must be a valid date",
+      constraintCount: 0
+    },
+    {
+      type: "IsNotEmpty",
+      label: "Not Empty",
+      description: "Cannot be empty",
+      constraintCount: 0
+    },
+    {
+      type: "IsEmail",
+      label: "Is Email",
+      description: "Must be a valid email",
+      constraintCount: 0
+    },
+    {
+      type: "IsUrl",
+      label: "Is URL",
+      description: "Must be a valid URL",
+      constraintCount: 0
+    },
+    {
+      type: "IsUUID",
+      label: "Is UUID",
+      description: "Must be a valid UUID",
+      constraintCount: 0
+    },
+    {
+      type: "IsMongoId",
+      label: "Is MongoDB ID",
+      description: "Must be a valid MongoDB ObjectId",
+      constraintCount: 0
+    },
+    {
+      type: "IsPositive",
+      label: "Is Positive",
+      description: "Must be a positive number",
+      constraintCount: 0
+    },
+    {
+      type: "IsNegative",
+      label: "Is Negative",
+      description: "Must be a negative number",
+      constraintCount: 0
+    },
+    {
+      type: "Length",
+      label: "Length",
+      description: "String length between min and max",
+      constraintCount: 2,
+      constraintLabels: ["Min", "Max"]
+    },
+    {
+      type: "MinLength",
+      label: "Min Length",
+      description: "Minimum string length",
+      constraintCount: 1,
+      constraintLabels: ["Min"]
+    },
+    {
+      type: "MaxLength",
+      label: "Max Length",
+      description: "Maximum string length",
+      constraintCount: 1,
+      constraintLabels: ["Max"]
+    },
+    {
+      type: "Min",
+      label: "Minimum",
+      description: "Minimum number value",
+      constraintCount: 1,
+      constraintLabels: ["Min"]
+    },
+    {
+      type: "Max",
+      label: "Maximum",
+      description: "Maximum number value",
+      constraintCount: 1,
+      constraintLabels: ["Max"]
+    },
+    {
+      type: "Matches",
+      label: "Matches Pattern",
+      description: "Must match regex pattern",
+      constraintCount: 1,
+      constraintLabels: ["Pattern"]
+    },
+    {
+      type: "IsIn",
+      label: "Is In List",
+      description: "Must be one of the allowed values",
+      constraintCount: 1,
+      constraintLabels: ["Values (comma-separated)"]
+    }
+  ];
+  function getValidationRuleDefinition(type) {
+    return VALIDATION_RULE_DEFINITIONS.find((r) => r.type === type);
+  }
+  const RELATION_TYPES = [
+    {
+      value: "oneToOne",
+      label: "One to One",
+      description: "Each record relates to exactly one other"
+    },
+    {
+      value: "oneToMany",
+      label: "One to Many",
+      description: "One record relates to many others"
+    },
+    {
+      value: "manyToOne",
+      label: "Many to One",
+      description: "Many records relate to one"
+    },
+    {
+      value: "manyToMany",
+      label: "Many to Many",
+      description: "Many records relate to many others"
+    }
+  ];
+  const FIELD_TYPE_COLORS = {
+    text: "bg-blue-50 text-blue-700 border-blue-200",
+    number: "bg-amber-50 text-amber-700 border-amber-200",
+    date: "bg-green-50 text-green-700 border-green-200",
+    boolean: "bg-purple-50 text-purple-700 border-purple-200",
+    select: "bg-cyan-50 text-cyan-700 border-cyan-200",
+    relation: "bg-indigo-50 text-indigo-700 border-indigo-200"
+  };
+  const DEFAULT_SCHEMA_CONFIG = {
+    name: "",
+    versioning: true,
+    i18n: true
+  };
+  const DEFAULT_BUILDER_STATE = {
+    schema: DEFAULT_SCHEMA_CONFIG,
+    fields: [],
+    selectedFieldId: null,
+    viewMode: "builder",
+    isDirty: false,
+    lastSaved: null,
+    isNew: true
+  };
+  const FIELD_TYPE_TO_TS_TYPE = {
+    text: "string",
+    number: "number",
+    date: "Date",
+    boolean: "boolean",
+    select: "string",
+    relation: "string"
+    // ObjectId reference
+  };
+  function generateSchemaCode(state) {
+    if (!state.schema.name) {
+      return "// Enter a schema name to generate code";
+    }
+    const imports = generateImports(state.fields);
+    const classDecorator = generateSchemaDecorator(state.schema);
+    const properties = state.fields.map((field) => generateFieldCode(field)).join("\n\n");
+    return `${imports}
+
+${classDecorator}
+export class ${state.schema.name} {
+${properties}
+}
+`;
+  }
+  function generateImports(fields) {
+    const magnetImports = /* @__PURE__ */ new Set(["Schema", "Prop", "UI"]);
+    const validatorImports = /* @__PURE__ */ new Set();
+    let needsTypeTransformer = false;
+    for (const field of fields) {
+      if (field.validations.length > 0) {
+        magnetImports.add("Validators");
+        for (const v of field.validations) {
+          validatorImports.add(v.type);
+        }
+      }
+      if (field.type === "date") {
+        needsTypeTransformer = true;
+      }
+    }
+    const lines = [];
+    lines.push(
+      `import { ${Array.from(magnetImports).sort().join(", ")} } from '@magnet-cms/common'`
+    );
+    if (needsTypeTransformer) {
+      lines.push(`import { Type } from 'class-transformer'`);
+    }
+    if (validatorImports.size > 0) {
+      lines.push(
+        `import {
+	${Array.from(validatorImports).sort().join(",\n	")},
+} from 'class-validator'`
+      );
+    }
+    return lines.join("\n");
+  }
+  function generateSchemaDecorator(schema) {
+    const options = [];
+    if (schema.versioning !== void 0) {
+      options.push(`versioning: ${schema.versioning}`);
+    }
+    if (schema.i18n !== void 0) {
+      options.push(`i18n: ${schema.i18n}`);
+    }
+    if (options.length === 0) {
+      return "@Schema()";
+    }
+    return `@Schema({ ${options.join(", ")} })`;
+  }
+  function generateFieldCode(field) {
+    const decorators = [];
+    const indent = "	";
+    if (field.type === "date") {
+      decorators.push(`${indent}@Type(() => Date)`);
+    }
+    decorators.push(`${indent}@Prop(${generatePropOptions(field)})`);
+    if (field.validations.length > 0) {
+      const validators = field.validations.map((v) => formatValidator(v)).join(", ");
+      decorators.push(`${indent}@Validators(${validators})`);
+    }
+    decorators.push(`${indent}@UI(${generateUIOptions(field)})`);
+    const declaration = `${indent}${field.name}: ${field.tsType}`;
+    return [...decorators, declaration].join("\n");
+  }
+  function generatePropOptions(field) {
+    const options = [];
+    if (field.prop.required) {
+      options.push("required: true");
+    }
+    if (field.prop.unique) {
+      options.push("unique: true");
+    }
+    if (field.prop.intl) {
+      options.push("intl: true");
+    }
+    if (field.prop.hidden) {
+      options.push("hidden: true");
+    }
+    if (field.prop.readonly) {
+      options.push("readonly: true");
+    }
+    if (field.prop.default !== void 0) {
+      options.push(`default: ${JSON.stringify(field.prop.default)}`);
+    }
+    if (options.length === 0) {
+      return "";
+    }
+    return `{ ${options.join(", ")} }`;
+  }
+  function generateUIOptions(field) {
+    const options = [];
+    if (field.ui.tab) {
+      options.push(`tab: '${field.ui.tab}'`);
+    }
+    if (field.ui.side) {
+      options.push("side: true");
+    }
+    if (field.ui.type) {
+      options.push(`type: '${field.ui.type}'`);
+    }
+    if (field.ui.label && field.ui.label !== field.displayName) {
+      options.push(`label: '${escapeString(field.ui.label)}'`);
+    }
+    if (field.ui.description) {
+      options.push(`description: '${escapeString(field.ui.description)}'`);
+    }
+    if (field.ui.placeholder) {
+      options.push(`placeholder: '${escapeString(field.ui.placeholder)}'`);
+    }
+    if (field.ui.row) {
+      options.push("row: true");
+    }
+    if (field.ui.options && field.ui.options.length > 0) {
+      const optionsStr = field.ui.options.map(
+        (o) => `{ key: '${escapeString(o.key)}', value: '${escapeString(o.value)}' }`
+      ).join(", ");
+      options.push(`options: [${optionsStr}]`);
+    }
+    if (options.length === 0) {
+      return "{}";
+    }
+    return `{ ${options.join(", ")} }`;
+  }
+  function formatValidator(rule) {
+    if (!rule.constraints || rule.constraints.length === 0) {
+      return `${rule.type}()`;
+    }
+    const args = rule.constraints.map((c) => {
+      if (typeof c === "string") {
+        if (rule.type === "Matches") {
+          return c.startsWith("/") ? c : `/${c}/`;
+        }
+        return `'${escapeString(String(c))}'`;
+      }
+      return String(c);
+    }).join(", ");
+    return `${rule.type}(${args})`;
+  }
+  function escapeString(str) {
+    return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
+  }
+  function generateSchemaJSON(state) {
+    return {
+      name: state.schema.name,
+      options: {
+        versioning: state.schema.versioning,
+        i18n: state.schema.i18n
+      },
+      properties: state.fields.map((field) => ({
+        name: field.name,
+        displayName: field.displayName,
+        type: field.type,
+        tsType: field.tsType,
+        required: field.prop.required,
+        unique: field.prop.unique,
+        intl: field.prop.intl,
+        ui: field.ui,
+        validations: field.validations,
+        ...field.relationConfig && { relationConfig: field.relationConfig }
+      }))
+    };
+  }
+  function generateId() {
+    return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+  }
+  function toApiId(displayName) {
+    return displayName.toLowerCase().replace(/[^a-z0-9\s]/g, "").split(/\s+/).filter(Boolean).map(
+      (word, index2) => index2 === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+    ).join("");
+  }
+  function schemaBuilderReducer(state, action) {
+    switch (action.type) {
+      case "SET_SCHEMA":
+        return {
+          ...state,
+          schema: { ...state.schema, ...action.payload },
+          isDirty: true
+        };
+      case "ADD_FIELD":
+        return {
+          ...state,
+          fields: [...state.fields, action.payload],
+          selectedFieldId: action.payload.id,
+          isDirty: true
+        };
+      case "UPDATE_FIELD":
+        return {
+          ...state,
+          fields: state.fields.map(
+            (field) => field.id === action.payload.id ? { ...field, ...action.payload.changes } : field
+          ),
+          isDirty: true
+        };
+      case "DELETE_FIELD":
+        return {
+          ...state,
+          fields: state.fields.filter((field) => field.id !== action.payload),
+          selectedFieldId: state.selectedFieldId === action.payload ? null : state.selectedFieldId,
+          isDirty: true
+        };
+      case "REORDER_FIELDS":
+        return {
+          ...state,
+          fields: action.payload,
+          isDirty: true
+        };
+      case "SELECT_FIELD":
+        return {
+          ...state,
+          selectedFieldId: action.payload
+        };
+      case "SET_VIEW_MODE":
+        return {
+          ...state,
+          viewMode: action.payload
+        };
+      case "MARK_DIRTY":
+        return {
+          ...state,
+          isDirty: true
+        };
+      case "MARK_SAVED":
+        return {
+          ...state,
+          isDirty: false,
+          lastSaved: /* @__PURE__ */ new Date()
+        };
+      case "RESET":
+        return action.payload;
+      case "LOAD_SCHEMA":
+        return {
+          ...state,
+          schema: action.payload.schema,
+          fields: action.payload.fields,
+          isDirty: false,
+          isNew: false
+        };
+      default:
+        return state;
+    }
+  }
+  const SchemaBuilderContext = react.createContext(null);
+  function useSchemaBuilder() {
+    const context = react.useContext(SchemaBuilderContext);
+    if (!context) {
+      throw new Error(
+        "useSchemaBuilder must be used within a SchemaBuilderProvider"
+      );
+    }
+    return context;
+  }
+  function useSchemaBuilderState(initialState = DEFAULT_BUILDER_STATE) {
+    const [state, dispatch] = react.useReducer(schemaBuilderReducer, initialState);
+    const addField = react.useCallback((partial) => {
+      const fieldType = partial.type || "text";
+      const definition = getFieldTypeDefinition(fieldType);
+      const displayName = partial.displayName || "New Field";
+      const name = partial.name || toApiId(displayName);
+      const field = {
+        id: generateId(),
+        name,
+        displayName,
+        type: fieldType,
+        tsType: (definition == null ? void 0 : definition.tsType) || FIELD_TYPE_TO_TS_TYPE[fieldType] || "string",
+        prop: {
+          required: false,
+          unique: false,
+          ...partial.prop
+        },
+        ui: {
+          tab: "General",
+          ...definition == null ? void 0 : definition.defaultUI,
+          ...partial.ui
+        },
+        validations: partial.validations || (definition == null ? void 0 : definition.defaultValidations) || [],
+        relationConfig: partial.relationConfig
+      };
+      dispatch({ type: "ADD_FIELD", payload: field });
+    }, []);
+    const updateField = react.useCallback(
+      (id, changes) => {
+        dispatch({ type: "UPDATE_FIELD", payload: { id, changes } });
+      },
+      []
+    );
+    const deleteField = react.useCallback((id) => {
+      dispatch({ type: "DELETE_FIELD", payload: id });
+    }, []);
+    const selectField = react.useCallback((id) => {
+      dispatch({ type: "SELECT_FIELD", payload: id });
+    }, []);
+    const reorderFields = react.useCallback((fields) => {
+      dispatch({ type: "REORDER_FIELDS", payload: fields });
+    }, []);
+    const setViewMode = react.useCallback((mode) => {
+      dispatch({ type: "SET_VIEW_MODE", payload: mode });
+    }, []);
+    const updateSchema = react.useCallback((changes) => {
+      dispatch({ type: "SET_SCHEMA", payload: changes });
+    }, []);
+    const resetState = react.useCallback((newState) => {
+      dispatch({ type: "RESET", payload: newState || DEFAULT_BUILDER_STATE });
+    }, []);
+    const selectedField = react.useMemo(
+      () => state.fields.find((f) => f.id === state.selectedFieldId) ?? null,
+      [state.fields, state.selectedFieldId]
+    );
+    const generatedCode = react.useMemo(() => generateSchemaCode(state), [state]);
+    const generatedJSON = react.useMemo(() => generateSchemaJSON(state), [state]);
+    return {
+      state,
+      dispatch,
+      addField,
+      updateField,
+      deleteField,
+      selectField,
+      reorderFields,
+      setViewMode,
+      updateSchema,
+      resetState,
+      selectedField,
+      generatedCode,
+      generatedJSON
+    };
+  }
+  function createFieldFromType(type, displayName) {
+    const definition = getFieldTypeDefinition(type);
+    if (!definition) {
+      return { type, displayName };
+    }
+    return {
+      type,
+      displayName,
+      name: toApiId(displayName),
+      tsType: definition.tsType,
+      validations: [...definition.defaultValidations],
+      ui: { ...definition.defaultUI },
+      prop: { required: false, unique: false },
+      ...definition.hasRelationConfig && {
+        relationConfig: {
+          targetSchema: "",
+          relationType: "manyToOne"
+        }
+      }
+    };
+  }
+  function AddFieldDialog({ open, onOpenChange }) {
+    const { addField } = useSchemaBuilder();
+    const [selectedType, setSelectedType] = react.useState("text");
+    const [displayName, setDisplayName] = react.useState("");
+    const [error, setError] = react.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) => {
+      const fieldData = createFieldFromType(type.id, type.label);
+      addField(fieldData);
+      handleClose();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(components$1.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.DialogTitle, { children: "Add New Field" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.DialogDescription, { children: "Choose a field type and enter a display name for your new field." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs text-muted-foreground uppercase tracking-wider mb-3 block", children: "Quick Add" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: FIELD_TYPES.map((type) => {
+            const Icon = type.icon;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleQuickAdd(type),
+                className: lib.cn(
+                  "p-3 rounded-lg border text-left hover:shadow-sm transition-all",
+                  "hover:border-muted-foreground/50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: lib.cn(
+                        "w-8 h-8 rounded-lg flex items-center justify-center mb-2",
+                        FIELD_TYPE_COLORS[type.id]
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: type.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground line-clamp-1", children: type.description })
+                ]
+              },
+              type.id
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full border-t" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-background px-2 text-muted-foreground", children: "Or customize" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { htmlFor: "fieldType", children: "Field Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: FIELD_TYPES.map((type) => {
+              const Icon = type.icon;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedType(type.id),
+                  className: lib.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"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: lib.cn(
+                          "w-6 h-6 rounded flex items-center justify-center",
+                          FIELD_TYPE_COLORS[type.id]
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: type.label })
+                  ]
+                },
+                type.id
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { htmlFor: "displayName", children: "Display Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components$1.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 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "The API ID will be automatically generated from the display name" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { variant: "outline", onClick: handleClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { onClick: handleAdd, disabled: !displayName.trim(), children: "Add Field" })
+      ] })
+    ] }) });
+  }
+  function CodePreview({ mode }) {
+    const { generatedCode, generatedJSON } = useSchemaBuilder();
+    const [copied, setCopied] = react.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), 2e3);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col border rounded-xl overflow-hidden bg-muted/30", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 border-b px-4 py-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: mode === "code" ? "Generated TypeScript" : "JSON Schema" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components$1.Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-xs",
+            onClick: handleCopy,
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 mr-1.5 text-green-500" }),
+              "Copied"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3 w-3 mr-1.5" }),
+              "Copy"
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono text-muted-foreground whitespace-pre-wrap", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: content }) }) })
+    ] });
+  }
+  function FieldCard({
+    field,
+    isSelected,
+    isDragging,
+    onClick,
+    onEdit,
+    onDelete,
+    showActions = true,
+    showDragHandle = true
+  }) {
+    const definition = getFieldTypeDefinition(field.type);
+    const Icon = definition == null ? void 0 : definition.icon;
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick();
+      }
+    };
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: Using div for drag-and-drop compatibility
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: lib.cn(
+            "group p-4 flex items-center justify-between transition-colors cursor-pointer border-l-2",
+            isSelected ? "bg-muted/80 border-l-foreground" : "hover:bg-muted/50 border-l-transparent hover:border-l-muted-foreground/50",
+            isDragging && "opacity-50"
+          ),
+          onClick,
+          onKeyDown: handleKeyDown,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              showDragHandle ? /* @__PURE__ */ jsxRuntime.jsx(components$1.SortableItemHandle, { className: "text-muted-foreground/50 hover:text-muted-foreground touch-none", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground/50", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: lib.cn(
+                    "w-8 h-8 rounded-lg flex items-center justify-center border",
+                    FIELD_TYPE_COLORS[field.type] || "bg-muted text-muted-foreground border-muted"
+                  ),
+                  children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: field.displayName }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded border", children: field.name })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground capitalize", children: (definition == null ? void 0 : definition.label) || field.type }),
+                  field.prop.required && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-0.5 h-0.5 rounded-full bg-muted-foreground/50" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      components$1.Badge,
+                      {
+                        variant: "outline",
+                        className: "text-[10px] px-1.5 py-0 h-4 bg-emerald-50 text-emerald-700 border-emerald-200",
+                        children: "Required"
+                      }
+                    )
+                  ] }),
+                  field.prop.unique && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-0.5 h-0.5 rounded-full bg-muted-foreground/50" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      components$1.Badge,
+                      {
+                        variant: "outline",
+                        className: "text-[10px] px-1.5 py-0 h-4 bg-amber-50 text-amber-700 border-amber-200",
+                        children: "Unique"
+                      }
+                    )
+                  ] }),
+                  field.relationConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-0.5 h-0.5 rounded-full bg-muted-foreground/50" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                      field.relationConfig.relationType,
+                      " (",
+                      field.relationConfig.targetSchema || "...",
+                      ")"
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            showActions && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: lib.cn(
+                  "flex items-center gap-1 transition-opacity",
+                  isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-8 w-8",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onEdit == null ? void 0 : onEdit();
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete == null ? void 0 : onDelete();
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+  function FieldList({ onAddField, readOnly = false }) {
+    const { state, selectField, deleteField, reorderFields } = useSchemaBuilder();
+    const handleReorder = (reorderedFields) => {
+      reorderFields(reorderedFields);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-xl overflow-hidden bg-background shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/50 border-b px-4 py-2 flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: [
+        "Fields (",
+        state.fields.length,
+        ")"
+      ] }) }),
+      state.fields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "mx-auto h-10 w-10 mb-3 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium mb-1", children: "No fields yet" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: readOnly ? "This schema has no fields defined" : "Add your first field to start building your schema" })
+      ] }) : readOnly ? (
+        // Read-only mode: simple list without drag/drop
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y", children: state.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+          FieldCard,
+          {
+            field,
+            isSelected: false,
+            showActions: false,
+            showDragHandle: false
+          },
+          field.id
+        )) })
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        components$1.Sortable,
+        {
+          value: state.fields,
+          onValueChange: handleReorder,
+          getItemValue: (field) => field.id,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components$1.SortableContent, { className: "divide-y", children: state.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SortableItem, { value: field.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+              FieldCard,
+              {
+                field,
+                isSelected: field.id === state.selectedFieldId,
+                onClick: () => selectField(field.id),
+                onEdit: () => selectField(field.id),
+                onDelete: () => {
+                  if (window.confirm(
+                    `Are you sure you want to delete "${field.displayName}"?`
+                  )) {
+                    deleteField(field.id);
+                  }
+                }
+              }
+            ) }, field.id)) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components$1.SortableOverlay, { children: ({ value }) => {
+              const field = state.fields.find((f) => f.id === value);
+              return field ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background border rounded-lg shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                FieldCard,
+                {
+                  field,
+                  isSelected: true,
+                  showActions: false,
+                  showDragHandle: false
+                }
+              ) }) : null;
+            } })
+          ]
+        }
+      ),
+      !readOnly && onAddField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-muted/30 border-t", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onAddField,
+          className: "w-full py-2.5 rounded-lg border-2 border-dashed border-muted-foreground/25 hover:border-muted-foreground/50 hover:bg-muted/50 transition-all text-xs font-semibold text-muted-foreground hover:text-foreground flex items-center justify-center gap-2 group",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted rounded p-0.5 group-hover:bg-muted-foreground/20 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3" }) }),
+            "Add new field"
+          ]
+        }
+      ) })
+    ] });
+  }
+  const RELATION_TYPE_OPTIONS = [
+    {
+      value: "oneToOne",
+      label: "One to One",
+      description: "Each record relates to exactly one other record",
+      diagram: { leftMultiple: false, rightMultiple: false }
+    },
+    {
+      value: "oneToMany",
+      label: "One to Many",
+      description: "One record can relate to many other records",
+      diagram: { leftMultiple: false, rightMultiple: true }
+    },
+    {
+      value: "manyToOne",
+      label: "Many to One",
+      description: "Many records can relate to one other record",
+      diagram: { leftMultiple: true, rightMultiple: false }
+    },
+    {
+      value: "manyToMany",
+      label: "Many to Many",
+      description: "Many records can relate to many other records",
+      diagram: { leftMultiple: true, rightMultiple: true }
+    }
+  ];
+  function RelationDiagram({
+    leftLabel,
+    rightLabel,
+    leftMultiple,
+    rightMultiple,
+    small = false
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        leftMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "bg-background border rounded font-medium shadow-sm opacity-50 -mr-1",
+              small ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs"
+            ),
+            children: leftLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "bg-background border rounded font-medium shadow-sm relative z-10",
+              small ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs"
+            ),
+            children: leftLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "bg-muted-foreground/60 rounded-full",
+              small ? "w-1.5 h-1.5" : "w-2 h-2"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn("h-px bg-muted-foreground/60", small ? "w-6" : "w-10")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "border-r-2 border-t-2 border-b-2 border-muted-foreground/60 rotate-45",
+              small ? "w-1.5 h-1.5 -ml-1" : "w-2 h-2 -ml-1.5"
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "bg-background border rounded font-medium shadow-sm relative z-10",
+              small ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs"
+            ),
+            children: rightLabel
+          }
+        ),
+        rightMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: lib.cn(
+              "bg-background border rounded font-medium shadow-sm opacity-50 -ml-1",
+              small ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs"
+            ),
+            children: rightLabel
+          }
+        )
+      ] })
+    ] });
+  }
+  function RelationConfigModal({
+    open,
+    onOpenChange,
+    currentSchema,
+    relationConfig,
+    onSave
+  }) {
+    const { schemas } = admin.useAdmin();
+    const [config, setConfig] = react.useState({
+      targetSchema: (relationConfig == null ? void 0 : relationConfig.targetSchema) || "",
+      relationType: (relationConfig == null ? void 0 : relationConfig.relationType) || "manyToOne",
+      inverseSide: relationConfig == null ? void 0 : relationConfig.inverseSide
+    });
+    const handleSave = () => {
+      onSave(config);
+      onOpenChange(false);
+    };
+    const selectedTypeOption = RELATION_TYPE_OPTIONS.find(
+      (t) => t.value === config.relationType
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(components$1.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.DialogTitle, { children: "Configure Relation" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.DialogDescription, { children: "Define how this field relates to another schema" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-sm font-medium", children: "Relation Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: RELATION_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setConfig((c) => ({ ...c, relationType: option.value })),
+              className: lib.cn(
+                "p-3 rounded-lg border text-left transition-all",
+                config.relationType === option.value ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-muted-foreground/50 hover:bg-muted/50"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RelationDiagram,
+                  {
+                    leftLabel: currentSchema || "A",
+                    rightLabel: config.targetSchema || "B",
+                    leftMultiple: option.diagram.leftMultiple,
+                    rightMultiple: option.diagram.rightMultiple,
+                    small: true
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: option.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: option.description })
+              ]
+            },
+            option.value
+          )) })
+        ] }),
+        selectedTypeOption && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-muted/30 rounded-lg border", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-3 text-center", children: "Preview" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RelationDiagram,
+            {
+              leftLabel: currentSchema || "Current",
+              rightLabel: config.targetSchema || "Target",
+              leftMultiple: selectedTypeOption.diagram.leftMultiple,
+              rightMultiple: selectedTypeOption.diagram.rightMultiple
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-sm font-medium", children: "Related Collection" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            components$1.Select,
+            {
+              value: config.targetSchema,
+              onValueChange: (value) => setConfig((c) => ({ ...c, targetSchema: value })),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, { placeholder: "Select a schema..." }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: schemas == null ? void 0 : schemas.map((schema) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: schema, children: schema }, schema)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "The schema this field will reference" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components$1.Label, { className: "text-sm font-medium", children: [
+            "Inverse Field Name",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-normal", children: "(optional)" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components$1.Input,
+            {
+              value: config.inverseSide || "",
+              onChange: (e) => setConfig((c) => ({ ...c, inverseSide: e.target.value })),
+              placeholder: `e.g., ${(currentSchema == null ? void 0 : currentSchema.toLowerCase()) || "items"}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Field name on the related schema for bidirectional access" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components$1.DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { onClick: handleSave, disabled: !config.targetSchema, children: "Save Configuration" })
+      ] })
+    ] }) });
+  }
+  function FieldSettingsPanel() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { selectedField, updateField, selectField, state } = useSchemaBuilder();
+    const { schemas } = admin.useAdmin();
+    const [newOptionKey, setNewOptionKey] = react.useState("");
+    const [newOptionValue, setNewOptionValue] = react.useState("");
+    const [relationModalOpen, setRelationModalOpen] = react.useState(false);
+    if (!selectedField) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex items-center justify-center text-muted-foreground p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium mb-1", children: "No field selected" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: "Select a field to edit its settings" })
+      ] }) });
+    }
+    const fieldTypeDef = FIELD_TYPES.find((t) => t.id === selectedField.type);
+    const availableValidations = VALIDATION_RULES_BY_TYPE[selectedField.type] || [];
+    const uiSubtypes = UI_SUBTYPES[selectedField.type] || [];
+    const handleAddOption = () => {
+      if (!newOptionKey.trim() || !newOptionValue.trim()) return;
+      const currentOptions = selectedField.ui.options || [];
+      updateField(selectedField.id, {
+        ui: {
+          ...selectedField.ui,
+          options: [
+            ...currentOptions,
+            { key: newOptionKey.trim(), value: newOptionValue.trim() }
+          ]
+        }
+      });
+      setNewOptionKey("");
+      setNewOptionValue("");
+    };
+    const handleRemoveOption = (index2) => {
+      const currentOptions = selectedField.ui.options || [];
+      updateField(selectedField.id, {
+        ui: {
+          ...selectedField.ui,
+          options: currentOptions.filter((_, i) => i !== index2)
+        }
+      });
+    };
+    const handleAddValidation = (type) => {
+      const currentValidations = selectedField.validations || [];
+      if (currentValidations.some((v) => v.type === type)) return;
+      const ruleDef = getValidationRuleDefinition(type);
+      const newRule = {
+        type,
+        constraints: (ruleDef == null ? void 0 : ruleDef.constraintCount) ? [] : void 0
+      };
+      updateField(selectedField.id, {
+        validations: [...currentValidations, newRule]
+      });
+    };
+    const handleRemoveValidation = (type) => {
+      updateField(selectedField.id, {
+        validations: selectedField.validations.filter((v) => v.type !== type)
+      });
+    };
+    const handleUpdateValidationConstraints = (type, constraints) => {
+      updateField(selectedField.id, {
+        validations: selectedField.validations.map(
+          (v) => v.type === type ? { ...v, constraints } : v
+        )
+      });
+    };
+    const getRelationTypeLabel = (type) => {
+      var _a2;
+      return ((_a2 = RELATION_TYPES.find((t) => t.value === type)) == null ? void 0 : _a2.label) || "Not Set";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide", children: "Field Settings" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components$1.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => selectField(null),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        components$1.Accordion,
+        {
+          type: "multiple",
+          defaultValue: ["basic-info", "constraints"],
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "basic-info", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "Basic Info" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Display Name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Input,
+                    {
+                      value: selectedField.displayName,
+                      onChange: (e) => updateField(selectedField.id, {
+                        displayName: e.target.value
+                      }),
+                      className: "font-medium"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "API ID" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      components$1.Input,
+                      {
+                        value: selectedField.name,
+                        onChange: (e) => updateField(selectedField.id, { name: e.target.value }),
+                        className: "font-mono text-muted-foreground pr-8"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "absolute right-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground/50" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Field Type" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    components$1.Select,
+                    {
+                      value: selectedField.type,
+                      onValueChange: (value) => updateField(selectedField.id, { type: value }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, {}) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: FIELD_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: type.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(type.icon, { className: "h-4 w-4" }),
+                          type.label
+                        ] }) }, type.id)) })
+                      ]
+                    }
+                  )
+                ] }),
+                uiSubtypes.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "UI Type" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    components$1.Select,
+                    {
+                      value: selectedField.ui.type || ((_a = uiSubtypes[0]) == null ? void 0 : _a.id),
+                      onValueChange: (value) => updateField(selectedField.id, {
+                        ui: { ...selectedField.ui, type: value }
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, {}) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: uiSubtypes.map((subtype) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: subtype.id, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: subtype.label }) }) }, subtype.id)) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: ((_b = uiSubtypes.find((s) => s.id === selectedField.ui.type)) == null ? void 0 : _b.description) || ((_c = uiSubtypes[0]) == null ? void 0 : _c.description) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "ui-settings", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "UI Settings" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Tab" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Input,
+                    {
+                      value: selectedField.ui.tab || "",
+                      onChange: (e) => updateField(selectedField.id, {
+                        ui: { ...selectedField.ui, tab: e.target.value }
+                      }),
+                      placeholder: "General"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Description" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Textarea,
+                    {
+                      value: selectedField.ui.description || "",
+                      onChange: (e) => updateField(selectedField.id, {
+                        ui: { ...selectedField.ui, description: e.target.value }
+                      }),
+                      placeholder: "Help text for this field",
+                      rows: 2
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Show in Side Panel" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.ui.side || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        ui: { ...selectedField.ui, side: checked }
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Half Width (Row)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.ui.row || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        ui: { ...selectedField.ui, row: checked }
+                      })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "constraints", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "Constraints" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Required" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.prop.required || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        prop: { ...selectedField.prop, required: checked }
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Unique" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.prop.unique || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        prop: { ...selectedField.prop, unique: checked }
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Hidden" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.prop.hidden || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        prop: { ...selectedField.prop, hidden: checked }
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Read Only" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.prop.readonly || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        prop: { ...selectedField.prop, readonly: checked }
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Enable i18n" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Switch,
+                    {
+                      checked: selectedField.prop.intl || false,
+                      onCheckedChange: (checked) => updateField(selectedField.id, {
+                        prop: { ...selectedField.prop, intl: checked }
+                      })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            (fieldTypeDef == null ? void 0 : fieldTypeDef.hasOptions) && /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "select-options", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "Select Options" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                (selectedField.ui.options || []).map((option, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        components$1.Input,
+                        {
+                          value: option.key,
+                          onChange: (e) => {
+                            const newOptions = [...selectedField.ui.options || []];
+                            newOptions[index2] = { ...option, key: e.target.value };
+                            updateField(selectedField.id, {
+                              ui: { ...selectedField.ui, options: newOptions }
+                            });
+                          },
+                          placeholder: "Key",
+                          className: "flex-1"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        components$1.Input,
+                        {
+                          value: option.value,
+                          onChange: (e) => {
+                            const newOptions = [...selectedField.ui.options || []];
+                            newOptions[index2] = { ...option, value: e.target.value };
+                            updateField(selectedField.id, {
+                              ui: { ...selectedField.ui, options: newOptions }
+                            });
+                          },
+                          placeholder: "Label",
+                          className: "flex-1"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        components$1.Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "h-8 w-8 text-muted-foreground hover:text-destructive",
+                          onClick: () => handleRemoveOption(index2),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+                        }
+                      )
+                    ]
+                  },
+                  option.key || `option-${index2}`
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Input,
+                    {
+                      value: newOptionKey,
+                      onChange: (e) => setNewOptionKey(e.target.value),
+                      placeholder: "Key",
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Input,
+                    {
+                      value: newOptionValue,
+                      onChange: (e) => setNewOptionValue(e.target.value),
+                      placeholder: "Label",
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Button,
+                    {
+                      variant: "outline",
+                      size: "icon",
+                      className: "h-8 w-8",
+                      onClick: handleAddOption,
+                      disabled: !newOptionKey.trim() || !newOptionValue.trim(),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            (fieldTypeDef == null ? void 0 : fieldTypeDef.hasRelationConfig) && /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "relation-config", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "Relation Configuration" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-muted/50 rounded-lg border space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Relation Type" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: getRelationTypeLabel(
+                      (_d = selectedField.relationConfig) == null ? void 0 : _d.relationType
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-3 gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 bg-background border rounded text-xs font-medium shadow-sm", children: state.schema.name || "Current" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-muted-foreground/60 rounded-full" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-px bg-muted-foreground/60" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground/60" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 bg-background border rounded text-xs font-medium shadow-sm", children: ((_e = selectedField.relationConfig) == null ? void 0 : _e.targetSchema) || "Select..." })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    components$1.Button,
+                    {
+                      variant: "secondary",
+                      size: "sm",
+                      className: "w-full",
+                      onClick: () => setRelationModalOpen(true),
+                      children: "Change Relation"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Related Collection" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    components$1.Select,
+                    {
+                      value: ((_f = selectedField.relationConfig) == null ? void 0 : _f.targetSchema) || "",
+                      onValueChange: (value) => {
+                        var _a2;
+                        return updateField(selectedField.id, {
+                          relationConfig: {
+                            ...selectedField.relationConfig,
+                            targetSchema: value,
+                            relationType: ((_a2 = selectedField.relationConfig) == null ? void 0 : _a2.relationType) || "manyToOne"
+                          }
+                        });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, { placeholder: "Select schema..." }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: schemas == null ? void 0 : schemas.map((schema) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: schema, children: schema }, schema)) })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.Label, { className: "text-xs", children: "Relation Type" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    components$1.Select,
+                    {
+                      value: ((_g = selectedField.relationConfig) == null ? void 0 : _g.relationType) || "manyToOne",
+                      onValueChange: (value) => {
+                        var _a2;
+                        return updateField(selectedField.id, {
+                          relationConfig: {
+                            ...selectedField.relationConfig,
+                            targetSchema: ((_a2 = selectedField.relationConfig) == null ? void 0 : _a2.targetSchema) || "",
+                            relationType: value
+                          }
+                        });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, {}) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: RELATION_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: type.value, children: type.label }, type.value)) })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionItem, { value: "validations", className: "px-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components$1.AccordionTrigger, { className: "text-xs font-semibold uppercase tracking-wide", children: "Validations" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(components$1.AccordionContent, { className: "space-y-4", children: [
+                selectedField.validations.map((validation) => {
+                  const ruleDef = getValidationRuleDefinition(validation.type);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "p-3 bg-muted/50 rounded-lg border space-y-2",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: (ruleDef == null ? void 0 : ruleDef.label) || validation.type }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            components$1.Button,
+                            {
+                              variant: "ghost",
+                              size: "icon",
+                              className: "h-6 w-6 text-muted-foreground hover:text-destructive",
+                              onClick: () => handleRemoveValidation(validation.type),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+                            }
+                          )
+                        ] }),
+                        (ruleDef == null ? void 0 : ruleDef.constraintCount) && ruleDef.constraintCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: Array.from({ length: ruleDef.constraintCount }).map(
+                          (_, i) => {
+                            var _a2, _b2;
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              components$1.Input,
+                              {
+                                type: validation.type.includes("Length") || validation.type.includes("Min") || validation.type.includes("Max") ? "number" : "text",
+                                placeholder: ((_a2 = ruleDef.constraintLabels) == null ? void 0 : _a2[i]) || `Arg ${i + 1}`,
+                                value: ((_b2 = validation.constraints) == null ? void 0 : _b2[i]) ?? "",
+                                onChange: (e) => {
+                                  const newConstraints = [
+                                    ...validation.constraints || []
+                                  ];
+                                  newConstraints[i] = validation.type.includes("Length") || validation.type.includes("Min") || validation.type.includes("Max") ? Number(e.target.value) : e.target.value;
+                                  handleUpdateValidationConstraints(
+                                    validation.type,
+                                    newConstraints
+                                  );
+                                },
+                                className: "flex-1"
+                              },
+                              `${validation.type}-constraint-${i}`
+                            );
+                          }
+                        ) })
+                      ]
+                    },
+                    validation.type
+                  );
+                }),
+                /* @__PURE__ */ jsxRuntime.jsxs(components$1.Select, { onValueChange: handleAddValidation, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectValue, { placeholder: "Add validation..." }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectContent, { children: availableValidations.filter(
+                    (v) => !selectedField.validations.some((sv) => sv.type === v)
+                  ).map((validation) => {
+                    const ruleDef = getValidationRuleDefinition(validation);
+                    return /* @__PURE__ */ jsxRuntime.jsx(components$1.SelectItem, { value: validation, children: (ruleDef == null ? void 0 : ruleDef.label) || validation }, validation);
+                  }) })
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ) }),
+      (fieldTypeDef == null ? void 0 : fieldTypeDef.hasRelationConfig) && /* @__PURE__ */ jsxRuntime.jsx(
+        RelationConfigModal,
+        {
+          open: relationModalOpen,
+          onOpenChange: setRelationModalOpen,
+          currentSchema: state.schema.name,
+          relationConfig: selectedField.relationConfig,
+          onSave: (config) => {
+            updateField(selectedField.id, {
+              relationConfig: config
+            });
+          }
+        }
+      )
+    ] });
+  }
+  function SchemaList() {
+    const navigate = reactRouterDom.useNavigate();
+    const { schemaName } = reactRouterDom.useParams();
+    const { schemas, isLoading, error } = admin.useAdmin();
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center h-32", children: /* @__PURE__ */ jsxRuntime.jsx(components$1.Spinner, { className: "h-5 w-5" }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-xs text-red-600", children: "Error loading schemas" });
+    }
+    const isNewSchema = schemaName === "new";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        components$1.Button,
+        {
+          size: "sm",
+          className: "w-full",
+          variant: isNewSchema ? "default" : "outline",
+          onClick: () => navigate("/playground/new"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5 mr-1.5" }),
+            "New Schema"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: !schemas || schemas.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "mx-auto h-8 w-8 mb-2 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: "No schemas yet" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: schemas.map((schema) => {
+        const name = utils.names(schema);
+        const isSelected = schemaName === name.key;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => navigate(`/playground/${name.key}`),
+            className: `w-full text-left px-3 py-2 text-sm transition-colors ${isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium truncate", children: name.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs opacity-70 font-mono truncate", children: name.key })
+            ]
+          },
+          schema
+        );
+      }) }) })
+    ] });
+  }
+  function SchemaOptionsContent({ onClose }) {
+    const { state, updateSchema } = useSchemaBuilder();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "versioning",
+              className: "text-sm font-medium cursor-pointer",
+              children: "Enable Versioning"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Track content changes with version history" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components$1.Switch,
+          {
+            id: "versioning",
+            checked: state.schema.versioning,
+            onCheckedChange: (checked) => updateSchema({ versioning: checked })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "i18n", className: "text-sm font-medium cursor-pointer", children: "Enable i18n" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Support multiple languages for content" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components$1.Switch,
+          {
+            id: "i18n",
+            checked: state.schema.i18n,
+            onCheckedChange: (checked) => updateSchema({ i18n: checked })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { variant: "outline", onClick: onClose, children: "Close" }) })
+    ] });
+  }
+  function useSchemaOptionsDialog() {
+    const { showDialog, closeDialog } = admin.useDialog();
+    return {
+      open: () => {
+        showDialog({
+          title: "Schema Options",
+          description: "Configure schema-level settings for versioning and internationalization.",
+          size: "md",
+          content: /* @__PURE__ */ jsxRuntime.jsx(SchemaOptionsContent, { onClose: closeDialog })
+        });
+      },
+      close: closeDialog
+    };
+  }
+  function SchemaOptionsDialog({
+    open,
+    onOpenChange
+  }) {
+    const schemaOptions = useSchemaOptionsDialog();
+    react.useEffect(() => {
+      if (open) {
+        schemaOptions.open();
+      }
+    }, [open, schemaOptions]);
+    react.useEffect(() => {
+      return () => {
+        if (open) {
+          onOpenChange(false);
+        }
+      };
+    }, [open, onOpenChange]);
+    return null;
+  }
+  const ReadOnlyContext = react.createContext(false);
+  function schemaMetadataToBuilderState(name, metadata) {
+    var _a, _b, _c;
+    return {
+      schema: {
+        name: name.charAt(0).toUpperCase() + name.slice(1),
+        apiId: name,
+        versioning: ((_a = metadata.options) == null ? void 0 : _a.versioning) ?? true,
+        i18n: ((_b = metadata.options) == null ? void 0 : _b.i18n) ?? true
+      },
+      fields: ((_c = metadata.properties) == null ? void 0 : _c.map((prop, index2) => {
+        var _a2;
+        return {
+          id: `field_${index2}_${prop.name}`,
+          name: prop.name,
+          displayName: ((_a2 = prop.ui) == null ? void 0 : _a2.label) || prop.name,
+          type: inferFieldType(prop),
+          tsType: prop.type || "string",
+          prop: {
+            required: prop.required || false,
+            unique: prop.unique || false,
+            intl: prop.intl || false,
+            hidden: prop.hidden || false,
+            readonly: prop.readonly || false
+          },
+          ui: prop.ui || {},
+          validations: (prop.validations || []).map((v) => ({
+            type: v.name || v.type,
+            constraints: v.constraints
+          }))
+        };
+      })) || [],
+      selectedFieldId: null,
+      viewMode: "builder",
+      isDirty: false,
+      lastSaved: null,
+      isNew: false
+    };
+  }
+  function inferFieldType(prop) {
+    var _a;
+    const uiType = (_a = prop.ui) == null ? void 0 : _a.type;
+    if (uiType === "switch" || uiType === "checkbox") return "boolean";
+    if (uiType === "date") return "date";
+    if (uiType === "number") return "number";
+    if (uiType === "select" || uiType === "radio") return "select";
+    if (uiType === "relationship") return "relation";
+    const tsType = typeof prop.type === "string" ? prop.type.toLowerCase() : null;
+    if (tsType === "number") return "number";
+    if (tsType === "boolean") return "boolean";
+    if (tsType === "date") return "date";
+    return "text";
+  }
+  function SchemaPlaygroundEditor() {
+    const { schemaName } = reactRouterDom.useParams();
+    const isNewSchema = !schemaName || schemaName === "new";
+    const {
+      data: schemaMetadata,
+      isLoading,
+      error
+    } = admin.useSchema(schemaName && schemaName !== "new" ? schemaName : void 0);
+    if (!isNewSchema && isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ jsxRuntime.jsx(components$1.Spinner, {}) });
+    }
+    if (!isNewSchema && error) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-l-4 border-red-500 bg-red-50 text-red-700 rounded m-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-medium flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
+          "Error loading schema"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: error.message })
+      ] });
+    }
+    const initialState = !isNewSchema && schemaMetadata && schemaName && schemaName !== "new" ? schemaMetadataToBuilderState(schemaName, schemaMetadata) : { ...DEFAULT_BUILDER_STATE, isNew: true };
+    const isReadOnly = false;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SchemaEditorContentWithState,
+      {
+        initialState,
+        isReadOnly
+      },
+      schemaName || "new"
+    );
+  }
+  function SchemaEditorContentWithState({
+    initialState,
+    isReadOnly
+  }) {
+    const context = useSchemaBuilderState(initialState);
+    return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyContext.Provider, { value: isReadOnly, children: /* @__PURE__ */ jsxRuntime.jsx(SchemaBuilderContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(SchemaEditorInner, {}) }) });
+  }
+  function SchemaEditorInner() {
+    var _a, _b;
+    const { state, setViewMode, updateSchema, generatedCode } = useSchemaBuilder();
+    const isReadOnly = react.useContext(ReadOnlyContext);
+    const [addFieldOpen, setAddFieldOpen] = react.useState(false);
+    const [optionsOpen, setOptionsOpen] = react.useState(false);
+    const handleDeploy = async () => {
+      alert(
+        `Deploy functionality will be implemented in the backend phase.
+
+Generated code:
+
+${generatedCode}`
+      );
+    };
+    const statusBadges = [];
+    if (isReadOnly) {
+      statusBadges.push({
+        type: "info",
+        label: "Read-only"
+      });
+    } else if (state.isDirty) {
+      statusBadges.push({
+        type: "warning",
+        label: "Unsaved changes",
+        dot: true
+      });
+    }
+    if (!isReadOnly && state.lastSaved) {
+      statusBadges.push({ type: "success", label: "Saved", dot: true });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.PageHeader,
+        {
+          status: statusBadges.length > 0 ? statusBadges : void 0,
+          icon: isReadOnly ? lucideReact.Lock : lucideReact.Boxes,
+          title: isReadOnly ? state.schema.name || "Schema" : {
+            value: state.schema.name,
+            onChange: (name) => updateSchema({ name }),
+            placeholder: "SchemaName",
+            editable: true
+          },
+          description: `api::${((_a = state.schema.name) == null ? void 0 : _a.toLowerCase()) || "schema"}.${((_b = state.schema.name) == null ? void 0 : _b.toLowerCase()) || "schema"}`,
+          tabs: {
+            items: [
+              { id: "builder", label: "Builder", icon: lucideReact.PencilRuler },
+              { id: "json", label: "JSON", icon: lucideReact.FileJson },
+              { id: "code", label: "Code", icon: lucideReact.Code2 }
+            ],
+            value: state.viewMode,
+            onChange: setViewMode
+          },
+          actions: isReadOnly ? void 0 : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components$1.Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => setOptionsOpen(true),
+                title: "Schema Options",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(components$1.Button, { variant: "outline", size: "sm", disabled: true, children: "Preview API" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              components$1.Button,
+              {
+                size: "sm",
+                onClick: handleDeploy,
+                disabled: !state.schema.name,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rocket, { className: "h-4 w-4 mr-2" }),
+                  "Deploy Changes"
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-2 border-b border-border bg-amber-50 dark:bg-amber-950/30 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-amber-700 dark:text-amber-400", children: "This schema is defined in code and cannot be modified here. View the generated code in the Code tab to copy and customize." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden grid grid-cols-12 h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 border-r bg-muted/30 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SchemaList, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-7 overflow-hidden flex flex-col", children: state.viewMode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(admin.PageContent, { className: "p-6 overflow-y-auto flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-4 w-4 text-blue-500 mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-blue-900", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Schema Guidelines:" }),
+              " ",
+              "Keep field names in camelCase for better compatibility."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldList,
+            {
+              onAddField: isReadOnly ? void 0 : () => setAddFieldOpen(true),
+              readOnly: isReadOnly
+            }
+          )
+        ] }) }) : (
+          /* Code/JSON View */
+          /* @__PURE__ */ jsxRuntime.jsx(admin.PageContent, { className: "p-6 overflow-y-auto flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(CodePreview, { mode: state.viewMode }) })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3 border-l bg-background overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(FieldSettingsPanel, {}) })
+      ] }),
+      !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AddFieldDialog, { open: addFieldOpen, onOpenChange: setAddFieldOpen }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SchemaOptionsDialog,
+          {
+            open: optionsOpen,
+            onOpenChange: setOptionsOpen
+          }
+        )
+      ] })
+    ] });
+  }
+  const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    SchemaPlaygroundEditor,
+    default: SchemaPlaygroundEditor
+  }, Symbol.toStringTag, { value: "Module" }));
+  exports.default = playgroundPlugin;
+  exports.playgroundPlugin = playgroundPlugin;
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  return exports;
+})({}, React, ReactRouterDOM, ReactJsxRuntime, MagnetAdmin, MagnetUI, LucideReact, MagnetUILib, MagnetUtils);
+//# sourceMappingURL=bundle.iife.js.map