@petrarca/sonnet-playground 0.7.0 → 0.9.0

package/dist/chunk-EPCUUTBZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlaySchemaDesigner.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  SchemaDesigner,\n  type SchemaDesignerCapabilities,\n} from \"@petrarca/sonnet-schema-designer\";\nimport type { JsonSchema, UISchema } from \"@petrarca/sonnet-core/schema\";\nimport { DesignerControls } from \"./DesignerControls\";\n\n// A flat contact form: a few fields of the common types, one required.\nconst CONTACT_SCHEMA: JsonSchema = {\n  title: \"Contact\",\n  type: \"object\",\n  required: [\"name\"],\n  properties: {\n    name: { type: \"string\", title: \"Name\" },\n    email: { type: \"string\", format: \"email\", title: \"Email\" },\n    phone: { type: \"string\", title: \"Phone\" },\n    newsletter: { type: \"boolean\", title: \"Send me the newsletter\" },\n  },\n};\n\nconst SAMPLE_SCHEMA: JsonSchema = {\n  title: \"Patient\",\n  type: \"object\",\n  properties: {\n    first_name: { type: \"string\", title: \"First name\", minLength: 1 },\n    last_name: { type: \"string\", title: \"Last name\", minLength: 1 },\n    date_of_birth: { type: \"string\", format: \"date\", title: \"Date of birth\" },\n    gender: {\n      type: \"string\",\n      title: \"Gender\",\n      enum: [\"male\", \"female\", \"other\", \"unknown\"],\n    },\n    active: { type: \"boolean\", title: \"Active\" },\n    contact: {\n      type: \"object\",\n      title: \"Contact\",\n      properties: {\n        email: { type: \"string\", format: \"email\", title: \"Email\" },\n        phone: { type: \"string\", title: \"Phone\" },\n      },\n      required: [\"email\"],\n    },\n    addresses: {\n      type: \"array\",\n      title: \"Addresses\",\n      minItems: 1,\n      maxItems: 3,\n      items: {\n        type: \"object\",\n        properties: {\n          street: { type: \"string\", title: \"Street\" },\n          city: { type: \"string\", title: \"City\" },\n          zip: { type: \"string\", title: \"ZIP\" },\n          country: { type: \"string\", title: \"Country\" },\n        },\n        required: [\"street\", \"city\"],\n      },\n    },\n  },\n  required: [\"first_name\", \"last_name\"],\n};\n\n// An audit-event-like schema: a fixed envelope (actor, targets) with three\n// extensible metadata containers. Used to demo scoped editing.\nconst AUDIT_SCHEMA: JsonSchema = {\n  title: \"AuditEvent\",\n  type: \"object\",\n  properties: {\n    actor: {\n      type: \"object\",\n      title: \"Actor\",\n      properties: {\n        type: { type: \"string\", title: \"Type\" },\n        id: { type: \"string\", title: \"ID\" },\n        metadata: {\n          type: \"object\",\n          title: \"Actor metadata\",\n          properties: { role: { type: \"string\", title: \"Role\" } },\n        },\n      },\n    },\n    targets: {\n      type: \"array\",\n      title: \"Targets\",\n      items: {\n        type: \"object\",\n        properties: {\n          type: { type: \"string\", title: \"Type\" },\n          id: { type: \"string\", title: \"ID\" },\n          metadata: {\n            type: \"object\",\n            title: \"Target metadata\",\n            properties: { ward: { type: \"string\", title: \"Ward\" } },\n          },\n        },\n      },\n    },\n    metadata: {\n      type: \"object\",\n      title: \"Metadata\",\n      properties: { reason: { type: \"string\", title: \"Reason\" } },\n    },\n  },\n};\n\n// A schema exercising every logic construct the designer can author: a oneOf\n// discriminated variant (payment method), if/then/else conditionals (authored\n// as allOf members), a const-tagged field, and a nullable anyOf optional field.\n// x-ui-order places each conditional field right after the property it depends\n// on (see docs/design/logic-authoring.md in the schema-designer package,\n// ordering note).\nconst LOGIC_SCHEMA: JsonSchema = {\n  title: \"Checkout\",\n  type: \"object\",\n  // A reusable definition referenced by $ref (shows read-only expansion).\n  $defs: {\n    Address: {\n      type: \"object\",\n      properties: {\n        street: { type: \"string\", title: \"Street\" },\n        city: { type: \"string\", title: \"City\" },\n        zip: { type: \"string\", title: \"ZIP\" },\n      },\n    },\n  },\n  \"x-ui-order\": [\n    \"schema_version\",\n    \"amount\",\n    \"requires_approval\",\n    \"currency\",\n    \"expedited\",\n    \"delivery_window\",\n    \"gift_wrap\",\n    \"gift_message\",\n    \"shipping_address\",\n    \"note\",\n    \"payment\",\n  ],\n  properties: {\n    // A $ref to the shared Address definition (read-only in the tree).\n    shipping_address: { $ref: \"#/$defs/Address\", title: \"Shipping address\" },\n    // A fixed value carried by every document (const authoring).\n    schema_version: {\n      type: \"string\",\n      title: \"Schema version\",\n      const: \"checkout/v1\",\n    },\n    amount: { type: \"number\", title: \"Amount\", minimum: 0 },\n    currency: {\n      type: \"string\",\n      title: \"Currency\",\n      enum: [\"EUR\", \"USD\", \"GBP\"],\n    },\n    expedited: { type: \"boolean\", title: \"Expedited\" },\n    gift_wrap: { type: \"boolean\", title: \"Gift wrap\" },\n    // Declarative visibility rule (x-ui-rule): declared at its own position,\n    // shown only when gift_wrap is checked. Contrast with the if/then/else\n    // fields above, which are structurally added by their conditionals.\n    gift_message: {\n      type: \"string\",\n      title: \"Gift message\",\n      \"x-ui-rule\": {\n        effect: \"show\",\n        condition: { scope: \"/gift_wrap\", schema: { const: true } },\n      },\n    },\n    // Nullable optional (anyOf [T, null]) -- the renderer unwraps to T.\n    note: {\n      title: \"Note (optional)\",\n      anyOf: [{ type: \"string\" }, { type: \"null\" }],\n    },\n    // A discriminated union (oneOf): the payment method.\n    payment: {\n      type: \"object\",\n      title: \"Payment method\",\n      discriminator: { propertyName: \"kind\" },\n      oneOf: [\n        {\n          title: \"Card\",\n          properties: {\n            kind: { const: \"card\" },\n            card_number: { type: \"string\", title: \"Card number\" },\n            cvc: { type: \"string\", title: \"CVC\" },\n          },\n        },\n        {\n          title: \"Bank transfer\",\n          properties: {\n            kind: { const: \"bank\" },\n            iban: { type: \"string\", title: \"IBAN\" },\n          },\n        },\n        {\n          title: \"Cash\",\n          properties: { kind: { const: \"cash\" } },\n        },\n      ],\n    },\n  },\n  required: [\"amount\", \"currency\"],\n  // Conditionals (if/then/else) authored as allOf members.\n  allOf: [\n    {\n      // Large amounts require an approval reference.\n      if: {\n        properties: { amount: { exclusiveMinimum: 1000 } },\n        required: [\"amount\"],\n      },\n      then: {\n        properties: {\n          requires_approval: {\n            type: \"string\",\n            title: \"Approval reference\",\n          },\n        },\n        required: [\"requires_approval\"],\n      },\n    },\n    {\n      // Expedited orders ask for a delivery window; otherwise none.\n      if: {\n        properties: { expedited: { const: true } },\n        required: [\"expedited\"],\n      },\n      then: {\n        properties: {\n          delivery_window: {\n            type: \"string\",\n            title: \"Delivery window\",\n            enum: [\"morning\", \"afternoon\", \"evening\"],\n          },\n        },\n      },\n    },\n  ],\n};\n\nconst AUDIT_EDITABLE_PATHS = [\n  \"/properties/metadata/properties\",\n  \"/properties/actor/properties/metadata/properties\",\n  \"/properties/targets/items/properties/metadata/properties\",\n];\n\n// The examples to work on, simple to advanced.\nconst EXAMPLES = {\n  simple: { label: \"Simple -- contact\", schema: CONTACT_SCHEMA },\n  medium: { label: \"Medium -- patient\", schema: SAMPLE_SCHEMA },\n  advanced: { label: \"Advanced -- checkout (logic)\", schema: LOGIC_SCHEMA },\n} satisfies Record<string, { label: string; schema: JsonSchema }>;\ntype ExampleKey = keyof typeof EXAMPLES;\n\ntype ProfileKey = \"full\" | \"data\" | \"scoped\" | \"structure\";\n\n// The capability profiles to work with -- what the designer lets an author do.\ninterface Profile {\n  label: string;\n  description: string;\n  capabilities?: SchemaDesignerCapabilities;\n  /** A schema the profile is made for, used instead of the example -- and its name. */\n  schema?: JsonSchema;\n  schemaLabel?: string;\n  readOnly?: boolean;\n}\n\nconst PROFILES: Record<ProfileKey, Profile> = {\n  full: {\n    label: \"Full (schema + uiSchema)\",\n    description: \"Default: author the schema and its form presentation hints.\",\n    capabilities: { previews: [\"form\", \"table\", \"json\", \"capabilities\"] },\n  },\n  data: {\n    label: \"Data schema only\",\n    description:\n      \"Pure JSON Schema (audit, terminology): no UI/Combined tabs, JSON preview only.\",\n    capabilities: { mode: \"data\", previews: [\"json\", \"capabilities\"] },\n  },\n  scoped: {\n    label: \"Scoped (audit event)\",\n    description:\n      \"Made for an audit event: its fixed envelope locked, only its three metadata containers editable.\",\n    schema: AUDIT_SCHEMA,\n    schemaLabel: \"Audit event (the profile's own)\",\n    capabilities: {\n      mode: \"data\",\n      editablePaths: AUDIT_EDITABLE_PATHS,\n      previews: [\"json\", \"capabilities\"],\n    },\n  },\n  structure: {\n    label: \"Structure only (no preview)\",\n    description: \"Tree + inspector only; the center preview pane is hidden.\",\n    capabilities: { mode: \"data\", previews: [] },\n  },\n};\n\n/**\n * PlaySchemaDesigner -- exercises SchemaDesigner: visually author a JsonSchema\n * (and its uiSchema presentation hints), with a live preview. Two separate\n * choices: the example schema to work on, simple to advanced, and the\n * capability profile to work with (data/full triage, scoped editing, no\n * preview); the in-designer Capabilities tab tweaks the profile live.\n */\nexport default function PlaySchemaDesigner() {\n  const [exampleKey, setExampleKey] = useState<ExampleKey>(\"medium\");\n  const [profileKey, setProfileKey] = useState<ProfileKey>(\"full\");\n  const profile = PROFILES[profileKey];\n\n  const [schema, setSchema] = useState<JsonSchema>(EXAMPLES.medium.schema);\n  const [uiSchema, setUiSchema] = useState<Record<string, UISchema>>({});\n\n  // The schema worked on: the profile's own, else the example's.\n  const load = (example: ExampleKey, key: ProfileKey) => {\n    setSchema(PROFILES[key].schema ?? EXAMPLES[example].schema);\n    setUiSchema({});\n  };\n  const selectExample = (key: ExampleKey) => {\n    setExampleKey(key);\n    load(key, profileKey);\n  };\n  // A profile with a schema of its own replaces the example; leaving it brings the example back.\n  const selectProfile = (key: ProfileKey) => {\n    const reload = !!PROFILES[key].schema || !!profile.schema;\n    setProfileKey(key);\n    if (reload) load(exampleKey, key);\n  };\n\n  return (\n    <div className=\"w-full flex flex-col gap-3 h-[calc(100vh-8rem)]\">\n      <div>\n        <h1>Schema Designer</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Visually author a JSON Schema and its UI presentation hints. Edits\n          flow through onChange as a valid schema + uiSchema.\n        </p>\n      </div>\n\n      <DesignerControls\n        examples={EXAMPLES}\n        example={exampleKey}\n        onExample={selectExample}\n        exampleLocked={profile.schemaLabel}\n        profiles={PROFILES}\n        profile={profileKey}\n        onProfile={selectProfile}\n      />\n\n      <div style={{ flex: 1, minHeight: 0 }}>\n        <SchemaDesigner\n          key={`${exampleKey}-${profileKey}`}\n          schema={schema}\n          uiSchema={uiSchema}\n          capabilities={profile.capabilities}\n          readOnly={profile.readOnly}\n          onChange={(nextSchema, nextUiSchema) => {\n            setSchema(nextSchema);\n            setUiSchema(nextUiSchema);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-I2FLG6ZD.js → chunk-LDCNLHO2.js}

@@ -21,7 +21,8 @@ import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
 import {
   ArrowRight,
   ChevronLeft,
-  ChevronRight as ChevronRightIcon
+  ChevronRight as ChevronRightIcon,
+  ChevronDown
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SAMPLE_SCHEMA = {
@@ -46,10 +47,82 @@ var SAMPLE_SCHEMA = {
       minimum: 0,
       maximum: 60
     },
+    // A plain string list renders as tags (no x-ui-widget needed).
+    languages: {
+      type: "array",
+      title: "Languages",
+      description: "Type a language and press Enter.",
+      items: { type: "string" }
+    },
+    // The Optional[int] shape Pydantic and Zod emit: the bounds live on the
+    // non-null member and still reach the number input.
+    max_patients: {
+      anyOf: [{ type: "integer", minimum: 1, maximum: 50 }, { type: "null" }],
+      title: "Max Patients per Day",
+      description: "Optional; 1 to 50."
+    },
     active: { type: "boolean", title: "Active" }
   },
   required: ["name", "npi"]
 };
+var VALIDATION_SCHEMA = {
+  title: "Validation showcase",
+  type: "object",
+  // Cross-field / form validator (registered by the app): confirmEmail == email.
+  "x-ui-validate": ["emailsMatch"],
+  properties: {
+    email: {
+      type: "string",
+      title: "Email",
+      format: "email",
+      description: "Built-in: format: email"
+    },
+    confirmEmail: {
+      type: "string",
+      title: "Confirm email",
+      format: "email",
+      description: "Cross-field: must match Email (x-ui-validate on the object)"
+    },
+    website: {
+      type: "string",
+      title: "Website",
+      format: "uri",
+      description: "Built-in: format: uri"
+    },
+    zip: {
+      type: "string",
+      title: "ZIP code",
+      pattern: "^[0-9]{5}$",
+      description: "Built-in: pattern (five digits)"
+    },
+    age: {
+      type: "integer",
+      title: "Age",
+      minimum: 18,
+      maximum: 120,
+      description: "Built-in: minimum / maximum"
+    },
+    plan: {
+      type: "string",
+      title: "Plan",
+      enum: ["free", "pro", "enterprise"],
+      description: "Built-in: enum"
+    },
+    slug: {
+      type: "string",
+      title: "Slug",
+      "x-ui-validate": "slug",
+      description: "Custom: x-ui-validate: 'slug' (registered by the app)"
+    },
+    handle: {
+      type: "string",
+      title: "Handle",
+      "x-ui-validate": "uniqueHandle",
+      description: "Async: remote uniqueness check -- try 'taken'"
+    }
+  },
+  required: ["email"]
+};
 var NESTED_OBJECT_SCHEMA = {
   title: "Patient",
   type: "object",
@@ -402,6 +475,7 @@ var SECTIONS_LAYOUT_UISCHEMA = {
 };
 var sampleSchemas = {
   flat: SAMPLE_SCHEMA,
+  validation: VALIDATION_SCHEMA,
   nested_object: NESTED_OBJECT_SCHEMA,
   one_of: ONEOF_SCHEMA,
   array_of_objects: ARRAY_OF_OBJECTS_SCHEMA,
@@ -495,9 +569,16 @@ function usePlayFormsState() {
   const [dataError, setDataError] = useState("");
   const [activeTab, setActiveTab] = useState("schema");
   const [deferStateUpdates, setDeferStateUpdates] = useState(false);
+  const [validationDisplay, setValidationDisplay] = useState("onSubmit");
   const [dataCollapsed, setDataCollapsed] = useState(false);
+  const [errorsCollapsed, setErrorsCollapsed] = useState(false);
+  const [injectServerError, setInjectServerError] = useState(false);
   const [lastDiff, setLastDiff] = useState(null);
   const toggleDataPanel = useCallback(() => setDataCollapsed((v) => !v), []);
+  const toggleErrorsPanel = useCallback(
+    () => setErrorsCollapsed((v) => !v),
+    []
+  );
   const loadSchemaPreset = useCallback((value) => {
     if (!value || !sampleSchemas[value]) return;
     const text = JSON.stringify(sampleSchemas[value], null, 2);
@@ -533,7 +614,10 @@ function usePlayFormsState() {
     dataError,
     activeTab,
     deferStateUpdates,
+    validationDisplay,
     dataCollapsed,
+    errorsCollapsed,
+    injectServerError,
     lastDiff,
     setSchemaText,
     setUiSchemaText,
@@ -548,7 +632,10 @@ function usePlayFormsState() {
     setDataError,
     setActiveTab,
     setDeferStateUpdates,
+    setValidationDisplay,
     toggleDataPanel,
+    toggleErrorsPanel,
+    setInjectServerError,
     setLastDiff,
     loadSchemaPreset,
     loadUiSchemaPreset
@@ -725,8 +812,37 @@ function SchemaEditorColumn({
     }
   );
 }
+var DEMO_SERVER_ERRORS = [
+  { pointer: "/name", message: "Server: this name is already taken" },
+  { pointer: "", message: "Server: could not save (example form-level error)" }
+];
+var DEMO_VALIDATORS = {
+  field: {
+    slug: (value) => /^[a-z0-9-]+$/.test(String(value ?? "")) ? null : "Lowercase letters, digits and hyphens only"
+  },
+  form: {
+    // Cross-field: confirmEmail must equal email. Error attaches to the
+    // confirmEmail field by pointer.
+    emailsMatch: (data) => data.email && data.confirmEmail && data.email !== data.confirmEmail ? [{ pointer: "/confirmEmail", message: "Emails do not match" }] : []
+  },
+  // Declared in the `asyncField` namespace so the engine knows it is async and
+  // fires it only on value change. Demo: a simulated remote uniqueness check
+  // (200ms) where "taken" is unavailable.
+  asyncField: {
+    uniqueHandle: async (value) => {
+      await new Promise((r) => setTimeout(r, 200));
+      return String(value ?? "") === "taken" ? "Handle is already taken (async check)" : null;
+    }
+  }
+};
+var VALIDATION_DISPLAY_OPTIONS = [
+  { value: "onSubmit", label: "Errors: on submit" },
+  { value: "onTouched", label: "Errors: on blur" },
+  { value: "always", label: "Errors: always" }
+];
 var SCHEMA_PRESET_OPTIONS = [
   { value: "flat", label: "Practitioner (flat fields)" },
+  { value: "validation", label: "Validation showcase (built-in + custom)" },
   { value: "nested_object", label: "Patient (nested object)" },
   { value: "one_of", label: "Payment (oneOf variant)" },
   { value: "array_of_objects", label: "Medication Request (array)" },
@@ -791,9 +907,9 @@ function FormColumn({
               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__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Rendered Form" }),
                   /* @__PURE__ */ jsx(
                     Badge,
                     {
@@ -801,21 +917,53 @@ function FormColumn({
                       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-destructive", children: err }, idx)) })
+                /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border p-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-muted-foreground mb-1.5", children: "Options" }),
+                  /* @__PURE__ */ jsxs(SimpleGroup, { gap: "md", align: "center", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsx(
+                      FormSelect,
+                      {
+                        label: false,
+                        "aria-label": "Validation display timing",
+                        options: VALIDATION_DISPLAY_OPTIONS,
+                        value: state.validationDisplay,
+                        onChange: (value) => {
+                          if (value) {
+                            state.setValidationDisplay(value);
+                          }
+                        },
+                        className: "text-xs",
+                        wrapperClassName: "w-44"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormCheckbox,
+                      {
+                        label: "Change on blur",
+                        checked: state.deferStateUpdates,
+                        onChange: (checked) => {
+                          if (checked !== "indeterminate") {
+                            state.setDeferStateUpdates(checked);
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormCheckbox,
+                      {
+                        label: "Inject server error",
+                        checked: state.injectServerError,
+                        onChange: (checked) => {
+                          if (checked !== "indeterminate") {
+                            state.setInjectServerError(checked);
+                          }
+                        }
+                      }
+                    )
+                  ] })
+                ] })
               ] }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -838,6 +986,9 @@ function FormColumn({
                         showActions: true,
                         allowPristineSave: true,
                         deferStateUpdates: state.deferStateUpdates,
+                        validationDisplay: state.validationDisplay,
+                        validators: DEMO_VALIDATORS,
+                        extraErrors: state.injectServerError ? DEMO_SERVER_ERRORS : void 0,
                         saveLabel: "Save Changes",
                         cancelLabel: "Reset",
                         showExtraProperties: true,
@@ -863,6 +1014,31 @@ function FormColumn({
     }
   );
 }
+function ErrorsCard({
+  state
+}) {
+  if (state.validationErrors.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Card, { className: "border shadow-sm shrink-0 flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: state.toggleErrorsPanel,
+        className: "flex items-center gap-2 px-4 py-3 text-left rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: [
+          state.errorsCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-destructive", children: [
+            "Errors (",
+            state.validationErrors.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto text-[11px] font-medium text-muted-foreground", children: "via onValidationChange" })
+        ]
+      }
+    ),
+    !state.errorsCollapsed && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 space-y-0.5", children: state.validationErrors.map((err, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: err }, idx)) })
+  ] });
+}
 function DataColumn({
   state
 }) {
@@ -882,6 +1058,7 @@ function DataColumn({
         transition: "flex 200ms ease"
       },
       children: [
+        !state.dataCollapsed && /* @__PURE__ */ jsx(ErrorsCard, { state }),
         /* @__PURE__ */ jsxs(
           Card,
           {
@@ -975,4 +1152,4 @@ function PlayForms() {
 export {
   PlayForms
 };
-//# sourceMappingURL=chunk-I2FLG6ZD.js.map
+//# sourceMappingURL=chunk-LDCNLHO2.js.map

package/dist/chunk-LDCNLHO2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayForms.tsx"],"sourcesContent":["/**\n * Playground page for testing JsonSchemaFormRenderer\n * Accessible at /playground/forms\n */\n\nimport { useState, useCallback } from \"react\";\nimport type { FormDiff } from \"@petrarca/sonnet-core/schema\";\nimport {\n  SimpleStack,\n  SimpleGroup,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  Card,\n  Badge,\n  SimpleTooltip,\n  Button,\n} from \"@petrarca/sonnet-ui\";\nimport {\n  FormSelect,\n  FormCheckbox,\n  JsonSchemaFormRenderer,\n  type UISchema,\n  type ValidatorRegistry,\n} from \"@petrarca/sonnet-forms\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport {\n  ArrowRight,\n  ChevronLeft,\n  ChevronRight as ChevronRightIcon,\n  ChevronDown,\n} from \"lucide-react\";\nimport type { JsonSchema, UILayoutConfig } from \"@petrarca/sonnet-core/schema\";\nimport type { ValidationDisplay } from \"@petrarca/sonnet-core/config\";\n\n// Sample schemas\nconst SAMPLE_SCHEMA: JsonSchema = {\n  title: \"Practitioner\",\n  type: \"object\",\n  properties: {\n    name: { type: \"string\", title: \"Full Name\" },\n    npi: { type: \"string\", title: \"NPI\" },\n    specialty: {\n      type: \"string\",\n      title: \"Specialty\",\n      enum: [\"cardiology\", \"neurology\", \"oncology\", \"radiology\", \"general\"],\n    },\n    notes: {\n      type: \"string\",\n      title: \"Notes\",\n      \"x-ui-widget\": \"textarea\",\n    },\n    years_experience: {\n      type: \"integer\",\n      title: \"Years of Experience\",\n      minimum: 0,\n      maximum: 60,\n    },\n    // A plain string list renders as tags (no x-ui-widget needed).\n    languages: {\n      type: \"array\",\n      title: \"Languages\",\n      description: \"Type a language and press Enter.\",\n      items: { type: \"string\" },\n    },\n    // The Optional[int] shape Pydantic and Zod emit: the bounds live on the\n    // non-null member and still reach the number input.\n    max_patients: {\n      anyOf: [{ type: \"integer\", minimum: 1, maximum: 50 }, { type: \"null\" }],\n      title: \"Max Patients per Day\",\n      description: \"Optional; 1 to 50.\",\n    },\n    active: { type: \"boolean\", title: \"Active\" },\n  },\n  required: [\"name\", \"npi\"],\n};\n\n// Validation showcase: built-in content constraints (email/pattern/range/enum)\n// plus a custom field validator referenced by name via x-ui-validate. The\n// playground registers a \"slug\" validator (DEMO_VALIDATORS); load this schema,\n// set \"Errors: on blur\", and type invalid values to see each rule fire.\nconst VALIDATION_SCHEMA: JsonSchema = {\n  title: \"Validation showcase\",\n  type: \"object\",\n  // Cross-field / form validator (registered by the app): confirmEmail == email.\n  \"x-ui-validate\": [\"emailsMatch\"],\n  properties: {\n    email: {\n      type: \"string\",\n      title: \"Email\",\n      format: \"email\",\n      description: \"Built-in: format: email\",\n    },\n    confirmEmail: {\n      type: \"string\",\n      title: \"Confirm email\",\n      format: \"email\",\n      description:\n        \"Cross-field: must match Email (x-ui-validate on the object)\",\n    },\n    website: {\n      type: \"string\",\n      title: \"Website\",\n      format: \"uri\",\n      description: \"Built-in: format: uri\",\n    },\n    zip: {\n      type: \"string\",\n      title: \"ZIP code\",\n      pattern: \"^[0-9]{5}$\",\n      description: \"Built-in: pattern (five digits)\",\n    },\n    age: {\n      type: \"integer\",\n      title: \"Age\",\n      minimum: 18,\n      maximum: 120,\n      description: \"Built-in: minimum / maximum\",\n    },\n    plan: {\n      type: \"string\",\n      title: \"Plan\",\n      enum: [\"free\", \"pro\", \"enterprise\"],\n      description: \"Built-in: enum\",\n    },\n    slug: {\n      type: \"string\",\n      title: \"Slug\",\n      \"x-ui-validate\": \"slug\",\n      description: \"Custom: x-ui-validate: 'slug' (registered by the app)\",\n    },\n    handle: {\n      type: \"string\",\n      title: \"Handle\",\n      \"x-ui-validate\": \"uniqueHandle\",\n      description: \"Async: remote uniqueness check -- try 'taken'\",\n    },\n  },\n  required: [\"email\"],\n};\n\n// Nested object (1:1)\nconst NESTED_OBJECT_SCHEMA: JsonSchema = {\n  title: \"Patient\",\n  type: \"object\",\n  properties: {\n    family_name: { type: \"string\", title: \"Family Name\" },\n    given_name: { type: \"string\", title: \"Given Name\" },\n    birth_date: { type: \"string\", title: \"Date of Birth\", format: \"date\" },\n    contact: {\n      type: \"object\",\n      title: \"Contact\",\n      properties: {\n        phone: { type: \"string\", title: \"Phone\" },\n        email: { type: \"string\", title: \"Email\", format: \"email\" },\n        address: { type: \"string\", title: \"Address\" },\n        city: { type: \"string\", title: \"City\" },\n        country: {\n          type: \"string\",\n          title: \"Country\",\n          enum: [\"DE\", \"AT\", \"CH\", \"US\", \"GB\"],\n        },\n      },\n      required: [\"phone\"],\n    },\n  },\n  required: [\"family_name\", \"given_name\"],\n};\n\n// Discriminated union (oneOf) -- a variant field that swaps shape by branch.\nconst ONEOF_SCHEMA: JsonSchema = {\n  title: \"Payment\",\n  type: \"object\",\n  properties: {\n    amount: { type: \"number\", title: \"Amount\" },\n    method: {\n      type: \"object\",\n      title: \"Payment method\",\n      discriminator: { propertyName: \"kind\" },\n      oneOf: [\n        {\n          title: \"Credit card\",\n          properties: {\n            kind: { const: \"card\" },\n            cardNumber: { type: \"string\", title: \"Card number\" },\n            expiry: { type: \"string\", title: \"Expiry (MM/YY)\" },\n          },\n          required: [\"cardNumber\"],\n        },\n        {\n          title: \"Bank transfer\",\n          properties: {\n            kind: { const: \"bank\" },\n            iban: { type: \"string\", title: \"IBAN\" },\n          },\n          required: [\"iban\"],\n        },\n        {\n          title: \"Cash\",\n          properties: {\n            kind: { const: \"cash\" },\n            note: { type: \"string\", title: \"Note\" },\n          },\n        },\n      ],\n    },\n  },\n  required: [\"amount\"],\n};\n\n// Array of objects (1:n)\nconst ARRAY_OF_OBJECTS_SCHEMA: JsonSchema = {\n  title: \"Medication Request\",\n  type: \"object\",\n  properties: {\n    patient_id: { type: \"string\", title: \"Patient ID\" },\n    prescriber: { type: \"string\", title: \"Prescriber\" },\n    medications: {\n      type: \"array\",\n      title: \"Medications\",\n      \"x-ui-options\": {\n        addLabel: \"Add Medication\",\n        emptyMessage: \"No medications added\",\n        orderable: true,\n      },\n      items: {\n        type: \"object\",\n        properties: {\n          drug_name: { type: \"string\", title: \"Drug Name\" },\n          dose: { type: \"string\", title: \"Dose\" },\n          route: {\n            type: \"string\",\n            title: \"Route\",\n            enum: [\"oral\", \"IV\", \"subcutaneous\", \"topical\", \"inhaled\"],\n          },\n          frequency: { type: \"string\", title: \"Frequency\" },\n          active: { type: \"boolean\", title: \"Active\" },\n        },\n        required: [\"drug_name\", \"dose\"],\n      },\n      minItems: 1,\n      maxItems: 10,\n    },\n  },\n  required: [\"patient_id\", \"prescriber\"],\n};\n\n// $ref with $defs\nconst REF_SCHEMA: JsonSchema = {\n  title: \"Care Plan\",\n  type: \"object\",\n  $defs: {\n    period: {\n      type: \"object\",\n      properties: {\n        start: { type: \"string\", title: \"Start Date\", format: \"date\" },\n        end: { type: \"string\", title: \"End Date\", format: \"date\" },\n      },\n      required: [\"start\"],\n    },\n  },\n  properties: {\n    patient_id: { type: \"string\", title: \"Patient ID\" },\n    title: { type: \"string\", title: \"Plan Title\" },\n    validity: {\n      $ref: \"#/$defs/period\",\n      title: \"Validity Period\",\n    },\n    activities: {\n      type: \"array\",\n      title: \"Activities\",\n      \"x-ui-options\": {\n        addLabel: \"Add Activity\",\n        orderable: true,\n      },\n      items: {\n        type: \"object\",\n        properties: {\n          description: { type: \"string\", title: \"Description\" },\n          schedule: {\n            $ref: \"#/$defs/period\",\n            title: \"Schedule\",\n          },\n        },\n        required: [\"description\"],\n      },\n      maxItems: 5,\n    },\n  },\n  required: [\"patient_id\", \"title\"],\n};\n\n// Horizontal array layout -- inline grid rows\nconst HORIZONTAL_ARRAY_SCHEMA: JsonSchema = {\n  title: \"Observation Panel\",\n  type: \"object\",\n  properties: {\n    subject: { type: \"string\", title: \"Subject ID\" },\n    observations: {\n      type: \"array\",\n      title: \"Observations\",\n      \"x-ui-layout\": {\n        direction: \"horizontal\",\n        columns: \"1fr 1fr 1fr 80px\",\n        gap: 8,\n        compact: true,\n      },\n      \"x-ui-options\": {\n        addLabel: \"Add Observation\",\n        emptyMessage: \"No observations recorded\",\n        orderable: true,\n      },\n      items: {\n        type: \"object\",\n        properties: {\n          code: {\n            type: \"string\",\n            title: \"LOINC Code\",\n            enum: [\"8310-5\", \"8867-4\", \"9279-1\", \"29463-7\"],\n          },\n          value: { type: \"string\", title: \"Value\" },\n          unit: {\n            type: \"string\",\n            title: \"Unit\",\n            enum: [\"Cel\", \"/min\", \"kg\", \"mmHg\", \"%\"],\n          },\n          abnormal: { type: \"boolean\", title: \"Abnormal\" },\n        },\n        required: [\"code\", \"value\"],\n      },\n      minItems: 0,\n      maxItems: 20,\n    },\n  },\n  required: [\"subject\"],\n};\n\n// Horizontal array layout -- full-height rows, no compact sizing\nconst HORIZONTAL_FULL_SCHEMA: JsonSchema = {\n  title: \"Allergy List\",\n  type: \"object\",\n  properties: {\n    patient_id: { type: \"string\", title: \"Patient ID\" },\n    allergies: {\n      type: \"array\",\n      title: \"Allergies\",\n      \"x-ui-layout\": {\n        direction: \"horizontal\",\n        columns: \"2fr 1fr 1fr\",\n        gap: 12,\n      },\n      \"x-ui-options\": {\n        addLabel: \"Add Allergy\",\n        emptyMessage: \"No allergies recorded\",\n        orderable: true,\n      },\n      items: {\n        type: \"object\",\n        properties: {\n          substance: { type: \"string\", title: \"Substance\" },\n          severity: {\n            type: \"string\",\n            title: \"Severity\",\n            enum: [\"mild\", \"moderate\", \"severe\"],\n          },\n          reaction: { type: \"string\", title: \"Reaction\" },\n        },\n        required: [\"substance\"],\n      },\n    },\n  },\n  required: [\"patient_id\"],\n};\n\n// Mixed: flat fields + nested object + array with variants\nconst MIXED_SCHEMA: JsonSchema = {\n  title: \"Healthcare Organization\",\n  type: \"object\",\n  properties: {\n    name: { type: \"string\", title: \"Name\" },\n    type: {\n      type: \"string\",\n      title: \"Type\",\n      enum: [\"hospital\", \"clinic\", \"lab\", \"pharmacy\"],\n    },\n    active: { type: \"boolean\", title: \"Active\" },\n    location: {\n      type: \"object\",\n      title: \"Location\",\n      \"x-ui-options\": { variant: \"card\" },\n      properties: {\n        address: { type: \"string\", title: \"Address\" },\n        city: { type: \"string\", title: \"City\" },\n        postal_code: { type: \"string\", title: \"Postal Code\" },\n        country: {\n          type: \"string\",\n          title: \"Country\",\n          enum: [\"DE\", \"AT\", \"CH\", \"US\", \"GB\"],\n        },\n      },\n      required: [\"address\", \"city\"],\n    },\n    contacts: {\n      type: \"array\",\n      title: \"Contacts\",\n      \"x-ui-options\": {\n        addLabel: \"Add Contact\",\n        orderable: true,\n        emptyMessage: \"No contacts defined\",\n      },\n      items: {\n        type: \"object\",\n        properties: {\n          name: { type: \"string\", title: \"Name\" },\n          role: {\n            type: \"string\",\n            title: \"Role\",\n            enum: [\"admin\", \"clinical\", \"billing\", \"technical\"],\n          },\n          email: { type: \"string\", title: \"Email\", format: \"email\" },\n          phone: { type: \"string\", title: \"Phone\" },\n        },\n        required: [\"name\", \"email\"],\n      },\n      minItems: 1,\n    },\n  },\n  required: [\"name\", \"type\"],\n};\n\n// Row layout: fields grouped into multi-column rows via x-ui-layout.rows\nconst ROW_LAYOUT_SCHEMA: JsonSchema = {\n  title: \"Practitioner Registration\",\n  type: \"object\",\n  properties: {\n    given_name: { type: \"string\", title: \"Given Name\" },\n    family_name: { type: \"string\", title: \"Family Name\" },\n    npi: { type: \"string\", title: \"NPI\" },\n    specialty: {\n      type: \"string\",\n      title: \"Specialty\",\n      enum: [\"cardiology\", \"neurology\", \"oncology\", \"radiology\", \"general\"],\n    },\n    email: { type: \"string\", title: \"Email\", format: \"email\" },\n    phone: { type: \"string\", title: \"Phone\" },\n    start_date: { type: \"string\", title: \"Start Date\" },\n    end_date: { type: \"string\", title: \"End Date\" },\n    notes: { type: \"string\", title: \"Notes\", \"x-ui-widget\": \"textarea\" },\n    active: { type: \"boolean\", title: \"Active\" },\n  },\n  required: [\"given_name\", \"family_name\", \"npi\"],\n};\n\n// x-ui-layout is a top-level meta-key, not a per-field UISchema.\n// The renderer reads it via index access so the cast is safe here.\nconst ROW_LAYOUT_UISCHEMA: Record<string, UISchema> = {\n  \"x-ui-layout\": {\n    rows: [\n      { fields: [\"given_name\", \"family_name\"], columns: \"1fr 1fr\" },\n      { fields: [\"npi\", \"specialty\"], columns: \"1fr 1fr\" },\n      { fields: [\"email\", \"phone\"], columns: \"1fr 1fr\" },\n      { fields: [\"start_date\", \"end_date\"], columns: \"1fr 1fr\" },\n    ],\n  } as unknown as UISchema,\n};\n\n// Tabbed layout over the same registration schema: rows nest inside tabs, one\n// tab appears only when `active` is checked, and required fields left empty\n// badge their tab with an error count (visible from any tab).\nconst GROUP_LAYOUT_UISCHEMA: Record<string, UISchema> = {\n  \"x-ui-layout\": {\n    groups: [\n      {\n        label: \"Identity\",\n        rows: [\n          { fields: [\"given_name\", \"family_name\"], columns: \"1fr 1fr\" },\n          { fields: [\"npi\", \"specialty\"], columns: \"1fr 1fr\" },\n        ],\n      },\n      {\n        label: \"Contact\",\n        rows: [{ fields: [\"email\", \"phone\"], columns: \"1fr 1fr\" }],\n      },\n      {\n        label: \"Engagement\",\n        rows: [\n          { fields: [\"start_date\", \"end_date\"], columns: \"1fr 1fr\" },\n          { fields: [\"active\"] },\n        ],\n      },\n      {\n        label: \"Notes\",\n        rows: [{ fields: [\"notes\"] }],\n        rule: {\n          effect: \"show\",\n          condition: { scope: \"/active\", schema: { const: true } },\n        },\n      },\n    ],\n  } as unknown as UISchema,\n};\n\n// The same groups presented as a wizard: only `variant` differs, proving the\n// presentation is a swappable template rather than a second layout model.\nconst STEPPER_LAYOUT_UISCHEMA: Record<string, UISchema> = {\n  \"x-ui-layout\": {\n    variant: \"stepper\",\n    groups: (GROUP_LAYOUT_UISCHEMA[\"x-ui-layout\"] as unknown as UILayoutConfig)\n      .groups,\n  } as unknown as UISchema,\n};\n\n// The same groups again, stacked as sections: every group visible at once,\n// each spanning as many rows as it declares.\nconst SECTIONS_LAYOUT_UISCHEMA: Record<string, UISchema> = {\n  \"x-ui-layout\": {\n    variant: \"sections\",\n    groups: (GROUP_LAYOUT_UISCHEMA[\"x-ui-layout\"] as unknown as UILayoutConfig)\n      .groups,\n  } as unknown as UISchema,\n};\n\nconst sampleSchemas: Record<string, JsonSchema> = {\n  flat: SAMPLE_SCHEMA,\n  validation: VALIDATION_SCHEMA,\n  nested_object: NESTED_OBJECT_SCHEMA,\n  one_of: ONEOF_SCHEMA,\n  array_of_objects: ARRAY_OF_OBJECTS_SCHEMA,\n  ref_defs: REF_SCHEMA,\n  mixed: MIXED_SCHEMA,\n  horizontal_array: HORIZONTAL_ARRAY_SCHEMA,\n  horizontal_full: HORIZONTAL_FULL_SCHEMA,\n  row_layout: ROW_LAYOUT_SCHEMA,\n  tab_layout: ROW_LAYOUT_SCHEMA,\n  stepper_layout: ROW_LAYOUT_SCHEMA,\n  sections_layout: ROW_LAYOUT_SCHEMA,\n};\n\n// Schema presets that ship with a matching uiSchema (layout demos).\nconst PAIRED_UISCHEMAS: Record<string, Record<string, UISchema>> = {\n  row_layout: ROW_LAYOUT_UISCHEMA,\n  tab_layout: GROUP_LAYOUT_UISCHEMA,\n  stepper_layout: STEPPER_LAYOUT_UISCHEMA,\n  sections_layout: SECTIONS_LAYOUT_UISCHEMA,\n};\n\n// Sample UI Schemas\nconst sampleUiSchemas: Record<string, string> = {\n  empty: \"{}\",\n  hideLabels: JSON.stringify(\n    {\n      \"x-ui-globalOptions\": {\n        label: false,\n      },\n    },\n    null,\n    2,\n  ),\n  disableAll: JSON.stringify(\n    {\n      \"x-ui-globalOptions\": {\n        disabled: true,\n      },\n    },\n    null,\n    2,\n  ),\n  readonlyAll: JSON.stringify(\n    {\n      \"x-ui-globalOptions\": {\n        readonly: true,\n      },\n    },\n    null,\n    2,\n  ),\n  fieldOverride: JSON.stringify(\n    {\n      \"x-ui-globalOptions\": {\n        disabled: true,\n      },\n      name: {\n        \"x-ui-options\": {\n          disabled: false, // Override: enable this field\n        },\n      },\n    },\n    null,\n    2,\n  ),\n  customWidget: JSON.stringify(\n    {\n      description: {\n        \"x-ui-widget\": \"textarea\",\n        \"x-ui-options\": {\n          rows: 5,\n        },\n      },\n    },\n    null,\n    2,\n  ),\n};\n\n// -- State hook ----------------------------------------------------------\n\nfunction usePlayFormsState() {\n  const [schemaText, setSchemaText] = useState(\n    JSON.stringify(SAMPLE_SCHEMA, null, 2),\n  );\n  const [uiSchemaText, setUiSchemaText] = useState(\"{}\");\n  const [activeSchema, setActiveSchema] = useState<JsonSchema | null>(\n    SAMPLE_SCHEMA,\n  );\n  const [activeUiSchema, setActiveUiSchema] = useState<\n    Record<string, UISchema>\n  >({});\n  const [dataText, setDataText] = useState(\"{}\");\n  const [formData, setFormData] = useState<Record<string, unknown>>({});\n  const [validationErrors, setValidationErrors] = useState<string[]>([]);\n  const [isValid, setIsValid] = useState(true);\n  const [schemaError, setSchemaError] = useState(\"\");\n  const [uiSchemaError, setUiSchemaError] = useState(\"\");\n  const [dataError, setDataError] = useState(\"\");\n  const [activeTab, setActiveTab] = useState(\"schema\");\n  const [deferStateUpdates, setDeferStateUpdates] = useState(false);\n  const [validationDisplay, setValidationDisplay] =\n    useState<ValidationDisplay>(\"onSubmit\");\n  const [dataCollapsed, setDataCollapsed] = useState(false);\n  const [errorsCollapsed, setErrorsCollapsed] = useState(false);\n  const [injectServerError, setInjectServerError] = useState(false);\n  const [lastDiff, setLastDiff] = useState<FormDiff | null>(null);\n  const toggleDataPanel = useCallback(() => setDataCollapsed((v) => !v), []);\n  const toggleErrorsPanel = useCallback(\n    () => setErrorsCollapsed((v) => !v),\n    [],\n  );\n\n  const loadSchemaPreset = useCallback((value: string | null) => {\n    if (!value || !sampleSchemas[value]) return;\n    const text = JSON.stringify(sampleSchemas[value], null, 2);\n    setSchemaText(text);\n    setActiveSchema(sampleSchemas[value]);\n    setSchemaError(\"\");\n    setFormData({});\n    setDataText(\"{}\");\n    const pairedUi = PAIRED_UISCHEMAS[value] ?? {};\n    setUiSchemaText(JSON.stringify(pairedUi, null, 2));\n    setActiveUiSchema(pairedUi);\n    setUiSchemaError(\"\");\n  }, []);\n\n  const loadUiSchemaPreset = useCallback(\n    (value: string | null) => {\n      if (!value) return;\n      setUiSchemaText(sampleUiSchemas[value]);\n      setUiSchemaError(\"\");\n    },\n    [setUiSchemaText],\n  );\n\n  return {\n    schemaText,\n    uiSchemaText,\n    activeSchema,\n    activeUiSchema,\n    dataText,\n    formData,\n    validationErrors,\n    isValid,\n    schemaError,\n    uiSchemaError,\n    dataError,\n    activeTab,\n    deferStateUpdates,\n    validationDisplay,\n    dataCollapsed,\n    errorsCollapsed,\n    injectServerError,\n    lastDiff,\n    setSchemaText,\n    setUiSchemaText,\n    setActiveSchema,\n    setActiveUiSchema,\n    setDataText,\n    setFormData,\n    setValidationErrors,\n    setIsValid,\n    setSchemaError,\n    setUiSchemaError,\n    setDataError,\n    setActiveTab,\n    setDeferStateUpdates,\n    setValidationDisplay,\n    toggleDataPanel,\n    toggleErrorsPanel,\n    setInjectServerError,\n    setLastDiff,\n    loadSchemaPreset,\n    loadUiSchemaPreset,\n  };\n}\n\n// -- JSON parse helpers --------------------------------------------------\n\nfunction tryParseAndSet(\n  value: string,\n  setError: (e: string) => void,\n  errorMessage = \"Invalid JSON\",\n) {\n  try {\n    JSON.parse(value);\n    setError(\"\");\n  } catch {\n    setError(errorMessage);\n  }\n}\n\nfunction tryParseAndLoad<T>(\n  text: string,\n  onSuccess: (parsed: T) => void,\n  onError: (msg: string) => void,\n) {\n  try {\n    onSuccess(JSON.parse(text));\n    onError(\"\");\n  } catch {\n    onError(\"Invalid JSON - cannot load to form\");\n  }\n}\n\n// -- Shared panel arrow button -------------------------------------------\n\ninterface PanelArrowButtonProps {\n  label: string;\n  onClick: () => void;\n  mirrored?: boolean;\n}\n\nfunction PanelArrowButton({\n  label,\n  onClick,\n  mirrored = false,\n}: PanelArrowButtonProps) {\n  return (\n    <SimpleTooltip label={label}>\n      <Button\n        variant=\"default\"\n        size=\"icon\"\n        className=\"absolute -right-5 top-1/2 -translate-y-1/2 z-[100]\"\n        onClick={onClick}\n      >\n        <ArrowRight\n          size={20}\n          className={mirrored ? \"scale-x-[-1]\" : undefined}\n        />\n      </Button>\n    </SimpleTooltip>\n  );\n}\n\n// -- Left column: Schema / UI Schema editors -----------------------------\n\nfunction SchemaEditorColumn({\n  state,\n}: {\n  state: ReturnType<typeof usePlayFormsState>;\n}) {\n  const handleSchemaTextChange = (value: string) => {\n    state.setSchemaText(value);\n    tryParseAndSet(value, state.setSchemaError);\n  };\n\n  const handleUiSchemaTextChange = (value: string) => {\n    state.setUiSchemaText(value);\n    tryParseAndSet(value, state.setUiSchemaError);\n  };\n\n  const handleLoadSchemaToForm = () => {\n    tryParseAndLoad<JsonSchema>(\n      state.schemaText,\n      (parsed) => {\n        state.setActiveSchema(parsed);\n        state.setFormData({});\n        state.setDataText(\"{}\");\n        state.setValidationErrors([]);\n        state.setIsValid(true);\n        state.setLastDiff(null);\n      },\n      state.setSchemaError,\n    );\n  };\n\n  const handleLoadUiSchemaToForm = () => {\n    tryParseAndLoad<Record<string, UISchema>>(\n      state.uiSchemaText,\n      state.setActiveUiSchema,\n      state.setUiSchemaError,\n    );\n  };\n\n  return (\n    <div\n      style={{\n        flex: 1,\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        minWidth: 0,\n      }}\n    >\n      <Card className=\"border shadow-sm p-4 flex-1 min-h-0 flex flex-col\">\n        <Tabs\n          value={state.activeTab}\n          onValueChange={state.setActiveTab}\n          style={{\n            flex: 1,\n            minHeight: 0,\n            display: \"flex\",\n            flexDirection: \"column\",\n          }}\n        >\n          <TabsList className=\"mb-1\">\n            <TabsTrigger value=\"schema\">JSON Schema</TabsTrigger>\n            <TabsTrigger value=\"uischema\">UI Schema</TabsTrigger>\n          </TabsList>\n\n          <TabsContent\n            value=\"schema\"\n            className=\"flex-1 min-h-0 flex flex-col mt-0\"\n          >\n            <FormSelect\n              placeholder=\"Load example schema...\"\n              options={SCHEMA_PRESET_OPTIONS}\n              onChange={state.loadSchemaPreset}\n              className=\"text-xs\"\n              wrapperClassName=\"mb-2\"\n            />\n            {state.schemaError && (\n              <Badge variant=\"destructive\" className=\"text-xs mb-2\">\n                {state.schemaError}\n              </Badge>\n            )}\n            <JsonEditor\n              value={state.schemaText}\n              editablePaths={[\"/\"]}\n              onChange={handleSchemaTextChange}\n              height=\"100%\"\n              className=\"flex-1 min-h-0 rounded-md border overflow-hidden\"\n            />\n          </TabsContent>\n\n          <TabsContent\n            value=\"uischema\"\n            className=\"flex-1 min-h-0 flex flex-col mt-0\"\n          >\n            <FormSelect\n              placeholder=\"Load example...\"\n              options={UISCHEMA_PRESET_OPTIONS}\n              onChange={state.loadUiSchemaPreset}\n              className=\"text-xs\"\n              wrapperClassName=\"mb-2\"\n            />\n            {state.uiSchemaError && (\n              <Badge variant=\"destructive\" className=\"text-xs mb-2\">\n                {state.uiSchemaError}\n              </Badge>\n            )}\n            <JsonEditor\n              value={state.uiSchemaText}\n              editablePaths={[\"/\"]}\n              onChange={handleUiSchemaTextChange}\n              height=\"100%\"\n              className=\"flex-1 min-h-0 rounded-md border overflow-hidden\"\n            />\n          </TabsContent>\n        </Tabs>\n      </Card>\n\n      <PanelArrowButton\n        label={\n          state.activeTab === \"schema\"\n            ? \"Load Schema to Form\"\n            : \"Load UI Schema to Form\"\n        }\n        onClick={\n          state.activeTab === \"schema\"\n            ? handleLoadSchemaToForm\n            : handleLoadUiSchemaToForm\n        }\n      />\n    </div>\n  );\n}\n\n// Preset option arrays (static, avoids re-creation).\n// A sample external error set (e.g. what a server 422 would produce), used by\n// the \"Inject server error\" toggle to demonstrate the extraErrors prop. A\n// stable module constant so the prop reference does not change between renders.\n// One field-level error (attached by pointer) and one form-level (pointer \"\").\nconst DEMO_SERVER_ERRORS = [\n  { pointer: \"/name\", message: \"Server: this name is already taken\" },\n  { pointer: \"\", message: \"Server: could not save (example form-level error)\" },\n];\n\n// Example custom validators, referenced from a schema via x-ui-validate. Field\n// validators judge one value; a stable module constant so the prop is stable.\n// Try a schema like:\n//   { \"type\":\"object\", \"properties\":{\n//       \"slug\":{ \"type\":\"string\", \"title\":\"Slug\", \"x-ui-validate\":\"slug\" } } }\nconst DEMO_VALIDATORS: ValidatorRegistry = {\n  field: {\n    slug: (value) =>\n      /^[a-z0-9-]+$/.test(String(value ?? \"\"))\n        ? null\n        : \"Lowercase letters, digits and hyphens only\",\n  },\n  form: {\n    // Cross-field: confirmEmail must equal email. Error attaches to the\n    // confirmEmail field by pointer.\n    emailsMatch: (data) =>\n      data.email && data.confirmEmail && data.email !== data.confirmEmail\n        ? [{ pointer: \"/confirmEmail\", message: \"Emails do not match\" }]\n        : [],\n  },\n  // Declared in the `asyncField` namespace so the engine knows it is async and\n  // fires it only on value change. Demo: a simulated remote uniqueness check\n  // (200ms) where \"taken\" is unavailable.\n  asyncField: {\n    uniqueHandle: async (value) => {\n      await new Promise((r) => setTimeout(r, 200));\n      return String(value ?? \"\") === \"taken\"\n        ? \"Handle is already taken (async check)\"\n        : null;\n    },\n  },\n};\n\nconst VALIDATION_DISPLAY_OPTIONS = [\n  { value: \"onSubmit\", label: \"Errors: on submit\" },\n  { value: \"onTouched\", label: \"Errors: on blur\" },\n  { value: \"always\", label: \"Errors: always\" },\n];\n\nconst SCHEMA_PRESET_OPTIONS = [\n  { value: \"flat\", label: \"Practitioner (flat fields)\" },\n  { value: \"validation\", label: \"Validation showcase (built-in + custom)\" },\n  { value: \"nested_object\", label: \"Patient (nested object)\" },\n  { value: \"one_of\", label: \"Payment (oneOf variant)\" },\n  { value: \"array_of_objects\", label: \"Medication Request (array)\" },\n  { value: \"ref_defs\", label: \"Care Plan ($ref / $defs)\" },\n  { value: \"mixed\", label: \"Organization (mixed)\" },\n  { value: \"horizontal_array\", label: \"Observations (horizontal, compact)\" },\n  { value: \"horizontal_full\", label: \"Allergies (horizontal, full height)\" },\n  { value: \"row_layout\", label: \"Registration (row layout)\" },\n  { value: \"tab_layout\", label: \"Registration (tab layout)\" },\n  { value: \"stepper_layout\", label: \"Registration (stepper layout)\" },\n  { value: \"sections_layout\", label: \"Registration (sections layout)\" },\n];\n\nconst UISCHEMA_PRESET_OPTIONS = [\n  { value: \"empty\", label: \"Empty (no customization)\" },\n  { value: \"hideLabels\", label: \"Hide all labels\" },\n  { value: \"disableAll\", label: \"Disable all fields\" },\n  { value: \"readonlyAll\", label: \"Readonly all fields\" },\n  { value: \"fieldOverride\", label: \"Field-level override\" },\n  { value: \"customWidget\", label: \"Custom widget\" },\n];\n\n// -- Middle column: Rendered form ----------------------------------------\n\nfunction FormColumn({\n  state,\n}: {\n  state: ReturnType<typeof usePlayFormsState>;\n}) {\n  const handleUpdate = (\n    data: Record<string, unknown>,\n    _changedFields: Record<string, unknown>,\n    diff: FormDiff,\n  ) => {\n    state.setDataText(JSON.stringify(data, null, 2));\n    state.setFormData(data);\n    state.setLastDiff(diff);\n  };\n\n  const handleCancel = () => {\n    state.setFormData({});\n    state.setDataText(\"{}\");\n    state.setValidationErrors([]);\n    state.setIsValid(true);\n    state.setLastDiff(null);\n  };\n\n  const handleValidationChange = (errors: string[], valid: boolean) => {\n    state.setValidationErrors(errors);\n    state.setIsValid(valid);\n  };\n\n  const handleLoadDataToForm = () => {\n    tryParseAndLoad(state.dataText, state.setFormData, state.setDataError);\n  };\n\n  return (\n    <div\n      style={{\n        flex: 1,\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        minWidth: 0,\n      }}\n    >\n      <Card className=\"border shadow-sm p-4 flex-1 min-h-0 flex flex-col\">\n        <SimpleStack\n          gap=\"md\"\n          style={{\n            flex: 1,\n            minHeight: 0,\n            display: \"flex\",\n            flexDirection: \"column\",\n          }}\n        >\n          <div className=\"space-y-2\">\n            {/* Row 1: title + validity status */}\n            <div className=\"flex items-center gap-2\">\n              <p className=\"text-sm font-semibold\">Rendered Form</p>\n              <Badge\n                variant={state.isValid ? \"default\" : \"destructive\"}\n                className=\"text-xs\"\n              >\n                {state.isValid ? \"Valid\" : \"Invalid\"}\n              </Badge>\n            </div>\n            {/* Row 2: interactive options, grouped in a thin bordered panel */}\n            <div className=\"rounded-md border border-border p-2\">\n              <p className=\"text-[11px] font-medium text-muted-foreground mb-1.5\">\n                Options\n              </p>\n              <SimpleGroup gap=\"md\" align=\"center\" wrap=\"wrap\">\n                <FormSelect\n                  label={false}\n                  aria-label=\"Validation display timing\"\n                  options={VALIDATION_DISPLAY_OPTIONS}\n                  value={state.validationDisplay}\n                  onChange={(value) => {\n                    if (value) {\n                      state.setValidationDisplay(value as ValidationDisplay);\n                    }\n                  }}\n                  className=\"text-xs\"\n                  wrapperClassName=\"w-44\"\n                />\n                <FormCheckbox\n                  label=\"Change on blur\"\n                  checked={state.deferStateUpdates}\n                  onChange={(checked) => {\n                    if (checked !== \"indeterminate\") {\n                      state.setDeferStateUpdates(checked);\n                    }\n                  }}\n                />\n                <FormCheckbox\n                  label=\"Inject server error\"\n                  checked={state.injectServerError}\n                  onChange={(checked) => {\n                    if (checked !== \"indeterminate\") {\n                      state.setInjectServerError(checked);\n                    }\n                  }}\n                />\n              </SimpleGroup>\n            </div>\n          </div>\n\n          <div\n            style={{\n              flex: 1,\n              minHeight: 0,\n              overflowY: \"auto\",\n              paddingRight: \"4px\",\n            }}\n          >\n            {state.activeSchema && (\n              <JsonSchemaFormRenderer\n                schema={state.activeSchema}\n                data={state.formData}\n                onUpdate={handleUpdate}\n                onCancel={handleCancel}\n                onValidationChange={handleValidationChange}\n                showActions={true}\n                allowPristineSave\n                deferStateUpdates={state.deferStateUpdates}\n                validationDisplay={state.validationDisplay}\n                validators={DEMO_VALIDATORS}\n                extraErrors={\n                  state.injectServerError ? DEMO_SERVER_ERRORS : undefined\n                }\n                saveLabel=\"Save Changes\"\n                cancelLabel=\"Reset\"\n                showExtraProperties={true}\n                uiSchema={state.activeUiSchema}\n              />\n            )}\n            {!state.activeSchema && (\n              <p className=\"text-sm text-muted-foreground text-center mt-8\">\n                Edit the JSON Schema on the left and click the arrow to load it\n              </p>\n            )}\n          </div>\n        </SimpleStack>\n      </Card>\n\n      {!state.dataCollapsed && (\n        <PanelArrowButton\n          label=\"Load JSON Data into Form\"\n          onClick={handleLoadDataToForm}\n          mirrored\n        />\n      )}\n    </div>\n  );\n}\n\n// -- Right column: JSON data + diff --------------------------------------\n\n// Capability demo: a consumer aggregates onValidationChange into a single\n// summary and renders it wherever it likes -- here a collapsible card in the\n// inspector column. The renderer's own errors stay inline under each field;\n// this list is app-owned, not part of the renderer.\nfunction ErrorsCard({\n  state,\n}: {\n  state: ReturnType<typeof usePlayFormsState>;\n}) {\n  if (state.validationErrors.length === 0) return null;\n  return (\n    <Card className=\"border shadow-sm shrink-0 flex flex-col overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={state.toggleErrorsPanel}\n        className=\"flex items-center gap-2 px-4 py-3 text-left rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n      >\n        {state.errorsCollapsed ? (\n          <ChevronRightIcon className=\"h-4 w-4 text-muted-foreground\" />\n        ) : (\n          <ChevronDown className=\"h-4 w-4 text-muted-foreground\" />\n        )}\n        <span className=\"text-sm font-semibold text-destructive\">\n          Errors ({state.validationErrors.length})\n        </span>\n        <span className=\"ml-auto text-[11px] font-medium text-muted-foreground\">\n          via onValidationChange\n        </span>\n      </button>\n      {!state.errorsCollapsed && (\n        <div className=\"px-4 pb-4 space-y-0.5\">\n          {state.validationErrors.map((err, idx) => (\n            <p key={idx} className=\"text-xs text-destructive\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </Card>\n  );\n}\n\nfunction DataColumn({\n  state,\n}: {\n  state: ReturnType<typeof usePlayFormsState>;\n}) {\n  const handleDataTextChange = (value: string) => {\n    state.setDataText(value);\n    tryParseAndSet(value, state.setDataError);\n  };\n\n  return (\n    <div\n      style={{\n        flex: state.dataCollapsed ? \"0 0 2.25rem\" : 1,\n        display: \"flex\",\n        flexDirection: \"column\",\n        minWidth: 0,\n        gap: \"0.75rem\",\n        transition: \"flex 200ms ease\",\n      }}\n    >\n      {!state.dataCollapsed && <ErrorsCard state={state} />}\n\n      <Card\n        className=\"border shadow-sm min-h-0 flex flex-col overflow-hidden\"\n        style={{ flex: \"1 1 50%\" }}\n      >\n        <div className=\"flex items-center justify-between px-4 py-3 shrink-0\">\n          {!state.dataCollapsed && (\n            <p className=\"text-sm font-semibold\">JSON Data</p>\n          )}\n          <SimpleTooltip\n            label={\n              state.dataCollapsed ? \"Expand JSON data\" : \"Collapse JSON data\"\n            }\n          >\n            <Button\n              variant=\"ghost\"\n              size=\"compact\"\n              onClick={state.toggleDataPanel}\n              className=\"ml-auto\"\n            >\n              {state.dataCollapsed ? (\n                <ChevronLeft className=\"h-4 w-4\" />\n              ) : (\n                <ChevronRightIcon className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </SimpleTooltip>\n        </div>\n\n        {!state.dataCollapsed && (\n          <div className=\"flex-1 min-h-0 flex flex-col px-4 pb-4\">\n            {state.dataError && (\n              <Badge variant=\"destructive\" className=\"text-xs mb-2\">\n                {state.dataError}\n              </Badge>\n            )}\n            <JsonEditor\n              value={state.dataText}\n              editablePaths={[\"/\"]}\n              onChange={handleDataTextChange}\n              height=\"100%\"\n              className=\"flex-1 min-h-0 rounded-md border overflow-hidden\"\n            />\n          </div>\n        )}\n      </Card>\n\n      {!state.dataCollapsed && (\n        <Card\n          className=\"border shadow-sm min-h-0 flex flex-col overflow-hidden\"\n          style={{ flex: \"1 1 50%\" }}\n        >\n          <div className=\"flex items-center justify-between px-4 py-3 shrink-0\">\n            <p className=\"text-sm font-semibold\">Diff</p>\n          </div>\n          <div className=\"flex-1 min-h-0 flex flex-col px-4 pb-4\">\n            <JsonEditor\n              value={JSON.stringify(state.lastDiff ?? [], null, 2)}\n              editablePaths={[\"/\"]}\n              height=\"100%\"\n              className=\"flex-1 min-h-0 rounded-md border overflow-hidden\"\n            />\n          </div>\n        </Card>\n      )}\n    </div>\n  );\n}\n\n// -- Main component ------------------------------------------------------\n\nexport default function PlayForms() {\n  const state = usePlayFormsState();\n\n  return (\n    <div className=\"w-full flex flex-col gap-3 h-[calc(100vh-8rem)]\">\n      <div>\n        <h1>Forms Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Test and experiment with JsonSchemaFormRenderer. Edit the JSON Schema\n          on the left, then load it into the form.\n        </p>\n      </div>\n\n      <div\n        style={{\n          flex: 1,\n          minHeight: 0,\n          display: \"flex\",\n          gap: \"1.5rem\",\n        }}\n      >\n        <SchemaEditorColumn state={state} />\n        <FormColumn state={state} />\n        <DataColumn state={state} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-LVV32F7G.js

@@ -0,0 +1,104 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayCodeEditor.tsx
+import { useState } from "react";
+import { CodeEditor } from "@petrarca/sonnet-ui/code-editor";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PYTHON = Array.from(
+  { length: 400 },
+  (_, i) => i % 10 === 0 ? `
+# --- section ${i / 10} ---------------------------------------
+` : `def handler_${i}(request: dict) -> dict:
+    """Answer request ${i}."""
+    return {"id": ${i}, "ok": True, "items": [1, 2, 3]}
+`
+).join("");
+var CYPHER = `MATCH (s:Source)-[:CONTAINS]->(f:File)
+WHERE f.language = "python" AND f.lines > 500
+RETURN s.name, count(f) AS files
+ORDER BY files DESC
+LIMIT 10`;
+var MARKDOWN = `# Release notes
+
+The **file browser** now shows a tree by source and folder.
+
+- Folders open page by page
+- A search hit opens the file at its lines
+
+\`\`\`python
+print("hello")
+\`\`\`
+`;
+function PlayCodeEditor() {
+  const [markdown, setMarkdown] = useState(MARKDOWN);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Code Editor" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "CodeMirror with the sonnet look: code read-only, snippets, and text editing. Languages load on demand by file name or language name." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "A file, read-only",
+        description: "Full form: line numbers from firstLine (the text starts at line 101 of its file), folding, Ctrl/Cmd-F search. Lines 150-155 are highlighted and scrolled to; only the visible lines are drawn.",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(
+          CodeEditor,
+          {
+            value: PYTHON,
+            language: "handlers.py",
+            readOnly: true,
+            firstLine: 101,
+            highlight: { from: 150, to: 155 },
+            height: "360px",
+            "aria-label": "handlers.py"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "A snippet, compact",
+        description: "No gutter, as tall as the text up to maxHeight -- for a query in a card or a message.",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(
+          CodeEditor,
+          {
+            value: CYPHER,
+            language: "cypher",
+            readOnly: true,
+            variant: "compact",
+            "aria-label": "Cypher query"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Text, editable",
+        description: "Markdown with wrapped lines and the editing aids (active line, closing brackets).",
+        variant: "card",
+        children: /* @__PURE__ */ jsx(
+          CodeEditor,
+          {
+            value: markdown,
+            onChange: setMarkdown,
+            language: "markdown",
+            wrap: true,
+            height: "240px",
+            "aria-label": "Release notes"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  PlayCodeEditor
+};
+//# sourceMappingURL=chunk-LVV32F7G.js.map

package/dist/chunk-LVV32F7G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayCodeEditor.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { CodeEditor } from \"@petrarca/sonnet-ui/code-editor\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\n\n// A long file, so the full form has something to scroll and draw lazily.\nconst PYTHON = Array.from({ length: 400 }, (_, i) =>\n  i % 10 === 0\n    ? `\\n# --- section ${i / 10} ---------------------------------------\\n`\n    : `def handler_${i}(request: dict) -> dict:\\n    \"\"\"Answer request ${i}.\"\"\"\\n    return {\"id\": ${i}, \"ok\": True, \"items\": [1, 2, 3]}\\n`,\n).join(\"\");\n\nconst CYPHER = `MATCH (s:Source)-[:CONTAINS]->(f:File)\nWHERE f.language = \"python\" AND f.lines > 500\nRETURN s.name, count(f) AS files\nORDER BY files DESC\nLIMIT 10`;\n\nconst MARKDOWN = `# Release notes\n\nThe **file browser** now shows a tree by source and folder.\n\n- Folders open page by page\n- A search hit opens the file at its lines\n\n\\`\\`\\`python\nprint(\"hello\")\n\\`\\`\\`\n`;\n\n/** PlayCodeEditor -- CodeEditor in its three uses: a file, a snippet, text. */\nexport default function PlayCodeEditor() {\n  const [markdown, setMarkdown] = useState(MARKDOWN);\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Code Editor</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          CodeMirror with the sonnet look: code read-only, snippets, and text\n          editing. Languages load on demand by file name or language name.\n        </p>\n      </div>\n\n      <PlaygroundSection\n        title=\"A file, read-only\"\n        description=\"Full form: line numbers from firstLine (the text starts at line 101 of its file), folding, Ctrl/Cmd-F search. Lines 150-155 are highlighted and scrolled to; only the visible lines are drawn.\"\n        variant=\"card\"\n      >\n        <CodeEditor\n          value={PYTHON}\n          language=\"handlers.py\"\n          readOnly\n          firstLine={101}\n          highlight={{ from: 150, to: 155 }}\n          height=\"360px\"\n          aria-label=\"handlers.py\"\n        />\n      </PlaygroundSection>\n\n      <PlaygroundSection\n        title=\"A snippet, compact\"\n        description=\"No gutter, as tall as the text up to maxHeight -- for a query in a card or a message.\"\n        variant=\"card\"\n      >\n        <CodeEditor\n          value={CYPHER}\n          language=\"cypher\"\n          readOnly\n          variant=\"compact\"\n          aria-label=\"Cypher query\"\n        />\n      </PlaygroundSection>\n\n      <PlaygroundSection\n        title=\"Text, editable\"\n        description=\"Markdown with wrapped lines and the editing aids (active line, closing brackets).\"\n        variant=\"card\"\n      >\n        <CodeEditor\n          value={markdown}\n          onChange={setMarkdown}\n          language=\"markdown\"\n          wrap\n          height=\"240px\"\n          aria-label=\"Release notes\"\n        />\n      </PlaygroundSection>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAiCrB,SACE,KADF;AA7BN,IAAM,SAAS,MAAM;AAAA,EAAK,EAAE,QAAQ,IAAI;AAAA,EAAG,CAAC,GAAG,MAC7C,IAAI,OAAO,IACP;AAAA,gBAAmB,IAAI,EAAE;AAAA,IACzB,eAAe,CAAC;AAAA,wBAAmD,CAAC;AAAA,oBAA2B,CAAC;AAAA;AACtG,EAAE,KAAK,EAAE;AAET,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAMf,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaF,SAAR,iBAAkC;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,QAAQ;AACjD,SACE,qBAAC,SAAI,WAAU,8BACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,yBAAW;AAAA,MACf,oBAAC,OAAE,WAAU,sCAAqC,kJAGlD;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAQ;AAAA,YACR,WAAW;AAAA,YACX,WAAW,EAAE,MAAM,KAAK,IAAI,IAAI;AAAA,YAChC,QAAO;AAAA,YACP,cAAW;AAAA;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAQ;AAAA,YACR,SAAQ;AAAA,YACR,cAAW;AAAA;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,UAAS;AAAA,YACT,MAAI;AAAA,YACJ,QAAO;AAAA,YACP,cAAW;AAAA;AAAA,QACb;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}