@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/chunk-6DZ3TSV4.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} from \"@petrarca/sonnet-forms\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport {\n  ArrowRight,\n  ChevronLeft,\n  ChevronRight as ChevronRightIcon,\n} from \"lucide-react\";\nimport type { JsonSchema } from \"@petrarca/sonnet-core/schema\";\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    active: { type: \"boolean\", title: \"Active\" },\n  },\n  required: [\"name\", \"npi\"],\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// 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\nconst sampleSchemas: Record<string, JsonSchema> = {\n  flat: SAMPLE_SCHEMA,\n  nested_object: NESTED_OBJECT_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};\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 [dataCollapsed, setDataCollapsed] = useState(false);\n  const [lastDiff, setLastDiff] = useState<FormDiff | null>(null);\n  const toggleDataPanel = useCallback(() => setDataCollapsed((v) => !v), []);\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 = value === \"row_layout\" ? ROW_LAYOUT_UISCHEMA : {};\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    dataCollapsed,\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    toggleDataPanel,\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).\nconst SCHEMA_PRESET_OPTIONS = [\n  { value: \"flat\", label: \"Practitioner (flat fields)\" },\n  { value: \"nested_object\", label: \"Patient (nested object)\" },\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];\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>\n            <p className=\"text-sm font-semibold mb-1\">Rendered Form</p>\n            <SimpleGroup gap=\"xs\" align=\"center\" className=\"mb-1\">\n              <Badge\n                variant={state.isValid ? \"default\" : \"destructive\"}\n                className=\"text-xs\"\n              >\n                {state.isValid ? \"Valid\" : \"Invalid\"}\n              </Badge>\n              <FormCheckbox\n                label=\"Defer state updates (change on blur)\"\n                checked={state.deferStateUpdates}\n                onChange={(checked) => {\n                  if (checked !== \"indeterminate\") {\n                    state.setDeferStateUpdates(checked);\n                  }\n                }}\n              />\n            </SimpleGroup>\n            {state.validationErrors.length > 0 && (\n              <div style={{ marginTop: \"4px\" }}>\n                {state.validationErrors.map((err, idx) => (\n                  <p key={idx} className=\"text-xs text-destructive\">\n                    {err}\n                  </p>\n                ))}\n              </div>\n            )}\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                deferStateUpdates={state.deferStateUpdates}\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\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      <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-CYNK2P2Q.js → chunk-7IBZEHLI.js}

@@ -1,6 +1,6 @@
 import {
   PlaygroundSection
-} from "./chunk-FTN2A5YL.js";
+} from "./chunk-C2EZ2ECG.js";
 
 // src/pages/PlayTypography.tsx
 import { Separator } from "@petrarca/sonnet-ui";
@@ -29,10 +29,10 @@ function ColorSwatch({
   ] });
 }
 function PlayTypography() {
-  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4 max-w-4xl space-y-12", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { children: "Typography" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground mt-1 text-balance", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1 text-balance", children: [
         "Living style-guide for the typography system. Every specimen uses the sanctioned classes from",
         " ",
         /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-muted px-1.5 py-0.5 rounded", children: "docs/design/typography.md" }),
@@ -123,11 +123,11 @@ function PlayTypography() {
         description: "Named utility classes mapped to HTML heading elements via the base layer.",
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 border rounded-md p-6 bg-card", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h1 / .heading-page \u2014 text-2xl font-semibold tracking-tight" }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h1 / .heading-page \u2014 text-xl font-semibold tracking-tight" }),
             /* @__PURE__ */ jsx("h1", { children: "Page Title" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h2 / .heading-section \u2014 text-xl font-semibold" }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs font-mono text-faint-foreground", children: "h2 / .heading-section \u2014 text-base font-semibold" }),
             /* @__PURE__ */ jsx("h2", { children: "Section Heading" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -378,25 +378,26 @@ function PlayTypography() {
       PlaygroundSection,
       {
         title: "Font Rendering",
-        description: "Antialiased rendering is applied globally via the body class.",
+        description: "Apply antialiased manually where needed \u2014 it is not set globally on body.",
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
           /* @__PURE__ */ jsxs("p", { children: [
             "The",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "antialiased" }),
             " ",
-            "class on",
-            " ",
-            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "<body>" }),
-            " ",
-            "enables",
+            "utility enables",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "-webkit-font-smoothing: antialiased" }),
             " ",
             "and",
             " ",
             /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "-moz-osx-font-smoothing: grayscale" }),
-            "."
+            ". It is ",
+            /* @__PURE__ */ jsx("strong", { children: "not" }),
+            " applied globally in",
+            " ",
+            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded", children: "styles.css" }),
+            "; add it explicitly to elements where thinner rendering is desired."
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "This makes text render thinner and crisper, matching the look of polished dashboard UIs like Supabase and shadcn/ui." })
         ] })
@@ -408,4 +409,4 @@ function PlayTypography() {
 export {
   PlayTypography
 };
-//# sourceMappingURL=chunk-CYNK2P2Q.js.map
+//# sourceMappingURL=chunk-7IBZEHLI.js.map

package/dist/chunk-7IBZEHLI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayTypography.tsx"],"sourcesContent":["// Typography Playground\n//\n// Living style-guide for the typography system defined in\n// docs/design/typography.md. Every specimen uses the sanctioned\n// classes so it doubles as a visual regression surface.\nimport React from \"react\";\nimport { Separator } from \"@petrarca/sonnet-ui\";\nimport { PlaygroundSection as Section } from \"../PlaygroundSection\";\n\nfunction Specimen({\n  label,\n  className,\n  text,\n}: {\n  label: string;\n  className: string;\n  text?: string;\n}) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <code className=\"text-xs font-mono text-faint-foreground\">{label}</code>\n      <p className={className}>\n        {text ?? \"The quick brown fox jumps over the lazy dog\"}\n      </p>\n    </div>\n  );\n}\n\nfunction ColorSwatch({\n  name,\n  className,\n  cssVar,\n}: {\n  name: string;\n  className: string;\n  cssVar: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className={`${className} text-sm`}>\n        {name}: The quick brown fox jumps over the lazy dog\n      </span>\n      <code className=\"text-xs font-mono text-faint-foreground ml-auto shrink-0\">\n        {cssVar}\n      </code>\n    </div>\n  );\n}\n\nexport default function PlayTypography(): React.ReactElement {\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      {/* ── Page header ──────────────────────────────────────────── */}\n      <div>\n        <h1>Typography</h1>\n        <p className=\"text-sm text-muted-foreground mt-1 text-balance\">\n          Living style-guide for the typography system. Every specimen uses the\n          sanctioned classes from{\" \"}\n          <code className=\"text-xs font-mono bg-muted px-1.5 py-0.5 rounded\">\n            docs/design/typography.md\n          </code>\n          .\n        </p>\n      </div>\n\n      <Separator />\n\n      {/* ── 1. Font Families ─────────────────────────────────────── */}\n      <Section\n        title=\"Font Families\"\n        description=\"Inter (sans) for UI, JetBrains Mono (mono) for code and data IDs.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen label=\"font-sans (Inter)\" className=\"font-sans text-base\" />\n          <Specimen\n            label=\"font-mono (JetBrains Mono)\"\n            className=\"font-mono text-base\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 2. Type Scale ────────────────────────────────────────── */}\n      <Section\n        title=\"Type Scale\"\n        description=\"Sanctioned sizes from text-xs (12px) to text-3xl (30px).\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen label=\"text-3xl — 30px\" className=\"text-3xl\" />\n          <Specimen label=\"text-2xl — 24px\" className=\"text-2xl\" />\n          <Specimen label=\"text-xl — 20px\" className=\"text-xl\" />\n          <Specimen label=\"text-lg — 18px\" className=\"text-lg\" />\n          <Specimen label=\"text-base — 16px\" className=\"text-base\" />\n          <Specimen label=\"text-sm — 14px (workhorse)\" className=\"text-sm\" />\n          <Specimen label=\"text-xs — 12px\" className=\"text-xs\" />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 3. Font Weights ──────────────────────────────────────── */}\n      <Section\n        title=\"Font Weights\"\n        description=\"Three sanctioned weights. font-bold (700) and above are prohibited.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"font-normal (400) — body text, paragraphs\"\n            className=\"text-base font-normal\"\n          />\n          <Specimen\n            label=\"font-medium (500) — labels, buttons, interactive elements\"\n            className=\"text-base font-medium\"\n          />\n          <Specimen\n            label=\"font-semibold (600) — headings, card titles (max weight)\"\n            className=\"text-base font-semibold\"\n          />\n        </div>\n\n        <div className=\"mt-4 p-3 border border-destructive/20 bg-destructive/5 rounded-md\">\n          <p className=\"text-sm text-destructive font-medium\">\n            Prohibited weights\n          </p>\n          <div className=\"flex gap-6 mt-2\">\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-bold (700)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-extrabold (800)\n            </span>\n            <span className=\"text-sm text-muted-foreground line-through\">\n              font-black (900)\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 4. Heading Hierarchy ─────────────────────────────────── */}\n      <Section\n        title=\"Heading Hierarchy\"\n        description=\"Named utility classes mapped to HTML heading elements via the base layer.\"\n      >\n        <div className=\"space-y-4 border rounded-md p-6 bg-card\">\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h1 / .heading-page — text-xl font-semibold tracking-tight\n            </code>\n            <h1>Page Title</h1>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h2 / .heading-section — text-base font-semibold\n            </code>\n            <h2>Section Heading</h2>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h3 / .heading-sub — text-base font-medium\n            </code>\n            <h3>Subsection Heading</h3>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h4 / .heading-component — text-sm font-medium\n            </code>\n            <h4>Component Heading</h4>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              h6 / .heading-compact — text-xs font-medium\n            </code>\n            <h6>Compact Heading</h6>\n          </div>\n\n          <div className=\"flex flex-col gap-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              .heading-meta — text-xs font-medium font-mono uppercase\n              tracking-wider\n            </code>\n            <div className=\"heading-meta\">Meta Heading</div>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 5. Text Color Hierarchy ──────────────────────────────── */}\n      <Section\n        title=\"Text Color Hierarchy\"\n        description=\"Three semantic tiers. Never use hardcoded grays (text-gray-*, text-slate-*).\"\n      >\n        <div className=\"space-y-3 border rounded-md p-6 bg-card\">\n          <ColorSwatch\n            name=\"foreground\"\n            className=\"text-foreground\"\n            cssVar=\"--foreground\"\n          />\n          <ColorSwatch\n            name=\"muted-foreground\"\n            className=\"text-muted-foreground\"\n            cssVar=\"--muted-foreground\"\n          />\n          <ColorSwatch\n            name=\"faint-foreground\"\n            className=\"text-faint-foreground\"\n            cssVar=\"--faint-foreground\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 6. Line Height & Letter Spacing ──────────────────────── */}\n      <Section\n        title=\"Line Height & Letter Spacing\"\n        description=\"Sanctioned line-height and tracking classes.\"\n      >\n        <div className=\"space-y-4\">\n          <Specimen\n            label=\"leading-none (1.0) — compact labels, card titles\"\n            className=\"text-sm leading-none\"\n          />\n          <Specimen label=\"default — most text\" className=\"text-sm\" />\n          <Specimen\n            label=\"leading-relaxed (1.625) — multi-line descriptions\"\n            className=\"text-sm leading-relaxed\"\n            text=\"This is a longer paragraph to demonstrate relaxed line height. It should feel airy and comfortable to read, especially in descriptions and body content that spans multiple lines.\"\n          />\n          <Specimen\n            label=\"tracking-tight (-0.025em) — headings\"\n            className=\"text-2xl font-semibold tracking-tight\"\n            text=\"Page Title With Tracking\"\n          />\n          <Specimen\n            label=\"tracking-wider (0.05em) — meta headings\"\n            className=\"heading-meta\"\n            text=\"Category Label\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 7. Numeric Typography ────────────────────────────────── */}\n      <Section\n        title=\"Numeric Typography\"\n        description=\"tabular-nums for aligned digits. font-mono for IDs and codes.\"\n      >\n        <div className=\"grid grid-cols-2 gap-6\">\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Without tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold\">1,111</p>\n              <p className=\"text-2xl font-semibold\">8,888</p>\n              <p className=\"text-2xl font-semibold\">42.7%</p>\n            </div>\n          </div>\n          <div className=\"space-y-2 border rounded-md p-4 bg-card\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              With tabular-nums\n            </code>\n            <div className=\"space-y-0.5\">\n              <p className=\"text-2xl font-semibold tabular-nums\">1,111</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">8,888</p>\n              <p className=\"text-2xl font-semibold tabular-nums\">42.7%</p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-4 space-y-2\">\n          <code className=\"text-xs font-mono text-faint-foreground\">\n            font-mono for IDs and codes\n          </code>\n          <div className=\"space-y-1\">\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              ent_a1b2c3d4e5f6\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sk_live_51O2jK2eZvKYlo2C0\n            </p>\n            <p className=\"text-xs font-mono text-muted-foreground\">\n              sha256:9f86d081884c7d659a2feaa0\n            </p>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 8. Text Overflow ─────────────────────────────────────── */}\n      <Section\n        title=\"Text Overflow Handling\"\n        description=\"Patterns for dynamic content that can exceed its container.\"\n      >\n        <div className=\"space-y-4\">\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              truncate — single-line ellipsis\n            </code>\n            <p className=\"text-sm truncate max-w-xs border rounded px-2 py-1\">\n              This is a very long sidebar item name that will definitely\n              overflow its container and needs to be truncated with an ellipsis\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              line-clamp-2 — multi-line clamp\n            </code>\n            <p className=\"text-sm line-clamp-2 max-w-sm border rounded px-2 py-1\">\n              This is a card description that can span multiple lines. It will\n              be clamped to exactly two lines. Any content beyond two lines will\n              be hidden and replaced with an ellipsis. This sentence should be\n              hidden.\n            </p>\n          </div>\n\n          <div className=\"space-y-1\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              whitespace-nowrap — prevent wrapping (buttons, badges)\n            </code>\n            <span className=\"text-sm whitespace-nowrap border rounded px-2 py-1 inline-block\">\n              Badge text that never wraps\n            </span>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 9. Component Patterns ────────────────────────────────── */}\n      <Section\n        title=\"Component Typography Patterns\"\n        description=\"Standard text treatments for common UI components.\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          {/* Card pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Card\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Card Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Card description with muted foreground color.\n            </p>\n            <p className=\"text-2xl font-semibold tabular-nums mt-2\">$12,345</p>\n            <p className=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </div>\n\n          {/* Dialog pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-1.5\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Dialog\n            </code>\n            <p className=\"text-lg font-semibold leading-none tracking-tight\">\n              Dialog Title\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Dialog description providing context for the action.\n            </p>\n          </div>\n\n          {/* Button / Label pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-3\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Interactive Elements\n            </code>\n            <div className=\"space-y-1\">\n              <p className=\"text-sm font-medium leading-none\">Form Label</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Help text for the field.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <span className=\"text-sm font-medium bg-primary text-primary-foreground rounded-md px-3 py-1.5\">\n                Button\n              </span>\n              <span className=\"text-xs font-medium bg-secondary text-secondary-foreground rounded-full px-2.5 py-0.5\">\n                Badge\n              </span>\n            </div>\n          </div>\n\n          {/* Table pattern */}\n          <div className=\"border rounded-lg p-4 bg-card space-y-2\">\n            <code className=\"text-xs font-mono text-faint-foreground\">\n              Table\n            </code>\n            <table className=\"w-full text-sm\">\n              <thead>\n                <tr className=\"border-b\">\n                  <th className=\"text-left font-medium text-foreground py-1\">\n                    Name\n                  </th>\n                  <th className=\"text-right font-medium text-foreground py-1\">\n                    Count\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Entities</td>\n                  <td className=\"text-right tabular-nums\">1,234</td>\n                </tr>\n                <tr className=\"border-b\">\n                  <td className=\"py-1\">Relations</td>\n                  <td className=\"text-right tabular-nums\">567</td>\n                </tr>\n                <tr>\n                  <td className=\"py-1\">Schemas</td>\n                  <td className=\"text-right tabular-nums\">89</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 10. Responsive Typography ────────────────────────────── */}\n      <Section\n        title=\"Responsive Typography\"\n        description=\"Patterns that adapt to viewport size.\"\n      >\n        <div className=\"space-y-3\">\n          <Specimen\n            label=\"Responsive heading: text-xl md:text-2xl\"\n            className=\"text-xl md:text-2xl font-semibold tracking-tight\"\n            text=\"This heading scales up on wider viewports\"\n          />\n          <Specimen\n            label=\"Responsive input: text-base md:text-sm (prevents iOS zoom)\"\n            className=\"text-base md:text-sm border rounded px-2 py-1\"\n            text=\"Input text that's 16px on mobile, 14px on desktop\"\n          />\n          <Specimen\n            label=\"text-balance — prevents orphaned words\"\n            className=\"text-2xl font-semibold tracking-tight text-balance max-w-sm\"\n            text=\"This heading uses text-balance for better line breaks\"\n          />\n        </div>\n      </Section>\n\n      <Separator />\n\n      {/* ── 11. Font Rendering ───────────────────────────────────── */}\n      <Section\n        title=\"Font Rendering\"\n        description=\"Apply antialiased manually where needed — it is not set globally on body.\"\n      >\n        <div className=\"space-y-2 text-sm\">\n          <p>\n            The{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              antialiased\n            </code>{\" \"}\n            utility enables{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -webkit-font-smoothing: antialiased\n            </code>{\" \"}\n            and{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              -moz-osx-font-smoothing: grayscale\n            </code>\n            . It is <strong>not</strong> applied globally in{\" \"}\n            <code className=\"font-mono text-xs bg-muted px-1 py-0.5 rounded\">\n              styles.css\n            </code>\n            ; add it explicitly to elements where thinner rendering is desired.\n          </p>\n          <p className=\"text-muted-foreground\">\n            This makes text render thinner and crisper, matching the look of\n            polished dashboard UIs like Supabase and shadcn/ui.\n          </p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C2EZ2ECG.js

@@ -0,0 +1,40 @@
+// src/PlaygroundSection.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExampleBlock({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3", children: label }),
+    children
+  ] });
+}
+function PlaygroundSection({
+  title,
+  description,
+  children,
+  variant = "default"
+}) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs("section", { className: "bg-card rounded-lg border p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-1", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })
+    ] }),
+    children
+  ] });
+}
+
+export {
+  ExampleBlock,
+  PlaygroundSection
+};
+//# sourceMappingURL=chunk-C2EZ2ECG.js.map

package/dist/chunk-C2EZ2ECG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PlaygroundSection.tsx"],"sourcesContent":["/**\n * Shared section wrapper for playground pages.\n *\n * variant=\"default\" — bare section with space-y-4, used for full-width\n *   pages like Shell API and Graph that manage their own layout.\n *\n * variant=\"card\" — elevated card section with border, used for component\n *   showcase pages (Core, Advanced) where each section is visually contained.\n */\nimport React from \"react\";\n\ninterface PlaygroundSectionProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n  variant?: \"default\" | \"card\";\n}\n\ninterface ExampleBlockProps {\n  label: string;\n  children: React.ReactNode;\n}\n\n/** Labeled divider wrapper for individual component examples within a section. */\nexport function ExampleBlock({\n  label,\n  children,\n}: ExampleBlockProps): React.ReactElement {\n  return (\n    <div className=\"rounded-md border bg-muted/30 p-4\">\n      <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3\">\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\n/** Titled section wrapper used across playground pages. */\nexport function PlaygroundSection({\n  title,\n  description,\n  children,\n  variant = \"default\",\n}: PlaygroundSectionProps): React.ReactElement {\n  if (variant === \"card\") {\n    return (\n      <section className=\"bg-card rounded-lg border p-4 space-y-4\">\n        <div>\n          <h2 className=\"mb-1\">{title}</h2>\n          {description && (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          )}\n        </div>\n        {children}\n      </section>\n    );\n  }\n\n  return (\n    <section className=\"space-y-2\">\n      <div>\n        <h2>{title}</h2>\n        {description && (\n          <p className=\"text-sm text-muted-foreground mt-0.5\">{description}</p>\n        )}\n      </div>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";AA6BI,SACE,KADF;AALG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAA0C;AACxC,SACE,qBAAC,SAAI,WAAU,qCACb;AAAA,wBAAC,OAAE,WAAU,kFACV,iBACH;AAAA,IACC;AAAA,KACH;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAA+C;AAC7C,MAAI,YAAY,QAAQ;AACtB,WACE,qBAAC,aAAQ,WAAU,2CACjB;AAAA,2BAAC,SACC;AAAA,4BAAC,QAAG,WAAU,QAAQ,iBAAM;AAAA,QAC3B,eACC,oBAAC,OAAE,WAAU,iCAAiC,uBAAY;AAAA,SAE9D;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAI,iBAAM;AAAA,MACV,eACC,oBAAC,OAAE,WAAU,wCAAwC,uBAAY;AAAA,OAErE;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}