@gxp-dev/app-ui 0.1.6

package/dist/experience/pages/form/FormPage.vue.js

@@ -0,0 +1,175 @@
+import { defineComponent as V, ref as S, computed as f, openBlock as t, createElementBlock as a, normalizeClass as $, unref as B, renderSlot as g, toDisplayString as r, createCommentVNode as u, createElementVNode as i, Fragment as c, renderList as y, withDirectives as v, vModelCheckbox as C, createTextVNode as x, vModelSelect as U, vModelRadio as q } from "vue";
+import { cn as L } from "../../../lib/utils.js";
+const j = {
+  key: 0,
+  class: "text-2xl font-bold text-foreground"
+}, I = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+}, N = {
+  class: "flex-1 space-y-4 overflow-y-auto",
+  "data-testid": "form-fields"
+}, F = {
+  key: 0,
+  class: "pt-2"
+}, M = { class: "text-lg font-semibold text-foreground" }, R = {
+  key: 1,
+  class: "flex items-center gap-2 text-sm text-foreground"
+}, z = ["onUpdate:modelValue", "data-testid"], D = {
+  key: 0,
+  class: "text-destructive"
+}, E = {
+  key: 2,
+  class: "space-y-1"
+}, A = {
+  key: 0,
+  class: "text-sm font-medium text-foreground"
+}, O = {
+  key: 0,
+  class: "text-destructive"
+}, P = ["value", "type", "placeholder", "data-testid", "onInput"], T = ["value", "placeholder", "data-testid", "onInput"], G = ["onUpdate:modelValue", "data-testid"], H = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, J = ["value"], K = {
+  key: 4,
+  class: "space-y-1"
+}, Q = ["onUpdate:modelValue", "value", "name", "data-testid"], W = { class: "flex justify-between gap-3" }, X = { key: 1 }, Y = ["disabled"], ae = /* @__PURE__ */ V({
+  __name: "FormPage",
+  props: {
+    title: { type: String, default: void 0 },
+    subtitle: { type: String, default: void 0 },
+    fields: { type: Array, default: () => [] },
+    submitLabel: { type: String, default: "Submit" },
+    backLabel: { type: String, default: "Back" },
+    showBack: { type: Boolean, default: !0 },
+    class: { type: String, default: void 0 }
+  },
+  emits: ["next", "back", "exit"],
+  setup(d, { emit: k }) {
+    const m = d, _ = k, l = S((() => {
+      const s = {};
+      for (const o of m.fields)
+        o.defaultValue !== void 0 ? s[o.name] = o.defaultValue : o.type === "checkbox" ? s[o.name] = !1 : s[o.name] = "";
+      return s;
+    })()), p = f(() => m.fields.filter((s) => !s.when || s.when(l.value))), b = f(() => p.value.some((s) => {
+      if (!s.required || s.type === "heading") return !1;
+      const o = l.value[s.name];
+      return typeof o == "boolean" ? !o : typeof o == "string" ? o.trim() === "" : o == null;
+    })), h = () => {
+      if (b.value) return;
+      const s = new Set(p.value.map((e) => e.name)), o = {};
+      for (const [e, n] of Object.entries(l.value))
+        s.has(e) && (o[e] = n);
+      _("next", o);
+    };
+    return (s, o) => (t(), a("section", {
+      class: $(B(L)(
+        "experience-page experience-page--form flex h-full w-full flex-col gap-4 p-6",
+        m.class
+      )),
+      "data-testid": "form-page"
+    }, [
+      g(s.$slots, "header", {}, () => [
+        d.title ? (t(), a("h1", j, r(d.title), 1)) : u("", !0),
+        d.subtitle ? (t(), a("p", I, r(d.subtitle), 1)) : u("", !0)
+      ]),
+      i("div", N, [
+        (t(!0), a(c, null, y(p.value, (e) => (t(), a(c, {
+          key: e.name
+        }, [
+          e.type === "heading" ? (t(), a("div", F, [
+            i("h2", M, r(e.label), 1)
+          ])) : e.type === "checkbox" ? (t(), a("label", R, [
+            v(i("input", {
+              "onUpdate:modelValue": (n) => l.value[e.name] = n,
+              type: "checkbox",
+              class: "h-4 w-4 rounded border-border",
+              "data-testid": `form-field-${e.name}`
+            }, null, 8, z), [
+              [C, l.value[e.name]]
+            ]),
+            x(" " + r(e.label) + " ", 1),
+            e.required ? (t(), a("span", D, "*")) : u("", !0)
+          ])) : (t(), a("div", E, [
+            e.label ? (t(), a("label", A, [
+              x(r(e.label) + " ", 1),
+              e.required ? (t(), a("span", O, "*")) : u("", !0)
+            ])) : u("", !0),
+            e.type === "text" || e.type === "email" ? (t(), a("input", {
+              key: 1,
+              value: l.value[e.name],
+              type: e.type,
+              placeholder: e.placeholder,
+              class: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground",
+              "data-testid": `form-field-${e.name}`,
+              onInput: (n) => l.value[e.name] = n.target.value
+            }, null, 40, P)) : e.type === "textarea" ? (t(), a("textarea", {
+              key: 2,
+              value: l.value[e.name],
+              placeholder: e.placeholder,
+              rows: "3",
+              class: "w-full resize-none rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground",
+              "data-testid": `form-field-${e.name}`,
+              onInput: (n) => l.value[e.name] = n.target.value
+            }, null, 40, T)) : e.type === "select" ? v((t(), a("select", {
+              key: 3,
+              "onUpdate:modelValue": (n) => l.value[e.name] = n,
+              class: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground",
+              "data-testid": `form-field-${e.name}`
+            }, [
+              e.placeholder ? (t(), a("option", H, r(e.placeholder), 1)) : u("", !0),
+              (t(!0), a(c, null, y(e.options, (n) => (t(), a("option", {
+                key: n.value,
+                value: n.value
+              }, r(n.label), 9, J))), 128))
+            ], 8, G)), [
+              [U, l.value[e.name]]
+            ]) : e.type === "radio" ? (t(), a("div", K, [
+              (t(!0), a(c, null, y(e.options, (n) => (t(), a("label", {
+                key: n.value,
+                class: "flex items-center gap-2 text-sm text-foreground"
+              }, [
+                v(i("input", {
+                  "onUpdate:modelValue": (w) => l.value[e.name] = w,
+                  type: "radio",
+                  value: n.value,
+                  name: e.name,
+                  "data-testid": `form-field-${e.name}-${n.value}`
+                }, null, 8, Q), [
+                  [q, l.value[e.name]]
+                ]),
+                x(" " + r(n.label), 1)
+              ]))), 128))
+            ])) : u("", !0)
+          ]))
+        ], 64))), 128))
+      ]),
+      g(s.$slots, "actions", {
+        submit: h,
+        back: () => s.$emit("back"),
+        missingRequired: b.value
+      }, () => [
+        i("div", W, [
+          d.showBack ? (t(), a("button", {
+            key: 0,
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80",
+            "data-testid": "form-back",
+            onClick: o[0] || (o[0] = (e) => s.$emit("back"))
+          }, r(d.backLabel), 1)) : (t(), a("span", X)),
+          i("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none",
+            disabled: b.value,
+            "data-testid": "form-submit",
+            onClick: h
+          }, r(d.submitLabel), 9, Y)
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  ae as default
+};

package/dist/experience/pages/form/FormPage.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FormPage.vue.js";
+export {
+  f as default
+};

package/dist/experience/pages/form/index.js

@@ -0,0 +1,8 @@
+import e from "./FormPage.vue.js";
+import { withExperienceDefaults as r } from "../../withDefaults.js";
+const t = r(e, {
+  resultKey: "formValues"
+});
+export {
+  t as FormPage
+};

package/dist/experience/pages/instructions/InstructionsPage.vue.js

@@ -0,0 +1,89 @@
+import { defineComponent as f, computed as y, openBlock as n, createElementBlock as o, normalizeClass as p, unref as g, renderSlot as a, createElementVNode as l, toDisplayString as r, createCommentVNode as d } from "vue";
+import { cn as b } from "../../../lib/utils.js";
+const k = { class: "text-3xl font-bold tracking-tight text-foreground" }, x = { class: "flex flex-1 flex-col gap-6 overflow-y-auto" }, h = {
+  key: 0,
+  class: "relative w-full overflow-hidden rounded-lg bg-muted",
+  "data-testid": "instructions-media"
+}, v = ["src"], w = ["src"], $ = ["innerHTML"], S = { class: "flex justify-between gap-3" }, T = { key: 1 }, L = /* @__PURE__ */ f({
+  __name: "InstructionsPage",
+  props: {
+    title: { default: "How it works" },
+    html: {},
+    mediaSrc: {},
+    mediaType: {},
+    ctaText: { default: "Continue" },
+    backLabel: { default: "Back" },
+    showBack: { type: Boolean, default: !0 },
+    class: {}
+  },
+  emits: ["next", "back", "exit"],
+  setup(e) {
+    const i = e, c = [".mp4", ".webm", ".ogg", ".mov"], m = y(() => {
+      if (!i.mediaSrc) return null;
+      if (i.mediaType) return i.mediaType;
+      const t = i.mediaSrc.toLowerCase();
+      return c.some((s) => t.includes(s)) ? "video" : "image";
+    });
+    return (t, s) => (n(), o("section", {
+      class: p(g(b)(
+        "experience-page experience-page--instructions flex h-full w-full flex-col gap-6 p-8",
+        i.class
+      )),
+      "data-testid": "instructions-page"
+    }, [
+      a(t.$slots, "header", {}, () => [
+        l("h1", k, r(e.title), 1)
+      ]),
+      l("div", x, [
+        a(t.$slots, "media", {}, () => [
+          e.mediaSrc ? (n(), o("div", h, [
+            m.value === "video" ? (n(), o("video", {
+              key: 0,
+              src: e.mediaSrc,
+              class: "w-full",
+              autoplay: "",
+              muted: "",
+              loop: "",
+              playsinline: ""
+            }, null, 8, v)) : (n(), o("img", {
+              key: 1,
+              src: e.mediaSrc,
+              class: "w-full",
+              alt: ""
+            }, null, 8, w))
+          ])) : d("", !0)
+        ]),
+        a(t.$slots, "body", {}, () => [
+          e.html ? (n(), o("div", {
+            key: 0,
+            class: "prose prose-sm max-w-none",
+            innerHTML: e.html
+          }, null, 8, $)) : d("", !0)
+        ])
+      ]),
+      a(t.$slots, "actions", {
+        next: () => t.$emit("next"),
+        back: () => t.$emit("back")
+      }, () => [
+        l("div", S, [
+          e.showBack ? (n(), o("button", {
+            key: 0,
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80",
+            "data-testid": "instructions-back",
+            onClick: s[0] || (s[0] = (u) => t.$emit("back"))
+          }, r(e.backLabel), 1)) : (n(), o("span", T)),
+          l("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+            "data-testid": "instructions-cta",
+            onClick: s[1] || (s[1] = (u) => t.$emit("next"))
+          }, r(e.ctaText), 1)
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  L as default
+};

package/dist/experience/pages/instructions/InstructionsPage.vue2.js

@@ -0,0 +1,4 @@
+import f from "./InstructionsPage.vue.js";
+export {
+  f as default
+};

package/dist/experience/pages/instructions/index.js

@@ -0,0 +1,6 @@
+import t from "./InstructionsPage.vue.js";
+import { withExperienceDefaults as o } from "../../withDefaults.js";
+const i = o(t, {});
+export {
+  i as InstructionsPage
+};

package/dist/experience/pages/loading/LoadingPage.vue.js

@@ -0,0 +1,59 @@
+import { defineComponent as f, ref as g, onMounted as p, onBeforeUnmount as x, openBlock as y, createElementBlock as v, normalizeClass as b, unref as k, renderSlot as m, createElementVNode as u, toDisplayString as S } from "vue";
+import { cn as w } from "../../../lib/utils.js";
+const h = {
+  class: "text-center text-lg text-foreground",
+  "data-testid": "loading-message"
+}, P = /* @__PURE__ */ f({
+  __name: "LoadingPage",
+  props: {
+    messages: { type: Array, default: () => ["Working on it…"] },
+    messageInterval: { type: Number, default: 2.5 },
+    timeoutSeconds: { type: Number, default: 0 },
+    task: { type: Function, default: void 0 },
+    context: { type: Object, default: () => ({}) },
+    class: { type: String, default: void 0 }
+  },
+  emits: ["next", "error", "exit"],
+  setup(i, { emit: c }) {
+    const e = i, l = c, n = g(0);
+    let s, a;
+    return p(async () => {
+      if (e.messages.length > 1 && (s = setInterval(() => {
+        n.value = (n.value + 1) % e.messages.length;
+      }, e.messageInterval * 1e3)), !e.task) return;
+      let r = !1;
+      const o = e.timeoutSeconds > 0 ? new Promise((t, d) => {
+        a = setTimeout(() => {
+          r = !0, d(new Error("Loading task timed out"));
+        }, e.timeoutSeconds * 1e3);
+      }) : null;
+      try {
+        const t = await (o ? Promise.race([e.task(e.context), o]) : e.task(e.context));
+        r || l("next", t);
+      } catch (t) {
+        l("error", t instanceof Error ? t : new Error(String(t)));
+      }
+    }), x(() => {
+      s && clearInterval(s), a && clearTimeout(a);
+    }), (r, o) => (y(), v("section", {
+      class: b(k(w)(
+        "experience-page experience-page--loading flex h-full w-full flex-col items-center justify-center gap-6 p-8",
+        e.class
+      )),
+      "data-testid": "loading-page"
+    }, [
+      m(r.$slots, "body", {}, () => [
+        o[0] || (o[0] = u("div", {
+          class: "h-16 w-16 animate-spin rounded-full border-4 border-current border-r-transparent text-primary",
+          role: "status",
+          "aria-label": "Loading"
+        }, null, -1)),
+        u("p", h, S(i.messages[n.value]), 1)
+      ]),
+      m(r.$slots, "footer")
+    ], 2));
+  }
+});
+export {
+  P as default
+};

package/dist/experience/pages/loading/LoadingPage.vue2.js

@@ -0,0 +1,4 @@
+import f from "./LoadingPage.vue.js";
+export {
+  f as default
+};

package/dist/experience/pages/loading/index.js

@@ -0,0 +1,11 @@
+import e from "./LoadingPage.vue.js";
+import { withExperienceDefaults as o } from "../../withDefaults.js";
+const a = o(e, {
+  // The page's `task` prop already produces the result; the flow's action
+  // would double-handle it. So we explicitly disable the action binding.
+  action: !1,
+  resultKey: "loadingResult"
+});
+export {
+  a as LoadingPage
+};

package/dist/experience/pages/notepad/NotepadPage.vue.js

@@ -0,0 +1,149 @@
+import { defineComponent as A, ref as C, computed as L, openBlock as f, createElementBlock as p, normalizeClass as m, unref as k, renderSlot as h, createElementVNode as o, toDisplayString as w, normalizeStyle as v, withDirectives as D, vModelText as H, Fragment as N, renderList as P } from "vue";
+import { cn as $ } from "../../../lib/utils.js";
+const R = { class: "text-2xl font-bold text-foreground" }, V = ["placeholder"], F = { class: "flex items-center justify-between text-xs text-muted-foreground" }, O = { class: "flex flex-wrap items-center justify-center gap-3" }, U = { class: "flex gap-1" }, Y = ["data-testid", "aria-label", "onClick"], q = { class: "flex gap-1" }, G = ["data-testid", "aria-label", "onClick"], I = { class: "flex justify-end gap-3" }, J = ["disabled"], X = /* @__PURE__ */ A({
+  __name: "NotepadPage",
+  props: {
+    title: { type: String, default: "Leave a note" },
+    placeholder: { type: String, default: "Write something…" },
+    maxCharacters: { type: Number, default: 280 },
+    penColors: {
+      type: Array,
+      default: () => ["#1f2937", "#dc2626", "#1d4ed8", "#15803d"]
+    },
+    backgroundColors: {
+      type: Array,
+      default: () => ["#fef3c7", "#fee2e2", "#dbeafe", "#dcfce7"]
+    },
+    initialPenColor: { type: String, default: void 0 },
+    initialBackgroundColor: { type: String, default: void 0 },
+    /** Canvas resolution for the rendered blob. */
+    renderWidth: { type: Number, default: 1024 },
+    renderHeight: { type: Number, default: 1024 },
+    submitLabel: { type: String, default: "Done" },
+    class: { type: String, default: void 0 }
+  },
+  emits: ["next", "back", "exit"],
+  setup(l, { emit: _ }) {
+    const a = l, j = _, r = C(""), d = C(a.initialPenColor ?? a.penColors[0]), u = C(a.initialBackgroundColor ?? a.backgroundColors[0]), x = L(() => a.maxCharacters - r.value.length), y = L(() => x.value < 0), z = () => new Promise((n, c) => {
+      const e = document.createElement("canvas");
+      e.width = a.renderWidth, e.height = a.renderHeight;
+      const t = e.getContext("2d");
+      if (!t) {
+        c(new Error("Canvas context unavailable"));
+        return;
+      }
+      t.fillStyle = u.value, t.fillRect(0, 0, e.width, e.height), t.fillStyle = d.value, t.textAlign = "center", t.textBaseline = "middle";
+      const B = Math.max(36, Math.min(96, e.width / Math.max(r.value.length, 8)));
+      t.font = `bold ${B}px sans-serif`;
+      const M = r.value.split(/\s+/).filter(Boolean), b = [];
+      let i = "";
+      const T = e.width * 0.85;
+      for (const s of M) {
+        const g = i ? `${i} ${s}` : s;
+        t.measureText(g).width > T ? (i && b.push(i), i = s) : i = g;
+      }
+      i && b.push(i);
+      const E = B * 1.2, W = e.height / 2 - (b.length - 1) * E / 2;
+      b.forEach((s, g) => {
+        t.fillText(s, e.width / 2, W + g * E);
+      }), e.toBlob((s) => {
+        s ? n(s) : c(new Error("toBlob returned null"));
+      }, "image/png");
+    }), S = async () => {
+      if (!(!r.value.trim() || y.value))
+        try {
+          const n = await z();
+          j("next", { blob: n, caption: r.value });
+        } catch {
+        }
+    };
+    return (n, c) => (f(), p("section", {
+      class: m(k($)(
+        "experience-page experience-page--notepad flex h-full w-full flex-col gap-4 p-6",
+        a.class
+      )),
+      "data-testid": "notepad-page"
+    }, [
+      h(n.$slots, "header", {}, () => [
+        o("h1", R, w(l.title), 1)
+      ]),
+      o("div", {
+        class: "flex flex-1 items-center justify-center rounded-lg p-8 shadow-inner transition-colors",
+        style: v({ backgroundColor: u.value }),
+        "data-testid": "notepad-preview"
+      }, [
+        D(o("textarea", {
+          "onUpdate:modelValue": c[0] || (c[0] = (e) => r.value = e),
+          placeholder: l.placeholder,
+          style: v({ color: d.value }),
+          class: "h-full w-full resize-none bg-transparent text-center text-2xl font-semibold leading-snug outline-none placeholder:opacity-50",
+          "data-testid": "notepad-input"
+        }, null, 12, V), [
+          [H, r.value]
+        ])
+      ], 4),
+      o("div", F, [
+        h(n.$slots, "meta", { remaining: x.value }, () => [
+          o("span", {
+            class: m({ "text-destructive": y.value }),
+            "data-testid": "notepad-counter"
+          }, w(x.value) + " characters left ", 3)
+        ])
+      ]),
+      h(n.$slots, "toolbar", {
+        penColors: l.penColors,
+        backgroundColors: l.backgroundColors,
+        penColor: d.value,
+        backgroundColor: u.value
+      }, () => [
+        o("div", O, [
+          o("div", U, [
+            (f(!0), p(N, null, P(l.penColors, (e) => (f(), p("button", {
+              key: e,
+              type: "button",
+              class: m(k($)(
+                "h-7 w-7 rounded-full border-2",
+                d.value === e ? "border-foreground" : "border-border"
+              )),
+              style: v({ backgroundColor: e }),
+              "data-testid": `notepad-pen-${e}`,
+              "aria-label": `Pen color ${e}`,
+              onClick: (t) => d.value = e
+            }, null, 14, Y))), 128))
+          ]),
+          o("div", q, [
+            (f(!0), p(N, null, P(l.backgroundColors, (e) => (f(), p("button", {
+              key: e,
+              type: "button",
+              class: m(k($)(
+                "h-7 w-7 rounded border-2",
+                u.value === e ? "border-foreground" : "border-border"
+              )),
+              style: v({ backgroundColor: e }),
+              "data-testid": `notepad-bg-${e}`,
+              "aria-label": `Background ${e}`,
+              onClick: (t) => u.value = e
+            }, null, 14, G))), 128))
+          ])
+        ])
+      ]),
+      h(n.$slots, "actions", {
+        submit: S,
+        back: () => n.$emit("back")
+      }, () => [
+        o("div", I, [
+          o("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none",
+            disabled: !r.value.trim() || y.value,
+            "data-testid": "notepad-submit",
+            onClick: S
+          }, w(l.submitLabel), 9, J)
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  X as default
+};

package/dist/experience/pages/notepad/NotepadPage.vue2.js

@@ -0,0 +1,4 @@
+import f from "./NotepadPage.vue.js";
+export {
+  f as default
+};

package/dist/experience/pages/notepad/index.js

@@ -0,0 +1,8 @@
+import e from "./NotepadPage.vue.js";
+import { withExperienceDefaults as t } from "../../withDefaults.js";
+const i = t(e, {
+  resultKey: "note"
+});
+export {
+  i as NotepadPage
+};

package/dist/experience/pages/options/OptionsPage.vue.js

@@ -0,0 +1,77 @@
+import { defineComponent as p, openBlock as s, createElementBlock as n, normalizeClass as c, unref as u, renderSlot as m, createElementVNode as a, toDisplayString as l, createCommentVNode as r, Fragment as k, renderList as x } from "vue";
+import { cn as f } from "../../../lib/utils.js";
+const h = { class: "text-3xl font-bold text-foreground" }, v = {
+  key: 0,
+  class: "text-base text-muted-foreground"
+}, B = {
+  class: "grid flex-1 grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+  "data-testid": "options-grid"
+}, C = ["data-testid", "onClick"], S = ["src"], $ = { class: "text-base font-medium" }, w = {
+  key: 0,
+  class: "flex justify-start"
+}, E = /* @__PURE__ */ p({
+  __name: "OptionsPage",
+  props: {
+    title: { type: String, default: "Choose one" },
+    subtitle: { type: String, default: void 0 },
+    options: { type: Array, default: () => [] },
+    /** When true, also stash {key} on `next` instead of the full option. */
+    emitKeyOnly: { type: Boolean, default: !1 },
+    backLabel: { type: String, default: "Back" },
+    showBack: { type: Boolean, default: !0 },
+    class: { type: String, default: void 0 }
+  },
+  emits: ["next", "back", "exit"],
+  setup(e, { emit: y }) {
+    const i = e, g = y, b = (t) => {
+      g("next", i.emitKeyOnly ? t.key : t);
+    };
+    return (t, d) => (s(), n("section", {
+      class: c(u(f)(
+        "experience-page experience-page--options flex h-full w-full flex-col gap-6 p-8",
+        i.class
+      )),
+      "data-testid": "options-page"
+    }, [
+      m(t.$slots, "header", {}, () => [
+        a("h1", h, l(e.title), 1),
+        e.subtitle ? (s(), n("p", v, l(e.subtitle), 1)) : r("", !0)
+      ]),
+      a("div", B, [
+        (s(!0), n(k, null, x(e.options, (o) => (s(), n("button", {
+          key: o.key,
+          type: "button",
+          class: c(u(f)(
+            "group flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card p-6 text-center text-foreground shadow-sm transition-all",
+            "hover:border-primary hover:shadow-md"
+          )),
+          "data-testid": `options-option-${o.key}`,
+          onClick: (j) => b(o)
+        }, [
+          o.icon ? (s(), n("img", {
+            key: 0,
+            src: o.icon,
+            alt: "",
+            class: "h-12 w-12"
+          }, null, 8, S)) : r("", !0),
+          a("span", $, l(o.label), 1)
+        ], 10, C))), 128))
+      ]),
+      m(t.$slots, "actions", {
+        back: () => t.$emit("back")
+      }, () => [
+        e.showBack ? (s(), n("div", w, [
+          a("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80",
+            "data-testid": "options-back",
+            onClick: d[0] || (d[0] = (o) => t.$emit("back"))
+          }, l(e.backLabel), 1)
+        ])) : r("", !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  E as default
+};

package/dist/experience/pages/options/OptionsPage.vue2.js

@@ -0,0 +1,4 @@
+import f from "./OptionsPage.vue.js";
+export {
+  f as default
+};

package/dist/experience/pages/options/index.js

@@ -0,0 +1,8 @@
+import e from "./OptionsPage.vue.js";
+import { withExperienceDefaults as o } from "../../withDefaults.js";
+const r = o(e, {
+  resultKey: "choice"
+});
+export {
+  r as OptionsPage
+};