@stamprally/ui 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -5,567 +5,157 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/index.tsx
+var label = (dictionary, locale, key, fallback) => dictionary?.[locale]?.[key] ?? fallback;
+function DefaultCondition({
+  condition,
+  dictionary,
+  locale,
+  disabled,
+  onSubmit
+}) {
+  const [value, setValue] = react.useState("");
+  const submit = (event) => {
+    event.preventDefault();
+    onSubmit(
+      condition.type === "gps" ? { latitude: Number(value.split(",")[0]), longitude: Number(value.split(",")[1]) } : condition.type === "nfc" ? { tagId: value } : value
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+      label(dictionary, locale, "proof", "Proof"),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "aria-label": label(dictionary, locale, "proof", "Proof"),
+          value,
+          onChange: (event) => setValue(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled, children: condition.type === "gps" ? label(dictionary, locale, "checkLocation", "Check location") : label(dictionary, locale, "checkIn", "Check in") })
+  ] });
+}
 function RallyViewer({
-  config,
-  adapter,
+  config: providedConfig,
   client,
+  adapter,
   locale,
-  onSpotSelect
+  dictionary,
+  customConditionRenderers = {}
 }) {
-  const activeLocale = locale ?? "en";
-  const resolvedConfig = adapter?.config ?? config ?? client?.getConfig();
-  const renderConfig = resolvedConfig ?? {
-    id: "empty",
-    title: "",
-    spots: [],
-    rewards: []
-  };
-  const emptyState = {
-    rallyId: renderConfig.id,
-    records: [],
-    updatedAt: (/* @__PURE__ */ new Date(0)).toISOString()
-  };
-  const resolvedState = adapter?.state ?? client?.getState() ?? emptyState;
-  const [selectedSpotId, setSelectedSpotId] = react.useState(null);
-  const [proof, setProof] = react.useState("");
-  const [feedback, setFeedback] = react.useState(null);
-  const [, setClientRevision] = react.useState(0);
+  const config = providedConfig ?? client?.getConfig() ?? adapter?.config;
+  const [state, setState] = react.useState(() => client?.getState() ?? null);
+  const [busy, setBusy] = react.useState(null);
   react.useEffect(() => {
     if (client === void 0) return;
-    return client.subscribe(() => setClientRevision((revision) => revision + 1));
+    const unsubscribe = client.subscribe(setState);
+    void client.init().then(setState);
+    return unsubscribe;
   }, [client]);
-  const selectedSpot = renderConfig.spots.find((spot) => spot.id === selectedSpotId);
-  const checkIn = adapter?.onCheckIn ?? (client === void 0 ? void 0 : (spotId, value) => client.checkIn(spotId, value));
-  const claimReward = adapter?.onClaimReward ?? (client === void 0 ? void 0 : (rewardId, options) => client.claimReward(rewardId, options));
-  const claimed = new Set(resolvedState.records.map((record) => record.stampId));
-  const submit = async () => {
-    if (selectedSpot === void 0 || checkIn === void 0) return;
-    const result = await checkIn(selectedSpot.id, proof);
-    setFeedback(result.ok ? "Check-in completed." : result.error.code);
-    if (result.ok) {
-      setProof("");
-      setSelectedSpotId(null);
-    }
-  };
-  if (resolvedConfig === void 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Stamp rally viewer", className: "stamprally-viewer", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { children: core.resolveLocalizedText(renderConfig.title, activeLocale) }),
-      renderConfig.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(renderConfig.description, activeLocale) }),
-      adapter?.onSync !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void adapter.onSync?.(), children: "Sync" })
+  if (config === void 0) throw new Error("RallyViewer requires config, client, or adapter.");
+  const progress = react.useMemo(
+    () => core.calculateProgress(
+      state ?? { rallyId: config.id, userId: null, records: [], rewards: [], updatedAt: "" },
+      config
+    ),
+    [config, state]
+  );
+  const checkIn = adapter?.onCheckIn ?? (client === void 0 ? void 0 : (spotId, proof, options) => client.checkIn(spotId, proof, options));
+  const claim = adapter?.onClaimReward ?? (client === void 0 ? void 0 : (rewardId, options) => client.claimReward(rewardId, options));
+  const submit = react.useCallback(
+    (spotId, proof) => {
+      if (checkIn === void 0) return;
+      setBusy(spotId);
+      void checkIn(spotId, proof).finally(() => setBusy(null));
+    },
+    [checkIn]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": label(dictionary, locale, "viewer", "Stamp rally"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { children: core.resolveLocalizedText(config.title, locale) || config.id }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "progress",
+      {
+        "aria-label": label(dictionary, locale, "progress", "Progress"),
+        max: 100,
+        value: progress.percentage
+      }
+    ),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      progress.acquired,
+      "/",
+      progress.total
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": "Stamp rally spots", children: renderConfig.spots.map((spot, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-label": `${core.resolveLocalizedText(spot.name, activeLocale)}${claimed.has(spot.id) ? ", claimed" : ", available"}`,
-          onClick: () => {
-            onSpotSelect?.(spot.id);
-            setSelectedSpotId(spot.id);
-            setFeedback(null);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
-              "#",
-              String(index + 1).padStart(2, "0")
-            ] }),
-            " ",
-            core.resolveLocalizedText(spot.name, activeLocale)
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: spot.conditions[0]?.type ?? "custom" })
-    ] }, spot.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", children: feedback ?? `${claimed.size} / ${renderConfig.spots.length} claimed` }),
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Rewards", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Rewards" }),
-      renderConfig.rewards.map((reward) => {
-        const rewardState = resolvedState.rewards?.find((item) => item.rewardId === reward.id);
-        const available = rewardState?.status === "AVAILABLE";
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map(
+      (spot) => spot.conditions.map((condition) => {
+        const Renderer = customConditionRenderers[condition.type] ?? DefaultCondition;
         return /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: core.resolveLocalizedText(reward.title, activeLocale) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: rewardState?.status ?? "LOCKED" }),
-          claimReward !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: core.resolveLocalizedText(spot.name, locale) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Renderer,
             {
-              type: "button",
-              disabled: !available,
-              onClick: () => void claimReward(reward.id).then((result) => {
-                setFeedback(result.ok ? "Reward claimed." : result.error.code);
-              }),
-              children: "Claim reward"
+              spot,
+              condition,
+              locale,
+              ...dictionary === void 0 ? {} : { dictionary },
+              disabled: busy !== null,
+              onSubmit: (proof) => submit(spot.id, proof)
             }
           )
-        ] }, reward.id);
+        ] }, `${spot.id}-${condition.type}-${JSON.stringify(condition)}`);
       })
-    ] }),
-    selectedSpot !== void 0 && checkIn !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "rally-viewer-spot-title", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "rally-viewer-spot-title", children: core.resolveLocalizedText(selectedSpot.name, activeLocale) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(selectedSpot.description, activeLocale) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-        "Proof",
-        /* @__PURE__ */ jsxRuntime.jsx("input", { value: proof, onChange: (event) => setProof(event.target.value) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => void submit(),
-          disabled: claimed.has(selectedSpot.id),
-          children: "Check in"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setSelectedSpotId(null), children: "Close" })
-    ] })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": label(dictionary, locale, "rewards", "Rewards"), children: config.rewards.map((reward) => /* @__PURE__ */ jsxRuntime.jsx(
+      RewardButton,
+      {
+        reward,
+        state: state?.rewards.find((item) => item.rewardId === reward.id),
+        onClaim: claim
+      },
+      reward.id
+    )) })
   ] });
 }
-function useFocusTrap(active, onClose, closeDisabled = false) {
-  const containerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!active) return;
-    const container = containerRef.current;
-    if (container === null) return;
-    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    const focusable = () => Array.from(container.querySelectorAll(focusableSelector));
-    const first = focusable()[0];
-    first?.focus();
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        if (!closeDisabled) {
-          event.preventDefault();
-          onClose?.();
-        }
-        return;
-      }
-      if (event.key !== "Tab") return;
-      const elements = focusable();
-      if (elements.length === 0) {
-        event.preventDefault();
-        container.focus();
-        return;
-      }
-      const firstElement = elements[0];
-      const lastElement = elements[elements.length - 1];
-      if (event.shiftKey && document.activeElement === firstElement) {
-        event.preventDefault();
-        lastElement?.focus();
-      } else if (!event.shiftKey && document.activeElement === lastElement) {
-        event.preventDefault();
-        firstElement?.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [active, closeDisabled, onClose]);
-  return containerRef;
-}
-var FONT_STACKS = {
-  "system-ui": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-  serif: 'Georgia, "Times New Roman", "Yu Mincho", serif',
-  "rounded-sans": '"Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif',
-  monospace: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
-  handwritten: '"Segoe Print", "Bradley Hand", "Comic Sans MS", cursive'
-};
-function formatStampDate(value) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  const pad = (part) => String(part).padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-}
-function StampSlot({
-  stamp,
-  record,
-  isNext = false,
-  slotNumber = 1,
-  presentation = {},
-  isAnimating = false,
-  disabled = false,
-  slotShape = "rounded",
-  locale = "ja",
-  statusText,
-  onSelect
+function RewardButton({
+  reward,
+  state,
+  onClaim
 }) {
-  const status = record === void 0 ? isNext ? "available" : "locked" : "stamped";
-  const resolvedStatus = statusText ?? status;
-  const statusSeparator = statusText !== void 0 && locale === "ja" ? "\u3001" : ", ";
-  const name = core.resolveLocalizedText(stamp.name, locale);
-  const label = presentation.label ?? stamp.condition.type;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
-      disabled,
-      onClick: onSelect,
-      "aria-label": `#${String(slotNumber).padStart(2, "0")} ${name}${statusSeparator}${resolvedStatus}`,
-      "aria-disabled": disabled,
-      "data-status": status,
-      "data-shape": slotShape,
-      className: `stamp-slot stamp-slot--${status} stamp-slot--${presentation.ink ?? "vermilion"} stamp-slot--shape-${slotShape}${isAnimating ? " stamp-slot--animating" : ""}`,
-      style: { "--stamp-primary": "var(--stamprally-primary, #9e551e)" },
+      disabled: state?.status !== "AVAILABLE" || onClaim === void 0,
+      onClick: () => {
+        if (onClaim !== void 0) void onClaim(reward.id);
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stamp-slot__topline", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stamp-slot__number", children: [
-            "#",
-            String(slotNumber).padStart(2, "0")
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `stamp-slot__state stamp-slot__state--${status}`, children: resolvedStatus })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stamp-slot__watermark", "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stamp-slot__name", children: name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stamp-slot__condition", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
-          label
-        ] }),
-        record !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: `stamp-imprint ${isAnimating ? "stamp-press" : ""}`,
-            role: "img",
-            "aria-label": `Acquired at ${formatStampDate(record.acquiredAt)}`,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stamp-imprint__inner", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stamp-imprint__word", children: "STAMP" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stamp-imprint__date", children: formatStampDate(record.acquiredAt) })
-            ] })
-          }
-        )
+        core.resolveLocalizedText(reward.title, "en"),
+        " (",
+        state?.status ?? "LOCKED",
+        ")"
       ]
     }
   );
 }
 function StampSheet({
-  title,
   config,
-  state = null,
-  progress,
-  presentations = {},
-  animatedStampId = null,
-  disabled = false,
-  locale = "ja",
-  dictionary,
-  theme = config.theme ?? core.DEFAULT_SHEET_THEME,
-  onStampSelect,
-  adapter
-}) {
-  if ("spots" in config) {
-    if (adapter === void 0)
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        RallyViewer,
-        {
-          config,
-          locale,
-          ...onStampSelect === void 0 ? {} : { onSpotSelect: onStampSelect }
-        }
-      );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RallyViewer,
-      {
-        config,
-        adapter,
-        locale,
-        ...onStampSelect === void 0 ? {} : { onSpotSelect: onStampSelect }
-      }
-    );
-  }
-  const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);
-  const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);
-  const count = progress?.acquired ?? acquired.size;
-  const total = progress?.total ?? config.stamps.length;
-  const percentage = progress?.percentage ?? (total === 0 ? 0 : count / total * 100);
-  const style = {
-    "--stamp-primary": `var(--stamprally-primary-override, ${theme.primaryColor})`,
-    "--stamp-bg": `var(--stamprally-background-override, ${theme.backgroundColor ?? core.DEFAULT_SHEET_THEME.backgroundColor ?? "#ffffff"})`,
-    "--stamp-card-bg": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,
-    "--stamp-text": `var(--stamprally-text-override, ${theme.textColor})`,
-    "--stamp-grid-cols": String(theme.gridColumns),
-    "--stamp-grid-cols-mobile": String(Math.min(theme.gridColumns, 2)),
-    "--stamp-unclaimed-opacity": String(theme.unclaimedOpacity ?? 1),
-    "--stamp-font-family": FONT_STACKS[theme.fontFamily ?? "serif"],
-    ...theme.completedStampColor === void 0 ? {} : { "--stamp-completed-color": theme.completedStampColor },
-    "--stamprally-primary": `var(--stamprally-primary-override, ${theme.primaryColor})`,
-    "--stamprally-background": `var(--stamprally-background-override, ${theme.backgroundColor ?? "transparent"})`,
-    "--stamprally-card": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,
-    "--stamprally-text": `var(--stamprally-text-override, ${theme.textColor})`,
-    "--stamprally-columns": String(theme.gridColumns)
-  };
-  const messages = {
-    available: dictionary?.[locale]?.available ?? (locale === "en" ? "available" : "\u53D6\u5F97\u53EF\u80FD"),
-    locked: dictionary?.[locale]?.locked ?? (locale === "en" ? "locked" : "\u9806\u5E8F\u5F85\u3061"),
-    stamped: dictionary?.[locale]?.stamped ?? (locale === "en" ? "stamped" : "\u53D6\u5F97\u6E08\u307F"),
-    remaining: (value) => dictionary?.[locale]?.remaining?.replace("{count}", String(value)) ?? (locale === "en" ? `${value} spots remaining` : `\u3042\u3068${value}\u7B87\u6240`),
-    completed: dictionary?.[locale]?.completed ?? (locale === "en" ? "RALLY COMPLETED" : "\u30E9\u30EA\u30FC\u9054\u6210")
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      className: `stamp-sheet ${percentage >= 100 ? "stamp-sheet--completed" : ""}`,
-      style,
-      "aria-label": core.resolveLocalizedText(title, locale) || config.id,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "stamp-sheet__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: core.resolveLocalizedText(title, locale) || config.id }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stamp-sheet__score", role: "status", "aria-live": "polite", children: [
-            count,
-            " / ",
-            total
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stamp-sheet__progress-label", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: messages.remaining(Math.max(0, total - count)) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            Math.round(percentage),
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "stamp-sheet__progress-track",
-            role: "progressbar",
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-valuenow": Math.round(percentage),
-            "aria-label": locale === "en" ? "Rally progress" : "\u30B9\u30BF\u30F3\u30D7\u53D6\u5F97\u9032\u6357",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "stamp-sheet__progress-fill",
-                style: { display: "block", width: `${percentage}%` }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stamp-sheet__grid", children: config.stamps.map((stamp, index) => {
-          const recordForStamp = state?.records.find((record) => record.stampId === stamp.id);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            StampSlot,
-            {
-              stamp,
-              ...recordForStamp === void 0 ? {} : { record: recordForStamp },
-              isNext: next.has(stamp.id),
-              slotNumber: index + 1,
-              ...presentations[stamp.id] === void 0 ? {} : { presentation: presentations[stamp.id] },
-              isAnimating: animatedStampId === stamp.id,
-              disabled,
-              slotShape: theme.slotShape,
-              locale,
-              ...dictionary === void 0 ? {} : { dictionary },
-              statusText: recordForStamp === void 0 ? next.has(stamp.id) ? messages.available : messages.locked : messages.stamped,
-              onSelect: () => onStampSelect?.(stamp.id)
-            },
-            stamp.id
-          );
-        }) }),
-        percentage >= 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stamp-sheet__complete-mark", role: "status", "aria-live": "polite", children: "COMPLETE!!" }),
-        percentage >= 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stamp-sheet__complete-message", children: messages.completed })
-      ]
-    }
-  );
-}
-function StampModal({
-  open,
-  stamp,
-  record,
-  isAvailable = true,
-  isPending = false,
-  locale = "ja",
-  dictionary,
-  onClose,
-  onAcquire,
-  onCheckIn,
-  onNotify
+  state,
+  title,
+  progress
 }) {
-  const [token, setToken] = react.useState("");
-  const modalRef = useFocusTrap(open && stamp !== null, onClose, isPending);
-  react.useEffect(() => {
-    if (!open) setToken("");
-  }, [open]);
-  if (!open || stamp === null) return null;
-  const submit = async (context) => {
-    if (!isAvailable || record !== void 0) return;
-    const handler = onAcquire ?? onCheckIn;
-    if (handler === void 0) return;
-    const feedback = await handler(stamp.id, context);
-    onNotify?.(feedback);
-    if (feedback.ok) onClose();
-  };
-  const name = core.resolveLocalizedText(stamp.name, locale);
-  const messages = dictionary?.[locale] ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": "stamprally-modal-title",
-      className: "stamprally-modal",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stamprally-modal__panel", ref: modalRef, tabIndex: -1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Close stamp details",
-            "aria-disabled": isPending,
-            onClick: onClose,
-            disabled: isPending,
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "stamprally-modal-title", children: name }),
-        record !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages.alreadyClaimed ?? "Already claimed." }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(stamp.description, locale) }),
-        stamp.condition.type === "token" ? /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
-          {
-            onSubmit: (event) => {
-              event.preventDefault();
-              void submit({ type: "token", token });
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                messages.passcode ?? "Passcode",
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx("input", { value: token, onChange: (event) => setToken(event.target.value) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "submit",
-                  "aria-label": "Claim stamp",
-                  "aria-disabled": !isAvailable || isPending,
-                  disabled: !isAvailable || isPending,
-                  children: messages.claimStamp ?? "Claim stamp"
-                }
-              )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Claim stamp",
-            "aria-disabled": !isAvailable || isPending,
-            onClick: () => void submit({ type: "instant" }),
-            disabled: !isAvailable || isPending,
-            children: messages.claimStamp ?? "Claim stamp"
-          }
-        )
-      ] })
-    }
-  );
-}
-function RewardPanel({
-  rewards,
-  states,
-  locale = "ja",
-  dictionary,
-  isPending = false,
-  open = true,
-  onClose,
-  onRedeem,
-  onNotify
-}) {
-  const [passcodes, setPasscodes] = react.useState({});
-  const panelRef = useFocusTrap(open && onClose !== void 0, onClose, isPending);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      ref: panelRef,
-      role: "dialog",
-      "aria-labelledby": "stamprally-rewards-title",
-      "aria-modal": "true",
-      className: "stamprally-rewards",
-      tabIndex: -1,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "stamprally-rewards__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "stamprally-rewards-title", children: dictionary?.[locale]?.rewards ?? "Rewards" }),
-          onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Close rewards",
-              "aria-disabled": isPending,
-              disabled: isPending,
-              onClick: onClose,
-              children: "\xD7"
-            }
-          )
-        ] }),
-        rewards.map((reward) => {
-          const state = states.find((item) => item.rewardId === reward.id);
-          const available = state?.status === "AVAILABLE";
-          const redeem = async (options) => {
-            const result = await onRedeem(reward.id, options);
-            onNotify?.(
-              result.ok,
-              result.ok ? dictionary?.[locale]?.rewardClaimed ?? "Reward claimed." : result.error.code
-            );
-          };
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "article",
-            {
-              className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { children: core.resolveLocalizedText(reward.title, locale) }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(reward.description, locale) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", children: state?.status ?? "LOCKED" }),
-                reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "form",
-                  {
-                    onSubmit: (event) => {
-                      event.preventDefault();
-                      void redeem({ passcode: passcodes[reward.id] ?? "" });
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                        dictionary?.[locale]?.staffPasscode ?? "Staff passcode",
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
-                          {
-                            type: "password",
-                            value: passcodes[reward.id] ?? "",
-                            onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "submit",
-                          "aria-label": `Redeem ${core.resolveLocalizedText(reward.title, locale)}`,
-                          "aria-disabled": !available || isPending,
-                          disabled: !available || isPending,
-                          children: dictionary?.[locale]?.redeem ?? "Redeem"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": `Redeem ${core.resolveLocalizedText(reward.title, locale)}`,
-                    "aria-disabled": !available || isPending,
-                    disabled: !available || isPending,
-                    onClick: () => void redeem(),
-                    children: dictionary?.[locale]?.redeem ?? "Redeem"
-                  }
-                )
-              ]
-            },
-            reward.id
-          );
-        })
-      ]
-    }
+  const current = progress ?? core.calculateProgress(
+    state ?? { rallyId: config.id, userId: null, records: [], rewards: [], updatedAt: "" },
+    config
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": title ?? "Stamp sheet", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title ?? core.resolveLocalizedText(config.title, "en") }),
+    /* @__PURE__ */ jsxRuntime.jsx("progress", { max: 100, value: current.percentage }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map((spot) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: state?.records.some((record) => record.stampId === spot.id) ? "\u2713" : "\u25CB" }, spot.id)) })
+  ] });
 }
 
 exports.RallyViewer = RallyViewer;
-exports.RewardPanel = RewardPanel;
-exports.StampModal = StampModal;
 exports.StampSheet = StampSheet;
-exports.StampSlot = StampSlot;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map