efficient-shell 4.126.4 → 4.131.0

package/dist/{chunk-4TVV2BIU.js → chunk-BJ34QOR3.js}

@@ -1,13 +1,16 @@
-import { Breadcrumbs } from './chunk-HNH7FOYB.js';
-import { BrandMark } from './chunk-6XQHH7D2.js';
-import { SidebarLayout } from './chunk-YG45DAUT.js';
-import { toast_default } from './chunk-2VM2FRZJ.js';
-import { BUTTON_BASE, BUTTON_VARIANTS, useIsMobile, Button_default, useShellPrefs } from './chunk-YNHLQ24V.js';
-import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-N3CG5HG5.js';
-import { useShellStrings, PopupMenu, PopupMenuItem } from './chunk-7KIOEKHS.js';
-import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-HYZ5QMVO.js';
-import { glassStyle } from './chunk-3CUSBZWG.js';
-import { forwardRef, useCallback, useState, useRef, useId, useEffect, createContext, useLayoutEffect, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore } from 'react';
+import { Breadcrumbs } from './chunk-CGXMWHQW.js';
+import { SidebarLayout } from './chunk-FONEQRBH.js';
+import { BrandMark } from './chunk-TRCWINHF.js';
+import { toast_default } from './chunk-EENVXIVU.js';
+import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-TQURTLK2.js';
+import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-CLGNTGC5.js';
+import { BUTTON_BASE, BUTTON_VARIANTS, Button_default } from './chunk-LQTVTOSY.js';
+import { PopupMenu, PopupMenuItem } from './chunk-E3TWIN7Z.js';
+import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-XH3ELPQZ.js';
+import { glassStyle } from './chunk-D276EMXS.js';
+import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-7IN7YZAL.js';
+import { useBrowserLayoutEffect, useBrowserValue, useBrowserValueOnce } from './chunk-IRWSRJ4K.js';
+import { forwardRef, useCallback, useState, useRef, useId, useEffect, createContext, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -36,7 +39,7 @@ var IconButton_default = IconButton;
 
 // src/forms/styles.ts
 var INPUT_SHAPE_PRE = "block w-full rounded-md border border-gray-300 bg-white";
-var INPUT_SHAPE_POST = "text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
+var INPUT_SHAPE_POST = "text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring)]";
 var INPUT_SIZES = {
   // The desktop rungs carry no explicit height: a text control's height should
   // follow its own font, or a long label wraps out of a box that was pinned.
@@ -52,7 +55,7 @@ var INPUT_SIZES = {
   touch: "h-14 px-4 text-base"
 };
 var INPUT_BASE = `${INPUT_SHAPE_PRE} ${INPUT_SIZES.md} ${INPUT_SHAPE_POST}`;
-var INPUT_INVALID = "border-red-300 focus:border-red-400 focus:ring-red-400/30";
+var INPUT_INVALID = "border-red-300 focus:border-red-400 focus-visible:ring-[color:var(--rosh-focus-ring-invalid)]";
 var INPUT_DISABLED = "disabled:cursor-not-allowed disabled:opacity-60";
 function inputClasses(opts) {
   const shape = opts?.size && opts.size !== "md" ? `${INPUT_SHAPE_PRE} ${INPUT_SIZES[opts.size]} ${INPUT_SHAPE_POST}` : INPUT_BASE;
@@ -134,7 +137,7 @@ function useDropdownPosition(triggerRef, open, options = {}) {
     preferredMaxHeight = MENU_MAX_HEIGHT
   } = options;
   const [pos, setPos] = useState(null);
-  useLayoutEffect(() => {
+  useBrowserLayoutEffect(() => {
     if (!open) {
       setPos(null);
       return;
@@ -493,7 +496,7 @@ var Select = forwardRef(function Select2({ touchSize = "touch", ...props }, ref)
   return isMobile ? /* @__PURE__ */ jsx(NativeSelect, { ref, ...props, size: touchSize }) : /* @__PURE__ */ jsx(ListboxSelect, { ref, ...props });
 });
 var Select_default = Select;
-var BOX = "h-4 w-4 shrink-0 rounded border-gray-300 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400/30 disabled:cursor-not-allowed disabled:opacity-60";
+var BOX = "h-4 w-4 shrink-0 rounded border-gray-300 accent-blue-600 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring)] disabled:cursor-not-allowed disabled:opacity-60";
 var Checkbox = forwardRef(function Checkbox2({ checked, onChange, indeterminate = false, label, description, disabled, className = "", ...rest }, ref) {
   const inner = useRef(null);
   useEffect(() => {
@@ -528,7 +531,7 @@ var Checkbox = forwardRef(function Checkbox2({ checked, onChange, indeterminate
   ] });
 });
 var Checkbox_default = Checkbox;
-var DOT = "h-4 w-4 shrink-0 border-gray-300 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400/30 disabled:cursor-not-allowed disabled:opacity-60";
+var DOT = "h-4 w-4 shrink-0 border-gray-300 accent-blue-600 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring)] disabled:cursor-not-allowed disabled:opacity-60";
 var Radio = forwardRef(function Radio2({ checked, onChange, label, description, disabled, className = "", ...rest }, ref) {
   if (!label && !description) {
     return /* @__PURE__ */ jsx(
@@ -686,7 +689,7 @@ function FormErrorSummary({ errors, title, autoFocus = true, className = "" }) {
       ref: boxRef,
       role: "alert",
       tabIndex: -1,
-      className: `rounded-md border border-red-300 bg-red-50 px-4 py-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 ${className}`.trim(),
+      className: `rounded-md border border-red-300 bg-red-50 px-4 py-3 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-invalid-solid)] ${className}`.trim(),
       children: [
         /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-red-800", children: title ?? strings.form.errorSummaryTitle }),
         /* @__PURE__ */ jsx("ul", { className: "mt-1.5 space-y-1", children: errors.map((e, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -737,9 +740,9 @@ function mediaKindWord(accept) {
   if (acceptsImage && !acceptsVideo) return "image";
   return "file";
 }
-function mediaPromptLine(accept) {
+function mediaPromptLine(accept, strings = DEFAULT_SHELL_STRINGS.media) {
   const kind = mediaKindWord(accept);
-  return `Upload ${kind === "image" ? "an image" : `a ${kind}`}`;
+  return kind === "image" ? strings.uploadImage : kind === "video" ? strings.uploadVideo : strings.uploadFile;
 }
 function dropzoneClass(dragOver, locked, extra = "") {
   return [
@@ -749,7 +752,9 @@ function dropzoneClass(dragOver, locked, extra = "") {
     extra
   ].filter(Boolean).join(" ");
 }
-var FOCUS_RING = "0 0 0 2px rgba(59,130,246,0.45)";
+function zoneFocusClass(locked) {
+  return locked ? "rosh-focus-ring" : "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-zone)]";
+}
 function BusyOverlay({ label, rounded = "rounded-lg" }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -768,7 +773,7 @@ function FilenameBadge({ children }) {
     "span",
     {
       className: "absolute inset-x-1 bottom-1 truncate rounded px-1.5 py-0.5 text-xs text-white",
-      style: { background: "rgba(0,0,0,0.6)" },
+      style: { background: "var(--rosh-media-scrim)" },
       children
     }
   );
@@ -825,18 +830,22 @@ function MediaUploadField({
   fit = "cover",
   height = 112,
   placeholder,
-  cta = "Choose from library or upload",
+  cta: ctaProp,
   acceptHint,
   showFilename = true,
   allowReplace = true,
   allowRemove = true,
-  replaceLabel = "Replace",
-  removeLabel = "Remove",
+  replaceLabel: replaceLabelProp,
+  removeLabel: removeLabelProp,
   busy = false,
-  busyLabel = "Uploading\u2026",
+  busyLabel: busyLabelProp,
   disabled = false
 }) {
-  const [focused, setFocused] = useState(false);
+  const strings = useShellStrings().media;
+  const cta = ctaProp ?? strings.cta;
+  const replaceLabel = replaceLabelProp ?? strings.replace;
+  const removeLabel = removeLabelProp ?? strings.remove;
+  const busyLabel = busyLabelProp ?? strings.uploading;
   const fieldId = useId();
   const objectUrlRef = useRef(null);
   const [videoBlobUrl, setVideoBlobUrl] = useState(null);
@@ -845,7 +854,7 @@ function MediaUploadField({
   }, []);
   const locked = disabled || busy;
   const isVideo = !!value && (isVideoUrl(value, accept) || value === videoBlobUrl);
-  const dimLine = placeholder ?? mediaPromptLine(accept);
+  const dimLine = placeholder ?? mediaPromptLine(accept, strings);
   const emitObjectUrl = (file) => {
     if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
     const url = URL.createObjectURL(file);
@@ -921,20 +930,14 @@ function MediaUploadField({
       id: fieldId,
       onClick: () => pick(),
       disabled: locked,
-      "aria-label": typeof dimLine === "string" ? dimLine : "Upload media",
+      "aria-label": typeof dimLine === "string" ? dimLine : strings.upload,
       "aria-busy": busy || void 0,
       "aria-invalid": error ? true : void 0,
       "aria-required": required || void 0,
       "aria-describedby": error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : void 0,
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
       ...intake.zoneProps,
-      className: dropzoneClass(dragOver, locked),
-      style: {
-        minHeight: height,
-        outline: "none",
-        boxShadow: focused && !locked ? FOCUS_RING : void 0
-      },
+      className: dropzoneClass(dragOver, locked, zoneFocusClass(locked)),
+      style: { minHeight: height },
       children: busy ? /* @__PURE__ */ jsxs("span", { role: "status", className: "flex flex-col items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(Spinner, {}),
         /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: busyLabel })
@@ -983,6 +986,7 @@ function BrandAssetEditor({
   const [saving, setSaving] = useState(false);
   const [removing, setRemoving] = useState(false);
   const noun = actionNoun(assetName);
+  const strings = useShellStrings().brandAsset;
   const visibleUrl = stagedUrl || committedUrl || fallbackUrl || "";
   const visibleHasAlpha = stagedFile ? null : committedUrl ? committedHasAlpha : fallbackHasAlpha;
   const visibleIsLight = stagedFile ? null : committedUrl ? committedIsLight : fallbackIsLight;
@@ -1013,7 +1017,7 @@ function BrandAssetEditor({
       setStagedFile(null);
       setStagedUrl("");
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : `Could not save ${noun}.`);
+      setError(cause instanceof Error ? cause.message : strings.saveFailed(noun, assetName));
     } finally {
       setSaving(false);
     }
@@ -1033,12 +1037,12 @@ function BrandAssetEditor({
     try {
       await onRemove();
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : `Could not remove ${noun}.`);
+      setError(cause instanceof Error ? cause.message : strings.removeFailed(noun, assetName));
     } finally {
       setRemoving(false);
     }
   };
-  return /* @__PURE__ */ jsxs("section", { "aria-label": `${assetName} for ${subjectName}`, className: "grid gap-4 lg:grid-cols-2", children: [
+  return /* @__PURE__ */ jsxs("section", { "aria-label": strings.region(assetName, subjectName), className: "grid gap-4 lg:grid-cols-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [
       /* @__PURE__ */ jsx(
         MediaUploadField,
@@ -1048,7 +1052,7 @@ function BrandAssetEditor({
           },
           onFile: stage,
           label: assetName,
-          hint: error || `Used for ${subjectName}.`,
+          hint: error || strings.usedFor(subjectName),
           error: error || void 0,
           accept,
           acceptHint,
@@ -1061,21 +1065,18 @@ function BrandAssetEditor({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-        /* @__PURE__ */ jsxs(Button_default, { onClick: save, disabled: !stagedFile || disabled, loading: saving, children: [
-          "Save ",
-          noun
-        ] }),
-        (stagedFile || committedUrl) && /* @__PURE__ */ jsx(Button_default, { variant: "ghost-danger", onClick: remove, disabled, loading: removing, children: stagedFile ? "Discard change" : `Remove ${noun}` })
+        /* @__PURE__ */ jsx(Button_default, { onClick: save, disabled: !stagedFile || disabled, loading: saving, children: strings.save(noun, assetName) }),
+        (stagedFile || committedUrl) && /* @__PURE__ */ jsx(Button_default, { variant: "ghost-danger", onClick: remove, disabled, loading: removing, children: stagedFile ? strings.discard : strings.remove(noun, assetName) })
       ] })
     ] }),
-    previews.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", "aria-label": `${assetName} previews`, children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Preview" }),
+    previews.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", "aria-label": strings.previews(assetName), children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: strings.preview }),
       /* @__PURE__ */ jsx("div", { className: "mt-3 grid gap-3", children: previews.map((preview) => {
         const mark = /* @__PURE__ */ jsx(
           BrandMark,
           {
             src: visibleUrl,
-            alt: `${subjectName} ${assetName}`,
+            alt: strings.alt(subjectName, assetName),
             slot: preview.slot,
             surface: preview.surface,
             adaptive: true,
@@ -1230,28 +1231,27 @@ function MediaUploadGrid({
   fit = "cover",
   thumbSize = 96,
   placeholder,
-  cta = "Choose from library or upload",
+  cta: ctaProp,
   acceptHint,
   showCover = false,
-  coverLabel = "Cover",
+  coverLabel: coverLabelProp,
   busy = false,
-  busyLabel = "Uploading\u2026",
+  busyLabel: busyLabelProp,
   disabled = false,
   readOnly = false
 }) {
+  const strings = useShellStrings().media;
+  const cta = ctaProp ?? strings.cta;
+  const coverLabel = coverLabelProp ?? strings.cover;
+  const busyLabel = busyLabelProp ?? strings.uploading;
   const gridId = useId();
   const [draggingIndex, setDraggingIndex] = useState(null);
-  const [focusedKey, setFocusedKey] = useState(null);
-  const ringStyle = (key) => ({
-    outline: "none",
-    ...focusedKey === key && !locked ? { boxShadow: FOCUS_RING } : {}
-  });
-  const blurKey = (key) => setFocusedKey((k) => k === key ? null : k);
   const locked = disabled || busy;
   const canAdd = (!!onPick || !!onFiles) && !locked && !readOnly;
   const canRemove = !!onRemove && !locked && !readOnly;
   const reorderEnabled = !!onReorder && !locked && !readOnly;
-  const dimLine = placeholder ?? mediaPromptLine(accept);
+  const focusRing = zoneFocusClass(locked);
+  const dimLine = placeholder ?? mediaPromptLine(accept, strings);
   const intake = useFileIntake({
     accept,
     maxSizeBytes,
@@ -1299,7 +1299,7 @@ function MediaUploadGrid({
           setDraggingIndex(null);
         } : void 0,
         tabIndex: reorderEnabled ? 0 : void 0,
-        "aria-label": reorderEnabled ? `${name}, item ${index + 1} of ${items.length}. Use arrow keys to reorder.` : void 0,
+        "aria-label": reorderEnabled ? strings.reorder(name, index + 1, items.length) : void 0,
         onKeyDown: reorderEnabled ? (e) => {
           if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
             if (index > 0) {
@@ -1313,17 +1313,12 @@ function MediaUploadGrid({
             }
           }
         } : void 0,
-        onFocus: reorderEnabled ? (e) => {
-          if (e.target === e.currentTarget) setFocusedKey(`thumb:${item.id}`);
-        } : void 0,
-        onBlur: reorderEnabled ? (e) => {
-          if (e.target === e.currentTarget) blurKey(`thumb:${item.id}`);
-        } : void 0,
         className: [
           "relative shrink-0 overflow-hidden rounded-md border border-gray-200 bg-gray-100",
+          focusRing,
           draggingIndex === index ? "opacity-50" : ""
         ].join(" "),
-        style: { ...square, cursor: reorderEnabled ? "move" : void 0, ...ringStyle(`thumb:${item.id}`) },
+        style: { ...square, cursor: reorderEnabled ? "move" : void 0 },
         children: [
           video ? /* @__PURE__ */ jsx("video", { src: item.url, muted: true, playsInline: true, preload: "metadata", "aria-label": name, className: "h-full w-full", style: { objectFit: fit } }) : /* @__PURE__ */ jsx("img", { src: item.url, alt: name, className: "h-full w-full", style: { objectFit: fit } }),
           isCover && /* @__PURE__ */ jsx("span", { className: "absolute left-1 top-1 rounded bg-blue-600 px-1.5 py-0.5 text-xs font-medium text-white", children: coverLabel }),
@@ -1333,11 +1328,9 @@ function MediaUploadGrid({
             {
               type: "button",
               onClick: () => onRemove(item.id),
-              "aria-label": `Remove ${name}`,
-              onFocus: () => setFocusedKey(`rm:${item.id}`),
-              onBlur: () => blurKey(`rm:${item.id}`),
-              className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full text-white",
-              style: { background: "rgba(0,0,0,0.55)", ...ringStyle(`rm:${item.id}`) },
+              "aria-label": strings.removeItem(name),
+              className: `absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full text-white ${focusRing}`,
+              style: { background: "var(--rosh-media-scrim-button)" },
               children: REMOVE_ICON
             }
           )
@@ -1351,14 +1344,12 @@ function MediaUploadGrid({
     {
       type: "button",
       onClick: () => pick(),
-      "aria-label": "Add media",
-      onFocus: () => setFocusedKey("add"),
-      onBlur: () => blurKey("add"),
-      className: "flex shrink-0 flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-gray-300 bg-gray-50 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500",
-      style: { ...square, ...ringStyle("add") },
+      "aria-label": strings.addMedia,
+      className: `flex shrink-0 flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-gray-300 bg-gray-50 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500 ${focusRing}`,
+      style: square,
       children: [
         /* @__PURE__ */ jsx(UploadGlyph, { className: "h-5 w-5" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "Add" })
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.add })
       ]
     }
   );
@@ -1367,11 +1358,9 @@ function MediaUploadGrid({
     {
       type: "button",
       onClick: () => pick(),
-      "aria-label": typeof dimLine === "string" ? dimLine : "Upload media",
-      onFocus: () => setFocusedKey("zone"),
-      onBlur: () => blurKey("zone"),
-      className: dropzoneClass(zoneDragOver, false),
-      style: { minHeight: thumbSize + 32, ...ringStyle("zone") },
+      "aria-label": typeof dimLine === "string" ? dimLine : strings.upload,
+      className: dropzoneClass(zoneDragOver, false, focusRing),
+      style: { minHeight: thumbSize + 32 },
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: /* @__PURE__ */ jsx(UploadGlyph, {}) }),
         /* @__PURE__ */ jsx("span", { className: "px-3 text-xs text-gray-500", children: dimLine }),
@@ -1384,7 +1373,7 @@ function MediaUploadGrid({
     {
       className: "flex w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-3 text-xs text-gray-400",
       style: { minHeight: thumbSize + 32 },
-      children: "No media."
+      children: strings.empty
     }
   );
   return /* @__PURE__ */ jsxs(FormField, { label, labelId: label ? `${gridId}-label` : void 0, htmlFor: gridId, hint, error, required, className, children: [
@@ -1400,9 +1389,9 @@ function MediaUploadGrid({
         className: "relative rounded-lg transition-colors",
         style: {
           ...locked ? { opacity: 0.6 } : {},
-          // Inline box-shadow, not `ring-*` — the kit's shipped stylesheet has no
-          // Tailwind ring machinery (see MediaUploadField's focus ring).
-          ...zoneDragOver ? { boxShadow: "0 0 0 2px rgba(59,130,246,0.5)" } : {}
+          // The drop halo, beside the lock's opacity in one style object. Its
+          // colour is `--rosh-drop-ring`, the value it always was.
+          ...zoneDragOver ? { boxShadow: "0 0 0 2px var(--rosh-drop-ring)" } : {}
         },
         children: [
           items.length === 0 ? emptyDropzone : /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
@@ -1417,7 +1406,10 @@ function MediaUploadGrid({
     /* @__PURE__ */ jsx(FileIntakeAlert, { rejections: intake.rejections })
   ] });
 }
-var MONTH_NAMES = [
+
+// src/utils/date.ts
+var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var MONTH_FULL = [
   "January",
   "February",
   "March",
@@ -1431,8 +1423,118 @@ var MONTH_NAMES = [
   "November",
   "December"
 ];
-var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-var DAY_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function monthAbbr(mm) {
+  return MONTH_ABBR[parseInt(mm, 10) - 1] ?? mm;
+}
+function monthFull(mm) {
+  return MONTH_FULL[parseInt(mm, 10) - 1] ?? mm;
+}
+function getUserDateFormat() {
+  if (typeof window === "undefined") return "DD/MM/YYYY";
+  try {
+    return localStorage.getItem("user_date_format") || "DD/MM/YYYY";
+  } catch {
+    return "DD/MM/YYYY";
+  }
+}
+var DEFAULT_DATE_STYLE = { dateStyle: "medium" };
+var dateFormats = /* @__PURE__ */ new Map();
+function dateFormat(locale, options) {
+  const key = `${locale}|${JSON.stringify(options)}`;
+  let format2 = dateFormats.get(key);
+  if (!format2) {
+    format2 = new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC", calendar: "gregory" });
+    dateFormats.set(key, format2);
+  }
+  return format2;
+}
+function formatDate(value, options) {
+  if (!value) return "\u2014";
+  const dateStr = value.includes("T") ? value.split("T")[0] : value;
+  const [y, m, d] = dateStr.split("-").map(Number);
+  if (!y || !m || !d) return value;
+  if (options?.locale) {
+    return dateFormat(options.locale, options.style ?? DEFAULT_DATE_STYLE).format(new Date(Date.UTC(y, m - 1, d)));
+  }
+  const dd = String(d).padStart(2, "0");
+  const mm = String(m).padStart(2, "0");
+  const yyyy = String(y);
+  const fmt2 = getUserDateFormat();
+  switch (fmt2) {
+    case "MM/DD/YYYY":
+      return `${mm}/${dd}/${yyyy}`;
+    case "YYYY-MM-DD":
+      return `${yyyy}-${mm}-${dd}`;
+    case "DD-MM-YYYY":
+      return `${dd}-${mm}-${yyyy}`;
+    case "MM-DD-YYYY":
+      return `${mm}-${dd}-${yyyy}`;
+    case "DD.MM.YYYY":
+      return `${dd}.${mm}.${yyyy}`;
+    case "YYYY.MM.DD":
+      return `${yyyy}.${mm}.${dd}`;
+    case "YYYY/MM/DD":
+      return `${yyyy}/${mm}/${dd}`;
+    case "DD/MM/YY":
+      return `${dd}/${mm}/${yyyy.slice(-2)}`;
+    case "MM/DD/YY":
+      return `${mm}/${dd}/${yyyy.slice(-2)}`;
+    case "DD/MMM/YYYY":
+      return `${dd}/${monthAbbr(mm)}/${yyyy}`;
+    case "DD/MMM/YY":
+      return `${dd}/${monthAbbr(mm)}/${yyyy.slice(-2)}`;
+    case "DD MMM YYYY":
+      return `${dd} ${monthAbbr(mm)} ${yyyy}`;
+    case "MMM DD, YYYY":
+      return `${monthAbbr(mm)} ${dd}, ${yyyy}`;
+    case "DD MMMM YYYY":
+      return `${dd} ${monthFull(mm)} ${yyyy}`;
+    case "MMMM DD, YYYY":
+      return `${monthFull(mm)} ${dd}, ${yyyy}`;
+    case "DD/MM/YYYY":
+    default:
+      return `${dd}/${mm}/${yyyy}`;
+  }
+}
+var WEEKDAY_FULL = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var WEEKDAY_TWO = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var ENGLISH_NAMES = {
+  months: MONTH_FULL,
+  monthsShort: MONTH_ABBR,
+  weekdays: WEEKDAY_FULL,
+  weekdaysShort: WEEKDAY_TWO,
+  monthYear: (year, month) => `${MONTH_FULL[month]} ${year}`,
+  shortMonthYear: (year, month) => `${MONTH_ABBR[month]} ${year}`,
+  longDate: (year, month, day) => `${day} ${MONTH_FULL[month]} ${year}`
+};
+var localeNames = /* @__PURE__ */ new Map();
+function calendarNames(locale) {
+  if (!locale) return ENGLISH_NAMES;
+  const cached = localeNames.get(locale);
+  if (cached) return cached;
+  const fmt2 = (options) => dateFormat(locale, options);
+  const at = (year, month, day = 1) => new Date(Date.UTC(year, month, day));
+  const monthLong = fmt2({ month: "long" });
+  const monthShort = fmt2({ month: "short" });
+  const weekdayLong = fmt2({ weekday: "long" });
+  const weekdayShort = fmt2({ weekday: "short" });
+  const monthYearFmt = fmt2({ month: "long", year: "numeric" });
+  const shortMonthYearFmt = fmt2({ month: "short", year: "numeric" });
+  const longDateFmt = fmt2({ day: "numeric", month: "long", year: "numeric" });
+  const twelve = Array.from({ length: 12 }, (_, m) => m);
+  const seven = Array.from({ length: 7 }, (_, i) => i);
+  const names = {
+    months: twelve.map((m) => monthLong.format(at(2e3, m))),
+    monthsShort: twelve.map((m) => monthShort.format(at(2e3, m))),
+    weekdays: seven.map((i) => weekdayLong.format(at(2e3, 0, 2 + i))),
+    weekdaysShort: seven.map((i) => weekdayShort.format(at(2e3, 0, 2 + i))),
+    monthYear: (year, month) => monthYearFmt.format(at(year, month)),
+    shortMonthYear: (year, month) => shortMonthYearFmt.format(at(year, month)),
+    longDate: (year, month, day) => longDateFmt.format(at(year, month, day))
+  };
+  localeNames.set(locale, names);
+  return names;
+}
 var pad = (n) => String(n).padStart(2, "0");
 function toKey(d) {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
@@ -1447,10 +1549,11 @@ function fromKey(key) {
 var monthKey = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
 var YEARS_PER_PAGE = 12;
 var yearPageStart = (y) => Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE;
-function monthStart(key) {
+function monthStart(key, today) {
   const m = /^(\d{4})-(\d{2})$/.exec(key);
-  return m ? new Date(Number(m[1]), Number(m[2]) - 1, 1) : /* @__PURE__ */ new Date();
+  return m ? new Date(Number(m[1]), Number(m[2]) - 1, 1) : today;
 }
+var readTodayKey = () => toKey(/* @__PURE__ */ new Date());
 function buildCells(view, weekStartsOn) {
   const first = new Date(view.getFullYear(), view.getMonth(), 1);
   const lead = (first.getDay() - weekStartsOn + 7) % 7;
@@ -1479,32 +1582,45 @@ function Calendar({
   className = ""
 }) {
   const selected = fromKey(value);
-  const today = /* @__PURE__ */ new Date();
-  const todayKey = toKey(today);
-  const [innerMonth, setInnerMonth] = useState(() => {
-    if (defaultMonth) return defaultMonth;
-    if (selected) return monthKey(selected);
+  const todayKey = useBrowserValue(readTodayKey, null);
+  const today = fromKey(todayKey);
+  const strings = useShellStrings().calendar;
+  const names = calendarNames(useShellLocale());
+  const openingMonth = () => {
+    if (!today) return null;
     const here = monthKey(today);
     if (min && here < min.slice(0, 7)) return min.slice(0, 7);
     if (max && here > max.slice(0, 7)) return max.slice(0, 7);
     return here;
+  };
+  const [innerMonth, setInnerMonth] = useState(() => {
+    if (defaultMonth) return defaultMonth;
+    if (selected) return monthKey(selected);
+    return openingMonth();
   });
-  const viewMonth = month ?? innerMonth;
-  const view = monthStart(viewMonth);
+  const viewMonth = month ?? innerMonth ?? openingMonth();
+  const view = viewMonth === null ? null : monthStart(viewMonth, today);
   const [active, setActive] = useState(() => value ?? todayKey);
   const gridRef = useRef(null);
   const shouldFocus = useRef(false);
   const [panel, setPanel] = useState("days");
-  const cells = useMemo(() => buildCells(view, weekStartsOn), [viewMonth, weekStartsOn]);
+  const cells = useMemo(() => view ? buildCells(view, weekStartsOn) : [], [viewMonth, weekStartsOn]);
   const outOfRange = (key) => !!min && key < min || !!max && key > max;
-  const activeInView = cells.some((c) => toKey(c) === active);
-  const fallbackActive = toKey(cells.find((c) => c.getMonth() === view.getMonth()) ?? cells[0]);
-  const activeKey = activeInView ? active : fallbackActive;
+  const cursor = active ?? todayKey;
+  const activeInView = cells.some((c) => toKey(c) === cursor);
+  const fallbackCell = view ? cells.find((c) => c.getMonth() === view.getMonth()) ?? cells[0] : null;
+  const activeKey = activeInView && cursor ? cursor : fallbackCell ? toKey(fallbackCell) : "";
   useEffect(() => {
     if (!shouldFocus.current) return;
     shouldFocus.current = false;
     gridRef.current?.querySelector('[data-active="true"]')?.focus();
   }, [activeKey, viewMonth]);
+  if (!view) {
+    return /* @__PURE__ */ jsxs("div", { className, "aria-hidden": "true", "data-calendar-pending": "", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 h-6" }),
+      Array.from({ length: 7 }, (_, row) => /* @__PURE__ */ jsx("div", { className: row === 0 ? "py-1 text-xs" : "py-1.5 min-h-11 sm:min-h-0 text-sm", children: "\xA0" }, row))
+    ] });
+  }
   const pageBy = (n) => {
     if (panel === "years") return new Date(view.getFullYear() + n * YEARS_PER_PAGE, view.getMonth(), 1);
     if (panel === "months") return new Date(view.getFullYear() + n, view.getMonth(), 1);
@@ -1523,7 +1639,7 @@ function Calendar({
     if (monthKey(next) !== viewMonth) goToMonth(next);
   };
   const onKeyDown = (e) => {
-    const current = fromKey(activeKey) ?? today;
+    const current = fromKey(activeKey) ?? today ?? view;
     const step = {
       ArrowLeft: () => addDays(current, -1),
       ArrowRight: () => addDays(current, 1),
@@ -1550,16 +1666,16 @@ function Calendar({
     if (mode !== "range" || !value || !endValue) return false;
     return key > value && key < endValue;
   };
-  const label = ariaLabel ?? `${MONTH_NAMES[view.getMonth()]} ${view.getFullYear()}`;
+  const label = ariaLabel ?? names.monthYear(view.getFullYear(), view.getMonth());
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          "aria-label": panel === "years" ? "Previous years" : panel === "months" ? "Previous year" : "Previous month",
+          "aria-label": panel === "years" ? strings.previousYears : panel === "months" ? strings.previousYear : strings.previousMonth,
           onClick: () => goToMonth(pageBack()),
-          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
           children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
         }
       ),
@@ -1568,39 +1684,35 @@ function Calendar({
           "button",
           {
             type: "button",
-            "aria-label": `Choose a month, currently ${MONTH_NAMES[view.getMonth()]}`,
+            "aria-label": strings.chooseMonth(names.months[view.getMonth()]),
             onClick: () => setPanel((p) => p === "months" ? "days" : "months"),
-            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
-            children: MONTH_NAMES[view.getMonth()]
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
+            children: names.months[view.getMonth()]
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            "aria-label": `Choose a year, currently ${view.getFullYear()}`,
+            "aria-label": strings.chooseYear(view.getFullYear()),
             onClick: () => setPanel((p) => p === "years" ? "days" : "years"),
-            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+            className: "rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-100 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
             children: view.getFullYear()
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("span", { children: [
-        MONTH_NAMES[view.getMonth()],
-        " ",
-        view.getFullYear()
-      ] }) }),
+      ] }) : /* @__PURE__ */ jsx("span", { children: names.monthYear(view.getFullYear(), view.getMonth()) }) }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          "aria-label": panel === "years" ? "Next years" : panel === "months" ? "Next year" : "Next month",
+          "aria-label": panel === "years" ? strings.nextYears : panel === "months" ? strings.nextYear : strings.nextMonth,
           onClick: () => goToMonth(pageForward()),
-          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+          className: "rounded-full p-1 text-gray-600 hover:bg-gray-100 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
           children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
         }
       )
     ] }),
-    panel === "months" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a month", className: "grid grid-cols-3 gap-1 text-center text-sm", children: MONTH_NAMES.map((name, m) => /* @__PURE__ */ jsx(
+    panel === "months" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": strings.monthPanel, className: "grid grid-cols-3 gap-1 text-center text-sm", children: names.monthsShort.map((name, m) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1610,14 +1722,14 @@ function Calendar({
           setPanel("days");
         },
         className: [
-          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
-          m === view.getMonth() ? "bg-blue-600 font-semibold text-white" : m === today.getMonth() && view.getFullYear() === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+          "rounded-md py-4 transition-colors rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
+          m === view.getMonth() ? "bg-blue-600 font-semibold text-white" : today && m === today.getMonth() && view.getFullYear() === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
         ].join(" "),
-        children: name.slice(0, 3)
+        children: name
       },
       name
     )) }),
-    panel === "years" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Choose a year", className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPageStart(view.getFullYear()) + i).map((y) => /* @__PURE__ */ jsx(
+    panel === "years" && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": strings.yearPanel, className: "grid grid-cols-3 gap-1 text-center text-sm", children: Array.from({ length: YEARS_PER_PAGE }, (_, i) => yearPageStart(view.getFullYear()) + i).map((y) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1627,8 +1739,8 @@ function Calendar({
           setPanel("months");
         },
         className: [
-          "rounded-md py-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
-          y === view.getFullYear() ? "bg-blue-600 font-semibold text-white" : y === today.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
+          "rounded-md py-4 transition-colors rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
+          y === view.getFullYear() ? "bg-blue-600 font-semibold text-white" : y === today?.getFullYear() ? "font-medium text-blue-600 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100"
         ].join(" "),
         children: y
       },
@@ -1645,7 +1757,7 @@ function Calendar({
         children: [
           /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-xs font-medium text-gray-500", children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map((d) => (
             // abbr carries the full name: "Su" is read as a word otherwise.
-            /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": DAY_NAMES[d], className: "py-1", children: /* @__PURE__ */ jsx("abbr", { title: DAY_NAMES[d], className: "no-underline", children: DAY_SHORT[d] }) }, d)
+            /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": names.weekdays[d], className: "py-1", children: /* @__PURE__ */ jsx("abbr", { title: names.weekdays[d], className: "no-underline", children: names.weekdaysShort[d] }) }, d)
           )) }),
           Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 text-center text-sm", children: cells.slice(row * 7, row * 7 + 7).map((cell) => {
             const key = toKey(cell);
@@ -1660,7 +1772,7 @@ function Calendar({
                 "data-active": key === activeKey,
                 tabIndex: key === activeKey ? 0 : -1,
                 disabled,
-                "aria-label": `${cell.getDate()} ${MONTH_NAMES[cell.getMonth()]} ${cell.getFullYear()}`,
+                "aria-label": names.longDate(cell.getFullYear(), cell.getMonth(), cell.getDate()),
                 "aria-current": key === todayKey ? "date" : void 0,
                 onClick: () => {
                   setActive(key);
@@ -1671,7 +1783,7 @@ function Calendar({
                   // every touch-target guideline there is, and a date grid
                   // is seven of them side by side — the case where missing
                   // by four pixels picks the wrong day rather than nothing.
-                  "w-full rounded-md py-1.5 min-h-11 sm:min-h-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+                  "w-full rounded-md py-1.5 min-h-11 sm:min-h-0 transition-colors rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
                   disabled ? "cursor-not-allowed text-gray-300" : isSelected ? "bg-blue-600 font-semibold text-white" : between ? "bg-blue-100 text-blue-800" : outside ? "text-gray-300 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100",
                   key === todayKey && !isSelected ? "font-semibold text-blue-600" : ""
                 ].filter(Boolean).join(" "),
@@ -1684,7 +1796,7 @@ function Calendar({
     )
   ] });
 }
-var PRESET_LABELS = ["Last 2 Weeks", "Last Month", "Last 3 Months", "Last 6 Months", "Last 12 Months"];
+var PRESETS = ["last2Weeks", "lastMonth", "last3Months", "last6Months", "last12Months"];
 var monthKeyOf = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`;
 var pad2 = (n) => String(n).padStart(2, "0");
 function toISODate(d) {
@@ -1698,15 +1810,38 @@ function defaultFormatDisplay(s) {
   const [y, m, d] = s.split("-");
   return y && m && d ? `${d}/${m}/${y}` : s;
 }
+var numericDates = /* @__PURE__ */ new Map();
+function localeFormatDisplay(locale) {
+  let format2 = numericDates.get(locale);
+  if (!format2) {
+    format2 = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      timeZone: "UTC",
+      calendar: "gregory"
+    });
+    numericDates.set(locale, format2);
+  }
+  const intl = format2;
+  return (s) => {
+    const [y, m, d] = s.split("-").map(Number);
+    return y && m && d ? intl.format(new Date(Date.UTC(y, m - 1, d))) : s;
+  };
+}
 function DateRangePicker({
   from,
   to,
   onChange,
-  formatDisplay = defaultFormatDisplay,
+  formatDisplay: formatDisplayProp,
   clearable = true,
-  placeholder = "Date Range",
+  placeholder: placeholderProp,
   fullWidth = false
 }) {
+  const strings = useShellStrings().dateRange;
+  const locale = useShellLocale();
+  const formatDisplay = formatDisplayProp ?? (locale ? localeFormatDisplay(locale) : defaultFormatDisplay);
+  const placeholder = placeholderProp ?? strings.placeholder;
   const [open, setOpen] = useState(false);
   const [tempFrom, setTempFrom] = useState(from);
   const [tempTo, setTempTo] = useState(to);
@@ -1741,27 +1876,27 @@ function DateRangePicker({
     setViewMonth(monthKeyOf(from ? parseDate(from) : now));
     setOpen(true);
   };
-  const handlePreset = (label) => {
+  const handlePreset = (preset) => {
     let start, end;
-    switch (label) {
-      case "Last 2 Weeks":
+    switch (preset) {
+      case "last2Weeks":
         end = /* @__PURE__ */ new Date();
         start = /* @__PURE__ */ new Date();
         start.setDate(start.getDate() - 14);
         break;
-      case "Last Month":
+      case "lastMonth":
         start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
         end = new Date(now.getFullYear(), now.getMonth(), 0);
         break;
-      case "Last 3 Months":
+      case "last3Months":
         start = new Date(now.getFullYear(), now.getMonth() - 3, 1);
         end = new Date(now.getFullYear(), now.getMonth(), 0);
         break;
-      case "Last 6 Months":
+      case "last6Months":
         start = new Date(now.getFullYear(), now.getMonth() - 6, 1);
         end = new Date(now.getFullYear(), now.getMonth(), 0);
         break;
-      case "Last 12 Months":
+      case "last12Months":
         start = new Date(now.getFullYear(), now.getMonth() - 12, 1);
         end = new Date(now.getFullYear(), now.getMonth(), 0);
         break;
@@ -1770,7 +1905,7 @@ function DateRangePicker({
     }
     setTempFrom(toISODate(start));
     setTempTo(toISODate(end));
-    setActivePreset(label);
+    setActivePreset(preset);
     setViewMonth(monthKeyOf(start));
   };
   const handleCalendarSelect = (date) => {
@@ -1795,12 +1930,12 @@ function DateRangePicker({
     onChange("", "");
     setOpen(false);
   };
-  const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? `From ${displayDate(from)}` : to ? `To ${displayDate(to)}` : "";
+  const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? strings.fromOnly(displayDate(from)) : to ? strings.toOnly(displayDate(to)) : "";
   return /* @__PURE__ */ jsxs("div", { className: `relative${fullWidth ? " w-full" : ""}`, ref, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `${fullWidth ? "flex w-full" : "inline-flex"} items-center gap-2 border rounded-lg px-2.5 py-1.5 text-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 ${from || to ? "border-blue-400 bg-blue-50 text-blue-700" : "border-gray-300 text-gray-500"}`,
+        className: `${fullWidth ? "flex w-full" : "inline-flex"} items-center gap-2 border rounded-lg px-2.5 py-1.5 text-sm focus-within:border-blue-500 has-focus-visible:ring-1 has-focus-visible:ring-[color:var(--rosh-focus-ring-deep)] ${from || to ? "border-blue-400 bg-blue-50 text-blue-700" : "border-gray-300 text-gray-500"}`,
         children: [
           /* @__PURE__ */ jsxs(
             "button",
@@ -1809,7 +1944,7 @@ function DateRangePicker({
               onClick: handleOpen,
               "aria-haspopup": "dialog",
               "aria-expanded": open,
-              className: `inline-flex items-center gap-2 focus:outline-none${fullWidth ? " min-w-0 flex-1 justify-start" : ""}`,
+              className: `inline-flex items-center gap-2 rosh-focus-ring${fullWidth ? " min-w-0 flex-1 justify-start" : ""}`,
               children: [
                 /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
                 /* @__PURE__ */ jsx("span", { className: "truncate", children: displayText || placeholder })
@@ -1821,8 +1956,8 @@ function DateRangePicker({
             {
               type: "button",
               onClick: handleClear,
-              "aria-label": "Clear date range",
-              className: "text-blue-400 hover:text-red-500 focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 rounded",
+              "aria-label": strings.clearRange,
+              className: "text-blue-400 hover:text-red-500 rosh-focus-ring focus-visible:ring-1 focus-visible:ring-[color:var(--rosh-focus-ring-deep)] rounded",
               children: "\xD7"
             }
           )
@@ -1835,7 +1970,7 @@ function DateRangePicker({
         {
           ref: panelRef,
           role: "dialog",
-          "aria-label": "Date range",
+          "aria-label": strings.dialog,
           className: "fixed rounded-2xl p-4",
           style: {
             zIndex: Z_LAYERS.popup,
@@ -1858,13 +1993,13 @@ function DateRangePicker({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "From" }),
-                /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempFrom ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempFrom ? displayDate(tempFrom) : "Start" })
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.from }),
+                /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempFrom ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempFrom ? displayDate(tempFrom) : strings.start })
               ] }),
               /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2014" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "To" }),
-                /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempTo ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempTo ? displayDate(tempTo) : "End" })
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.to }),
+                /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempTo ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempTo ? displayDate(tempTo) : strings.end })
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
@@ -1877,17 +2012,17 @@ function DateRangePicker({
                   month: viewMonth,
                   onMonthChange: setViewMonth,
                   onSelect: handleCalendarSelect,
-                  "aria-label": "Date range"
+                  "aria-label": strings.dialog
                 }
               ) }),
               /* @__PURE__ */ jsxs("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: [
-                PRESET_LABELS.map((label) => /* @__PURE__ */ jsx(
+                PRESETS.map((label) => /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     onClick: () => handlePreset(label),
                     className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === label ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: label
+                    children: strings[label]
                   },
                   label
                 )),
@@ -1897,14 +2032,14 @@ function DateRangePicker({
                     type: "button",
                     onClick: () => setActivePreset("Custom"),
                     className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === "Custom" ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: "Custom"
+                    children: strings.custom
                   }
                 )
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-3 border-t border-gray-200", children: [
-              clearable && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700", children: "Clear" }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), className: "px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50", children: "Cancel" }),
+              clearable && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700", children: strings.clear }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), className: "px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50", children: strings.cancel }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -1912,7 +2047,7 @@ function DateRangePicker({
                   onClick: handleApply,
                   disabled: !tempFrom || !tempTo,
                   className: "px-4 py-1.5 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50",
-                  children: "Apply"
+                  children: strings.apply
                 }
               )
             ] })
@@ -1936,11 +2071,13 @@ function toInputValue(value, withSeconds) {
 }
 var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, invalid, size, className = "", step, ...rest }, ref) {
   const withSeconds = step != null && Number(step) < 60;
+  const locale = useShellLocale();
   return /* @__PURE__ */ jsx(
     "input",
     {
       ref,
       type: "time",
+      lang: locale,
       step,
       "aria-invalid": invalid || void 0,
       value: toInputValue(value, withSeconds),
@@ -1954,20 +2091,6 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
 });
 var TimePicker_default = TimePicker;
 var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-var MONTH_NAMES2 = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
 function toInputValue2(value) {
   if (value === null || value === void 0 || value === "") return "";
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
@@ -1981,9 +2104,9 @@ function fromInputValue(raw) {
   const date = new Date(year, month - 1, day);
   return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
 }
-function display(key) {
+function display(key, names) {
   const d = fromInputValue(key);
-  return d ? `${d.getDate()} ${MONTH_NAMES2[d.getMonth()]} ${d.getFullYear()}` : "";
+  return d ? names.longDate(d.getFullYear(), d.getMonth(), d.getDate()) : "";
 }
 var DatePicker = forwardRef(function DatePicker2({
   value,
@@ -2006,6 +2129,9 @@ var DatePicker = forwardRef(function DatePicker2({
   const current = toInputValue2(value);
   const lo = toInputValue2(min);
   const hi = toInputValue2(max);
+  const strings = useShellStrings().datePicker;
+  const locale = useShellLocale();
+  const names = calendarNames(locale);
   const [open, setOpen] = useState(false);
   const wrapRef = useRef(null);
   const triggerRef = useRef(null);
@@ -2041,6 +2167,7 @@ var DatePicker = forwardRef(function DatePicker2({
       {
         ref,
         type: "date",
+        lang: locale,
         id,
         name,
         disabled,
@@ -2070,11 +2197,11 @@ var DatePicker = forwardRef(function DatePicker2({
         "aria-controls": open ? panelId : void 0,
         "aria-describedby": describedBy,
         "aria-invalid": invalid || void 0,
-        "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current)}` : ""}` : void 0,
+        "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current, names)}` : ""}` : void 0,
         onClick: () => setOpen((o) => !o),
         className: `${inputClasses({ invalid, size, className })} flex items-center justify-between text-left`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current) : placeholder ?? "Select a date" }),
+          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current, names) : placeholder ?? strings.placeholder }),
           /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3M4 11h16M5 7h14a1 1 0 011 1v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1z" }) })
         ]
       }
@@ -2086,7 +2213,7 @@ var DatePicker = forwardRef(function DatePicker2({
           ref: panelRef,
           id: panelId,
           role: "dialog",
-          "aria-label": ariaLabel ?? "Choose a date",
+          "aria-label": ariaLabel ?? strings.dialog,
           className: "fixed w-72 rounded-xl border border-gray-200 bg-white p-3 shadow-lg",
           style: {
             zIndex: Z_LAYERS.popup,
@@ -2124,7 +2251,7 @@ var DatePicker = forwardRef(function DatePicker2({
                     onChange?.(null);
                   },
                   className: "rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700",
-                  children: "Clear"
+                  children: strings.clear
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -2137,7 +2264,7 @@ var DatePicker = forwardRef(function DatePicker2({
                     onChange?.(/* @__PURE__ */ new Date());
                   },
                   className: "rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
-                  children: "Today"
+                  children: strings.today
                 }
               )
             ] })
@@ -2170,11 +2297,13 @@ function fromInputValue2(raw) {
   return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
 }
 var DateTimePicker = forwardRef(function DateTimePicker2({ value, onChange, min, max, invalid, size, className = "", ...rest }, ref) {
+  const locale = useShellLocale();
   return /* @__PURE__ */ jsx(
     "input",
     {
       ref,
       type: "datetime-local",
+      lang: locale,
       "aria-invalid": invalid || void 0,
       value: toInputValue3(value),
       min: toInputValue3(min) || void 0,
@@ -2248,8 +2377,9 @@ async function writeClipboard(text, html) {
 }
 async function copyToClipboard(label, text, html) {
   const ok = await writeClipboard(text, html);
-  if (ok) toast_default.success(`${label} copied`);
-  else toast_default.error("Could not copy to the clipboard");
+  const strings = currentShellStrings().copy;
+  if (ok) toast_default.success(strings.copiedLabel(label));
+  else toast_default.error(strings.failed);
   return ok;
 }
 var COPIED_MS = 2e3;
@@ -2283,13 +2413,14 @@ function Snippet({
 }) {
   const [copied, setCopied] = useState(false);
   const timer = useRef(null);
+  const strings = useShellStrings().copy;
   useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const copy = useCallback(async () => {
     const ok = await writeClipboard(value);
     if (!ok) {
-      toast_default.error("Could not copy to the clipboard");
+      toast_default.error(strings.failed);
       return;
     }
     setCopied(true);
@@ -2299,7 +2430,7 @@ function Snippet({
       timer.current = null;
     }, COPIED_MS);
     onCopy?.(value);
-  }, [value, onCopy]);
+  }, [value, onCopy, strings]);
   const { box, button } = SIZES[size];
   const onButton = !hideCopyButton;
   return /* @__PURE__ */ jsxs(
@@ -2323,14 +2454,14 @@ function Snippet({
             IconButton_default,
             {
               id,
-              "aria-label": label ? `Copy ${label}` : "Copy",
+              "aria-label": label ? strings.copyLabel(label) : strings.copy,
               "aria-describedby": describedBy,
               onClick: copy,
               className: `${button} text-gray-400`,
               children: copied ? /* @__PURE__ */ jsx(CheckGlyph, {}) : /* @__PURE__ */ jsx(CopyGlyph, {})
             }
           ),
-          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? strings.copied : "" })
         ] })
       ]
     }
@@ -2358,10 +2489,11 @@ function NumericKeypad({
   value,
   onChange,
   onEnter,
-  enterLabel = "Enter",
+  enterLabel,
   enterDisabled,
   className = ""
 }) {
+  const strings = useShellStrings().keypad;
   const press = (next) => {
     if (next !== value) onChange(next);
   };
@@ -2381,7 +2513,7 @@ function NumericKeypad({
       {
         size: "touch-xl",
         variant: "secondary",
-        "aria-label": "Backspace",
+        "aria-label": strings.backspace,
         onClick: () => press(backspace(value)),
         children: "\u232B"
       }
@@ -2394,7 +2526,7 @@ function NumericKeypad({
         className: "col-span-3",
         disabled: enterDisabled,
         onClick: onEnter,
-        children: enterLabel
+        children: enterLabel ?? strings.enter
       }
     )
   ] });
@@ -2412,10 +2544,13 @@ var TileButton = forwardRef(function TileButton2({ title, subtitle, size = "lg",
       disabled,
       "aria-pressed": selected || void 0,
       className: [
-        "flex w-full flex-col justify-between rounded-xl border text-left transition-colors",
-        "focus:outline-none focus:ring-2 focus:ring-blue-400/40",
+        "flex w-full flex-col justify-between rounded-xl border text-left transition-colors rosh-focus-ring",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        selected ? "border-blue-600 bg-blue-50 ring-2 ring-blue-400/40" : "border-gray-200 bg-white hover:bg-gray-50",
+        // The focus ring only on a tile that is NOT chosen. A chosen tile already
+        // wears the same ring, so in the kit's own focus nothing changes; under
+        // `rosh-host-focus` the focus token goes transparent, and a focus ring
+        // declared here as well would paint over the chosen one with nothing.
+        selected ? "border-blue-600 bg-blue-50 ring-2 ring-blue-400/40" : "border-gray-200 bg-white hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-strong)]",
         SIZES2[size],
         className
       ].filter(Boolean).join(" "),
@@ -2557,7 +2692,7 @@ var Switch = forwardRef(function Switch2({
       ...rest,
       className: [
         "relative inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors",
-        "focus:outline-none focus:ring-2 focus:ring-blue-400/40",
+        "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-strong)]",
         "disabled:cursor-not-allowed disabled:opacity-40",
         TRACK[size],
         checked ? "bg-blue-600" : "bg-gray-300"
@@ -2705,7 +2840,7 @@ var FilePicker = forwardRef(function FilePicker2({
   className = ""
 }, ref) {
   const zoneId = useId();
-  const [focused, setFocused] = useState(false);
+  const strings = useShellStrings().files;
   const intake = useFileIntake({
     accept,
     acceptHint,
@@ -2726,25 +2861,15 @@ var FilePicker = forwardRef(function FilePicker2({
         id: zoneId,
         disabled,
         onClick: intake.open,
-        onFocus: () => setFocused(true),
-        onBlur: () => setFocused(false),
         "aria-invalid": error ? true : void 0,
         "aria-required": required || void 0,
         "aria-describedby": describedBy,
         ...intake.zoneProps,
-        className: dropzoneClass(intake.dragOver, disabled, "px-4 py-6"),
-        style: { outline: "none", boxShadow: focused && !disabled ? FOCUS_RING : void 0 },
+        className: dropzoneClass(intake.dragOver, disabled, `px-4 py-6 ${zoneFocusClass(disabled)}`),
         children: [
           /* @__PURE__ */ jsxs("span", { children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-blue-600", children: [
-              "Choose ",
-              multiple ? "files" : "a file"
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500", children: [
-              " or drag ",
-              multiple ? "them" : "it",
-              " here"
-            ] })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-blue-600", children: multiple ? strings.chooseMany : strings.chooseOne }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: ` ${multiple ? strings.dragMany : strings.dragOne}` })
           ] }),
           acceptHint && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: acceptHint })
         ]
@@ -2753,7 +2878,7 @@ var FilePicker = forwardRef(function FilePicker2({
     /* @__PURE__ */ jsx("input", { ...intake.inputProps }),
     files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-1", children: files.map((file, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 rounded-md bg-gray-50 px-3 py-2", children: [
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-gray-800", title: file.name, children: file.name }),
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-gray-500", children: humanSize(file.size) }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-gray-500", children: humanSize(file.size, strings) }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -2763,7 +2888,7 @@ var FilePicker = forwardRef(function FilePicker2({
             intake.clearRejections();
             onChange(files.filter((_, j) => j !== i));
           },
-          "aria-label": `Remove ${file.name}`,
+          "aria-label": strings.remove(file.name),
           className: "shrink-0 text-gray-400 hover:text-gray-600",
           children: /* @__PURE__ */ jsx(CloseGlyph, {})
         }
@@ -2808,7 +2933,8 @@ function FileGlyph({ className = "h-4 w-4" }) {
     }
   );
 }
-function AttachmentDropZone({ intake, dropLabel = "Drop files to attach", className = "", children }) {
+function AttachmentDropZone({ intake, dropLabel, className = "", children }) {
+  const strings = useShellStrings().files;
   return /* @__PURE__ */ jsxs("div", { ...intake.zoneProps, ...intake.pasteProps, className: `relative ${className}`, children: [
     children,
     /* @__PURE__ */ jsx("input", { ...intake.inputProps }),
@@ -2817,13 +2943,14 @@ function AttachmentDropZone({ intake, dropLabel = "Drop files to attach", classN
       {
         "aria-hidden": "true",
         className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/80 text-sm font-medium text-blue-600",
-        children: dropLabel
+        children: dropLabel ?? strings.drop
       }
     )
   ] });
 }
 var canPreview = () => typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
 function AttachmentList({ files, onRemove, disabled = false, className = "" }) {
+  const strings = useShellStrings().files;
   const urls = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
     const live = new Set(files);
@@ -2857,14 +2984,14 @@ function AttachmentList({ files, onRemove, disabled = false, className = "" }) {
         children: [
           thumb ? /* @__PURE__ */ jsx("img", { src: thumb, alt: "", className: "h-6 w-6 shrink-0 rounded object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: /* @__PURE__ */ jsx(FileGlyph, {}) }),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", title: file.name, children: file.name }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-gray-400", children: humanSize(file.size) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-gray-400", children: humanSize(file.size, strings) }),
           onRemove && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               disabled,
               onClick: () => onRemove(i),
-              "aria-label": `Remove ${file.name}`,
+              "aria-label": strings.remove(file.name),
               className: "shrink-0 rounded p-0.5 text-gray-400 hover:bg-gray-200 hover:text-gray-600 disabled:cursor-not-allowed",
               children: /* @__PURE__ */ jsx(CloseGlyph, { className: "h-3.5 w-3.5" })
             }
@@ -2875,7 +3002,9 @@ function AttachmentList({ files, onRemove, disabled = false, className = "" }) {
     );
   }) });
 }
-function AttachButton({ onClick, count = 0, variant = "button", label = "Attach files", disabled = false }) {
+function AttachButton({ onClick, count = 0, variant = "button", label: labelProp, disabled = false }) {
+  const strings = useShellStrings().files;
+  const label = labelProp ?? strings.attach;
   const counted = count > 0 ? `${label} (${count})` : label;
   if (variant === "icon") {
     return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
@@ -2999,7 +3128,7 @@ function SearchableSelect({
     setSearch("");
   };
   const [adornPad, setAdornPad] = useState(null);
-  useLayoutEffect(() => {
+  useBrowserLayoutEffect(() => {
     if (!rightAdornment || open) {
       setAdornPad(null);
       return;
@@ -3243,7 +3372,7 @@ function TagInput({
         },
         className: inputClasses({
           invalid,
-          className: `flex flex-wrap items-center gap-1 cursor-text focus-within:border-blue-400 focus-within:ring-2 focus-within:ring-blue-400/30 ${disabled ? "bg-gray-50 cursor-not-allowed" : ""} ${className}`
+          className: `flex flex-wrap items-center gap-1 cursor-text focus-within:border-blue-400 has-focus-visible:ring-2 has-focus-visible:ring-[color:var(--rosh-focus-ring)] ${disabled ? "bg-gray-50 cursor-not-allowed" : ""} ${className}`
         }),
         children: [
           value.map((v) => /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded bg-blue-50 px-1.5 py-0.5 text-xs font-medium text-blue-700", children: [
@@ -3252,9 +3381,9 @@ function TagInput({
               "button",
               {
                 type: "button",
-                "aria-label": `${strings.select.remove} ${labelFor(v)}`,
+                "aria-label": strings.select.removeItem?.(labelFor(v)) ?? `${strings.select.remove} ${labelFor(v)}`,
                 onClick: () => remove(v),
-                className: "text-blue-400 hover:text-red-500 focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 rounded leading-none",
+                className: "text-blue-400 hover:text-red-500 rosh-focus-ring focus-visible:ring-1 focus-visible:ring-[color:var(--rosh-focus-ring-deep)] rounded leading-none",
                 children: "\xD7"
               }
             )
@@ -3297,7 +3426,7 @@ function TagInput({
                   setOpen(false);
                 }
               },
-              className: "min-w-[8ch] flex-1 border-none bg-transparent p-0 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
+              className: "min-w-[8ch] flex-1 border-none bg-transparent p-0 text-sm text-gray-800 placeholder:text-gray-400 rosh-focus-ring focus-visible:ring-0 disabled:cursor-not-allowed"
             }
           )
         ]
@@ -3396,6 +3525,8 @@ function Card({
   );
 }
 function StatCard({ label, value, icon, delta, className = "" }) {
+  const locale = useShellLocale();
+  const shown = typeof value === "number" && locale ? formatPlain(value, locale) : value;
   const deltaColor = delta?.direction === "up" ? "text-green-600" : delta?.direction === "down" ? "text-red-600" : "text-gray-500";
   const arrow = delta?.direction === "up" ? "\u25B2" : delta?.direction === "down" ? "\u25BC" : "\u2192";
   return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-gray-200 bg-white p-4 shadow-sm ${className}`.trim(), children: [
@@ -3404,7 +3535,7 @@ function StatCard({ label, value, icon, delta, className = "" }) {
       icon && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: icon })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900", children: value }),
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900", children: shown }),
       delta && /* @__PURE__ */ jsxs("span", { className: `text-xs font-medium ${deltaColor}`, children: [
         arrow,
         " ",
@@ -3687,7 +3818,8 @@ function CountBadge({
   className = ""
 }) {
   const visible = dot || count > 0 || count === 0 && showZero;
-  const label = count > max ? `${max}+` : String(count);
+  const locale = useShellLocale();
+  const label = count > max ? `${formatPlain(max, locale)}+` : formatPlain(count, locale);
   const badge = visible ? dot ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -3728,7 +3860,8 @@ function Statistic({
   size = "md",
   className = ""
 }) {
-  const shown = typeof value === "number" && precision != null ? value.toFixed(precision) : value;
+  const locale = useShellLocale();
+  const shown = typeof value !== "number" ? value : precision != null ? formatFixed(value, precision, locale) : locale ? formatPlain(value, locale) : value;
   return /* @__PURE__ */ jsxs("div", { className, children: [
     title && /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-gray-500", children: title }),
     /* @__PURE__ */ jsxs("div", { className: `mt-1 flex items-baseline gap-1 ${TONE3[tone]}`, children: [
@@ -3806,6 +3939,7 @@ function AvatarGroup({ children, max, size = "md", className = "" }) {
   const overflow = max ? items.length - shown.length : 0;
   const px = SIZE_PX[size];
   const overlap = Math.round(px * 0.3);
+  const locale = useShellLocale();
   return /* @__PURE__ */ jsxs("div", { className: `flex items-center ${className}`.trim(), children: [
     shown.map((child, i) => /* @__PURE__ */ jsx("span", { className: "rounded-full ring-2 ring-white", style: { marginLeft: i === 0 ? 0 : -overlap }, children: child }, i)),
     overflow > 0 && /* @__PURE__ */ jsxs(
@@ -3815,7 +3949,7 @@ function AvatarGroup({ children, max, size = "md", className = "" }) {
         style: { width: px, height: px, marginLeft: -overlap, fontSize: Math.round(px * 0.36) },
         children: [
           "+",
-          overflow
+          formatPlain(overflow, locale)
         ]
       }
     )
@@ -3859,6 +3993,7 @@ function Banner({
 }) {
   const t = TONE4[tone];
   const solid = emphasis === "solid";
+  const strings = useShellStrings().banner;
   const box = solid ? TONE_SOLID[tone] : t.box;
   const stick = sticky ? "sticky top-0 z-30" : "";
   return /* @__PURE__ */ jsxs(
@@ -3878,7 +4013,7 @@ function Banner({
           {
             type: "button",
             onClick: onDismiss,
-            "aria-label": "Dismiss",
+            "aria-label": strings.dismiss,
             className: `shrink-0 ${solid ? "opacity-80 hover:opacity-100" : "text-gray-400 hover:text-gray-600"}`,
             children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
           }
@@ -4025,7 +4160,7 @@ function Stepper({
                 {
                   type: "button",
                   onClick: () => onChange?.(step.id),
-                  className: "relative z-10 flex min-w-0 flex-col items-center gap-1.5 rounded px-2 text-center focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+                  className: "relative z-10 flex min-w-0 flex-col items-center gap-1.5 rounded px-2 text-center rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
                   children: [
                     circle,
                     text
@@ -4199,7 +4334,8 @@ function ColoredBadge({
   const colour = colorClass ?? GROUP_COLORS[tone ?? "neutral"];
   const sizeCls = size === "xs" ? "px-2 py-0.5 text-[10px]" : size === "md" ? "px-2.5 py-0.5 text-xs" : "px-2 py-0.5 text-xs";
   const capCls = capitalize ? "capitalize" : "";
-  const closeName = closeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+  const strings = useShellStrings().badge;
+  const closeName = closeLabel ?? (typeof children === "string" ? strings.removeItem(children) : strings.remove);
   const closeSize = size === "xs" ? "h-2.5 w-2.5" : "h-3 w-3";
   return /* @__PURE__ */ jsxs("span", { className: ["inline-flex items-center rounded-full font-medium", sizeCls, capCls, colour, className].filter(Boolean).join(" "), children: [
     children,
@@ -4209,7 +4345,7 @@ function ColoredBadge({
         type: "button",
         onClick: onClose,
         "aria-label": closeName,
-        className: "-mr-0.5 ml-1 inline-flex shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-400/40",
+        className: "-mr-0.5 ml-1 inline-flex shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-strong)]",
         children: /* @__PURE__ */ jsx("svg", { className: closeSize, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
       }
     )
@@ -4228,7 +4364,8 @@ function EmptyState({
   const v = frameless ? "none" : variant ?? "dashed";
   const custom = typeof icon !== "boolean" && icon != null ? icon : null;
   const showIcon = custom ? false : icon ?? v !== "card";
-  const primary = message ?? (title ? void 0 : "Nothing here yet.");
+  const strings = useShellStrings().emptyState;
+  const primary = message ?? (title ? void 0 : strings.message);
   const secondary = description ?? hint;
   const frame = v === "card" ? "rounded-md border border-gray-200 bg-white px-6 py-12" : v === "none" ? "px-6 py-12" : "rounded-lg border-2 border-dashed border-gray-300 px-6 py-12";
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center ${frame}`, children: [
@@ -4330,9 +4467,13 @@ function resolveSeverity(severity, component) {
     tone: null,
     fill: SEVERITY_UNKNOWN_FILL,
     ink: SEVERITY_UNKNOWN_INK,
-    word: `unrecognised severity ${described}`
+    word: `unrecognised severity ${described}`,
+    token: described
   };
 }
+function severityWord(style, words) {
+  return style.tone ? words[style.tone] : words.unrecognised(style.token ?? "");
+}
 function warnOnce(key, message) {
   if (reported.has(key)) return;
   reported.add(key);
@@ -4358,11 +4499,14 @@ function MetricBar({
   severity,
   detail,
   formatValue,
-  emptyLabel = "no data",
+  emptyLabel: emptyLabelProp,
   size = "sm",
   ariaLabel,
   className = ""
 }) {
+  const strings = useShellStrings().meter;
+  const locale = useShellLocale();
+  const emptyLabel = emptyLabelProp ?? strings.noData;
   const reading2 = value != null && Number.isFinite(value) ? value : null;
   const scale = Number.isFinite(max) && max > 0 ? max : null;
   if (scale == null) {
@@ -4376,7 +4520,7 @@ function MetricBar({
   const warnAt = boundOf(warn);
   const critAt = boundOf(crit);
   const width = reading2 != null && scale != null ? clampPct(reading2 / scale * 100) : 0;
-  const format2 = formatValue ?? ((v) => scale === 100 ? `${v.toFixed(1)}%` : String(v));
+  const format2 = formatValue ?? ((v) => scale === 100 ? formatPercent(v, 1, locale) : formatPlain(v, locale));
   const printed = reading2 != null ? format2(reading2) : "\u2014";
   const showTicks = reading2 != null && scale != null && (warnAt != null || critAt != null);
   const meterLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
@@ -4407,8 +4551,8 @@ function MetricBar({
             style: { width: `${width}%` }
           }
         ),
-        showTicks && scale != null && warnAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(warnAt / scale * 100), title: `warning \u2265 ${warnAt}`, className: "bg-gray-400 opacity-75" }),
-        showTicks && scale != null && critAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(critAt / scale * 100), title: `critical \u2265 ${critAt}`, className: "bg-gray-500" })
+        showTicks && scale != null && warnAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(warnAt / scale * 100), title: strings.warningAt(warnAt), className: "bg-gray-400 opacity-75" }),
+        showTicks && scale != null && critAt != null && /* @__PURE__ */ jsx(Tick, { at: clampPct(critAt / scale * 100), title: strings.criticalAt(critAt), className: "bg-gray-500" })
       ]
     }
   );
@@ -4442,14 +4586,14 @@ function budgetState(elapsed, budget) {
   if (allowed == null || allowed === 0) return "no-budget";
   return spent > allowed ? "over" : "within";
 }
-function defaultDuration(seconds) {
+function defaultDuration(seconds, words = DEFAULT_SHELL_STRINGS.meter) {
   const total = Math.round(seconds);
   const h = Math.floor(total / 3600);
   const m = Math.floor(total % 3600 / 60);
   const s = total % 60;
-  if (h > 0) return `${h}h ${m}m`;
-  if (m > 0) return `${m}m ${s}s`;
-  return `${s}s`;
+  if (h > 0) return words.hoursMinutes(h, m);
+  if (m > 0) return words.minutesSeconds(m, s);
+  return words.seconds(s);
 }
 var clampPct2 = (n) => Math.min(100, Math.max(0, n));
 function BudgetBar({
@@ -4458,13 +4602,18 @@ function BudgetBar({
   budget,
   grace,
   detail,
-  formatDuration = defaultDuration,
-  emptyLabel = "no reading",
-  noBudgetLabel = "no budget",
+  formatDuration: formatDurationProp,
+  emptyLabel: emptyLabelProp,
+  noBudgetLabel: noBudgetLabelProp,
   size = "sm",
   ariaLabel,
   className = ""
 }) {
+  const strings = useShellStrings().meter;
+  const locale = useShellLocale();
+  const formatDuration = formatDurationProp ?? ((seconds) => defaultDuration(seconds, strings));
+  const emptyLabel = emptyLabelProp ?? strings.noReading;
+  const noBudgetLabel = noBudgetLabelProp ?? strings.noBudget;
   const spent = reading(elapsed);
   const allowed = reading(budget);
   const budgetAt = allowed != null && allowed > 0 ? allowed : null;
@@ -4479,7 +4628,7 @@ function BudgetBar({
   const hatchEnd = !over ? 0 : scaledOverrun && span != null && spent != null ? clampPct2(spent / span * 100) : 100;
   const hatchWidth = Math.max(0, hatchEnd - hatchStart);
   const percent = spent != null && budgetAt != null ? spent / budgetAt * 100 : null;
-  const printed = percent != null ? `${Math.round(percent)}%` : spent != null ? formatDuration(spent) : "\u2014";
+  const printed = percent != null ? formatPercent(Math.round(percent), 0, locale) : spent != null ? formatDuration(spent) : "\u2014";
   const trailing = detail ?? (spent == null ? emptyLabel : budgetAt == null ? noBudgetLabel : `${formatDuration(spent)} / ${formatDuration(budgetAt)}`);
   const meterLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
   const barHeight = size === "md" ? "h-2" : "h-1.5";
@@ -4493,7 +4642,7 @@ function BudgetBar({
       "aria-valuemin": 0,
       "aria-valuemax": span,
       "aria-valuenow": Math.min(span, spent),
-      "aria-valuetext": `${printed} of budget`,
+      "aria-valuetext": strings.ofBudget(printed),
       className: `relative mt-2 ${barHeight} overflow-hidden rounded-full bg-gray-200`,
       children: [
         (!over || scaledOverrun) && /* @__PURE__ */ jsx(
@@ -4513,7 +4662,7 @@ function BudgetBar({
         graceAt > 0 && deadlineAt != null && /* @__PURE__ */ jsx(
           "div",
           {
-            title: "budget",
+            title: strings.budget,
             className: "absolute inset-y-0 w-0.5 bg-gray-700",
             style: { left: `${deadlineAt}%` }
           }
@@ -4541,77 +4690,6 @@ function BudgetBar({
   ] });
 }
 
-// src/utils/date.ts
-var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var MONTH_FULL = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-function monthAbbr(mm) {
-  return MONTH_ABBR[parseInt(mm, 10) - 1] ?? mm;
-}
-function monthFull(mm) {
-  return MONTH_FULL[parseInt(mm, 10) - 1] ?? mm;
-}
-function getUserDateFormat() {
-  return localStorage.getItem("user_date_format") || "DD/MM/YYYY";
-}
-function formatDate(value) {
-  if (!value) return "\u2014";
-  const dateStr = value.includes("T") ? value.split("T")[0] : value;
-  const [y, m, d] = dateStr.split("-").map(Number);
-  if (!y || !m || !d) return value;
-  const dd = String(d).padStart(2, "0");
-  const mm = String(m).padStart(2, "0");
-  const yyyy = String(y);
-  const fmt2 = getUserDateFormat();
-  switch (fmt2) {
-    case "MM/DD/YYYY":
-      return `${mm}/${dd}/${yyyy}`;
-    case "YYYY-MM-DD":
-      return `${yyyy}-${mm}-${dd}`;
-    case "DD-MM-YYYY":
-      return `${dd}-${mm}-${yyyy}`;
-    case "MM-DD-YYYY":
-      return `${mm}-${dd}-${yyyy}`;
-    case "DD.MM.YYYY":
-      return `${dd}.${mm}.${yyyy}`;
-    case "YYYY.MM.DD":
-      return `${yyyy}.${mm}.${dd}`;
-    case "YYYY/MM/DD":
-      return `${yyyy}/${mm}/${dd}`;
-    case "DD/MM/YY":
-      return `${dd}/${mm}/${yyyy.slice(-2)}`;
-    case "MM/DD/YY":
-      return `${mm}/${dd}/${yyyy.slice(-2)}`;
-    case "DD/MMM/YYYY":
-      return `${dd}/${monthAbbr(mm)}/${yyyy}`;
-    case "DD/MMM/YY":
-      return `${dd}/${monthAbbr(mm)}/${yyyy.slice(-2)}`;
-    case "DD MMM YYYY":
-      return `${dd} ${monthAbbr(mm)} ${yyyy}`;
-    case "MMM DD, YYYY":
-      return `${monthAbbr(mm)} ${dd}, ${yyyy}`;
-    case "DD MMMM YYYY":
-      return `${dd} ${monthFull(mm)} ${yyyy}`;
-    case "MMMM DD, YYYY":
-      return `${monthFull(mm)} ${dd}, ${yyyy}`;
-    case "DD/MM/YYYY":
-    default:
-      return `${dd}/${mm}/${yyyy}`;
-  }
-}
-
 // src/shell/timelineDates.ts
 var DAY_MS = 864e5;
 function toDayMs(dateStr) {
@@ -4622,8 +4700,8 @@ function toDayMs(dateStr) {
   if (year < 2e3 || year > 2100) return null;
   return t;
 }
-function fmtSliderDate(ms) {
-  return formatDate(new Date(ms).toISOString().slice(0, 10));
+function fmtSliderDate(ms, locale) {
+  return formatDate(new Date(ms).toISOString().slice(0, 10), { locale });
 }
 var fillId = (id, index) => `${id}-fill-${index}`;
 var glowId = (id) => `${id}-glow`;
@@ -5211,7 +5289,6 @@ function prefersReducedMotion() {
     return false;
   }
 }
-var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var monoWidth = (text) => text.length * MONO_CHAR_PX;
 var KIND_STYLES = {
   // No glyph by default: a flag belongs on the milestone that OPENED the
@@ -5263,8 +5340,8 @@ function accessibleName(mark) {
   const detail = detailText(mark.detail);
   return `${mark.label} \xB7 ${mark.dateText}${detail ? ` \xB7 ${detail}` : ""}`;
 }
-function foldName(members) {
-  return `${members.length} events \xB7 ${members.map(accessibleName).join(", ")}`;
+function foldName(members, words) {
+  return words.events(members.length, members.map(accessibleName));
 }
 function foldDates(members) {
   const first = members[0].dateText;
@@ -5380,6 +5457,8 @@ function MeasuringRow({ marks, innerRef }) {
   ] }, mark.key)) });
 }
 function Ruler({ startMs, endMs, axis, geo, reveal }) {
+  const strings = useShellStrings().timeline;
+  const names = calendarNames(useShellLocale());
   const y = geo.ruler;
   const ticks = [];
   const labels = [];
@@ -5403,7 +5482,7 @@ function Ruler({ startMs, endMs, axis, geo, reveal }) {
   }
   const bands = cuts.map((gap) => {
     const centre = (gap.fromPx + gap.toPx) / 2;
-    const half = monoWidth(`${Math.round(gap.gapMs / DAY_MS)} days`) / 2 + 6;
+    const half = monoWidth(strings.days(Math.round(gap.gapMs / DAY_MS))) / 2 + 6;
     return [centre - half, centre + half];
   });
   const blocked = (from, to) => bands.some(([low, high]) => from < high && to > low);
@@ -5432,7 +5511,7 @@ function Ruler({ startMs, endMs, axis, geo, reveal }) {
       );
       if (x - lastLabelX >= MONTH_LABEL_PITCH_PX || firstLabel) {
         const withYear = firstLabel || cursor.getUTCMonth() === 0;
-        const text = `${MONTHS[cursor.getUTCMonth()]}${withYear ? ` ${cursor.getUTCFullYear()}` : ""}`;
+        const text = withYear ? names.shortMonthYear(cursor.getUTCFullYear(), cursor.getUTCMonth()) : names.monthsShort[cursor.getUTCMonth()];
         if (!blocked(x, x + monoWidth(text))) {
           labels.push(
             /* @__PURE__ */ jsx(
@@ -5472,10 +5551,7 @@ function Ruler({ startMs, endMs, axis, geo, reveal }) {
               /* @__PURE__ */ jsx("i", {}),
               /* @__PURE__ */ jsx("i", {})
             ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              days.toLocaleString(),
-              " days"
-            ] })
+            /* @__PURE__ */ jsx("span", { children: strings.days(days) })
           ]
         },
         `cut-${gap.fromMs}`
@@ -5484,12 +5560,13 @@ function Ruler({ startMs, endMs, axis, geo, reveal }) {
   ] });
 }
 function PendingColumn({ pending, reveal }) {
+  const strings = useShellStrings().timeline;
   const [expanded, setExpanded] = useState(false);
   const shown = expanded ? pending : pending.slice(0, PENDING_ROW_LIMIT);
   const folded = pending.length - shown.length;
   return /* @__PURE__ */ jsxs("div", { className: "rosh-tl-pending", "data-timeline-part": "pending", children: [
-    /* @__PURE__ */ jsx("p", { className: "rosh-tl-pending-head", children: "Not yet reached" }),
-    /* @__PURE__ */ jsx("ol", { className: "rosh-tl-ghosts", "aria-label": "Not yet reached", children: shown.map((entry, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("p", { className: "rosh-tl-pending-head", children: strings.notReached }),
+    /* @__PURE__ */ jsx("ol", { className: "rosh-tl-ghosts", "aria-label": strings.notReached, children: shown.map((entry, index) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: reveal ? "rosh-tl-fade" : void 0,
@@ -5503,23 +5580,20 @@ function PendingColumn({ pending, reveal }) {
             }
           ),
           /* @__PURE__ */ jsxs("span", { children: [
-            index === 0 && /* @__PURE__ */ jsx("b", { children: "Next \xB7 " }),
+            index === 0 && /* @__PURE__ */ jsx("b", { children: `${strings.next} \xB7 ` }),
             entry.label
           ] })
         ]
       },
       entry.key
     )) }),
-    folded > 0 && /* @__PURE__ */ jsxs("button", { type: "button", className: "rosh-tl-more text-gray-500", onClick: () => setExpanded(true), children: [
-      "+",
-      folded,
-      " more"
-    ] })
+    folded > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "rosh-tl-more text-gray-500", onClick: () => setExpanded(true), children: strings.more(folded) })
   ] });
 }
 function VerticalTrack({ marks, pending, currentKey, todayMs, reveal, ariaLabel, step, nodeProps, onKeyDown }) {
+  const strings = useShellStrings().timeline;
   const currentIndex = marks.findIndex((mark) => mark.key === currentKey);
-  const gapDays = marks.length > 0 ? Math.round((todayMs - marks[marks.length - 1].ms) / DAY_MS) : 0;
+  const gapDays = marks.length > 0 && todayMs !== null ? Math.round((todayMs - marks[marks.length - 1].ms) / DAY_MS) : 0;
   return /* @__PURE__ */ jsxs("div", { "data-timeline-part": "vertical", children: [
     /* @__PURE__ */ jsx("ol", { className: "rosh-tl-v", "aria-label": ariaLabel, onKeyDown, children: marks.map((mark, index) => {
       const dressing = nodeDressing(mark.kind, mark.role);
@@ -5562,10 +5636,7 @@ function VerticalTrack({ marks, pending, currentKey, todayMs, reveal, ariaLabel,
     }) }),
     gapDays > 0 && /* @__PURE__ */ jsxs("p", { className: "rosh-tl-vgap", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx("i", { className: "rosh-tl-vline is-dash" }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        gapDays.toLocaleString(),
-        " days to today"
-      ] })
+      /* @__PURE__ */ jsx("span", { children: strings.daysToToday(gapDays) })
     ] }),
     pending.length > 0 && /* @__PURE__ */ jsx(PendingColumn, { pending, reveal })
   ] });
@@ -5639,6 +5710,7 @@ function StartMark({ geo, caption, endCaption, around, reveal, trackPx }) {
 }
 function TodayMark({ x, geo, trackPx, label, reveal }) {
   const tagWidth = 48;
+  const strings = useShellStrings().timeline;
   return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", "data-timeline-part": "today", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -5656,13 +5728,13 @@ function TodayMark({ x, geo, trackPx, label, reveal }) {
       "span",
       {
         className: `rosh-tl-todaytag${reveal ? " rosh-tl-fade" : ""}`,
-        title: `Today \u2014 ${label}`,
+        title: strings.todayTitle(label),
         style: {
           left: `${clampLabelLeft(x, tagWidth, trackPx)}px`,
           top: `${geo.tag}px`,
           ...reveal ? { animationDelay: "420ms" } : {}
         },
-        children: "Today"
+        children: strings.today
       }
     )
   ] });
@@ -5731,6 +5803,7 @@ function PhaseBracket({ phase, geo, xOf }) {
   ] });
 }
 function ActiveLabel({ nodes, trackPx, geo, activeKey, hoveredKey, currentKey }) {
+  const strings = useShellStrings().timeline;
   const holds = (node2, key) => key !== null && (node2.key === key || node2.members.some((member) => member.key === key));
   const node = nodes.find((n) => n.key === hoveredKey) ?? nodes.find((n) => holds(n, activeKey)) ?? null;
   if (!node) return null;
@@ -5757,7 +5830,7 @@ function ActiveLabel({ nodes, trackPx, geo, activeKey, hoveredKey, currentKey })
             type: "button",
             className: "rosh-tl-name rosh-tl-open",
             "data-timeline-part": "open",
-            "aria-label": `Open ${name}`,
+            "aria-label": strings.open(name),
             onClick: onOpen,
             children: name
           }
@@ -6021,6 +6094,8 @@ function ThumbLayer({
   nodes,
   onProgress
 }) {
+  const strings = useShellStrings().timeline;
+  const locale = useShellLocale();
   const draggingRef = useRef(false);
   const x = glide ? glide.px : axis.xByMs(value);
   const at = glide ? glide.ms : value;
@@ -6072,7 +6147,7 @@ function ThumbLayer({
     if (key === "End") return endMs;
     return null;
   };
-  const valueText = thumb.valueText ? thumb.valueText(at) : fmtSliderDate(at);
+  const valueText = thumb.valueText ? thumb.valueText(at) : fmtSliderDate(at, locale);
   const days = Math.max(1, Math.round((endMs - startMs) / DAY_MS));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -6097,7 +6172,7 @@ function ThumbLayer({
         className: "rosh-tl-chip",
         "data-timeline-part": "chip",
         style: { left: `${clampLabelLeft(x, chipWidth, trackPx) + chipWidth / 2}px`, top: `${geo.tag}px` },
-        children: thumb.chip ? thumb.chip(at) : fmtSliderDate(at)
+        children: thumb.chip ? thumb.chip(at) : fmtSliderDate(at, locale)
       }
     ),
     /* @__PURE__ */ jsx(
@@ -6107,7 +6182,7 @@ function ThumbLayer({
         tabIndex: 0,
         className: "rosh-tl-thumb text-blue-600",
         "data-timeline-part": "thumb",
-        "aria-label": thumb.ariaLabel ?? "Scrub the timeline",
+        "aria-label": thumb.ariaLabel ?? strings.scrub,
         "aria-valuemin": 0,
         "aria-valuemax": stops && stops.length > 0 ? stops.length - 1 : days,
         "aria-valuenow": stops && stops.length > 0 ? Math.max(0, index) : Math.round((value - startMs) / DAY_MS),
@@ -6162,10 +6237,13 @@ function TimelineTrack({
   endMark = null
 }) {
   const bare = labels === "none";
-  const [mountedToday] = useState(() => Date.now());
-  const [stillness] = useState(prefersReducedMotion);
+  const mountedToday = useBrowserValueOnce(Date.now, null);
+  const stillness = useBrowserValueOnce(prefersReducedMotion, false);
   const now = todayMs ?? mountedToday;
   const rootRef = useRef(null);
+  const strings = useShellStrings().timeline;
+  const locale = useShellLocale();
+  const fmtDate = (ms) => fmtSliderDate(ms, locale);
   const layerRef = useRef(null);
   const measureRef = useRef(null);
   const tipRef = useRef(null);
@@ -6206,7 +6284,7 @@ function TimelineTrack({
   const happened = dated.filter((item) => !item.provisional);
   const resolvedCurrent = currentKey ?? (happened.length > 0 ? happened[happened.length - 1].key : null);
   const itemMarks = dated.map((item, index) => {
-    const dateText = item.date ?? fmtSliderDate(item.ms);
+    const dateText = item.date ?? fmtDate(item.ms);
     const ordinary = (item.priority ?? 0) > 0 || item.kind === "report";
     const kind = resolveKind(item);
     return {
@@ -6235,7 +6313,7 @@ function TimelineTrack({
   });
   const markerMarks = markers.map((marker) => ({ marker, ms: new Date(marker.date).getTime() })).filter(({ ms }) => Number.isFinite(ms) && inWindow(ms)).map(({ marker, ms }) => {
     const key = `marker-${marker.id}`;
-    const dateText = fmtSliderDate(ms);
+    const dateText = fmtDate(ms);
     return {
       key,
       ms,
@@ -6270,8 +6348,8 @@ function TimelineTrack({
       baseX: trackPx,
       kind: cap.kind ?? "default",
       label: cap.label,
-      dateText: "Not yet reached",
-      detail: others.length > 0 ? `Also to come: ${others.join(", ")}` : void 0,
+      dateText: strings.notReached,
+      detail: others.length > 0 ? strings.alsoToCome(others) : void 0,
       glyph: void 0,
       role: "key",
       widthPx: MARK_OVERLAP_PX,
@@ -6288,7 +6366,7 @@ function TimelineTrack({
     baseX: axisPx,
     kind: "default",
     label: endMark.label,
-    dateText: endMark.dateText ?? fmtSliderDate(endMs),
+    dateText: endMark.dateText ?? fmtDate(endMs),
     detail: endMark.detail,
     glyph: void 0,
     role: "key",
@@ -6299,7 +6377,7 @@ function TimelineTrack({
     isCap: true
   }] : [];
   const marks = [...itemMarks, ...markerMarks, ...capMarks, ...endMarks].sort((a, b) => a.x - b.x || a.ms - b.ms);
-  const startCaption = edgeCaptions?.start ?? `Start \xB7 ${fmtSliderDate(startMs)}`;
+  const startCaption = edgeCaptions?.start ?? strings.start(fmtDate(startMs));
   const startCaptionPx = startCaption == null || startCaption === false ? 0 : typeof startCaption === "string" ? Math.ceil(monoWidth(startCaption)) : START_CAPTION_FALLBACK_PX;
   const groups = labels === "lanes" ? clusterMarks(marks) : [];
   const groupKey = (group) => group.type === "cluster" ? `cluster-${group.members[0].key}` : group.mark.key;
@@ -6482,7 +6560,7 @@ function TimelineTrack({
     };
   }, [playing, endPlayback, reportProgress]);
   const reached = itemMarks.filter((mark) => !mark.provisional);
-  const fillTo = thumb ? glide ? glide.ms : thumbAt : fillToMs !== void 0 ? fillToMs : reached.length > 0 ? Math.min(reached[reached.length - 1].ms, now) : null;
+  const fillTo = thumb ? glide ? glide.ms : thumbAt : fillToMs !== void 0 ? fillToMs : reached.length > 0 ? now === null ? reached[reached.length - 1].ms : Math.min(reached[reached.length - 1].ms, now) : null;
   const litKeys = new Set(highlightKeys ?? []);
   const litXs = marks.filter((mark) => litKeys.has(mark.key)).map((mark) => mark.x);
   const band = litXs.length > 0 ? { from: Math.min(...litXs), to: Math.max(...litXs) } : null;
@@ -6646,7 +6724,7 @@ function TimelineTrack({
     "data-timeline-node": "fold",
     "data-timeline-key": node.key,
     "data-timeline-count": String(node.members.length),
-    "aria-label": foldName(node.members),
+    "aria-label": foldName(node.members, strings),
     "aria-describedby": bubbleKey === node.key ? tipId : void 0,
     tabIndex: node.key === tabKey ? 0 : -1,
     ref: (el) => {
@@ -6778,13 +6856,13 @@ function TimelineTrack({
               }
             ),
             bare && /* @__PURE__ */ jsx(Captions, { nodes: railNodes, geo, reveal }),
-            now > startMs && now <= endMs + DAY_MS && /* @__PURE__ */ jsx(
+            now !== null && now > startMs && now <= endMs + DAY_MS && /* @__PURE__ */ jsx(
               TodayMark,
               {
                 x: view.xByMs(Math.min(now, endMs)),
                 geo,
                 trackPx,
-                label: fmtSliderDate(now),
+                label: fmtDate(now),
                 reveal
               }
             ),
@@ -6928,7 +7006,7 @@ function TimelineTrack({
                       className: "rosh-tl-bubble-open text-blue-600",
                       "data-timeline-part": "bubble-open",
                       onClick: () => (bubbleNode.mark?.onOpen ?? bubbleNode.mark?.onClick)?.(),
-                      children: "Open"
+                      children: strings.openButton
                     }
                   )
                 ] }) : (
@@ -7031,9 +7109,11 @@ function MilestoneTimeline({
   highlightKeys = null,
   onHoverChange
 }) {
-  const [today] = useState(() => Date.now());
+  const today = useBrowserValueOnce(Date.now, null);
   const dated = [];
   const pending = [];
+  const strings = useShellStrings().timeline;
+  const locale = useShellLocale();
   for (const m of milestones) {
     const ms = toDayMs(m.date ?? null);
     if (ms === null) pending.push({ key: m.key, label: m.label, kind: m.kind });
@@ -7043,22 +7123,24 @@ function MilestoneTimeline({
   const explicitEnd = toDayMs(endDate ?? null);
   let startMs;
   let endMs;
+  let anchored = true;
   if (dated.length === 0) {
-    endMs = explicitEnd ?? today;
+    endMs = explicitEnd ?? today ?? 0;
     startMs = endMs - 30 * DAY_MS;
+    anchored = explicitEnd !== null || today !== null;
   } else {
     startMs = dated[0].ms;
     endMs = explicitEnd ?? dated[dated.length - 1].ms;
     if (endMs - startMs < DAY_MS) endMs = startMs + DAY_MS;
   }
   const totalLeadDays = dated.length > 0 ? Math.max(0, Math.round((endMs - startMs) / DAY_MS)) : 0;
-  const duration = summary ?? (totalLeadDays > 0 ? `${totalLeadDays.toLocaleString()} day${totalLeadDays === 1 ? "" : "s"}` : void 0);
+  const duration = summary ?? (totalLeadDays > 0 ? strings.duration(totalLeadDays) : void 0);
   const meta = [
-    dated.length > 0 ? `started ${fmtSliderDate(dated[0].ms)}` : void 0,
+    dated.length > 0 ? strings.started(fmtSliderDate(dated[0].ms, locale)) : void 0,
     duration,
     // Only where something HAS not happened: "7 of 7 milestones" is a count of
     // nothing, and the reader can see the dots.
-    pending.length > 0 ? `${dated.length} of ${milestones.length} milestones` : void 0
+    pending.length > 0 ? strings.reached(dated.length, milestones.length) : void 0
   ];
   const items = dated.map((m) => ({
     key: m.key,
@@ -7086,7 +7168,7 @@ function MilestoneTimeline({
     maxMs: Math.max(...ms)
   }));
   const rail = variant === "rail";
-  const track = /* @__PURE__ */ jsx("div", { className: "select-none", children: /* @__PURE__ */ jsx(
+  const track = anchored && /* @__PURE__ */ jsx("div", { className: "select-none", children: /* @__PURE__ */ jsx(
     TimelineTrack,
     {
       axis: rail ? "spread" : "compressed",
@@ -7096,11 +7178,11 @@ function MilestoneTimeline({
       phases,
       startMs,
       endMs,
-      todayMs: today,
+      todayMs: today ?? void 0,
       edgeCaptions,
       highlightKeys,
       onHoverChange,
-      ariaLabel: `${title} milestones`
+      ariaLabel: strings.milestones(title)
     }
   ) });
   if (rail) {
@@ -7161,6 +7243,7 @@ function useProductionTimeline(opts) {
     markers = []
   } = opts;
   const [scrubMs, setScrubMs] = useState(null);
+  const strings = useShellStrings().production;
   useEffect(() => {
     if (currentReportDate) {
       setScrubMs(new Date(currentReportDate).getTime());
@@ -7182,8 +7265,16 @@ function useProductionTimeline(opts) {
     stopPlay();
   }, [currentReportId]);
   const reportTimes = reports.map((r) => toDayMs(r.date)).filter((t) => t != null);
-  const earliestReport = reportTimes.length ? Math.min(...reportTimes) : Date.now();
-  const latestReport = reportTimes.length ? Math.max(...reportTimes) : Date.now();
+  const today = useBrowserValueOnce(Date.now, null);
+  const now = today ?? Math.max(
+    0,
+    ...reportTimes,
+    ...markers.map((m) => toDayMs(m.date) ?? 0),
+    toDayMs(poProductionStartDate ?? null) ?? 0,
+    toDayMs(poEstCompletionDate ?? null) ?? 0
+  );
+  const earliestReport = reportTimes.length ? Math.min(...reportTimes) : now;
+  const latestReport = reportTimes.length ? Math.max(...reportTimes) : now;
   const startMs = toDayMs(poProductionStartDate ?? null) ?? earliestReport;
   const estComplete = toDayMs(poEstCompletionDate ?? null) ?? 0;
   const isPostProd = POST_PRODUCTION_STATUSES.has((poStatus || "").toLowerCase());
@@ -7193,7 +7284,7 @@ function useProductionTimeline(opts) {
   }, 0);
   const endMs = (() => {
     const candidates = [estComplete, latestReport, latestMarker, startMs + DAY_MS];
-    if (!isPostProd) candidates.push(Date.now());
+    if (!isPostProd) candidates.push(now);
     return Math.max(...candidates);
   })();
   const totalLeadDays = Math.max(1, Math.round((endMs - startMs) / DAY_MS));
@@ -7228,7 +7319,7 @@ function useProductionTimeline(opts) {
     }));
     return {
       id: `zero-${poNumber}`,
-      progress_number: "Start",
+      progress_number: strings.start,
       date: poProductionStartDate || new Date(startMs).toISOString().slice(0, 10),
       items: zeroItems,
       est_completion_date: poEstCompletionDate ?? null,
@@ -7281,7 +7372,7 @@ function useProductionTimeline(opts) {
     }
     displayed = {
       id: `interp-${effectiveScrub}`,
-      progress_number: "Estimated",
+      progress_number: strings.estimated,
       date: new Date(effectiveScrub).toISOString().slice(0, 10),
       created_by_name: "",
       est_completion_date: estCompletion,
@@ -7317,9 +7408,9 @@ function useProductionTimeline(opts) {
     setScrubMs(startMs);
     let lastTime = performance.now();
     let cur = startMs;
-    const step = (now) => {
-      const dt = now - lastTime;
-      lastTime = now;
+    const step = (now2) => {
+      const dt = now2 - lastTime;
+      lastTime = now2;
       cur = cur + dt / msPerDayOfPlayback * DAY_MS;
       if (cur >= playStopMs) {
         setScrubMs(playStopMs);
@@ -7384,6 +7475,8 @@ function TimelineScrubber({
   bare = false,
   endMark = null
 }) {
+  const strings = useShellStrings().production;
+  const locale = useShellLocale();
   const dated = reports.map((r) => ({ report: r, ms: new Date(r.date).getTime() })).filter(({ ms }) => Number.isFinite(ms)).sort((a, b) => a.ms - b.ms);
   const items = dated.map(({ report, ms }) => ({
     key: report.id,
@@ -7423,13 +7516,13 @@ function TimelineScrubber({
         onChange,
         onDragStart,
         stops,
-        ariaLabel: "Scrub the production timeline",
+        ariaLabel: strings.scrub,
         valueText: (ms) => {
           const report = reportAt(ms);
-          return report ? `${reportLabel(report)} \xB7 ${fmtSliderDate(ms)}` : fmtSliderDate(ms);
+          return report ? `${reportLabel(report)} \xB7 ${fmtSliderDate(ms, locale)}` : fmtSliderDate(ms, locale);
         }
       },
-      ariaLabel: `Production reports and events, ${fmtSliderDate(startMs)} to ${fmtSliderDate(endMs)}`
+      ariaLabel: strings.label(fmtSliderDate(startMs, locale), fmtSliderDate(endMs, locale))
     }
   ) });
 }
@@ -7462,7 +7555,7 @@ function ProductionTimeline({
   onOpenMarker,
   renderReportPreview,
   onScrubProgress,
-  heading = "Production progress",
+  heading: headingProp,
   edgeCaptions,
   reportLabel = (report) => report.progress_number,
   resetLabel,
@@ -7487,6 +7580,10 @@ function ProductionTimeline({
   } = snapshot;
   const stops = reports.map((report) => toDayMs(report.date)).filter((ms) => ms != null).sort((a, b) => a - b);
   const play = useReportPlayback(stops, setScrubMs, onPlayStart);
+  const strings = useShellStrings().production;
+  const locale = useShellLocale();
+  const heading = headingProp ?? strings.heading;
+  const fmtDate = (ms) => fmtSliderDate(ms, locale);
   if (reports.length === 0 && markers.length === 0) return null;
   const shipmentMarkers = markers.filter((m) => m.kind === "shipment");
   const inspectionMarkers = markers.filter((m) => m.kind === "inspection");
@@ -7505,11 +7602,11 @@ function ProductionTimeline({
         type: "button",
         onClick: play.toggle,
         "aria-pressed": play.playing,
-        title: play.playing ? "Pause" : "Play the timeline, report by report",
+        title: play.playing ? strings.pause : strings.playTitle,
         className: "rosh-tl-play text-gray-700 border-gray-300 hover:text-blue-600 hover:border-blue-600",
         children: [
           play.playing ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 1.5h2.3v7H2zM5.7 1.5H8v7H5.7z" }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 1.2 8.4 5 2 8.8z" }) }),
-          /* @__PURE__ */ jsx("span", { children: play.playing ? "Pause" : "Play" })
+          /* @__PURE__ */ jsx("span", { children: play.playing ? strings.pause : strings.play })
         ]
       }
     )
@@ -7523,26 +7620,26 @@ function ProductionTimeline({
         resetToCurrent();
       },
       className: "text-xs text-blue-600 underline-offset-4 hover:underline font-medium",
-      children: resetLabel ?? `Back to ${currentLabel}`
+      children: resetLabel ?? strings.backTo(String(currentLabel))
     }
   ) : null;
+  const [showingBefore, showingAfter] = splitAround(strings.showing);
   const statusLine = (showing) => /* @__PURE__ */ jsx("p", { className: "rosh-tl-status text-gray-800", children: displayed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    showing && "Showing ",
+    showing && showingBefore,
     /* @__PURE__ */ jsx("b", { className: "font-medium", children: reportLabel(displayed) }),
+    showing && showingAfter,
     /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
       " \xB7 ",
-      fmtSliderDate(new Date(displayed.date).getTime()),
+      fmtDate(new Date(displayed.date).getTime()),
       " \xB7 ",
-      Math.round(overall),
-      "% overall",
+      strings.overall(Math.round(overall)),
       " \xB7 ",
-      totalStock.toLocaleString(),
-      " pc in stock"
+      strings.inStock(totalStock)
     ] })
-  ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "No production report filed yet" }) });
+  ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: strings.noReport }) });
   if (variant === "rail") {
     const estimateAhead = estCompletionMs != null && estCompletionMs >= endMs && endMs > startMs;
-    const endMark = estimateAhead ? { key: "__estimate__", label: "Estimated completion", dateText: fmtSliderDate(estCompletionMs) } : null;
+    const endMark = estimateAhead ? { key: "__estimate__", label: strings.estimatedCompletion, dateText: fmtDate(estCompletionMs) } : null;
     return /* @__PURE__ */ jsxs("div", { className: "shrink-0", "data-timeline-variant": "rail", children: [
       /* @__PURE__ */ jsx(
         TimelineScrubber,
@@ -7562,8 +7659,8 @@ function ProductionTimeline({
           renderReportPreview,
           reportLabel,
           edgeCaptions: {
-            start: edgeCaptions?.start ?? "Start",
-            end: edgeCaptions?.end ?? (estimateAhead ? "Est. done" : void 0)
+            start: edgeCaptions?.start ?? strings.start,
+            end: edgeCaptions?.end ?? (estimateAhead ? strings.estDone : void 0)
           },
           onDragStart: play.stop,
           playback: {
@@ -7588,8 +7685,8 @@ function ProductionTimeline({
       heading,
       subject: poNumber,
       meta: [
-        `${fmtSliderDate(startMs)} \u2192 ${fmtSliderDate(endMs)}`,
-        `${totalLeadDays.toLocaleString()} day${totalLeadDays === 1 ? "" : "s"} lead time`
+        `${fmtDate(startMs)} \u2192 ${fmtDate(endMs)}`,
+        strings.leadTime(totalLeadDays)
       ],
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
         resetButton,
@@ -7600,7 +7697,7 @@ function ProductionTimeline({
         /* @__PURE__ */ jsxs("div", { className: "rosh-tl-legend", children: [
           reports.length > 0 && /* @__PURE__ */ jsxs("span", { className: "border-gray-200 text-gray-500", children: [
             /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: "rosh-tl-glyph is-ring border-blue-600" }),
-            "Production report"
+            strings.report
           ] }),
           shipmentMarkers.length > 0 && /* @__PURE__ */ jsxs("span", { className: "border-gray-200 text-gray-500", children: [
             /* @__PURE__ */ jsx(
@@ -7612,7 +7709,7 @@ function ProductionTimeline({
                 children: /* @__PURE__ */ jsx(TimelineGlyph, { name: "truck" })
               }
             ),
-            "Shipment"
+            strings.shipment
           ] }),
           inspectionMarkers.length > 0 && /* @__PURE__ */ jsxs("span", { className: "border-gray-200 text-gray-500", children: [
             /* @__PURE__ */ jsx(
@@ -7624,7 +7721,7 @@ function ProductionTimeline({
                 children: /* @__PURE__ */ jsx(TimelineGlyph, { name: "flask" })
               }
             ),
-            "Inspection"
+            strings.inspection
           ] }),
           invoiceMarkers.length > 0 && /* @__PURE__ */ jsxs("span", { className: "border-gray-200 text-gray-500", children: [
             /* @__PURE__ */ jsx(
@@ -7636,7 +7733,7 @@ function ProductionTimeline({
                 children: /* @__PURE__ */ jsx(TimelineGlyph, { name: "receipt" })
               }
             ),
-            "Invoice"
+            strings.invoice
           ] })
         ] })
       ] }),
@@ -7685,6 +7782,7 @@ function ContainerFillChart({
   className,
   style
 }) {
+  const strings = useShellStrings().containers;
   const filledLines = isFilled ? items.filter(isFilled) : items;
   const qtyInstr = (l) => toInt(getInstructionQty(l));
   const qtyActual = (l) => toInt(getActualQty(l));
@@ -7714,24 +7812,12 @@ function ContainerFillChart({
   return /* @__PURE__ */ jsxs("div", { className: `mt-2 px-1 space-y-2 ${className ?? ""}`.trim(), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
       /* @__PURE__ */ jsxs("span", { children: [
-        filledLines.length,
-        " items \xB7 ",
-        totalQty,
-        " pcs",
-        hasActual && totalQtyInstr !== totalQtyActual && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-gray-400", children: [
-          "(",
-          totalQtyInstr,
-          " instr / ",
-          totalQtyActual,
-          " loaded)"
-        ] })
+        `${strings.items(filledLines.length)} \xB7 ${strings.pieces(totalQty)}`,
+        hasActual && totalQtyInstr !== totalQtyActual && /* @__PURE__ */ jsx("span", { className: "ml-1 text-gray-400", children: strings.split(totalQtyInstr, totalQtyActual) })
       ] }),
       showNewIndicator && newCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-green-600", children: [
         /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }),
-        newCount,
-        " new (",
-        newQty,
-        " pcs)"
+        strings.added(newCount, newQty)
       ] })
     ] }),
     totalVolume > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
@@ -7750,28 +7836,23 @@ function ContainerFillChart({
             /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 left-0 ${longerColor} transition-all`, style: { width: `${longerPct}%` } }),
             dual && shorterPct > 0 && /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 left-0 ${shorterColor} transition-all`, style: { width: `${shorterPct}%` } })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500 w-16 text-right", children: dual ? `${Math.min(totalVolumeActual - i * containerCap, containerCap).toFixed(1)} / ${containerCap} m\xB3` : `${Math.min(totalVolumeInstr - i * containerCap, containerCap).toFixed(1)} / ${containerCap} m\xB3` })
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500 w-16 text-right", children: dual ? strings.fill(Math.min(totalVolumeActual - i * containerCap, containerCap), containerCap) : strings.fill(Math.min(totalVolumeInstr - i * containerCap, containerCap), containerCap) })
         ] }, `bar-${i}`);
       }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs pt-0.5", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-gray-500 inline-flex items-center gap-1", children: [
-          "Total:",
+          strings.total,
           hasActual ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-blue-700", children: [
               /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-blue-500" }),
-              totalVolumeInstr.toFixed(2),
-              " m\xB3 instruction"
+              strings.instructed(totalVolumeInstr)
             ] }),
             /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "/" }),
             /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-green-700", children: [
               /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-green-500" }),
-              totalVolumeActual.toFixed(2),
-              " m\xB3 loaded"
+              strings.loaded(totalVolumeActual)
             ] })
-          ] }) : /* @__PURE__ */ jsxs("b", { className: "text-gray-700", children: [
-            totalVolume.toFixed(2),
-            " m\xB3"
-          ] })
+          ] }) : /* @__PURE__ */ jsx("b", { className: "text-gray-700", children: strings.volume(totalVolume) })
         ] }),
         /* @__PURE__ */ jsxs("span", { className: `font-medium ${isOptimal ? "text-green-600" : "text-gray-500"}`, children: [
           isOptimal && "\u2713 ",
@@ -7780,7 +7861,7 @@ function ContainerFillChart({
           useType
         ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400", children: "Volume: N/A (no volume data for these part numbers)" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400", children: strings.noVolume })
   ] });
 }
 var INLINE_RE = /!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*/g;
@@ -7850,6 +7931,7 @@ function renderInline(text) {
 }
 function ScreenshotPlaceholder({ alt }) {
   const label = alt.replace(/^screenshot:\s*/i, "");
+  const strings = useShellStrings().markdown;
   return /* @__PURE__ */ jsxs("div", { className: "my-1 flex items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-2.5", children: [
     /* @__PURE__ */ jsx(
       "svg",
@@ -7862,7 +7944,7 @@ function ScreenshotPlaceholder({ alt }) {
       }
     ),
     /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "Screenshot \u2014 " }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: `${strings.screenshot} \u2014 ` }),
       label
     ] })
   ] });
@@ -8085,7 +8167,7 @@ function HelpCenter({
             value: query,
             onChange: (e) => setQuery(e.target.value),
             placeholder: strings.help.searchPlaceholder,
-            className: "w-full rounded-md border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            className: "w-full rounded-md border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm shadow-sm focus:border-blue-500 rosh-focus-ring focus-visible:ring-1 focus-visible:ring-[color:var(--rosh-focus-ring-accent)]"
           }
         )
       ] }) }),
@@ -8163,6 +8245,7 @@ function SidebarActionButton({
   title,
   className = ""
 }) {
+  const hotkeyLabel = useShortcutLabel(hotkey ?? "");
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -8173,7 +8256,7 @@ function SidebarActionButton({
       className: `w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 ${VARIANTS2[variant]} ${className}`,
       children: [
         children,
-        hotkey && /* @__PURE__ */ jsx("kbd", { className: "rounded border border-blue-400/50 bg-blue-500/30 px-1.5 py-0.5 text-[10px] font-medium", children: hotkey })
+        hotkey && /* @__PURE__ */ jsx("kbd", { className: "rounded border border-blue-400/50 bg-blue-500/30 px-1.5 py-0.5 text-[10px] font-medium", children: hotkeyLabel })
       ]
     }
   );
@@ -8183,6 +8266,8 @@ function SidebarGroupLabel({ children }) {
 }
 function SidebarNavItem({ label, count, active, onClick, icon, trailing, severity }) {
   const marker = resolveSeverity(severity, "SidebarNavItem");
+  const severityWords = useShellStrings().severity;
+  const word = marker ? severityWord(marker, severityWords) : void 0;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -8198,7 +8283,7 @@ function SidebarNavItem({ label, count, active, onClick, icon, trailing, severit
           "span",
           {
             "aria-hidden": "true",
-            title: marker.word,
+            title: word,
             className: `shrink-0 h-1.5 w-1.5 rounded-full ${marker.fill}`
           }
         ),
@@ -8210,7 +8295,7 @@ function SidebarNavItem({ label, count, active, onClick, icon, trailing, severit
             children: label
           }
         ),
-        marker && /* @__PURE__ */ jsx("span", { className: "sr-only", children: marker.word }),
+        marker && /* @__PURE__ */ jsx("span", { className: "sr-only", children: word }),
         count != null && count > 0 && /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex items-center justify-center min-w-[1.25rem] px-1.5 h-5 rounded-full text-[11px] font-medium ${active ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`, children: count }),
         trailing != null && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: trailing })
       ]
@@ -8343,7 +8428,7 @@ function DropdownMenu({
         disabled,
         onClick: () => open ? close(false) : openAt(enabledFrom(0, 1)),
         onKeyDown: onTriggerKeyDown,
-        className: "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 disabled:cursor-not-allowed disabled:opacity-60",
+        className: "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)] disabled:cursor-not-allowed disabled:opacity-60",
         children: trigger
       }
     ),
@@ -8462,13 +8547,14 @@ var SIDE_POSITION = {
   bottom: "inset-x-0 bottom-0"
 };
 function CloseButton({ onClose }) {
+  const strings = useShellStrings().dialog;
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick: onClose,
-      "aria-label": "Close",
-      className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400",
+      "aria-label": strings.close,
+      className: "rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)]",
       children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l8 8M14 6l-8 8" }) })
     }
   );
@@ -8540,7 +8626,10 @@ function Drawer({
   ] });
 }
 var DEFAULT_MAGNIFIER = "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z";
-function GlobalSearch({ providers, typeIcons, placeholder = "Search...", onSelect } = {}) {
+var MIN_QUERY = 2;
+function GlobalSearch({ providers, typeIcons, placeholder: placeholderProp, onSelect } = {}) {
+  const strings = useShellStrings().search;
+  const placeholder = placeholderProp ?? strings.placeholder;
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
@@ -8572,7 +8661,7 @@ function GlobalSearch({ providers, typeIcons, placeholder = "Search...", onSelec
   }, [open]);
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
-    if (query.length < 2) {
+    if (query.length < MIN_QUERY) {
       setResults([]);
       return;
     }
@@ -8626,14 +8715,14 @@ function GlobalSearch({ providers, typeIcons, placeholder = "Search...", onSelec
               onChange: (e) => setQuery(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder,
-              className: "flex-1 text-sm bg-transparent border-0 outline-none placeholder-gray-400"
+              className: "flex-1 text-sm bg-transparent border-0 rosh-focus-ring placeholder-gray-400"
             }
           ),
-          /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center rounded border border-gray-300 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: "ESC" })
+          /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center rounded border border-gray-300 px-1.5 py-0.5 text-[10px] font-medium text-gray-400", children: strings.escBadge })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "max-h-[50vh] overflow-y-auto", children: [
-          loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Searching..." }),
-          !loading && query.length >= 2 && results.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "No results found." }),
+          loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: strings.searching }),
+          !loading && query.length >= MIN_QUERY && results.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: strings.noResults }),
           !loading && results.length > 0 && /* @__PURE__ */ jsx("ul", { className: "py-2", children: results.map((r, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
             "button",
             {
@@ -8650,23 +8739,23 @@ function GlobalSearch({ providers, typeIcons, placeholder = "Search...", onSelec
               ]
             }
           ) }, `${r.type}-${r.label}-${i}`)) }),
-          !loading && query.length < 2 && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: "Type at least 2 characters to search..." })
+          !loading && query.length < MIN_QUERY && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-gray-400", children: strings.minChars(MIN_QUERY) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-gray-100 bg-gray-50 text-[11px] text-gray-400", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
               /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2191" }),
               /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "\u2193" }),
-              " navigate"
+              ` ${strings.navigate}`
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Enter" }),
-              " open"
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: strings.enterKey }),
+              ` ${strings.open}`
             ] })
           ] }),
           /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: "Esc" }),
-            " close"
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-gray-300 px-1 py-0.5 font-medium", children: strings.escKey }),
+            ` ${strings.close}`
           ] })
         ] })
       ] })
@@ -8684,13 +8773,18 @@ function Kanban({
   onCardClick,
   sortInColumn,
   isLoading = false,
-  loadingText = "Loading\u2026",
+  loadingText: loadingTextProp,
   emptyState,
   showColumnsWhenEmpty = false,
-  columnEmptyText = "Drop here",
+  columnEmptyText: columnEmptyTextProp,
   onAddItem,
-  addItemText = "Add item"
+  addItemText: addItemTextProp
 }) {
+  const strings = useShellStrings().kanban;
+  const locale = useShellLocale();
+  const loadingText = loadingTextProp ?? strings.loading;
+  const columnEmptyText = columnEmptyTextProp ?? strings.dropHere;
+  const addItemText = addItemTextProp ?? strings.addItem;
   const [dragId, setDragId] = useState(null);
   const [over, setOver] = useState(null);
   const grouped = useMemo(() => {
@@ -8706,7 +8800,7 @@ function Kanban({
   };
   const boardRef = useRef(null);
   const prevRects = useRef(/* @__PURE__ */ new Map());
-  useLayoutEffect(() => {
+  useBrowserLayoutEffect(() => {
     if (dragId !== null) return;
     const board = boardRef.current;
     if (!board) return;
@@ -8759,7 +8853,7 @@ function Kanban({
   };
   if (isLoading) return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: loadingText });
   if (items.length === 0 && !showColumnsWhenEmpty) {
-    return /* @__PURE__ */ jsx(Fragment, { children: emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: "No items." }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: strings.empty }) });
   }
   return /* @__PURE__ */ jsx("div", { ref: boardRef, className: "flex-1 overflow-x-auto grid-scroll", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 h-full min-w-max pb-2", children: columns.map((col) => {
     const colItems = grouped[col.value] ?? [];
@@ -8791,7 +8885,7 @@ function Kanban({
                   /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${col.dot ?? "bg-gray-400"}` }),
                   col.label
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "text-xs opacity-70", children: colItems.length })
+                /* @__PURE__ */ jsx("span", { className: "text-xs opacity-70", children: formatPlain(colItems.length, locale) })
               ]
             }
           ),
@@ -8890,14 +8984,16 @@ function Pagination({
   showEdges = false,
   className = ""
 }) {
+  const strings = useShellStrings().pagination;
+  const locale = useShellLocale();
   if (pageCount <= 1) return null;
   const pages = buildPages(page, pageCount, siblingCount);
   const go = (p) => {
     if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
   };
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: `flex items-center gap-1 ${className}`.trim(), children: [
-    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "First page", disabled: page === 1, onClick: () => go(1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xAB" }),
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous page", disabled: page === 1, onClick: () => go(page - 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u2039" }),
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": strings.label, className: `flex items-center gap-1 ${className}`.trim(), children: [
+    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": strings.first, disabled: page === 1, onClick: () => go(1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xAB" }),
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": strings.previous, disabled: page === 1, onClick: () => go(page - 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u2039" }),
     pages.map(
       (p, i) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-gray-400", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx(
         "button",
@@ -8906,13 +9002,13 @@ function Pagination({
           "aria-current": p === page ? "page" : void 0,
           onClick: () => go(p),
           className: `${BTN} ${p === page ? "bg-blue-600 font-medium text-white" : "text-gray-700 hover:bg-gray-100"}`,
-          children: p
+          children: formatPlain(p, locale)
         },
         p
       )
     ),
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next page", disabled: page === pageCount, onClick: () => go(page + 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u203A" }),
-    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Last page", disabled: page === pageCount, onClick: () => go(pageCount), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xBB" })
+    /* @__PURE__ */ jsx("button", { type: "button", "aria-label": strings.next, disabled: page === pageCount, onClick: () => go(page + 1), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\u203A" }),
+    showEdges && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": strings.last, disabled: page === pageCount, onClick: () => go(pageCount), className: `${BTN} text-gray-600 hover:bg-gray-100`, children: "\xBB" })
   ] });
 }
 var isGroup = (h) => Array.isArray(h.columns);
@@ -8967,7 +9063,7 @@ function DataTable({
   const bottomPad = virtualized ? (data.length - end) * virtualized.rowHeight : 0;
   const headRowRef = useRef(null);
   const [headRowH, setHeadRowH] = useState(0);
-  useLayoutEffect(() => {
+  useBrowserLayoutEffect(() => {
     if (!virtualized) return;
     const h = headRowRef.current?.offsetHeight ?? 0;
     setHeadRowH((prev) => prev === h ? prev : h);
@@ -9148,7 +9244,7 @@ function DataTable({
                     } : {},
                     className: [
                       "border-b border-gray-100 last:border-b-0",
-                      rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400" : "",
+                      rowProps?.onClick ? "cursor-pointer hover:bg-gray-50 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--rosh-focus-ring-solid)]" : "",
                       rowClassName?.(row, i) ?? "",
                       rowProps?.className ?? ""
                     ].filter(Boolean).join(" "),
@@ -9223,27 +9319,29 @@ function ListFooter({
   isFetchingMore,
   extra
 }) {
+  const strings = useShellStrings().list;
   const total = totalCount ?? loadedCount;
   const allLoaded = loadedCount >= total;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     extra,
-    selectedCount > 0 ? `${selectedCount} selected \u2014 ` : "",
-    allLoaded ? totalCount != null ? `All ${total.toLocaleString()} ${label} loaded` : `${total.toLocaleString()} ${label}` : `${loadedCount.toLocaleString()} of ${total.toLocaleString()} ${label}`,
-    isFetchingMore ? " \xB7 Loading more..." : ""
+    selectedCount > 0 ? `${strings.selected(selectedCount)} \u2014 ` : "",
+    allLoaded ? totalCount != null ? strings.allLoaded(total, label) : strings.count(total, label) : strings.loadedOf(loadedCount, total, label),
+    isFetchingMore ? ` \xB7 ${strings.loadingMore}` : ""
   ] });
 }
 function ListLoadError({
-  title = "Couldn't load this list",
-  message = "Something went wrong fetching these records. Check your connection and try again.",
+  title,
+  message,
   onRetry,
   variant = "dashed"
 }) {
+  const strings = useShellStrings().list;
   const frame = variant === "card" ? "rounded-md border border-gray-200 bg-white px-6 py-12" : variant === "none" ? "px-6 py-12" : "rounded-lg border-2 border-dashed border-red-200 px-6 py-12";
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center ${frame}`, role: "alert", children: [
     /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-red-300 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m0 3.75h.008M10.34 3.94l-8.4 14.55A1.5 1.5 0 003.24 21h17.52a1.5 1.5 0 001.3-2.51l-8.4-14.55a1.5 1.5 0 00-2.6 0z" }) }),
-    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: title }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: message }),
-    onRetry && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) })
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: title ?? strings.loadError }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: message ?? strings.loadErrorMessage }),
+    onRetry && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", onClick: onRetry, children: strings.retry }) })
   ] });
 }
 function Sparkline({
@@ -9296,6 +9394,7 @@ function BarChart({
   className,
   style
 }) {
+  const locale = useShellLocale();
   if (data.length === 0) return null;
   const peak = max ?? (Math.max(...data, 0) || 1);
   return /* @__PURE__ */ jsxs("div", { className, style, children: [
@@ -9308,13 +9407,22 @@ function BarChart({
           minHeight: v > 0 ? 2 : 0,
           backgroundColor: colors?.[i] ?? color
         },
-        title: labels?.[i] != null ? `${labels[i]}: ${v}` : String(v)
+        title: labels?.[i] != null ? `${labels[i]}: ${formatPlain(v, locale)}` : formatPlain(v, locale)
       }
     ) }, i)) }),
     labels && /* @__PURE__ */ jsx("div", { className: "mt-1 flex", style: { gap }, children: labels.map((l, i) => /* @__PURE__ */ jsx("div", { className: "flex-1 truncate text-center text-[10px] text-gray-400", children: l }, i)) })
   ] });
 }
-var PALETTE = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#6366f1", "#14b8a6", "#a855f7", "#64748b"];
+var DONUT_PALETTE = [
+  "var(--rosh-donut-1)",
+  "var(--rosh-donut-2)",
+  "var(--rosh-donut-3)",
+  "var(--rosh-donut-4)",
+  "var(--rosh-donut-5)",
+  "var(--rosh-donut-6)",
+  "var(--rosh-donut-7)",
+  "var(--rosh-donut-8)"
+];
 function DonutChart({ segments, size = 120, thickness = 16, centerLabel, className, style }) {
   const total = segments.reduce((s, x) => s + Math.max(0, x.value), 0) || 1;
   const r = (size - thickness) / 2;
@@ -9328,7 +9436,7 @@ function DonutChart({ segments, size = 120, thickness = 16, centerLabel, classNa
       style: { width: size, height: size, ...style },
       children: [
         /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-hidden": "true", style: { transform: "rotate(-90deg)" }, children: [
-          /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "rgba(148,163,184,0.25)", strokeWidth: thickness }),
+          /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "var(--rosh-donut-track)", strokeWidth: thickness }),
           segments.map((s, i) => {
             const len2 = Math.max(0, s.value) / total * circ;
             const el = /* @__PURE__ */ jsx(
@@ -9338,7 +9446,7 @@ function DonutChart({ segments, size = 120, thickness = 16, centerLabel, classNa
                 cy: c,
                 r,
                 fill: "none",
-                stroke: s.color ?? PALETTE[i % PALETTE.length],
+                stroke: s.color ?? DONUT_PALETTE[i % DONUT_PALETTE.length],
                 strokeWidth: thickness,
                 strokeDasharray: `${len2} ${circ - len2}`,
                 strokeDashoffset: -offset
@@ -9361,7 +9469,7 @@ function toPoints(data, min, span) {
 function pathFor(pts) {
   return pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
 }
-var fmt = (v) => Number.isInteger(v) ? String(v) : v.toFixed(1);
+var fmt = (v, locale) => Number.isInteger(v) ? formatPlain(v, locale) : formatFixed(v, 1, locale);
 function LineChart({
   series,
   labels,
@@ -9375,6 +9483,7 @@ function LineChart({
   className,
   style
 }) {
+  const locale = useShellLocale();
   const drawn = series.filter((s) => s.data.length > 0);
   if (drawn.length === 0) return null;
   const all = drawn.flatMap((s) => s.data);
@@ -9389,9 +9498,9 @@ function LineChart({
     ] }, i)) }),
     /* @__PURE__ */ jsxs("div", { className: "flex", children: [
       showScale && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between pr-1.5 text-right text-[10px] leading-none text-gray-400", style: { height }, children: [
-        /* @__PURE__ */ jsx("span", { children: fmt(top) }),
-        /* @__PURE__ */ jsx("span", { children: fmt(bottom + span / 2) }),
-        /* @__PURE__ */ jsx("span", { children: fmt(bottom) })
+        /* @__PURE__ */ jsx("span", { children: fmt(top, locale) }),
+        /* @__PURE__ */ jsx("span", { children: fmt(bottom + span / 2, locale) }),
+        /* @__PURE__ */ jsx("span", { children: fmt(bottom, locale) })
       ] }),
       /* @__PURE__ */ jsxs(
         "svg",
@@ -9411,7 +9520,7 @@ function LineChart({
               return /* @__PURE__ */ jsxs("g", { children: [
                 s.fill && /* @__PURE__ */ jsx("path", { d: `${line} L100,100 L0,100 Z`, fill: s.fill, stroke: "none" }),
                 /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color(s), strokeWidth, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }),
-                showDots && s.data.length > 1 && pts.map(([x, y], i) => /* @__PURE__ */ jsx("path", { d: `M${x.toFixed(2)},${y.toFixed(2)} h0.01`, stroke: color(s), strokeWidth: strokeWidth * 2.5, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", children: /* @__PURE__ */ jsx("title", { children: `${labels?.[i] != null ? `${labels[i]}: ` : ""}${s.label ? `${s.label} ` : ""}${s.data[i]}` }) }, i))
+                showDots && s.data.length > 1 && pts.map(([x, y], i) => /* @__PURE__ */ jsx("path", { d: `M${x.toFixed(2)},${y.toFixed(2)} h0.01`, stroke: color(s), strokeWidth: strokeWidth * 2.5, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", children: /* @__PURE__ */ jsx("title", { children: `${labels?.[i] != null ? `${labels[i]}: ` : ""}${s.label ? `${s.label} ` : ""}${formatPlain(s.data[i], locale)}` }) }, i))
               ] }, si);
             })
           ]
@@ -9429,7 +9538,7 @@ var STATUS_GROUPS = {
   overdue: "danger"
 };
 var REVENUE = [12, 18, 14, 22, 19, 27, 24, 31, 28, 35, 30, 38];
-var MONTHS2 = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
+var MONTHS = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
 var ORDERS = [
   { id: "#3201", customer: "Alice Nguyen", total: "$1,204", status: "paid" },
   { id: "#3202", customer: "Marco Reyes", total: "$642", status: "shipped" },
@@ -9456,7 +9565,7 @@ function DashboardTemplate() {
       /* @__PURE__ */ jsx(StatCard, { label: "Refunds", value: "$1.1k", delta: { value: "0%", direction: "flat" } })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [
-      /* @__PURE__ */ jsx(Card, { header: "Revenue", className: "lg:col-span-2", children: /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: /* @__PURE__ */ jsx(BarChart, { data: REVENUE, labels: MONTHS2, height: 160 }) }) }),
+      /* @__PURE__ */ jsx(Card, { header: "Revenue", className: "lg:col-span-2", children: /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: /* @__PURE__ */ jsx(BarChart, { data: REVENUE, labels: MONTHS, height: 160 }) }) }),
       /* @__PURE__ */ jsx(Card, { header: "Traffic sources", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ jsx(
           DonutChart,
@@ -9473,19 +9582,19 @@ function DashboardTemplate() {
         ),
         /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5 text-sm text-gray-600", children: [
           /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Dot, { c: "#3b82f6" }),
+            /* @__PURE__ */ jsx(Dot, { c: DONUT_PALETTE[0] }),
             "Direct \xB7 45%"
           ] }),
           /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Dot, { c: "#22c55e" }),
+            /* @__PURE__ */ jsx(Dot, { c: DONUT_PALETTE[1] }),
             "Search \xB7 30%"
           ] }),
           /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Dot, { c: "#f59e0b" }),
+            /* @__PURE__ */ jsx(Dot, { c: DONUT_PALETTE[2] }),
             "Social \xB7 15%"
           ] }),
           /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Dot, { c: "#ef4444" }),
+            /* @__PURE__ */ jsx(Dot, { c: DONUT_PALETTE[3] }),
             "Email \xB7 10%"
           ] })
         ] })
@@ -9971,12 +10080,12 @@ function AuthScreen({ mode = "login" }) {
   ] }) });
 }
 var COPY2 = {
-  403: { title: "Access denied", body: "You don't have permission to view this page." },
-  404: { title: "Page not found", body: "The page you're looking for doesn't exist or was moved." },
-  500: { title: "Something went wrong", body: "An unexpected error occurred. Please try again." }
+  403: (errors) => ({ title: errors.forbidden, body: errors.forbiddenBody }),
+  404: (errors) => ({ title: errors.notFound, body: errors.notFoundBody }),
+  500: (errors) => ({ title: errors.serverError, body: errors.serverErrorBody })
 };
 function ErrorPage({ code = 404, actions }) {
-  const c = COPY2[code];
+  const c = COPY2[code](useShellStrings().errors);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center bg-gray-50 p-6 text-center", children: [
     /* @__PURE__ */ jsx("div", { className: "text-7xl font-bold tracking-tight text-gray-400", children: code }),
     /* @__PURE__ */ jsx("h1", { className: "mt-2 text-xl font-semibold text-gray-900", children: c.title }),
@@ -9984,6 +10093,9 @@ function ErrorPage({ code = 404, actions }) {
     actions && /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center gap-2", children: actions })
   ] });
 }
+function ErrorWord({ pick }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: pick(useShellStrings().errors) });
+}
 var ErrorBoundary = class extends Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
@@ -10018,26 +10130,34 @@ var ErrorBoundary = class extends Component {
           {
             code: 500,
             actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button_default, { onClick: this.reset, children: "Try again" }),
+              /* @__PURE__ */ jsx(Button_default, { onClick: this.reset, children: /* @__PURE__ */ jsx(ErrorWord, { pick: (errors) => errors.retry }) }),
               this.props.actions
             ] })
           }
         ) }),
         this.props.showDetails && /* @__PURE__ */ jsxs("details", { className: "mx-auto w-full max-w-2xl shrink-0 px-6 pb-6", children: [
-          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-600", children: "Error details" }),
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-600", children: /* @__PURE__ */ jsx(ErrorWord, { pick: (errors) => errors.details }) }),
           /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-auto rounded-md bg-gray-100 p-3 text-xs text-gray-700", children: error.stack ?? error.message })
         ] })
       ] })
     );
   }
 };
+function darkQuery() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+}
 function subscribeMediaQuery(cb) {
-  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  const mq = darkQuery();
+  if (!mq) return () => {
+  };
   mq.addEventListener("change", cb);
   return () => mq.removeEventListener("change", cb);
 }
 function getSystemIsDark() {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return darkQuery()?.matches ?? false;
+}
+function getServerIsDark() {
+  return false;
 }
 function hexToHsl(hex) {
   const r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -10068,7 +10188,7 @@ function hslToHex(h, s, l) {
 }
 function resolveTheme(theme) {
   const t = theme || "system";
-  if (t === "system") return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  if (t === "system") return getSystemIsDark() ? "dark" : "light";
   return t;
 }
 function applyAccent(accentColor) {
@@ -10126,7 +10246,7 @@ function applyThemePrefs(p) {
 }
 function useTheme() {
   const { prefs } = useShellPrefs();
-  const systemDark = useSyncExternalStore(subscribeMediaQuery, getSystemIsDark);
+  const systemDark = useSyncExternalStore(subscribeMediaQuery, getSystemIsDark, getServerIsDark);
   const saved = prefs.theme || "system";
   const accentColor = prefs.accent_color || null;
   const customBgColor = prefs.custom_bg_color || null;
@@ -10558,7 +10678,7 @@ function usePlotWidth(ref, fallback = DEFAULT_PLOT_WIDTH) {
 function RankedBars({
   rows,
   max,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   emphasisKey,
   highlight = "none",
   emphasisTone,
@@ -10566,8 +10686,12 @@ function RankedBars({
   rowGap = 30,
   animate = true,
   className,
-  emptyLabel = "Nothing to rank in this window."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.nothingToRank;
   if (rows.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: `text-sm text-gray-500 ${className ?? ""}`, children: emptyLabel });
   }
@@ -10584,7 +10708,7 @@ function RankedBars({
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("span", { className: `truncate font-mono text-xs text-gray-600 ${emphasised ? "font-semibold" : ""}`, title: row.label, children: [
           row.label,
-          emphasised && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (emphasised)" })
+          emphasised && /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` ${strings.emphasised}` })
         ] }),
         /* @__PURE__ */ jsx(
           "span",
@@ -10618,11 +10742,15 @@ function Meter({
   objective,
   label,
   detail,
-  formatValue = (v) => `${(v * 100).toFixed(1)}%`,
+  formatValue: formatValueProp,
   tone,
   className,
-  unavailableLabel = "Not enough eligible requests to judge."
+  unavailableLabel: unavailableLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPercent(v * 100, 1, locale));
+  const unavailableLabel = unavailableLabelProp ?? strings.notEnough;
   if (value == null || !Number.isFinite(value)) {
     return /* @__PURE__ */ jsxs("div", { className, children: [
       label && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: label }),
@@ -10636,7 +10764,7 @@ function Meter({
   const caption = [
     segments?.length ? segments.map((seg) => `${seg.label} ${formatValue(seg.value)}`).join(" \xB7 ") : "",
     detail ?? "",
-    objective != null ? `objective ${formatValue(objective)}${met ? " met" : " missed"}` : ""
+    objective != null ? (met ? strings.objectiveMet : strings.objectiveMissed)(formatValue(objective)) : ""
   ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-baseline justify-between gap-3", children: [
@@ -10704,9 +10832,9 @@ function Meter({
   ] });
 }
 var DIRECTION = {
-  up: { glyph: "\u25B2", word: "up" },
-  down: { glyph: "\u25BC", word: "down" },
-  flat: { glyph: "\u25A0", word: "flat" }
+  up: { glyph: "\u25B2", word: "trendUp" },
+  down: { glyph: "\u25BC", word: "trendDown" },
+  flat: { glyph: "\u25A0", word: "trendFlat" }
 };
 function StatTile({
   label,
@@ -10719,6 +10847,8 @@ function StatTile({
   footnote,
   className
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
   const direction = delta == null ? null : delta > 0 ? "up" : delta < 0 ? "down" : "flat";
   const deltaColour = deltaTone ? STATUS_VARS[deltaTone] : void 0;
   const trendColour = trendTone ? STATUS_VARS[trendTone] : resolveSeriesColor(0);
@@ -10731,10 +10861,10 @@ function StatTile({
     direction && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", style: deltaColour ? { color: deltaColour } : void 0, children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: DIRECTION[direction].glyph }),
       " ",
-      Math.abs(delta),
+      formatPlain(Math.abs(delta), locale),
       /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
         " ",
-        DIRECTION[direction].word
+        strings[DIRECTION[direction].word]
       ] })
     ] }),
     trend && trend.length > 1 && /* @__PURE__ */ jsx(
@@ -10755,9 +10885,11 @@ function ChartSkeleton({
   width = 720,
   variant = "area",
   bars = 9,
-  label = "Loading chart data",
+  label: labelProp,
   className
 }) {
+  const strings = useShellStrings().charts;
+  const label = labelProp ?? strings.loading;
   const id = useId();
   const shimmerId = `${id}-shimmer`;
   const left = 48;
@@ -10892,7 +11024,7 @@ function ChartLegend({
         onMouseLeave: () => setHighlighted(null),
         onFocus: () => setHighlighted(entry.key),
         onBlur: () => setHighlighted(null),
-        className: `flex items-center gap-2 rounded text-xs text-gray-600 transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 ${dimmed ? "opacity-40" : ""}`,
+        className: `flex items-center gap-2 rounded text-xs text-gray-600 transition-opacity rosh-focus-outline ${dimmed ? "opacity-40" : ""}`,
         children: swatch
       }
     ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2 text-xs text-gray-600", children: swatch }) }, entry.key);
@@ -10903,7 +11035,7 @@ function ChartFrame({
   subtitle,
   legend,
   table,
-  tableLabel = "Show the data as a table",
+  tableLabel,
   busy = false,
   loading = false,
   skeletonVariant = "area",
@@ -10914,6 +11046,7 @@ function ChartFrame({
   children,
   className
 }) {
+  const strings = useShellStrings().charts;
   return /* @__PURE__ */ jsx(ChartHighlightProvider, { children: /* @__PURE__ */ jsxs(
     "section",
     {
@@ -10930,7 +11063,7 @@ function ChartFrame({
         loading ? /* @__PURE__ */ jsx(ChartSkeleton, { variant: skeletonVariant, height: skeletonHeight }) : /* @__PURE__ */ jsx("div", { className: busy ? "opacity-60 transition-opacity" : "transition-opacity", children }),
         !loading && legend && legend.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { entries: legend, interactive: interactiveLegend, fallbackSwatch: legendSwatch }),
         !loading && table && /* @__PURE__ */ jsxs("details", { className: "border-t border-gray-100 pt-3", children: [
-          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500", children: tableLabel }),
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-600 rosh-focus-outline", children: tableLabel ?? strings.showTable }),
           /* @__PURE__ */ jsx("div", { className: "mt-3 overflow-x-auto", style: { color: CHART_INK.label }, children: table })
         ] })
       ]
@@ -11026,6 +11159,7 @@ function ChartBrush({
   color,
   className
 }) {
+  const strings = useShellStrings().charts;
   const track = useRef(null);
   const last = labels.length - 1;
   const [from, to] = range;
@@ -11103,10 +11237,10 @@ function ChartBrush({
         height,
         rx: 3,
         fill: hue,
-        className: "cursor-ew-resize focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        className: "cursor-ew-resize rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-deep)]",
         tabIndex: 0,
         role: "slider",
-        "aria-label": edge === "from" ? "Window start" : "Window end",
+        "aria-label": edge === "from" ? strings.windowStart : strings.windowEnd,
         "aria-valuemin": 0,
         "aria-valuemax": last,
         "aria-valuenow": index,
@@ -11129,7 +11263,7 @@ function ChartBrush({
       height,
       viewBox: `0 0 ${width} ${height}`,
       role: "group",
-      "aria-label": `Time window \u2014 showing ${labels[from]} to ${labels[to]} of ${labels.length} intervals`,
+      "aria-label": strings.window(labels[from], labels[to], labels.length),
       children: [
         /* @__PURE__ */ jsx("path", { d: outline, fill: CHART_INK.grid }),
         /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: xAt(from), height, fill: CHART_INK.surface, fillOpacity: 0.72 }),
@@ -11161,15 +11295,19 @@ function CartesianPlot({
   min,
   max,
   yTickCount = 4,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
   xTickAnchor = "center",
   children,
   tooltip,
   ariaLabel,
   className,
-  emptyLabel = "No data in this window."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noData;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -11214,7 +11352,7 @@ function CartesianPlot({
         role: "img",
         "aria-label": ariaLabel,
         tabIndex: 0,
-        className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        className: "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-deep)]",
         onMouseLeave: () => setActive(null),
         onBlur: () => setActive(null),
         onKeyDown: onKey,
@@ -11268,7 +11406,7 @@ function TimeSeriesChart({
   tension = 0,
   max,
   yTickCount = 4,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
   referenceLines,
   labelEndpoints = false,
@@ -11285,8 +11423,12 @@ function TimeSeriesChart({
   gridStyle = "solid",
   width: widthProp,
   className,
-  emptyLabel = "No data in this window."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noData;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -11341,7 +11483,7 @@ function TimeSeriesChart({
   const y = linearScale([0, top], { from: plot.bottom, to: plot.top });
   const scaleY = (value) => ladder ? ladder(value) : y(value);
   const isPercent = stacked && stackMode === "percent";
-  const formatTick = isPercent ? (v) => `${Math.round(v * 100)}%` : formatValue;
+  const formatTick = isPercent ? (v) => formatPercent(Math.round(v * 100), 0, locale) : formatValue;
   const yTicks = ladder ? ladder.levels.map((level) => ({ value: level, y: ladder(level) })) : y.ticks(yTickCount + 1).map((value) => ({ value, y: y(value) }));
   const move = (delta) => (event) => {
     event.preventDefault();
@@ -11359,9 +11501,9 @@ function TimeSeriesChart({
         height,
         viewBox: `0 0 ${width} ${height}`,
         role: "img",
-        "aria-label": `${drawn.map((s) => s.label).join(", ")} over ${labels.length} intervals`,
+        "aria-label": strings.overIntervals(drawn.map((s) => s.label), labels.length),
         tabIndex: 0,
-        className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        className: "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-deep)]",
         onMouseLeave: () => setActive(null),
         onBlur: () => setActive(null),
         onKeyDown: (event) => {
@@ -11631,9 +11773,9 @@ function TimeSeriesChart({
               // carries it back: the share the chart drew AND the count it was
               // taken over. A share without its denominator is the thing this
               // whole family keeps refusing to ship.
-              value: !isValue(s.data[active]) ? void 0 : stacked && stackMode === "percent" ? `${((share(s.data[active], active) ?? 0) * 100).toFixed(1)}% \xB7 ${formatValue(s.data[active])}` : formatValue(s.data[active])
+              value: !isValue(s.data[active]) ? void 0 : stacked && stackMode === "percent" ? `${formatPercent((share(s.data[active], active) ?? 0) * 100, 1, locale)} \xB7 ${formatValue(s.data[active])}` : formatValue(s.data[active])
             })),
-            footnote: stacked && stackMode === "percent" ? `${formatValue(bucketTotals[active])} in this bucket` : void 0
+            footnote: stacked && stackMode === "percent" ? strings.inBucket(formatValue(bucketTotals[active])) : void 0
           }
         )
       }
@@ -11649,7 +11791,7 @@ function ColumnChart({
   height = 220,
   width,
   max,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
   className,
   emptyLabel,
@@ -11663,6 +11805,9 @@ function ColumnChart({
 }) {
   const defsId = useId();
   const { highlighted } = useHighlight();
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
   if (loading) return /* @__PURE__ */ jsx(ChartSkeleton, { height, width, variant: "bars", className });
   const drawn = series.map((s, slot) => ({ ...s, slot })).filter((s) => s.data.some((v) => Number.isFinite(v)));
   const finiteAt = (s, i) => {
@@ -11683,11 +11828,11 @@ function ColumnChart({
       height,
       width,
       max: percent ? 1 : max,
-      formatValue: percent ? (v) => `${Math.round(v * 100)}%` : formatValue,
+      formatValue: percent ? (v) => formatPercent(Math.round(v * 100), 0, locale) : formatValue,
       yAxisLabel,
       className,
       emptyLabel,
-      ariaLabel: `${drawn.map((s) => s.label).join(", ")} across ${labels.length} categories`,
+      ariaLabel: strings.acrossCategories(drawn.map((s) => s.label), labels.length),
       tooltip: (index) => /* @__PURE__ */ jsx(
         ChartTooltip,
         {
@@ -11698,9 +11843,9 @@ function ColumnChart({
             color: resolveSeriesColor(s.slot, s.color, s.tone),
             // Percent mode drops volume from the plot, so the tooltip carries
             // it back — the share AND the count it was taken over.
-            value: !Number.isFinite(s.data[index]) ? void 0 : percent ? `${((share(s.data[index], index) ?? 0) * 100).toFixed(1)}% \xB7 ${formatValue(s.data[index])}` : formatValue(s.data[index])
+            value: !Number.isFinite(s.data[index]) ? void 0 : percent ? `${formatPercent((share(s.data[index], index) ?? 0) * 100, 1, locale)} \xB7 ${formatValue(s.data[index])}` : formatValue(s.data[index])
           })),
-          footnote: percent ? `${formatValue(totals[index])} in this category` : void 0
+          footnote: percent ? strings.inCategory(formatValue(totals[index])) : void 0
         }
       ),
       children: ({ x, y, bottom, active }) => {
@@ -11776,16 +11921,21 @@ function ScatterChart({
   width: widthProp,
   xLabel,
   yLabel,
-  formatX = (v) => String(v),
-  formatY = (v) => String(v),
+  formatX: formatXProp,
+  formatY: formatYProp,
   xDomain,
   yDomain,
   xScale = "linear",
   yScale = "linear",
   radiusRange = [4, 22],
   className,
-  emptyLabel = "No observations in this window."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatX = formatXProp ?? ((v) => formatPlain(v, locale));
+  const formatY = formatYProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noObservations;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -11838,9 +11988,9 @@ function ScatterChart({
         height,
         viewBox: `0 0 ${width} ${height}`,
         role: "img",
-        "aria-label": `${drawn.map((s) => s.label).join(", ")}: ${yLabel ?? "y"} against ${xLabel ?? "x"}` + (omitted > 0 ? `. ${omitted} ${omitted === 1 ? "point" : "points"} outside the shown range` : ""),
+        "aria-label": strings.scatter(drawn.map((s) => s.label), yLabel ?? strings.yAxis, xLabel ?? strings.xAxis) + (omitted > 0 ? `. ${strings.outsideRange(omitted)}` : ""),
         tabIndex: 0,
-        className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        className: "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-deep)]",
         onMouseLeave: () => setHover(null),
         onBlur: () => setHover(null),
         onKeyDown: onKey,
@@ -11878,9 +12028,9 @@ function ScatterChart({
       {
         title: hoveredPoint.label ?? hoveredSeries.label,
         rows: [
-          { key: "x", label: xLabel ?? "x", color: resolveSeriesColor(hover.s, hoveredSeries.color, hoveredSeries.tone), value: formatX(hoveredPoint.x) },
-          { key: "y", label: yLabel ?? "y", color: resolveSeriesColor(hover.s, hoveredSeries.color, hoveredSeries.tone), value: formatY(hoveredPoint.y) },
-          ...hoveredPoint.size != null ? [{ key: "size", label: "Size", color: CHART_INK.muted, value: String(hoveredPoint.size) }] : []
+          { key: "x", label: xLabel ?? strings.xAxis, color: resolveSeriesColor(hover.s, hoveredSeries.color, hoveredSeries.tone), value: formatX(hoveredPoint.x) },
+          { key: "y", label: yLabel ?? strings.yAxis, color: resolveSeriesColor(hover.s, hoveredSeries.color, hoveredSeries.tone), value: formatY(hoveredPoint.y) },
+          ...hoveredPoint.size != null ? [{ key: "size", label: strings.size, color: CHART_INK.muted, value: formatPlain(hoveredPoint.size, locale) }] : []
         ],
         footnote: hoveredPoint.label ? hoveredSeries.label : void 0
       }
@@ -11896,15 +12046,19 @@ function RangeChart({
   width,
   max,
   min,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
   color,
   tone,
-  label = "Range",
+  label: labelProp,
   className,
   emptyLabel,
   radius = 3
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const label = labelProp ?? strings.range;
   const values = rows.flatMap((r) => [r.low, r.high]).filter(Number.isFinite);
   const colour = resolveSeriesColor(0, color, tone);
   return /* @__PURE__ */ jsx(
@@ -11921,15 +12075,15 @@ function RangeChart({
       className,
       emptyLabel,
       bandPadding: variant === "bar" ? 0.34 : 0,
-      ariaLabel: `${label}: low and high across ${labels.length} categories`,
+      ariaLabel: strings.rangeLabel(label, labels.length),
       tooltip: (index) => /* @__PURE__ */ jsx(
         ChartTooltip,
         {
           title: labels[index],
           rows: [
             // undefined renders the em dash: "no row here" is not "zero".
-            { key: "high", label: "High", color: colour, value: rows[index] == null ? void 0 : formatValue(rows[index].high) },
-            { key: "low", label: "Low", color: colour, value: rows[index] == null ? void 0 : formatValue(rows[index].low) }
+            { key: "high", label: strings.high, color: colour, value: rows[index] == null ? void 0 : formatValue(rows[index].high) },
+            { key: "low", label: strings.low, color: colour, value: rows[index] == null ? void 0 : formatValue(rows[index].low) }
           ]
         }
       ),
@@ -11964,13 +12118,16 @@ function WaterfallChart({
   steps,
   height = 240,
   width,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
   className,
   emptyLabel,
   radius = 3,
   connectors = true
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
   let running = 0;
   const bars = steps.map((step) => {
     if (step.total) {
@@ -11994,7 +12151,7 @@ function WaterfallChart({
       className,
       emptyLabel,
       bandPadding: 0.36,
-      ariaLabel: `Waterfall of ${steps.length} steps from ${formatValue(bars[0]?.from ?? 0)} to ${formatValue(running)}`,
+      ariaLabel: strings.waterfall(steps.length, formatValue(bars[0]?.from ?? 0), formatValue(running)),
       tooltip: (index) => {
         const bar = bars[index];
         const tone = bar?.total ? STATUS_VARS.neutral : bar.value >= 0 ? STATUS_VARS.good : STATUS_VARS.critical;
@@ -12006,12 +12163,12 @@ function WaterfallChart({
               {
                 key: "step",
                 color: tone,
-                label: bar?.total ? "Balance" : bar.value >= 0 ? "Increase" : "Decrease",
+                label: bar?.total ? strings.balance : bar.value >= 0 ? strings.increase : strings.decrease,
                 // The sign is written out: colour alone does not survive
                 // greyscale, and polarity is the whole point of this chart.
                 value: bar?.total ? formatValue(bar.to) : `${bar.value >= 0 ? "+" : "\u2212"}${formatValue(Math.abs(bar.value))}`
               },
-              ...bar?.total ? [] : [{ key: "running", label: "Running total", color: STATUS_VARS.neutral, value: formatValue(bar.to) }]
+              ...bar?.total ? [] : [{ key: "running", label: strings.runningTotal, color: STATUS_VARS.neutral, value: formatValue(bar.to) }]
             ]
           }
         );
@@ -12065,13 +12222,19 @@ function HistogramChart({
   width,
   color,
   tone,
-  formatBound = (v) => Number.isInteger(v) ? String(v) : v.toFixed(1),
-  formatCount = (v) => String(v),
-  yAxisLabel = "count",
-  label = "Distribution",
+  formatBound: formatBoundProp,
+  formatCount: formatCountProp,
+  yAxisLabel: yAxisLabelProp,
+  label: labelProp,
   className,
   emptyLabel
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatBound = formatBoundProp ?? ((v) => Number.isInteger(v) ? formatPlain(v, locale) : formatFixed(v, 1, locale));
+  const formatCount = formatCountProp ?? ((v) => formatPlain(v, locale));
+  const yAxisLabel = yAxisLabelProp ?? strings.countAxis;
+  const label = labelProp ?? strings.distribution;
   const computed = precomputed ?? binValues(values ?? [], bins);
   const colour = resolveSeriesColor(0, color, tone);
   const labels = computed.map((b) => formatBound(b.from));
@@ -12089,12 +12252,12 @@ function HistogramChart({
       yAxisLabel,
       className,
       emptyLabel,
-      ariaLabel: `${label}: ${computed.length} bins over ${(values ?? []).length} observations`,
+      ariaLabel: strings.histogram(label, computed.length, (values ?? []).length),
       tooltip: (index) => /* @__PURE__ */ jsx(
         ChartTooltip,
         {
           title: `${formatBound(computed[index].from)} \u2013 ${formatBound(computed[index].to)}`,
-          rows: [{ key: "count", label: "Observations", color: colour, value: formatCount(computed[index].count) }]
+          rows: [{ key: "count", label: strings.observations, color: colour, value: formatCount(computed[index].count) }]
         }
       ),
       children: ({ x, y, bottom, active }) => /* @__PURE__ */ jsx("g", { children: computed.map((bin, i) => /* @__PURE__ */ jsx(
@@ -12118,12 +12281,16 @@ function BoxPlotChart({
   width,
   color,
   tone,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   yAxisLabel,
-  label = "Distribution",
+  label: labelProp,
   className,
   emptyLabel
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const label = labelProp ?? strings.distribution;
   const colour = resolveSeriesColor(0, color, tone);
   const values = boxes.flatMap((b) => [b.min, b.max, ...b.outliers ?? []]).filter(Number.isFinite);
   return /* @__PURE__ */ jsx(
@@ -12138,7 +12305,7 @@ function BoxPlotChart({
       yAxisLabel,
       className,
       emptyLabel,
-      ariaLabel: `${label}: five-number summary for ${boxes.length} categories`,
+      ariaLabel: strings.fiveNumber(label, boxes.length),
       tooltip: (index) => {
         const b = boxes[index];
         return /* @__PURE__ */ jsx(
@@ -12146,14 +12313,14 @@ function BoxPlotChart({
           {
             title: b.label,
             rows: [
-              { key: "max", label: "Maximum", color: colour, value: formatValue(b.max) },
-              { key: "q3", label: "Q3", color: colour, value: formatValue(b.q3) },
-              { key: "median", label: "Median", color: colour, value: formatValue(b.median) },
-              { key: "q1", label: "Q1", color: colour, value: formatValue(b.q1) },
-              { key: "min", label: "Minimum", color: colour, value: formatValue(b.min) }
+              { key: "max", label: strings.maximum, color: colour, value: formatValue(b.max) },
+              { key: "q3", label: strings.q3, color: colour, value: formatValue(b.q3) },
+              { key: "median", label: strings.median, color: colour, value: formatValue(b.median) },
+              { key: "q1", label: strings.q1, color: colour, value: formatValue(b.q1) },
+              { key: "min", label: strings.minimum, color: colour, value: formatValue(b.min) }
             ],
             emphasisKey: "median",
-            footnote: b.outliers?.length ? `${b.outliers.length} outlier${b.outliers.length > 1 ? "s" : ""} beyond the whiskers` : void 0
+            footnote: b.outliers?.length ? strings.outliers(b.outliers.length) : void 0
           }
         );
       },
@@ -12194,12 +12361,16 @@ function CandlestickChart({
   width,
   // Not `String(v)`: the axis domain is padded off the data, so its ticks are
   // almost never integers, and a raw float prints as 102.72999999999999.
-  formatValue = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2),
+  formatValue: formatValueProp,
   yAxisLabel,
-  label = "Price",
+  label: labelProp,
   className,
   emptyLabel
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => Number.isInteger(v) ? formatPlain(v, locale) : formatFixed(v, 2, locale));
+  const label = labelProp ?? strings.price;
   const values = candles.flatMap((c) => [c.low, c.high]).filter(Number.isFinite);
   const lo = Math.min(...values);
   const hi = Math.max(...values);
@@ -12218,7 +12389,7 @@ function CandlestickChart({
       yAxisLabel,
       className,
       emptyLabel,
-      ariaLabel: `${label}: open, high, low and close across ${candles.length} periods`,
+      ariaLabel: strings.ohlc(label, candles.length),
       tooltip: (index) => {
         const c = candles[index];
         const rose = c.close >= c.open;
@@ -12228,13 +12399,13 @@ function CandlestickChart({
           {
             title: c.label,
             rows: [
-              { key: "open", label: "Open", color: tone, value: formatValue(c.open) },
-              { key: "high", label: "High", color: tone, value: formatValue(c.high) },
-              { key: "low", label: "Low", color: tone, value: formatValue(c.low) },
-              { key: "close", label: "Close", color: tone, value: formatValue(c.close) }
+              { key: "open", label: strings.open, color: tone, value: formatValue(c.open) },
+              { key: "high", label: strings.high, color: tone, value: formatValue(c.high) },
+              { key: "low", label: strings.low, color: tone, value: formatValue(c.low) },
+              { key: "close", label: strings.close, color: tone, value: formatValue(c.close) }
             ],
             emphasisKey: "close",
-            footnote: rose ? "Closed above its open" : "Closed below its open"
+            footnote: rose ? strings.closedAbove : strings.closedBelow
           }
         );
       },
@@ -12278,13 +12449,18 @@ function HeatmapChart({
   width: widthProp,
   color,
   max,
-  formatValue = (v) => String(v),
-  label = "Intensity",
+  formatValue: formatValueProp,
+  label: labelProp,
   className,
-  emptyLabel = "No activity in this window.",
+  emptyLabel: emptyLabelProp,
   cellGap = 2,
   cellRadius = 2
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const label = labelProp ?? strings.intensity;
+  const emptyLabel = emptyLabelProp ?? strings.noActivity;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -12331,9 +12507,9 @@ function HeatmapChart({
         height: totalHeight,
         viewBox: `0 0 ${width} ${totalHeight}`,
         role: "img",
-        "aria-label": `${label} across ${rows.length} rows and ${columns.length} columns`,
+        "aria-label": strings.heatmap(label, rows.length, columns.length),
         tabIndex: 0,
-        className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        className: "rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-deep)]",
         onMouseLeave: () => setHover(null),
         onBlur: () => setHover(null),
         onKeyDown: onKey,
@@ -12398,11 +12574,15 @@ function RadarChart({
   mode = "area",
   grid = "polygon",
   rings = 4,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   animate = true,
   className,
-  emptyLabel = "Nothing to compare."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.nothingToCompare;
   const titleId = useId();
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
@@ -12437,7 +12617,7 @@ function RadarChart({
         "aria-labelledby": titleId,
         onMouseLeave: () => setHover(null),
         children: [
-          /* @__PURE__ */ jsx("title", { id: titleId, children: `${drawn.map((s) => s.label).join(", ")} across ${axes.length} measures` }),
+          /* @__PURE__ */ jsx("title", { id: titleId, children: strings.acrossMeasures(drawn.map((s) => s.label), axes.length) }),
           Array.from({ length: rings }, (_, r) => {
             const rr = radius * (r + 1) / rings;
             return grid === "circle" ? /* @__PURE__ */ jsx("circle", { cx, cy, r: rr, fill: "none", stroke: CHART_INK.grid, strokeWidth: 1 }, r) : /* @__PURE__ */ jsx("path", { d: ring(polygonPoints(cx, cy, rr, axes.length)), fill: "none", stroke: CHART_INK.grid, strokeWidth: 1 }, r);
@@ -12500,8 +12680,8 @@ function RadarChart({
     /* @__PURE__ */ jsx(
       AccessibleTable,
       {
-        caption: `${drawn.map((s) => s.label).join(", ")} across ${axes.length} measures`,
-        head: ["Series", ...axes.map((axis) => axis.label)],
+        caption: strings.acrossMeasures(drawn.map((s) => s.label), axes.length),
+        head: [strings.tableSeries, ...axes.map((axis) => axis.label)],
         rows: drawn.map((s) => [s.label, ...axes.map((_, i) => formatValue(s.values[i] ?? 0))])
       }
     )
@@ -12514,15 +12694,20 @@ function PieChart({
   innerRadius,
   padAngle = 0.012,
   maxSegments = 6,
-  otherLabel = "Other",
-  formatValue = (v) => String(v),
+  otherLabel: otherLabelProp,
+  formatValue: formatValueProp,
   centerLabel,
   animate = true,
   labels = "none",
   labelMinShare = 0.04,
   className,
-  emptyLabel = "Nothing to break down."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const otherLabel = otherLabelProp ?? strings.other;
+  const emptyLabel = emptyLabelProp ?? strings.nothingToBreakDown;
   const titleId = useId();
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
@@ -12586,7 +12771,7 @@ function PieChart({
         "aria-labelledby": titleId,
         onMouseLeave: () => setHover(null),
         children: [
-          /* @__PURE__ */ jsx("title", { id: titleId, children: `Breakdown of ${formatValue(total)} across ${shown.length} segments` }),
+          /* @__PURE__ */ jsx("title", { id: titleId, children: strings.breakdown(formatValue(total), shown.length) }),
           shown.map((segment, i) => {
             const colour = resolveSeriesColor(i, segment.color, segment.tone);
             const start = variant === "rose" ? angle(i) : cursor;
@@ -12643,7 +12828,7 @@ function PieChart({
                   fill: CHART_INK.label,
                   textAnchor: entry.right ? "end" : "start",
                   style: { fontVariantNumeric: "tabular-nums" },
-                  children: `${(entry.share * 100).toFixed(1)}%`
+                  children: formatPercent(entry.share * 100, 1, locale)
                 }
               )
             ] }, `lbl-${entry.key}`);
@@ -12657,18 +12842,15 @@ function PieChart({
       {
         title: hoveredSegment.label,
         rows: [
-          { key: "value", label: "Value", color: resolveSeriesColor(hover, hoveredSegment.color, hoveredSegment.tone), value: formatValue(hoveredSegment.value) },
-          { key: "share", label: "Share", color: CHART_INK.muted, value: `${(hoveredSegment.value / total * 100).toFixed(1)}%` }
+          { key: "value", label: strings.value, color: resolveSeriesColor(hover, hoveredSegment.color, hoveredSegment.tone), value: formatValue(hoveredSegment.value) },
+          { key: "share", label: strings.share, color: CHART_INK.muted, value: formatPercent(hoveredSegment.value / total * 100, 1, locale) }
         ]
       }
     ) }),
     /* @__PURE__ */ jsx("ul", { className: "m-0 mt-3 grid gap-1 p-0", style: { gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))" }, children: shown.map((segment, i) => /* @__PURE__ */ jsxs("li", { className: "flex list-none items-center gap-2 text-xs text-gray-600", children: [
       /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-sm", style: { backgroundColor: resolveSeriesColor(i, segment.color, segment.tone) } }),
       /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: segment.label }),
-      /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-gray-800", children: [
-        (segment.value / total * 100).toFixed(1),
-        "%"
-      ] })
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-gray-800", children: formatPercent(segment.value / total * 100, 1, locale) })
     ] }, segment.key)) })
   ] });
 }
@@ -12678,12 +12860,16 @@ function RadialBarChart({
   variant = "track",
   size = 300,
   max,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   animate = true,
   className,
-  emptyLabel = "Nothing to plot.",
+  emptyLabel: emptyLabelProp,
   trackGap = 6
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.nothingToPlot;
   const titleId = useId();
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
@@ -12714,7 +12900,7 @@ function RadialBarChart({
         "aria-labelledby": titleId,
         onMouseLeave: () => setHover(null),
         children: [
-          /* @__PURE__ */ jsx("title", { id: titleId, children: `${drawnRows.length} categories, ${variant === "track" ? "as concentric proportions" : "around a cycle"}` }),
+          /* @__PURE__ */ jsx("title", { id: titleId, children: variant === "track" ? strings.radialTrack(drawnRows.length) : strings.radialCycle(drawnRows.length) }),
           drawnRows.map((row, i) => {
             const colour = resolveSeriesColor(i, row.color, row.tone);
             const share = Math.max(0, Math.min(1, row.value / top));
@@ -12754,7 +12940,7 @@ function RadialBarChart({
       ChartTooltip,
       {
         title: hoveredRow.label,
-        rows: [{ key: "value", label: "Value", color: resolveSeriesColor(hover, hoveredRow.color, hoveredRow.tone), value: formatValue(hoveredRow.value) }]
+        rows: [{ key: "value", label: strings.value, color: resolveSeriesColor(hover, hoveredRow.color, hoveredRow.tone), value: formatValue(hoveredRow.value) }]
       }
     ) }),
     /* @__PURE__ */ jsx("ul", { className: "m-0 mt-3 grid gap-1 p-0", style: { gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))" }, children: rows.map((row, i) => /* @__PURE__ */ jsxs("li", { className: "flex list-none items-center gap-2 text-xs text-gray-600", children: [
@@ -12770,11 +12956,15 @@ function FunnelChart({
   height,
   width = 560,
   gap = 4,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   color,
   className,
-  emptyLabel = "No stages to chart."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noStages;
   const titleId = useId();
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
@@ -12807,7 +12997,7 @@ function FunnelChart({
         "aria-labelledby": titleId,
         onMouseLeave: () => setHover(null),
         children: [
-          /* @__PURE__ */ jsx("title", { id: titleId, children: `Funnel of ${stages.length} stages, ${formatValue(stages[0].value)} down to ${formatValue(stages[stages.length - 1].value)}` }),
+          /* @__PURE__ */ jsx("title", { id: titleId, children: strings.funnel(stages.length, formatValue(stages[0].value), formatValue(stages[stages.length - 1].value)) }),
           stages.map((stage, i) => {
             const y0 = i * total / stages.length + gap / 2;
             const y1 = (i + 1) * total / stages.length - gap / 2;
@@ -12826,12 +13016,9 @@ function FunnelChart({
               /* @__PURE__ */ jsx("text", { x: labelWidth - 14, y: (y0 + y1) / 2 - 2, textAnchor: "end", fontSize: 12, fill: CHART_INK.label, children: stage.label }),
               /* @__PURE__ */ jsxs("text", { x: labelWidth - 14, y: (y0 + y1) / 2 + 14, textAnchor: "end", fontSize: 11, fill: CHART_INK.muted, style: { fontVariantNumeric: "tabular-nums" }, children: [
                 formatValue(stage.value),
-                dropped != null ? ` \xB7 \u2212${dropped.toFixed(1)}%` : ""
+                dropped != null ? ` \xB7 \u2212${formatPercent(dropped, 1, locale)}` : ""
               ] }),
-              /* @__PURE__ */ jsxs("text", { x: cx, y: (y0 + y1) / 2 + 4, textAnchor: "middle", fontSize: 11.5, fontWeight: 600, fill: bandInk(i), style: { fontVariantNumeric: "tabular-nums" }, children: [
-                (stage.value / (stages[0].value || 1) * 100).toFixed(0),
-                "%"
-              ] })
+              /* @__PURE__ */ jsx("text", { x: cx, y: (y0 + y1) / 2 + 4, textAnchor: "middle", fontSize: 11.5, fontWeight: 600, fill: bandInk(i), style: { fontVariantNumeric: "tabular-nums" }, children: formatPercent(stage.value / (stages[0].value || 1) * 100, 0, locale) })
             ] }, stage.key);
           })
         ]
@@ -12842,9 +13029,9 @@ function FunnelChart({
       {
         title: hoveredStage.label,
         rows: [
-          { key: "value", label: "Count", color: shade(hover), value: formatValue(hoveredStage.value) },
-          { key: "share", label: "Of first stage", color: CHART_INK.muted, value: `${(hoveredStage.value / (stages[0].value || 1) * 100).toFixed(0)}%` },
-          ...hover > 0 && stages[hover - 1].value > 0 ? [{ key: "drop", label: "Dropped here", color: STATUS_VARS.critical, value: `\u2212${((1 - hoveredStage.value / stages[hover - 1].value) * 100).toFixed(1)}%` }] : []
+          { key: "value", label: strings.count, color: shade(hover), value: formatValue(hoveredStage.value) },
+          { key: "share", label: strings.ofFirstStage, color: CHART_INK.muted, value: formatPercent(hoveredStage.value / (stages[0].value || 1) * 100, 0, locale) },
+          ...hover > 0 && stages[hover - 1].value > 0 ? [{ key: "drop", label: strings.droppedHere, color: STATUS_VARS.critical, value: `\u2212${formatPercent((1 - hoveredStage.value / stages[hover - 1].value) * 100, 1, locale)}` }] : []
         ]
       }
     ) })
@@ -12857,11 +13044,15 @@ function TreemapChart({
   width: widthProp,
   gap = 2,
   radius = 3,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   color,
   className,
-  emptyLabel = "Nothing to break down."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.nothingToBreakDown;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -12886,7 +13077,7 @@ function TreemapChart({
         height,
         viewBox: `0 0 ${width} ${height}`,
         role: "img",
-        "aria-label": `Treemap of ${items.length} items`,
+        "aria-label": strings.treemap(items.length),
         onMouseLeave: () => setHover(null),
         children: tiles.map((tile) => {
           const w = Math.max(0, tile.width - gap);
@@ -12915,14 +13106,14 @@ function TreemapChart({
       ChartTooltip,
       {
         title: hoveredTile.label,
-        rows: [{ key: "value", label: "Value", color: shade(hoveredTile.value), value: formatValue(hoveredTile.value) }]
+        rows: [{ key: "value", label: strings.value, color: shade(hoveredTile.value), value: formatValue(hoveredTile.value) }]
       }
     ) }),
     /* @__PURE__ */ jsx(
       AccessibleTable,
       {
-        caption: `Treemap of ${items.length} items`,
-        head: ["Item", "Value"],
+        caption: strings.treemap(items.length),
+        head: [strings.tableItem, strings.value],
         rows: tiles.map((tile) => [tile.label, formatValue(tile.value)])
       }
     )
@@ -12963,11 +13154,15 @@ function SunburstChart({
   size = 320,
   innerRadius = 44,
   ringGap = 2,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   centerLabel,
   className,
-  emptyLabel = "Nothing to break down."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.nothingToBreakDown;
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
   const wedges = [];
@@ -12986,7 +13181,7 @@ function SunburstChart({
     return true;
   };
   const hovered = hover ? wedges.find((w) => w.id === hover) : void 0;
-  const share = (w) => `${(w.value / total * 100).toFixed(1)}%`;
+  const share = (w) => formatPercent(w.value / total * 100, 1, locale);
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
     /* @__PURE__ */ jsxs(
       "svg",
@@ -12995,7 +13190,7 @@ function SunburstChart({
         height: size,
         viewBox: `0 0 ${size} ${size}`,
         role: "img",
-        "aria-label": `Hierarchy of ${formatValue(total)} across ${depth} levels`,
+        "aria-label": strings.sunburst(formatValue(total), depth),
         onMouseLeave: () => setHover(null),
         children: [
           wedges.map((w) => /* @__PURE__ */ jsx(
@@ -13019,16 +13214,16 @@ function SunburstChart({
       {
         title: hovered.label,
         rows: [
-          { key: "value", label: "Value", color: shade(hovered), value: formatValue(hovered.value) },
-          { key: "share", label: "Share", color: CHART_INK.muted, value: share(hovered) }
+          { key: "value", label: strings.value, color: shade(hovered), value: formatValue(hovered.value) },
+          { key: "share", label: strings.share, color: CHART_INK.muted, value: share(hovered) }
         ]
       }
     ) }),
     /* @__PURE__ */ jsx(
       AccessibleTable,
       {
-        caption: `Hierarchy of ${formatValue(total)} across ${depth} levels`,
-        head: ["Level", "Item", "Value", "Share"],
+        caption: strings.sunburst(formatValue(total), depth),
+        head: [strings.tableLevel, strings.tableItem, strings.value, strings.share],
         rows: wedges.map((w) => [w.depth + 1, w.label, formatValue(w.value), share(w)])
       }
     )
@@ -13041,10 +13236,14 @@ function SankeyChart({
   width: widthProp,
   nodeWidth = 14,
   nodePadding = 12,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   className,
-  emptyLabel = "No flows to chart."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noFlows;
   const host = useRef(null);
   const measured = usePlotWidth(host);
   const width = widthProp ?? measured;
@@ -13102,7 +13301,7 @@ function SankeyChart({
         height,
         viewBox: `0 0 ${width} ${height}`,
         role: "img",
-        "aria-label": `Flow between ${nodes.length} nodes over ${links.length} links`,
+        "aria-label": strings.sankey(nodes.length, links.length),
         onMouseLeave: () => setHover(null),
         children: [
           links.map((link, i) => {
@@ -13161,21 +13360,21 @@ function SankeyChart({
       ChartTooltip,
       {
         title: `${hoveredLink.from} \u2192 ${hoveredLink.to}`,
-        rows: [{ key: "value", label: "Flow", color: resolveSeriesColor(placed.get(hoveredLink.from)?.index ?? 0, hoveredLink.color), value: formatValue(hoveredLink.value) }]
+        rows: [{ key: "value", label: strings.flow, color: resolveSeriesColor(placed.get(hoveredLink.from)?.index ?? 0, hoveredLink.color), value: formatValue(hoveredLink.value) }]
       }
     ) }),
     hoveredNode && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10", children: /* @__PURE__ */ jsx(
       ChartTooltip,
       {
         title: hoveredNode.label,
-        rows: [{ key: "value", label: "Throughput", color: resolveSeriesColor(placed.get(hoveredNode.key)?.index ?? 0, hoveredNode.color, hoveredNode.tone), value: formatValue(throughput.get(hoveredNode.key) ?? 0) }]
+        rows: [{ key: "value", label: strings.throughput, color: resolveSeriesColor(placed.get(hoveredNode.key)?.index ?? 0, hoveredNode.color, hoveredNode.tone), value: formatValue(throughput.get(hoveredNode.key) ?? 0) }]
       }
     ) }),
     /* @__PURE__ */ jsx(
       AccessibleTable,
       {
-        caption: `Flow between ${nodes.length} nodes over ${links.length} links`,
-        head: ["From", "To", "Value"],
+        caption: strings.sankey(nodes.length, links.length),
+        head: [strings.tableFrom, strings.tableTo, strings.value],
         rows: links.map((link) => [link.from, link.to, formatValue(link.value)])
       }
     )
@@ -13188,10 +13387,14 @@ function ChordChart({
   maxNodes = 8,
   padAngle = 0.04,
   arcWidth = 12,
-  formatValue = (v) => String(v),
+  formatValue: formatValueProp,
   className,
-  emptyLabel = "No flows to chart."
+  emptyLabel: emptyLabelProp
 }) {
+  const strings = useShellStrings().charts;
+  const locale = useShellLocale();
+  const formatValue = formatValueProp ?? ((v) => formatPlain(v, locale));
+  const emptyLabel = emptyLabelProp ?? strings.noFlows;
   const [hover, setHover] = useState(null);
   const { highlighted } = useHighlight();
   const cell = (row, col) => {
@@ -13252,7 +13455,7 @@ function ChordChart({
         height: size,
         viewBox: `0 0 ${size} ${size}`,
         role: "img",
-        "aria-label": `Flows between ${order.length} participants`,
+        "aria-label": strings.chord(order.length),
         onMouseLeave: () => setHover(null),
         children: [
           ribbons.map((ribbon, i) => {
@@ -13308,21 +13511,21 @@ function ChordChart({
       ChartTooltip,
       {
         title: labels[hoveredArc],
-        rows: [{ key: "total", label: "Total flow", color: resolveSeriesColor(spans.get(hoveredArc).slot), value: formatValue(totals[hoveredArc]) }]
+        rows: [{ key: "total", label: strings.totalFlow, color: resolveSeriesColor(spans.get(hoveredArc).slot), value: formatValue(totals[hoveredArc]) }]
       }
     ) }),
     hoveredRibbon && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10", children: /* @__PURE__ */ jsx(
       ChartTooltip,
       {
         title: `${labels[hoveredRibbon.from]} \u2192 ${labels[hoveredRibbon.to]}`,
-        rows: [{ key: "value", label: "Flow", color: resolveSeriesColor(spans.get(hoveredRibbon.from).slot), value: formatValue(hoveredRibbon.value) }]
+        rows: [{ key: "value", label: strings.flow, color: resolveSeriesColor(spans.get(hoveredRibbon.from).slot), value: formatValue(hoveredRibbon.value) }]
       }
     ) }),
     /* @__PURE__ */ jsx(
       AccessibleTable,
       {
-        caption: `Flows between ${order.length} participants`,
-        head: ["From", "To", "Value"],
+        caption: strings.chord(order.length),
+        head: [strings.tableFrom, strings.tableTo, strings.value],
         rows: ribbons.map((ribbon) => [labels[ribbon.from], labels[ribbon.to], formatValue(ribbon.value)])
       }
     )
@@ -13330,5 +13533,5 @@ function ChordChart({
 }
 
 export { APP_UPDATE_POLL_MS, Accordion, AppUpdateBanner, AttachButton, AttachmentDropZone, AttachmentList, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BoxPlotChart, BrandAssetEditor, BudgetBar, CHART_INK, Calendar, CandlestickChart, Card, CartesianPlot, ChartBrush, ChartDefs, ChartDot, ChartFrame, ChartHighlightProvider, ChartSkeleton, ChartTooltip, ChatTemplate, Checkbox_default, CheckoutTemplate, ChordChart, ColoredBadge, ColumnChart, ComposerAttachments, ContainerFillChart, CountBadge, DAY_MS, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker_default, FormErrorSummary, FormField, FormLayoutPage, FunnelChart, GROUP_COLORS, GROUP_COLORS_SOLID, GalleryTemplate, GlobalSearch, Grid, HeatmapChart, HelpCenter, HistogramChart, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, MAX_FRACTION_DIGITS, MENU_MAX_HEIGHT, MOTION, Markdown, MediaUploadField, MediaUploadGrid, Meter, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, POPUP_MAX_WIDTH, POST_PRODUCTION_STATUSES, PageHeader, Pagination, PaperclipGlyph, Paragraph, PieChart, PortalBrandingProvider, ProductionTimeline, RADAR_SERIES_CAP, RadarChart, RadialBarChart, RadioGroup, Radio_default, RangeChart, RankedBars, SCATTER_SERIES_CAP, SERIES_SLOT_COUNT, SERIES_VARS, STAGES, STATUS_VARS, SankeyChart, ScatterChart, SearchableSelect, Segmented, Select_default, SettingRow, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Snippet, Sparkline, Stack, StatCard, StatTile, Statistic, StatusBadge, StatusBadgeProvider, Stepper, SunburstChart, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, TimeSeriesChart, TimelineTrack, Title, Tooltip, TopNav, TreemapChart, WaterfallChart, angleScale, appendKey, applyThemePrefs, arcPath, areaBetween, areaFrom, autoHighlightIndex, backspace, bandScale, binValues, budgetState, bumpPath, calcOverall, calcReportOverall, copyToClipboard, curvePath, dashFor, fillFor, fillId, firstEnabledIndex, fmtSliderDate, formatDate, fromKey, glowId, groundId, groupColors, highlightOpacity, inputClasses, isSeverityTone, ladderScale, lastEnabledIndex, linearPath, linearScale, logScale, maskId, matchTypeahead, mediaFileName, monotonePath, nextEnabledIndex, niceMax, polygonPoints, popupBounds, radiusScale, resolvePortalBrandAsset, resolveSeriesColor, resolveTheme, selectionAt, seriesColor, severityOf, splinePath, squarify, stagger, stepPath, tabButtonId, tabPanelId, toDayMs, toISODate, toKey, useAppUpdate, useClickOutside, useDropdownPosition, useHighlight, usePlotWidth, usePortalBranding, useProductionTimeline, useTheme };
-//# sourceMappingURL=chunk-4TVV2BIU.js.map
-//# sourceMappingURL=chunk-4TVV2BIU.js.map
+//# sourceMappingURL=chunk-BJ34QOR3.js.map
+//# sourceMappingURL=chunk-BJ34QOR3.js.map