@petrarca/sonnet-playground 0.5.0 → 0.7.0

package/dist/chunk-UB7462QG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormWidgets.tsx"],"sourcesContent":["/**\n * Playground page for testing form widgets\n * Accessible at /playground/form-widgets\n */\n\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n  TextInputWidget,\n  TextareaWidget,\n  NumberWidget,\n  CheckboxWidget,\n  SelectWidget,\n  QuantityWidget,\n  DateWidget,\n  TimeWidget,\n  DateTimeWidget,\n  DisplayWidget,\n  DEFAULT_WIDGETS,\n  type QuantityValue,\n} from \"@petrarca/sonnet-forms\";\nimport type { JsonSchema } from \"@petrarca/sonnet-core/schema\";\n\nconst dummySchema: JsonSchema = {\n  title: \"Form Widgets Demo\",\n  type: \"object\",\n  properties: {},\n  \"x-entity\": {\n    type: \"entity\",\n    label: \"Demo\",\n    relations: [],\n  },\n};\n\nfunction makeQuantityHandler(\n  set: Dispatch<SetStateAction<QuantityValue>>,\n): (v: unknown) => void {\n  return (v: unknown) => {\n    if (v != null && typeof v === \"object\" && !Array.isArray(v)) {\n      set(v as QuantityValue);\n    }\n  };\n}\n\nexport default function PlayFormWidgets() {\n  // State for each widget\n  const [textValue, setTextValue] = useState<string>(\"\");\n  const [textareaValue, setTextareaValue] = useState<string>(\"\");\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [checkboxValue, setCheckboxValue] = useState<boolean>(false);\n  const [selectValue, setSelectValue] = useState<string>(\"\");\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n  const [multiSelectColorValue, setMultiSelectColorValue] = useState<string[]>(\n    [],\n  );\n  const [tempValue, setTempValue] = useState<QuantityValue>({\n    value: 37.0,\n    unit: \"degC\",\n  });\n  const [weightValue, setWeightValue] = useState<QuantityValue>({\n    value: undefined,\n    unit: \"kg\",\n  });\n  const [bpValue, setBpValue] = useState<QuantityValue>({\n    value: 72,\n    unit: \"bpm\",\n  });\n  const [priceValue, setPriceValue] = useState<QuantityValue>({\n    value: 49.99,\n    unit: \"EUR\",\n  });\n  const [dateValue, setDateValue] = useState<string>(\"2026-06-15\");\n  const [birthYear, setBirthYear] = useState<string>(\"1980\");\n  const [timeValue, setTimeValue] = useState<string>(\"09:30\");\n  const [dateTimeValue, setDateTimeValue] =\n    useState<string>(\"2026-06-15T09:30\");\n\n  // Narrowing adapters: WidgetProps.onChange is (value: unknown) => void.\n  // All quantity adapters have stable identity (empty deps) -- the fallback\n  // branch is dropped so the state setter is not captured in the closure.\n  const onTextChange = useCallback(\n    (v: unknown) => setTextValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onTextareaChange = useCallback(\n    (v: unknown) => setTextareaValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onNumberChange = useCallback(\n    (v: unknown) => setNumberValue(typeof v === \"number\" ? v : undefined),\n    [],\n  );\n  const onCheckboxChange = useCallback(\n    (v: unknown) => setCheckboxValue(typeof v === \"boolean\" ? v : false),\n    [],\n  );\n  const onSelectChange = useCallback(\n    (v: unknown) => setSelectValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onMultiSelectChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  const onMultiSelectColorChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectColorValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  // Quantity adapters: QuantityWidget passes unknown, guard narrows to QuantityValue.\n  const onTempChange = useMemo(() => makeQuantityHandler(setTempValue), []);\n  const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);\n  const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);\n  const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);\n  const onStringChange = useCallback(\n    (set: Dispatch<SetStateAction<string>>) => (v: unknown) =>\n      set(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Basic Form Widgets Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Interactive demonstration of all basic form widgets\n        </p>\n      </div>\n\n      <div>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* TextInputWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextInputWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Single-line text input with support for various HTML input types\n                (text, email, password, url, etc.)\n              </p>\n\n              <TextInputWidget\n                id=\"text-input-demo\"\n                name=\"textInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Text Input\"\n                description=\"Enter some text\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <TextInputWidget\n                id=\"text-input-email\"\n                name=\"emailInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Email Input\"\n                description=\"Input type: email\"\n                placeholder=\"user@example.com\"\n                propertySchema={{ type: \"string\", format: \"email\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ inputType: \"email\" }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* TextareaWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextareaWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with configurable rows and autosize\n                support\n              </p>\n\n              <TextareaWidget\n                id=\"textarea-demo\"\n                name=\"textarea\"\n                value={textareaValue}\n                onChange={onTextareaChange}\n                label=\"Textarea\"\n                description=\"Enter multiple lines\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ rows: 4 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textareaValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* NumberWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>NumberWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with support for min, max, and step constraints\n              </p>\n\n              <NumberWidget\n                id=\"number-demo\"\n                name=\"number\"\n                value={numberValue}\n                onChange={onNumberChange}\n                label=\"Number Input\"\n                description=\"Enter a number (0-100, step: 5)\"\n                placeholder=\"0\"\n                propertySchema={{ type: \"number\", minimum: 0, maximum: 100 }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ step: 5 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: numberValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* CheckboxWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>CheckboxWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Boolean checkbox for true/false values\n              </p>\n\n              <CheckboxWidget\n                id=\"checkbox-demo\"\n                name=\"checkbox\"\n                value={checkboxValue}\n                onChange={onCheckboxChange}\n                label=\"Enable Feature\"\n                description=\"Check to enable\"\n                propertySchema={{ type: \"boolean\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: checkboxValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* SelectWidget - All Variations */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>SelectWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Dropdown select for enum values with single-select,\n                multi-select, and custom badge colors\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Single select\">\n                  <SelectWidget\n                    id=\"select-demo\"\n                    name=\"select\"\n                    value={selectValue}\n                    onChange={onSelectChange}\n                    label=\"Select Status\"\n                    description=\"Choose a status\"\n                    placeholder=\"Select one...\"\n                    propertySchema={{\n                      type: \"string\",\n                      enum: [\"active\", \"inactive\", \"pending\", \"archived\"],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      enumNames: {\n                        active: \"Active\",\n                        inactive: \"Inactive\",\n                        pending: \"Pending\",\n                        archived: \"Archived\",\n                      },\n                      searchable: true,\n                      clearable: true,\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi select\">\n                  <SelectWidget\n                    id=\"multiselect-demo\"\n                    name=\"multiselect\"\n                    value={multiSelectValue}\n                    onChange={onMultiSelectChange}\n                    label=\"Select Tags\"\n                    description=\"Choose multiple tags\"\n                    placeholder=\"Select tags...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"frontend\",\n                        \"backend\",\n                        \"database\",\n                        \"devops\",\n                        \"testing\",\n                        \"security\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ searchable: true, clearable: true }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Custom badge color\">\n                  <SelectWidget\n                    id=\"multiselect-color-demo\"\n                    name=\"multiselectColor\"\n                    value={multiSelectColorValue}\n                    onChange={onMultiSelectColorChange}\n                    label=\"Select Categories\"\n                    description=\"Custom grape-colored badges\"\n                    placeholder=\"Select categories...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"feature\",\n                        \"bugfix\",\n                        \"enhancement\",\n                        \"documentation\",\n                        \"refactor\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      searchable: true,\n                      clearable: true,\n                      badgeColor: \"grape\",\n                      enumNames: {\n                        feature: \"Feature\",\n                        bugfix: \"Bug Fix\",\n                        enhancement: \"Enhancement\",\n                        documentation: \"Documentation\",\n                        refactor: \"Refactor\",\n                      },\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n\n          {/* DisplayWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>DisplayWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Read-only text block (type: null / x-ui-widget: display).\n                Renders title + description as static text, collects no value.\n                For instructions and notes placed between fields.\n              </p>\n\n              <div className=\"rounded-md border border-dashed p-3\">\n                <DisplayWidget\n                  id=\"display-demo\"\n                  name=\"displayNote\"\n                  value={null}\n                  onChange={() => {}}\n                  label=\"Section 3: Medical history\"\n                  description=\"Answer the following to the best of your knowledge. Leave blank if unsure.\"\n                  propertySchema={{ type: \"null\" }}\n                  schema={dummySchema}\n                  registry={DEFAULT_WIDGETS}\n                />\n              </div>\n            </SimpleStack>\n          </Card>\n\n          {/* Date / Time / DateTime widgets */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>DateWidget / TimeWidget / DateTimeWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Date, time, and datetime fields. Auto-resolve from schema format\n                (date / time / date-time). Values are ISO strings; display and\n                parsing follow the playground locale (gear icon).\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Date (format: date)\">\n                  <DateWidget\n                    id=\"date-widget-demo\"\n                    name=\"date\"\n                    value={dateValue}\n                    onChange={onStringChange(setDateValue)}\n                    label=\"Appointment date\"\n                    description=\"Resolved from format: date\"\n                    propertySchema={{ type: \"string\", format: \"date\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Date, year precision\">\n                  <DateWidget\n                    id=\"date-widget-year\"\n                    name=\"birthYear\"\n                    value={birthYear}\n                    onChange={onStringChange(setBirthYear)}\n                    label=\"Birth year\"\n                    description=\"x-ui-options.precision: year\"\n                    propertySchema={{ type: \"string\", format: \"date\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ precision: \"year\" }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Time (format: time)\">\n                  <TimeWidget\n                    id=\"time-widget-demo\"\n                    name=\"time\"\n                    value={timeValue}\n                    onChange={onStringChange(setTimeValue)}\n                    label=\"Start time\"\n                    description=\"Zone-free time of day\"\n                    propertySchema={{ type: \"string\", format: \"time\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Date & time (format: date-time)\">\n                  <DateTimeWidget\n                    id=\"datetime-widget-demo\"\n                    name=\"dateTime\"\n                    value={dateTimeValue}\n                    onChange={onStringChange(setDateTimeValue)}\n                    label=\"Scheduled at\"\n                    description=\"Plain wall-clock, timezone hint\"\n                    propertySchema={{ type: \"string\", format: \"date-time\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ timeZone: \"Europe/Berlin\" }}\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>\n                  {JSON.stringify(\n                    {\n                      date: dateValue,\n                      birthYear,\n                      time: timeValue,\n                      dateTime: dateTimeValue,\n                    },\n                    null,\n                    2,\n                  )}\n                </code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* QuantityWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>QuantityWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Compound numeric value + unit selector. Multi-unit shows a\n                dropdown, single-unit shows static text, prefix mode places the\n                unit before the value.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Multi-unit suffix (Temperature)\">\n                  <QuantityWidget\n                    id=\"quantity-temp\"\n                    name=\"temperature\"\n                    value={tempValue}\n                    onChange={onTempChange}\n                    label=\"Temperature\"\n                    description=\"Body temperature with per-unit validation\"\n                    placeholder=\"0.0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [\n                        { value: \"degC\", label: \"C\", min: 35, max: 42 },\n                        { value: \"degF\", label: \"F\", min: 95, max: 108 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Single-unit suffix (Weight)\">\n                  <QuantityWidget\n                    id=\"quantity-weight\"\n                    name=\"weight\"\n                    value={weightValue}\n                    onChange={onWeightChange}\n                    label=\"Weight\"\n                    description=\"Single unit, global min/max from schema\"\n                    placeholder=\"0\"\n                    propertySchema={{\n                      type: \"object\",\n                      minimum: 0,\n                      maximum: 500,\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [{ value: \"kg\", label: \"kg\" }],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Integer mode (Heart Rate)\">\n                  <QuantityWidget\n                    id=\"quantity-hr\"\n                    name=\"heartRate\"\n                    value={bpValue}\n                    onChange={onBpChange}\n                    label=\"Heart Rate\"\n                    description=\"Integer with per-unit validation (30-250 bpm)\"\n                    placeholder=\"0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 0,\n                      units: [\n                        { value: \"bpm\", label: \"bpm\", min: 30, max: 250 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi-unit prefix (Currency)\">\n                  <QuantityWidget\n                    id=\"quantity-price\"\n                    name=\"price\"\n                    value={priceValue}\n                    onChange={onPriceChange}\n                    label=\"Price\"\n                    description=\"Currency symbol as prefix, multi-unit selector\"\n                    placeholder=\"0.00\"\n                    propertySchema={{ type: \"object\", minimum: 0 }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 2,\n                      unitPosition: \"prefix\",\n                      units: [\n                        { value: \"EUR\", label: \"EUR\" },\n                        { value: \"USD\", label: \"$\" },\n                        { value: \"GBP\", label: \"GBP\" },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -55,17 +55,21 @@ interface PlaygroundModuleOptions {
     grouped?: boolean;
 }
 
-/**
- * PlaygroundRegistry -- mutable collection of playground entries.
- *
- * The library ships a default instance pre-populated with the built-in
- * sonnet component demos. Consumers register additional entries for
- * domain-specific playgrounds before passing the registry to
- * createPlaygroundModule().
- */
-
 declare class PlaygroundRegistry {
     private entries;
+    /**
+     * Report registrations that cannot work, rather than silently misbehaving.
+     *
+     * Entries are keyed by `id`, so two entries may legally share a `path` --
+     * and then both produce a route on the same URL and one is unreachable.
+     * Groups are bucketed by their exact label, so two labels differing only by
+     * case become two separate groups.
+     *
+     * Neither is corrected here: dropping an entry, or merging groups the caller
+     * spelled differently, would be its own surprise. The registration stands and
+     * the problem is made diagnosable.
+     */
+    private warnOnConflicts;
     /** Register a playground entry. Overwrites any existing entry with the same id. */
     register(entry: PlaygroundEntry): void;
     /** Register multiple entries at once. */
@@ -93,13 +97,6 @@ declare class PlaygroundRegistry {
     get size(): number;
 }
 
-/**
- * Create a ShellModule for the playground.
- *
- * Returns a complete module definition ready to pass to
- * createModuleRegistry(). Routes, navigation, and the overview page
- * are all generated from the registry.
- */
 declare function createPlaygroundModule(registry: PlaygroundRegistry, options?: PlaygroundModuleOptions): ShellModule;
 
 /**
@@ -137,9 +134,54 @@ interface PlaygroundSectionProps {
     children: React$1.ReactNode;
     variant?: "default" | "card";
 }
+interface ExampleBlockProps {
+    label: string;
+    children: React$1.ReactNode;
+}
+/** Labeled divider wrapper for individual component examples within a section. */
+declare function ExampleBlock({ label, children, }: ExampleBlockProps): React$1.ReactElement;
 /** Titled section wrapper used across playground pages. */
 declare function PlaygroundSection({ title, description, children, variant, }: PlaygroundSectionProps): React$1.ReactElement;
 
+/**
+ * Playground-scoped settings (locale, ...).
+ *
+ * A self-contained provider that wraps all playground routes. It owns a small
+ * settings object, persists it to a namespaced localStorage key, and renders a
+ * SonnetConfigProvider so the settings flow to every playground page.
+ *
+ * Scope and containment: the provider is nested under any host-app provider and
+ * merges onto it, so a playground override shadows the app/browser value only
+ * within the playground subtree -- it never mutates the host app's global
+ * config. The default is "inherit" (empty locale), so out of the box the
+ * playground changes nothing.
+ */
+
+interface PlaygroundSettings {
+    /** BCP-47 locale override, or "" to inherit the app/browser locale. */
+    locale: string;
+}
+interface PlaygroundSettingsContextValue {
+    settings: PlaygroundSettings;
+    setSettings: (next: Partial<PlaygroundSettings>) => void;
+}
+interface PlaygroundSettingsProviderProps {
+    children: React$1.ReactNode;
+}
+declare function PlaygroundSettingsProvider({ children, }: PlaygroundSettingsProviderProps): React$1.ReactElement;
+/** Access playground settings. Returns defaults when no provider is present. */
+declare function usePlaygroundSettings(): PlaygroundSettingsContextValue;
+
+/**
+ * PlaygroundSettingsPanel -- gear button that opens a right-side settings sheet.
+ *
+ * Hosts playground-wide settings (currently locale). Edits flow through
+ * usePlaygroundSettings, which drives the SonnetConfigProvider wrapping all
+ * playground routes.
+ */
+
+declare function PlaygroundSettingsPanel(): React$1.ReactElement;
+
 declare const builtinEntries: PlaygroundEntry[];
 
 /**
@@ -168,4 +210,4 @@ declare const builtinEntries: PlaygroundEntry[];
  */
 declare function createPlaygroundRegistry(): PlaygroundRegistry;
 
-export { type PlaygroundColor, type PlaygroundEntry, type PlaygroundModuleOptions, PlaygroundOverview, PlaygroundRegistry, PlaygroundSection, builtinEntries, createPlaygroundModule, createPlaygroundRegistry };
+export { ExampleBlock, type PlaygroundColor, type PlaygroundEntry, type PlaygroundModuleOptions, PlaygroundOverview, PlaygroundRegistry, PlaygroundSection, type PlaygroundSettings, PlaygroundSettingsPanel, PlaygroundSettingsProvider, builtinEntries, createPlaygroundModule, createPlaygroundRegistry, usePlaygroundSettings };

package/dist/index.js

@@ -1,18 +1,50 @@
 import {
+  ExampleBlock,
   PlaygroundSection
 } from "./chunk-C2EZ2ECG.js";
 
 // src/PlaygroundRegistry.ts
+import { warnLog } from "@petrarca/sonnet-core";
 var PlaygroundRegistry = class _PlaygroundRegistry {
   entries = /* @__PURE__ */ new Map();
+  /**
+   * Report registrations that cannot work, rather than silently misbehaving.
+   *
+   * Entries are keyed by `id`, so two entries may legally share a `path` --
+   * and then both produce a route on the same URL and one is unreachable.
+   * Groups are bucketed by their exact label, so two labels differing only by
+   * case become two separate groups.
+   *
+   * Neither is corrected here: dropping an entry, or merging groups the caller
+   * spelled differently, would be its own surprise. The registration stands and
+   * the problem is made diagnosable.
+   */
+  warnOnConflicts(entry) {
+    for (const existing of this.entries.values()) {
+      if (existing.id === entry.id) continue;
+      if (existing.path === entry.path) {
+        warnLog(
+          `[PlaygroundRegistry] entries "${existing.id}" and "${entry.id}" share the path "${entry.path}". Both will route to the same URL and one will be unreachable.`
+        );
+      }
+      const group = entry.group ?? _PlaygroundRegistry.DEFAULT_GROUP;
+      const existingGroup = existing.group ?? _PlaygroundRegistry.DEFAULT_GROUP;
+      if (group !== existingGroup && group.toLowerCase() === existingGroup.toLowerCase()) {
+        warnLog(
+          `[PlaygroundRegistry] group "${group}" differs from "${existingGroup}" only by case; they will render as two separate groups.`
+        );
+      }
+    }
+  }
   /** Register a playground entry. Overwrites any existing entry with the same id. */
   register(entry) {
+    this.warnOnConflicts(entry);
     this.entries.set(entry.id, entry);
   }
   /** Register multiple entries at once. */
   registerAll(entries) {
     for (const entry of entries) {
-      this.entries.set(entry.id, entry);
+      this.register(entry);
     }
   }
   /** Remove an entry by id. Returns true if it existed. */
@@ -87,7 +119,8 @@ import {
   Table2,
   Network,
   SquareTerminal,
-  PencilRuler
+  PencilRuler,
+  ShieldCheck
 } from "lucide-react";
 var builtinEntries = [
   {
@@ -119,7 +152,7 @@ var builtinEntries = [
     icon: Grid,
     color: "indigo",
     path: "core-components",
-    component: lazy(() => import("./PlayCoreComponents-AG5D4SBS.js")),
+    component: lazy(() => import("./PlayCoreComponents-YTEAS3GL.js")),
     group: "Components",
     order: 0
   },
@@ -163,7 +196,7 @@ var builtinEntries = [
     icon: Edit,
     color: "purple",
     path: "forms",
-    component: lazy(() => import("./PlayForms-FOF3XE6G.js")),
+    component: lazy(() => import("./PlayForms-L532W3JL.js")),
     group: "Forms",
     order: 1
   },
@@ -174,7 +207,7 @@ var builtinEntries = [
     icon: Package,
     color: "indigo",
     path: "form-widgets",
-    component: lazy(() => import("./PlayFormWidgets-IWJJQ5XL.js")),
+    component: lazy(() => import("./PlayFormWidgets-6JYFRTAL.js")),
     group: "Forms",
     order: 2
   },
@@ -185,7 +218,7 @@ var builtinEntries = [
     icon: PencilRuler,
     color: "teal",
     path: "schema-designer",
-    component: lazy(() => import("./PlaySchemaDesigner-B2RVRRCH.js")),
+    component: lazy(() => import("./PlaySchemaDesigner-S4DBB53G.js")),
     group: "Schemas",
     order: 0
   },
@@ -207,7 +240,7 @@ var builtinEntries = [
     icon: Network,
     color: "cyan",
     path: "graph",
-    component: lazy(() => import("./PlayGraph-M7UE5MZC.js")),
+    component: lazy(() => import("./PlayGraph-M4KQSFI7.js")),
     group: "Graph",
     order: 0
   },
@@ -221,19 +254,163 @@ var builtinEntries = [
     component: lazy(() => import("./PlayShellApi-5O6VYR2X.js")),
     group: "Shell",
     order: 0
+  },
+  {
+    id: "sonnet.auth",
+    title: "Auth Screens",
+    description: "The pre-application login and organization selection screens: identifier-first and legacy flows, provider combinations, error and loading states, and every org-selection outcome.",
+    icon: ShieldCheck,
+    color: "teal",
+    path: "auth",
+    component: lazy(() => import("./PlayAuth-SOEYPOOL.js")),
+    group: "Shell",
+    order: 1
   }
 ];
 
 // src/createPlaygroundModule.tsx
 import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
 import { FlaskConical } from "lucide-react";
 
 // src/PlaygroundOverview.tsx
-import { useState } from "react";
+import { useState as useState3 } from "react";
 import { useNavigate } from "react-router-dom";
 import { LayoutGrid, List } from "lucide-react";
 import { Card, Button, SimpleTooltip } from "@petrarca/sonnet-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/PlaygroundSettingsPanel.tsx
+import { useState as useState2 } from "react";
+import { Settings } from "lucide-react";
+import {
+  IconButton,
+  Label,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from "@petrarca/sonnet-ui";
+
+// src/PlaygroundSettings.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { SonnetConfigProvider } from "@petrarca/sonnet-core/config";
+import { jsx } from "react/jsx-runtime";
+var STORAGE_KEY = "sonnet.playground.settings";
+var DEFAULT_SETTINGS = { locale: "" };
+var PlaygroundSettingsContext = createContext(null);
+var storage = {
+  get(key) {
+    try {
+      return typeof localStorage !== "undefined" ? localStorage.getItem(key) : null;
+    } catch {
+      return null;
+    }
+  },
+  set(key, value) {
+    try {
+      if (typeof localStorage !== "undefined") localStorage.setItem(key, value);
+    } catch {
+    }
+  }
+};
+function loadSettings() {
+  const raw = storage.get(STORAGE_KEY);
+  if (!raw) return DEFAULT_SETTINGS;
+  try {
+    return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
+  } catch {
+    return DEFAULT_SETTINGS;
+  }
+}
+function persistSettings(settings) {
+  storage.set(STORAGE_KEY, JSON.stringify(settings));
+}
+function PlaygroundSettingsProvider({
+  children
+}) {
+  const [settings, setSettingsState] = useState(loadSettings);
+  const setSettings = useCallback(
+    (next) => setSettingsState((prev) => {
+      const merged = { ...prev, ...next };
+      persistSettings(merged);
+      return merged;
+    }),
+    []
+  );
+  const contextValue = useMemo(
+    () => ({ settings, setSettings }),
+    [settings, setSettings]
+  );
+  const config = useMemo(
+    () => ({ globals: { locale: settings.locale || void 0 } }),
+    [settings.locale]
+  );
+  return /* @__PURE__ */ jsx(PlaygroundSettingsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(SonnetConfigProvider, { value: config, children }) });
+}
+function usePlaygroundSettings() {
+  return useContext(PlaygroundSettingsContext) ?? {
+    settings: DEFAULT_SETTINGS,
+    setSettings: () => {
+    }
+  };
+}
+
+// src/PlaygroundSettingsPanel.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var INHERIT = "__inherit__";
+var LOCALE_OPTIONS = [
+  { code: INHERIT, label: "Inherit (app / browser)" },
+  { code: "en-US", label: "English (US) - MM/DD, Sun" },
+  { code: "en-GB", label: "English (UK) - DD/MM, Mon" },
+  { code: "de-DE", label: "German - DD.MM, Mon" },
+  { code: "fr-FR", label: "French - DD/MM, Mon" },
+  { code: "sv-SE", label: "Swedish - YYYY-MM-DD, Mon" },
+  { code: "ja-JP", label: "Japanese - YYYY/MM/DD, Sun" }
+];
+function PlaygroundSettingsPanel() {
+  const [open, setOpen] = useState2(false);
+  const { settings, setSettings } = usePlaygroundSettings();
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx2(IconButton, { label: "Playground settings", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx2(Settings, {}) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "right", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsx2(SheetTitle, { children: "Playground settings" }),
+        /* @__PURE__ */ jsx2(SheetDescription, { children: "Scoped to the playground. Values exchanged with components stay locale-independent (ISO); only display and input parsing change." })
+      ] }),
+      /* @__PURE__ */ jsx2(SheetBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "playground-locale", children: "Locale" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: settings.locale || INHERIT,
+            onValueChange: (value) => setSettings({ locale: value === INHERIT ? "" : value }),
+            children: [
+              /* @__PURE__ */ jsx2(SelectTrigger, { id: "playground-locale", children: /* @__PURE__ */ jsx2(SelectValue, {}) }),
+              /* @__PURE__ */ jsx2(SelectContent, { children: LOCALE_OPTIONS.map((opt) => /* @__PURE__ */ jsx2(SelectItem, { value: opt.code, children: opt.label }, opt.code)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("p", { className: "text-xs text-tertiary-foreground", children: "Drives locale-sensitive components (e.g. Date Input) across every playground page." })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/PlaygroundOverview.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var COLOR_CLASSES = {
   blue: "bg-blue-100 text-blue-600",
   violet: "bg-violet-100 text-violet-600",
@@ -248,21 +425,21 @@ var COLOR_CLASSES = {
 };
 var TILE_GRID = "grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-6";
 function PlaygroundTile({ item, onNavigate }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Card,
     {
       className: "cursor-pointer shadow-sm border rounded-md p-6 transition-transform duration-200 motion-safe:hover:-translate-y-1",
       onClick: () => onNavigate(item.path),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center mb-4", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3("div", { className: "flex items-center mb-4", children: /* @__PURE__ */ jsx3(
           "div",
           {
             className: `flex items-center justify-center w-9 h-9 rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`,
-            children: /* @__PURE__ */ jsx(item.icon, { size: 18 })
+            children: /* @__PURE__ */ jsx3(item.icon, { size: 18 })
           }
         ) }),
-        /* @__PURE__ */ jsx("h3", { className: "heading-section mb-1", children: item.title }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.description })
+        /* @__PURE__ */ jsx3("h3", { className: "heading-section mb-1", children: item.title }),
+        /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: item.description })
       ]
     }
   );
@@ -275,27 +452,36 @@ function PlaygroundOverview({
   grouped: initialGrouped = true
 }) {
   const navigate = useNavigate();
-  const [grouped, setGrouped] = useState(initialGrouped);
+  const [grouped, setGrouped] = useState3(initialGrouped);
   const handleNavigate = (path) => navigate(`${basePath}/${path}`);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-6", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { className: "mb-1", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between mb-6", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("h1", { className: "mb-1", children: title }),
+        /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx(SimpleTooltip, { label: grouped ? "Show flat list" : "Group by category", children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: () => setGrouped((v) => !v),
-          children: grouped ? /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
-        }
-      ) })
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(
+          SimpleTooltip,
+          {
+            label: grouped ? "Show flat list" : "Group by category",
+            children: /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => setGrouped((v) => !v),
+                children: grouped ? /* @__PURE__ */ jsx3(LayoutGrid, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(List, { className: "h-4 w-4" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(PlaygroundSettingsPanel, {})
+      ] })
     ] }),
-    grouped ? registry.getGrouped().map(([groupLabel, entries]) => /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-muted-foreground uppercase tracking-wider mb-4", children: groupLabel }),
-      /* @__PURE__ */ jsx("div", { className: TILE_GRID, children: entries.map((item) => /* @__PURE__ */ jsx(
+    grouped ? registry.getGrouped().map(([groupLabel, entries]) => /* @__PURE__ */ jsxs2("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "text-sm font-medium text-muted-foreground uppercase tracking-wider mb-4", children: groupLabel }),
+      /* @__PURE__ */ jsx3("div", { className: TILE_GRID, children: entries.map((item) => /* @__PURE__ */ jsx3(
         PlaygroundTile,
         {
           item,
@@ -303,7 +489,7 @@ function PlaygroundOverview({
         },
         item.id
       )) })
-    ] }, groupLabel)) : /* @__PURE__ */ jsx("div", { className: TILE_GRID, children: registry.getAll().map((item) => /* @__PURE__ */ jsx(
+    ] }, groupLabel)) : /* @__PURE__ */ jsx3("div", { className: TILE_GRID, children: registry.getAll().map((item) => /* @__PURE__ */ jsx3(
       PlaygroundTile,
       {
         item,
@@ -315,15 +501,14 @@ function PlaygroundOverview({
 }
 
 // src/createPlaygroundModule.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function buildNavigation(registry, basePath) {
   const groups = registry.getGrouped();
   const navGroups = [];
-  const overviewGroup = {
+  navGroups.push({
     id: "playground-overview",
     links: [{ label: "Overview", path: basePath }]
-  };
-  navGroups.push(overviewGroup);
+  });
   for (const [groupLabel, entries] of groups) {
     navGroups.push({
       id: `playground-${groupLabel.toLowerCase().replace(/\s+/g, "-")}`,
@@ -337,7 +522,10 @@ function buildNavigation(registry, basePath) {
   return navGroups;
 }
 function suspended(Component) {
-  return /* @__PURE__ */ jsx2(Suspense, { children: /* @__PURE__ */ jsx2(Component, {}) });
+  return /* @__PURE__ */ jsx4(Suspense, { children: /* @__PURE__ */ jsx4(Component, {}) });
+}
+function PlaygroundLayout() {
+  return /* @__PURE__ */ jsx4(PlaygroundSettingsProvider, { children: /* @__PURE__ */ jsx4(Outlet, {}) });
 }
 function createPlaygroundModule(registry, options = {}) {
   const {
@@ -352,21 +540,27 @@ function createPlaygroundModule(registry, options = {}) {
   const routes = [
     {
       path: routeBase,
-      element: suspended(() => /* @__PURE__ */ jsx2(
-        PlaygroundOverview,
+      element: /* @__PURE__ */ jsx4(PlaygroundLayout, {}),
+      children: [
         {
-          registry,
-          basePath,
-          title: overviewTitle,
-          subtitle: overviewSubtitle,
-          grouped
-        }
-      ))
-    },
-    ...registry.getAll().map((entry) => ({
-      path: `${routeBase}/${entry.path}`,
-      element: suspended(entry.component)
-    }))
+          index: true,
+          element: suspended(() => /* @__PURE__ */ jsx4(
+            PlaygroundOverview,
+            {
+              registry,
+              basePath,
+              title: overviewTitle,
+              subtitle: overviewSubtitle,
+              grouped
+            }
+          ))
+        },
+        ...registry.getAll().map((entry) => ({
+          path: entry.path,
+          element: suspended(entry.component)
+        }))
+      ]
+    }
   ];
   return {
     id: "playground",
@@ -386,11 +580,15 @@ function createPlaygroundRegistry() {
   return registry;
 }
 export {
+  ExampleBlock,
   PlaygroundOverview,
   PlaygroundRegistry,
   PlaygroundSection,
+  PlaygroundSettingsPanel,
+  PlaygroundSettingsProvider,
   builtinEntries,
   createPlaygroundModule,
-  createPlaygroundRegistry
+  createPlaygroundRegistry,
+  usePlaygroundSettings
 };
 //# sourceMappingURL=index.js.map