@petrarca/sonnet-playground 0.5.0 → 0.7.0

package/dist/chunk-RYCRENYO.js

@@ -0,0 +1,401 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayAuth.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@petrarca/sonnet-ui";
+import {
+  Login
+} from "@petrarca/sonnet-shell/auth";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SESSION_LABELS = {
+  anonymous: "Not authenticated -- login form",
+  "orgs-null": "Authenticated, orgs = null (not loaded)",
+  "orgs-empty": "Authenticated, orgs = [] (no memberships)",
+  "orgs-one": "Authenticated, one org (auto-selects)",
+  "orgs-many": "Authenticated, several orgs (picker)"
+};
+var ENTRY_LABELS = {
+  direct: "Direct visit -- no location state",
+  "tenant-selection": 'Redirected with step="tenant-selection"',
+  "org-selection": 'Redirected with step="org-selection"'
+};
+var MANY_ORGS = [
+  { id: "org-north", name: "Northwind Trading" },
+  { id: "org-acme", name: "Acme Industrial" },
+  { id: "org-globex", name: "Globex Research" }
+];
+var ONE_ORG = [{ id: "org-north", name: "Northwind Trading" }];
+function PlayAuth() {
+  const [flow, setFlow] = useState("identifier-first");
+  const [providers, setProviders] = useState("both");
+  const [session, setSession] = useState("anonymous");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDiscovering, setIsDiscovering] = useState(false);
+  const [appName, setAppName] = useState("Example");
+  const [entry, setEntry] = useState("direct");
+  const [requiresOrg, setRequiresOrg] = useState(true);
+  const [pendingLaunch, setPendingLaunch] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [events, setEvents] = useState([]);
+  const nextId = useRef(0);
+  const log = useCallback((message) => {
+    setEvents(
+      (prev) => [
+        {
+          id: nextId.current++,
+          time: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+          message
+        },
+        ...prev
+      ].slice(0, 40)
+    );
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+  const discovered = useMemo(() => {
+    const local = {
+      type: "local",
+      name: "local",
+      label: "Password"
+    };
+    const external = {
+      type: "external",
+      name: "acme-sso",
+      label: "Continue with Acme SSO",
+      // The app attaches whatever its onExternalLogin needs; the shell only
+      // carries it through. No `as any` on the provider.
+      metadata: {
+        loginUrl: "https://example.invalid/authorize",
+        targetId: "acme"
+      }
+    };
+    if (providers === "local") return [local];
+    if (providers === "external") return [external];
+    if (providers === "none") return [];
+    return [local, external];
+  }, [providers]);
+  const config = useMemo(() => {
+    const oauthOn = providers === "external" || providers === "both";
+    return {
+      enabled: true,
+      features: {
+        local_auth: providers === "local" || providers === "both",
+        oauth: oauthOn
+      },
+      oauth: oauthOn ? {
+        providers: {
+          "acme-sso": {
+            enabled: true,
+            name: "Acme SSO",
+            login_url: "https://example.invalid/authorize"
+          }
+        }
+      } : null,
+      // Never exposed as a control: Login acts on this with
+      // window.location.href, which would leave the playground.
+      ui: { direct_redirect: null }
+    };
+  }, [providers]);
+  const orgs = useMemo(() => {
+    if (session === "orgs-empty") return [];
+    if (session === "orgs-one") return ONE_ORG;
+    if (session === "orgs-many") return MANY_ORGS;
+    return null;
+  }, [session]);
+  const isAuthenticated = session !== "anonymous";
+  const onLogin = useCallback(
+    async (credentials) => {
+      log(
+        `onLogin({ identifier: "${credentials.identifier}", password: "${"*".repeat(credentials.password.length)}" })`
+      );
+    },
+    [log]
+  );
+  const onFetchCurrentUser = useCallback(async () => {
+    log("onFetchCurrentUser()");
+  }, [log]);
+  const onSelectOrg = useCallback(
+    async (id) => {
+      log(`onSelectOrg("${id}")`);
+    },
+    [log]
+  );
+  const onClearError = useCallback(() => {
+    log("onClearError()");
+  }, [log]);
+  const onDiscover = useCallback(
+    async (identifier) => {
+      log(`onDiscover("${identifier}") -> ${discovered.length} provider(s)`);
+      return discovered;
+    },
+    [log, discovered]
+  );
+  const onExternalLogin = useCallback(
+    (provider) => {
+      const loginUrl = provider.metadata?.loginUrl;
+      log(
+        `onExternalLogin("${provider.name}", loginUrl=${loginUrl ?? "none"}) -- a real app redirects to the IdP here, so the screen stays on "Redirecting..."`
+      );
+    },
+    [log]
+  );
+  const orgEmptyAction = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        className: "w-full",
+        onClick: () => log("orgEmptyAction: Sign out clicked"),
+        children: "Sign out"
+      }
+    ),
+    [log]
+  );
+  const navigate = useNavigate();
+  const location = useLocation();
+  const launch = useCallback(() => {
+    log(
+      `launched: flow=${flow}, providers=${providers}, session=${session}, entry=${entry}, requiresOrgSelection=${requiresOrg}`
+    );
+    navigate(location.pathname, {
+      replace: true,
+      state: entry === "direct" ? null : { step: entry, from: { pathname: "/dashboard" } }
+    });
+    setPendingLaunch(true);
+  }, [
+    log,
+    flow,
+    providers,
+    session,
+    entry,
+    requiresOrg,
+    navigate,
+    location.pathname
+  ]);
+  useEffect(() => {
+    if (!pendingLaunch) return;
+    const state = location.state;
+    const wanted = entry === "direct" ? void 0 : entry;
+    if ((state?.step ?? void 0) !== wanted) return;
+    setPendingLaunch(false);
+    setOpen(true);
+  }, [pendingLaunch, location.state, entry]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Auth Screens" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+        "Login and organization selection from",
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "@petrarca/sonnet-shell/auth" }),
+        ". Configure a scenario, launch it full-screen, and read what the component called back."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      PlaygroundSection,
+      {
+        title: "Scenario",
+        description: "Login renders four different screens depending on these props. Most are unreachable from the default state.",
+        variant: "card",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-flow", children: "Flow" }),
+              /* @__PURE__ */ jsxs(Select, { value: flow, onValueChange: (v) => setFlow(v), children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id: "auth-flow", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "identifier-first", children: "Identifier-first (onDiscover wired)" }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "single-screen", children: "Single screen (no onDiscover)" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-providers", children: "Providers" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: providers,
+                  onValueChange: (v) => setProviders(v),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { id: "auth-providers", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "both", children: "Local and external" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "local", children: "Local only" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "external", children: "External only" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "none", children: "None available" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-entry", children: "Entry state" }),
+              /* @__PURE__ */ jsxs(Select, { value: entry, onValueChange: (v) => setEntry(v), children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id: "auth-entry", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(ENTRY_LABELS).map((key) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: ENTRY_LABELS[key] }, key)) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-session", children: "Session" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: session,
+                  onValueChange: (v) => setSession(v),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { id: "auth-session", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(SESSION_LABELS).map((key) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: SESSION_LABELS[key] }, key)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-error", children: "Error message" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "auth-error",
+                  value: error,
+                  placeholder: "Leave empty for no error",
+                  onChange: (e) => setError(e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "auth-appname", children: "App name" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "auth-appname",
+                  value: appName,
+                  placeholder: "Shown above the form",
+                  onChange: (e) => setAppName(e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 sm:col-span-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "auth-loading",
+                    checked: isLoading,
+                    onCheckedChange: (v) => setIsLoading(v === true)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Label, { htmlFor: "auth-loading", children: "isLoading" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "auth-discovering",
+                    checked: isDiscovering,
+                    onCheckedChange: (v) => setIsDiscovering(v === true)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Label, { htmlFor: "auth-discovering", children: "isDiscovering" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "auth-requires-org",
+                    checked: requiresOrg,
+                    onCheckedChange: (v) => setRequiresOrg(v === true)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Label, { htmlFor: "auth-requires-org", children: "requiresOrgSelection" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
+            /* @__PURE__ */ jsx(Button, { onClick: launch, children: "Launch login screen" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => setEvents([]),
+                disabled: events.length === 0,
+                children: "Clear log"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundSection,
+      {
+        title: "Event log",
+        description: "Every prop callback the component invoked, most recent first.",
+        variant: "card",
+        children: events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing yet. Launch the screen and interact with it." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: events.map((entry2) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-tertiary-foreground shrink-0 pt-0.5", children: entry2.time }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs break-all", children: entry2.message })
+        ] }, entry2.id)) })
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 overflow-auto bg-background", children: [
+        /* @__PURE__ */ jsx(
+          Login,
+          {
+            config,
+            isAuthenticated,
+            activeTenantId: null,
+            isLoading,
+            error: error || null,
+            orgs,
+            appName: appName || void 0,
+            onLogin,
+            onFetchCurrentUser,
+            onSelectOrg,
+            onClearError,
+            onDiscover: flow === "identifier-first" ? onDiscover : void 0,
+            onExternalLogin,
+            isDiscovering,
+            requiresOrgSelection: requiresOrg,
+            orgEmptyAction
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "fixed top-4 right-4 z-10",
+            onClick: () => setOpen(false),
+            children: "Exit preview (Esc)"
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+
+export {
+  PlayAuth
+};
+//# sourceMappingURL=chunk-RYCRENYO.js.map

package/dist/chunk-RYCRENYO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayAuth.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport {\n  Button,\n  Checkbox,\n  Input,\n  Label,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@petrarca/sonnet-ui\";\nimport {\n  Login,\n  type AuthConfig,\n  type LoginProvider,\n  type OrgOption,\n} from \"@petrarca/sonnet-shell/auth\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\n\n/**\n * PlayAuth -- exercises the pre-application auth screens from\n * `@petrarca/sonnet-shell/auth`.\n *\n * Login is a full-page state machine (identifier -> auth -> credentials ->\n * org-selection) rather than a dialog, so the preview takes over the viewport\n * instead of rendering inline. Every callback is a logger: no backend, no\n * mocking, and the log is the only feedback channel.\n *\n * Login calls useNavigate and redirects once a session resolves. It cannot be\n * sandboxed in a nested MemoryRouter -- react-router forbids a Router inside a\n * Router -- so the scenarios stop short of that branch instead: the redirect\n * fires only when a tenant is already active, and no scenario here sets one.\n * activeTenantId is therefore pinned to null and Login never navigates.\n *\n * The preview is portalled to document.body. Rendered in place it would sit\n * inside the page's space-y-6 wrapper, whose margin-top applies to a fixed\n * child too and pushes the overlay off the viewport by 24px.\n *\n * `config.ui.direct_redirect` is deliberately fixed to null and not exposed --\n * Login acts on it with `window.location.href`, which would take the browser\n * off the playground entirely.\n */\n\ntype Flow = \"identifier-first\" | \"single-screen\";\n/** What ProtectedRoute puts in location.state when it bounces a user here. */\ntype Entry = \"direct\" | \"tenant-selection\" | \"org-selection\";\ntype Providers = \"both\" | \"local\" | \"external\" | \"none\";\ntype Session =\n  | \"anonymous\"\n  | \"orgs-null\"\n  | \"orgs-empty\"\n  | \"orgs-one\"\n  | \"orgs-many\";\n\ninterface LogEntry {\n  id: number;\n  time: string;\n  message: string;\n}\n\nconst SESSION_LABELS: Record<Session, string> = {\n  anonymous: \"Not authenticated -- login form\",\n  \"orgs-null\": \"Authenticated, orgs = null (not loaded)\",\n  \"orgs-empty\": \"Authenticated, orgs = [] (no memberships)\",\n  \"orgs-one\": \"Authenticated, one org (auto-selects)\",\n  \"orgs-many\": \"Authenticated, several orgs (picker)\",\n};\n\nconst ENTRY_LABELS: Record<Entry, string> = {\n  direct: \"Direct visit -- no location state\",\n  \"tenant-selection\": 'Redirected with step=\"tenant-selection\"',\n  \"org-selection\": 'Redirected with step=\"org-selection\"',\n};\n\nconst MANY_ORGS: OrgOption[] = [\n  { id: \"org-north\", name: \"Northwind Trading\" },\n  { id: \"org-acme\", name: \"Acme Industrial\" },\n  { id: \"org-globex\", name: \"Globex Research\" },\n];\n\nconst ONE_ORG: OrgOption[] = [{ id: \"org-north\", name: \"Northwind Trading\" }];\n\nexport default function PlayAuth() {\n  const [flow, setFlow] = useState<Flow>(\"identifier-first\");\n  const [providers, setProviders] = useState<Providers>(\"both\");\n  const [session, setSession] = useState<Session>(\"anonymous\");\n  const [error, setError] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n  const [isDiscovering, setIsDiscovering] = useState(false);\n  const [appName, setAppName] = useState(\"Example\");\n  const [entry, setEntry] = useState<Entry>(\"direct\");\n  const [requiresOrg, setRequiresOrg] = useState(true);\n  const [pendingLaunch, setPendingLaunch] = useState(false);\n  const [open, setOpen] = useState(false);\n  const [events, setEvents] = useState<LogEntry[]>([]);\n  const nextId = useRef(0);\n\n  const log = useCallback((message: string) => {\n    setEvents((prev) =>\n      [\n        {\n          id: nextId.current++,\n          time: new Date().toLocaleTimeString(),\n          message,\n        },\n        ...prev,\n      ].slice(0, 40),\n    );\n  }, []);\n\n  // Escape leaves the preview.\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [open]);\n\n  const discovered = useMemo<LoginProvider[]>(() => {\n    const local: LoginProvider = {\n      type: \"local\",\n      name: \"local\",\n      label: \"Password\",\n    };\n    const external: LoginProvider = {\n      type: \"external\",\n      name: \"acme-sso\",\n      label: \"Continue with Acme SSO\",\n      // The app attaches whatever its onExternalLogin needs; the shell only\n      // carries it through. No `as any` on the provider.\n      metadata: {\n        loginUrl: \"https://example.invalid/authorize\",\n        targetId: \"acme\",\n      },\n    };\n    if (providers === \"local\") return [local];\n    if (providers === \"external\") return [external];\n    if (providers === \"none\") return [];\n    return [local, external];\n  }, [providers]);\n\n  const config = useMemo<AuthConfig>(() => {\n    const oauthOn = providers === \"external\" || providers === \"both\";\n    return {\n      enabled: true,\n      features: {\n        local_auth: providers === \"local\" || providers === \"both\",\n        oauth: oauthOn,\n      },\n      oauth: oauthOn\n        ? {\n            providers: {\n              \"acme-sso\": {\n                enabled: true,\n                name: \"Acme SSO\",\n                login_url: \"https://example.invalid/authorize\",\n              },\n            },\n          }\n        : null,\n      // Never exposed as a control: Login acts on this with\n      // window.location.href, which would leave the playground.\n      ui: { direct_redirect: null },\n    };\n  }, [providers]);\n\n  // Stable identity matters: Login runs an effect over `orgs` that calls\n  // onSelectOrg for a single-org session. A fresh array each render would\n  // re-fire it on every render.\n  const orgs = useMemo<OrgOption[] | null>(() => {\n    if (session === \"orgs-empty\") return [];\n    if (session === \"orgs-one\") return ONE_ORG;\n    if (session === \"orgs-many\") return MANY_ORGS;\n    return null;\n  }, [session]);\n\n  const isAuthenticated = session !== \"anonymous\";\n\n  const onLogin = useCallback(\n    async (credentials: { identifier: string; password: string }) => {\n      log(\n        `onLogin({ identifier: \"${credentials.identifier}\", password: \"${\"*\".repeat(credentials.password.length)}\" })`,\n      );\n    },\n    [log],\n  );\n\n  const onFetchCurrentUser = useCallback(async () => {\n    log(\"onFetchCurrentUser()\");\n  }, [log]);\n\n  const onSelectOrg = useCallback(\n    async (id: string) => {\n      log(`onSelectOrg(\"${id}\")`);\n    },\n    [log],\n  );\n\n  const onClearError = useCallback(() => {\n    log(\"onClearError()\");\n  }, [log]);\n\n  const onDiscover = useCallback(\n    async (identifier: string) => {\n      log(`onDiscover(\"${identifier}\") -> ${discovered.length} provider(s)`);\n      return discovered;\n    },\n    [log, discovered],\n  );\n\n  const onExternalLogin = useCallback(\n    (provider: LoginProvider) => {\n      // Read back the per-provider metadata the discover step attached, with\n      // one narrowing cast on the field -- not on the whole provider.\n      const loginUrl = provider.metadata?.loginUrl as string | undefined;\n      log(\n        `onExternalLogin(\"${provider.name}\", loginUrl=${loginUrl ?? \"none\"}) -- a real app redirects to the IdP here, so the screen stays on \"Redirecting...\"`,\n      );\n    },\n    [log],\n  );\n\n  // The empty-org escape hatch the consumer supplies. The library states the\n  // fact; the app decides the way out.\n  const orgEmptyAction = useMemo(\n    () => (\n      <Button\n        variant=\"outline\"\n        className=\"w-full\"\n        onClick={() => log(\"orgEmptyAction: Sign out clicked\")}\n      >\n        Sign out\n      </Button>\n    ),\n    [log],\n  );\n\n  const navigate = useNavigate();\n  const location = useLocation();\n\n  // Login seeds its step from location.state, which only ProtectedRoute sets.\n  // Writing it onto the playground's own location is the only way to reach the\n  // screens that entry state selects.\n  //\n  // The open flag cannot be set in the same handler: react-router resolves a\n  // navigation asynchronously, so Login would mount and read location.state\n  // before the new state landed. Wait for the location to agree first.\n  const launch = useCallback(() => {\n    log(\n      `launched: flow=${flow}, providers=${providers}, session=${session}, entry=${entry}, requiresOrgSelection=${requiresOrg}`,\n    );\n    navigate(location.pathname, {\n      replace: true,\n      state:\n        entry === \"direct\"\n          ? null\n          : { step: entry, from: { pathname: \"/dashboard\" } },\n    });\n    setPendingLaunch(true);\n  }, [\n    log,\n    flow,\n    providers,\n    session,\n    entry,\n    requiresOrg,\n    navigate,\n    location.pathname,\n  ]);\n\n  useEffect(() => {\n    if (!pendingLaunch) return;\n    const state = location.state as { step?: string } | null;\n    const wanted = entry === \"direct\" ? undefined : entry;\n    if ((state?.step ?? undefined) !== wanted) return;\n    setPendingLaunch(false);\n    setOpen(true);\n  }, [pendingLaunch, location.state, entry]);\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1>Auth Screens</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Login and organization selection from{\" \"}\n          <code>@petrarca/sonnet-shell/auth</code>. Configure a scenario, launch\n          it full-screen, and read what the component called back.\n        </p>\n      </div>\n\n      <PlaygroundSection\n        title=\"Scenario\"\n        description=\"Login renders four different screens depending on these props. Most are unreachable from the default state.\"\n        variant=\"card\"\n      >\n        <div className=\"grid gap-4 sm:grid-cols-2\">\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-flow\">Flow</Label>\n            <Select value={flow} onValueChange={(v) => setFlow(v as Flow)}>\n              <SelectTrigger id=\"auth-flow\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"identifier-first\">\n                  Identifier-first (onDiscover wired)\n                </SelectItem>\n                <SelectItem value=\"single-screen\">\n                  Single screen (no onDiscover)\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-providers\">Providers</Label>\n            <Select\n              value={providers}\n              onValueChange={(v) => setProviders(v as Providers)}\n            >\n              <SelectTrigger id=\"auth-providers\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"both\">Local and external</SelectItem>\n                <SelectItem value=\"local\">Local only</SelectItem>\n                <SelectItem value=\"external\">External only</SelectItem>\n                <SelectItem value=\"none\">None available</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-entry\">Entry state</Label>\n            <Select value={entry} onValueChange={(v) => setEntry(v as Entry)}>\n              <SelectTrigger id=\"auth-entry\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {(Object.keys(ENTRY_LABELS) as Entry[]).map((key) => (\n                  <SelectItem key={key} value={key}>\n                    {ENTRY_LABELS[key]}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-session\">Session</Label>\n            <Select\n              value={session}\n              onValueChange={(v) => setSession(v as Session)}\n            >\n              <SelectTrigger id=\"auth-session\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {(Object.keys(SESSION_LABELS) as Session[]).map((key) => (\n                  <SelectItem key={key} value={key}>\n                    {SESSION_LABELS[key]}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-error\">Error message</Label>\n            <Input\n              id=\"auth-error\"\n              value={error}\n              placeholder=\"Leave empty for no error\"\n              onChange={(e) => setError(e.target.value)}\n            />\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label htmlFor=\"auth-appname\">App name</Label>\n            <Input\n              id=\"auth-appname\"\n              value={appName}\n              placeholder=\"Shown above the form\"\n              onChange={(e) => setAppName(e.target.value)}\n            />\n          </div>\n\n          <div className=\"flex items-center gap-6 sm:col-span-2\">\n            <div className=\"flex items-center gap-2\">\n              <Checkbox\n                id=\"auth-loading\"\n                checked={isLoading}\n                onCheckedChange={(v) => setIsLoading(v === true)}\n              />\n              <Label htmlFor=\"auth-loading\">isLoading</Label>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Checkbox\n                id=\"auth-discovering\"\n                checked={isDiscovering}\n                onCheckedChange={(v) => setIsDiscovering(v === true)}\n              />\n              <Label htmlFor=\"auth-discovering\">isDiscovering</Label>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Checkbox\n                id=\"auth-requires-org\"\n                checked={requiresOrg}\n                onCheckedChange={(v) => setRequiresOrg(v === true)}\n              />\n              <Label htmlFor=\"auth-requires-org\">requiresOrgSelection</Label>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-3 pt-2\">\n          <Button onClick={launch}>Launch login screen</Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => setEvents([])}\n            disabled={events.length === 0}\n          >\n            Clear log\n          </Button>\n        </div>\n      </PlaygroundSection>\n\n      <PlaygroundSection\n        title=\"Event log\"\n        description=\"Every prop callback the component invoked, most recent first.\"\n        variant=\"card\"\n      >\n        {events.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            Nothing yet. Launch the screen and interact with it.\n          </p>\n        ) : (\n          <ul className=\"space-y-1\">\n            {events.map((entry) => (\n              <li key={entry.id} className=\"flex gap-3 text-sm\">\n                <span className=\"font-mono text-xs text-tertiary-foreground shrink-0 pt-0.5\">\n                  {entry.time}\n                </span>\n                <span className=\"font-mono text-xs break-all\">\n                  {entry.message}\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </PlaygroundSection>\n\n      {open &&\n        createPortal(\n          <div className=\"fixed inset-0 z-50 overflow-auto bg-background\">\n            <Login\n              config={config}\n              isAuthenticated={isAuthenticated}\n              activeTenantId={null}\n              isLoading={isLoading}\n              error={error || null}\n              orgs={orgs}\n              appName={appName || undefined}\n              onLogin={onLogin}\n              onFetchCurrentUser={onFetchCurrentUser}\n              onSelectOrg={onSelectOrg}\n              onClearError={onClearError}\n              onDiscover={flow === \"identifier-first\" ? onDiscover : undefined}\n              onExternalLogin={onExternalLogin}\n              isDiscovering={isDiscovering}\n              requiresOrgSelection={requiresOrg}\n              orgEmptyAction={orgEmptyAction}\n            />\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"fixed top-4 right-4 z-10\"\n              onClick={() => setOpen(false)}\n            >\n              Exit preview (Esc)\n            </Button>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["entry"]}

package/dist/{chunk-DZB6WFHA.js → chunk-UB7462QG.js}

@@ -16,6 +16,10 @@ import {
   CheckboxWidget,
   SelectWidget,
   QuantityWidget,
+  DateWidget,
+  TimeWidget,
+  DateTimeWidget,
+  DisplayWidget,
   DEFAULT_WIDGETS
 } from "@petrarca/sonnet-forms";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -62,6 +66,10 @@ function PlayFormWidgets() {
     value: 49.99,
     unit: "EUR"
   });
+  const [dateValue, setDateValue] = useState("2026-06-15");
+  const [birthYear, setBirthYear] = useState("1980");
+  const [timeValue, setTimeValue] = useState("09:30");
+  const [dateTimeValue, setDateTimeValue] = useState("2026-06-15T09:30");
   const onTextChange = useCallback(
     (v) => setTextValue(typeof v === "string" ? v : ""),
     []
@@ -94,6 +102,10 @@ function PlayFormWidgets() {
   const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);
   const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);
   const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);
+  const onStringChange = useCallback(
+    (set) => (v) => set(typeof v === "string" ? v : ""),
+    []
+  );
   return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { children: "Basic Form Widgets Playground" }),
@@ -295,6 +307,99 @@ function PlayFormWidgets() {
           ) })
         ] })
       ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "DisplayWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Read-only text block (type: null / x-ui-widget: display). Renders title + description as static text, collects no value. For instructions and notes placed between fields." }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed p-3", children: /* @__PURE__ */ jsx(
+          DisplayWidget,
+          {
+            id: "display-demo",
+            name: "displayNote",
+            value: null,
+            onChange: () => {
+            },
+            label: "Section 3: Medical history",
+            description: "Answer the following to the best of your knowledge. Leave blank if unsure.",
+            propertySchema: { type: "null" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "DateWidget / TimeWidget / DateTimeWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Date, time, and datetime fields. Auto-resolve from schema format (date / time / date-time). Values are ISO strings; display and parsing follow the playground locale (gear icon)." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date (format: date)", children: /* @__PURE__ */ jsx(
+            DateWidget,
+            {
+              id: "date-widget-demo",
+              name: "date",
+              value: dateValue,
+              onChange: onStringChange(setDateValue),
+              label: "Appointment date",
+              description: "Resolved from format: date",
+              propertySchema: { type: "string", format: "date" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date, year precision", children: /* @__PURE__ */ jsx(
+            DateWidget,
+            {
+              id: "date-widget-year",
+              name: "birthYear",
+              value: birthYear,
+              onChange: onStringChange(setBirthYear),
+              label: "Birth year",
+              description: "x-ui-options.precision: year",
+              propertySchema: { type: "string", format: "date" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: { precision: "year" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Time (format: time)", children: /* @__PURE__ */ jsx(
+            TimeWidget,
+            {
+              id: "time-widget-demo",
+              name: "time",
+              value: timeValue,
+              onChange: onStringChange(setTimeValue),
+              label: "Start time",
+              description: "Zone-free time of day",
+              propertySchema: { type: "string", format: "time" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date & time (format: date-time)", children: /* @__PURE__ */ jsx(
+            DateTimeWidget,
+            {
+              id: "datetime-widget-demo",
+              name: "dateTime",
+              value: dateTimeValue,
+              onChange: onStringChange(setDateTimeValue),
+              label: "Scheduled at",
+              description: "Plain wall-clock, timezone hint",
+              propertySchema: { type: "string", format: "date-time" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: { timeZone: "Europe/Berlin" }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(
+          {
+            date: dateValue,
+            birthYear,
+            time: timeValue,
+            dateTime: dateTimeValue
+          },
+          null,
+          2
+        ) }) })
+      ] }) }),
       /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
         /* @__PURE__ */ jsx("h2", { children: "QuantityWidget" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Compound numeric value + unit selector. Multi-unit shows a dropdown, single-unit shows static text, prefix mode places the unit before the value." }),
@@ -398,4 +503,4 @@ function PlayFormWidgets() {
 export {
   PlayFormWidgets
 };
-//# sourceMappingURL=chunk-DZB6WFHA.js.map
+//# sourceMappingURL=chunk-UB7462QG.js.map