@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/chunk-32DDRRWU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormComponents.tsx"],"sourcesContent":["/**\n * Playground page for testing Form components\n * Accessible at /playground/form-components\n *\n * Tests all custom Form wrapper components that provide consistent\n * label, description, and error handling around base UI components.\n */\n\nimport { useState, useCallback, useRef } from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n  FormInput,\n  FormTextarea,\n  FormNumberInput,\n  FormCheckbox,\n  FormSelect,\n  FormMultiSelect,\n  FormTagsInput,\n} from \"@petrarca/sonnet-forms\";\n\nexport default function PlayFormComponents() {\n  // FormInput states\n  const [textValue, setTextValue] = useState(\"\");\n  const [emailValue, setEmailValue] = useState(\"\");\n  const [emailError, setEmailError] = useState(\"\");\n  const [passwordValue, setPasswordValue] = useState(\"\");\n\n  const validateEmail = useCallback((value: string) => {\n    if (!value) {\n      setEmailError(\"\");\n      return;\n    }\n    const valid = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value);\n    setEmailError(valid ? \"\" : \"Invalid email address\");\n  }, []);\n\n  // FormTextarea states\n  const [textareaValue, setTextareaValue] = useState(\"\");\n  const [textareaError, setTextareaError] = useState(\"\");\n\n  // FormNumberInput states\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [rangeValue, setRangeValue] = useState<number | undefined>(5);\n  const [decimalValue, setDecimalValue] = useState<number | undefined>(\n    undefined,\n  );\n  const [rangeValidated, setRangeValidated] = useState<number | undefined>(\n    undefined,\n  );\n  const [rangeError, setRangeError] = useState(\"\");\n  const rangeValidatedRef = useRef<number | undefined>(undefined);\n\n  const validateRange = useCallback((value: number | undefined) => {\n    if (value === undefined) {\n      setRangeError(\"\");\n      return;\n    }\n    if (value < 1 || value > 10) setRangeError(\"Must be between 1 and 10\");\n    else setRangeError(\"\");\n  }, []);\n\n  // FormCheckbox states\n  const [checkboxValue, setCheckboxValue] = useState(false);\n  const [checkboxIndeterminate, setCheckboxIndeterminate] = useState<\n    boolean | \"indeterminate\"\n  >(\"indeterminate\");\n\n  // FormSelect states\n  const [selectValue, setSelectValue] = useState(\"\");\n  const [selectRequired, setSelectRequired] = useState(\"\");\n\n  // FormMultiSelect states\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n\n  // FormTagsInput states\n  const [tagsValue, setTagsValue] = useState<string[]>([\"react\", \"typescript\"]);\n\n  // Options for selects\n  const colorOptions = [\n    { label: \"Red\", value: \"red\" },\n    { label: \"Green\", value: \"green\" },\n    { label: \"Blue\", value: \"blue\" },\n    { label: \"Yellow\", value: \"yellow\" },\n    { label: \"Purple\", value: \"purple\" },\n  ];\n\n  const countryOptions = [\n    { label: \"United States\", value: \"us\" },\n    { label: \"Canada\", value: \"ca\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Germany\", value: \"de\" },\n    { label: \"France\", value: \"fr\" },\n    { label: \"Japan\", value: \"jp\" },\n    { label: \"Australia\", value: \"au\" },\n  ];\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Form Components Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Test all custom Form wrapper components with labels, descriptions, and\n          error states\n        </p>\n      </div>\n\n      <div>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* FormInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Text input wrapper with label, description, and error support.\n                Supports all HTML input types.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormInput\n                    label=\"Username\"\n                    value={textValue}\n                    onChange={(e) => setTextValue(e.target.value)}\n                    placeholder=\"Enter username\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormInput\n                    label=\"Full Name\"\n                    description=\"Your first and last name\"\n                    value={textValue}\n                    onChange={(e) => setTextValue(e.target.value)}\n                    placeholder=\"John Doe\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormInput\n                    label=\"Email\"\n                    required\n                    value={emailValue}\n                    onChange={(e) => setEmailValue(e.target.value)}\n                    placeholder=\"john@example.com\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormInput\n                    label=\"Email\"\n                    value={emailValue}\n                    onChange={(e) => setEmailValue(e.target.value)}\n                    error=\"Invalid email format\"\n                    placeholder=\"john@example.com\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Email (on-blur validation)\">\n                  <FormInput\n                    label=\"Email\"\n                    type=\"email\"\n                    value={emailValue}\n                    onChange={(e) => {\n                      setEmailValue(e.target.value);\n                      if (emailError) validateEmail(e.target.value);\n                    }}\n                    onBlur={(e) => validateEmail(e.target.value)}\n                    error={emailError}\n                    placeholder=\"user@example.com\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Password\">\n                  <FormInput\n                    label=\"Password\"\n                    type=\"password\"\n                    value={passwordValue}\n                    onChange={(e) => setPasswordValue(e.target.value)}\n                    placeholder=\"••••••••\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormInput\n                    label=\"Readonly Field\"\n                    value=\"Cannot edit this\"\n                    onChange={() => {}}\n                    disabled\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormInput\n  label=\"Username\"\n  value={textValue}\n  onChange={(e) => setTextValue(e.target.value)}\n  placeholder=\"Enter username\"\n  description=\"Optional description\"\n  error=\"Optional error message\"\n  required={false}\n  disabled={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTextarea */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormTextarea</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with label, description, and error\n                support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormTextarea\n                    label=\"Description\"\n                    value={textareaValue}\n                    onChange={(e) => setTextareaValue(e.target.value)}\n                    placeholder=\"Enter a detailed description...\"\n                    rows={4}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormTextarea\n                    label=\"Bio\"\n                    description=\"Tell us about yourself (max 500 characters)\"\n                    value={textareaValue}\n                    onChange={(e) => setTextareaValue(e.target.value)}\n                    placeholder=\"I am a...\"\n                    rows={3}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With error validation\">\n                  <FormTextarea\n                    label=\"Comments\"\n                    value={textareaValue}\n                    onChange={(e) => {\n                      setTextareaValue(e.target.value);\n                      setTextareaError(\n                        e.target.value.length > 100\n                          ? \"Maximum 100 characters allowed\"\n                          : \"\",\n                      );\n                    }}\n                    error={textareaError}\n                    placeholder=\"Enter your comments...\"\n                    rows={3}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormTextarea\n                    label=\"Readonly Text\"\n                    value=\"This cannot be edited\"\n                    onChange={() => {}}\n                    disabled\n                    rows={2}\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTextarea\n  label=\"Description\"\n  value={textareaValue}\n  onChange={(e) => setTextareaValue(e.target.value)}\n  placeholder=\"Enter text...\"\n  rows={4}\n  description=\"Optional description\"\n  error=\"Optional error message\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {textareaValue || \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormNumberInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormNumberInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with min/max validation and step control.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormNumberInput\n                    label=\"Age\"\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    placeholder=\"Enter age\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With min/max/step\">\n                  <FormNumberInput\n                    label=\"Rating (1-10)\"\n                    value={rangeValue}\n                    onChange={setRangeValue}\n                    min={1}\n                    max={10}\n                    step={1}\n                    description=\"Rate from 1 to 10\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Decimal\">\n                  <FormNumberInput\n                    label=\"Price\"\n                    value={decimalValue}\n                    onChange={setDecimalValue}\n                    allowDecimal={true}\n                    step={0.01}\n                    placeholder=\"0.00\"\n                    description=\"Enter price with cents\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormNumberInput\n                    label=\"Quantity\"\n                    required\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    min={0}\n                    placeholder=\"0\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormNumberInput\n                    label=\"Invalid Input\"\n                    value={numberValue}\n                    onChange={setNumberValue}\n                    error=\"Value must be greater than 0\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Range (on-blur validation)\">\n                  <FormNumberInput\n                    label=\"Rating (1–10)\"\n                    value={rangeValidated}\n                    onChange={(v) => {\n                      setRangeValidated(v);\n                      rangeValidatedRef.current = v;\n                      if (rangeError) validateRange(v);\n                    }}\n                    onBlur={() => validateRange(rangeValidatedRef.current)}\n                    error={rangeError}\n                    min={1}\n                    max={10}\n                    step={1}\n                    placeholder=\"1–10\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormNumberInput\n  label=\"Age\"\n  value={numberValue}\n  onChange={setNumberValue}\n  min={0}\n  max={120}\n  step={1}\n  allowDecimal={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {numberValue ?? \"(empty)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormCheckbox */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormCheckbox</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Checkbox with label, description, and indeterminate state\n                support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormCheckbox\n                    label=\"Accept terms and conditions\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormCheckbox\n                    label=\"Subscribe to newsletter\"\n                    description=\"Receive weekly updates about new features\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormCheckbox\n                    label=\"I agree to the privacy policy\"\n                    required\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Indeterminate\">\n                  <FormCheckbox\n                    label=\"Select all items\"\n                    description=\"Some items are selected\"\n                    checked={checkboxIndeterminate}\n                    onChange={setCheckboxIndeterminate}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormCheckbox\n                    label=\"Cannot change this\"\n                    checked={true}\n                    onChange={() => {}}\n                    disabled\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormCheckbox\n                    label=\"Required checkbox\"\n                    checked={checkboxValue}\n                    onChange={(checked) => setCheckboxValue(checked === true)}\n                    error=\"You must accept to continue\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormCheckbox\n  label=\"Accept terms\"\n  checked={checkboxValue}\n  onChange={(checked) => setCheckboxValue(checked === true)}\n  description=\"Optional description\"\n  required={false}\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {String(checkboxValue)}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormSelect</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable single-select dropdown with label and error support.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormSelect\n                    label=\"Favorite Color\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={colorOptions}\n                    placeholder=\"Choose a color\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormSelect\n                    label=\"Country\"\n                    description=\"Select your country of residence\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={countryOptions}\n                    placeholder=\"Select country\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormSelect\n                    label=\"Required Selection\"\n                    required\n                    value={selectRequired}\n                    onChange={(value) => setSelectRequired(value || \"\")}\n                    options={colorOptions}\n                    placeholder=\"Must select one\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormSelect\n                    label=\"Disabled Select\"\n                    value=\"blue\"\n                    onChange={() => {}}\n                    options={colorOptions}\n                    disabled\n                    placeholder=\"Cannot change\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormSelect\n                    label=\"Invalid Selection\"\n                    value={selectValue}\n                    onChange={(value) => setSelectValue(value || \"\")}\n                    options={colorOptions}\n                    error=\"This field is required\"\n                    placeholder=\"Select option\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormSelect\n  label=\"Country\"\n  value={selectValue}\n  onChange={(value) => setSelectValue(value || '')}\n  options={[\n    { label: 'USA', value: 'us' },\n    { label: 'UK', value: 'uk' }\n  ]}\n  placeholder=\"Select...\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value: {selectValue || \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormMultiSelect */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormMultiSelect</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Searchable multi-select dropdown with badges.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormMultiSelect\n                    label=\"Favorite Colors\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={colorOptions}\n                    placeholder=\"Select multiple colors\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormMultiSelect\n                    label=\"Visited Countries\"\n                    description=\"Select all countries you've visited\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={countryOptions}\n                    placeholder=\"Select countries\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormMultiSelect\n                    label=\"Skills\"\n                    required\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={[\n                      { label: \"JavaScript\", value: \"js\" },\n                      { label: \"TypeScript\", value: \"ts\" },\n                      { label: \"Python\", value: \"py\" },\n                      { label: \"Java\", value: \"java\" },\n                    ]}\n                    placeholder=\"Select at least one skill\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormMultiSelect\n                    label=\"Categories\"\n                    value={multiSelectValue}\n                    onChange={setMultiSelectValue}\n                    options={colorOptions}\n                    error=\"Please select at least 2 categories\"\n                    placeholder=\"Select categories\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormMultiSelect\n  label=\"Skills\"\n  value={multiSelectValue}\n  onChange={setMultiSelectValue}\n  options={skillOptions}\n  placeholder=\"Select skills\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current value:{\" \"}\n                {multiSelectValue.length > 0\n                  ? multiSelectValue.join(\", \")\n                  : \"(none selected)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n\n          {/* FormTagsInput */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>FormTagsInput</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Free-text tag input with creation and deletion.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Basic\">\n                  <FormTagsInput\n                    label=\"Technologies\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"Type and press Enter to add tags\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"With description\">\n                  <FormTagsInput\n                    label=\"Skills\"\n                    description=\"Add your programming skills (press Enter after each)\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"e.g., React, Node.js\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Required\">\n                  <FormTagsInput\n                    label=\"Keywords\"\n                    required\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    placeholder=\"Add at least one keyword\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"WITH ERROR (STATIC)\">\n                  <FormTagsInput\n                    label=\"Tags\"\n                    value={tagsValue}\n                    onChange={setTagsValue}\n                    error=\"Maximum 5 tags allowed\"\n                    placeholder=\"Add tags\"\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Disabled\">\n                  <FormTagsInput\n                    label=\"Fixed Tags\"\n                    value={[\"readonly\", \"tags\"]}\n                    onChange={() => {}}\n                    disabled\n                    placeholder=\"Cannot edit\"\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n                <code>{`<FormTagsInput\n  label=\"Technologies\"\n  value={tagsValue}\n  onChange={setTagsValue}\n  placeholder=\"Type and press Enter\"\n  description=\"Optional description\"\n/>`}</code>\n              </pre>\n\n              <p className=\"text-xs text-muted-foreground\">\n                Current tags:{\" \"}\n                {tagsValue.length > 0 ? tagsValue.join(\", \") : \"(none)\"}\n              </p>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-4Y4JFKAK.js

@@ -0,0 +1,240 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayAdvancedComponents.tsx
+import { useState } from "react";
+import {
+  TreeView,
+  Button,
+  Separator,
+  Stepper,
+  StepperContent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperList,
+  StepperNext,
+  StepperPrev,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from "@petrarca/sonnet-ui";
+import { useTreeExpansion } from "@petrarca/sonnet-core/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayAdvancedComponents() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Advanced Components" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Multi-step workflows and hierarchical data structures." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Stepper",
+          description: "Dice UI Stepper \u2014 horizontal, controlled via built-in Prev/Next or external state.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-4", children: "Interactive (built-in navigation)" }),
+              /* @__PURE__ */ jsxs(Stepper, { defaultValue: "step-1", className: "max-w-lg", children: [
+                /* @__PURE__ */ jsx(StepperList, { className: "gap-2", children: ["step-1", "step-2", "step-3"].map((value, i) => /* @__PURE__ */ jsxs(StepperItem, { value, children: [
+                  /* @__PURE__ */ jsxs(StepperTrigger, { children: [
+                    /* @__PURE__ */ jsx(StepperIndicator, {}),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-16", children: [
+                      /* @__PURE__ */ jsxs(StepperTitle, { children: [
+                        "Step ",
+                        i + 1
+                      ] }),
+                      /* @__PURE__ */ jsx(StepperDescription, { children: "Description" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(StepperSeparator, {})
+                ] }, value)) }),
+                /* @__PURE__ */ jsx(StepperContent, { value: "step-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 1." }) }),
+                /* @__PURE__ */ jsx(StepperContent, { value: "step-2", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 2." }) }),
+                /* @__PURE__ */ jsx(StepperContent, { value: "step-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 3." }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between max-w-lg", children: [
+                  /* @__PURE__ */ jsx(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Back" }) }),
+                  /* @__PURE__ */ jsx(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "sm", children: "Next" }) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-4", children: "Non-interactive (controlled)" }),
+              /* @__PURE__ */ jsx(StepperControlled, {})
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "TreeView",
+          description: "Generic accessible tree component with expand/collapse, keyboard navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row selection.",
+          variant: "card",
+          children: /* @__PURE__ */ jsx(TreeViewDemo, {})
+        }
+      )
+    ] })
+  ] });
+}
+var CONTROLLED_STEPS = [
+  { value: "account", title: "Account", description: "Your details" },
+  { value: "profile", title: "Profile", description: "About you" },
+  { value: "review", title: "Review", description: "Confirm" }
+];
+function StepperControlled() {
+  const [step, setStep] = useState("account");
+  return /* @__PURE__ */ jsxs(
+    Stepper,
+    {
+      value: step,
+      onValueChange: setStep,
+      nonInteractive: true,
+      className: "max-w-lg",
+      children: [
+        /* @__PURE__ */ jsx(StepperList, { className: "gap-2", children: CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsxs(StepperItem, { value: s.value, children: [
+          /* @__PURE__ */ jsxs(StepperTrigger, { children: [
+            /* @__PURE__ */ jsx(StepperIndicator, {}),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-16", children: [
+              /* @__PURE__ */ jsx(StepperTitle, { children: s.title }),
+              /* @__PURE__ */ jsx(StepperDescription, { children: s.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StepperSeparator, {})
+        ] }, s.value)) }),
+        CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsx(StepperContent, { value: s.value, children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Content for ",
+          s.title,
+          "."
+        ] }) }, s.value)),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between max-w-lg", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: step === CONTROLLED_STEPS[0].value,
+              onClick: () => {
+                const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
+                if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);
+              },
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              disabled: step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value,
+              onClick: () => {
+                const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
+                if (i < CONTROLLED_STEPS.length - 1)
+                  setStep(CONTROLLED_STEPS[i + 1].value);
+              },
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var TREE_NODES = [
+  {
+    id: "fruits",
+    data: { label: "Fruits" },
+    hasChildren: true,
+    children: [
+      {
+        id: "citrus",
+        data: { label: "Citrus" },
+        hasChildren: true,
+        children: [
+          { id: "lemon", data: { label: "Lemon" }, hasChildren: false },
+          { id: "orange", data: { label: "Orange" }, hasChildren: false }
+        ]
+      },
+      { id: "apple", data: { label: "Apple" }, hasChildren: false },
+      { id: "banana", data: { label: "Banana" }, hasChildren: false }
+    ]
+  },
+  {
+    id: "vegetables",
+    data: { label: "Vegetables" },
+    hasChildren: true,
+    children: [
+      { id: "carrot", data: { label: "Carrot" }, hasChildren: false },
+      { id: "broccoli", data: { label: "Broccoli" }, hasChildren: false }
+    ]
+  },
+  {
+    id: "grains",
+    data: { label: "Grains" },
+    hasChildren: false
+  }
+];
+function TreeViewDemo() {
+  const { expandedIds, onExpand, onCollapse } = useTreeExpansion();
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const [lastClicked, setLastClicked] = useState(null);
+  const handleSelectionChange = (id, selected) => setSelectedIds((prev) => {
+    const next = new Set(prev);
+    if (selected) next.add(id);
+    else next.delete(id);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Default (click to activate)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to collapse or go to parent, Enter/Space to activate." }),
+      /* @__PURE__ */ jsx(
+        TreeView,
+        {
+          nodes: TREE_NODES,
+          expandedIds,
+          onExpand,
+          onCollapse,
+          onNodeClick: (node) => setLastClicked(node.id),
+          onNodeActivate: (node) => setLastClicked(node.id),
+          renderNode: (node) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: node.data.label }),
+          className: "max-w-xs"
+        }
+      ),
+      lastClicked && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-muted-foreground", children: [
+        "Last activated: ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: lastClicked })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "With row selection" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Checkboxes appear when onSelectionChange is provided. State is independent of expand/collapse." }),
+      /* @__PURE__ */ jsx(
+        TreeView,
+        {
+          nodes: TREE_NODES,
+          expandedIds,
+          onExpand,
+          onCollapse,
+          selectedIds,
+          onSelectionChange: handleSelectionChange,
+          renderNode: (node) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: node.data.label }),
+          className: "max-w-xs"
+        }
+      ),
+      selectedIds.size > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-muted-foreground", children: [
+        "Selected:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: [...selectedIds].join(", ") })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  PlayAdvancedComponents
+};
+//# sourceMappingURL=chunk-4Y4JFKAK.js.map

package/dist/chunk-4Y4JFKAK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayAdvancedComponents.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  TreeView,\n  type TreeNode,\n  Button,\n  Separator,\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperNext,\n  StepperPrev,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@petrarca/sonnet-ui\";\nimport { useTreeExpansion } from \"@petrarca/sonnet-core/hooks\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\n\n/**\n * PlayAdvancedComponents — Stepper and TreeView demos.\n *\n * Split from PlayCoreComponents to keep files manageable.\n */\nexport default function PlayAdvancedComponents() {\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1>Advanced Components</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Multi-step workflows and hierarchical data structures.\n        </p>\n      </div>\n\n      <div className=\"space-y-6\">\n        {/* Stepper */}\n        <PlaygroundSection\n          title=\"Stepper\"\n          description=\"Dice UI Stepper — horizontal, controlled via built-in Prev/Next or external state.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Interactive — uses built-in StepperPrev / StepperNext */}\n            <div>\n              <h4 className=\"mb-4\">Interactive (built-in navigation)</h4>\n              <Stepper defaultValue=\"step-1\" className=\"max-w-lg\">\n                <StepperList className=\"gap-2\">\n                  {[\"step-1\", \"step-2\", \"step-3\"].map((value, i) => (\n                    <StepperItem key={value} value={value}>\n                      <StepperTrigger>\n                        <StepperIndicator />\n                        <div className=\"flex flex-col min-w-16\">\n                          <StepperTitle>Step {i + 1}</StepperTitle>\n                          <StepperDescription>Description</StepperDescription>\n                        </div>\n                      </StepperTrigger>\n                      <StepperSeparator />\n                    </StepperItem>\n                  ))}\n                </StepperList>\n                <StepperContent value=\"step-1\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 1.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-2\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 2.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-3\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 3.\n                  </p>\n                </StepperContent>\n                <div className=\"flex justify-between max-w-lg\">\n                  <StepperPrev asChild>\n                    <Button variant=\"outline\" size=\"sm\">\n                      Back\n                    </Button>\n                  </StepperPrev>\n                  <StepperNext asChild>\n                    <Button size=\"sm\">Next</Button>\n                  </StepperNext>\n                </div>\n              </Stepper>\n            </div>\n\n            <Separator />\n\n            {/* Non-interactive — controlled externally */}\n            <div>\n              <h4 className=\"mb-4\">Non-interactive (controlled)</h4>\n              <StepperControlled />\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* TreeView */}\n        <PlaygroundSection\n          title=\"TreeView\"\n          description=\"Generic accessible tree component with expand/collapse, keyboard navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row selection.\"\n          variant=\"card\"\n        >\n          <TreeViewDemo />\n        </PlaygroundSection>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Stepper — controlled demo\n// ---------------------------------------------------------------------------\n\nconst CONTROLLED_STEPS = [\n  { value: \"account\", title: \"Account\", description: \"Your details\" },\n  { value: \"profile\", title: \"Profile\", description: \"About you\" },\n  { value: \"review\", title: \"Review\", description: \"Confirm\" },\n];\n\nfunction StepperControlled() {\n  const [step, setStep] = useState(\"account\");\n  return (\n    <Stepper\n      value={step}\n      onValueChange={setStep}\n      nonInteractive\n      className=\"max-w-lg\"\n    >\n      <StepperList className=\"gap-2\">\n        {CONTROLLED_STEPS.map((s) => (\n          <StepperItem key={s.value} value={s.value}>\n            <StepperTrigger>\n              <StepperIndicator />\n              <div className=\"flex flex-col min-w-16\">\n                <StepperTitle>{s.title}</StepperTitle>\n                <StepperDescription>{s.description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            <StepperSeparator />\n          </StepperItem>\n        ))}\n      </StepperList>\n      {CONTROLLED_STEPS.map((s) => (\n        <StepperContent key={s.value} value={s.value}>\n          <p className=\"text-sm text-muted-foreground\">\n            Content for {s.title}.\n          </p>\n        </StepperContent>\n      ))}\n      <div className=\"flex justify-between max-w-lg\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={step === CONTROLLED_STEPS[0].value}\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);\n          }}\n        >\n          Back\n        </Button>\n        <Button\n          size=\"sm\"\n          disabled={\n            step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value\n          }\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i < CONTROLLED_STEPS.length - 1)\n              setStep(CONTROLLED_STEPS[i + 1].value);\n          }}\n        >\n          Next\n        </Button>\n      </div>\n    </Stepper>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TreeView demo\n// ---------------------------------------------------------------------------\n\ninterface DemoData extends Record<string, unknown> {\n  label: string;\n}\n\nconst TREE_NODES: TreeNode<DemoData>[] = [\n  {\n    id: \"fruits\",\n    data: { label: \"Fruits\" },\n    hasChildren: true,\n    children: [\n      {\n        id: \"citrus\",\n        data: { label: \"Citrus\" },\n        hasChildren: true,\n        children: [\n          { id: \"lemon\", data: { label: \"Lemon\" }, hasChildren: false },\n          { id: \"orange\", data: { label: \"Orange\" }, hasChildren: false },\n        ],\n      },\n      { id: \"apple\", data: { label: \"Apple\" }, hasChildren: false },\n      { id: \"banana\", data: { label: \"Banana\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"vegetables\",\n    data: { label: \"Vegetables\" },\n    hasChildren: true,\n    children: [\n      { id: \"carrot\", data: { label: \"Carrot\" }, hasChildren: false },\n      { id: \"broccoli\", data: { label: \"Broccoli\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"grains\",\n    data: { label: \"Grains\" },\n    hasChildren: false,\n  },\n];\n\nfunction TreeViewDemo() {\n  const { expandedIds, onExpand, onCollapse } = useTreeExpansion();\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n  const [lastClicked, setLastClicked] = useState<string | null>(null);\n\n  const handleSelectionChange = (id: string, selected: boolean) =>\n    setSelectedIds((prev) => {\n      const next = new Set(prev);\n      if (selected) next.add(id);\n      else next.delete(id);\n      return next;\n    });\n\n  return (\n    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n      {/* Without selection */}\n      <div>\n        <h4 className=\"mb-3\">Default (click to activate)</h4>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to\n          collapse or go to parent, Enter/Space to activate.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={onExpand}\n          onCollapse={onCollapse}\n          onNodeClick={(node) => setLastClicked(node.id)}\n          onNodeActivate={(node) => setLastClicked(node.id)}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {lastClicked && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Last activated: <span className=\"font-mono\">{lastClicked}</span>\n          </p>\n        )}\n      </div>\n\n      {/* With row selection */}\n      <div>\n        <h4 className=\"mb-3\">With row selection</h4>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Checkboxes appear when onSelectionChange is provided. State is\n          independent of expand/collapse.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={onExpand}\n          onCollapse={onCollapse}\n          selectedIds={selectedIds}\n          onSelectionChange={handleSelectionChange}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {selectedIds.size > 0 && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Selected:{\" \"}\n            <span className=\"font-mono\">{[...selectedIds].join(\", \")}</span>\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-QIETZUEN.js → chunk-6DZ3TSV4.js}

@@ -405,22 +405,19 @@ function usePlayFormsState() {
   const [dataCollapsed, setDataCollapsed] = useState(false);
   const [lastDiff, setLastDiff] = useState(null);
   const toggleDataPanel = useCallback(() => setDataCollapsed((v) => !v), []);
-  const loadSchemaPreset = useCallback(
-    (value) => {
-      if (!value || !sampleSchemas[value]) return;
-      const text = JSON.stringify(sampleSchemas[value], null, 2);
-      setSchemaText(text);
-      setActiveSchema(sampleSchemas[value]);
-      setSchemaError("");
-      setFormData({});
-      setDataText("{}");
-      const pairedUi = value === "row_layout" ? ROW_LAYOUT_UISCHEMA : {};
-      setUiSchemaText(JSON.stringify(pairedUi, null, 2));
-      setActiveUiSchema(pairedUi);
-      setUiSchemaError("");
-    },
-    [setSchemaText, setActiveSchema]
-  );
+  const loadSchemaPreset = useCallback((value) => {
+    if (!value || !sampleSchemas[value]) return;
+    const text = JSON.stringify(sampleSchemas[value], null, 2);
+    setSchemaText(text);
+    setActiveSchema(sampleSchemas[value]);
+    setSchemaError("");
+    setFormData({});
+    setDataText("{}");
+    const pairedUi = value === "row_layout" ? ROW_LAYOUT_UISCHEMA : {};
+    setUiSchemaText(JSON.stringify(pairedUi, null, 2));
+    setActiveUiSchema(pairedUi);
+    setUiSchemaError("");
+  }, []);
   const loadUiSchemaPreset = useCallback(
     (value) => {
       if (!value) return;
@@ -480,6 +477,28 @@ function tryParseAndLoad(text, onSuccess, onError) {
     onError("Invalid JSON - cannot load to form");
   }
 }
+function PanelArrowButton({
+  label,
+  onClick,
+  mirrored = false
+}) {
+  return /* @__PURE__ */ jsx(SimpleTooltip, { label, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "default",
+      size: "icon",
+      className: "absolute -right-5 top-1/2 -translate-y-1/2 z-[100]",
+      onClick,
+      children: /* @__PURE__ */ jsx(
+        ArrowRight,
+        {
+          size: 20,
+          className: mirrored ? "scale-x-[-1]" : void 0
+        }
+      )
+    }
+  ) });
+}
 function SchemaEditorColumn({
   state
 }) {
@@ -603,19 +622,10 @@ function SchemaEditorColumn({
           }
         ) }),
         /* @__PURE__ */ jsx(
-          SimpleTooltip,
+          PanelArrowButton,
           {
             label: state.activeTab === "schema" ? "Load Schema to Form" : "Load UI Schema to Form",
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "default",
-                size: "icon",
-                className: "absolute -right-5 top-1/2 -translate-y-1/2 z-[100]",
-                onClick: state.activeTab === "schema" ? handleLoadSchemaToForm : handleLoadUiSchemaToForm,
-                children: /* @__PURE__ */ jsx(ArrowRight, { size: 20 })
-              }
-            )
+            onClick: state.activeTab === "schema" ? handleLoadSchemaToForm : handleLoadUiSchemaToForm
           }
         )
       ]
@@ -708,7 +718,7 @@ function FormColumn({
                     }
                   )
                 ] }),
-                state.validationErrors.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: "4px" }, children: state.validationErrors.map((err, idx) => /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: err }, idx)) })
+                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",
@@ -743,16 +753,14 @@ function FormColumn({
             ]
           }
         ) }),
-        !state.dataCollapsed && /* @__PURE__ */ jsx(SimpleTooltip, { label: "Load JSON Data into Form", children: /* @__PURE__ */ jsx(
-          Button,
+        !state.dataCollapsed && /* @__PURE__ */ jsx(
+          PanelArrowButton,
           {
-            variant: "default",
-            size: "icon",
-            className: "absolute -right-5 top-1/2 -translate-y-1/2 z-[100]",
+            label: "Load JSON Data into Form",
             onClick: handleLoadDataToForm,
-            children: /* @__PURE__ */ jsx(ArrowRight, { size: 20, className: "scale-x-[-1]" })
+            mirrored: true
           }
-        ) })
+        )
       ]
     }
   );
@@ -842,44 +850,31 @@ function DataColumn({
 }
 function PlayForms() {
   const state = usePlayFormsState();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width: "100%",
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { padding: "1rem 1rem 0 1rem" }, children: [
-          /* @__PURE__ */ jsx("h1", { children: "Forms Playground" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Test and experiment with JsonSchemaFormRenderer. Edit the JSON Schema on the left, then load it into the form." })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flex: 1,
-              minHeight: 0,
-              padding: "0 1rem 1rem 1rem",
-              display: "flex",
-              gap: "1.5rem"
-            },
-            children: [
-              /* @__PURE__ */ jsx(SchemaEditorColumn, { state }),
-              /* @__PURE__ */ jsx(FormColumn, { state }),
-              /* @__PURE__ */ jsx(DataColumn, { state })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-3 h-[calc(100vh-8rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Forms Playground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Test and experiment with JsonSchemaFormRenderer. Edit the JSON Schema on the left, then load it into the form." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          gap: "1.5rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx(SchemaEditorColumn, { state }),
+          /* @__PURE__ */ jsx(FormColumn, { state }),
+          /* @__PURE__ */ jsx(DataColumn, { state })
+        ]
+      }
+    )
+  ] });
 }
 
 export {
   PlayForms
 };
-//# sourceMappingURL=chunk-QIETZUEN.js.map
+//# sourceMappingURL=chunk-6DZ3TSV4.js.map