@petrarca/sonnet-playground 0.7.0 → 0.9.0

package/dist/chunk-OUL3DN2E.js

@@ -0,0 +1,510 @@
+import {
+  PLAYGROUND_TERMINOLOGY
+} from "./chunk-WR74TMW4.js";
+
+// src/pages/PlayFhirQuestionnaire.tsx
+import { useMemo, useState } from "react";
+import {
+  fromFhirQuestionnaire,
+  fromFhirQuestionnaireResponse,
+  toFhirQuestionnaire,
+  toFhirQuestionnaireResponse
+} from "@petrarca/sonnet-fhir/questionnaire";
+import { JsonSchemaFormRenderer } from "@petrarca/sonnet-forms";
+import {
+  Badge,
+  Button,
+  Card,
+  IconButton,
+  SimpleTooltip,
+  ViewSwitch
+} from "@petrarca/sonnet-ui";
+import { CodeEditor } from "@petrarca/sonnet-ui/code-editor";
+import { ArrowRight, Check, Info, TriangleAlert } from "lucide-react";
+
+// src/pages/fhir/samples.ts
+var SYSTEM = "https://example.org/fhir/CodeSystem/acme-contact";
+var unitOption = (code, display) => ({
+  url: "http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption",
+  valueCoding: { system: "http://unitsofmeasure.org", code, display }
+});
+var coding = (code, display) => ({
+  valueCoding: { system: SYSTEM, code, display }
+});
+var SAMPLE_QUESTIONNAIRE = {
+  resourceType: "Questionnaire",
+  url: "https://example.org/fhir/Questionnaire/acme-intake",
+  version: "1.2.0",
+  name: "AcmeIntake",
+  status: "active",
+  title: "Acme intake",
+  description: "Before the first visit.",
+  item: [
+    {
+      linkId: "1",
+      text: "About you",
+      type: "group",
+      item: [
+        { linkId: "1.intro", type: "display", text: "Tell us about yourself." },
+        {
+          linkId: "1.1",
+          prefix: "a)",
+          text: "Name",
+          type: "string",
+          required: true,
+          maxLength: 80,
+          extension: [
+            {
+              url: "http://hl7.org/fhir/StructureDefinition/entryFormat",
+              valueString: "First and last name"
+            }
+          ]
+        },
+        { linkId: "1.2", text: "Do you smoke?", type: "boolean" },
+        {
+          linkId: "1.3",
+          text: "Packs a day",
+          type: "integer",
+          enableWhen: [{ question: "1.2", operator: "=", answerBoolean: true }]
+        },
+        {
+          linkId: "1.4",
+          text: "Contact by",
+          type: "choice",
+          answerOption: [coding("email", "E-mail"), coding("phone", "Phone")]
+        },
+        {
+          linkId: "1.5",
+          text: "Heard of us by",
+          type: "open-choice",
+          answerOption: [
+            coding("web", "The web"),
+            coding("friend", "A friend")
+          ]
+        },
+        {
+          linkId: "1.6",
+          text: "Weight",
+          type: "quantity",
+          extension: [unitOption("kg", "kg"), unitOption("[lb_av]", "lb")]
+        }
+      ]
+    },
+    {
+      linkId: "2",
+      text: "Visits",
+      type: "group",
+      repeats: true,
+      item: [
+        { linkId: "2.1", text: "Date", type: "date" },
+        {
+          linkId: "2.2",
+          text: "Contact by",
+          type: "choice",
+          answerOption: [coding("email", "E-mail"), coding("phone", "Phone")],
+          item: [{ linkId: "2.2.1", text: "When to call", type: "string" }]
+        }
+      ]
+    },
+    { linkId: "3", type: "display", text: "Thank you." }
+  ]
+};
+var SAMPLE_RESPONSE = {
+  resourceType: "QuestionnaireResponse",
+  questionnaire: "https://example.org/fhir/Questionnaire/acme-intake|1.2.0",
+  status: "completed",
+  item: [
+    {
+      linkId: "1",
+      text: "About you",
+      item: [
+        { linkId: "1.1", text: "Name", answer: [{ valueString: "Jane Roe" }] },
+        {
+          linkId: "1.2",
+          text: "Do you smoke?",
+          answer: [{ valueBoolean: true }]
+        },
+        { linkId: "1.3", text: "Packs a day", answer: [{ valueInteger: 1 }] },
+        {
+          linkId: "1.4",
+          text: "Contact by",
+          answer: [
+            {
+              valueCoding: { system: SYSTEM, code: "phone", display: "Phone" }
+            }
+          ]
+        },
+        {
+          linkId: "1.5",
+          text: "Heard of us by",
+          answer: [{ valueString: "a flyer" }]
+        },
+        {
+          linkId: "1.6",
+          text: "Weight",
+          answer: [
+            {
+              valueQuantity: {
+                value: 72.5,
+                unit: "kg",
+                system: "http://unitsofmeasure.org",
+                code: "kg"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      linkId: "2",
+      text: "Visits",
+      item: [
+        { linkId: "2.1", text: "Date", answer: [{ valueDate: "2026-11-02" }] }
+      ]
+    }
+  ]
+};
+
+// src/pages/PlayFhirQuestionnaire.tsx
+import { TerminologyProvider } from "@petrarca/sonnet-core/terminology";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pretty = (value) => JSON.stringify(value, null, 2);
+function canonical(value) {
+  return JSON.stringify(
+    value,
+    (_, v) => v && typeof v === "object" && !Array.isArray(v) ? Object.fromEntries(
+      Object.entries(v).sort(
+        ([a], [b]) => a.localeCompare(b)
+      )
+    ) : v
+  );
+}
+function parseResource(text, resourceType) {
+  try {
+    const value = JSON.parse(text);
+    return value.resourceType === resourceType ? { value } : { error: `Not a ${resourceType}` };
+  } catch (e) {
+    return { error: `Invalid JSON: ${e.message}` };
+  }
+}
+function read(questionnaire, version) {
+  const { model, notConverted } = fromFhirQuestionnaire(questionnaire, {
+    version
+  });
+  return { questionnaire, model, notConverted, version };
+}
+function NotConvertedBadge({ items }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    SimpleTooltip,
+    {
+      side: "bottom",
+      label: /* @__PURE__ */ jsx("ul", { className: "text-xs space-y-1 max-w-sm", children: items.map((n) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: n.linkId || "(root)" }),
+        " --",
+        " ",
+        n.what
+      ] }, `${n.linkId}:${n.what}`)) }),
+      children: /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1 cursor-default", children: [
+        /* @__PURE__ */ jsx(Info, { className: "size-3" }),
+        items.length,
+        " kept, not working as in FHIR"
+      ] })
+    }
+  );
+}
+function RoundTripBadge({ same }) {
+  return same ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1", children: [
+    /* @__PURE__ */ jsx(Check, { className: "size-3" }),
+    "Questionnaire written back unchanged"
+  ] }) : /* @__PURE__ */ jsxs(Badge, { variant: "destructive", className: "gap-1", children: [
+    /* @__PURE__ */ jsx(TriangleAlert, { className: "size-3" }),
+    "Questionnaire written back changed"
+  ] });
+}
+function PaneAction(props) {
+  if (!props.out)
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: "Read into form",
+        className: "ml-auto shrink-0",
+        onClick: props.onRead,
+        children: /* @__PURE__ */ jsx(ArrowRight, {})
+      }
+    );
+  if (props.resource !== "response" || !props.submitted) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "sm",
+      variant: "outline",
+      className: "ml-auto shrink-0",
+      onClick: props.onUseSubmitted,
+      children: "Edit as input"
+    }
+  );
+}
+function FhirPane(props) {
+  const { resource, direction } = props;
+  const out = direction === "out";
+  const writtenValue = props.written[resource];
+  return /* @__PURE__ */ jsxs(Card, { className: "border shadow-sm p-4 min-h-0 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        ViewSwitch,
+        {
+          className: "shrink-0",
+          label: "Resource",
+          value: resource,
+          onChange: props.onResource,
+          options: [
+            { value: "questionnaire", label: "Questionnaire" },
+            { value: "response", label: "Response" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ViewSwitch,
+        {
+          className: "shrink-0",
+          label: "Direction",
+          value: direction,
+          onChange: props.onDirection,
+          options: [
+            { value: "in", label: "Into form" },
+            { value: "out", label: "From form" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate min-w-0", children: out ? "written by the form -- read only" : "edit it, then read it into the form" }),
+      /* @__PURE__ */ jsx(
+        PaneAction,
+        {
+          resource,
+          out,
+          submitted: writtenValue !== null,
+          onRead: props.onRead[resource],
+          onUseSubmitted: props.onUseSubmitted
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative", children: out && writtenValue === null ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Fill the form and submit it: the response appears here." }) : /* @__PURE__ */ jsx(
+      CodeEditor,
+      {
+        value: out ? pretty(writtenValue) : props.texts[resource],
+        language: "json",
+        readOnly: out,
+        onChange: out ? void 0 : props.onEdit[resource],
+        fillContainer: true
+      },
+      `${resource}:${direction}`
+    ) })
+  ] });
+}
+function FormPane(props) {
+  const [view, setView] = useState("form");
+  return /* @__PURE__ */ jsxs(Card, { className: "border shadow-sm p-4 min-h-0 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        ViewSwitch,
+        {
+          className: "shrink-0",
+          label: "View",
+          value: view,
+          onChange: setView,
+          options: [
+            { value: "form", label: "Form" },
+            { value: "schema", label: "Schema" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate min-w-0", children: view === "form" ? "fill it, then submit it as a response" : "the schema and uiSchema it was read as" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative overflow-auto", children: view === "form" ? /* @__PURE__ */ jsx(
+      JsonSchemaFormRenderer,
+      {
+        schema: props.model.schema,
+        uiSchema: props.model.uiSchema,
+        data: props.answers,
+        onChange: props.onAnswers,
+        onUpdate: props.onSubmit,
+        showActions: true,
+        showCancel: false,
+        allowPristineSave: true,
+        saveLabel: "Submit",
+        showExtraProperties: false
+      },
+      props.formKey
+    ) : /* @__PURE__ */ jsx(
+      CodeEditor,
+      {
+        value: pretty(props.model),
+        language: "json",
+        readOnly: true,
+        fillContainer: true
+      }
+    ) })
+  ] });
+}
+function PlayFhirQuestionnaire() {
+  const [questionnaireText, setQuestionnaireText] = useState(
+    () => pretty(SAMPLE_QUESTIONNAIRE)
+  );
+  const [responseText, setResponseText] = useState(
+    () => pretty(SAMPLE_RESPONSE)
+  );
+  const [current, setCurrent] = useState(
+    () => read(SAMPLE_QUESTIONNAIRE, "R4")
+  );
+  const [answers, setAnswers] = useState({});
+  const [formKey, setFormKey] = useState(0);
+  const [submitted, setSubmitted] = useState(
+    null
+  );
+  const [responseNotConverted, setResponseNotConverted] = useState([]);
+  const [responseElements, setResponseElements] = useState();
+  const [error, setError] = useState(null);
+  const [resource, setResource] = useState("questionnaire");
+  const [direction, setDirection] = useState("in");
+  const written = useMemo(
+    () => toFhirQuestionnaire(current.model, { version: current.version }),
+    [current.model, current.version]
+  );
+  const same = canonical(written.resource) === canonical(current.questionnaire);
+  const replaceAnswers = (next) => {
+    setAnswers(next);
+    setFormKey((k) => k + 1);
+  };
+  const readQuestionnaire = (version = current.version) => {
+    const parsed = parseResource(
+      questionnaireText,
+      "Questionnaire"
+    );
+    if ("error" in parsed) return setError(parsed.error);
+    setError(null);
+    setCurrent(read(parsed.value, version));
+    setSubmitted(null);
+    setResponseNotConverted([]);
+    setResponseElements(void 0);
+    replaceAnswers({});
+  };
+  const readResponse = () => {
+    const parsed = parseResource(
+      responseText,
+      "QuestionnaireResponse"
+    );
+    if ("error" in parsed) return setError(parsed.error);
+    setError(null);
+    const { data, elements, notConverted } = fromFhirQuestionnaireResponse(
+      current.model,
+      parsed.value,
+      { version: current.version }
+    );
+    setResponseNotConverted(notConverted);
+    setResponseElements(elements);
+    replaceAnswers(data);
+  };
+  const submit = (data) => {
+    setSubmitted(
+      toFhirQuestionnaireResponse(current.model, data, {
+        version: current.version,
+        elements: responseElements
+      })
+    );
+    setResource("response");
+    setDirection("out");
+  };
+  const loadSample = () => {
+    setQuestionnaireText(pretty(SAMPLE_QUESTIONNAIRE));
+    setResponseText(pretty(SAMPLE_RESPONSE));
+    setCurrent(read(SAMPLE_QUESTIONNAIRE, current.version));
+    setSubmitted(null);
+    setResponseNotConverted([]);
+    setResponseElements(void 0);
+    setError(null);
+    replaceAnswers({});
+    setResource("questionnaire");
+    setDirection("in");
+  };
+  const useSubmittedAsInput = () => {
+    if (!submitted) return;
+    setResponseText(pretty(submitted));
+    setDirection("in");
+  };
+  return /* @__PURE__ */ jsx(TerminologyProvider, { service: PLAYGROUND_TERMINOLOGY, children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-3 h-[calc(100vh-8rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "FHIR Questionnaire" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+        "Read a FHIR Questionnaire -- R4 or R5 -- as a questionnaire on JSON Schema, fill its form, submit it as a QuestionnaireResponse -- and read a response back into the form. What JSON Schema has no word for travels in ",
+        /* @__PURE__ */ jsx("code", { children: "x-fhir-*" }),
+        " annotations, so the questionnaire is written back as it was read."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: loadSample, children: "Sample" }),
+      /* @__PURE__ */ jsx(
+        ViewSwitch,
+        {
+          label: "FHIR version",
+          value: current.version,
+          onChange: (v) => readQuestionnaire(v),
+          options: [
+            { value: "R4", label: "R4" },
+            { value: "R5", label: "R5" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [
+        error && /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: error }),
+        /* @__PURE__ */ jsx(RoundTripBadge, { same }),
+        /* @__PURE__ */ jsx(
+          NotConvertedBadge,
+          {
+            items: [...current.notConverted, ...responseNotConverted]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        FhirPane,
+        {
+          resource,
+          direction,
+          onResource: setResource,
+          onDirection: setDirection,
+          texts: {
+            questionnaire: questionnaireText,
+            response: responseText
+          },
+          onEdit: {
+            questionnaire: setQuestionnaireText,
+            response: setResponseText
+          },
+          written: { questionnaire: written.resource, response: submitted },
+          onRead: {
+            questionnaire: () => readQuestionnaire(),
+            response: readResponse
+          },
+          onUseSubmitted: useSubmittedAsInput
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormPane,
+        {
+          model: current.model,
+          formKey,
+          answers,
+          onAnswers: setAnswers,
+          onSubmit: submit
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export {
+  PlayFhirQuestionnaire
+};
+//# sourceMappingURL=chunk-OUL3DN2E.js.map

package/dist/chunk-OUL3DN2E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFhirQuestionnaire.tsx","../src/pages/fhir/samples.ts"],"sourcesContent":["/**\n * FHIR Questionnaire -- end to end: read a FHIR Questionnaire (R4 or R5) as a\n * questionnaire on JSON Schema, fill its form, submit it as a\n * QuestionnaireResponse, and read a response back into the form. Two panes:\n * the FHIR JSON (into the form, editable and read by its pane's action; from\n * the form, generated) and the form.\n */\n\nimport { useMemo, useState } from \"react\";\nimport type { DesignerModel } from \"@petrarca/sonnet-schema-designer/questionnaire\";\nimport {\n  fromFhirQuestionnaire,\n  fromFhirQuestionnaireResponse,\n  toFhirQuestionnaire,\n  toFhirQuestionnaireResponse,\n  type NotConverted,\n  type ResponseElements,\n} from \"@petrarca/sonnet-fhir/questionnaire\";\nimport type * as R4 from \"@petrarca/sonnet-fhir/R4\";\nimport type { FhirVersion } from \"@petrarca/sonnet-fhir\";\nimport { JsonSchemaFormRenderer } from \"@petrarca/sonnet-forms\";\nimport {\n  Badge,\n  Button,\n  Card,\n  IconButton,\n  SimpleTooltip,\n  ViewSwitch,\n} from \"@petrarca/sonnet-ui\";\nimport { CodeEditor } from \"@petrarca/sonnet-ui/code-editor\";\nimport { ArrowRight, Check, Info, TriangleAlert } from \"lucide-react\";\nimport { SAMPLE_QUESTIONNAIRE, SAMPLE_RESPONSE } from \"./fhir/samples\";\nimport { TerminologyProvider } from \"@petrarca/sonnet-core/terminology\";\nimport { PLAYGROUND_TERMINOLOGY } from \"./codedValues/lists\";\n\ntype Answers = Record<string, unknown>;\ntype Resource = \"questionnaire\" | \"response\";\ntype Direction = \"in\" | \"out\";\n\nconst pretty = (value: unknown) => JSON.stringify(value, null, 2);\n\n// JSON with its keys sorted: two resources are the same when these are equal.\nfunction canonical(value: unknown): string {\n  return JSON.stringify(value, (_, v: unknown) =>\n    v && typeof v === \"object\" && !Array.isArray(v)\n      ? Object.fromEntries(\n          Object.entries(v as Record<string, unknown>).sort(([a], [b]) =>\n            a.localeCompare(b),\n          ),\n        )\n      : v,\n  );\n}\n\n// Parse a FHIR resource of a type; the error, in words, when it is not one.\nfunction parseResource<T>(\n  text: string,\n  resourceType: string,\n): { value: T } | { error: string } {\n  try {\n    const value = JSON.parse(text) as { resourceType?: string };\n    return value.resourceType === resourceType\n      ? { value: value as T }\n      : { error: `Not a ${resourceType}` };\n  } catch (e) {\n    return { error: `Invalid JSON: ${(e as Error).message}` };\n  }\n}\n\n// What was read: the questionnaire as it came, and as a schema.\ninterface Read {\n  questionnaire: R4.Questionnaire;\n  model: DesignerModel;\n  notConverted: NotConverted[];\n  /** The FHIR version it was read as -- and is written back and answered in. */\n  version: FhirVersion;\n}\n\nfunction read(questionnaire: R4.Questionnaire, version: FhirVersion): Read {\n  const { model, notConverted } = fromFhirQuestionnaire(questionnaire, {\n    version,\n  });\n  return { questionnaire, model, notConverted, version };\n}\n\nfunction NotConvertedBadge({ items }: { items: NotConverted[] }) {\n  if (items.length === 0) return null;\n  return (\n    <SimpleTooltip\n      side=\"bottom\"\n      label={\n        <ul className=\"text-xs space-y-1 max-w-sm\">\n          {items.map((n) => (\n            <li key={`${n.linkId}:${n.what}`}>\n              <span className=\"font-mono\">{n.linkId || \"(root)\"}</span> --{\" \"}\n              {n.what}\n            </li>\n          ))}\n        </ul>\n      }\n    >\n      <Badge variant=\"outline\" className=\"gap-1 cursor-default\">\n        <Info className=\"size-3\" />\n        {items.length} kept, not working as in FHIR\n      </Badge>\n    </SimpleTooltip>\n  );\n}\n\nfunction RoundTripBadge({ same }: { same: boolean }) {\n  return same ? (\n    <Badge variant=\"secondary\" className=\"gap-1\">\n      <Check className=\"size-3\" />\n      Questionnaire written back unchanged\n    </Badge>\n  ) : (\n    <Badge variant=\"destructive\" className=\"gap-1\">\n      <TriangleAlert className=\"size-3\" />\n      Questionnaire written back changed\n    </Badge>\n  );\n}\n\n// The pane's action: read what is shown into the form; or take a submitted response as the one to read.\nfunction PaneAction(props: {\n  resource: Resource;\n  out: boolean;\n  submitted: boolean;\n  onRead: () => void;\n  onUseSubmitted: () => void;\n}) {\n  if (!props.out)\n    return (\n      <IconButton\n        label=\"Read into form\"\n        className=\"ml-auto shrink-0\"\n        onClick={props.onRead}\n      >\n        <ArrowRight />\n      </IconButton>\n    );\n  if (props.resource !== \"response\" || !props.submitted) return null;\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"outline\"\n      className=\"ml-auto shrink-0\"\n      onClick={props.onUseSubmitted}\n    >\n      Edit as input\n    </Button>\n  );\n}\n\n// The left pane: one JSON editor, switched between the resources and the directions.\nfunction FhirPane(props: {\n  resource: Resource;\n  direction: Direction;\n  onResource: (r: Resource) => void;\n  onDirection: (d: Direction) => void;\n  texts: Record<Resource, string>;\n  onEdit: Record<Resource, (text: string) => void>;\n  written: Record<Resource, unknown>;\n  onRead: Record<Resource, () => void>;\n  onUseSubmitted: () => void;\n}) {\n  const { resource, direction } = props;\n  const out = direction === \"out\";\n  const writtenValue = props.written[resource];\n  return (\n    <Card className=\"border shadow-sm p-4 min-h-0 flex flex-col gap-3\">\n      <div className=\"flex items-center gap-2\">\n        <ViewSwitch<Resource>\n          className=\"shrink-0\"\n          label=\"Resource\"\n          value={resource}\n          onChange={props.onResource}\n          options={[\n            { value: \"questionnaire\", label: \"Questionnaire\" },\n            { value: \"response\", label: \"Response\" },\n          ]}\n        />\n        <ViewSwitch<Direction>\n          className=\"shrink-0\"\n          label=\"Direction\"\n          value={direction}\n          onChange={props.onDirection}\n          options={[\n            { value: \"in\", label: \"Into form\" },\n            { value: \"out\", label: \"From form\" },\n          ]}\n        />\n        <span className=\"text-xs text-muted-foreground truncate min-w-0\">\n          {out\n            ? \"written by the form -- read only\"\n            : \"edit it, then read it into the form\"}\n        </span>\n        <PaneAction\n          resource={resource}\n          out={out}\n          submitted={writtenValue !== null}\n          onRead={props.onRead[resource]}\n          onUseSubmitted={props.onUseSubmitted}\n        />\n      </div>\n      <div className=\"flex-1 min-h-0 relative\">\n        {out && writtenValue === null ? (\n          <p className=\"text-sm text-muted-foreground\">\n            Fill the form and submit it: the response appears here.\n          </p>\n        ) : (\n          <CodeEditor\n            key={`${resource}:${direction}`}\n            value={out ? pretty(writtenValue) : props.texts[resource]}\n            language=\"json\"\n            readOnly={out}\n            onChange={out ? undefined : props.onEdit[resource]}\n            fillContainer\n          />\n        )}\n      </div>\n    </Card>\n  );\n}\n\n// The right pane: the questionnaire's form, to fill and submit; or its schema.\nfunction FormPane(props: {\n  model: DesignerModel;\n  formKey: number;\n  answers: Answers;\n  onAnswers: (answers: Answers) => void;\n  onSubmit: (answers: Answers) => void;\n}) {\n  const [view, setView] = useState<\"form\" | \"schema\">(\"form\");\n  return (\n    <Card className=\"border shadow-sm p-4 min-h-0 flex flex-col gap-3\">\n      <div className=\"flex items-center gap-2\">\n        <ViewSwitch<\"form\" | \"schema\">\n          className=\"shrink-0\"\n          label=\"View\"\n          value={view}\n          onChange={setView}\n          options={[\n            { value: \"form\", label: \"Form\" },\n            { value: \"schema\", label: \"Schema\" },\n          ]}\n        />\n        <span className=\"text-xs text-muted-foreground truncate min-w-0\">\n          {view === \"form\"\n            ? \"fill it, then submit it as a response\"\n            : \"the schema and uiSchema it was read as\"}\n        </span>\n      </div>\n      <div className=\"flex-1 min-h-0 relative overflow-auto\">\n        {view === \"form\" ? (\n          <JsonSchemaFormRenderer\n            key={props.formKey}\n            schema={props.model.schema}\n            uiSchema={props.model.uiSchema}\n            data={props.answers}\n            onChange={props.onAnswers}\n            onUpdate={props.onSubmit}\n            showActions\n            showCancel={false}\n            allowPristineSave\n            saveLabel=\"Submit\"\n            showExtraProperties={false}\n          />\n        ) : (\n          <CodeEditor\n            value={pretty(props.model)}\n            language=\"json\"\n            readOnly\n            fillContainer\n          />\n        )}\n      </div>\n    </Card>\n  );\n}\n\nexport default function PlayFhirQuestionnaire() {\n  const [questionnaireText, setQuestionnaireText] = useState(() =>\n    pretty(SAMPLE_QUESTIONNAIRE),\n  );\n  const [responseText, setResponseText] = useState(() =>\n    pretty(SAMPLE_RESPONSE),\n  );\n  const [current, setCurrent] = useState<Read>(() =>\n    read(SAMPLE_QUESTIONNAIRE, \"R4\"),\n  );\n  const [answers, setAnswers] = useState<Answers>({});\n  // The form is remounted when its answers are replaced from outside.\n  const [formKey, setFormKey] = useState(0);\n  const [submitted, setSubmitted] = useState<R4.QuestionnaireResponse | null>(\n    null,\n  );\n  const [responseNotConverted, setResponseNotConverted] = useState<\n    NotConverted[]\n  >([]);\n  // The read response's own elements -- id, subject, author, authored -- written back on submit.\n  const [responseElements, setResponseElements] = useState<ResponseElements>();\n  const [error, setError] = useState<string | null>(null);\n  const [resource, setResource] = useState<Resource>(\"questionnaire\");\n  const [direction, setDirection] = useState<Direction>(\"in\");\n\n  const written = useMemo(\n    () => toFhirQuestionnaire(current.model, { version: current.version }),\n    [current.model, current.version],\n  );\n  const same = canonical(written.resource) === canonical(current.questionnaire);\n\n  const replaceAnswers = (next: Answers) => {\n    setAnswers(next);\n    setFormKey((k) => k + 1);\n  };\n\n  // Read the questionnaire's text into the form, as a FHIR version -- the current one by default.\n  const readQuestionnaire = (version: FhirVersion = current.version) => {\n    const parsed = parseResource<R4.Questionnaire>(\n      questionnaireText,\n      \"Questionnaire\",\n    );\n    if (\"error\" in parsed) return setError(parsed.error);\n    setError(null);\n    setCurrent(read(parsed.value, version));\n    setSubmitted(null);\n    setResponseNotConverted([]);\n    setResponseElements(undefined);\n    replaceAnswers({});\n  };\n\n  const readResponse = () => {\n    const parsed = parseResource<R4.QuestionnaireResponse>(\n      responseText,\n      \"QuestionnaireResponse\",\n    );\n    if (\"error\" in parsed) return setError(parsed.error);\n    setError(null);\n    const { data, elements, notConverted } = fromFhirQuestionnaireResponse(\n      current.model,\n      parsed.value,\n      { version: current.version },\n    );\n    setResponseNotConverted(notConverted);\n    setResponseElements(elements);\n    replaceAnswers(data);\n  };\n\n  const submit = (data: Answers) => {\n    setSubmitted(\n      toFhirQuestionnaireResponse(current.model, data, {\n        version: current.version,\n        elements: responseElements,\n      }),\n    );\n    setResource(\"response\");\n    setDirection(\"out\");\n  };\n\n  const loadSample = () => {\n    setQuestionnaireText(pretty(SAMPLE_QUESTIONNAIRE));\n    setResponseText(pretty(SAMPLE_RESPONSE));\n    setCurrent(read(SAMPLE_QUESTIONNAIRE, current.version));\n    setSubmitted(null);\n    setResponseNotConverted([]);\n    setResponseElements(undefined);\n    setError(null);\n    replaceAnswers({});\n    setResource(\"questionnaire\");\n    setDirection(\"in\");\n  };\n\n  // The submitted response as the response to read: the round trip of the answers.\n  const useSubmittedAsInput = () => {\n    if (!submitted) return;\n    setResponseText(pretty(submitted));\n    setDirection(\"in\");\n  };\n\n  return (\n    <TerminologyProvider service={PLAYGROUND_TERMINOLOGY}>\n      <div className=\"w-full flex flex-col gap-3 h-[calc(100vh-8rem)]\">\n        <div>\n          <h1>FHIR Questionnaire</h1>\n          <p className=\"text-sm text-muted-foreground mb-3\">\n            Read a FHIR Questionnaire -- R4 or R5 -- as a questionnaire on JSON\n            Schema, fill its form, submit it as a QuestionnaireResponse -- and\n            read a response back into the form. What JSON Schema has no word for\n            travels in <code>x-fhir-*</code> annotations, so the questionnaire\n            is written back as it was read.\n          </p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\" onClick={loadSample}>\n            Sample\n          </Button>\n          <ViewSwitch<FhirVersion>\n            label=\"FHIR version\"\n            value={current.version}\n            onChange={(v) => readQuestionnaire(v)}\n            options={[\n              { value: \"R4\", label: \"R4\" },\n              { value: \"R5\", label: \"R5\" },\n            ]}\n          />\n          <div className=\"flex flex-wrap items-center gap-2 ml-auto\">\n            {error && <Badge variant=\"destructive\">{error}</Badge>}\n            <RoundTripBadge same={same} />\n            <NotConvertedBadge\n              items={[...current.notConverted, ...responseNotConverted]}\n            />\n          </div>\n        </div>\n\n        <div className=\"flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          <FhirPane\n            resource={resource}\n            direction={direction}\n            onResource={setResource}\n            onDirection={setDirection}\n            texts={{\n              questionnaire: questionnaireText,\n              response: responseText,\n            }}\n            onEdit={{\n              questionnaire: setQuestionnaireText,\n              response: setResponseText,\n            }}\n            written={{ questionnaire: written.resource, response: submitted }}\n            onRead={{\n              questionnaire: () => readQuestionnaire(),\n              response: readResponse,\n            }}\n            onUseSubmitted={useSubmittedAsInput}\n          />\n\n          <FormPane\n            model={current.model}\n            formKey={formKey}\n            answers={answers}\n            onAnswers={setAnswers}\n            onSubmit={submit}\n          />\n        </div>\n      </div>\n    </TerminologyProvider>\n  );\n}\n","/**\n * A FHIR R4 Questionnaire as a FHIR server holds one -- numbered linkIds,\n * elements and extensions JSON Schema has no word for, a quantity with its\n * units -- and a response to it. Neutral sample data for Acme.\n */\n\nimport type * as R4 from \"@petrarca/sonnet-fhir/R4\";\n\nconst SYSTEM = \"https://example.org/fhir/CodeSystem/acme-contact\";\nconst unitOption = (code: string, display: string) => ({\n  url: \"http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption\",\n  valueCoding: { system: \"http://unitsofmeasure.org\", code, display },\n});\nconst coding = (code: string, display: string) => ({\n  valueCoding: { system: SYSTEM, code, display },\n});\n\nexport const SAMPLE_QUESTIONNAIRE: R4.Questionnaire = {\n  resourceType: \"Questionnaire\",\n  url: \"https://example.org/fhir/Questionnaire/acme-intake\",\n  version: \"1.2.0\",\n  name: \"AcmeIntake\",\n  status: \"active\",\n  title: \"Acme intake\",\n  description: \"Before the first visit.\",\n  item: [\n    {\n      linkId: \"1\",\n      text: \"About you\",\n      type: \"group\",\n      item: [\n        { linkId: \"1.intro\", type: \"display\", text: \"Tell us about yourself.\" },\n        {\n          linkId: \"1.1\",\n          prefix: \"a)\",\n          text: \"Name\",\n          type: \"string\",\n          required: true,\n          maxLength: 80,\n          extension: [\n            {\n              url: \"http://hl7.org/fhir/StructureDefinition/entryFormat\",\n              valueString: \"First and last name\",\n            },\n          ],\n        },\n        { linkId: \"1.2\", text: \"Do you smoke?\", type: \"boolean\" },\n        {\n          linkId: \"1.3\",\n          text: \"Packs a day\",\n          type: \"integer\",\n          enableWhen: [{ question: \"1.2\", operator: \"=\", answerBoolean: true }],\n        },\n        {\n          linkId: \"1.4\",\n          text: \"Contact by\",\n          type: \"choice\",\n          answerOption: [coding(\"email\", \"E-mail\"), coding(\"phone\", \"Phone\")],\n        },\n        {\n          linkId: \"1.5\",\n          text: \"Heard of us by\",\n          type: \"open-choice\",\n          answerOption: [\n            coding(\"web\", \"The web\"),\n            coding(\"friend\", \"A friend\"),\n          ],\n        },\n        {\n          linkId: \"1.6\",\n          text: \"Weight\",\n          type: \"quantity\",\n          extension: [unitOption(\"kg\", \"kg\"), unitOption(\"[lb_av]\", \"lb\")],\n        },\n      ],\n    },\n    {\n      linkId: \"2\",\n      text: \"Visits\",\n      type: \"group\",\n      repeats: true,\n      item: [\n        { linkId: \"2.1\", text: \"Date\", type: \"date\" },\n        {\n          linkId: \"2.2\",\n          text: \"Contact by\",\n          type: \"choice\",\n          answerOption: [coding(\"email\", \"E-mail\"), coding(\"phone\", \"Phone\")],\n          item: [{ linkId: \"2.2.1\", text: \"When to call\", type: \"string\" }],\n        },\n      ],\n    },\n    { linkId: \"3\", type: \"display\", text: \"Thank you.\" },\n  ],\n};\n\nexport const SAMPLE_RESPONSE: R4.QuestionnaireResponse = {\n  resourceType: \"QuestionnaireResponse\",\n  questionnaire: \"https://example.org/fhir/Questionnaire/acme-intake|1.2.0\",\n  status: \"completed\",\n  item: [\n    {\n      linkId: \"1\",\n      text: \"About you\",\n      item: [\n        { linkId: \"1.1\", text: \"Name\", answer: [{ valueString: \"Jane Roe\" }] },\n        {\n          linkId: \"1.2\",\n          text: \"Do you smoke?\",\n          answer: [{ valueBoolean: true }],\n        },\n        { linkId: \"1.3\", text: \"Packs a day\", answer: [{ valueInteger: 1 }] },\n        {\n          linkId: \"1.4\",\n          text: \"Contact by\",\n          answer: [\n            {\n              valueCoding: { system: SYSTEM, code: \"phone\", display: \"Phone\" },\n            },\n          ],\n        },\n        {\n          linkId: \"1.5\",\n          text: \"Heard of us by\",\n          answer: [{ valueString: \"a flyer\" }],\n        },\n        {\n          linkId: \"1.6\",\n          text: \"Weight\",\n          answer: [\n            {\n              valueQuantity: {\n                value: 72.5,\n                unit: \"kg\",\n                system: \"http://unitsofmeasure.org\",\n                code: \"kg\",\n              },\n            },\n          ],\n        },\n      ],\n    },\n    {\n      linkId: \"2\",\n      text: \"Visits\",\n      item: [\n        { linkId: \"2.1\", text: \"Date\", answer: [{ valueDate: \"2026-11-02\" }] },\n      ],\n    },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-QKFQI4VX.js

@@ -0,0 +1,83 @@
+// src/pages/DesignerControls.tsx
+import { FormSelect } from "@petrarca/sonnet-forms";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LabelledSelect({
+  id,
+  label,
+  choices,
+  value,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "shrink-0 text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
+      FormSelect,
+      {
+        id,
+        name: id,
+        value,
+        options: Object.keys(choices).map((k) => ({
+          value: k,
+          label: choices[k].label
+        })),
+        onChange: (v) => v && onChange(v),
+        clearable: false,
+        disabled
+      }
+    ) })
+  ] });
+}
+function DesignerControls({
+  examples,
+  example,
+  onExample,
+  exampleLocked,
+  profiles,
+  profile,
+  onProfile,
+  right
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      exampleLocked ? /* @__PURE__ */ jsx(
+        LabelledSelect,
+        {
+          id: "designer-example",
+          label: "Example",
+          choices: { locked: { label: exampleLocked } },
+          value: "locked",
+          onChange: () => {
+          },
+          disabled: true
+        }
+      ) : /* @__PURE__ */ jsx(
+        LabelledSelect,
+        {
+          id: "designer-example",
+          label: "Example",
+          choices: examples,
+          value: example,
+          onChange: onExample
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LabelledSelect,
+        {
+          id: "capability-profile",
+          label: "Capability profile",
+          choices: profiles,
+          value: profile,
+          onChange: onProfile
+        }
+      ),
+      right && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: right })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: profiles[profile].description })
+  ] });
+}
+
+export {
+  DesignerControls
+};
+//# sourceMappingURL=chunk-QKFQI4VX.js.map

package/dist/chunk-QKFQI4VX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/DesignerControls.tsx"],"sourcesContent":["/**\n * The controls of a designer page: the example to work on and the capability\n * profile to work with -- two separate choices -- the profile's description,\n * and whatever the page adds on the right.\n */\n\nimport type React from \"react\";\nimport { FormSelect } from \"@petrarca/sonnet-forms\";\n\ninterface Choice {\n  label: string;\n}\n\nfunction LabelledSelect<K extends string>({\n  id,\n  label,\n  choices,\n  value,\n  onChange,\n  disabled,\n}: {\n  id: string;\n  label: string;\n  choices: Record<K, Choice>;\n  value: K;\n  onChange: (key: K) => void;\n  disabled?: boolean;\n}): React.ReactElement {\n  return (\n    <>\n      <label htmlFor={id} className=\"shrink-0 text-sm font-medium\">\n        {label}\n      </label>\n      <div className=\"w-64\">\n        <FormSelect\n          id={id}\n          name={id}\n          value={value}\n          options={(Object.keys(choices) as K[]).map((k) => ({\n            value: k,\n            label: choices[k].label,\n          }))}\n          onChange={(v) => v && onChange(v as K)}\n          clearable={false}\n          disabled={disabled}\n        />\n      </div>\n    </>\n  );\n}\n\nexport function DesignerControls<E extends string, P extends string>({\n  examples,\n  example,\n  onExample,\n  exampleLocked,\n  profiles,\n  profile,\n  onProfile,\n  right,\n}: {\n  examples: Record<E, Choice>;\n  example: E;\n  onExample: (key: E) => void;\n  /** The schema the profile brings instead of an example: named, the select disabled. */\n  exampleLocked?: string;\n  profiles: Record<P, Choice & { description: string }>;\n  profile: P;\n  onProfile: (key: P) => void;\n  right?: React.ReactNode;\n}): React.ReactElement {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <div className=\"flex items-center gap-3\">\n        {exampleLocked ? (\n          <LabelledSelect\n            id=\"designer-example\"\n            label=\"Example\"\n            choices={{ locked: { label: exampleLocked } }}\n            value=\"locked\"\n            onChange={() => {}}\n            disabled\n          />\n        ) : (\n          <LabelledSelect\n            id=\"designer-example\"\n            label=\"Example\"\n            choices={examples}\n            value={example}\n            onChange={onExample}\n          />\n        )}\n        <LabelledSelect\n          id=\"capability-profile\"\n          label=\"Capability profile\"\n          choices={profiles}\n          value={profile}\n          onChange={onProfile}\n        />\n        {right && <div className=\"ml-auto\">{right}</div>}\n      </div>\n      <p className=\"text-sm text-muted-foreground\">\n        {profiles[profile].description}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAOA,SAAS,kBAAkB;AAsBvB,mBACE,KADF;AAhBJ,SAAS,eAAiC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOuB;AACrB,SACE,iCACE;AAAA,wBAAC,WAAM,SAAS,IAAI,WAAU,gCAC3B,iBACH;AAAA,IACA,oBAAC,SAAI,WAAU,QACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,SAAU,OAAO,KAAK,OAAO,EAAU,IAAI,CAAC,OAAO;AAAA,UACjD,OAAO;AAAA,UACP,OAAO,QAAQ,CAAC,EAAE;AAAA,QACpB,EAAE;AAAA,QACF,UAAU,CAAC,MAAM,KAAK,SAAS,CAAM;AAAA,QACrC,WAAW;AAAA,QACX;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,iBAAqD;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUuB;AACrB,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,2BACZ;AAAA,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,EAAE,QAAQ,EAAE,OAAO,cAAc,EAAE;AAAA,UAC5C,OAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAAC;AAAA,UACjB,UAAQ;AAAA;AAAA,MACV,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MACC,SAAS,oBAAC,SAAI,WAAU,WAAW,iBAAM;AAAA,OAC5C;AAAA,IACA,oBAAC,OAAE,WAAU,iCACV,mBAAS,OAAO,EAAE,aACrB;AAAA,KACF;AAEJ;","names":[]}