@twentyfirstmedia/ui-core 0.2.0 → 0.3.0

package/dist/components/admin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"admin.d.ts","sourceRoot":"","sources":["../../src/components/admin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EAEf,iBAAiB,EAEjB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EAEnB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,mBAAmB,EAEnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAGpB,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBA4F9C;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBA+CtC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,qBA0DhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAmE5C;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,qBAgHxC;AAOD,wBAAgB,SAAS,sBAqBxB;AAID,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAqGtC;AAKD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAsE9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAiCpD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAwC5C;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,oBAAoB,qBA4EtD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA4C5C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,cAAc,qBAmE1C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAoH5C;AAYD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6E5C;AAGD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAgG9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAsGpD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,sBAAsB,qBAwF1D;AAKD,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,4BA6JhD;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAiKpD;AAID,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA2D5C"}
+{"version":3,"file":"admin.d.ts","sourceRoot":"","sources":["../../src/components/admin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EAEf,iBAAiB,EAEjB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EAEnB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,mBAAmB,EAEnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAGpB,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBA8F9C;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAgDtC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,qBA0DhD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAmE5C;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,qBAkHxC;AAOD,wBAAgB,SAAS,sBAqBxB;AAID,wBAAgB,OAAO,CAAC,CAAC,EAAE,YAAY,qBAuGtC;AAKD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAwE9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAkCpD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAyC5C;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,oBAAoB,qBA8EtD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6C5C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,cAAc,qBAoE1C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBAqH5C;AAYD,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA+E5C;AAGD,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,qBAiG9C;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAuGpD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,sBAAsB,qBAwF1D;AAKD,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,4BA+JhD;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,mBAAmB,qBAgKpD;AAID,wBAAgB,UAAU,CAAC,CAAC,EAAE,eAAe,qBA6D5C"}

package/dist/components/admin.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useControlled, useId } from "../hooks.js";
-import { formatMoney, formatNumber } from "../format.js";
+import { useFormat, useStrings } from "../context.js";
+import { ADMIN_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { toast } from "../toast-store.js";
@@ -20,6 +21,8 @@ import { Meter } from "./developer.js";
 import { Progress } from "./data-display.js";
 /* ── Shared: range slider, bar list, status select, tile picker ── */
 export function RangeSlider(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatNumber } = useFormat();
     const id = useId("rs"), min = p.min || 0, max = p.max != null ? p.max : 100, step = p.step || 1, f = p.format || formatNumber;
     const v = useControlled(p.value, p.defaultValue || [min, max], p.onChange), lo = v[0][0], hi = v[0][1];
     function pc(x) {
@@ -36,17 +39,18 @@ export function RangeSlider(p) {
     return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, children: _jsxs("div", { className: "tf-range", children: [_jsxs("div", { className: "tf-range-track", children: [_jsx("span", { style: {
                                 left: pc(lo) + "%",
                                 width: pc(hi) - pc(lo) + "%",
-                            } }), _jsx("input", { type: "range", min: min, max: max, step: step, value: lo, "aria-label": "Minimum", onChange: (e) => {
+                            } }), _jsx("input", { type: "range", min: min, max: max, step: step, value: lo, "aria-label": t.minimum, onChange: (e) => {
                                 set(0, e.target.value);
-                            } }), _jsx("input", { type: "range", min: min, max: max, step: step, value: hi, "aria-label": "Maximum", onChange: (e) => {
+                            } }), _jsx("input", { type: "range", min: min, max: max, step: step, value: hi, "aria-label": t.maximum, onChange: (e) => {
                                 set(1, e.target.value);
-                            } })] }), p.inputs !== false ? (_jsxs("div", { className: "tf-range-inputs", children: [_jsxs("label", { className: "tf-range-num", children: [_jsx("small", { children: "Min" }), _jsx("input", { id: id, className: "tf-input", inputMode: "numeric", value: formatNumber(lo), onChange: (e) => {
+                            } })] }), p.inputs !== false ? (_jsxs("div", { className: "tf-range-inputs", children: [_jsxs("label", { className: "tf-range-num", children: [_jsx("small", { children: t.min }), _jsx("input", { id: id, className: "tf-input", inputMode: "numeric", value: formatNumber(lo), onChange: (e) => {
                                         set(0, e.target.value.replace(/\D/g, "") || min);
-                                    } }), p.unit && _jsx("span", { children: p.unit })] }), _jsx("span", { className: "tf-range-dash", "aria-hidden": true, children: "\u2013" }), _jsxs("label", { className: "tf-range-num", children: [_jsx("small", { children: "Max" }), _jsx("input", { className: "tf-input", inputMode: "numeric", value: formatNumber(hi), onChange: (e) => {
+                                    } }), p.unit && _jsx("span", { children: p.unit })] }), _jsx("span", { className: "tf-range-dash", "aria-hidden": true, children: "\u2013" }), _jsxs("label", { className: "tf-range-num", children: [_jsx("small", { children: t.max }), _jsx("input", { className: "tf-input", inputMode: "numeric", value: formatNumber(hi), onChange: (e) => {
                                         set(1, e.target.value.replace(/\D/g, "") || max);
                                     } }), p.unit && _jsx("span", { children: p.unit })] })] })) : (_jsxs("div", { className: "tf-range-vals", children: [_jsx("span", { children: f(lo) }), _jsx("span", { children: hi >= max && p.openEnd ? f(hi) + "+" : f(hi) })] }))] }) }));
 }
 export function BarList(p) {
+    const { formatNumber } = useFormat();
     const items = p.items || [], max = Math.max.apply(null, items.map((i) => i.value).concat([1])), f = p.format || formatNumber;
     return (_jsx("div", { className: "tf-barlist", role: "list", "aria-label": p.label, children: items.map((it, i) => (_jsxs("div", { role: "listitem", className: cx("tf-barlist-row", p.onPick && "is-btn"), onClick: p.onPick &&
                 (() => {
@@ -93,23 +97,25 @@ export function TilePicker(p) {
 }
 /* ── Live feed ── */
 export function LiveFeed(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatMoney } = useFormat();
     const paused = useControlled(p.paused, false, p.onPause), held = React.useRef(null), filter = React.useState(null);
     if (!paused[0] || !held.current)
         held.current = p.items || [];
     const heldItems = held.current;
     const shown = (paused[0] ? heldItems : p.items || []).filter((it) => !filter[0] || it.type === filter[0]), waiting = paused[0] ? Math.max(0, (p.items || []).length - heldItems.length) : 0;
     const types = p.types || [];
-    return (_jsxs("div", { className: "tf-livefeed", children: [_jsxs("div", { className: "tf-livefeed-head", children: [_jsxs("span", { className: cx("tf-live", paused[0] && "off"), children: [_jsx("span", { className: "tf-live-dot", "aria-hidden": true }), paused[0] ? "Paused" : "Live"] }), types.length > 0 && (_jsxs("div", { className: "tf-row", style: {
+    return (_jsxs("div", { className: "tf-livefeed", children: [_jsxs("div", { className: "tf-livefeed-head", children: [_jsxs("span", { className: cx("tf-live", paused[0] && "off"), children: [_jsx("span", { className: "tf-live-dot", "aria-hidden": true }), paused[0] ? t.paused : t.live] }), types.length > 0 && (_jsxs("div", { className: "tf-row", style: {
                             gap: 4,
                         }, children: [_jsx(Chip, { selected: !filter[0], onClick: () => {
                                     filter[1](null);
-                                }, children: "All" }), types.map((t) => (_jsx(Chip, { selected: filter[0] === t.value, onClick: () => {
+                                }, children: t.all }), types.map((t) => (_jsx(Chip, { selected: filter[0] === t.value, onClick: () => {
                                     filter[1](filter[0] === t.value ? null : t.value);
                                 }, children: t.label }, t.value)))] })), _jsx("span", { style: {
                             flex: 1,
                         } }), waiting > 0 && (_jsx("button", { type: "button", className: "tf-livefeed-new", onClick: () => {
                             paused[1](false);
-                        }, children: `${waiting} new` })), _jsx(IconButton, { icon: paused[0] ? "play" : "pause", size: "sm", label: paused[0] ? "Resume" : "Pause", onClick: () => {
+                        }, children: t.newCount(waiting) })), _jsx(IconButton, { icon: paused[0] ? "play" : "pause", size: "sm", label: paused[0] ? t.resume : t.pause, onClick: () => {
                             paused[1](!paused[0]);
                         } })] }), _jsx("div", { className: "tf-livefeed-list", role: "log", "aria-live": paused[0] ? "off" : "polite", style: p.maxHeight
                     ? {
@@ -117,7 +123,7 @@ export function LiveFeed(p) {
                     }
                     : undefined, children: shown.length === 0 ? (_jsx("p", { className: "tf-card-desc", style: {
                         padding: 16,
-                    }, children: p.emptyText || "Waiting for events…" })) : (shown.map((it) => (_jsxs("div", { className: cx("tf-livefeed-row", it.fresh && "fresh"), children: [_jsx(TintIcon, { icon: it.icon || "zap", tint: it.tint || "sky", size: 32 }), _jsxs("span", { className: "tf-livefeed-text", children: [_jsx("b", { children: it.title }), it.text && _jsx("small", { children: it.text })] }), it.amount != null && (_jsx("span", { className: cx("tf-livefeed-amt", it.amount < 0 && "neg"), children: (it.amount > 0 ? "+" : "") + formatMoney(it.amount, it.currency) })), _jsx("span", { className: "tf-livefeed-time", children: it.time })] }, it.id)))) })] }));
+                    }, children: p.emptyText || t.waitingForEvents })) : (shown.map((it) => (_jsxs("div", { className: cx("tf-livefeed-row", it.fresh && "fresh"), children: [_jsx(TintIcon, { icon: it.icon || "zap", tint: it.tint || "sky", size: 32 }), _jsxs("span", { className: "tf-livefeed-text", children: [_jsx("b", { children: it.title }), it.text && _jsx("small", { children: it.text })] }), it.amount != null && (_jsx("span", { className: cx("tf-livefeed-amt", it.amount < 0 && "neg"), children: (it.amount > 0 ? "+" : "") + formatMoney(it.amount, it.currency) })), _jsx("span", { className: "tf-livefeed-time", children: it.time })] }, it.id)))) })] }));
 }
 const WORLD = "0000000001fe03ff000000000000000000000000000079f7ffff8001c01000070000000000000010439fffff0002c0000000000000000000007cdf007fff00000001800ffc01e000000003c4af003ffe0000000408ffffe0000001f8001e67f83ffc000070001bffffffff0083ffffc67e5c1fe00003ff2ffbffffffffff67fffffff83a1f01c007bcffffffffffffff03ffffffe0080e00001e7fffffffffffffff03fbffffc0700200003e5ffffffffffffc6000403fffe07e000002063fffffffffff018001001ffffc7f0000021cfffffffffffc038000000ffffe7fc0000f3fffffffffffff8200000003ffffff0000027fffffffffffff4000000003fffffce00003ffffffffffffff0000000003ffffff000000fbf5e7fffffffe0000000003fffff000000f8de0e7fffffffcc000000003ffffc000000f12eff7ffffff708000000001ffff8000000f00dff3fffffe300000000000ffffc0000001f043ffffffff1700000000007fff0000000ff803ffffffff0800000000001ffe0000000ffeffffffffff8000000000003f810000001fffffe7ffffff0000000000001f810000003ffffdfbffffff00000000000007800000007ffffcff0ffffe80000000400003884000007ffffefe07e7e000000000000001f83400003ffffe7e07c3e0800000000000005c0000007fffff780701e0800000000000000e0000007fffffc00301f0c0000000000000023900003ffffff003016040000000000000017f00001ffffff000810060000000000000007fc0000f3ffff000008200000000000000007ff000000fffe00001860000000000000000fff000000fffc000008ec000000000000000fffc00000fff800000ce8400000000000000ffff80000fff0000004003c0000000000000ffffc00007ff0000002801e00000000000007fffc00007ff0000000000808000000000007fff800007ff0000000000000000000000007fff000007ff100000002c000000000000001fff000007ff300000007ec00000000000000fff000007fc300000007fe00000000000000fff000003fc60000003fff02000000000000ffc000003fc60000007fff80000000000000ff8000003f800000003fff80000000000001ff0000001f800000003fff80000000000001ff0000001f000000003fff80000000000001fe0000001800000000303f80000000000001f80000000000000000000f00000000000001f00000000000000000000200200000000003c00000000000000000000200400000000001c000000000000000000000008000000000038000000000000000000000010000000000038000000000000000000000000000000000030800000000000000000000000000000000018000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";
 let worldPath = null;
@@ -139,6 +145,8 @@ export function WorldDots() {
 /* ── Map with pins (background is yours: tiles, an SVG, an image) ── */
 /* ── Map with pins (background is yours: tiles, an SVG, an image) ── */
 export function MapView(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatNumber } = useFormat();
     const b = p.bounds || {
         n: 84,
         s: -60,
@@ -155,7 +163,7 @@ export function MapView(p) {
     const cur = pts.find((x) => x.id === sel[0]);
     return (_jsxs("div", { className: cx("tf-map", p.className), style: {
             height: Hh,
-        }, role: "region", "aria-label": p.label || "Map", children: [p.background || (!p.bounds ? _jsx(WorldDots, {}) : null) || (_jsx("svg", { className: "tf-map-grid", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": true, children: [10, 20, 30, 40, 50, 60, 70, 80, 90].map((g) => (_jsxs("g", { children: [_jsx("line", { x1: g, x2: g, y1: 0, y2: 100 }), _jsx("line", { y1: g, y2: g, x1: 0, x2: 100 })] }, g))) })), pts.map((pt) => {
+        }, role: "region", "aria-label": p.label || t.viewMap, children: [p.background || (!p.bounds ? _jsx(WorldDots, {}) : null) || (_jsx("svg", { className: "tf-map-grid", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": true, children: [10, 20, 30, 40, 50, 60, 70, 80, 90].map((g) => (_jsxs("g", { children: [_jsx("line", { x1: g, x2: g, y1: 0, y2: 100 }), _jsx("line", { y1: g, y2: g, x1: 0, x2: 100 })] }, g))) })), pts.map((pt) => {
                 const c = xy(pt), r = p.bubbles ? 10 + Math.sqrt((pt.value || 1) / maxV) * 26 : null;
                 return (_jsx("button", { type: "button", className: cx(p.bubbles ? "tf-map-bubble" : "tf-map-pin", "tf-t-" + (pt.tint || "sky"), sel[0] === pt.id && "on", pt.pulse && "pulse"), style: {
                         left: c.x + "%",
@@ -179,21 +187,24 @@ export function MapView(p) {
 /* ── Rich text editor (Selection/Range based, no execCommand) ── */
 /* ── Money and operations for admins ── */
 export function BalanceCard(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatMoney } = useFormat();
     const days = p.perDay && p.perDay > 0 ? Math.floor(p.balance / p.perDay) : null, low = p.low != null && p.balance <= p.low, st = p.status || (p.balance <= 0 ? "danger" : low ? "warn" : "ok");
-    return (_jsxs("div", { className: cx("tf-balance", "is-" + st), children: [_jsxs("div", { className: "tf-balance-head", children: [p.logo || _jsx(TintIcon, { icon: p.icon || "wallet", tint: p.tint || "butter", size: 36 }), _jsxs("div", { className: "tf-option-text", children: [_jsx("b", { children: p.name }), p.sub && _jsx("small", { children: p.sub })] }), _jsx(StatusIndicator, { status: st, label: p.statusLabel || (st === "danger" ? "Empty" : low ? "Low" : "OK"), size: "sm" })] }), _jsxs("div", { className: "tf-balance-main", children: [_jsxs("div", { className: "tf-col", style: {
+    return (_jsxs("div", { className: cx("tf-balance", "is-" + st), children: [_jsxs("div", { className: "tf-balance-head", children: [p.logo || _jsx(TintIcon, { icon: p.icon || "wallet", tint: p.tint || "butter", size: 36 }), _jsxs("div", { className: "tf-option-text", children: [_jsx("b", { children: p.name }), p.sub && _jsx("small", { children: p.sub })] }), _jsx(StatusIndicator, { status: st, label: p.statusLabel || (st === "danger" ? t.balanceEmpty : low ? t.balanceLow : t.balanceOk), size: "sm" })] }), _jsxs("div", { className: "tf-balance-main", children: [_jsxs("div", { className: "tf-col", style: {
                             gap: 2,
                         }, children: [_jsx("span", { className: "tf-balance-amt", children: formatMoney(p.balance, p.currency, {
                                     maximumFractionDigits: 2,
                                 }) }), _jsx("span", { className: "tf-balance-meta", children: [
-                                    p.perDay != null && `${formatMoney(p.perDay, p.currency)} per day`,
-                                    days != null && p.balance > 0 && `lasts about ${days} days`,
+                                    p.perDay != null && t.perDay(formatMoney(p.perDay, p.currency)),
+                                    days != null && p.balance > 0 && t.lastsAbout(days),
                                 ]
                                     .filter(Boolean)
-                                    .join(" · ") }), p.low != null && (_jsx("span", { className: "tf-balance-meta", children: `Warns below ${formatMoney(p.low, p.currency)}` }))] }), p.spark && (_jsx(Sparkline, { values: p.spark, width: 96, height: 32, tint: st === "ok" ? "mint" : st === "warn" ? "butter" : "blush" }))] }), (p.onTopUp || p.action) && (_jsxs("div", { className: "tf-row", style: {
+                                    .join(" · ") }), p.low != null && (_jsx("span", { className: "tf-balance-meta", children: t.warnsBelow(formatMoney(p.low, p.currency)) }))] }), p.spark && (_jsx(Sparkline, { values: p.spark, width: 96, height: 32, tint: st === "ok" ? "mint" : st === "warn" ? "butter" : "blush" }))] }), (p.onTopUp || p.action) && (_jsxs("div", { className: "tf-row", style: {
                     justifyContent: "flex-end",
-                }, children: [p.action, p.onTopUp && (_jsx(Button, { size: "sm", variant: low ? "primary" : "soft", icon: "plus", onClick: p.onTopUp, children: p.topUpLabel || "Top up" }))] }))] }));
+                }, children: [p.action, p.onTopUp && (_jsx(Button, { size: "sm", variant: low ? "primary" : "soft", icon: "plus", onClick: p.onTopUp, children: p.topUpLabel || t.topUp }))] }))] }));
 }
 export function ServiceMonitor(p) {
+    const { formatNumber } = useFormat();
     return (_jsx("div", { className: "tf-svcmon", role: "list", "aria-label": p.label, children: (p.items || []).map((s) => (_jsxs("div", { role: "listitem", className: "tf-svcmon-row", children: [_jsx(StatusShape, { status: s.status }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: s.name }), _jsx("small", { children: s.statusLabel || s.status })] }), s.history && (_jsx("span", { className: "tf-svcmon-hist", "aria-hidden": true, children: s.history.map((x, i) => (_jsx("i", { className: "tf-st-" + x }, i))) })), _jsx("span", { className: "tf-svcmon-num", children: s.latency != null ? formatNumber(s.latency) + " ms" : "—" }), _jsx("span", { className: cx("tf-svcmon-num", (s.errorRate ?? 0) > 1 && "bad"), children: s.errorRate != null
                         ? formatNumber(s.errorRate / 100, {
                             style: "percent",
@@ -202,6 +213,7 @@ export function ServiceMonitor(p) {
                         : "—" }), _jsx("span", { className: "tf-svcmon-time", children: s.checked })] }, s.id || s.name))) }));
 }
 export function RunHistory(p) {
+    const { formatNumber } = useFormat();
     const open = React.useState(null);
     return (_jsx("div", { className: "tf-runs", role: "list", "aria-label": p.label, children: (p.items || []).map((r) => {
             const on = open[0] === r.id;
@@ -213,6 +225,8 @@ export function RunHistory(p) {
         }) }));
 }
 export function WebhookEndpoint(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatNumber } = useFormat();
     const open = React.useState(!!p.defaultOpen);
     return (_jsxs("div", { className: "tf-hook", children: [_jsxs("div", { className: "tf-hook-head", children: [_jsx(TintIcon, { icon: "webhook", tint: "lilac", size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
                             minWidth: 0,
@@ -220,64 +234,67 @@ export function WebhookEndpoint(p) {
                         }, children: [_jsx("b", { className: "tf-mono tf-hook-url", children: p.url }), _jsx("small", { children: (p.events || []).join(", ") })] }), _jsx(StatusIndicator, { status: p.status || "ok", label: p.statusLabel, size: "sm" }), p.successRate != null && (_jsx("span", { className: "tf-hook-rate", children: formatNumber(p.successRate / 100, {
                             style: "percent",
                             maximumFractionDigits: 1,
-                        }) })), p.onToggle && (_jsx(Switch, { checked: p.enabled !== false, onChange: p.onToggle, label: "Enabled" })), p.menu && (_jsx(Popover, { width: 200, trigger: (s) => _jsx(IconButton, { icon: "more", size: "sm", label: "More", onClick: s.toggle }), children: () => _jsx(Menu, { items: p.menu || [] }) }))] }), p.secret && p.secret, (p.deliveries || []).length > 0 && (_jsx(Collapsible, { title: "Recent deliveries", meta: formatNumber((p.deliveries || []).length), open: open[0], onOpenChange: open[1], children: _jsx("div", { className: "tf-hook-dl", children: (p.deliveries || []).map((d) => {
+                        }) })), p.onToggle && (_jsx(Switch, { checked: p.enabled !== false, onChange: p.onToggle, label: t.enabled })), p.menu && (_jsx(Popover, { width: 200, trigger: (s) => _jsx(IconButton, { icon: "more", size: "sm", label: t.more, onClick: s.toggle }), children: () => _jsx(Menu, { items: p.menu || [] }) }))] }), p.secret && p.secret, (p.deliveries || []).length > 0 && (_jsx(Collapsible, { title: t.recentDeliveries, meta: formatNumber((p.deliveries || []).length), open: open[0], onOpenChange: open[1], children: _jsx("div", { className: "tf-hook-dl", children: (p.deliveries || []).map((d) => {
                         const ok = d.code != null && d.code >= 200 && d.code < 300;
                         return (_jsxs("div", { className: "tf-hook-dl-row", children: [_jsx("span", { className: cx("tf-hook-code", ok ? "ok" : "bad"), children: d.code || "—" }), _jsx("span", { className: "tf-mono", children: d.event }), _jsxs("span", { className: "tf-hook-dl-time", children: [d.time, d.ms != null && " · " + formatNumber(d.ms) + " ms"] }), !ok && p.onRetry && (_jsx(Button, { size: "sm", variant: "soft", icon: "refresh", onClick: () => {
                                         p.onRetry?.(d);
-                                    }, children: "Retry" }))] }, d.id));
+                                    }, children: t.retry }))] }, d.id));
                     }) }) }))] }));
 }
 export function BackupList(p) {
+    const t = useStrings(ADMIN_STRINGS);
     return (_jsxs("div", { className: "tf-backups", role: "list", "aria-label": p.label, children: [(p.items || []).map((b) => (_jsxs("div", { role: "listitem", className: "tf-backups-row", children: [_jsx(StatusShape, { status: b.status || "ok" }), _jsxs("span", { className: "tf-option-text", children: [_jsx("b", { children: b.name || b.time }), _jsx("small", { children: [b.kind, b.where, b.retention].filter(Boolean).join(" · ") })] }), _jsx("span", { className: "tf-backups-size", children: b.size }), _jsxs("span", { className: "tf-row", style: {
                             gap: 4,
-                        }, children: [p.onDownload && (_jsx(IconButton, { icon: "download", size: "sm", label: "Download", onClick: () => {
+                        }, children: [p.onDownload && (_jsx(IconButton, { icon: "download", size: "sm", label: t.download, onClick: () => {
                                     p.onDownload?.(b);
                                 } })), p.onRestore && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => {
                                     p.onRestore?.(b);
-                                }, children: "Restore" }))] })] }, b.id))), p.footer && _jsx("div", { className: "tf-backups-foot", children: p.footer })] }));
+                                }, children: t.restore }))] })] }, b.id))), p.footer && _jsx("div", { className: "tf-backups-foot", children: p.footer })] }));
 }
 export function BlockList(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const q = React.useState("");
     const list = (p.items || []).filter((b) => !q[0] || (b.value + " " + (b.reason || "")).toLowerCase().indexOf(q[0].toLowerCase()) > -1);
     return (_jsxs("div", { className: "tf-col", style: {
             gap: 12,
-        }, children: [_jsxs("div", { className: "tf-filterbar", children: [_jsx(SearchField, { placeholder: p.searchPlaceholder || "Search blocked entries", value: q[0], onChange: (e) => {
+        }, children: [_jsxs("div", { className: "tf-filterbar", children: [_jsx(SearchField, { placeholder: p.searchPlaceholder || t.searchBlocked, value: q[0], onChange: (e) => {
                             q[1](e.target.value);
                         }, style: {
                             flex: "1 1 220px",
                             minWidth: 0,
-                        } }), p.onAdd && (_jsx(Button, { size: "sm", icon: "plus", onClick: p.onAdd, children: p.addLabel || "Block" }))] }), list.length === 0 ? (_jsx("p", { className: "tf-card-desc", children: p.emptyText || "Nothing blocked." })) : (_jsx("div", { className: "tf-blocks", role: "list", children: list.map((b) => (_jsxs("div", { role: "listitem", className: "tf-blocks-row", children: [_jsx(Icon, { name: "ban", size: 15 }), _jsxs("span", { className: "tf-option-text", style: {
+                        } }), p.onAdd && (_jsx(Button, { size: "sm", icon: "plus", onClick: p.onAdd, children: p.addLabel || t.block }))] }), list.length === 0 ? (_jsx("p", { className: "tf-card-desc", children: p.emptyText || t.nothingBlocked })) : (_jsx("div", { className: "tf-blocks", role: "list", children: list.map((b) => (_jsxs("div", { role: "listitem", className: "tf-blocks-row", children: [_jsx(Icon, { name: "ban", size: 15 }), _jsxs("span", { className: "tf-option-text", style: {
                                 minWidth: 0,
-                            }, children: [_jsx("b", { className: "tf-mono", children: b.value }), _jsx("small", { children: [b.kind, b.reason].filter(Boolean).join(" · ") })] }), _jsx("span", { className: "tf-blocks-meta", children: [b.by, b.until ? `until ${b.until}` : "permanent"].filter(Boolean).join(" · ") }), p.onRemove && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                            }, children: [_jsx("b", { className: "tf-mono", children: b.value }), _jsx("small", { children: [b.kind, b.reason].filter(Boolean).join(" · ") })] }), _jsx("span", { className: "tf-blocks-meta", children: [b.by, b.until ? t.until(b.until) : t.permanent].filter(Boolean).join(" · ") }), p.onRemove && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                 p.onRemove?.(b);
-                            }, children: p.removeLabel || "Unblock" }))] }, b.id))) }))] }));
+                            }, children: p.removeLabel || t.unblock }))] }, b.id))) }))] }));
 }
 /* ── Reviews and coupons ── */
 /* ── Reviews and coupons ── */
 export function ReviewCard(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const reply = React.useState(false), txt = React.useState(p.reply || "");
     const st = {
-        pending: ["signal", "Waiting"],
-        published: ["ok", "Published"],
-        hidden: ["idle", "Hidden"],
-        flagged: ["warn", "Flagged"],
+        pending: ["signal", t.reviewState.pending],
+        published: ["ok", t.reviewState.published],
+        hidden: ["idle", t.reviewState.hidden],
+        flagged: ["warn", t.reviewState.flagged],
     }[p.state || "pending"];
     return (_jsxs("article", { className: cx("tf-review", "is-" + (p.state || "pending")), children: [_jsxs("div", { className: "tf-review-head", children: [_jsx(Avatar, { name: p.author, size: 36 }), _jsxs("div", { className: "tf-option-text", style: {
                             flex: 1,
-                        }, children: [_jsxs("b", { children: [p.author, p.verified && (_jsxs("span", { className: "tf-review-ver", children: [" · ", "Verified purchase"] }))] }), _jsx("small", { children: [p.product, p.date].filter(Boolean).join(" · ") })] }), _jsx(Rating, { value: p.rating }), _jsx(StatusIndicator, { status: st[0], label: p.stateLabel || st[1], size: "sm" })] }), p.title && _jsx("b", { className: "tf-review-title", children: p.title }), _jsx("p", { className: "tf-review-text", children: p.highlight ? markWords(p.text, p.highlight) : p.text }), p.reply && !reply[0] && (_jsxs("div", { className: "tf-review-reply", children: [_jsx("small", { children: p.replyLabel || "Your reply" }), p.reply] })), reply[0] && (_jsxs("div", { className: "tf-col", style: {
+                        }, children: [_jsxs("b", { children: [p.author, p.verified && (_jsxs("span", { className: "tf-review-ver", children: [" · ", t.verifiedPurchase] }))] }), _jsx("small", { children: [p.product, p.date].filter(Boolean).join(" · ") })] }), _jsx(Rating, { value: p.rating }), _jsx(StatusIndicator, { status: st[0], label: p.stateLabel || st[1], size: "sm" })] }), p.title && _jsx("b", { className: "tf-review-title", children: p.title }), _jsx("p", { className: "tf-review-text", children: p.highlight ? markWords(p.text, p.highlight) : p.text }), p.reply && !reply[0] && (_jsxs("div", { className: "tf-review-reply", children: [_jsx("small", { children: p.replyLabel || t.yourReply }), p.reply] })), reply[0] && (_jsxs("div", { className: "tf-col", style: {
                     gap: 8,
                 }, children: [_jsx("textarea", { className: "tf-input", rows: 3, value: txt[0], onChange: (e) => {
                             txt[1](e.target.value);
-                        }, placeholder: "Write a public reply", "aria-label": "Reply" }), _jsxs("div", { className: "tf-row", style: {
+                        }, placeholder: t.writeReply, "aria-label": t.reply }), _jsxs("div", { className: "tf-row", style: {
                             justifyContent: "flex-end",
                         }, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                     reply[1](false);
-                                }, children: "Cancel" }), _jsx(Button, { size: "sm", icon: "send", onClick: () => {
+                                }, children: t.cancel }), _jsx(Button, { size: "sm", icon: "send", onClick: () => {
                                     p.onReply && p.onReply(txt[0]);
                                     reply[1](false);
-                                }, children: "Post reply" })] })] })), !reply[0] && (_jsxs("div", { className: "tf-review-actions", children: [p.state !== "published" && p.onPublish && (_jsx(Button, { size: "sm", icon: "check", onClick: p.onPublish, children: "Publish" })), p.state !== "hidden" && p.onHide && (_jsx(Button, { size: "sm", variant: "secondary", icon: "eye", onClick: p.onHide, children: "Hide" })), p.onReply && (_jsx(Button, { size: "sm", variant: "ghost", icon: "reply", onClick: () => {
+                                }, children: t.postReply })] })] })), !reply[0] && (_jsxs("div", { className: "tf-review-actions", children: [p.state !== "published" && p.onPublish && (_jsx(Button, { size: "sm", icon: "check", onClick: p.onPublish, children: t.publish })), p.state !== "hidden" && p.onHide && (_jsx(Button, { size: "sm", variant: "secondary", icon: "eye", onClick: p.onHide, children: t.hide })), p.onReply && (_jsx(Button, { size: "sm", variant: "ghost", icon: "reply", onClick: () => {
                             reply[1](true);
-                        }, children: p.reply ? "Edit reply" : "Reply" }))] }))] }));
+                        }, children: p.reply ? t.editReply : t.reply }))] }))] }));
 }
 function markWords(text, words) {
     const re = new RegExp("(" + words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") + ")", "gi");
@@ -286,6 +303,8 @@ function markWords(text, words) {
         .map((part, i) => (i % 2 ? _jsx("mark", { children: part }, i) : part));
 }
 export function CouponCard(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatMoney, formatNumber } = useFormat();
     const used = p.used || 0, st = p.status || (p.limit && used >= p.limit ? "idle" : "ok");
     return (_jsxs("div", { className: cx("tf-coupon", st !== "ok" && "off"), children: [_jsxs("div", { className: "tf-coupon-val", children: [_jsx("b", { children: p.kind === "fixed"
                             ? formatMoney(p.value, p.currency)
@@ -293,7 +312,7 @@ export function CouponCard(p) {
                                 style: "percent",
                             }) }), _jsx("small", { children: p.kind === "fixed" ? "off" : "off" })] }), _jsxs("div", { className: "tf-coupon-main", children: [_jsxs("div", { className: "tf-row", style: {
                             gap: 8,
-                        }, children: [_jsxs("button", { type: "button", className: "tf-coupon-code", title: "Copy", onClick: () => {
+                        }, children: [_jsxs("button", { type: "button", className: "tf-coupon-code", title: t.copy, onClick: () => {
                                     try {
                                         navigator.clipboard.writeText(p.code);
                                     }
@@ -302,21 +321,22 @@ export function CouponCard(p) {
                                     }
                                     toast &&
                                         toast({
-                                            text: "Copied",
+                                            text: t.copied,
                                         });
                                     p.onCopy && p.onCopy();
                                 }, children: [p.code, _jsx(Icon, { name: "copy", size: 13 })] }), _jsx(StatusIndicator, { status: st, label: p.statusLabel, size: "sm" })] }), p.text && _jsx("small", { className: "tf-coupon-text", children: p.text }), _jsx(Meter, { value: used, max: p.limit || Math.max(used, 1), text: p.limit
-                            ? `${formatNumber(used)} of ${formatNumber(p.limit)} used`
-                            : `${formatNumber(used)} used`, tone: "sky", warn: 101, danger: 101 }), _jsx("span", { className: "tf-coupon-foot", children: [
-                            p.until && `Valid until ${p.until}`,
-                            p.min != null && `from ${formatMoney(p.min, p.currency)}`,
-                            p.revenue != null && `${formatMoney(p.revenue, p.currency)} revenue`,
+                            ? t.usedOf(formatNumber(used), formatNumber(p.limit))
+                            : t.used(formatNumber(used)), tone: "sky", warn: 101, danger: 101 }), _jsx("span", { className: "tf-coupon-foot", children: [
+                            p.until && t.validUntil(p.until),
+                            p.min != null && t.fromAmount(formatMoney(p.min, p.currency)),
+                            p.revenue != null && t.revenue(formatMoney(p.revenue, p.currency)),
                         ]
                             .filter(Boolean)
-                            .join(" · ") })] }), p.menu && (_jsx(Popover, { width: 200, trigger: (s) => _jsx(IconButton, { icon: "more", size: "sm", label: "More", onClick: s.toggle }), children: () => _jsx(Menu, { items: p.menu || [] }) }))] }));
+                            .join(" · ") })] }), p.menu && (_jsx(Popover, { width: 200, trigger: (s) => _jsx(IconButton, { icon: "more", size: "sm", label: t.more, onClick: s.toggle }), children: () => _jsx(Menu, { items: p.menu || [] }) }))] }));
 }
 /* ── Locale, workspace and translations ── */
 export function LocaleField(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const locs = p.locales || [], v = useControlled(p.value, p.defaultValue || {}, p.onChange), cur = React.useState(p.active || (locs[0] && locs[0].code)), id = useId("lf");
     const base = p.source || (locs[0] && locs[0].code), val = v[0][cur[0]] || "";
     function set(t) {
@@ -325,12 +345,12 @@ export function LocaleField(p) {
         v[1](n);
     }
     const done = locs.filter((l) => (v[0][l.code] || "").trim()).length;
-    return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, error: p.error, children: _jsxs("div", { className: "tf-locfield", children: [_jsxs("div", { className: "tf-locfield-tabs", role: "tablist", "aria-label": "Languages", children: [locs.map((l) => {
+    return (_jsx(FormField, { id: id, label: p.label, hint: p.hint, error: p.error, children: _jsxs("div", { className: "tf-locfield", children: [_jsxs("div", { className: "tf-locfield-tabs", role: "tablist", "aria-label": t.languages, children: [locs.map((l) => {
                             const has = (v[0][l.code] || "").trim();
                             return (_jsxs("button", { type: "button", role: "tab", "aria-selected": cur[0] === l.code, className: cx("tf-locfield-tab", cur[0] === l.code && "on", !has && "missing"), onClick: () => {
                                     cur[1](l.code);
-                                }, children: [l.flag && _jsx("span", { "aria-hidden": true, children: l.flag }), l.label || l.code.toUpperCase(), !has && _jsx("span", { className: "tf-locfield-miss", title: "Missing" })] }, l.code));
-                        }), _jsx("span", { className: "tf-locfield-done", children: `${done} of ${locs.length}` })] }), p.multiline ? (_jsx("textarea", { id: id, className: "tf-input", rows: p.rows || 3, value: val, onChange: (e) => {
+                                }, children: [l.flag && _jsx("span", { "aria-hidden": true, children: l.flag }), l.label || l.code.toUpperCase(), !has && _jsx("span", { className: "tf-locfield-miss", title: t.missing })] }, l.code));
+                        }), _jsx("span", { className: "tf-locfield-done", children: t.doneOf(done, locs.length) })] }), p.multiline ? (_jsx("textarea", { id: id, className: "tf-input", rows: p.rows || 3, value: val, onChange: (e) => {
                         set(e.target.value);
                     }, placeholder: cur[0] !== base ? v[0][base] || "" : p.placeholder })) : (_jsx("input", { id: id, className: "tf-input", value: val, onChange: (e) => {
                         set(e.target.value);
@@ -338,23 +358,24 @@ export function LocaleField(p) {
                         gap: 8,
                     }, children: [_jsx(Button, { size: "sm", variant: "ghost", icon: "copy", onClick: () => {
                                 set(v[0][base] || "");
-                            }, children: `Copy from ${(locs.find((l) => l.code === base) || {}).label || base}` }), p.onTranslate && (_jsx(Button, { size: "sm", variant: "ghost", icon: "sparkle", onClick: () => {
+                            }, children: t.copyFrom((locs.find((l) => l.code === base) || {}).label || base) }), p.onTranslate && (_jsx(Button, { size: "sm", variant: "ghost", icon: "sparkle", onClick: () => {
                                 Promise.resolve(p.onTranslate?.(v[0][base] || "", cur[0])).then((t) => {
                                     if (t)
                                         set(t);
                                 });
-                            }, children: "Translate" }))] }))] }) }));
+                            }, children: t.translate }))] }))] }) }));
 }
 export function LocaleSwitcher(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const lang = useControlled(p.language, p.languages && p.languages[0] && p.languages[0].code, p.onLanguage), cur = useControlled(p.currency, p.currencies && p.currencies[0], p.onCurrency);
     const L0 = (p.languages || []).find((l) => l.code === lang[0]) || {};
-    return (_jsx(Popover, { width: 280, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-locsw", p.variant === "frame" && "on-frame"), "aria-haspopup": "dialog", "aria-expanded": s.open, onClick: s.toggle, title: "Language and currency", children: [L0.flag ? _jsx("span", { children: L0.flag }) : _jsx(Icon, { name: "globe", size: 15 }), _jsx("span", { children: (L0.short || lang[0] || "").toUpperCase() }), cur[0] && _jsx("span", { className: "tf-locsw-cur", children: cur[0] }), _jsx(Icon, { name: "chevronDown", size: 13 })] })), children: () => (_jsxs("div", { className: "tf-col", style: {
+    return (_jsx(Popover, { width: 280, trigger: (s) => (_jsxs("button", { type: "button", className: cx("tf-locsw", p.variant === "frame" && "on-frame"), "aria-haspopup": "dialog", "aria-expanded": s.open, onClick: s.toggle, title: t.languageAndCurrency, children: [L0.flag ? _jsx("span", { children: L0.flag }) : _jsx(Icon, { name: "globe", size: 15 }), _jsx("span", { children: (L0.short || lang[0] || "").toUpperCase() }), cur[0] && _jsx("span", { className: "tf-locsw-cur", children: cur[0] }), _jsx(Icon, { name: "chevronDown", size: 13 })] })), children: () => (_jsxs("div", { className: "tf-col", style: {
                 gap: 12,
             }, children: [p.languages && (_jsxs("div", { className: "tf-col", style: {
                         gap: 4,
                     }, children: [_jsx("span", { className: "tf-menu-label", style: {
                                 padding: "0 8px",
-                            }, children: "Language" }), _jsx("div", { className: "tf-menu", style: {
+                            }, children: t.language }), _jsx("div", { className: "tf-menu", style: {
                                 padding: 0,
                                 boxShadow: "none",
                             }, children: p.languages.map((l) => (_jsxs("button", { type: "button", className: cx("tf-menu-item", l.code === lang[0] && "on"), onClick: () => {
@@ -365,7 +386,7 @@ export function LocaleSwitcher(p) {
                         gap: 6,
                     }, children: [_jsx("span", { className: "tf-menu-label", style: {
                                 padding: "0 8px",
-                            }, children: "Currency" }), _jsx(Segmented, { size: "sm", block: true, value: cur[0], onChange: cur[1], options: p.currencies })] }))] })) }));
+                            }, children: t.currency }), _jsx(Segmented, { size: "sm", block: true, value: cur[0], onChange: cur[1], options: p.currencies })] }))] })) }));
 }
 export function WorkspaceSwitcher(p) {
     const items = p.items || [], v = useControlled(p.value, items[0] && items[0].id, p.onChange), cur = items.find((x) => x.id === v[0]) || {};
@@ -386,6 +407,8 @@ export function WorkspaceSwitcher(p) {
 /* ── Export and 2FA ── */
 /* ── Export and 2FA ── */
 export function ExportDialog(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatNumber, formatPercent } = useFormat();
     const fmt = React.useState(p.format || (p.formats || ["csv"])[0]), cols = React.useState((p.columns || []).filter((c) => c.default !== false).map((c) => c.key)), range = React.useState(p.range || null), st = React.useState("form"), prog = React.useState(0);
     if (!p.open && !p.inline)
         return null;
@@ -404,12 +427,12 @@ export function ExportDialog(p) {
             st[1]("done");
         });
     }
-    const body = (_jsxs("div", { className: "tf-modal tf-export", role: "dialog", "aria-modal": p.inline ? undefined : "true", "aria-label": p.title || "Export", children: [_jsx("span", { className: "tf-modal-close", children: _jsx(IconButton, { icon: "x", label: "Close", size: "sm", onClick: p.onClose }) }), _jsxs("div", { children: [_jsx("h2", { className: "tf-modal-title", children: p.title || "Export" }), _jsx("p", { className: "tf-modal-text", style: {
+    const body = (_jsxs("div", { className: "tf-modal tf-export", role: "dialog", "aria-modal": p.inline ? undefined : "true", "aria-label": p.title || t.export, children: [_jsx("span", { className: "tf-modal-close", children: _jsx(IconButton, { icon: "x", label: t.close, size: "sm", onClick: p.onClose }) }), _jsxs("div", { children: [_jsx("h2", { className: "tf-modal-title", children: p.title || t.export }), _jsx("p", { className: "tf-modal-text", style: {
                             marginTop: 6,
-                        }, children: p.text || `${formatNumber(p.count || 0)} rows match your filters.` })] }), st[0] === "form" ? (_jsxs(React.Fragment, { children: [_jsx(FormField, { label: "Format", children: _jsx(Segmented, { block: true, value: fmt[0], onChange: fmt[1], options: (p.formats || ["csv", "xlsx", "json"]).map((f) => ({
+                        }, children: p.text || t.rowsMatch(formatNumber(p.count || 0), p.count || 0) })] }), st[0] === "form" ? (_jsxs(React.Fragment, { children: [_jsx(FormField, { label: t.format, children: _jsx(Segmented, { block: true, value: fmt[0], onChange: fmt[1], options: (p.formats || ["csv", "xlsx", "json"]).map((f) => ({
                                 value: f,
                                 label: f.toUpperCase(),
-                            })) }) }), p.ranges !== false && (_jsx(DatePicker, { label: "Period", range: true, value: range[0], onChange: (r) => range[1](r), placeholder: "All time" })), (p.columns || []).length > 0 && (_jsx(FormField, { label: "Columns", hint: `${cols[0].length} selected`, children: _jsx("div", { className: "tf-export-cols", children: (p.columns || []).map((c) => {
+                            })) }) }), p.ranges !== false && (_jsx(DatePicker, { label: t.period, range: true, value: range[0], onChange: (r) => range[1](r), placeholder: t.allTime })), (p.columns || []).length > 0 && (_jsx(FormField, { label: t.columns, hint: t.selectedCount(cols[0].length), children: _jsx("div", { className: "tf-export-cols", children: (p.columns || []).map((c) => {
                                 const on = cols[0].indexOf(c.key) > -1;
                                 return (_jsxs("label", { className: "tf-check", children: [cbox({
                                             checked: on,
@@ -419,66 +442,67 @@ export function ExportDialog(p) {
                                         }), c.label] }, c.key));
                             }) }) })), p.note && (_jsx("p", { className: "tf-card-desc", style: {
                             margin: 0,
-                        }, children: p.note })), _jsxs("div", { className: "tf-modal-foot", children: [_jsx(Button, { variant: "ghost", onClick: p.onClose, children: "Cancel" }), _jsx(Button, { icon: "download", disabled: !cols[0].length && (p.columns || []).length > 0, onClick: start, children: "Export" })] })] })) : st[0] === "running" ? (_jsxs("div", { className: "tf-col", style: {
+                        }, children: p.note })), _jsxs("div", { className: "tf-modal-foot", children: [_jsx(Button, { variant: "ghost", onClick: p.onClose, children: t.cancel }), _jsx(Button, { icon: "download", disabled: !cols[0].length && (p.columns || []).length > 0, onClick: start, children: t.export })] })] })) : st[0] === "running" ? (_jsxs("div", { className: "tf-col", style: {
                     gap: 8,
-                }, children: [_jsx(Progress, { value: prog[0], label: "Export progress" }), _jsx("span", { className: "tf-card-desc", children: "Preparing the file…" + " " + Math.round(prog[0]) + "%" })] })) : (_jsxs(React.Fragment, { children: [_jsx(StatusIndicator, { status: "ok", label: p.doneText || "Your file is ready." }), _jsxs("div", { className: "tf-modal-foot", children: [_jsx(Button, { variant: "ghost", onClick: () => {
+                }, children: [_jsx(Progress, { value: prog[0], label: t.exportProgress }), _jsx("span", { className: "tf-card-desc", children: t.preparingFile + " " + formatPercent(Math.round(prog[0])) })] })) : (_jsxs(React.Fragment, { children: [_jsx(StatusIndicator, { status: "ok", label: p.doneText || t.fileReady }), _jsxs("div", { className: "tf-modal-foot", children: [_jsx(Button, { variant: "ghost", onClick: () => {
                                     st[1]("form");
-                                }, children: "New export" }), p.download || (_jsx(Button, { icon: "download", onClick: p.onDownload, children: "Download" }))] })] }))] }));
+                                }, children: t.newExport }), p.download || (_jsx(Button, { icon: "download", onClick: p.onDownload, children: t.download }))] })] }))] }));
     return p.inline ? (body) : (_jsx(Portal, { children: _jsxs("div", { className: "tf-overlay", children: [_jsx("div", { className: "tf-backdrop", onClick: p.onClose }), body] }) }));
 }
 export function TwoFactorSetup(p) {
+    const t = useStrings(ADMIN_STRINGS);
     const step = React.useState(p.step || 0), err = React.useState(null), saved = React.useState(false);
-    const steps = ["Scan", "Confirm", "Save codes"];
-    return (_jsxs("div", { className: "tf-2fa", children: [_jsx("ol", { className: "tf-2fa-steps", children: steps.map((s, i) => (_jsxs("li", { className: cx(i === step[0] && "on", i < step[0] && "done"), children: [_jsx("span", { children: i < step[0] ? _jsx(Icon, { name: "check", size: 12 }) : i + 1 }), s] }, i))) }), step[0] === 0 && (_jsxs("div", { className: "tf-2fa-scan", children: [_jsx("div", { className: "tf-2fa-qr", role: "img", "aria-label": "QR code", children: p.qr || _jsx(Icon, { name: "grid", size: 48 }) }), _jsxs("div", { className: "tf-col", style: {
+    const steps = t.twoFactorSteps;
+    return (_jsxs("div", { className: "tf-2fa", children: [_jsx("ol", { className: "tf-2fa-steps", children: steps.map((s, i) => (_jsxs("li", { className: cx(i === step[0] && "on", i < step[0] && "done"), children: [_jsx("span", { children: i < step[0] ? _jsx(Icon, { name: "check", size: 12 }) : i + 1 }), s] }, i))) }), step[0] === 0 && (_jsxs("div", { className: "tf-2fa-scan", children: [_jsx("div", { className: "tf-2fa-qr", role: "img", "aria-label": t.qrCode, children: p.qr || _jsx(Icon, { name: "grid", size: 48 }) }), _jsxs("div", { className: "tf-col", style: {
                             gap: 12,
                             minWidth: 0,
                         }, children: [_jsx("p", { className: "tf-card-desc", style: {
                                     margin: 0,
-                                }, children: p.scanText ||
-                                    "Scan the code with your authenticator app. If you can't scan it, enter the key by hand." }), _jsxs("button", { type: "button", className: "tf-2fa-key", onClick: () => {
+                                }, children: p.scanText || t.scanText }), _jsxs("button", { type: "button", className: "tf-2fa-key", onClick: () => {
                                     try {
                                         navigator.clipboard.writeText(p.secret);
                                     }
                                     catch {
                                         /* clipboard unavailable */
                                     }
-                                    toast && toast({ text: "Copied" });
+                                    toast && toast({ text: t.copied });
                                 }, children: [_jsx("span", { className: "tf-mono", children: (p.secret || "").replace(/(.{4})/g, "$1 ").trim() }), _jsx(Icon, { name: "copy", size: 14 })] }), _jsx("div", { children: _jsx(Button, { onClick: () => {
                                         step[1](1);
-                                    }, children: "Next" }) })] })] })), step[0] === 1 && (_jsxs("div", { className: "tf-col", style: {
+                                    }, children: t.next }) })] })] })), step[0] === 1 && (_jsxs("div", { className: "tf-col", style: {
                     gap: 12,
                 }, children: [_jsx("p", { className: "tf-card-desc", style: {
                             margin: 0,
-                        }, children: "Enter the 6-digit code from the app." }), _jsx(OtpInput, { error: !!err[0], onComplete: (c) => {
+                        }, children: t.enterCode }), _jsx(OtpInput, { error: !!err[0], onComplete: (c) => {
                             Promise.resolve(p.onVerify ? p.onVerify(c) : true).then((ok) => {
                                 if (ok) {
                                     err[1](null);
                                     step[1](2);
                                 }
                                 else
-                                    err[1]("That code didn't work. Try the current one.");
+                                    err[1](t.codeFailed);
                             });
                         } }), err[0] && _jsx("span", { className: "tf-field-error", children: err[0] }), _jsx("div", { children: _jsx(Button, { variant: "ghost", onClick: () => {
                                 step[1](0);
-                            }, children: "Back" }) })] })), step[0] === 2 && (_jsxs("div", { className: "tf-col", style: {
+                            }, children: t.back }) })] })), step[0] === 2 && (_jsxs("div", { className: "tf-col", style: {
                     gap: 12,
                 }, children: [_jsx("p", { className: "tf-card-desc", style: {
                             margin: 0,
-                        }, children: p.codesText ||
-                            "Each code works once if you lose your phone. Keep them somewhere safe." }), _jsx("div", { className: "tf-2fa-codes", children: (p.codes || []).map((c) => (_jsx("code", { children: c }, c))) }), _jsxs("div", { className: "tf-row", children: [_jsx(Button, { variant: "secondary", icon: "copy", onClick: () => {
+                        }, children: p.codesText || t.codesText }), _jsx("div", { className: "tf-2fa-codes", children: (p.codes || []).map((c) => (_jsx("code", { children: c }, c))) }), _jsxs("div", { className: "tf-row", children: [_jsx(Button, { variant: "secondary", icon: "copy", onClick: () => {
                                     try {
                                         navigator.clipboard.writeText((p.codes || []).join("\n"));
                                     }
                                     catch {
                                         /* clipboard unavailable */
                                     }
-                                    toast && toast({ text: "Copied" });
-                                }, children: "Copy" }), p.onDownload && (_jsx(Button, { variant: "secondary", icon: "download", onClick: p.onDownload, children: "Download" }))] }), _jsx(Checkbox, { checked: saved[0], onChange: () => {
+                                    toast && toast({ text: t.copied });
+                                }, children: t.copy }), p.onDownload && (_jsx(Button, { variant: "secondary", icon: "download", onClick: p.onDownload, children: t.download }))] }), _jsx(Checkbox, { checked: saved[0], onChange: () => {
                             saved[1](!saved[0]);
-                        }, children: "I saved the recovery codes" }), _jsx("div", { children: _jsx(Button, { icon: "check", disabled: !saved[0], onClick: p.onDone, children: "Turn on two-factor" }) })] }))] }));
+                        }, children: t.savedCodes }), _jsx("div", { children: _jsx(Button, { icon: "check", disabled: !saved[0], onClick: p.onDone, children: t.turnOnTwoFactor }) })] }))] }));
 }
 /* ── Media ── */
 export function ColorField(p) {
+    const t = useStrings(ADMIN_STRINGS);
+    const { formatNumber } = useFormat();
     const id = useId("cf"), v = useControlled(p.value, p.defaultValue || "#000000", p.onChange);
     function lum(hx) {
         const m = /^#?([0-9a-f]{6})$/i.exec(hx || "");
@@ -495,12 +519,12 @@ export function ColorField(p) {
                         background: v[0],
                     }, children: _jsx("input", { type: "color", value: /^#[0-9a-f]{6}$/i.test(v[0]) ? v[0] : "#000000", onChange: (e) => {
                             v[1](e.target.value);
-                        }, "aria-label": "Pick a colour" }) }), _jsx("input", { id: id, "aria-label": p.label ? undefined : "Pick a colour", className: "tf-input tf-mono", value: v[0], onChange: (e) => {
+                        }, "aria-label": t.pickColour }) }), _jsx("input", { id: id, "aria-label": p.label ? undefined : t.pickColour, className: "tf-input tf-mono", value: v[0], onChange: (e) => {
                         v[1](e.target.value);
-                    }, spellCheck: false }), ratio != null && p.against !== false && (_jsx("span", { className: cx("tf-colorf-ratio", ratio >= 4.5 ? "ok" : ratio >= 3 ? "warn" : "bad"), title: `Contrast against ${p.against || "#ffffff"}`, children: formatNumber(ratio, {
+                    }, spellCheck: false }), ratio != null && p.against !== false && (_jsx("span", { className: cx("tf-colorf-ratio", ratio >= 4.5 ? "ok" : ratio >= 3 ? "warn" : "bad"), title: t.contrastAgainst(p.against || "#ffffff"), children: formatNumber(ratio, {
                         maximumFractionDigits: 1,
                     }) +
                         ":1 " +
-                        (ratio >= 4.5 ? "AA" : ratio >= 3 ? "AA large" : "Fails") }))] }) }));
+                        (ratio >= 4.5 ? t.contrastAA : ratio >= 3 ? t.contrastAALarge : t.contrastFails) }))] }) }));
 }
 //# sourceMappingURL=admin.js.map