@godxjp/ui 31.31.8 → 32.0.1

package/docs/showcase/caimono-price-comparison.tsx

@@ -1,919 +0,0 @@
-/** Caimono comparison composition. Public components and scoped token overrides only.
- * Fixed source snapshot, not live merchant data. See /tmp/caimono-gaps.md for fidelity limits.
- */
-import * as React from "react";
-import { Button, Heading, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  DataTable,
-  Descriptions,
-  EmptyState,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import {
-  Form,
-  Checkbox,
-  FormField,
-  NumberInput,
-  SearchInput,
-  Segmented,
-  Select,
-} from "@godxjp/ui/data-entry";
-import {
-  Alert,
-  AlertDescription,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@godxjp/ui/feedback";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-import { AreaChart } from "@godxjp/ui/charts";
-import { useTranslation } from "@godxjp/ui/i18n";
-
-// CUSTOMER-THEMING.md permits per-subtree custom-property overrides.
-// No ordinary CSS declarations; reapply to portalled content because it leaves the page scope.
-const theme = {
-  "--primary": "20.86956522 100.00000000% 36.07843137%", // #B84000, accessible action, not decorative orange
-  "--primary-hover": "20.92105263 100.00000000% 29.80392157%",
-  "--primary-foreground": "0 0% 100%",
-  "--ring": "218.00000000 75.63025210% 46.66666667%",
-  "--focus-ring-color": "218.00000000 75.63025210% 46.66666667%",
-  "--background": "210.00000000 22.22222222% 96.47058824%",
-  "--foreground": "220.27397260 76.84210526% 18.62745098%",
-  "--card": "0 0% 100%",
-  "--card-foreground": "220.27397260 76.84210526% 18.62745098%",
-  "--popover": "0 0% 100%",
-  "--popover-foreground": "220.27397260 76.84210526% 18.62745098%",
-  "--muted-foreground": "215.67567568 18.40796020% 39.41176471%",
-  "--border": "214.28571429 26.92307692% 89.80392157%",
-  "--input": "216.36363636 14.79820628% 56.27450980%",
-  "--accent": "32.72727273 100.00000000% 95.68627451%",
-  "--accent-foreground": "220.27397260 76.84210526% 18.62745098%",
-  "--text-primary": "20.86956522 100.00000000% 36.07843137%",
-  "--success": "155.55555556 69.23076923% 22.94117647%",
-  "--text-success": "155.55555556 69.23076923% 22.94117647%",
-  "--text-warning": "37.20930233 100.00000000% 25.29411765%",
-  "--text-error": "353.19148936 64.97695853% 42.54901961%",
-  "--text-info": "218.10810811 74.74747475% 38.82352941%",
-  "--radius-md": "10px",
-  "--radius-xl": "16px",
-  "--control-radius": "var(--radius-md)",
-  "--button-radius": "var(--radius-md)",
-  "--card-radius": "var(--radius-xl)",
-  "--radius-2xl": "24px",
-  "--card-shadow": "0 12px 36px rgb(11 35 84 / .06)",
-  "--font-sans-base":
-    'Inter, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-  "--font-sans-ja":
-    '"Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif',
-  "--chart-1": "#B84000",
-} as React.CSSProperties;
-
-const snapshot = Date.parse("2026-09-13T09:00:00Z");
-type Offer = {
-  id: string;
-  merchant: string;
-  model: string;
-  variant: string;
-  condition: string;
-  price: number;
-  shipping: { Tokyo: number | null; Osaka: number | null };
-  points: number;
-  observedAt: string;
-  eta: number | null;
-  inStock: boolean;
-  coupon?: number;
-};
-const common = { model: "AERO-H1", variant: "black", condition: "new", inStock: true };
-const offers: Offer[] = [
-  {
-    ...common,
-    id: "mori",
-    merchant: "mori",
-    price: 24800,
-    shipping: { Tokyo: 600, Osaka: 1000 },
-    points: 248,
-    observedAt: "2026-09-13T08:48:00Z",
-    eta: 1,
-  },
-  {
-    ...common,
-    id: "aoi",
-    merchant: "aoi",
-    price: 25100,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 251,
-    observedAt: "2026-09-13T08:42:00Z",
-    eta: 2,
-  },
-  {
-    ...common,
-    id: "hako",
-    merchant: "hako",
-    price: 25500,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 255,
-    observedAt: "2026-09-13T08:38:00Z",
-    eta: 3,
-    coupon: 1000,
-  },
-  {
-    ...common,
-    id: "kumo",
-    merchant: "kumo",
-    price: 23900,
-    shipping: { Tokyo: null, Osaka: null },
-    points: 239,
-    observedAt: "2026-09-13T08:20:00Z",
-    eta: 2,
-  },
-  {
-    ...common,
-    id: "haru",
-    merchant: "haru",
-    price: 22900,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 229,
-    observedAt: "2026-09-11T08:00:00Z",
-    eta: 4,
-  },
-  {
-    ...common,
-    id: "mika",
-    merchant: "mika",
-    price: 21800,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 218,
-    observedAt: "2026-09-13T08:30:00Z",
-    eta: null,
-    inStock: false,
-  },
-  {
-    ...common,
-    id: "neko-used",
-    merchant: "neko",
-    condition: "used",
-    price: 18800,
-    shipping: { Tokyo: 500, Osaka: 800 },
-    points: 0,
-    observedAt: "2026-09-13T08:40:00Z",
-    eta: 3,
-  },
-  {
-    ...common,
-    id: "aoi-cream",
-    merchant: "aoi",
-    variant: "cream",
-    price: 26100,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 261,
-    observedAt: "2026-09-13T08:42:00Z",
-    eta: 2,
-  },
-  {
-    ...common,
-    id: "mori-cream",
-    merchant: "mori",
-    variant: "cream",
-    price: 25700,
-    shipping: { Tokyo: 600, Osaka: 1000 },
-    points: 257,
-    observedAt: "2026-09-13T08:48:00Z",
-    eta: 1,
-  },
-  {
-    ...common,
-    id: "wrong-model",
-    merchant: "other",
-    model: "AERO-H2",
-    price: 9000,
-    shipping: { Tokyo: 0, Osaka: 0 },
-    points: 0,
-    observedAt: "2026-09-13T08:48:00Z",
-    eta: 1,
-  },
-];
-const history = {
-  "30": [
-    ["2026-08-15", 27500],
-    ["2026-08-19", 26800],
-    ["2026-08-23", 26800],
-    ["2026-08-27", 27200],
-    ["2026-08-31", 25900],
-    ["2026-09-04", 26100],
-    ["2026-09-09", 25500],
-    ["2026-09-13", 25100],
-  ],
-  "90": [
-    ["2026-06-16", 29900],
-    ["2026-06-29", 28900],
-    ["2026-07-12", 29100],
-    ["2026-07-25", 27900],
-    ["2026-08-07", 28100],
-    ["2026-08-20", 26900],
-    ["2026-09-02", 25700],
-    ["2026-09-13", 25100],
-  ],
-} satisfies Record<string, [string, number][]>;
-
-export default function CaimonoPriceComparison() {
-  const { t, locale } = useTranslation();
-  // Re-declare derived font aliases in this nested scope; root aliases are already resolved.
-  const font =
-    locale === "ja"
-      ? theme["--font-sans-ja" as keyof React.CSSProperties]
-      : theme["--font-sans-base" as keyof React.CSSProperties];
-  const scopedTheme = {
-    ...theme,
-    "--font-family-sans": font,
-    "--font-family-body": font,
-    "--font-family-display": font,
-  } as React.CSSProperties;
-  const [variant, setVariant] = React.useState("black");
-  const [condition, setCondition] = React.useState("new");
-  const [destination, setDestination] = React.useState<"Tokyo" | "Osaka">("Tokyo");
-  const [query, setQuery] = React.useState("");
-  const [sort, setSort] = React.useState("total");
-  const [free, setFree] = React.useState(false);
-  const [stock, setStock] = React.useState(false);
-  const [fast, setFast] = React.useState(false);
-  const [coupon, setCoupon] = React.useState(false);
-  const [period, setPeriod] = React.useState<"30" | "90">("30");
-  const [dialog, setDialog] = React.useState<"offer" | "alert" | "quote" | null>(null);
-  const [selectedId, setSelectedId] = React.useState<string | null>(null);
-  const [threshold, setThreshold] = React.useState<number | null>(25000);
-  const [notice, setNotice] = React.useState("");
-  const [favorite, setFavorite] = React.useState(false);
-  const favoriteKey = `caimono:favorite:JP:AERO-H1:${variant}:${condition}`;
-  React.useEffect(() => {
-    try {
-      setFavorite(localStorage.getItem(favoriteKey) === "1");
-    } catch {
-      setFavorite(false);
-    }
-  }, [favoriteKey]);
-  /*
-   * THE MARKET, not the viewer. A Japanese price-comparison board quotes JPY and stamps Tokyo time
-   * whichever language it is read in — translating the page does not move the shop. Both live here
-   * as market data so `Intl` derives the formatting from a value rather than from a literal at the
-   * call site, which is what `check:no-consumer-coupling` asks for and why it flagged the literals.
-   */
-  const MARKET = { currency: "JPY", timeZone: "Asia/Tokyo" } as const;
-
-  const money = (value: number | null) =>
-    value === null
-      ? t("caimono.unknownTotal")
-      : new Intl.NumberFormat(locale, { style: "currency", currency: MARKET.currency }).format(
-          value,
-        );
-  const number = (value: number) => new Intl.NumberFormat(locale).format(value);
-  const date = (value: string | number) =>
-    new Intl.DateTimeFormat(locale, {
-      dateStyle: "medium",
-      timeStyle: "short",
-      timeZone: MARKET.timeZone,
-    }).format(new Date(value));
-  const evaluate = (offer: Offer, applyCoupon = coupon) => {
-    const shipping = offer.shipping[destination];
-    const discount =
-      applyCoupon && snapshot < Date.parse("2026-09-14T09:00:00Z") ? (offer.coupon ?? 0) : 0;
-    const age = snapshot - Date.parse(offer.observedAt);
-    const reason =
-      !Number.isFinite(age) || age < 0 || age > 86400000
-        ? "stale"
-        : !offer.inStock
-          ? "outStock"
-          : shipping === null
-            ? "needsShipping"
-            : null;
-    return {
-      ...offer,
-      shippingCost: shipping,
-      discount,
-      total: shipping === null ? null : offer.price + shipping - discount,
-      reason,
-    };
-  };
-  const scoped = offers.filter(
-    (o) => o.model === "AERO-H1" && o.variant === variant && o.condition === condition,
-  );
-  const rows = scoped
-    .map((o) => evaluate(o))
-    .filter(
-      (o) =>
-        t(`caimono.merchants.${o.merchant}`)
-          .toLocaleLowerCase(locale)
-          .includes(query.toLocaleLowerCase(locale)) &&
-        (!free || o.shippingCost === 0) &&
-        (!stock || o.inStock) &&
-        (!fast || o.eta === 1),
-    )
-    .sort(
-      (a, b) =>
-        Number(!!a.reason) - Number(!!b.reason) ||
-        (sort === "delivery"
-          ? (a.eta ?? Infinity) - (b.eta ?? Infinity)
-          : (a.total ?? Infinity) - (b.total ?? Infinity)) ||
-        a.id.localeCompare(b.id),
-    );
-  const eligible = rows.filter((o) => !o.reason && o.total !== null);
-  const minimum = eligible.length ? Math.min(...eligible.map((o) => o.total!)) : null;
-  const best = eligible.find((o) => o.total === minimum);
-  const selected = scoped.find((o) => o.id === selectedId);
-  const detail = selected ? evaluate(selected) : undefined;
-  const reset = () => {
-    setQuery("");
-    setFree(false);
-    setStock(false);
-    setFast(false);
-  };
-  const openOffer = (id: string) => {
-    setSelectedId(id);
-    setNotice("");
-    setDialog("offer");
-  };
-  const columns: ColumnDef<(typeof rows)[number]>[] = [
-    {
-      key: "merchant",
-      header: t("caimono.shop"),
-      render: (o) => (
-        <Flex direction="col" gap="xs">
-          <Text weight="semibold">{t(`caimono.merchants.${o.merchant}`)}</Text>
-          <Text size="sm" tone="muted">
-            {t(`caimono.${o.condition}`)}
-          </Text>
-          <Text size="xs" tone="muted">
-            {t("caimono.observed", { date: date(o.observedAt) })}
-          </Text>
-        </Flex>
-      ),
-    },
-    {
-      key: "total",
-      header: t("caimono.cash"),
-      render: (o) => (
-        <Flex direction="col" gap="xs">
-          <Text size="xl" weight="bold" tabular>
-            {money(o.total)}
-          </Text>
-          {!o.reason && o.total === minimum ? (
-            <Badge tone="success">{t("caimono.best")}</Badge>
-          ) : o.reason ? (
-            <Text size="sm" tone="warning">
-              {t(`caimono.${o.reason}`)}
-            </Text>
-          ) : null}
-          <Text size="sm" tone="muted">
-            {t("caimono.itemValue", { amount: money(o.price) })}
-          </Text>
-          <Text size="sm" tone="muted">
-            {t("caimono.shippingValue", {
-              amount: o.shippingCost === null ? t("caimono.unknown") : money(o.shippingCost),
-            })}
-          </Text>
-          {o.discount > 0 && (
-            <Text size="sm" tone="success">
-              {t("caimono.discountValue", { amount: money(o.discount) })}
-            </Text>
-          )}
-        </Flex>
-      ),
-    },
-    {
-      key: "eta",
-      header: t("caimono.delivery"),
-      render: (o) => (
-        <Flex direction="col" gap="xs">
-          <Text>
-            {o.eta === null
-              ? t("caimono.unknown")
-              : t("caimono.eta", {
-                  duration: new Intl.NumberFormat(locale, {
-                    style: "unit",
-                    unit: "day",
-                    unitDisplay: "long",
-                  }).format(o.eta),
-                })}
-          </Text>
-          <Text tone={o.inStock ? "success" : "muted"}>
-            {t(o.inStock ? "caimono.inStock" : "caimono.outStock")}
-          </Text>
-          <Text size="sm" tone="muted">
-            {t(o.condition === "new" ? "caimono.manufacturer" : "caimono.sellerWarranty")}
-          </Text>
-          <Text size="sm" tone="muted">
-            {t("caimono.pointsValue", { count: number(o.points) })}
-          </Text>
-        </Flex>
-      ),
-    },
-    {
-      key: "actions",
-      header: t("caimono.action"),
-      render: (o) => (
-        <Button
-          variant={!o.reason && o.total === minimum ? "default" : "outline"}
-          size="sm"
-          onClick={() => openOffer(o.id)}
-          aria-label={t("caimono.detailFor", { merchant: t(`caimono.merchants.${o.merchant}`) })}
-        >
-          {t("caimono.breakdown")}
-        </Button>
-      ),
-    },
-  ];
-  const chartData = history[period].map(([day, total]) => ({
-    day: new Intl.DateTimeFormat(locale, {
-      month: "short",
-      day: "numeric",
-      timeZone: MARKET.timeZone,
-    }).format(new Date(`${day}T00:00:00+09:00`)),
-    total,
-  }));
-  return (
-    <Flex direction="col" gap="none" data-tenant="caimono" style={scopedTheme}>
-      <PageContainer
-        title={t("caimono.brand")}
-        subtitle={t("caimono.eyebrow")}
-        extra={<AppSettingPicker kind="locale" appearance="icon" />}
-        stickyFooter
-        footer={
-          <Flex direction="col" gap="sm">
-            <Flex hideFrom="md" justify="between" align="center" gap="sm" wrap>
-              <Text weight="bold" tabular>
-                {minimum === null ? t("caimono.noEligible") : money(minimum)}
-              </Text>
-              <Button disabled={!best} onClick={() => best && openOffer(best.id)}>
-                {t("caimono.bestDetails")}
-              </Button>
-            </Flex>
-            <Text size="sm" tone="muted">
-              {t("caimono.footerNote")}
-            </Text>
-          </Flex>
-        }
-      >
-        <Alert tone="info">
-          <AlertDescription>{t("caimono.demo")}</AlertDescription>
-        </Alert>
-        <Card style={{ "--card-radius": "var(--radius-2xl)" } as React.CSSProperties}>
-          <CardContent solo>
-            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="xl">
-              <Form>
-                <Flex direction="col" gap="md">
-                  <Badge tone="neutral">{t("caimono.synthetic")}</Badge>
-                  <Heading level={1}>{t("caimono.product")}</Heading>
-                  <Text tone="muted">{t("caimono.productMeta", { count: number(1) })}</Text>
-                  <FormField label={t("caimono.variant")}>
-                    <Select
-                      value={variant}
-                      onValueChange={setVariant}
-                      options={["black", "cream"].map((value) => ({
-                        value,
-                        label: t(`caimono.${value}`),
-                      }))}
-                    />
-                  </FormField>
-                  <FormField label={t("caimono.condition")}>
-                    <Segmented
-                      value={condition}
-                      onValueChange={setCondition}
-                      options={["new", "used"].map((value) => ({
-                        value,
-                        label: t(`caimono.${value}`),
-                      }))}
-                    />
-                  </FormField>
-                </Flex>
-              </Form>
-              <Flex direction="col" gap="md">
-                <Text tone="muted">{t("caimono.lowest")}</Text>
-                <Text size="4xl" weight="bold" tabular>
-                  {minimum === null ? t("caimono.noEligible") : money(minimum)}
-                </Text>
-                <Text>{t("caimono.incl")}</Text>
-                <Text size="sm" tone="muted">
-                  {t(coupon ? "caimono.couponActive" : "caimono.couponInactive")}
-                </Text>
-                <Flex gap="sm" wrap>
-                  <Button disabled={!best} onClick={() => best && openOffer(best.id)}>
-                    {t("caimono.bestDetails")}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      const totals = scoped
-                        .map((o) => evaluate(o, false))
-                        .filter((o) => !o.reason && o.total !== null)
-                        .map((o) => o.total!);
-                      setThreshold(totals.length ? Math.max(1, Math.min(...totals) - 1000) : 25000);
-                      setNotice("");
-                      setDialog("alert");
-                    }}
-                  >
-                    {t("caimono.priceAlert")}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    aria-pressed={favorite}
-                    onClick={() => {
-                      try {
-                        localStorage.setItem(favoriteKey, favorite ? "0" : "1");
-                        setFavorite(!favorite);
-                        setNotice(t(favorite ? "caimono.favoriteOff" : "caimono.favoriteOn"));
-                      } catch {
-                        setNotice(t("caimono.storageFail"));
-                      }
-                    }}
-                  >
-                    {t(favorite ? "caimono.saved" : "caimono.save")}
-                  </Button>
-                </Flex>
-              </Flex>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-        <Heading level={2}>{t("caimono.offers")}</Heading>
-        <Text tone="muted" size="sm">
-          {t("caimono.snapshot", { date: date(snapshot) })}
-        </Text>
-        <Form>
-          <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md">
-            <FormField label={t("caimono.findShop")}>
-              <SearchInput
-                value={query}
-                onValueChange={setQuery}
-                placeholder={t("caimono.searchPlaceholder")}
-              />
-            </FormField>
-            <FormField label={t("caimono.deliverTo")}>
-              <Select
-                value={destination}
-                onValueChange={(v: string) => setDestination(v === "Osaka" ? "Osaka" : "Tokyo")}
-                options={["Tokyo", "Osaka"].map((value) => ({
-                  value,
-                  label: t(`caimono.${value}`),
-                }))}
-              />
-            </FormField>
-            <FormField label={t("caimono.sort")}>
-              <Select
-                value={sort}
-                onValueChange={setSort}
-                options={[
-                  { value: "total", label: t("caimono.totalSort") },
-                  { value: "delivery", label: t("caimono.deliverySort") },
-                ]}
-              />
-            </FormField>
-          </ResponsiveGrid>
-        </Form>
-        <Flex gap="md" wrap align="center">
-          <Checkbox checked={free} onCheckedChange={(v) => setFree(v === true)}>
-            {t("caimono.free")}
-          </Checkbox>
-          <Checkbox checked={stock} onCheckedChange={(v) => setStock(v === true)}>
-            {t("caimono.stockOnly")}
-          </Checkbox>
-          <Checkbox checked={fast} onCheckedChange={(v) => setFast(v === true)}>
-            {t("caimono.fast", {
-              duration: new Intl.NumberFormat(locale, {
-                style: "unit",
-                unit: "day",
-                unitDisplay: "long",
-              }).format(1),
-            })}
-          </Checkbox>
-          <Button variant="ghost" size="sm" onClick={reset}>
-            {t("caimono.reset")}
-          </Button>
-        </Flex>
-        <Text role="status" size="sm">
-          {t("caimono.counts", { total: number(rows.length), eligible: number(eligible.length) })}
-        </Text>
-        <Card>
-          <CardContent flush>
-            <DataTable
-              data={rows}
-              columns={columns}
-              getRowId={(o) => o.id}
-              rowTone={(o) => (!o.reason && o.total === minimum ? "success" : undefined)}
-              empty={
-                <EmptyState
-                  title={t("caimono.noResultTitle")}
-                  description={t("caimono.noResultBody")}
-                />
-              }
-            />
-          </CardContent>
-        </Card>
-        <Text size="sm" tone="muted">
-          {t("caimono.limitNote")}
-        </Text>
-        <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("caimono.couponTitle")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                <Checkbox checked={coupon} onCheckedChange={(v) => setCoupon(v === true)}>
-                  {t("caimono.couponLabel", { amount: money(1000) })}
-                </Checkbox>
-                <Text size="sm" tone="muted">
-                  {t("caimono.couponHelp")}
-                </Text>
-                <Text size="sm" tone="muted">
-                  {t("caimono.expires", { date: date("2026-09-14T09:00:00Z") })}
-                </Text>
-              </Flex>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("caimono.whyRank")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm">
-                {["rule1", "rule2", "rule3"].map((key) => (
-                  <Text key={key} size="sm">
-                    {t(`caimono.${key}`)}
-                  </Text>
-                ))}
-                <Text size="sm" tone="muted">
-                  {t("caimono.kaimiBody")}
-                </Text>
-              </Flex>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("caimono.buyAssist")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <Text size="sm" tone="muted">
-                  {t("caimono.buyAssistBody")}
-                </Text>
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setNotice("");
-                    setDialog("quote");
-                  }}
-                >
-                  {t("caimono.quote")}
-                </Button>
-              </Flex>
-            </CardContent>
-          </Card>
-        </ResponsiveGrid>
-        <Card>
-          <CardHeader>
-            <CardTitle>{t("caimono.historyTitle")}</CardTitle>
-            <CardDescription>{t("caimono.historyScope")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField label={t("caimono.period")}>
-                <Segmented
-                  value={period}
-                  onValueChange={(v) => setPeriod(v === "90" ? "90" : "30")}
-                  options={[30, 90].map((value) => ({
-                    value: String(value),
-                    label: new Intl.NumberFormat(locale, {
-                      style: "unit",
-                      unit: "day",
-                      unitDisplay: "long",
-                    }).format(value),
-                  }))}
-                />
-              </FormField>
-              <AreaChart
-                label={t("caimono.historyTitle")}
-                showCaption={false}
-                description={t("caimono.historyScope")}
-                data={chartData}
-                categoryKey="day"
-                series={[{ dataKey: "total", label: t("caimono.historyMetric") }]}
-                numberFormat={{ style: "currency", currency: MARKET.currency }}
-              />
-            </Flex>
-          </CardContent>
-          <CardContent flush>
-            <DataTable
-              data={chartData}
-              getRowId={(r) => r.day}
-              columns={[
-                { key: "day", header: t("caimono.date") },
-                {
-                  key: "total",
-                  header: t("caimono.price"),
-                  render: (r) => <Text tabular>{money(r.total)}</Text>,
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>{t("caimono.reviewTitle")}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg">
-              <Flex direction="col" gap="sm">
-                <Heading level={3}>{t("caimono.editorial")}</Heading>
-                <Text tone="muted">{t("caimono.editorialBody")}</Text>
-              </Flex>
-              <Flex direction="col" gap="sm">
-                <Heading level={3}>{t("caimono.community")}</Heading>
-                <Text tone="muted">{t("caimono.communityBody")}</Text>
-              </Flex>
-            </ResponsiveGrid>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>{t("caimono.specTitle")}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Descriptions
-              items={[
-                { label: t("caimono.model"), value: t("caimono.modelValue") },
-                { label: t("caimono.connection"), value: t("caimono.wireless") },
-                { label: t("caimono.unit"), value: number(1) },
-                { label: t("caimono.market"), value: t("caimono.japan") },
-              ]}
-            />
-          </CardContent>
-        </Card>
-        <Text weight="semibold">{t("caimono.disclosure")}</Text>
-        <Text tone="muted" size="sm">
-          {t("caimono.disclosureText", {
-            duration: new Intl.NumberFormat(locale, {
-              style: "unit",
-              unit: "hour",
-              unitDisplay: "long",
-            }).format(24),
-          })}
-        </Text>
-        <Text role="status">{dialog === null ? notice : ""}</Text>
-      </PageContainer>
-      <Dialog
-        open={dialog !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setDialog(null);
-            setNotice("");
-          }
-        }}
-      >
-        <DialogContent style={scopedTheme}>
-          <DialogHeader>
-            <DialogTitle>
-              {t(
-                dialog === "alert"
-                  ? "caimono.alertTitle"
-                  : dialog === "quote"
-                    ? "caimono.quoteTitle"
-                    : "caimono.breakdownTitle",
-              )}
-            </DialogTitle>
-            <DialogDescription>
-              {t(
-                dialog === "alert"
-                  ? "caimono.alertBody"
-                  : dialog === "quote"
-                    ? "caimono.quoteBody"
-                    : "caimono.breakdownNote",
-              )}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogBody>
-            {dialog === "offer" && detail && (
-              <Flex direction="col" gap="md">
-                <Heading level={3}>{t(`caimono.merchants.${detail.merchant}`)}</Heading>
-                <Descriptions
-                  columns={1}
-                  items={[
-                    { label: t("caimono.item"), value: money(detail.price) },
-                    {
-                      label: t("caimono.shipping"),
-                      value:
-                        detail.shippingCost === null
-                          ? t("caimono.unknown")
-                          : money(detail.shippingCost),
-                    },
-                    { label: t("caimono.fee"), value: money(0) },
-                    { label: t("caimono.discount"), value: money(detail.discount) },
-                    { label: t("caimono.cash"), value: money(detail.total) },
-                    { label: t("caimono.points"), value: number(detail.points) },
-                  ]}
-                />
-                <Text tone="muted">{t("caimono.notDeducted")}</Text>
-                {detail.reason && (
-                  <Alert tone="warning">
-                    <AlertDescription>
-                      {t(`caimono.${detail.reason}`)} {t("caimono.notRankedExplain")}
-                    </AlertDescription>
-                  </Alert>
-                )}
-              </Flex>
-            )}
-            {dialog === "alert" && (
-              <Flex direction="col" gap="md">
-                <Text>
-                  {t("caimono.alertScope", {
-                    variant: t(`caimono.${variant}`),
-                    condition: t(`caimono.${condition}`),
-                    destination: t(`caimono.${destination}`),
-                  })}
-                </Text>
-                <FormField label={t("caimono.alertLabel")} helper={t("caimono.alertHelp")}>
-                  <NumberInput
-                    value={threshold}
-                    onValueChange={setThreshold}
-                    min={1}
-                    max={10000000}
-                    precision={0}
-                  />
-                </FormField>
-              </Flex>
-            )}
-            {dialog === "quote" && (
-              <Flex direction="col" gap="md">
-                <Descriptions
-                  columns={1}
-                  items={[
-                    { label: t("caimono.domestic"), value: money(minimum) },
-                    ...["assistFee", "intlShip", "importCost"].map((key) => ({
-                      label: t(`caimono.${key}`),
-                      value: t("caimono.pendingQuote"),
-                    })),
-                    { label: t("caimono.landed"), value: t("caimono.notFinal") },
-                  ]}
-                />
-                <Text tone="muted">{t("caimono.quoteNote")}</Text>
-              </Flex>
-            )}
-            <Text role="status">{notice}</Text>
-          </DialogBody>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setDialog(null);
-                setNotice("");
-              }}
-            >
-              {t("caimono.close")}
-            </Button>
-            {dialog === "alert" && (
-              <Button
-                disabled={
-                  threshold === null ||
-                  !Number.isSafeInteger(threshold) ||
-                  threshold < 1 ||
-                  threshold > 10000000
-                }
-                onClick={() => {
-                  try {
-                    localStorage.setItem(
-                      `caimono:alert:${variant}:${condition}:${destination}`,
-                      JSON.stringify({
-                        model: "AERO-H1",
-                        variant,
-                        condition,
-                        destination,
-                        currency: MARKET.currency,
-                        market: "JP",
-                        threshold,
-                        metric: "cash_total_without_conditional_coupon",
-                        createdAt: new Date().toISOString(),
-                      }),
-                    );
-                    setNotice(t("caimono.alertSaved"));
-                  } catch {
-                    setNotice(t("caimono.storageFail"));
-                  }
-                }}
-              >
-                {t("caimono.alertSave")}
-              </Button>
-            )}
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Flex>
-  );
-}