@petrarca/sonnet-playground 0.1.2

package/dist/chunk-QIETZUEN.js

@@ -0,0 +1,885 @@
+// src/pages/PlayForms.tsx
+import { useState, useCallback } from "react";
+import {
+  SimpleStack,
+  SimpleGroup,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Card,
+  Badge,
+  SimpleTooltip,
+  Button
+} from "@petrarca/sonnet-ui";
+import {
+  FormSelect,
+  FormCheckbox,
+  JsonSchemaFormRenderer
+} from "@petrarca/sonnet-forms";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+import {
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight as ChevronRightIcon
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SAMPLE_SCHEMA = {
+  title: "Practitioner",
+  type: "object",
+  properties: {
+    name: { type: "string", title: "Full Name" },
+    npi: { type: "string", title: "NPI" },
+    specialty: {
+      type: "string",
+      title: "Specialty",
+      enum: ["cardiology", "neurology", "oncology", "radiology", "general"]
+    },
+    notes: {
+      type: "string",
+      title: "Notes",
+      "x-ui-widget": "textarea"
+    },
+    years_experience: {
+      type: "integer",
+      title: "Years of Experience",
+      minimum: 0,
+      maximum: 60
+    },
+    active: { type: "boolean", title: "Active" }
+  },
+  required: ["name", "npi"]
+};
+var NESTED_OBJECT_SCHEMA = {
+  title: "Patient",
+  type: "object",
+  properties: {
+    family_name: { type: "string", title: "Family Name" },
+    given_name: { type: "string", title: "Given Name" },
+    birth_date: { type: "string", title: "Date of Birth", format: "date" },
+    contact: {
+      type: "object",
+      title: "Contact",
+      properties: {
+        phone: { type: "string", title: "Phone" },
+        email: { type: "string", title: "Email", format: "email" },
+        address: { type: "string", title: "Address" },
+        city: { type: "string", title: "City" },
+        country: {
+          type: "string",
+          title: "Country",
+          enum: ["DE", "AT", "CH", "US", "GB"]
+        }
+      },
+      required: ["phone"]
+    }
+  },
+  required: ["family_name", "given_name"]
+};
+var ARRAY_OF_OBJECTS_SCHEMA = {
+  title: "Medication Request",
+  type: "object",
+  properties: {
+    patient_id: { type: "string", title: "Patient ID" },
+    prescriber: { type: "string", title: "Prescriber" },
+    medications: {
+      type: "array",
+      title: "Medications",
+      "x-ui-options": {
+        addLabel: "Add Medication",
+        emptyMessage: "No medications added",
+        orderable: true
+      },
+      items: {
+        type: "object",
+        properties: {
+          drug_name: { type: "string", title: "Drug Name" },
+          dose: { type: "string", title: "Dose" },
+          route: {
+            type: "string",
+            title: "Route",
+            enum: ["oral", "IV", "subcutaneous", "topical", "inhaled"]
+          },
+          frequency: { type: "string", title: "Frequency" },
+          active: { type: "boolean", title: "Active" }
+        },
+        required: ["drug_name", "dose"]
+      },
+      minItems: 1,
+      maxItems: 10
+    }
+  },
+  required: ["patient_id", "prescriber"]
+};
+var REF_SCHEMA = {
+  title: "Care Plan",
+  type: "object",
+  $defs: {
+    period: {
+      type: "object",
+      properties: {
+        start: { type: "string", title: "Start Date", format: "date" },
+        end: { type: "string", title: "End Date", format: "date" }
+      },
+      required: ["start"]
+    }
+  },
+  properties: {
+    patient_id: { type: "string", title: "Patient ID" },
+    title: { type: "string", title: "Plan Title" },
+    validity: {
+      $ref: "#/$defs/period",
+      title: "Validity Period"
+    },
+    activities: {
+      type: "array",
+      title: "Activities",
+      "x-ui-options": {
+        addLabel: "Add Activity",
+        orderable: true
+      },
+      items: {
+        type: "object",
+        properties: {
+          description: { type: "string", title: "Description" },
+          schedule: {
+            $ref: "#/$defs/period",
+            title: "Schedule"
+          }
+        },
+        required: ["description"]
+      },
+      maxItems: 5
+    }
+  },
+  required: ["patient_id", "title"]
+};
+var HORIZONTAL_ARRAY_SCHEMA = {
+  title: "Observation Panel",
+  type: "object",
+  properties: {
+    subject: { type: "string", title: "Subject ID" },
+    observations: {
+      type: "array",
+      title: "Observations",
+      "x-ui-layout": {
+        direction: "horizontal",
+        columns: "1fr 1fr 1fr 80px",
+        gap: 8,
+        compact: true
+      },
+      "x-ui-options": {
+        addLabel: "Add Observation",
+        emptyMessage: "No observations recorded",
+        orderable: true
+      },
+      items: {
+        type: "object",
+        properties: {
+          code: {
+            type: "string",
+            title: "LOINC Code",
+            enum: ["8310-5", "8867-4", "9279-1", "29463-7"]
+          },
+          value: { type: "string", title: "Value" },
+          unit: {
+            type: "string",
+            title: "Unit",
+            enum: ["Cel", "/min", "kg", "mmHg", "%"]
+          },
+          abnormal: { type: "boolean", title: "Abnormal" }
+        },
+        required: ["code", "value"]
+      },
+      minItems: 0,
+      maxItems: 20
+    }
+  },
+  required: ["subject"]
+};
+var HORIZONTAL_FULL_SCHEMA = {
+  title: "Allergy List",
+  type: "object",
+  properties: {
+    patient_id: { type: "string", title: "Patient ID" },
+    allergies: {
+      type: "array",
+      title: "Allergies",
+      "x-ui-layout": {
+        direction: "horizontal",
+        columns: "2fr 1fr 1fr",
+        gap: 12
+      },
+      "x-ui-options": {
+        addLabel: "Add Allergy",
+        emptyMessage: "No allergies recorded",
+        orderable: true
+      },
+      items: {
+        type: "object",
+        properties: {
+          substance: { type: "string", title: "Substance" },
+          severity: {
+            type: "string",
+            title: "Severity",
+            enum: ["mild", "moderate", "severe"]
+          },
+          reaction: { type: "string", title: "Reaction" }
+        },
+        required: ["substance"]
+      }
+    }
+  },
+  required: ["patient_id"]
+};
+var MIXED_SCHEMA = {
+  title: "Healthcare Organization",
+  type: "object",
+  properties: {
+    name: { type: "string", title: "Name" },
+    type: {
+      type: "string",
+      title: "Type",
+      enum: ["hospital", "clinic", "lab", "pharmacy"]
+    },
+    active: { type: "boolean", title: "Active" },
+    location: {
+      type: "object",
+      title: "Location",
+      "x-ui-options": { variant: "card" },
+      properties: {
+        address: { type: "string", title: "Address" },
+        city: { type: "string", title: "City" },
+        postal_code: { type: "string", title: "Postal Code" },
+        country: {
+          type: "string",
+          title: "Country",
+          enum: ["DE", "AT", "CH", "US", "GB"]
+        }
+      },
+      required: ["address", "city"]
+    },
+    contacts: {
+      type: "array",
+      title: "Contacts",
+      "x-ui-options": {
+        addLabel: "Add Contact",
+        orderable: true,
+        emptyMessage: "No contacts defined"
+      },
+      items: {
+        type: "object",
+        properties: {
+          name: { type: "string", title: "Name" },
+          role: {
+            type: "string",
+            title: "Role",
+            enum: ["admin", "clinical", "billing", "technical"]
+          },
+          email: { type: "string", title: "Email", format: "email" },
+          phone: { type: "string", title: "Phone" }
+        },
+        required: ["name", "email"]
+      },
+      minItems: 1
+    }
+  },
+  required: ["name", "type"]
+};
+var ROW_LAYOUT_SCHEMA = {
+  title: "Practitioner Registration",
+  type: "object",
+  properties: {
+    given_name: { type: "string", title: "Given Name" },
+    family_name: { type: "string", title: "Family Name" },
+    npi: { type: "string", title: "NPI" },
+    specialty: {
+      type: "string",
+      title: "Specialty",
+      enum: ["cardiology", "neurology", "oncology", "radiology", "general"]
+    },
+    email: { type: "string", title: "Email", format: "email" },
+    phone: { type: "string", title: "Phone" },
+    start_date: { type: "string", title: "Start Date" },
+    end_date: { type: "string", title: "End Date" },
+    notes: { type: "string", title: "Notes", "x-ui-widget": "textarea" },
+    active: { type: "boolean", title: "Active" }
+  },
+  required: ["given_name", "family_name", "npi"]
+};
+var ROW_LAYOUT_UISCHEMA = {
+  "x-ui-layout": {
+    rows: [
+      { fields: ["given_name", "family_name"], columns: "1fr 1fr" },
+      { fields: ["npi", "specialty"], columns: "1fr 1fr" },
+      { fields: ["email", "phone"], columns: "1fr 1fr" },
+      { fields: ["start_date", "end_date"], columns: "1fr 1fr" }
+    ]
+  }
+};
+var sampleSchemas = {
+  flat: SAMPLE_SCHEMA,
+  nested_object: NESTED_OBJECT_SCHEMA,
+  array_of_objects: ARRAY_OF_OBJECTS_SCHEMA,
+  ref_defs: REF_SCHEMA,
+  mixed: MIXED_SCHEMA,
+  horizontal_array: HORIZONTAL_ARRAY_SCHEMA,
+  horizontal_full: HORIZONTAL_FULL_SCHEMA,
+  row_layout: ROW_LAYOUT_SCHEMA
+};
+var sampleUiSchemas = {
+  empty: "{}",
+  hideLabels: JSON.stringify(
+    {
+      "x-ui-globalOptions": {
+        label: false
+      }
+    },
+    null,
+    2
+  ),
+  disableAll: JSON.stringify(
+    {
+      "x-ui-globalOptions": {
+        disabled: true
+      }
+    },
+    null,
+    2
+  ),
+  readonlyAll: JSON.stringify(
+    {
+      "x-ui-globalOptions": {
+        readonly: true
+      }
+    },
+    null,
+    2
+  ),
+  fieldOverride: JSON.stringify(
+    {
+      "x-ui-globalOptions": {
+        disabled: true
+      },
+      name: {
+        "x-ui-options": {
+          disabled: false
+          // Override: enable this field
+        }
+      }
+    },
+    null,
+    2
+  ),
+  customWidget: JSON.stringify(
+    {
+      description: {
+        "x-ui-widget": "textarea",
+        "x-ui-options": {
+          rows: 5
+        }
+      }
+    },
+    null,
+    2
+  )
+};
+function usePlayFormsState() {
+  const [schemaText, setSchemaText] = useState(
+    JSON.stringify(SAMPLE_SCHEMA, null, 2)
+  );
+  const [uiSchemaText, setUiSchemaText] = useState("{}");
+  const [activeSchema, setActiveSchema] = useState(
+    SAMPLE_SCHEMA
+  );
+  const [activeUiSchema, setActiveUiSchema] = useState({});
+  const [dataText, setDataText] = useState("{}");
+  const [formData, setFormData] = useState({});
+  const [validationErrors, setValidationErrors] = useState([]);
+  const [isValid, setIsValid] = useState(true);
+  const [schemaError, setSchemaError] = useState("");
+  const [uiSchemaError, setUiSchemaError] = useState("");
+  const [dataError, setDataError] = useState("");
+  const [activeTab, setActiveTab] = useState("schema");
+  const [deferStateUpdates, setDeferStateUpdates] = useState(false);
+  const [dataCollapsed, setDataCollapsed] = useState(false);
+  const [lastDiff, setLastDiff] = useState(null);
+  const toggleDataPanel = useCallback(() => setDataCollapsed((v) => !v), []);
+  const loadSchemaPreset = useCallback(
+    (value) => {
+      if (!value || !sampleSchemas[value]) return;
+      const text = JSON.stringify(sampleSchemas[value], null, 2);
+      setSchemaText(text);
+      setActiveSchema(sampleSchemas[value]);
+      setSchemaError("");
+      setFormData({});
+      setDataText("{}");
+      const pairedUi = value === "row_layout" ? ROW_LAYOUT_UISCHEMA : {};
+      setUiSchemaText(JSON.stringify(pairedUi, null, 2));
+      setActiveUiSchema(pairedUi);
+      setUiSchemaError("");
+    },
+    [setSchemaText, setActiveSchema]
+  );
+  const loadUiSchemaPreset = useCallback(
+    (value) => {
+      if (!value) return;
+      setUiSchemaText(sampleUiSchemas[value]);
+      setUiSchemaError("");
+    },
+    [setUiSchemaText]
+  );
+  return {
+    schemaText,
+    uiSchemaText,
+    activeSchema,
+    activeUiSchema,
+    dataText,
+    formData,
+    validationErrors,
+    isValid,
+    schemaError,
+    uiSchemaError,
+    dataError,
+    activeTab,
+    deferStateUpdates,
+    dataCollapsed,
+    lastDiff,
+    setSchemaText,
+    setUiSchemaText,
+    setActiveSchema,
+    setActiveUiSchema,
+    setDataText,
+    setFormData,
+    setValidationErrors,
+    setIsValid,
+    setSchemaError,
+    setUiSchemaError,
+    setDataError,
+    setActiveTab,
+    setDeferStateUpdates,
+    toggleDataPanel,
+    setLastDiff,
+    loadSchemaPreset,
+    loadUiSchemaPreset
+  };
+}
+function tryParseAndSet(value, setError, errorMessage = "Invalid JSON") {
+  try {
+    JSON.parse(value);
+    setError("");
+  } catch {
+    setError(errorMessage);
+  }
+}
+function tryParseAndLoad(text, onSuccess, onError) {
+  try {
+    onSuccess(JSON.parse(text));
+    onError("");
+  } catch {
+    onError("Invalid JSON - cannot load to form");
+  }
+}
+function SchemaEditorColumn({
+  state
+}) {
+  const handleSchemaTextChange = (value) => {
+    state.setSchemaText(value);
+    tryParseAndSet(value, state.setSchemaError);
+  };
+  const handleUiSchemaTextChange = (value) => {
+    state.setUiSchemaText(value);
+    tryParseAndSet(value, state.setUiSchemaError);
+  };
+  const handleLoadSchemaToForm = () => {
+    tryParseAndLoad(
+      state.schemaText,
+      (parsed) => {
+        state.setActiveSchema(parsed);
+        state.setFormData({});
+        state.setDataText("{}");
+        state.setValidationErrors([]);
+        state.setIsValid(true);
+        state.setLastDiff(null);
+      },
+      state.setSchemaError
+    );
+  };
+  const handleLoadUiSchemaToForm = () => {
+    tryParseAndLoad(
+      state.uiSchemaText,
+      state.setActiveUiSchema,
+      state.setUiSchemaError
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4 flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: state.activeTab,
+            onValueChange: state.setActiveTab,
+            style: {
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(TabsList, { className: "mb-1", children: [
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "schema", children: "JSON Schema" }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "uischema", children: "UI Schema" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                TabsContent,
+                {
+                  value: "schema",
+                  className: "flex-1 min-h-0 flex flex-col mt-0",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      FormSelect,
+                      {
+                        placeholder: "Load example schema...",
+                        options: SCHEMA_PRESET_OPTIONS,
+                        onChange: state.loadSchemaPreset,
+                        className: "text-xs",
+                        wrapperClassName: "mb-2"
+                      }
+                    ),
+                    state.schemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs mb-2", children: state.schemaError }),
+                    /* @__PURE__ */ jsx(
+                      JsonEditor,
+                      {
+                        value: state.schemaText,
+                        editablePaths: ["/"],
+                        onChange: handleSchemaTextChange,
+                        height: "100%",
+                        className: "flex-1 min-h-0 rounded-md border overflow-hidden"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                TabsContent,
+                {
+                  value: "uischema",
+                  className: "flex-1 min-h-0 flex flex-col mt-0",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      FormSelect,
+                      {
+                        placeholder: "Load example...",
+                        options: UISCHEMA_PRESET_OPTIONS,
+                        onChange: state.loadUiSchemaPreset,
+                        className: "text-xs",
+                        wrapperClassName: "mb-2"
+                      }
+                    ),
+                    state.uiSchemaError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs mb-2", children: state.uiSchemaError }),
+                    /* @__PURE__ */ jsx(
+                      JsonEditor,
+                      {
+                        value: state.uiSchemaText,
+                        editablePaths: ["/"],
+                        onChange: handleUiSchemaTextChange,
+                        height: "100%",
+                        className: "flex-1 min-h-0 rounded-md border overflow-hidden"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          SimpleTooltip,
+          {
+            label: state.activeTab === "schema" ? "Load Schema to Form" : "Load UI Schema to Form",
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                size: "icon",
+                className: "absolute -right-5 top-1/2 -translate-y-1/2 z-[100]",
+                onClick: state.activeTab === "schema" ? handleLoadSchemaToForm : handleLoadUiSchemaToForm,
+                children: /* @__PURE__ */ jsx(ArrowRight, { size: 20 })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var SCHEMA_PRESET_OPTIONS = [
+  { value: "flat", label: "Practitioner (flat fields)" },
+  { value: "nested_object", label: "Patient (nested object)" },
+  { value: "array_of_objects", label: "Medication Request (array)" },
+  { value: "ref_defs", label: "Care Plan ($ref / $defs)" },
+  { value: "mixed", label: "Organization (mixed)" },
+  { value: "horizontal_array", label: "Observations (horizontal, compact)" },
+  { value: "horizontal_full", label: "Allergies (horizontal, full height)" },
+  { value: "row_layout", label: "Registration (row layout)" }
+];
+var UISCHEMA_PRESET_OPTIONS = [
+  { value: "empty", label: "Empty (no customization)" },
+  { value: "hideLabels", label: "Hide all labels" },
+  { value: "disableAll", label: "Disable all fields" },
+  { value: "readonlyAll", label: "Readonly all fields" },
+  { value: "fieldOverride", label: "Field-level override" },
+  { value: "customWidget", label: "Custom widget" }
+];
+function FormColumn({
+  state
+}) {
+  const handleUpdate = (data, _changedFields, diff) => {
+    state.setDataText(JSON.stringify(data, null, 2));
+    state.setFormData(data);
+    state.setLastDiff(diff);
+  };
+  const handleCancel = () => {
+    state.setFormData({});
+    state.setDataText("{}");
+    state.setValidationErrors([]);
+    state.setIsValid(true);
+    state.setLastDiff(null);
+  };
+  const handleValidationChange = (errors, valid) => {
+    state.setValidationErrors(errors);
+    state.setIsValid(valid);
+  };
+  const handleLoadDataToForm = () => {
+    tryParseAndLoad(state.dataText, state.setFormData, state.setDataError);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4 flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxs(
+          SimpleStack,
+          {
+            gap: "md",
+            style: {
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-1", children: "Rendered Form" }),
+                /* @__PURE__ */ jsxs(SimpleGroup, { gap: "xs", align: "center", className: "mb-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: state.isValid ? "default" : "destructive",
+                      className: "text-xs",
+                      children: state.isValid ? "Valid" : "Invalid"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FormCheckbox,
+                    {
+                      label: "Defer state updates (change on blur)",
+                      checked: state.deferStateUpdates,
+                      onChange: (checked) => {
+                        if (checked !== "indeterminate") {
+                          state.setDeferStateUpdates(checked);
+                        }
+                      }
+                    }
+                  )
+                ] }),
+                state.validationErrors.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: "4px" }, children: state.validationErrors.map((err, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: err }, idx)) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflowY: "auto",
+                    paddingRight: "4px"
+                  },
+                  children: [
+                    state.activeSchema && /* @__PURE__ */ jsx(
+                      JsonSchemaFormRenderer,
+                      {
+                        schema: state.activeSchema,
+                        data: state.formData,
+                        onUpdate: handleUpdate,
+                        onCancel: handleCancel,
+                        onValidationChange: handleValidationChange,
+                        showActions: true,
+                        deferStateUpdates: state.deferStateUpdates,
+                        saveLabel: "Save Changes",
+                        cancelLabel: "Reset",
+                        showExtraProperties: true,
+                        uiSchema: state.activeUiSchema
+                      }
+                    ),
+                    !state.activeSchema && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center mt-8", children: "Edit the JSON Schema on the left and click the arrow to load it" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        !state.dataCollapsed && /* @__PURE__ */ jsx(SimpleTooltip, { label: "Load JSON Data into Form", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            size: "icon",
+            className: "absolute -right-5 top-1/2 -translate-y-1/2 z-[100]",
+            onClick: handleLoadDataToForm,
+            children: /* @__PURE__ */ jsx(ArrowRight, { size: 20, className: "scale-x-[-1]" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DataColumn({
+  state
+}) {
+  const handleDataTextChange = (value) => {
+    state.setDataText(value);
+    tryParseAndSet(value, state.setDataError);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: state.dataCollapsed ? "0 0 2.25rem" : 1,
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+        gap: "0.75rem",
+        transition: "flex 200ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Card,
+          {
+            className: "border shadow-sm min-h-0 flex flex-col overflow-hidden",
+            style: { flex: "1 1 50%" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 shrink-0", children: [
+                !state.dataCollapsed && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "JSON Data" }),
+                /* @__PURE__ */ jsx(
+                  SimpleTooltip,
+                  {
+                    label: state.dataCollapsed ? "Expand JSON data" : "Collapse JSON data",
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "compact",
+                        onClick: state.toggleDataPanel,
+                        className: "ml-auto",
+                        children: state.dataCollapsed ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+                      }
+                    )
+                  }
+                )
+              ] }),
+              !state.dataCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col px-4 pb-4", children: [
+                state.dataError && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs mb-2", children: state.dataError }),
+                /* @__PURE__ */ jsx(
+                  JsonEditor,
+                  {
+                    value: state.dataText,
+                    editablePaths: ["/"],
+                    onChange: handleDataTextChange,
+                    height: "100%",
+                    className: "flex-1 min-h-0 rounded-md border overflow-hidden"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !state.dataCollapsed && /* @__PURE__ */ jsxs(
+          Card,
+          {
+            className: "border shadow-sm min-h-0 flex flex-col overflow-hidden",
+            style: { flex: "1 1 50%" },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-3 shrink-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Diff" }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col px-4 pb-4", children: /* @__PURE__ */ jsx(
+                JsonEditor,
+                {
+                  value: JSON.stringify(state.lastDiff ?? [], null, 2),
+                  editablePaths: ["/"],
+                  height: "100%",
+                  className: "flex-1 min-h-0 rounded-md border overflow-hidden"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function PlayForms() {
+  const state = usePlayFormsState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: "1rem 1rem 0 1rem" }, children: [
+          /* @__PURE__ */ jsx("h1", { children: "Forms Playground" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Test and experiment with JsonSchemaFormRenderer. Edit the JSON Schema on the left, then load it into the form." })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              padding: "0 1rem 1rem 1rem",
+              display: "flex",
+              gap: "1.5rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(SchemaEditorColumn, { state }),
+              /* @__PURE__ */ jsx(FormColumn, { state }),
+              /* @__PURE__ */ jsx(DataColumn, { state })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  PlayForms
+};
+//# sourceMappingURL=chunk-QIETZUEN.js.map