@pstrikez/fluent-winui-theme 0.1.1 → 0.2.0

package/dist/index.js

@@ -1485,7 +1485,7 @@ var require_prism = __commonJS({
 import * as fluentNamespace from "@fluentui/react-components";
 
 // src/winui/appearance.ts
-import { CheckmarkCircleFilled, ChevronDown12Regular, DismissCircleFilled, ErrorCircleFilled, InfoFilled } from "@fluentui/react-icons";
+import { CheckmarkCircleFilled, ChevronDown12Regular, ChevronUp12Regular, DismissCircleFilled, ErrorCircleFilled, InfoFilled } from "@fluentui/react-icons";
 import * as React2 from "react";
 
 // src/winui/wrap.ts
@@ -1562,6 +1562,16 @@ var withWinuiAppearance = (components) => {
     ...props,
     expandIcon: props.expandIcon === void 0 ? { children: React2.createElement(ChevronDown12Regular) } : props.expandIcon
   }));
+  const withSpinGlyph = (slot, Glyph) => {
+    if (slot === null) return slot;
+    const slotProps2 = resolveSlotProps(slot);
+    return slotProps2?.children === void 0 ? { ...slotProps2, children: React2.createElement(Glyph) } : slotProps2;
+  };
+  const winuiSpinGlyphs = (component) => wrapFluent(component, (props) => ({
+    ...props,
+    incrementButton: withSpinGlyph(props.incrementButton, ChevronUp12Regular),
+    decrementButton: withSpinGlyph(props.decrementButton, ChevronDown12Regular)
+  }));
   return {
     ...components,
     AccordionHeader: winuiChevron(components.AccordionHeader),
@@ -1578,6 +1588,7 @@ var withWinuiAppearance = (components) => {
     Input: stamp(components.Input, appearance("outline", rootAndPrimary)),
     Textarea: stamp(components.Textarea, appearance("outline", rootAndPrimary)),
     Select: stamp(components.Select, appearance("outline", rootAndPrimary)),
+    SpinButton: winuiSpinGlyphs(stamp(components.SpinButton, appearance("outline", rootAndPrimary))),
     Combobox: stamp(components.Combobox, appearance("outline", rootAndPrimary)),
     Dropdown: stamp(components.Dropdown, appearance("outline", rootAndPrimary)),
     Card: stamp(components.Card, appearance("filled", rootIsPrimary)),
@@ -1743,11 +1754,11 @@ var withWinuiDrag = (components) => {
     const suppressClickRef = React4.useRef(false);
     const settleTimerRef = React4.useRef(void 0);
     React4.useEffect(() => () => clearTimeout(settleTimerRef.current), []);
-    const end = (gesture, toggle, fromDrag) => {
+    const end = (gesture, toggle2, fromDrag) => {
       gestureRef.current = null;
       gesture.root.removeAttribute(DRAGGING);
       gesture.root.style.removeProperty(DRAG_X);
-      if (toggle) {
+      if (toggle2) {
         if (fromDrag) {
           gesture.root.setAttribute(SETTLING, "");
           clearTimeout(settleTimerRef.current);
@@ -2704,29 +2715,15 @@ var readableTone = (hex, surface) => {
 };
 
 // src/components/ui/badge-hue.ts
-var { makeStyles: makeStyles2 } = fluentComponents;
 var HARDEST_BADGE_SURFACE = { light: "#EBF3FC", dark: "#434343" };
 var BADGE_FILL_ALPHA = 0.1;
 var BADGE_STROKE_ALPHA = 0.35;
-var useStyles2 = makeStyles2({
-  scheme: {
-    "--fwt-badge-fill": "var(--fwt-badge-fill-light)",
-    "--fwt-chip-stroke": "var(--fwt-badge-stroke-light)",
-    "--fwt-badge-label": "var(--fwt-badge-label-light)",
-    "@media (prefers-color-scheme: dark)": {
-      "--fwt-badge-fill": "var(--fwt-badge-fill-dark)",
-      "--fwt-chip-stroke": "var(--fwt-badge-stroke-dark)",
-      "--fwt-badge-label": "var(--fwt-badge-label-dark)"
-    }
-  }
-});
 var useBadgeHue = (hue) => {
-  const styles = useStyles2();
   const pair = typeof hue === "string" ? { light: hue, dark: hue } : hue;
   const fill = { light: alphaColor(pair.light, BADGE_FILL_ALPHA), dark: alphaColor(pair.dark, BADGE_FILL_ALPHA) };
   const label = (own, surface) => readableTone(own, blendHex(own, BADGE_FILL_ALPHA, surface));
   return {
-    className: styles.scheme,
+    className: "fwt-badge-hue",
     style: {
       "--fwt-badge-fill-light": fill.light,
       "--fwt-badge-fill-dark": fill.dark,
@@ -2743,8 +2740,8 @@ var useBadgeHue = (hue) => {
 
 // src/components/ui/chip.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { Tag, makeStyles: makeStyles3, mergeClasses } = fluentComponents;
-var useStyles3 = makeStyles3({
+var { Tag, makeStyles: makeStyles2, mergeClasses } = fluentComponents;
+var useStyles2 = makeStyles2({
   // Fluent sizes the chip to its content, so a long label carries the chip
   // past the column that holds it.
   root: { maxWidth: "100%" },
@@ -2762,7 +2759,7 @@ var useStyles3 = makeStyles3({
   }
 });
 function Chip({ children, className, icon, style, textRef, ...trigger }) {
-  const styles = useStyles3();
+  const styles = useStyles2();
   return /* @__PURE__ */ jsx6(
     Tag,
     {
@@ -5567,7 +5564,30 @@ var en = {
   "common.discard.discard": "Discard",
   "common.copy.action": "Copy",
   "common.copy.copied": "Copied",
-  "common.copy.failed": "Copy failed"
+  "common.copy.failed": "Copy failed",
+  "numberBox.increment": "Increase value",
+  "numberBox.decrement": "Decrease value",
+  "fileDropZone.browse": "Browse files",
+  "fileDropZone.dropHint": "Drop files here",
+  "fileDropZone.remove": "Remove file",
+  "pager.label": "Pagination",
+  "pager.first": "First page",
+  "pager.previous": "Previous page",
+  "pager.next": "Next page",
+  "pager.last": "Last page",
+  "pager.page": "Page {n}",
+  "pager.pageSize": "Items per page",
+  "pager.perPage": "{n} / page",
+  "pager.total": "Total {n} items",
+  "dataTable.empty": "No data",
+  "dataTable.loading": "Loading",
+  "dataTable.selectAll": "Select all rows",
+  "dataTable.selectRow": "Select row",
+  "dataTable.expandRow": "Expand row",
+  "dataTable.collapseRow": "Collapse row",
+  "tabView.close": "Close tab",
+  "tabView.scrollBackward": "Scroll tabs left",
+  "tabView.scrollForward": "Scroll tabs right"
 };
 var zhHans = {
   "common.on": "\u5F00",
@@ -5582,7 +5602,30 @@ var zhHans = {
   "common.discard.discard": "\u653E\u5F03",
   "common.copy.action": "\u590D\u5236",
   "common.copy.copied": "\u5DF2\u590D\u5236",
-  "common.copy.failed": "\u590D\u5236\u5931\u8D25"
+  "common.copy.failed": "\u590D\u5236\u5931\u8D25",
+  "numberBox.increment": "\u589E\u5927",
+  "numberBox.decrement": "\u51CF\u5C0F",
+  "fileDropZone.browse": "\u6D4F\u89C8\u6587\u4EF6",
+  "fileDropZone.dropHint": "\u5C06\u6587\u4EF6\u62D6\u653E\u5230\u6B64\u5904",
+  "fileDropZone.remove": "\u79FB\u9664\u6587\u4EF6",
+  "pager.label": "\u5206\u9875",
+  "pager.first": "\u7B2C\u4E00\u9875",
+  "pager.previous": "\u4E0A\u4E00\u9875",
+  "pager.next": "\u4E0B\u4E00\u9875",
+  "pager.last": "\u6700\u540E\u4E00\u9875",
+  "pager.page": "\u7B2C {n} \u9875",
+  "pager.pageSize": "\u6BCF\u9875\u6761\u6570",
+  "pager.perPage": "{n} \u6761/\u9875",
+  "pager.total": "\u5171 {n} \u6761",
+  "dataTable.empty": "\u6682\u65E0\u6570\u636E",
+  "dataTable.loading": "\u52A0\u8F7D\u4E2D",
+  "dataTable.selectAll": "\u9009\u62E9\u5168\u90E8\u884C",
+  "dataTable.selectRow": "\u9009\u62E9\u6B64\u884C",
+  "dataTable.expandRow": "\u5C55\u5F00\u6B64\u884C",
+  "dataTable.collapseRow": "\u6536\u8D77\u6B64\u884C",
+  "tabView.close": "\u5173\u95ED\u6807\u7B7E\u9875",
+  "tabView.scrollBackward": "\u5411\u5DE6\u6EDA\u52A8\u6807\u7B7E\u9875",
+  "tabView.scrollForward": "\u5411\u53F3\u6EDA\u52A8\u6807\u7B7E\u9875"
 };
 var winuiStringsByLocale = { en, "zh-Hans": zhHans };
 var StringsContext = createContext2(en);
@@ -5719,8 +5762,8 @@ var Textarea = forwardRef3(
 
 // src/components/ui/choice-group.tsx
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var { makeStyles: makeStyles4, tokens } = fluentComponents;
-var useStyles4 = makeStyles4({
+var { makeStyles: makeStyles3, tokens } = fluentComponents;
+var useStyles3 = makeStyles3({
   // The items sit flush: SelectorBar's horizontal StackLayout states no spacing,
   // so each item's 12px of side padding is the whole distance between one label
   // and the next. SelectorBarItemSpacing, 8, is the icon-to-text gap and these
@@ -5870,7 +5913,7 @@ function ChoiceGroup({
   readOnly,
   value
 }) {
-  const styles = useStyles4();
+  const styles = useStyles3();
   const name = useId();
   const selectedIndex = items.findIndex((item) => item.value === value);
   const handleKeyDown = (event) => {
@@ -6829,8 +6872,8 @@ var useCopyToClipboard = () => {
 
 // src/components/ui/code-block.tsx
 import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var { Button: Button2, makeStyles: makeStyles5, mergeClasses: mergeClasses4 } = fluentComponents;
-var useStyles5 = makeStyles5({
+var { Button: Button2, makeStyles: makeStyles4, mergeClasses: mergeClasses4 } = fluentComponents;
+var useStyles4 = makeStyles4({
   // ControlCornerRadius. The clip is why the region's focus visual below is
   // drawn inside the viewport rather than around it.
   // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander.xaml#L26
@@ -6895,7 +6938,7 @@ var useStyles5 = makeStyles5({
 });
 function CodeBlock({ code, collapsed = false, copyOutcome, disabled = false, header, language, onCopy, wrap = false }) {
   const { t: t2 } = useTranslation();
-  const styles = useStyles5();
+  const styles = useStyles4();
   const copyLabel = useCopyLabel();
   const highlighted = useMemo2(
     () => highlight(code, language),
@@ -6931,7 +6974,8 @@ import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var { Dialog, DialogBody, DialogContent, DialogSurface, mergeClasses: mergeClasses5 } = fluentComponents;
 var surfaceWidthClasses = {
   standard: "",
-  editor: "fwt-dialog-shell--editor"
+  editor: "fwt-dialog-shell--editor",
+  wide: "fwt-dialog-shell--wide"
 };
 function DialogShell({ actions, children, onExited, onOpenChange, onSubmit, open, surfaceClassName, title, width = "standard" }) {
   return /* @__PURE__ */ jsx12(
@@ -7011,8 +7055,8 @@ function OutcomeMessageBar({
 
 // src/components/ui/confirm-dialog.tsx
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var { Button: Button4, DialogActions, DialogTitle, makeStyles: makeStyles6, mergeClasses: mergeClasses6 } = fluentComponents;
-var useStyles6 = makeStyles6({
+var { Button: Button4, DialogActions, DialogTitle, makeStyles: makeStyles5, mergeClasses: mergeClasses6 } = fluentComponents;
+var useStyles5 = makeStyles5({
   // The label is StaticInverted because the fill does not follow the theme.
   // Not OnBrand: ../../winui/theme.ts re-points it at WinUI's
   // TextOnAccentFillColorPrimary, which goes black in dark, reading 3.46:1 at
@@ -7042,6 +7086,7 @@ var useStyles6 = makeStyles6({
     }
   }
 });
+var useDangerFillClass = () => useStyles5().danger;
 function ConfirmDialog({
   actionIntent = "danger",
   actionLabel,
@@ -7058,7 +7103,7 @@ function ConfirmDialog({
   title
 }) {
   const { t: t2 } = useTranslation();
-  const styles = useStyles6();
+  const styles = useStyles5();
   return /* @__PURE__ */ jsx14(
     DialogShell,
     {
@@ -7092,15 +7137,88 @@ function ConfirmDialog({
       surfaceClassName: "!w-[min(430px,calc(100vw-48px))]",
       title: /* @__PURE__ */ jsx14(DialogTitle, { children: title }),
       children: /* @__PURE__ */ jsxs6("div", { className: "grid gap-3 min-w-0", children: [
-        /* @__PURE__ */ jsx14("span", { children: message }),
+        message && /* @__PURE__ */ jsx14("span", { children: message }),
         error && /* @__PURE__ */ jsx14(OutcomeMessageBar, { onDismiss: onDismissError, children: error })
       ] })
     }
   );
 }
 
+// src/components/ui/confirm-flyout.tsx
+import { useCallback as useCallback4, useState as useState5 } from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var { Button: Button5, Popover, PopoverSurface, PopoverTrigger, Spinner, Text, mergeClasses: mergeClasses7 } = fluentComponents;
+var errorText = (error) => error instanceof Error ? error.message : String(error);
+function ConfirmFlyout({
+  cancelLabel,
+  children,
+  confirmLabel,
+  disabled = false,
+  intent = "danger",
+  message,
+  onConfirm,
+  positioning,
+  title
+}) {
+  const { t: t2 } = useTranslation();
+  const dangerFill = useDangerFillClass();
+  const [open, setOpen] = useState5(false);
+  const [busy, setBusy] = useState5(false);
+  const [error, setError] = useState5(null);
+  const changeOpen = useCallback4((next) => {
+    if (busy || next && disabled) return;
+    setError(null);
+    setOpen(next);
+  }, [busy, disabled]);
+  const confirm = async () => {
+    setError(null);
+    setBusy(true);
+    try {
+      await onConfirm();
+      setOpen(false);
+    } catch (caught) {
+      setError(errorText(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs7(
+    Popover,
+    {
+      onOpenChange: (_2, data) => changeOpen(data.open),
+      open: open && !disabled,
+      positioning,
+      trapFocus: true,
+      children: [
+        /* @__PURE__ */ jsx15(PopoverTrigger, { disableButtonEnhancement: true, children }),
+        /* @__PURE__ */ jsx15(PopoverSurface, { "aria-label": title, children: /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 min-w-0 max-w-[min(320px,calc(100vw-48px))]", children: [
+          title && /* @__PURE__ */ jsx15(Text, { weight: "semibold", children: title }),
+          /* @__PURE__ */ jsx15(Text, { children: message }),
+          error && /* @__PURE__ */ jsx15(OutcomeMessageBar, { onDismiss: () => setError(null), children: error }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx15(
+              Button5,
+              {
+                appearance: "primary",
+                className: mergeClasses7("!whitespace-nowrap", intent === "danger" && dangerFill),
+                disabledFocusable: busy,
+                icon: busy ? /* @__PURE__ */ jsx15(Spinner, { size: "tiny" }) : void 0,
+                onClick: () => {
+                  void confirm();
+                },
+                children: confirmLabel
+              }
+            ),
+            cancelLabel !== void 0 && /* @__PURE__ */ jsx15(Button5, { className: "!whitespace-nowrap", disabled: busy, onClick: () => changeOpen(false), children: cancelLabel || t2("common.cancel") })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
 // src/components/ui/danger.ts
-var { buttonClassNames, makeStyles: makeStyles7 } = fluentComponents;
+var { buttonClassNames, makeStyles: makeStyles6 } = fluentComponents;
 var RED = "var(--winui-system-fill-critical) !important";
 var FORCED = "Highlight !important";
 var ICON = `& .${buttonClassNames.icon}`;
@@ -7110,7 +7228,7 @@ var PRESSED = `${ENABLED}:active`;
 var KEYBOARD = `${ENABLED}[data-fui-focus-visible]`;
 var buttonPaint = { color: RED, [ICON]: { color: RED } };
 var buttonForcedPaint = { color: FORCED, [ICON]: { color: FORCED } };
-var useStyles7 = makeStyles7({
+var useStyles6 = makeStyles6({
   button: {
     [HOVER]: buttonPaint,
     [PRESSED]: buttonPaint,
@@ -7132,12 +7250,16 @@ var useStyles7 = makeStyles7({
     }
   }
 });
-var useDangerActionClasses = () => useStyles7();
-var useTextStyles = makeStyles7({
+var useDangerActionClasses = () => useStyles6();
+var useTextStyles = makeStyles6({
   danger: { color: "var(--winui-system-fill-critical)" }
 });
 var useDangerTextClass = () => useTextStyles().danger;
 
+// src/components/ui/data-table.tsx
+import { ChevronDown16Regular, ChevronRight16Regular } from "@fluentui/react-icons";
+import { useMemo as useMemo3, useState as useState6 } from "react";
+
 // src/components/ui/layout.ts
 var TIGHT_STACK_CLASS = "grid gap-1";
 var HEADER_ROW_CLASS = "flex items-center justify-between min-w-0 max-[900px]:flex-col max-[900px]:items-stretch";
@@ -7149,19 +7271,6 @@ var SCROLLPORT_FILL_CLASS = "h-full min-h-max";
 var CONTROL_ROW_CLASS = "!min-h-[34px]";
 var CHECKBOX_LIST_CLASS = "gap-x-2 gap-y-1";
 
-// src/components/ui/dashboard-page-header.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-var { Text, mergeClasses: mergeClasses7 } = fluentComponents;
-function DashboardPageHeader({ actions, className, description, title }) {
-  return /* @__PURE__ */ jsxs7("header", { className: mergeClasses7(HEADER_ROW_CLASS, "gap-[18px]", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "grid gap-1.5 min-w-0", children: [
-      /* @__PURE__ */ jsx15(Text, { as: "h1", size: 700, weight: "semibold", className: "m-0", children: title }),
-      description !== void 0 && /* @__PURE__ */ jsx15(Text, { size: 200, className: "text-fui-fg2 max-w-[760px]", children: description })
-    ] }),
-    actions !== void 0 && /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2 flex-none max-[900px]:justify-start", children: actions })
-  ] });
-}
-
 // src/components/ui/empty-state.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var { Text: Text2, mergeClasses: mergeClasses8 } = fluentComponents;
@@ -7182,201 +7291,994 @@ function EmptyStateLine({ children, className }) {
   return /* @__PURE__ */ jsx16(Text2, { block: true, size: 300, className: mergeClasses8("text-fui-fg2", className), children });
 }
 
-// src/components/ui/error-shell.tsx
+// src/components/ui/pager.tsx
+import {
+  ChevronLeft12Regular,
+  ChevronRight12Regular,
+  MoreHorizontal16Regular,
+  Next16Regular,
+  Previous16Regular
+} from "@fluentui/react-icons";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var { Text: Text3 } = fluentComponents;
-function ErrorShell({ action, children, message, title }) {
-  return /* @__PURE__ */ jsx17(ScrollArea, { axes: "vertical", className: "fwt-error-shell-viewport", contentClassName: "h-full", children: /* @__PURE__ */ jsxs9("main", { className: "fwt-error-shell", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "fwt-error-shell-stack", children: [
-      /* @__PURE__ */ jsx17(Text3, { align: "center", as: "h1", size: 700, weight: "semibold", children: title }),
-      message !== void 0 && /* @__PURE__ */ jsx17(Text3, { align: "center", as: "p", className: "text-fui-fg2", size: 300, children: message })
-    ] }),
-    children,
-    action !== void 0 && /* @__PURE__ */ jsx17("div", { className: "fwt-error-shell-actions", children: action })
-  ] }) });
+var { Button: Button6, Option: Option2, Text: Text3, Tooltip: Tooltip2, makeStyles: makeStyles7, mergeClasses: mergeClasses9 } = fluentComponents;
+function pagerPageCount(total, pageSize) {
+  if (!(pageSize > 0) || !(total > 0)) return 1;
+  return Math.ceil(total / pageSize);
 }
-function ErrorStack({ children }) {
-  return /* @__PURE__ */ jsx17(
-    ScrollArea,
-    {
-      axes: "horizontal",
-      className: "winui-focus-rect-within w-full min-w-0 rounded-[var(--winui-overlay-corner-radius,8px)] border border-solid border-fui-stroke1 bg-fui-bg2 text-left",
-      children: /* @__PURE__ */ jsx17("pre", { className: "m-0 w-max min-w-full p-4 font-mono", children: /* @__PURE__ */ jsx17("code", { children }) })
+function pagerPageWindow(page, pageCount) {
+  if (pageCount < 8) return Array.from({ length: Math.max(pageCount, 0) }, (_2, index) => index + 1);
+  const selectedIndex = page - 1;
+  if (selectedIndex < 4) return [1, 2, 3, 4, 5, "end-ellipsis", pageCount];
+  if (selectedIndex >= pageCount - 4) return [1, "start-ellipsis", pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1, pageCount];
+  return [1, "start-ellipsis", page - 1, page, page + 1, "end-ellipsis", pageCount];
+}
+var clampPage = (page, pageCount) => Math.min(Math.max(Math.trunc(page) || 1, 1), pageCount);
+var useStyles7 = makeStyles7({
+  navButton: {
+    height: "40px !important",
+    minWidth: "40px !important",
+    padding: "0 !important",
+    width: "40px !important"
+  },
+  numberButton: {
+    height: "20px !important",
+    minHeight: "20px !important",
+    minWidth: "32px !important",
+    paddingBlock: "0 !important",
+    paddingInline: "0 !important"
+  },
+  selected: {
+    position: "relative",
+    "::after": {
+      backgroundColor: "var(--winui-accent-fill-default)",
+      borderRadius: "1px",
+      bottom: "-10px",
+      content: '""',
+      height: "2px",
+      insetInline: 0,
+      position: "absolute",
+      "@media (forced-colors: active)": { backgroundColor: "Highlight" }
     }
-  );
+  },
+  // The glyphs are mirrored for a right-to-left reading order.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/PagerControl/PagerControl_themeresources.xaml#L80
+  mirrored: {
+    ':where([dir="rtl"]) &': { transform: "scaleX(-1)" }
+  }
+});
+function NavigationButton({ className, disabled, icon, label, onClick }) {
+  return /* @__PURE__ */ jsx17(Tooltip2, { content: label, relationship: "label", children: /* @__PURE__ */ jsx17(Button6, { appearance: "subtle", className, disabled, icon, onClick }) });
+}
+function Pager({
+  ariaLabel,
+  className,
+  disabled = false,
+  onPageChange,
+  onPageSizeChange,
+  page,
+  pageCount: pageCountProp,
+  pageSize,
+  pageSizeOptions,
+  showTotal = false,
+  total
+}) {
+  const { t: t2 } = useTranslation();
+  const styles = useStyles7();
+  const pageCount = Math.max(1, Math.trunc(pageCountProp ?? pagerPageCount(total ?? 0, pageSize ?? 1)));
+  const current = clampPage(page, pageCount);
+  const go = (next) => {
+    const target = clampPage(next, pageCount);
+    if (target !== current) onPageChange(target);
+  };
+  const atStart = current <= 1;
+  const atEnd = current >= pageCount;
+  const mirrored = styles.mirrored;
+  const sizes = pageSize !== void 0 && pageSizeOptions && onPageSizeChange ? [.../* @__PURE__ */ new Set([...pageSizeOptions, pageSize])].sort((a2, b2) => a2 - b2) : null;
+  const sizeLabel = (size) => t2("pager.perPage").replace("{n}", String(size));
+  return /* @__PURE__ */ jsxs9("nav", { "aria-label": ariaLabel ?? t2("pager.label"), className: mergeClasses9("flex flex-wrap items-center justify-end gap-x-4 gap-y-1", className), children: [
+    showTotal && total !== void 0 && (typeof showTotal === "function" ? showTotal(total) : /* @__PURE__ */ jsx17(Text3, { className: "text-fui-fg2", size: 300, children: t2("pager.total").replace("{n}", String(total)) })),
+    sizes && pageSize !== void 0 && /* @__PURE__ */ jsx17(
+      Dropdown,
+      {
+        "aria-label": t2("pager.pageSize"),
+        disabled,
+        onOptionSelect: (_2, data) => {
+          const next = Number(data.optionValue);
+          if (next > 0 && next !== pageSize) onPageSizeChange?.(next);
+        },
+        selectedOptions: [String(pageSize)],
+        style: { "--fwt-select-min-width": "112px" },
+        value: sizeLabel(pageSize),
+        children: sizes.map((size) => /* @__PURE__ */ jsx17(Option2, { text: sizeLabel(size), value: String(size), children: sizeLabel(size) }, size))
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx17(NavigationButton, { className: styles.navButton, disabled: disabled || atStart, icon: /* @__PURE__ */ jsx17(Previous16Regular, { className: mirrored }), label: t2("pager.first"), onClick: () => go(1) }),
+      /* @__PURE__ */ jsx17(NavigationButton, { className: styles.navButton, disabled: disabled || atStart, icon: /* @__PURE__ */ jsx17(ChevronLeft12Regular, { className: mirrored }), label: t2("pager.previous"), onClick: () => go(current - 1) }),
+      /* @__PURE__ */ jsx17("div", { className: "flex items-center h-10", style: { gap: 5 }, children: pagerPageWindow(current, pageCount).map((item) => typeof item === "number" ? /* @__PURE__ */ jsx17("span", { className: mergeClasses9("inline-flex", item === current && styles.selected), children: /* @__PURE__ */ jsx17(
+        Button6,
+        {
+          appearance: "subtle",
+          "aria-current": item === current ? "page" : void 0,
+          "aria-label": t2("pager.page").replace("{n}", String(item)),
+          className: styles.numberButton,
+          disabled,
+          onClick: () => go(item),
+          children: item
+        }
+      ) }, item) : /* @__PURE__ */ jsx17("span", { "aria-hidden": true, className: "grid place-items-center w-5 text-fui-fg2", children: /* @__PURE__ */ jsx17(MoreHorizontal16Regular, {}) }, item)) }),
+      /* @__PURE__ */ jsx17(NavigationButton, { className: styles.navButton, disabled: disabled || atEnd, icon: /* @__PURE__ */ jsx17(ChevronRight12Regular, { className: mirrored }), label: t2("pager.next"), onClick: () => go(current + 1) }),
+      /* @__PURE__ */ jsx17(NavigationButton, { className: styles.navButton, disabled: disabled || atEnd, icon: /* @__PURE__ */ jsx17(Next16Regular, { className: mirrored }), label: t2("pager.last"), onClick: () => go(pageCount) })
+    ] })
+  ] });
 }
 
-// src/components/ui/status-badge.tsx
+// src/components/ui/table-actions.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var { Badge, makeStyles: makeStyles8, mergeClasses: mergeClasses9 } = fluentComponents;
-var TONE_HUES = {
-  accent: { light: "#0078d4", dark: "#4cc2ff" },
-  danger: { light: "#c42b1c", dark: "#ff99a4" },
-  neutral: { light: "#8a8a8a", dark: "#9a9a9a" },
-  success: { light: "#0f7b0f", dark: "#6ccb5f" },
-  warning: { light: "#9d5d00", dark: "#fce100" }
-};
-var CHIP_ROOT_PADDING = "5px";
-var LABEL_INSET = `calc(var(--strokeWidthThin) + ${CHIP_ROOT_PADDING} + var(--spacingHorizontalXXS))`;
+var { TableCell, TableHeaderCell, makeStyles: makeStyles8, mergeClasses: mergeClasses10 } = fluentComponents;
 var useStyles8 = makeStyles8({
-  root: {
-    paddingLeft: LABEL_INSET,
-    paddingRight: LABEL_INSET
+  trailing: {
+    textAlign: "right",
+    "& .fui-TableHeaderCell__button": { justifyContent: "flex-end" }
+  },
+  centred: {
+    textAlign: "center",
+    "& .fui-TableHeaderCell__button": { justifyContent: "center" }
   }
 });
-function StatusBadge({ children, className, tone }) {
-  const hue = useBadgeHue(TONE_HUES[tone]);
+function TableTrailingHeader({ className, ...props }) {
   const styles = useStyles8();
-  return /* @__PURE__ */ jsx18(Badge, { appearance: "tint", className: mergeClasses9(styles.root, hue.className, className), size: "large", style: hue.style, children });
-}
-
-// src/components/ui/http-badge.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var { makeStyles: makeStyles9 } = fluentComponents;
-var useStyles9 = makeStyles9({
-  root: {
-    fontFamily: "var(--fontFamilyMonospace)",
-    minWidth: "48px",
-    paddingTop: "1.5px"
-  }
-});
-function HttpBadge({ children, tone }) {
-  const styles = useStyles9();
-  return /* @__PURE__ */ jsx19(StatusBadge, { className: styles.root, tone, children: /* @__PURE__ */ jsx19("span", { translate: "no", children }) });
+  return /* @__PURE__ */ jsx18(TableHeaderCell, { ...props, className: mergeClasses10(styles.trailing, className) });
 }
-function HttpMethodBadge({ method }) {
-  return /* @__PURE__ */ jsx19(HttpBadge, { tone: method === "GET" ? "accent" : method === "POST" ? "success" : "neutral", children: method });
+function TableTrailingCell({ className, ...props }) {
+  const styles = useStyles8();
+  return /* @__PURE__ */ jsx18(TableCell, { ...props, className: mergeClasses10(styles.trailing, className) });
 }
-function HttpStatusBadge({ children, severity }) {
-  return /* @__PURE__ */ jsx19(HttpBadge, { tone: severity === "error" ? "danger" : severity, children });
+function TableCentredHeader({ className, ...props }) {
+  const styles = useStyles8();
+  return /* @__PURE__ */ jsx18(TableHeaderCell, { ...props, className: mergeClasses10(styles.centred, className) });
 }
-
-// src/components/ui/info-label.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var { InfoLabel } = fluentComponents;
-var infoLabelSlot = (label, info) => (_2, slotProps2) => /* @__PURE__ */ jsx20(InfoLabel, { ...slotProps2, info, children: label });
-
-// src/components/ui/loading-screen.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var { Spinner } = fluentComponents;
-function AppLoadingScreen({ label }) {
-  return /* @__PURE__ */ jsx21("main", { className: "fwt-loading fwt-loading-app", children: /* @__PURE__ */ jsx21(Spinner, { label }) });
+function TableCentredCell({ className, ...props }) {
+  const styles = useStyles8();
+  return /* @__PURE__ */ jsx18(TableCell, { ...props, className: mergeClasses10(styles.centred, className) });
 }
-function ContentLoadingScreen({ label }) {
-  return /* @__PURE__ */ jsx21("div", { className: "fwt-loading", children: /* @__PURE__ */ jsx21(Spinner, { label }) });
+var stopRowSelection = { onClick: (event) => event.stopPropagation() };
+var ACTION_GAP = "var(--spacingHorizontalXS)";
+var ACTION_BUTTON_SIZE = "24px";
+var TABLE_ACTIONS_WIDTH = `calc(3 * ${ACTION_BUTTON_SIZE} + 2 * ${ACTION_GAP} + var(--spacingHorizontalS) + var(--fwt-panel-inset))`;
+function TableActions({ children }) {
+  return /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-end", style: { gap: ACTION_GAP }, ...stopRowSelection, children });
 }
 
-// src/components/ui/masked-icon.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var { mergeClasses: mergeClasses10 } = fluentComponents;
-function MaskedIcon({ className, maskSize = "contain", url }) {
-  const style = {
-    backgroundColor: "currentColor",
-    maskImage: `url(${url})`,
-    WebkitMaskImage: `url(${url})`,
-    maskSize,
-    WebkitMaskSize: maskSize,
-    maskRepeat: "no-repeat",
-    WebkitMaskRepeat: "no-repeat",
-    maskPosition: "center",
-    WebkitMaskPosition: "center"
-  };
-  return /* @__PURE__ */ jsx22("span", { "aria-hidden": true, className: mergeClasses10("block flex-none", className), style });
+// src/components/ui/table-columns.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function TableColumns({ widths }) {
+  return /* @__PURE__ */ jsx19("colgroup", { children: widths.map((width, index) => /* @__PURE__ */ jsx19("col", { style: width === null ? void 0 : { width } }, index)) });
 }
 
-// src/components/ui/multiselect-combobox.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var { Option: Option2 } = fluentComponents;
-var sameValues = (left, right) => left.length === right.length && new Set(right).size === right.length && left.every((entry) => right.includes(entry));
-function MultiselectCombobox({
+// src/components/ui/data-table.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var {
+  Button: Button7,
+  Spinner: Spinner2,
+  Table,
+  TableBody,
+  TableCell: TableCell2,
+  TableCellLayout,
+  TableHeader,
+  TableHeaderCell: TableHeaderCell2,
+  TableRow,
+  TableSelectionCell,
+  mergeClasses: mergeClasses11
+} = fluentComponents;
+var LEADING_COLUMN_WIDTH = "44px";
+var HEADER_BY_ALIGN = { center: TableCentredHeader, end: TableTrailingHeader, start: TableHeaderCell2 };
+var CELL_BY_ALIGN = { center: TableCentredCell, end: TableTrailingCell, start: TableCell2 };
+var toggle = (keys2, key) => keys2.includes(key) ? keys2.filter((candidate) => candidate !== key) : [...keys2, key];
+function DataTable({
   ariaLabel,
   className,
-  clearLabel,
-  closedLabel = "",
-  disabled = false,
-  freeform = false,
-  normalizeValue = (entry) => entry,
-  onChange,
-  options,
-  placeholder,
-  readOnly,
-  renderOption,
-  value
+  columns,
+  defaultSort,
+  empty,
+  expandable,
+  loading = false,
+  minWidth,
+  onRowClick,
+  onSortChange,
+  pagination,
+  rowClassName,
+  rowKey,
+  rows,
+  selection,
+  size = "medium"
 }) {
-  const [open, setOpen] = useState5(false);
-  const [query, setQuery] = useState5("");
-  const needle = query.trim().toLowerCase();
-  const optionValues = new Set(options.map((option) => option.value));
-  const completeOptions = [
-    ...options,
-    ...[...new Set(value)].filter((entry) => !optionValues.has(entry)).map((entry) => ({ value: entry, label: entry }))
-  ];
-  const visible = completeOptions.filter((option) => option.label.toLowerCase().includes(needle));
-  const commit = (next) => {
-    const normalized = [...new Set(next.map(normalizeValue).filter(Boolean))];
-    if (!sameValues(normalized, value)) onChange(normalized);
-    setQuery("");
+  const { t: t2 } = useTranslation();
+  const [sort, setSort] = useState6(defaultSort ?? null);
+  const [ownPage, setOwnPage] = useState6(1);
+  const [ownPageSize, setOwnPageSize] = useState6(null);
+  const [ownExpanded, setOwnExpanded] = useState6([]);
+  const sortedRows = useMemo3(() => {
+    const column = sort && columns.find((candidate) => candidate.key === sort.key);
+    if (!sort || !column?.sort) return rows;
+    const direction = sort.direction === "ascending" ? 1 : -1;
+    const compare = column.sort;
+    return [...rows].sort((a2, b2) => direction * compare(a2, b2));
+  }, [columns, rows, sort]);
+  const paged = pagination !== void 0 && pagination !== false;
+  const pageSize = !paged ? 0 : pagination.onPageSizeChange ? pagination.pageSize : ownPageSize ?? pagination.pageSize;
+  const pageCount = paged ? Math.max(1, Math.ceil(sortedRows.length / Math.max(pageSize, 1))) : 1;
+  const requestedPage = paged ? pagination.page ?? ownPage : 1;
+  const page = Math.min(Math.max(requestedPage, 1), pageCount);
+  const visibleRows = paged ? sortedRows.slice((page - 1) * pageSize, page * pageSize) : sortedRows;
+  const changePage = (next) => {
+    setOwnPage(next);
+    if (paged) pagination.onPageChange?.(next);
   };
-  return /* @__PURE__ */ jsxs10(
-    Combobox,
-    {
-      "aria-label": ariaLabel,
-      className,
-      disabled,
-      freeform,
-      multiselect: true,
-      onChange: (event) => setQuery(event.target.value),
-      onKeyDown: freeform ? (event) => {
-        if (event.key !== "Enter" || query.trim() === "") return;
-        event.preventDefault();
-        commit([...value, query]);
-      } : void 0,
-      onOpenChange: (_2, data) => {
-        setOpen(data.open);
-        setQuery("");
-      },
-      onOptionSelect: (_2, data) => commit(data.optionValue === "" ? [] : data.selectedOptions),
-      placeholder,
-      readOnly,
-      selectedOptions: clearLabel && value.length === 0 ? [""] : [...value],
-      value: open ? query : closedLabel,
-      children: [
-        clearLabel && needle === "" && /* @__PURE__ */ jsx23(Option2, { text: clearLabel, value: "", children: clearLabel }),
-        visible.map((option) => /* @__PURE__ */ jsx23(Option2, { text: option.label, value: option.value, children: renderOption ? renderOption(option) : option.label }, option.value))
-      ]
+  const changePageSize = (next) => {
+    setOwnPageSize(next);
+    setOwnPage(1);
+    if (paged) {
+      pagination.onPageSizeChange?.(next);
+      pagination.onPageChange?.(1);
     }
-  );
-}
-var valuesAsOptions = (values) => values.map((value) => ({ value, label: value }));
-
-// src/components/ui/open-link-label.tsx
-import { Open16Regular } from "@fluentui/react-icons";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
-function OpenLinkLabel({ children }) {
-  return /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1", children: [
-    children,
-    /* @__PURE__ */ jsx24(Open16Regular, { "aria-hidden": true, className: "block flex-none" })
+  };
+  const cycleSort = (column) => {
+    const next = sort?.key !== column.key ? { key: column.key, direction: "ascending" } : sort.direction === "ascending" ? { key: column.key, direction: "descending" } : null;
+    setSort(next);
+    onSortChange?.(next);
+    setOwnPage(1);
+  };
+  const selectedKeys = selection?.selectedKeys ?? [];
+  const selectionMode = selection?.mode ?? "multiple";
+  const isSelectable = (row) => selection?.isSelectable?.(row) ?? true;
+  const selectableVisible = visibleRows.filter(isSelectable).map(rowKey);
+  const selectedVisible = selectableVisible.filter((key) => selectedKeys.includes(key));
+  const allChecked = selectedVisible.length === 0 ? false : selectedVisible.length === selectableVisible.length ? true : "mixed";
+  const toggleAll = () => {
+    if (!selection) return;
+    selection.onChange(allChecked === true ? selectedKeys.filter((key) => !selectableVisible.includes(key)) : [...selectedKeys, ...selectableVisible.filter((key) => !selectedKeys.includes(key))]);
+  };
+  const selectRow = (key) => {
+    if (!selection) return;
+    selection.onChange(selectionMode === "single" ? [key] : toggle(selectedKeys, key));
+  };
+  const stop = (event) => event.stopPropagation();
+  const expandedKeys = expandable?.expandedKeys ?? ownExpanded;
+  const toggleExpanded = (key) => {
+    const next = toggle(expandedKeys, key);
+    setOwnExpanded(next);
+    expandable?.onExpandedChange?.(next);
+  };
+  const columnCount = columns.length + (selection ? 1 : 0) + (expandable ? 1 : 0);
+  const widths = [
+    ...selection ? [LEADING_COLUMN_WIDTH] : [],
+    ...expandable ? [LEADING_COLUMN_WIDTH] : [],
+    ...columns.map((column) => column.width ?? null)
+  ];
+  const tableStyle = minWidth === void 0 ? void 0 : { minWidth };
+  return /* @__PURE__ */ jsxs10("div", { className: mergeClasses11("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs10("div", { "aria-busy": loading || void 0, className: "relative min-w-0", children: [
+      /* @__PURE__ */ jsx20(ScrollArea, { axes: "horizontal", className: "min-w-0", children: /* @__PURE__ */ jsxs10(Table, { "aria-label": ariaLabel, size, style: tableStyle, children: [
+        /* @__PURE__ */ jsx20(TableColumns, { widths }),
+        /* @__PURE__ */ jsx20(TableHeader, { children: /* @__PURE__ */ jsxs10(TableRow, { children: [
+          selection && (selectionMode === "multiple" ? /* @__PURE__ */ jsx20(
+            TableSelectionCell,
+            {
+              checkboxIndicator: { "aria-label": t2("dataTable.selectAll"), disabled: selectableVisible.length === 0 },
+              checked: allChecked,
+              onClick: selectableVisible.length === 0 ? void 0 : toggleAll
+            }
+          ) : /* @__PURE__ */ jsx20(TableHeaderCell2, {})),
+          expandable && /* @__PURE__ */ jsx20(TableHeaderCell2, {}),
+          columns.map((column) => {
+            const Header = HEADER_BY_ALIGN[column.align ?? "start"];
+            const sorted = sort?.key === column.key ? sort.direction : void 0;
+            return /* @__PURE__ */ jsx20(
+              Header,
+              {
+                onClick: column.sort ? () => cycleSort(column) : void 0,
+                sortable: column.sort !== void 0,
+                sortDirection: sorted,
+                children: column.title
+              },
+              column.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxs10(TableBody, { children: [
+          visibleRows.length === 0 && /* @__PURE__ */ jsx20(TableRow, { children: /* @__PURE__ */ jsx20(TableCell2, { colSpan: columnCount, children: empty ?? /* @__PURE__ */ jsx20(EmptyStateLine, { className: "py-6 text-center", children: t2("dataTable.empty") }) }) }),
+          visibleRows.flatMap((row, index) => {
+            const key = rowKey(row);
+            const selected = selectedKeys.includes(key);
+            const expanded = expandable !== void 0 && expandedKeys.includes(key);
+            const canExpand = expandable !== void 0 && (expandable.isExpandable?.(row) ?? true);
+            const items = [/* @__PURE__ */ jsxs10(
+              TableRow,
+              {
+                "aria-selected": selection ? selected : void 0,
+                className: mergeClasses11(onRowClick && "cursor-pointer", rowClassName?.(row, index)),
+                onClick: onRowClick ? () => onRowClick(row, index) : void 0,
+                children: [
+                  selection && /* @__PURE__ */ jsx20(
+                    TableSelectionCell,
+                    {
+                      checkboxIndicator: { "aria-label": t2("dataTable.selectRow"), disabled: !isSelectable(row) },
+                      checked: selected,
+                      onClick: (event) => {
+                        stop(event);
+                        if (isSelectable(row)) selectRow(key);
+                      },
+                      radioIndicator: { "aria-label": t2("dataTable.selectRow"), disabled: !isSelectable(row) },
+                      type: selectionMode === "single" ? "radio" : "checkbox"
+                    }
+                  ),
+                  expandable && /* @__PURE__ */ jsx20(TableCell2, { ...stopRowSelection, children: canExpand && /* @__PURE__ */ jsx20(
+                    Button7,
+                    {
+                      appearance: "subtle",
+                      "aria-expanded": expanded,
+                      "aria-label": t2(expanded ? "dataTable.collapseRow" : "dataTable.expandRow"),
+                      icon: expanded ? /* @__PURE__ */ jsx20(ChevronDown16Regular, {}) : /* @__PURE__ */ jsx20(ChevronRight16Regular, {}),
+                      onClick: () => toggleExpanded(key),
+                      size: "small"
+                    }
+                  ) }),
+                  columns.map((column) => {
+                    const Cell = CELL_BY_ALIGN[column.align ?? "start"];
+                    const content = column.render ? column.render(row, index) : column.dataKey === void 0 ? null : row[column.dataKey];
+                    return /* @__PURE__ */ jsx20(Cell, { className: column.ellipsis ? "overflow-hidden" : void 0, children: column.ellipsis ? /* @__PURE__ */ jsx20(TableCellLayout, { title: typeof content === "string" || typeof content === "number" ? String(content) : void 0, truncate: true, children: content }) : content }, column.key);
+                  })
+                ]
+              },
+              key
+            )];
+            if (expanded && canExpand) {
+              items.push(/* @__PURE__ */ jsx20(TableRow, { children: /* @__PURE__ */ jsx20(TableCell2, { colSpan: columnCount, children: expandable.render(row) }) }, `${key}:expanded`));
+            }
+            return items;
+          })
+        ] })
+      ] }) }),
+      loading && /* @__PURE__ */ jsx20(
+        "div",
+        {
+          className: "absolute inset-0 grid place-items-center",
+          style: { background: "color-mix(in srgb, var(--colorNeutralBackground1) 60%, transparent)" },
+          children: /* @__PURE__ */ jsx20(Spinner2, { label: t2("dataTable.loading"), size: "small" })
+        }
+      )
+    ] }),
+    paged && !(pagination.hideOnSinglePage && pageCount <= 1) && /* @__PURE__ */ jsx20("div", { className: "flex justify-end px-3 py-1", style: { borderTop: "1px solid var(--colorNeutralStroke3)" }, children: /* @__PURE__ */ jsx20(
+      Pager,
+      {
+        onPageChange: changePage,
+        onPageSizeChange: changePageSize,
+        page,
+        pageCount,
+        pageSize,
+        pageSizeOptions: pagination.pageSizeOptions,
+        showTotal: pagination.showTotal,
+        total: sortedRows.length
+      }
+    ) })
   ] });
 }
 
-// src/components/ui/outcome-toast.tsx
-import { createContext as createContext3, useCallback as useCallback4, useContext as useContext3, useId as useId2, useMemo as useMemo3, useRef as useRef5 } from "react";
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
-var { Spinner: Spinner2, Toast, Toaster, ToastTitle, useToastController } = fluentComponents;
+// src/components/ui/dashboard-page-header.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var { Text: Text4, mergeClasses: mergeClasses12 } = fluentComponents;
+function DashboardPageHeader({ actions, className, description, title }) {
+  return /* @__PURE__ */ jsxs11("header", { className: mergeClasses12(HEADER_ROW_CLASS, "gap-[18px]", className), children: [
+    /* @__PURE__ */ jsxs11("div", { className: "grid gap-1.5 min-w-0", children: [
+      /* @__PURE__ */ jsx21(Text4, { as: "h1", size: 700, weight: "semibold", className: "m-0", children: title }),
+      description !== void 0 && /* @__PURE__ */ jsx21(Text4, { size: 200, className: "text-fui-fg2 max-w-[760px]", children: description })
+    ] }),
+    actions !== void 0 && /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-2 flex-none max-[900px]:justify-start", children: actions })
+  ] });
+}
+
+// src/components/ui/error-shell.tsx
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var { Text: Text5 } = fluentComponents;
+function ErrorShell({ action, children, message, title }) {
+  return /* @__PURE__ */ jsx22(ScrollArea, { axes: "vertical", className: "fwt-error-shell-viewport", contentClassName: "h-full", children: /* @__PURE__ */ jsxs12("main", { className: "fwt-error-shell", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "fwt-error-shell-stack", children: [
+      /* @__PURE__ */ jsx22(Text5, { align: "center", as: "h1", size: 700, weight: "semibold", children: title }),
+      message !== void 0 && /* @__PURE__ */ jsx22(Text5, { align: "center", as: "p", className: "text-fui-fg2", size: 300, children: message })
+    ] }),
+    children,
+    action !== void 0 && /* @__PURE__ */ jsx22("div", { className: "fwt-error-shell-actions", children: action })
+  ] }) });
+}
+function ErrorStack({ children }) {
+  return /* @__PURE__ */ jsx22(
+    ScrollArea,
+    {
+      axes: "horizontal",
+      className: "winui-focus-rect-within w-full min-w-0 rounded-[var(--winui-overlay-corner-radius,8px)] border border-solid border-fui-stroke1 bg-fui-bg2 text-left",
+      children: /* @__PURE__ */ jsx22("pre", { className: "m-0 w-max min-w-full p-4 font-mono", children: /* @__PURE__ */ jsx22("code", { children }) })
+    }
+  );
+}
+
+// src/components/ui/file-drop-zone.tsx
+import { ArrowUploadRegular, DismissRegular as DismissRegular3, DocumentRegular } from "@fluentui/react-icons";
+import { useId as useId2, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+var { Button: Button8, Text: Text6, makeStyles: makeStyles9, mergeClasses: mergeClasses13, shorthands } = fluentComponents;
+var useStyles9 = makeStyles9({
+  root: {
+    display: "grid",
+    rowGap: "8px",
+    minWidth: 0
+  },
+  zone: {
+    alignItems: "center",
+    backgroundColor: "var(--winui-card-background-fill-default)",
+    ...shorthands.border("1px", "dashed", "var(--winui-surface-stroke-default)"),
+    borderRadius: "var(--winui-control-corner-radius)",
+    boxSizing: "border-box",
+    color: "var(--winui-text-fill-primary)",
+    cursor: "pointer",
+    display: "grid",
+    justifyItems: "center",
+    minHeight: "120px",
+    padding: "24px 16px",
+    rowGap: "4px",
+    textAlign: "center",
+    transitionDuration: "var(--winui-control-faster-animation-duration)",
+    transitionProperty: "background-color, border-color",
+    "@media (prefers-reduced-motion: reduce)": { transitionDuration: "0.01ms" },
+    "&:hover": { backgroundColor: "var(--winui-control-fill-secondary)" },
+    "&:active": { backgroundColor: "var(--winui-control-fill-tertiary)" },
+    // The system focus visual, as ./settings-card draws it.
+    "&:focus-visible": {
+      boxShadow: "0 0 0 1px var(--winui-focus-stroke-inner)",
+      outlineColor: "var(--winui-focus-stroke-outer)",
+      outlineOffset: "1px",
+      outlineStyle: "solid",
+      outlineWidth: "2px"
+    }
+  },
+  dragOver: {
+    backgroundColor: "var(--winui-accent-tint-fill-default)",
+    ...shorthands.borderColor("var(--winui-accent-base)"),
+    "&:hover": { backgroundColor: "var(--winui-accent-tint-fill-default)" },
+    "&:active": { backgroundColor: "var(--winui-accent-tint-fill-secondary)" }
+  },
+  disabled: {
+    backgroundColor: "var(--winui-control-fill-disabled)",
+    color: "var(--winui-text-fill-disabled)",
+    cursor: "not-allowed",
+    "&:hover": { backgroundColor: "var(--winui-control-fill-disabled)" },
+    "&:active": { backgroundColor: "var(--winui-control-fill-disabled)" }
+  },
+  icon: {
+    color: "var(--winui-text-fill-secondary)",
+    display: "inline-flex",
+    fontSize: "24px",
+    lineHeight: 0,
+    pointerEvents: "none"
+  },
+  iconDragOver: { color: "var(--winui-accent-base)" },
+  list: {
+    display: "grid",
+    listStyleType: "none",
+    margin: 0,
+    padding: 0,
+    rowGap: "4px"
+  },
+  file: {
+    alignItems: "center",
+    backgroundColor: "var(--winui-card-background-fill-default)",
+    ...shorthands.border("1px", "solid", "var(--winui-card-stroke-default)"),
+    borderRadius: "var(--winui-control-corner-radius)",
+    columnGap: "8px",
+    display: "flex",
+    minHeight: "40px",
+    paddingBlock: "4px",
+    paddingInlineStart: "12px",
+    paddingInlineEnd: "4px"
+  },
+  fileName: {
+    flexGrow: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+});
+var BYTE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+var formatFileSize = (bytes) => {
+  let size = bytes;
+  let unit = 0;
+  while (size >= 1024 && unit < BYTE_UNITS.length - 1) {
+    size /= 1024;
+    unit += 1;
+  }
+  const text = new Intl.NumberFormat(void 0, { maximumFractionDigits: unit === 0 ? 0 : 1 }).format(size);
+  return `${text} ${BYTE_UNITS[unit]}`;
+};
+var matchesAccept = (file, accept) => {
+  const tokens3 = accept?.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean) ?? [];
+  if (tokens3.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens3.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+};
+var pickFiles = (files, accept, multiple) => {
+  const accepted = [...files].filter((file) => matchesAccept(file, accept));
+  return multiple ? accepted : accepted.slice(0, 1);
+};
+function FileDropZone({
+  accept,
+  className,
+  description,
+  disabled,
+  icon,
+  multiple,
+  onFiles,
+  onRemove,
+  selectedFiles,
+  title
+}) {
+  const styles = useStyles9();
+  const { t: t2 } = useTranslation();
+  const inputRef = useRef5(null);
+  const depth = useRef5(0);
+  const [dragOver, setDragOver] = useState7(false);
+  const titleId = useId2();
+  const reset = () => {
+    depth.current = 0;
+    setDragOver(false);
+  };
+  const emit = (files) => {
+    const picked = pickFiles(files, accept, multiple);
+    if (picked.length > 0) onFiles(picked);
+  };
+  const open = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleDragEnter = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    depth.current += 1;
+    setDragOver(true);
+  };
+  const handleDragOver = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  };
+  const handleDragLeave = () => {
+    if (disabled) return;
+    depth.current = Math.max(0, depth.current - 1);
+    if (depth.current === 0) setDragOver(false);
+  };
+  const handleDrop = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    reset();
+    emit(Array.from(event.dataTransfer.files));
+  };
+  const handleKeyDown = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      open();
+    }
+  };
+  const handleInputChange = (event) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    emit(files);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: mergeClasses13(styles.root, className), children: [
+    /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        "aria-disabled": disabled || void 0,
+        "aria-labelledby": titleId,
+        className: mergeClasses13(styles.zone, dragOver && styles.dragOver, disabled && styles.disabled),
+        "data-drag-over": dragOver || void 0,
+        onClick: open,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: mergeClasses13(styles.icon, dragOver && styles.iconDragOver), children: icon ?? /* @__PURE__ */ jsx23(ArrowUploadRegular, {}) }),
+          /* @__PURE__ */ jsx23(Text6, { id: titleId, size: 300, weight: "semibold", children: dragOver ? t2("fileDropZone.dropHint") : title }),
+          description !== void 0 && /* @__PURE__ */ jsx23(Text6, { size: 200, className: "text-fui-fg2", children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "input",
+      {
+        accept,
+        disabled,
+        hidden: true,
+        multiple,
+        onChange: handleInputChange,
+        ref: inputRef,
+        tabIndex: -1,
+        type: "file"
+      }
+    ),
+    selectedFiles !== void 0 && selectedFiles.length > 0 && /* @__PURE__ */ jsx23("ul", { className: styles.list, children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxs13("li", { className: styles.file, children: [
+      /* @__PURE__ */ jsx23(DocumentRegular, { "aria-hidden": true, className: "text-fui-fg2 shrink-0" }),
+      /* @__PURE__ */ jsx23(Text6, { className: styles.fileName, size: 300, title: file.name, children: file.name }),
+      /* @__PURE__ */ jsx23(Text6, { className: "text-fui-fg2 shrink-0", size: 200, children: formatFileSize(file.size) }),
+      onRemove && /* @__PURE__ */ jsx23(
+        Button8,
+        {
+          appearance: "subtle",
+          "aria-label": `${t2("fileDropZone.remove")}: ${file.name}`,
+          icon: /* @__PURE__ */ jsx23(DismissRegular3, {}),
+          onClick: () => onRemove(file, index),
+          size: "small"
+        }
+      )
+    ] }, `${file.name}:${file.size}:${file.lastModified}:${index}`)) })
+  ] });
+}
+function FilePickerButton({ accept, children, disabled, multiple, onClick, onFiles, ...rest }) {
+  const { t: t2 } = useTranslation();
+  const inputRef = useRef5(null);
+  const buttonProps = {
+    ...rest,
+    disabled,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) inputRef.current?.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsx23(Button8, { ...buttonProps, children: children ?? t2("fileDropZone.browse") }),
+    /* @__PURE__ */ jsx23(
+      "input",
+      {
+        accept,
+        disabled,
+        hidden: true,
+        multiple,
+        onChange: (event) => {
+          const files = Array.from(event.target.files ?? []);
+          event.target.value = "";
+          if (files.length > 0) onFiles(files);
+        },
+        ref: inputRef,
+        tabIndex: -1,
+        type: "file"
+      }
+    )
+  ] });
+}
+
+// src/components/ui/status-badge.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var { Badge, makeStyles: makeStyles10, mergeClasses: mergeClasses14 } = fluentComponents;
+var TONE_HUES = {
+  accent: { light: "#0078d4", dark: "#4cc2ff" },
+  danger: { light: "#c42b1c", dark: "#ff99a4" },
+  neutral: { light: "#8a8a8a", dark: "#9a9a9a" },
+  success: { light: "#0f7b0f", dark: "#6ccb5f" },
+  warning: { light: "#9d5d00", dark: "#fce100" }
+};
+var CHIP_ROOT_PADDING = "5px";
+var LABEL_INSET = `calc(var(--strokeWidthThin) + ${CHIP_ROOT_PADDING} + var(--spacingHorizontalXXS))`;
+var useStyles10 = makeStyles10({
+  root: {
+    paddingLeft: LABEL_INSET,
+    paddingRight: LABEL_INSET
+  }
+});
+function StatusBadge({ children, className, tone }) {
+  const hue = useBadgeHue(TONE_HUES[tone]);
+  const styles = useStyles10();
+  return /* @__PURE__ */ jsx24(Badge, { appearance: "tint", className: mergeClasses14(styles.root, hue.className, className), size: "large", style: hue.style, children });
+}
+
+// src/components/ui/http-badge.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var { makeStyles: makeStyles11 } = fluentComponents;
+var useStyles11 = makeStyles11({
+  root: {
+    fontFamily: "var(--fontFamilyMonospace)",
+    minWidth: "48px",
+    paddingTop: "1.5px"
+  }
+});
+function HttpBadge({ children, tone }) {
+  const styles = useStyles11();
+  return /* @__PURE__ */ jsx25(StatusBadge, { className: styles.root, tone, children: /* @__PURE__ */ jsx25("span", { translate: "no", children }) });
+}
+function HttpMethodBadge({ method }) {
+  return /* @__PURE__ */ jsx25(HttpBadge, { tone: method === "GET" ? "accent" : method === "POST" ? "success" : "neutral", children: method });
+}
+function HttpStatusBadge({ children, severity }) {
+  return /* @__PURE__ */ jsx25(HttpBadge, { tone: severity === "error" ? "danger" : severity, children });
+}
+
+// src/components/ui/info-label.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var { InfoLabel } = fluentComponents;
+var infoLabelSlot = (label, info) => (_2, slotProps2) => /* @__PURE__ */ jsx26(InfoLabel, { ...slotProps2, info, children: label });
+
+// src/components/ui/loading-screen.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var { Spinner: Spinner3 } = fluentComponents;
+function AppLoadingScreen({ label }) {
+  return /* @__PURE__ */ jsx27("main", { className: "fwt-loading fwt-loading-app", children: /* @__PURE__ */ jsx27(Spinner3, { label }) });
+}
+function ContentLoadingScreen({ label }) {
+  return /* @__PURE__ */ jsx27("div", { className: "fwt-loading", children: /* @__PURE__ */ jsx27(Spinner3, { label }) });
+}
+
+// src/components/ui/masked-icon.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var { mergeClasses: mergeClasses15 } = fluentComponents;
+function MaskedIcon({ className, maskSize = "contain", url }) {
+  const style = {
+    backgroundColor: "currentColor",
+    maskImage: `url(${url})`,
+    WebkitMaskImage: `url(${url})`,
+    maskSize,
+    WebkitMaskSize: maskSize,
+    maskRepeat: "no-repeat",
+    WebkitMaskRepeat: "no-repeat",
+    maskPosition: "center",
+    WebkitMaskPosition: "center"
+  };
+  return /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: mergeClasses15("block flex-none", className), style });
+}
+
+// src/components/ui/metric.tsx
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+var { makeStyles: makeStyles12, mergeClasses: mergeClasses16 } = fluentComponents;
+var useStyles12 = makeStyles12({
+  root: {
+    display: "grid",
+    minWidth: 0,
+    rowGap: "4px"
+  },
+  label: {
+    color: "var(--winui-text-fill-secondary)",
+    fontSize: "var(--fontSizeBase200)",
+    lineHeight: "var(--lineHeightBase200)"
+  },
+  value: {
+    alignItems: "baseline",
+    color: "var(--winui-text-fill-primary)",
+    columnGap: "4px",
+    display: "flex",
+    fontVariantNumeric: "tabular-nums",
+    fontWeight: "var(--fontWeightSemibold)",
+    minWidth: 0
+  },
+  title: {
+    fontSize: "var(--fontSizeHero700)",
+    lineHeight: "var(--lineHeightHero700)"
+  },
+  subtitle: {
+    fontSize: "var(--fontSizeBase500)",
+    lineHeight: "var(--lineHeightBase500)"
+  },
+  // A prefix or suffix is a unit or a sign, not part of the figure: one step
+  // down the ramp and the secondary fill, so the figure stays the loudest thing.
+  affix: {
+    color: "var(--winui-text-fill-secondary)",
+    fontSize: "var(--fontSizeBase300)",
+    fontWeight: "var(--fontWeightRegular)",
+    lineHeight: "var(--lineHeightBase300)"
+  },
+  accent: { color: "var(--winui-accent-text-fill-tertiary)" },
+  success: { color: "var(--winui-system-fill-success)" },
+  warning: { color: "var(--winui-system-fill-caution)" },
+  danger: { color: "var(--winui-system-fill-critical)" },
+  grid: {
+    display: "grid",
+    gap: "var(--fwt-metric-gap, 16px)",
+    gridTemplateColumns: "repeat(auto-fit, minmax(min(var(--fwt-metric-min-width, 160px), 100%), 1fr))"
+  }
+});
+var formatMetricValue = (value, precision, locale) => typeof value === "number" ? new Intl.NumberFormat(locale, precision === void 0 ? void 0 : { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(value) : value;
+function Metric({
+  className,
+  formatter,
+  label,
+  locale,
+  precision,
+  prefix,
+  size = "title",
+  suffix,
+  tone = "default",
+  value
+}) {
+  const styles = useStyles12();
+  const hasValue = value !== null && value !== void 0;
+  const text = hasValue ? formatter ? formatter(value) : formatMetricValue(value, precision, locale) : "\u2014";
+  return /* @__PURE__ */ jsxs14("div", { className: mergeClasses16(styles.root, className), children: [
+    /* @__PURE__ */ jsx29("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsxs14("div", { className: mergeClasses16(styles.value, styles[size], tone !== "default" && styles[tone]), children: [
+      prefix !== void 0 && /* @__PURE__ */ jsx29("span", { className: styles.affix, children: prefix }),
+      /* @__PURE__ */ jsx29("span", { children: text }),
+      suffix !== void 0 && /* @__PURE__ */ jsx29("span", { className: styles.affix, children: suffix })
+    ] })
+  ] });
+}
+function MetricGrid({ children, className, gap, minItemWidth }) {
+  const styles = useStyles12();
+  const style = {
+    ...minItemWidth !== void 0 && { "--fwt-metric-min-width": typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth },
+    ...gap !== void 0 && { "--fwt-metric-gap": typeof gap === "number" ? `${gap}px` : gap }
+  };
+  return /* @__PURE__ */ jsx29("div", { className: mergeClasses16(styles.grid, className), style, children });
+}
+
+// src/components/ui/multiselect-combobox.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+var { Option: Option3 } = fluentComponents;
+var sameValues = (left, right) => left.length === right.length && new Set(right).size === right.length && left.every((entry) => right.includes(entry));
+function MultiselectCombobox({
+  ariaLabel,
+  className,
+  clearLabel,
+  closedLabel = "",
+  disabled = false,
+  freeform = false,
+  normalizeValue = (entry) => entry,
+  onChange,
+  options,
+  placeholder,
+  readOnly,
+  renderOption,
+  value
+}) {
+  const [open, setOpen] = useState8(false);
+  const [query, setQuery] = useState8("");
+  const needle = query.trim().toLowerCase();
+  const optionValues = new Set(options.map((option) => option.value));
+  const completeOptions = [
+    ...options,
+    ...[...new Set(value)].filter((entry) => !optionValues.has(entry)).map((entry) => ({ value: entry, label: entry }))
+  ];
+  const visible = completeOptions.filter((option) => option.label.toLowerCase().includes(needle));
+  const commit = (next) => {
+    const normalized = [...new Set(next.map(normalizeValue).filter(Boolean))];
+    if (!sameValues(normalized, value)) onChange(normalized);
+    setQuery("");
+  };
+  return /* @__PURE__ */ jsxs15(
+    Combobox,
+    {
+      "aria-label": ariaLabel,
+      className,
+      disabled,
+      freeform,
+      multiselect: true,
+      onChange: (event) => setQuery(event.target.value),
+      onKeyDown: freeform ? (event) => {
+        if (event.key !== "Enter" || query.trim() === "") return;
+        event.preventDefault();
+        commit([...value, query]);
+      } : void 0,
+      onOpenChange: (_2, data) => {
+        setOpen(data.open);
+        setQuery("");
+      },
+      onOptionSelect: (_2, data) => commit(data.optionValue === "" ? [] : data.selectedOptions),
+      placeholder,
+      readOnly,
+      selectedOptions: clearLabel && value.length === 0 ? [""] : [...value],
+      value: open ? query : closedLabel,
+      children: [
+        clearLabel && needle === "" && /* @__PURE__ */ jsx30(Option3, { text: clearLabel, value: "", children: clearLabel }),
+        visible.map((option) => /* @__PURE__ */ jsx30(Option3, { text: option.label, value: option.value, children: renderOption ? renderOption(option) : option.label }, option.value))
+      ]
+    }
+  );
+}
+var valuesAsOptions = (values) => values.map((value) => ({ value, label: value }));
+
+// src/components/ui/number-box.tsx
+import { forwardRef as forwardRef4, isValidElement } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var { SpinButton } = fluentComponents;
+var stepPrecision = (step) => {
+  const text = String(step);
+  const exponent = /e-(\d+)$/.exec(text);
+  if (exponent) return Number(exponent[1]);
+  return text.split(".")[1]?.length ?? 0;
+};
+var THOUSANDS_GROUPED = /^-?\d{1,3}(,\d{3})+(\.\d+)?$/;
+var parseNumberText = (text) => {
+  const trimmed = text.trim().replace(/−/g, "-").replace(/\s/g, "");
+  if (trimmed === "") return null;
+  const normalized = THOUSANDS_GROUPED.test(trimmed) ? trimmed.replace(/,/g, "") : /^-?\d*,\d+$/.test(trimmed) ? trimmed.replace(",", ".") : trimmed;
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : void 0;
+};
+var clampNumber = (value, { min, max, precision }) => {
+  let next = value;
+  if (max !== void 0 && next > max) next = max;
+  if (min !== void 0 && next < min) next = min;
+  return precision === void 0 ? next : Number(next.toFixed(Math.min(Math.max(precision, 0), 100)));
+};
+var resolveNumberChange = (data, bounds) => {
+  const raw = data.value !== void 0 ? data.value : data.displayValue !== void 0 ? parseNumberText(data.displayValue) : void 0;
+  return typeof raw === "number" ? clampNumber(raw, bounds) : raw;
+};
+var labelSlot = (slot, label) => {
+  if (slot === void 0) return { "aria-label": label };
+  if (slot === null || typeof slot !== "object" || isValidElement(slot) || Symbol.iterator in slot) return slot;
+  return { "aria-label": label, ...slot };
+};
+var NumberBox = forwardRef4(function NumberBox2({ value, onChange, min, max, step, precision, decrementButton, incrementButton, ...rest }, ref) {
+  const { t: t2 } = useTranslation();
+  const bounds = { min, max, precision: precision ?? stepPrecision(step ?? 1) };
+  const handleChange = (_event, data) => {
+    const next = resolveNumberChange(data, bounds);
+    if (next !== void 0) onChange(next);
+  };
+  return /* @__PURE__ */ jsx31(
+    SpinButton,
+    {
+      ...rest,
+      decrementButton: labelSlot(decrementButton, t2("numberBox.decrement")),
+      incrementButton: labelSlot(incrementButton, t2("numberBox.increment")),
+      max,
+      min,
+      onChange: handleChange,
+      precision,
+      ref,
+      step,
+      value
+    }
+  );
+});
+
+// src/components/ui/open-link-label.tsx
+import { Open16Regular } from "@fluentui/react-icons";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+function OpenLinkLabel({ children }) {
+  return /* @__PURE__ */ jsxs16("span", { className: "inline-flex items-center gap-1", children: [
+    children,
+    /* @__PURE__ */ jsx32(Open16Regular, { "aria-hidden": true, className: "block flex-none" })
+  ] });
+}
+
+// src/components/ui/outcome-toast.tsx
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId as useId3, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+var { Spinner: Spinner4, Toast, Toaster, ToastTitle, useToastController } = fluentComponents;
 var TOAST_DISMISS_MS = 3e3;
 var OutcomeToastContext = createContext3(null);
+var ToastApiContext = createContext3(null);
 function OutcomeToastProvider({ children }) {
-  const toasterId = useId2();
-  const sequence = useRef5(0);
+  return useContext3(OutcomeToastContext) ? children : /* @__PURE__ */ jsx33(ToasterHost, { children });
+}
+function ToasterHost({ children }) {
+  const toasterId = useId3();
+  const sequence = useRef6(0);
   const { dispatchToast, dismissToast, updateToast } = useToastController(toasterId);
-  const toastFor = useCallback4((toastId, message, pending) => /* @__PURE__ */ jsx25(Toast, { className: "cursor-pointer", onClick: () => dismissToast(toastId), children: /* @__PURE__ */ jsx25(ToastTitle, { media: pending ? /* @__PURE__ */ jsx25(Spinner2, { size: "tiny" }) : void 0, children: message }) }), [dismissToast]);
-  const nextToastId = useCallback4(() => `${toasterId}-${sequence.current++}`, [toasterId]);
-  const succeed = useCallback4((message) => {
+  const toastFor = useCallback5((toastId, message, pending) => /* @__PURE__ */ jsx33(Toast, { className: "cursor-pointer", onClick: () => dismissToast(toastId), children: /* @__PURE__ */ jsx33(ToastTitle, { media: pending ? /* @__PURE__ */ jsx33(Spinner4, { size: "tiny" }) : void 0, children: message }) }), [dismissToast]);
+  const nextToastId = useCallback5(() => `${toasterId}-${sequence.current++}`, [toasterId]);
+  const succeed = useCallback5((message) => {
     const toastId = nextToastId();
     dispatchToast(toastFor(toastId, message, false), { intent: "success", toastId, timeout: TOAST_DISMISS_MS });
   }, [dispatchToast, nextToastId, toastFor]);
-  const start = useCallback4((pending) => {
+  const start = useCallback5((pending) => {
     const toastId = nextToastId();
     dispatchToast(toastFor(toastId, pending, true), { toastId, timeout: -1 });
     return {
@@ -7389,21 +8291,37 @@ function OutcomeToastProvider({ children }) {
       settle: () => dismissToast(toastId)
     };
   }, [dismissToast, dispatchToast, nextToastId, toastFor, updateToast]);
-  const value = useMemo3(() => ({ start, succeed }), [start, succeed]);
-  return /* @__PURE__ */ jsxs12(OutcomeToastContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx25(Toaster, { toasterId, position: "top-end" }),
+  const value = useMemo4(() => ({ start, succeed }), [start, succeed]);
+  const notify = useCallback5((intent, text, options) => {
+    const toastId = nextToastId();
+    dispatchToast(toastFor(toastId, text, false), { intent, toastId, timeout: options?.timeout ?? TOAST_DISMISS_MS });
+    return () => dismissToast(toastId);
+  }, [dismissToast, dispatchToast, nextToastId, toastFor]);
+  const api = useMemo4(() => ({
+    success: (text, options) => notify("success", text, options),
+    error: (text, options) => notify("error", text, options),
+    warning: (text, options) => notify("warning", text, options),
+    info: (text, options) => notify("info", text, options)
+  }), [notify]);
+  return /* @__PURE__ */ jsx33(OutcomeToastContext.Provider, { value, children: /* @__PURE__ */ jsxs17(ToastApiContext.Provider, { value: api, children: [
+    /* @__PURE__ */ jsx33(Toaster, { toasterId, position: "top-end" }),
     children
-  ] });
+  ] }) });
 }
 var useOutcomeToasts = () => {
   const value = useContext3(OutcomeToastContext);
   if (!value) throw new Error("useOutcomeToasts requires an OutcomeToastProvider above it");
   return value;
 };
+var useToast = () => {
+  const value = useContext3(ToastApiContext);
+  if (!value) throw new Error("useToast requires an OutcomeToastProvider above it");
+  return value;
+};
 
 // src/components/ui/panel.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var { Card, mergeClasses: mergeClasses11 } = fluentComponents;
+import { jsx as jsx34 } from "react/jsx-runtime";
+var { Card, mergeClasses: mergeClasses17 } = fluentComponents;
 var PANEL_INSET_CLASS = "p-[var(--fwt-panel-inset)]";
 var PANEL_BAND_CLASS = "px-[var(--fwt-panel-inset)] py-[var(--spacingVerticalSNudge)]";
 var PADDING_CLASS = {
@@ -7411,12 +8329,127 @@ var PADDING_CLASS = {
   flush: "!p-0"
 };
 function Panel({ className, padding = "content", ...props }) {
-  return /* @__PURE__ */ jsx26(Card, { ...props, className: mergeClasses11(PADDING_CLASS[padding], className) });
+  return /* @__PURE__ */ jsx34(Card, { ...props, className: mergeClasses17(PADDING_CLASS[padding], className) });
+}
+
+// src/components/ui/property-list.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+var { makeStyles: makeStyles13, mergeClasses: mergeClasses18, shorthands: shorthands2 } = fluentComponents;
+var NARROW = "@container fwt-property-list (width < 480px)";
+var MEDIUM = "@container fwt-property-list (480px <= width < 720px)";
+var useStyles13 = makeStyles13({
+  container: {
+    containerName: "fwt-property-list",
+    containerType: "inline-size",
+    minWidth: 0
+  },
+  // Cell lines are each cell's own right and bottom edge. The list is pulled
+  // 1px past the frame on those two sides so the last column's and last row's
+  // lines fall under the frame's clip and the frame's own border stands in.
+  frame: {
+    ...shorthands2.border("1px", "solid", "var(--winui-divider-stroke-default)"),
+    borderRadius: "var(--winui-control-corner-radius)",
+    overflow: "hidden"
+  },
+  list: {
+    display: "grid",
+    gridTemplateColumns: "repeat(var(--fwt-property-columns, 2), minmax(0, 1fr))",
+    margin: 0,
+    columnGap: "24px",
+    rowGap: "12px",
+    [NARROW]: { gridTemplateColumns: "minmax(0, 1fr)" }
+  },
+  listWrapsToTwo: {
+    [MEDIUM]: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }
+  },
+  listBordered: {
+    columnGap: 0,
+    rowGap: 0,
+    marginRight: "-1px",
+    marginBottom: "-1px"
+  },
+  item: {
+    display: "grid",
+    gridColumn: "span var(--fwt-span, 1)",
+    minWidth: 0,
+    rowGap: "2px",
+    [NARROW]: { "&[data-wide]": { gridColumn: "1 / -1" } }
+  },
+  itemWrapsToTwo: {
+    [MEDIUM]: { "&[data-wide]": { gridColumn: "1 / -1" } }
+  },
+  itemBordered: {
+    borderBottom: "1px solid var(--winui-divider-stroke-default)",
+    borderRight: "1px solid var(--winui-divider-stroke-default)",
+    gridTemplateColumns: "var(--fwt-property-label-width, 120px) minmax(0, 1fr)",
+    rowGap: 0
+  },
+  label: {
+    color: "var(--winui-text-fill-secondary)",
+    fontSize: "var(--fontSizeBase200)",
+    lineHeight: "var(--lineHeightBase200)",
+    margin: 0,
+    minWidth: 0
+  },
+  value: {
+    color: "var(--winui-text-fill-primary)",
+    fontSize: "var(--fontSizeBase300)",
+    lineHeight: "var(--lineHeightBase300)",
+    margin: 0,
+    minWidth: 0,
+    overflowWrap: "anywhere"
+  },
+  labelBordered: {
+    backgroundColor: "var(--winui-card-background-fill-secondary)",
+    borderRight: "1px solid var(--winui-divider-stroke-default)",
+    fontSize: "var(--fontSizeBase300)",
+    lineHeight: "var(--lineHeightBase300)",
+    padding: "8px 12px"
+  },
+  valueBordered: {
+    backgroundColor: "var(--winui-card-background-fill-default)",
+    padding: "8px 12px"
+  }
+});
+function PropertyList({ bordered, className, columns = 2, items }) {
+  const styles = useStyles13();
+  const columnCount = Math.max(1, Math.floor(columns));
+  const stepsDown = columnCount > 2;
+  const list = /* @__PURE__ */ jsx35(
+    "dl",
+    {
+      className: mergeClasses18(styles.list, stepsDown && styles.listWrapsToTwo, bordered && styles.listBordered),
+      children: items.map((item, index) => {
+        const span = Math.min(Math.max(1, Math.floor(item.span ?? 1)), columnCount);
+        return /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: mergeClasses18(styles.item, stepsDown && styles.itemWrapsToTwo, bordered && styles.itemBordered),
+            "data-wide": span > 1 ? "" : void 0,
+            style: { "--fwt-span": span },
+            children: [
+              /* @__PURE__ */ jsx35("dt", { className: mergeClasses18(styles.label, bordered && styles.labelBordered), children: item.label }),
+              /* @__PURE__ */ jsx35("dd", { className: mergeClasses18(styles.value, bordered && styles.valueBordered), children: item.value })
+            ]
+          },
+          item.key ?? index
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ jsx35(
+    "div",
+    {
+      className: mergeClasses18(styles.container, bordered && styles.frame, className),
+      style: { "--fwt-property-columns": columnCount },
+      children: list
+    }
+  );
 }
 
 // src/components/ui/progress-ring.tsx
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
-var { makeStyles: makeStyles10, mergeClasses: mergeClasses12 } = fluentComponents;
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+var { makeStyles: makeStyles14, mergeClasses: mergeClasses19 } = fluentComponents;
 var DIAMETER = 32;
 var STROKE = 4;
 var RADIUS = (DIAMETER - STROKE) / 2;
@@ -7427,7 +8460,7 @@ var TONE_STROKE = {
   caution: "var(--winui-system-fill-caution)",
   critical: "var(--winui-system-fill-critical)"
 };
-var useStyles10 = makeStyles10({
+var useStyles14 = makeStyles14({
   // A forced-colours palette repaints background and border colours but not an
   // SVG stroke, so each ring names its system colour itself: Highlight is what
   // HighContrast gives ProgressRingForegroundThemeBrush through
@@ -7446,19 +8479,19 @@ var useStyles10 = makeStyles10({
   }
 });
 function ProgressRing({ className, percent, size = 16, tone }) {
-  const styles = useStyles10();
+  const styles = useStyles14();
   const filled = Math.max(0, Math.min(100, percent)) / 100;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs19(
     "svg",
     {
       "aria-hidden": true,
-      className: mergeClasses12("block flex-none", className),
+      className: mergeClasses19("block flex-none", className),
       height: size,
       style: { transform: "translateY(calc(50% - 0.5cap))" },
       viewBox: `0 0 ${DIAMETER} ${DIAMETER}`,
       width: size,
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx36(
           "circle",
           {
             className: styles.track,
@@ -7470,7 +8503,7 @@ function ProgressRing({ className, percent, size = 16, tone }) {
             strokeWidth: TRACK_STROKE
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx36(
           "circle",
           {
             className: styles.arc,
@@ -7492,9 +8525,9 @@ function ProgressRing({ className, percent, size = 16, tone }) {
 
 // src/components/ui/reorder-list.tsx
 import { ReOrderDotsVerticalRegular } from "@fluentui/react-icons";
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var { Button: Button5, makeStyles: makeStyles11, mergeClasses: mergeClasses13 } = fluentComponents;
+import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef7, useState as useState9 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var { Button: Button9, makeStyles: makeStyles15, mergeClasses: mergeClasses20 } = fluentComponents;
 var REORDER_OPACITY = 0.8;
 var DRAG_RETURN_MS = 200;
 var LIST_ATTRIBUTE = "data-reorder-list";
@@ -7504,7 +8537,7 @@ var EDGE_ATTRIBUTE = "data-reorder-edge";
 var HANDLE_ATTRIBUTE = "data-reorder-handle";
 var DRAG_Y = "--fwt-reorder-drag-y";
 var TRACKING_TRANSFORM = { transform: `translateY(var(${DRAG_Y}, 0px))` };
-var useStyles11 = makeStyles11({
+var useStyles15 = makeStyles15({
   // A drag that starts on the handle travels over the rows, and without this
   // the browser reads that travel as a text selection across them.
   list: { [`&[${REORDERING_ATTRIBUTE}]`]: { userSelect: "none" } },
@@ -7593,11 +8626,11 @@ var siblingHandles = (handle) => {
   return [...list.querySelectorAll(`[${HANDLE_ATTRIBUTE}]`)].filter((element) => element.closest(`[${LIST_ATTRIBUTE}]`) === list && !element.hasAttribute("disabled"));
 };
 function useReorderList({ busy = false, disabled = false, length, onDrop, onDropError, onReorder }) {
-  const styles = useStyles11();
-  const gestureRef = useRef6(null);
-  const settleRef = useRef6(void 0);
-  const mountedRef = useRef6(true);
-  const [preview, setPreview] = useState6(null);
+  const styles = useStyles15();
+  const gestureRef = useRef7(null);
+  const settleRef = useRef7(void 0);
+  const mountedRef = useRef7(true);
+  const [preview, setPreview] = useState9(null);
   const locked = busy || disabled || length < 2;
   const live = preview !== null && preview.from < length && preview.to < length ? preview : null;
   useEffect5(() => {
@@ -7607,8 +8640,8 @@ function useReorderList({ busy = false, disabled = false, length, onDrop, onDrop
       clearTimeout(settleRef.current);
     };
   }, []);
-  const offsets = useMemo4(() => live && slotOffsets(live.items, live.from, live.to), [live]);
-  const ranks = useMemo4(
+  const offsets = useMemo5(() => live && slotOffsets(live.items, live.from, live.to), [live]);
+  const ranks = useMemo5(
     () => live && moveItem(Array.from({ length }, (_2, index) => index), live.from, live.to),
     [length, live]
   );
@@ -7737,7 +8770,7 @@ function useReorderList({ busy = false, disabled = false, length, onDrop, onDrop
       return {
         [ITEM_ATTRIBUTE]: String(index),
         [EDGE_ATTRIBUTE]: !live ? void 0 : rank === 0 ? "first" : rank === length - 1 ? "last" : void 0,
-        className: mergeClasses13(
+        className: mergeClasses20(
           grabbed && styles.lifted,
           // The row under the pointer is not travelling toward anything -- it is
           // where the pointer put it -- so it wears the drag opacity flat, and
@@ -7749,20 +8782,20 @@ function useReorderList({ busy = false, disabled = false, length, onDrop, onDrop
         style: !live ? void 0 : grabbed ? TRACKING_TRANSFORM : { transform: `translateY(${offsets?.get(index) ?? 0}px)` }
       };
     },
-    listProps: (className) => ({ [LIST_ATTRIBUTE]: "", className: mergeClasses13(styles.list, className), onKeyDown }),
+    listProps: (className) => ({ [LIST_ATTRIBUTE]: "", className: mergeClasses20(styles.list, className), onKeyDown }),
     position
   };
 }
 function ReorderHandle({ label, ...gesture }) {
-  const styles = useStyles11();
-  return /* @__PURE__ */ jsx28(
-    Button5,
+  const styles = useStyles15();
+  return /* @__PURE__ */ jsx37(
+    Button9,
     {
       appearance: "subtle",
       "aria-keyshortcuts": `${REORDER_CHORD}+ArrowUp ${REORDER_CHORD}+ArrowDown`,
       "aria-label": label,
       className: styles.handle,
-      icon: /* @__PURE__ */ jsx28(ReOrderDotsVerticalRegular, {}),
+      icon: /* @__PURE__ */ jsx37(ReOrderDotsVerticalRegular, {}),
       size: "small",
       ...gesture
     }
@@ -7771,12 +8804,12 @@ function ReorderHandle({ label, ...gesture }) {
 
 // src/components/ui/resource-list.tsx
 import { AddRegular, ArrowClockwiseRegular } from "@fluentui/react-icons";
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
-var { Button: Button6, Spinner: Spinner3, Tooltip: Tooltip2, makeStyles: makeStyles12, mergeClasses: mergeClasses14 } = fluentComponents;
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var { Button: Button10, Spinner: Spinner5, Tooltip: Tooltip3, makeStyles: makeStyles16, mergeClasses: mergeClasses21 } = fluentComponents;
 var DEFAULT_ROW_HEIGHT = "44px";
 var ROW_HEIGHT = "--fwt-resource-row-height";
 var EDGE_INSET = "var(--fwt-panel-inset)";
-var useStyles12 = makeStyles12({
+var useStyles16 = makeStyles16({
   table: {
     "& .fui-TableRow": { height: `var(${ROW_HEIGHT})` },
     // By type rather than by position: a DataGrid row carries Tabster's focus
@@ -7809,12 +8842,12 @@ var useStyles12 = makeStyles12({
   emptyState: { padding: EDGE_INSET }
 });
 function ResourceListPanel({ className, rowHeight = DEFAULT_ROW_HEIGHT, style, ...props }) {
-  const styles = useStyles12();
-  return /* @__PURE__ */ jsx29(
+  const styles = useStyles16();
+  return /* @__PURE__ */ jsx38(
     Panel,
     {
       ...props,
-      className: mergeClasses14("grid min-w-0 !gap-0 overflow-hidden", styles.table, className),
+      className: mergeClasses21("grid min-w-0 !gap-0 overflow-hidden", styles.table, className),
       padding: "flush",
       style: { ...style, [ROW_HEIGHT]: rowHeight }
     }
@@ -7823,12 +8856,12 @@ function ResourceListPanel({ className, rowHeight = DEFAULT_ROW_HEIGHT, style, .
 function ResourceListActions(props) {
   const { appearance, createDisabled = false, createLabel, createTrailingIcon, disabled = false, onRefresh, refreshLabel, refreshing = false } = props;
   const busy = disabled || createDisabled || refreshing;
-  const createButton = createLabel !== void 0 && /* @__PURE__ */ jsxs14(
-    Button6,
+  const createButton = createLabel !== void 0 && /* @__PURE__ */ jsxs20(
+    Button10,
     {
       appearance: "primary",
       disabled: busy,
-      icon: /* @__PURE__ */ jsx29(AddRegular, {}),
+      icon: /* @__PURE__ */ jsx38(AddRegular, {}),
       onClick: "onCreate" in props ? props.onCreate : void 0,
       children: [
         createLabel,
@@ -7836,43 +8869,43 @@ function ResourceListActions(props) {
       ]
     }
   );
-  return /* @__PURE__ */ jsxs14("div", { "aria-busy": refreshing, className: "flex items-center gap-2 flex-none", children: [
-    /* @__PURE__ */ jsx29(Tooltip2, { content: refreshLabel, relationship: "label", children: /* @__PURE__ */ jsx29(
-      Button6,
+  return /* @__PURE__ */ jsxs20("div", { "aria-busy": refreshing, className: "flex items-center gap-2 flex-none", children: [
+    /* @__PURE__ */ jsx38(Tooltip3, { content: refreshLabel, relationship: "label", children: /* @__PURE__ */ jsx38(
+      Button10,
       {
         appearance,
         "aria-label": refreshLabel,
         disabled,
         disabledFocusable: refreshing,
-        icon: refreshing ? /* @__PURE__ */ jsx29(Spinner3, { size: "tiny" }) : /* @__PURE__ */ jsx29(ArrowClockwiseRegular, {}),
+        icon: refreshing ? /* @__PURE__ */ jsx38(Spinner5, { size: "tiny" }) : /* @__PURE__ */ jsx38(ArrowClockwiseRegular, {}),
         onClick: onRefresh
       }
     ) }),
     createButton && (props.createTrigger === void 0 ? createButton : props.createTrigger(createButton)),
-    /* @__PURE__ */ jsx29("span", { "aria-live": "polite", className: "sr-only", children: refreshing ? `${refreshLabel}\u2026` : "" })
+    /* @__PURE__ */ jsx38("span", { "aria-live": "polite", className: "sr-only", children: refreshing ? `${refreshLabel}\u2026` : "" })
   ] });
 }
 function ResourceListEmptyState({ children }) {
-  const styles = useStyles12();
-  return /* @__PURE__ */ jsx29(EmptyStateLine, { className: styles.emptyState, children });
+  const styles = useStyles16();
+  return /* @__PURE__ */ jsx38(EmptyStateLine, { className: styles.emptyState, children });
 }
 
 // src/components/ui/row-title.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
-var { mergeClasses: mergeClasses15 } = fluentComponents;
+import { jsx as jsx39 } from "react/jsx-runtime";
+var { mergeClasses: mergeClasses22 } = fluentComponents;
 var rowTitleClass = "winui-focus-rect text-fui-fg1 no-underline hover:underline";
 function RowTitleButton({ children, onClick, ...trigger }) {
-  return /* @__PURE__ */ jsx30("button", { className: mergeClasses15(rowTitleClass, "block bg-transparent border-0 cursor-pointer leading-[var(--lineHeightBase300)] min-w-0 max-w-full truncate p-0 text-fui-base300 text-left"), onClick, type: "button", ...trigger, children });
+  return /* @__PURE__ */ jsx39("button", { className: mergeClasses22(rowTitleClass, "block bg-transparent border-0 cursor-pointer leading-[var(--lineHeightBase300)] min-w-0 max-w-full truncate p-0 text-fui-base300 text-left"), onClick, type: "button", ...trigger, children });
 }
 
 // src/components/ui/secret-input.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function SecretInput({ onChange, revealed = false, value, ...rest }) {
-  const [guardLocked, setGuardLocked] = useState7(true);
+  const [guardLocked, setGuardLocked] = useState10(true);
   const hasValue = String(value ?? "").length > 0;
   const unlock = () => setGuardLocked(false);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx40(
     Input,
     {
       ...rest,
@@ -7913,12 +8946,12 @@ function SecretInput({ onChange, revealed = false, value, ...rest }) {
 }
 
 // src/components/ui/section-header.tsx
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-var { InfoButton, Text: Text4, mergeClasses: mergeClasses16 } = fluentComponents;
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var { InfoButton, Text: Text7, mergeClasses: mergeClasses23 } = fluentComponents;
 var TITLE_SIZE = { 2: 500, 3: 400, 4: 300 };
 function SectionHeader({ actions, description, info, level, title, titleId, truncate = false }) {
-  const headingText = /* @__PURE__ */ jsx32(
-    Text4,
+  const headingText = /* @__PURE__ */ jsx41(
+    Text7,
     {
       as: `h${level}`,
       className: description === void 0 ? "m-0 min-w-0" : "m-0",
@@ -7930,25 +8963,25 @@ function SectionHeader({ actions, description, info, level, title, titleId, trun
       children: title
     }
   );
-  const heading = info === void 0 ? headingText : /* @__PURE__ */ jsxs15("div", { className: "inline-flex items-center gap-1 min-w-0", children: [
+  const heading = info === void 0 ? headingText : /* @__PURE__ */ jsxs21("div", { className: "inline-flex items-center gap-1 min-w-0", children: [
     headingText,
-    /* @__PURE__ */ jsx32(InfoButton, { info })
+    /* @__PURE__ */ jsx41(InfoButton, { info })
   ] });
-  const block = description === void 0 ? heading : /* @__PURE__ */ jsxs15("div", { className: mergeClasses16(TIGHT_STACK_CLASS, "min-w-0"), children: [
+  const block = description === void 0 ? heading : /* @__PURE__ */ jsxs21("div", { className: mergeClasses23(TIGHT_STACK_CLASS, "min-w-0"), children: [
     heading,
-    /* @__PURE__ */ jsx32(Text4, { className: "text-fui-fg2", size: 200, children: description })
+    /* @__PURE__ */ jsx41(Text7, { className: "text-fui-fg2", size: 200, children: description })
   ] });
   if (actions === void 0) return block;
-  return /* @__PURE__ */ jsxs15("div", { className: mergeClasses16(HEADER_ROW_CLASS, "gap-3"), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: mergeClasses23(HEADER_ROW_CLASS, "gap-3"), children: [
     block,
-    /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-2 flex-none", children: actions })
+    /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-2 flex-none", children: actions })
   ] });
 }
 
 // src/components/ui/settings-card.tsx
-import { useId as useId3, useState as useState8 } from "react";
-import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
-var { Text: Text5, makeStyles: makeStyles13, mergeClasses: mergeClasses17, shorthands } = fluentComponents;
+import { useId as useId4, useState as useState11 } from "react";
+import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+var { Text: Text8, makeStyles: makeStyles17, mergeClasses: mergeClasses24, shorthands: shorthands3 } = fluentComponents;
 var ICON_MARGIN_START = "2px";
 var ICON_MARGIN_END = "20px";
 var ICON_SIZE = "24px";
@@ -7958,7 +8991,7 @@ var ICON_COLUMN_VAR = "var(--fwt-settings-icon-column, 0px)";
 var WRAPPED = "@container fwt-settings-row (width < 476px)";
 var WRAPPED_WITH_ICON = "@container fwt-settings-row (286px <= width < 476px)";
 var WRAPPED_NO_ICON = "@container fwt-settings-row (width < 286px)";
-var useStyles13 = makeStyles13({
+var useStyles17 = makeStyles17({
   // Containment sits one level out of the row so the query measures the same
   // box the toolkit's trigger reads (this element carries no padding or
   // border), and so the wrapped state can style the row itself -- a container
@@ -7987,7 +9020,7 @@ var useStyles13 = makeStyles13({
     borderRightWidth: "1px",
     borderBottomWidth: "1px",
     borderLeftWidth: "1px",
-    ...shorthands.borderColor("var(--winui-card-stroke-default)"),
+    ...shorthands3.borderColor("var(--winui-card-stroke-default)"),
     borderRadius: "var(--winui-control-corner-radius)",
     boxSizing: "border-box",
     color: "var(--winui-text-fill-primary)",
@@ -8030,21 +9063,19 @@ var useStyles13 = makeStyles13({
       // and the dark one does not.
       // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L382-L390
       // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L186-L191
-      borderTopColor: "var(--winui-control-stroke-default)",
+      // base.css picks the two stops per scheme, where `data-fwt-theme` can
+      // override the system scheme (local adaptation, UPSTREAM.md).
+      borderTopColor: "var(--fwt-elevation-edge-top)",
       borderRightColor: "var(--winui-control-stroke-default)",
-      borderBottomColor: "var(--winui-control-stroke-secondary)",
-      borderLeftColor: "var(--winui-control-stroke-default)",
-      "@media (prefers-color-scheme: dark)": {
-        borderTopColor: "var(--winui-control-stroke-secondary)",
-        borderBottomColor: "var(--winui-control-stroke-default)"
-      }
+      borderBottomColor: "var(--fwt-elevation-edge-bottom)",
+      borderLeftColor: "var(--winui-control-stroke-default)"
     },
     // `:has` alongside each pointer state: the expander's own press lands on the
     // overlay inside the row, and a row that reacts only to a press on itself
     // would hold its rest fill while the reader is holding it down.
     "&:active, &:has(> :active)": {
       backgroundColor: "var(--winui-control-fill-tertiary)",
-      ...shorthands.borderColor("var(--winui-control-stroke-default)")
+      ...shorthands3.borderColor("var(--winui-control-stroke-default)")
     },
     // The system focus visual: a 2px FocusStrokeColorOuter ring with a 1px
     // FocusStrokeColorInner ring immediately inside it, around the border box
@@ -8132,7 +9163,7 @@ var useStyles13 = makeStyles13({
   expanderHeader: {
     position: "relative",
     backgroundColor: "var(--winui-card-background-fill-default)",
-    ...shorthands.borderColor("var(--winui-card-stroke-default)"),
+    ...shorthands3.borderColor("var(--winui-card-stroke-default)"),
     fontFamily: "inherit",
     fontSize: "inherit",
     paddingInlineEnd: "4px",
@@ -8182,7 +9213,7 @@ var useStyles13 = makeStyles13({
     // The row paints the ring; see the interactive style above.
     ":focus-visible": { outline: "none" },
     background: "none",
-    ...shorthands.borderWidth(0),
+    ...shorthands3.borderWidth(0),
     cursor: "pointer",
     "&:disabled": { cursor: "not-allowed" },
     inset: 0,
@@ -8317,48 +9348,48 @@ var useStyles13 = makeStyles13({
   readoutDisabled: { color: "var(--winui-text-fill-disabled)" }
 });
 function CardText({ description, header, icon, id }) {
-  const styles = useStyles13();
-  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    icon !== void 0 && /* @__PURE__ */ jsx33("span", { "aria-hidden": true, className: styles.icon, ...{ [ICON_MARKER]: "" }, children: icon }),
-    /* @__PURE__ */ jsxs16("span", { className: styles.text, children: [
-      /* @__PURE__ */ jsx33(Text5, { block: true, id, children: header }),
-      description !== void 0 && /* @__PURE__ */ jsx33(Text5, { block: true, size: 200, className: styles.description, children: description })
+  const styles = useStyles17();
+  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
+    icon !== void 0 && /* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: styles.icon, ...{ [ICON_MARKER]: "" }, children: icon }),
+    /* @__PURE__ */ jsxs22("span", { className: styles.text, children: [
+      /* @__PURE__ */ jsx42(Text8, { block: true, id, children: header }),
+      description !== void 0 && /* @__PURE__ */ jsx42(Text8, { block: true, size: 200, className: styles.description, children: description })
     ] })
   ] });
 }
 function SettingsSwitch({ checked, disabled, label, onChange }) {
-  const styles = useStyles13();
+  const styles = useStyles17();
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ jsxs16("span", { className: styles.switchRow, children: [
-    /* @__PURE__ */ jsx33(Text5, { className: disabled === true ? styles.readoutDisabled : void 0, children: t2(checked ? "common.on" : "common.off") }),
-    /* @__PURE__ */ jsx33(Switch, { "aria-label": label, checked, disabled, onChange: (_2, data) => onChange(data.checked) })
+  return /* @__PURE__ */ jsxs22("span", { className: styles.switchRow, children: [
+    /* @__PURE__ */ jsx42(Text8, { className: disabled === true ? styles.readoutDisabled : void 0, children: t2(checked ? "common.on" : "common.off") }),
+    /* @__PURE__ */ jsx42(Switch, { "aria-label": label, checked, disabled, onChange: (_2, data) => onChange(data.checked) })
   ] });
 }
 function SettingsCard({ action, description, header, icon }) {
-  const styles = useStyles13();
-  return /* @__PURE__ */ jsx33("div", { className: styles.row, children: /* @__PURE__ */ jsxs16("div", { className: styles.card, children: [
-    /* @__PURE__ */ jsx33(CardText, { description, header, icon }),
-    action !== void 0 && /* @__PURE__ */ jsx33("span", { className: styles.action, children: action })
+  const styles = useStyles17();
+  return /* @__PURE__ */ jsx42("div", { className: styles.row, children: /* @__PURE__ */ jsxs22("div", { className: styles.card, children: [
+    /* @__PURE__ */ jsx42(CardText, { description, header, icon }),
+    action !== void 0 && /* @__PURE__ */ jsx42("span", { className: styles.action, children: action })
   ] }) });
 }
 function SettingsExpander({ action, children, defaultOpen = false, description, disclosureDisabled = false, header, icon, revealOn, toggledOn }) {
-  const styles = useStyles13();
-  const [open, setOpen] = useState8(defaultOpen);
-  const [toggleWas, setToggleWas] = useState8(toggledOn);
+  const styles = useStyles17();
+  const [open, setOpen] = useState11(defaultOpen);
+  const [toggleWas, setToggleWas] = useState11(toggledOn);
   if (toggledOn !== void 0 && toggledOn !== toggleWas) {
     setToggleWas(toggledOn);
     setOpen(toggledOn);
   }
-  const [revealWas, setRevealWas] = useState8(revealOn);
+  const [revealWas, setRevealWas] = useState11(revealOn);
   if (revealOn !== revealWas) {
     setRevealWas(revealOn);
     if (revealOn === true) setOpen(true);
   }
-  const contentId = useId3();
-  const headerId = useId3();
-  return /* @__PURE__ */ jsxs16("div", { className: styles.row, children: [
-    /* @__PURE__ */ jsxs16("div", { className: mergeClasses17(styles.card, !disclosureDisabled && styles.interactive, styles.expanderHeader, open && styles.expanderHeaderOpen), children: [
-      /* @__PURE__ */ jsx33(
+  const contentId = useId4();
+  const headerId = useId4();
+  return /* @__PURE__ */ jsxs22("div", { className: styles.row, children: [
+    /* @__PURE__ */ jsxs22("div", { className: mergeClasses24(styles.card, !disclosureDisabled && styles.interactive, styles.expanderHeader, open && styles.expanderHeaderOpen), children: [
+      /* @__PURE__ */ jsx42(
         "button",
         {
           "aria-controls": contentId,
@@ -8370,112 +9401,48 @@ function SettingsExpander({ action, children, defaultOpen = false, description,
           type: "button"
         }
       ),
-      /* @__PURE__ */ jsx33(CardText, { description, header, icon, id: headerId }),
-      action !== void 0 && /* @__PURE__ */ jsx33("span", { className: styles.action, children: action }),
-      /* @__PURE__ */ jsx33("span", { "aria-hidden": true, className: styles.chevron, children: /* @__PURE__ */ jsx33("svg", { className: mergeClasses17(styles.chevronGlyph, open && styles.chevronOpen), width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx33("path", { d: "M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z" }) }) })
+      /* @__PURE__ */ jsx42(CardText, { description, header, icon, id: headerId }),
+      action !== void 0 && /* @__PURE__ */ jsx42("span", { className: styles.action, children: action }),
+      /* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: styles.chevron, children: /* @__PURE__ */ jsx42("svg", { className: mergeClasses24(styles.chevronGlyph, open && styles.chevronOpen), width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx42("path", { d: "M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z" }) }) })
     ] }),
-    /* @__PURE__ */ jsx33("div", { className: mergeClasses17(styles.contentFrame, open && styles.contentFrameOpen), children: /* @__PURE__ */ jsx33("div", { className: styles.contentClip, children: /* @__PURE__ */ jsx33("div", { "aria-labelledby": headerId, className: styles.content, id: contentId, inert: !open, role: "group", children }) }) })
+    /* @__PURE__ */ jsx42("div", { className: mergeClasses24(styles.contentFrame, open && styles.contentFrameOpen), children: /* @__PURE__ */ jsx42("div", { className: styles.contentClip, children: /* @__PURE__ */ jsx42("div", { "aria-labelledby": headerId, className: styles.content, id: contentId, inert: !open, role: "group", children }) }) })
   ] });
 }
 
 // src/components/ui/switch-setting.tsx
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 var { InfoButton: InfoButton2 } = fluentComponents;
 function SwitchSetting({ checked, description, label, onChange }) {
-  return /* @__PURE__ */ jsxs17("span", { className: "inline-flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx34(Switch, { checked, label, onChange: (_2, data) => onChange(data.checked) }),
-    /* @__PURE__ */ jsx34(InfoButton2, { info: description })
+  return /* @__PURE__ */ jsxs23("span", { className: "inline-flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx43(Switch, { checked, label, onChange: (_2, data) => onChange(data.checked) }),
+    /* @__PURE__ */ jsx43(InfoButton2, { info: description })
   ] });
 }
 
-// src/components/ui/table-actions.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var { TableCell, TableHeaderCell, makeStyles: makeStyles14, mergeClasses: mergeClasses18 } = fluentComponents;
-var useStyles14 = makeStyles14({
-  trailing: {
-    textAlign: "right",
-    "& .fui-TableHeaderCell__button": { justifyContent: "flex-end" }
-  },
-  centred: {
-    textAlign: "center",
-    "& .fui-TableHeaderCell__button": { justifyContent: "center" }
-  }
-});
-function TableTrailingHeader({ className, ...props }) {
-  const styles = useStyles14();
-  return /* @__PURE__ */ jsx35(TableHeaderCell, { ...props, className: mergeClasses18(styles.trailing, className) });
-}
-function TableTrailingCell({ className, ...props }) {
-  const styles = useStyles14();
-  return /* @__PURE__ */ jsx35(TableCell, { ...props, className: mergeClasses18(styles.trailing, className) });
-}
-function TableCentredHeader({ className, ...props }) {
-  const styles = useStyles14();
-  return /* @__PURE__ */ jsx35(TableHeaderCell, { ...props, className: mergeClasses18(styles.centred, className) });
-}
-function TableCentredCell({ className, ...props }) {
-  const styles = useStyles14();
-  return /* @__PURE__ */ jsx35(TableCell, { ...props, className: mergeClasses18(styles.centred, className) });
-}
-var stopRowSelection = { onClick: (event) => event.stopPropagation() };
-var ACTION_GAP = "var(--spacingHorizontalXS)";
-var ACTION_BUTTON_SIZE = "24px";
-var TABLE_ACTIONS_WIDTH = `calc(3 * ${ACTION_BUTTON_SIZE} + 2 * ${ACTION_GAP} + var(--spacingHorizontalS) + var(--fwt-panel-inset))`;
-function TableActions({ children }) {
-  return /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-end", style: { gap: ACTION_GAP }, ...stopRowSelection, children });
-}
-
-// src/components/ui/table-columns.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
-function TableColumns({ widths }) {
-  return /* @__PURE__ */ jsx36("colgroup", { children: widths.map((width, index) => /* @__PURE__ */ jsx36("col", { style: width === null ? void 0 : { width } }, index)) });
-}
-
-// src/components/ui/tooltip-icon-button.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var { Button: Button7, Tooltip: Tooltip3, mergeClasses: mergeClasses19 } = fluentComponents;
-function TooltipIconButton(props) {
-  return props.to === void 0 ? /* @__PURE__ */ jsx37(IconButton, { ...props }) : /* @__PURE__ */ jsx37(AddressedIconButton, { ...props, to: props.to });
-}
-function AddressedIconButton({ to, ...props }) {
-  const address = useRouteAddress(to);
-  return /* @__PURE__ */ jsx37(IconButton, { ...props, ...address });
-}
-function IconButton({ className, danger = false, disabled = false, disabledFocusable = false, href, icon, label, onClick }) {
-  const dangerClasses = useDangerActionClasses();
-  const shared = {
-    appearance: "subtle",
-    "aria-label": label,
-    className: mergeClasses19(danger && dangerClasses.button, className),
-    disabled,
-    disabledFocusable,
-    icon,
-    onClick,
-    size: "small"
-  };
-  return /* @__PURE__ */ jsx37(Tooltip3, { content: label, relationship: "label", children: href === void 0 ? /* @__PURE__ */ jsx37(Button7, { ...shared }) : /* @__PURE__ */ jsx37(Button7, { ...shared, as: "a", href }) });
-}
+// src/components/ui/tab-view.tsx
+import { CaretLeft12Filled, CaretRight12Filled, Dismiss12Regular } from "@fluentui/react-icons";
+import { useCallback as useCallback7, useEffect as useEffect7, useLayoutEffect as useLayoutEffect4, useRef as useRef9, useState as useState13 } from "react";
 
 // src/components/ui/truncation-tooltip.tsx
-import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef7, useState as useState9 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef8, useState as useState12 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var { Tooltip: Tooltip4 } = fluentComponents;
 var OVERFLOW_TOLERANCE_PX = 1;
 var collapseWhitespace = (text) => text.replace(/\s+/gu, " ").trim();
 var hidesContent = (node, content) => node.scrollWidth - node.clientWidth > OVERFLOW_TOLERANCE_PX || collapseWhitespace(node.textContent ?? "") !== collapseWhitespace(content);
 var useTruncation = (content, relationship) => {
-  const [truncated, setTruncated] = useState9(false);
-  const [visible, setVisible] = useState9(false);
-  const nodeRef = useRef7(null);
-  const contentRef = useRef7(content);
-  const measure2 = useCallback5(() => {
+  const [truncated, setTruncated] = useState12(false);
+  const [visible, setVisible] = useState12(false);
+  const nodeRef = useRef8(null);
+  const contentRef = useRef8(content);
+  const measure2 = useCallback6(() => {
     const node = nodeRef.current;
     if (!node) return;
     const hides = hidesContent(node, contentRef.current);
     setTruncated(hides);
     if (!hides) setVisible(false);
   }, []);
-  const measureRef = useCallback5((node) => {
+  const measureRef = useCallback6((node) => {
     nodeRef.current = node;
     if (!node) return;
     measure2();
@@ -8514,37 +9481,549 @@ var useTruncation = (content, relationship) => {
 };
 function TruncationTooltip({ children, content, relationship }) {
   const { measureRef, tooltipProps } = useTruncation(content, relationship);
-  return /* @__PURE__ */ jsx38(Tooltip4, { ...tooltipProps, children: children(measureRef) });
+  return /* @__PURE__ */ jsx44(Tooltip4, { ...tooltipProps, children: children(measureRef) });
+}
+
+// src/components/ui/tab-view.tsx
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var { makeStyles: makeStyles18, mergeClasses: mergeClasses25 } = fluentComponents;
+var useStyles18 = makeStyles18({
+  // TabViewHeaderPadding: 8px above the tabs.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L239
+  // The strip's bottom line is TabViewBorderBrush (CardStrokeColorDefault),
+  // drawn here under the scroller so that the selected tab, which reaches the
+  // strip's last pixel row, paints over it and interrupts it.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L36-L37
+  root: {
+    alignItems: "flex-end",
+    display: "flex",
+    maxWidth: "100%",
+    minWidth: 0,
+    paddingTop: "8px",
+    position: "relative",
+    "&::after": {
+      backgroundColor: "var(--winui-card-stroke-default)",
+      bottom: 0,
+      content: '""',
+      height: "1px",
+      left: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      right: 0,
+      zIndex: 0
+    }
+  },
+  scroller: {
+    alignSelf: "stretch",
+    display: "flex",
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    overflowX: "auto",
+    overflowY: "hidden",
+    position: "relative",
+    scrollbarWidth: "none",
+    zIndex: 1,
+    "&::-webkit-scrollbar": { display: "none" },
+    "@media (prefers-reduced-motion: no-preference)": { scrollBehavior: "smooth" }
+  },
+  tablist: {
+    alignItems: "flex-end",
+    display: "flex",
+    flexWrap: "nowrap",
+    minWidth: "min-content"
+  },
+  // TabViewItemMinHeight 32, MinWidth 100, MaxWidth 240; the item's own
+  // corners are OverlayCornerRadius on top only (TopCornerRadiusFilterConverter).
+  // Every item holds a 1px border (TabViewItemBorderThickness) so selecting
+  // one, which paints it, moves nothing.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L242-L244
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L296-L297
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L560-L562
+  item: {
+    alignItems: "stretch",
+    borderBottomWidth: 0,
+    borderLeft: "1px solid transparent",
+    borderRight: "1px solid transparent",
+    borderTop: "1px solid transparent",
+    borderTopLeftRadius: "var(--winui-overlay-corner-radius)",
+    borderTopRightRadius: "var(--winui-overlay-corner-radius)",
+    boxSizing: "border-box",
+    display: "flex",
+    flexGrow: 0,
+    flexShrink: 1,
+    maxWidth: "240px",
+    minHeight: "32px",
+    minWidth: "100px",
+    position: "relative",
+    // TabSeparator: 1px DividerStrokeColorDefault inset 8px top and bottom,
+    // gone under the pointer, on the selected tab and on the tab before it.
+    // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L553
+    // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L266
+    "&::after": {
+      backgroundColor: "var(--winui-divider-stroke-default)",
+      bottom: "8px",
+      content: '""',
+      pointerEvents: "none",
+      position: "absolute",
+      right: "-1px",
+      top: "8px",
+      width: "1px"
+    },
+    "&:last-child::after": { display: "none" },
+    "&:hover::after": { opacity: 0 },
+    "&:has(+ [data-selected])::after": { opacity: 0 },
+    "&:hover": { backgroundColor: "var(--winui-subtle-fill-secondary)" },
+    "&:active": { backgroundColor: "var(--winui-subtle-fill-tertiary)" },
+    // The selected tab: TabViewItemHeaderBackgroundSelected, a stroke on top
+    // and sides in CardStrokeColorDefault, no bottom edge. It holds its fill
+    // through the pointer states.
+    // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L325-L345
+    // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L72-L80
+    "&[data-selected]": {
+      backgroundColor: "var(--winui-solid-background-fill-tertiary)",
+      borderLeftColor: "var(--winui-card-stroke-default)",
+      borderRightColor: "var(--winui-card-stroke-default)",
+      borderTopColor: "var(--winui-card-stroke-default)",
+      zIndex: 1
+    },
+    "&[data-selected]::after": { opacity: 0 },
+    "&[data-disabled]": { backgroundColor: "transparent" },
+    // WinUI's CloseButtonOverlayMode Auto: the close button shows on the
+    // selected tab and under the pointer, or always where there is no hover.
+    "&:hover [data-tab-close], &:focus-within [data-tab-close]": { opacity: 1, pointerEvents: "auto" },
+    "@media (hover: none)": { "& [data-tab-close]": { opacity: 1, pointerEvents: "auto" } }
+  },
+  // TabViewItemHeaderPaddingWithCloseButton 8,3,4,3 / WithoutCloseButton
+  // 8,3,8,3; the close button's 4px margin supplies the right-hand 4.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L253-L254
+  tab: {
+    alignItems: "center",
+    appearance: "none",
+    backgroundColor: "transparent",
+    borderRadius: "inherit",
+    border: "none",
+    // The foreground ramp: rest and pointer-over TextFillColorSecondary,
+    // pressed Tertiary, selected Primary.
+    // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L12-L21
+    color: "var(--winui-text-fill-secondary)",
+    columnGap: "10px",
+    cursor: "pointer",
+    display: "flex",
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    // TabViewItemHeaderFontSize 12.
+    fontFamily: "inherit",
+    fontSize: "12px",
+    lineHeight: "16px",
+    minWidth: 0,
+    padding: "3px 8px 3px 8px",
+    textAlign: "start",
+    "&:active:not(:disabled)": { color: "var(--winui-text-fill-tertiary)" },
+    '&[aria-selected="true"], &[aria-selected="true"]:active': { color: "var(--winui-text-fill-primary)" },
+    "&:disabled": { color: "var(--winui-text-fill-disabled)", cursor: "not-allowed" },
+    // The system focus visual, as the library's other selectors draw it.
+    "&:focus-visible": {
+      boxShadow: "inset 0 0 0 1px var(--winui-focus-stroke-inner)",
+      outline: "2px solid var(--winui-focus-stroke-outer)",
+      outlineOffset: "-2px"
+    }
+  },
+  tabWithClose: { paddingRight: 0 },
+  // The icon sits in a 16px box with a 10px gap before the label.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L246-L247
+  icon: {
+    alignItems: "center",
+    display: "inline-flex",
+    flexShrink: 0,
+    fontSize: "16px",
+    height: "16px",
+    justifyContent: "center",
+    width: "16px"
+  },
+  label: {
+    flexBasis: 0,
+    flexGrow: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  // TabViewItemHeaderCloseButtonWidth 32, Height 24, glyph 12, margin 4,0,0,0,
+  // ControlCornerRadius; the fills are the subtle ramp, the glyph Primary
+  // (Secondary while pressed).
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L248-L252
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L172-L187
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L47-L60
+  close: {
+    alignItems: "center",
+    alignSelf: "center",
+    appearance: "none",
+    backgroundColor: "transparent",
+    borderRadius: "var(--winui-control-corner-radius)",
+    border: "none",
+    color: "var(--winui-text-fill-primary)",
+    cursor: "pointer",
+    display: "inline-flex",
+    flexShrink: 0,
+    fontSize: "12px",
+    height: "24px",
+    justifyContent: "center",
+    margin: "0 4px",
+    opacity: 0,
+    padding: 0,
+    pointerEvents: "none",
+    width: "32px",
+    "&:hover": { backgroundColor: "var(--winui-subtle-fill-secondary)" },
+    "&:active": {
+      backgroundColor: "var(--winui-subtle-fill-tertiary)",
+      color: "var(--winui-text-fill-secondary)"
+    },
+    "&:focus-visible": {
+      boxShadow: "inset 0 0 0 1px var(--winui-focus-stroke-inner)",
+      outline: "2px solid var(--winui-focus-stroke-outer)",
+      outlineOffset: "0",
+      opacity: 1,
+      pointerEvents: "auto"
+    },
+    "&:disabled": { color: "var(--winui-text-fill-disabled)", cursor: "not-allowed" }
+  },
+  closeShown: { opacity: 1, pointerEvents: "auto" },
+  // Scroll buttons: 32x24, glyph 8, ControlCornerRadius, the subtle ramp, with
+  // 8,0,3,3 / 3,0,8,3 container padding.
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L255-L260
+  // https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L34-L41
+  scrollButtonBox: {
+    alignSelf: "flex-end",
+    flexShrink: 0,
+    position: "relative",
+    zIndex: 1
+  },
+  scrollBoxLeft: { padding: "0 3px 3px 8px" },
+  scrollBoxRight: { padding: "0 8px 3px 3px" },
+  scrollButton: {
+    alignItems: "center",
+    appearance: "none",
+    backgroundColor: "transparent",
+    borderRadius: "var(--winui-control-corner-radius)",
+    border: "none",
+    color: "var(--winui-text-fill-secondary)",
+    cursor: "pointer",
+    display: "inline-flex",
+    fontSize: "8px",
+    height: "24px",
+    justifyContent: "center",
+    padding: "3px 7px",
+    width: "32px",
+    "&:hover:not(:disabled)": { backgroundColor: "var(--winui-subtle-fill-secondary)" },
+    "&:active:not(:disabled)": { backgroundColor: "var(--winui-subtle-fill-tertiary)" },
+    "&:disabled": { color: "var(--winui-text-fill-disabled)", cursor: "default" },
+    "&:focus-visible": {
+      boxShadow: "inset 0 0 0 1px var(--winui-focus-stroke-inner)",
+      outline: "2px solid var(--winui-focus-stroke-outer)",
+      outlineOffset: "0"
+    }
+  },
+  // TabStripFooter: beside the tabs, after them, on the strip's baseline.
+  footer: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    display: "flex",
+    flexShrink: 0,
+    minHeight: "32px",
+    paddingBottom: "3px",
+    paddingInline: "4px",
+    position: "relative",
+    zIndex: 1
+  }
+});
+var SCROLL_STEP_PX = 200;
+function TabView({ ariaLabel, className, footer, items, onClose, onSelect, selectedValue }) {
+  const styles = useStyles18();
+  const { t: t2 } = useTranslation();
+  const scrollerRef = useRef9(null);
+  const [overflow, setOverflow] = useState13({ backward: false, forward: false, scrollable: false });
+  const enabledValues = items.filter((item) => item.disabled !== true).map((item) => item.value);
+  const tabStop = selectedValue !== null && enabledValues.includes(selectedValue) ? selectedValue : enabledValues[0];
+  const measure2 = useCallback7(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const scrollable = scroller.scrollWidth - scroller.clientWidth > 1;
+    const backward = scrollable && scroller.scrollLeft > 0;
+    const forward = scrollable && scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1;
+    setOverflow((previous) => previous.scrollable === scrollable && previous.backward === backward && previous.forward === forward ? previous : { backward, forward, scrollable });
+  }, []);
+  useLayoutEffect4(() => {
+    measure2();
+    const scroller = scrollerRef.current;
+    if (!scroller || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure2);
+    observer.observe(scroller);
+    const list = scroller.firstElementChild;
+    if (list) observer.observe(list);
+    return () => observer.disconnect();
+  }, [measure2, items]);
+  useEffect7(() => {
+    const selected = scrollerRef.current?.querySelector('[role="tab"][aria-selected="true"]');
+    selected?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [selectedValue]);
+  const scrollBy = (direction) => scrollerRef.current?.scrollBy?.({ left: direction * SCROLL_STEP_PX });
+  const closeIfClosable = (value) => {
+    const item = items.find((candidate) => candidate.value === value);
+    if (item?.closable !== true || item.disabled === true) return false;
+    onClose?.(value);
+    return true;
+  };
+  const handleKeyDown = (event) => {
+    const target = event.target;
+    const owner = target.closest("[data-tab-value]");
+    if (!owner) return;
+    const value = owner.dataset.tabValue;
+    if (event.key === "F4" && event.ctrlKey || event.key === "Delete") {
+      if (closeIfClosable(value)) event.preventDefault();
+      return;
+    }
+    if (!target.matches('[role="tab"]') || enabledValues.length === 0) return;
+    const current = enabledValues.indexOf(value);
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+        next = enabledValues[(current + 1) % enabledValues.length];
+        break;
+      case "ArrowLeft":
+        next = enabledValues[(current - 1 + enabledValues.length) % enabledValues.length];
+        break;
+      case "Home":
+        next = enabledValues[0];
+        break;
+      case "End":
+        next = enabledValues[enabledValues.length - 1];
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextTab = event.currentTarget.querySelector(`[data-tab-value="${CSS.escape(next)}"] [role="tab"]`);
+    nextTab?.focus();
+    if (next !== selectedValue) onSelect(next);
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: mergeClasses25(styles.root, className), children: [
+    overflow.scrollable ? /* @__PURE__ */ jsx45("div", { className: mergeClasses25(styles.scrollButtonBox, styles.scrollBoxLeft), children: /* @__PURE__ */ jsx45(
+      "button",
+      {
+        "aria-label": t2("tabView.scrollBackward"),
+        className: styles.scrollButton,
+        disabled: !overflow.backward,
+        onClick: () => scrollBy(-1),
+        tabIndex: -1,
+        type: "button",
+        children: /* @__PURE__ */ jsx45(CaretLeft12Filled, { fontSize: 8 })
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx45("div", { className: styles.scroller, onScroll: measure2, ref: scrollerRef, children: /* @__PURE__ */ jsx45("div", { "aria-label": ariaLabel, "aria-orientation": "horizontal", className: styles.tablist, onKeyDown: handleKeyDown, role: "tablist", children: items.map((item) => {
+      const selected = item.value === selectedValue;
+      const disabled = item.disabled === true;
+      const closable = item.closable === true;
+      const closeLabel = item.closeLabel ?? t2("tabView.close");
+      return /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          className: styles.item,
+          "data-disabled": disabled ? "" : void 0,
+          "data-selected": selected ? "" : void 0,
+          "data-tab-value": item.value,
+          onAuxClick: (event) => {
+            if (event.button !== 1 || !closable) return;
+            event.preventDefault();
+            closeIfClosable(item.value);
+          },
+          onMouseDown: (event) => {
+            if (event.button === 1) event.preventDefault();
+          },
+          role: "presentation",
+          children: [
+            /* @__PURE__ */ jsxs24(
+              "button",
+              {
+                "aria-selected": selected,
+                className: mergeClasses25(styles.tab, closable && styles.tabWithClose),
+                disabled,
+                onClick: () => {
+                  if (!selected) onSelect(item.value);
+                },
+                role: "tab",
+                tabIndex: item.value === tabStop ? 0 : -1,
+                type: "button",
+                children: [
+                  item.icon === void 0 ? null : /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", className: styles.icon, children: item.icon }),
+                  typeof item.header === "string" ? /* @__PURE__ */ jsx45(TruncationTooltip, { content: item.header, relationship: "description", children: (measureRef) => /* @__PURE__ */ jsx45("span", { className: styles.label, ref: measureRef, children: item.header }) }) : /* @__PURE__ */ jsx45("span", { className: styles.label, children: item.header })
+                ]
+              }
+            ),
+            closable ? /* @__PURE__ */ jsx45(
+              "button",
+              {
+                "aria-label": closeLabel,
+                className: mergeClasses25(styles.close, selected && styles.closeShown),
+                "data-tab-close": "",
+                disabled,
+                onClick: () => closeIfClosable(item.value),
+                tabIndex: -1,
+                type: "button",
+                children: /* @__PURE__ */ jsx45(Dismiss12Regular, { fontSize: 12 })
+              }
+            ) : null
+          ]
+        },
+        item.value
+      );
+    }) }) }),
+    overflow.scrollable ? /* @__PURE__ */ jsx45("div", { className: mergeClasses25(styles.scrollButtonBox, styles.scrollBoxRight), children: /* @__PURE__ */ jsx45(
+      "button",
+      {
+        "aria-label": t2("tabView.scrollForward"),
+        className: styles.scrollButton,
+        disabled: !overflow.forward,
+        onClick: () => scrollBy(1),
+        tabIndex: -1,
+        type: "button",
+        children: /* @__PURE__ */ jsx45(CaretRight12Filled, { fontSize: 8 })
+      }
+    ) }) : null,
+    footer === void 0 ? null : /* @__PURE__ */ jsx45("div", { className: styles.footer, children: footer })
+  ] });
+}
+
+// src/components/ui/tooltip-icon-button.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+var { Button: Button11, Tooltip: Tooltip5, mergeClasses: mergeClasses26 } = fluentComponents;
+function TooltipIconButton(props) {
+  return props.to === void 0 ? /* @__PURE__ */ jsx46(IconButton, { ...props }) : /* @__PURE__ */ jsx46(AddressedIconButton, { ...props, to: props.to });
+}
+function AddressedIconButton({ to, ...props }) {
+  const address = useRouteAddress(to);
+  return /* @__PURE__ */ jsx46(IconButton, { ...props, ...address });
+}
+function IconButton({ className, danger = false, disabled = false, disabledFocusable = false, href, icon, label, onClick, ...trigger }) {
+  const dangerClasses = useDangerActionClasses();
+  const shared = {
+    ...trigger,
+    appearance: "subtle",
+    "aria-label": label,
+    className: mergeClasses26(danger && dangerClasses.button, className),
+    disabled,
+    disabledFocusable,
+    icon,
+    onClick,
+    size: "small"
+  };
+  return /* @__PURE__ */ jsx46(Tooltip5, { content: label, relationship: "label", children: href === void 0 ? /* @__PURE__ */ jsx46(Button11, { ...shared }) : /* @__PURE__ */ jsx46(Button11, { ...shared, as: "a", href }) });
+}
+
+// src/components/ui/use-confirm.tsx
+import { createContext as createContext4, useCallback as useCallback8, useContext as useContext4, useRef as useRef10, useState as useState14 } from "react";
+import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+var ConfirmContext = createContext4(null);
+var errorText2 = (error) => error instanceof Error ? error.message : String(error);
+function ConfirmDialogProvider({ children }) {
+  const nextId = useRef10(0);
+  const [queue, setQueue] = useState14([]);
+  const [open, setOpen] = useState14(true);
+  const [busy, setBusy] = useState14(false);
+  const [error, setError] = useState14(null);
+  const head = queue[0];
+  const confirm = useCallback8((options) => new Promise((resolve) => {
+    setQueue((current) => [...current, { id: nextId.current++, options, resolve }]);
+  }), []);
+  const finish = (confirmed) => {
+    if (!open) return;
+    head?.resolve(confirmed);
+    setOpen(false);
+  };
+  const accept = async () => {
+    if (!head) return;
+    const { onConfirm } = head.options;
+    if (!onConfirm) {
+      finish(true);
+      return;
+    }
+    setError(null);
+    setBusy(true);
+    try {
+      await onConfirm();
+      setBusy(false);
+      finish(true);
+    } catch (caught) {
+      setBusy(false);
+      setError(errorText2(caught));
+    }
+  };
+  const advance = () => {
+    setQueue((current) => current.slice(1));
+    setError(null);
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs25(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    head && /* @__PURE__ */ jsx47(
+      ConfirmDialog,
+      {
+        actionIntent: head.options.intent,
+        actionLabel: head.options.actionLabel,
+        busy,
+        cancelLabel: head.options.cancelLabel,
+        error,
+        message: head.options.message,
+        onConfirm: () => {
+          void accept();
+        },
+        onDismissError: () => setError(null),
+        onExited: advance,
+        onOpenChange: (next) => {
+          if (!next) finish(false);
+        },
+        open,
+        title: head.options.title
+      },
+      head.id
+    )
+  ] });
 }
+var useConfirm = () => {
+  const value = useContext4(ConfirmContext);
+  if (!value) throw new Error("useConfirm requires a ConfirmDialogProvider above it");
+  return value;
+};
 
 // src/components/ui/use-dialog-invocation.ts
-import { useCallback as useCallback6, useMemo as useMemo5, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo6, useRef as useRef11, useState as useState15 } from "react";
 var useDialogInvocation = () => {
-  const nextKey = useRef8(0);
-  const [invocation, setInvocation] = useState10(null);
-  const [isOpen, setIsOpen] = useState10(false);
-  const open = useCallback6((value) => {
+  const nextKey = useRef11(0);
+  const [invocation, setInvocation] = useState15(null);
+  const [isOpen, setIsOpen] = useState15(false);
+  const open = useCallback9((value) => {
     setInvocation({ key: nextKey.current++, value });
     setIsOpen(true);
   }, []);
-  const close = useCallback6(() => setIsOpen(false), []);
-  return useMemo5(() => ({ close, invocation, isOpen, open }), [close, invocation, isOpen, open]);
+  const close = useCallback9(() => setIsOpen(false), []);
+  return useMemo6(() => ({ close, invocation, isOpen, open }), [close, invocation, isOpen, open]);
 };
 
 // src/components/ui/use-discard-guard.tsx
-import { useCallback as useCallback7, useRef as useRef9, useState as useState11 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useRef as useRef12, useState as useState16 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var useDiscardGuard = ({ onClose, values }) => {
   const { t: t2 } = useTranslation();
   const prompt = useDialogInvocation();
-  const discarding = useRef9(false);
-  const [openedWith] = useState11(() => JSON.stringify(values));
+  const discarding = useRef12(false);
+  const [openedWith] = useState16(() => JSON.stringify(values));
   const dirty = JSON.stringify(values) !== openedWith;
-  const requestClose = useCallback7(() => {
+  const requestClose = useCallback10(() => {
     if (dirty) prompt.open();
     else onClose();
   }, [dirty, onClose, prompt]);
-  const discardConfirmation = prompt.invocation && /* @__PURE__ */ jsx39(
+  const discardConfirmation = prompt.invocation && /* @__PURE__ */ jsx48(
     ConfirmDialog,
     {
       actionLabel: t2("common.discard.discard"),
@@ -8572,13 +10051,13 @@ var useDiscardGuard = ({ onClose, values }) => {
 
 // src/shell/app-shell.tsx
 import { NavigationRegular } from "@fluentui/react-icons";
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState18 } from "react";
 
 // src/shell/page-frames.tsx
-import { useState as useState12 } from "react";
+import { useState as useState17 } from "react";
 var usePageFrames = (page, pageKey) => {
-  const [current, setCurrent] = useState12({ id: 0, key: pageKey, node: page });
-  const [leaving, setLeaving] = useState12(null);
+  const [current, setCurrent] = useState17({ id: 0, key: pageKey, node: page });
+  const [leaving, setLeaving] = useState17(null);
   if (current.key !== pageKey) {
     setLeaving({ id: current.id, node: current.node });
     setCurrent({ id: current.id + 1, key: pageKey, node: page });
@@ -8594,14 +10073,14 @@ var usePageFrames = (page, pageKey) => {
 var pageFrameClassName = (frame) => frame.leaving ? "fwt-page-leaving" : frame.id > 0 ? "fwt-page-entering" : "";
 
 // src/shell/app-shell.tsx
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
-var { Button: Button8, DrawerBody, OverlayDrawer } = fluentComponents;
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+var { Button: Button12, DrawerBody, OverlayDrawer } = fluentComponents;
 var MAIN_ID = "fwt-main";
 function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigation, pageKey, workspace = false }) {
-  const [navigationOpen, setNavigationOpen] = useState13(false);
-  const firstFrameRef = useRef10(null);
-  const entranceStarted = useRef10(false);
-  useLayoutEffect4(() => {
+  const [navigationOpen, setNavigationOpen] = useState18(false);
+  const firstFrameRef = useRef13(null);
+  const entranceStarted = useRef13(false);
+  useLayoutEffect5(() => {
     if (entranceStarted.current) return;
     if (prefersReducedMotion()) return;
     const frame = firstFrameRef.current;
@@ -8613,19 +10092,19 @@ function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigat
       { duration: PAGE_ENTER_MS, easing: PAGE_ENTER_EASING, fill: "forwards" }
     );
   }, []);
-  const page = /* @__PURE__ */ jsx40(
+  const page = /* @__PURE__ */ jsx49(
     ScrollArea,
     {
       axes: "vertical",
       className: "h-full min-h-0",
       contentClassName: workspace ? "h-full" : "min-h-full",
       noTabIndex: true,
-      children: /* @__PURE__ */ jsx40("div", { className: `${workspace ? SCROLLPORT_FILL_CLASS : ""} p-[22px_var(--fwt-page-inset)_var(--fwt-page-inset)] max-[680px]:p-4`, children })
+      children: /* @__PURE__ */ jsx49("div", { className: `${workspace ? SCROLLPORT_FILL_CLASS : ""} p-[22px_var(--fwt-page-inset)_var(--fwt-page-inset)] max-[680px]:p-4`, children })
     }
   );
   const frames = usePageFrames(page, pageKey);
-  return /* @__PURE__ */ jsxs18(OutcomeToastProvider, { children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs26(OutcomeToastProvider, { children: [
+    /* @__PURE__ */ jsx49(
       "a",
       {
         className: "fixed left-3 top-3 z-[100000] -translate-y-20 rounded-md bg-fui-bg1 px-3 py-2 text-fui-fg1 shadow-lg focus:translate-y-0",
@@ -8633,22 +10112,22 @@ function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigat
         children: labels.skipToContent
       }
     ),
-    /* @__PURE__ */ jsxs18("div", { className: "grid grid-cols-[clamp(240px,18vw,290px)_minmax(0,1fr)] grid-rows-[minmax(0,1fr)] h-[100dvh] min-h-0 max-[900px]:grid-cols-1 max-[900px]:grid-rows-[58px_minmax(0,1fr)]", children: [
-      /* @__PURE__ */ jsx40("div", { className: "min-h-0 max-[900px]:hidden", children: navigation({}) }),
-      /* @__PURE__ */ jsxs18("header", { className: "hidden max-[900px]:flex items-center gap-3 border-b border-b-solid border-fui-divider px-4", children: [
-        /* @__PURE__ */ jsx40(
-          Button8,
+    /* @__PURE__ */ jsxs26("div", { className: "grid grid-cols-[clamp(240px,18vw,290px)_minmax(0,1fr)] grid-rows-[minmax(0,1fr)] h-[100dvh] min-h-0 max-[900px]:grid-cols-1 max-[900px]:grid-rows-[58px_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsx49("div", { className: "min-h-0 max-[900px]:hidden", children: navigation({}) }),
+      /* @__PURE__ */ jsxs26("header", { className: "hidden max-[900px]:flex items-center gap-3 border-b border-b-solid border-fui-divider px-4", children: [
+        /* @__PURE__ */ jsx49(
+          Button12,
           {
             appearance: "subtle",
             "aria-label": labels.openNavigation,
-            icon: /* @__PURE__ */ jsx40(NavigationRegular, {}),
+            icon: /* @__PURE__ */ jsx49(NavigationRegular, {}),
             onClick: () => setNavigationOpen(true)
           }
         ),
         narrowHeader,
-        narrowHeaderActions !== void 0 && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex items-center gap-2", children: narrowHeaderActions })
+        narrowHeaderActions !== void 0 && /* @__PURE__ */ jsx49("div", { className: "ml-auto flex items-center gap-2", children: narrowHeaderActions })
       ] }),
-      /* @__PURE__ */ jsx40("div", { className: "grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] min-h-0", children: frames.map((frame) => /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx49("div", { className: "grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] min-h-0", children: frames.map((frame) => /* @__PURE__ */ jsx49(
         "div",
         {
           "aria-hidden": frame.leaving || void 0,
@@ -8664,7 +10143,7 @@ function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigat
         frame.id
       )) })
     ] }),
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx49(
       OverlayDrawer,
       {
         "aria-label": labels.navigation,
@@ -8672,33 +10151,33 @@ function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigat
         onOpenChange: (_2, data) => setNavigationOpen(data.open),
         open: navigationOpen,
         position: "start",
-        children: /* @__PURE__ */ jsx40(DrawerBody, { className: "!p-0", children: navigation({ onNavigate: () => setNavigationOpen(false) }) })
+        children: /* @__PURE__ */ jsx49(DrawerBody, { className: "!p-0", children: navigation({ onNavigate: () => setNavigationOpen(false) }) })
       }
     )
   ] });
 }
 
 // src/shell/gradient-background.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function GradientBackground({ children }) {
-  return /* @__PURE__ */ jsx41("div", { className: "fwt-gradient-background", children });
+  return /* @__PURE__ */ jsx50("div", { className: "fwt-gradient-background", children });
 }
 
 // src/shell/navigation-pane.tsx
-import { DismissRegular as DismissRegular3 } from "@fluentui/react-icons";
-import { useRef as useRef11 } from "react";
-import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { DismissRegular as DismissRegular4 } from "@fluentui/react-icons";
+import { useRef as useRef14 } from "react";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var {
-  Button: Button9,
+  Button: Button13,
   NavDrawer,
   NavDrawerBody,
   NavDrawerFooter,
   NavDrawerHeader,
   NavItem,
   NavSectionHeader,
-  makeStyles: makeStyles15
+  makeStyles: makeStyles19
 } = fluentComponents;
-var useStyles15 = makeStyles15({
+var useStyles19 = makeStyles19({
   // 36px is a floor rather than a fixed height, so a two-line label lengthens
   // the row instead of being cut. The left-pane template's 40px icon column
   // plus the presenter's 4 puts the label at 44; Fluent's icon slot is 20px
@@ -8720,14 +10199,14 @@ var useStyles15 = makeStyles15({
 });
 var NAV_INDICATOR_INSET = 0;
 function PaneLink({ item, onNavigate, pending, href }) {
-  const styles = useStyles15();
+  const styles = useStyles19();
   const address = useRouteAddress(href);
   const handleClick = (event) => {
     const followsInThisView = event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
     address.onClick(event);
     if (followsInThisView) onNavigate?.();
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx51(
     NavItem,
     {
       as: "a",
@@ -8743,11 +10222,11 @@ function PaneLink({ item, onNavigate, pending, href }) {
   );
 }
 function PaneItem({ item, onNavigate, pendingValue }) {
-  const styles = useStyles15();
+  const styles = useStyles19();
   if (item.href !== void 0) {
-    return /* @__PURE__ */ jsx42(PaneLink, { href: item.href, item, onNavigate, pending: pendingValue === item.value });
+    return /* @__PURE__ */ jsx51(PaneLink, { href: item.href, item, onNavigate, pending: pendingValue === item.value });
   }
-  return /* @__PURE__ */ jsx42(NavItem, { className: styles.item, "data-nav-value": item.value, icon: item.icon, value: item.value, children: item.label });
+  return /* @__PURE__ */ jsx51(NavItem, { className: styles.item, "data-nav-value": item.value, icon: item.icon, value: item.value, children: item.label });
 }
 function NavigationPane({
   closeLabel = "Close navigation",
@@ -8760,10 +10239,10 @@ function NavigationPane({
   pendingValue,
   selectedValue
 }) {
-  const bodyRef = useRef11(null);
-  const footerRef = useRef11(null);
+  const bodyRef = useRef14(null);
+  const footerRef = useRef14(null);
   const allItems = [...groups.flatMap((group) => group.items), ...footerItems];
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs27(
     NavDrawer,
     {
       "aria-label": label,
@@ -8778,21 +10257,21 @@ function NavigationPane({
       surfaceMotion: null,
       type: "inline",
       children: [
-        /* @__PURE__ */ jsx42(NavDrawerHeader, { className: "!bg-transparent !px-5 !py-4", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center min-h-10", children: [
+        /* @__PURE__ */ jsx51(NavDrawerHeader, { className: "!bg-transparent !px-5 !py-4", children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center min-h-10", children: [
           header,
-          !onNavigate && headerActions !== void 0 && /* @__PURE__ */ jsx42("div", { className: "ml-auto flex items-center gap-2", children: headerActions }),
-          onNavigate && /* @__PURE__ */ jsx42(Button9, { appearance: "subtle", "aria-label": closeLabel, className: "!ml-auto", icon: /* @__PURE__ */ jsx42(DismissRegular3, {}), onClick: onNavigate })
+          !onNavigate && headerActions !== void 0 && /* @__PURE__ */ jsx51("div", { className: "ml-auto flex items-center gap-2", children: headerActions }),
+          onNavigate && /* @__PURE__ */ jsx51(Button13, { appearance: "subtle", "aria-label": closeLabel, className: "!ml-auto", icon: /* @__PURE__ */ jsx51(DismissRegular4, {}), onClick: onNavigate })
         ] }) }),
-        /* @__PURE__ */ jsx42(NavDrawerBody, { className: "!bg-transparent overflow-hidden !p-0", children: /* @__PURE__ */ jsx42(ScrollArea, { axes: "vertical", className: "h-full min-h-0", contentClassName: "px-[10px]", noTabIndex: true, children: /* @__PURE__ */ jsxs19("div", { className: "relative", ref: bodyRef, children: [
-          /* @__PURE__ */ jsx42(NavSelectionIndicator, { containerRef: bodyRef, inset: NAV_INDICATOR_INSET, otherListIs: "below", selectedValue }),
-          groups.map((group, groupIndex) => group.items.length === 0 ? null : /* @__PURE__ */ jsxs19("div", { children: [
-            group.label !== void 0 && /* @__PURE__ */ jsx42(NavSectionHeader, { children: group.label }),
-            /* @__PURE__ */ jsx42("div", { className: "grid gap-1", children: group.items.map((item) => /* @__PURE__ */ jsx42(PaneItem, { item, onNavigate, pendingValue }, item.value)) })
+        /* @__PURE__ */ jsx51(NavDrawerBody, { className: "!bg-transparent overflow-hidden !p-0", children: /* @__PURE__ */ jsx51(ScrollArea, { axes: "vertical", className: "h-full min-h-0", contentClassName: "px-[10px]", noTabIndex: true, children: /* @__PURE__ */ jsxs27("div", { className: "relative", ref: bodyRef, children: [
+          /* @__PURE__ */ jsx51(NavSelectionIndicator, { containerRef: bodyRef, inset: NAV_INDICATOR_INSET, otherListIs: "below", selectedValue }),
+          groups.map((group, groupIndex) => group.items.length === 0 ? null : /* @__PURE__ */ jsxs27("div", { children: [
+            group.label !== void 0 && /* @__PURE__ */ jsx51(NavSectionHeader, { children: group.label }),
+            /* @__PURE__ */ jsx51("div", { className: "grid gap-1", children: group.items.map((item) => /* @__PURE__ */ jsx51(PaneItem, { item, onNavigate, pendingValue }, item.value)) })
           ] }, groupIndex))
         ] }) }) }),
-        footerItems.length > 0 && /* @__PURE__ */ jsx42(NavDrawerFooter, { className: "!bg-transparent !gap-y-1 !px-[10px] !py-3", children: /* @__PURE__ */ jsxs19("div", { className: "grid gap-y-1 relative w-full", ref: footerRef, children: [
-          /* @__PURE__ */ jsx42(NavSelectionIndicator, { containerRef: footerRef, inset: NAV_INDICATOR_INSET, otherListIs: "above", selectedValue }),
-          footerItems.map((item) => /* @__PURE__ */ jsx42(PaneItem, { item, onNavigate, pendingValue }, item.value))
+        footerItems.length > 0 && /* @__PURE__ */ jsx51(NavDrawerFooter, { className: "!bg-transparent !gap-y-1 !px-[10px] !py-3", children: /* @__PURE__ */ jsxs27("div", { className: "grid gap-y-1 relative w-full", ref: footerRef, children: [
+          /* @__PURE__ */ jsx51(NavSelectionIndicator, { containerRef: footerRef, inset: NAV_INDICATOR_INSET, otherListIs: "above", selectedValue }),
+          footerItems.map((item) => /* @__PURE__ */ jsx51(PaneItem, { item, onNavigate, pendingValue }, item.value))
         ] }) })
       ]
     }
@@ -8800,9 +10279,9 @@ function NavigationPane({
 }
 
 // src/shell/navigation-progress.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function NavigationProgress({ active }) {
-  return /* @__PURE__ */ jsx43("div", { "aria-hidden": "true", className: "fwt-navigation-progress", "data-active": active });
+  return /* @__PURE__ */ jsx52("div", { "aria-hidden": "true", className: "fwt-navigation-progress", "data-active": active });
 }
 export {
   AppLoadingScreen,
@@ -8823,8 +10302,11 @@ export {
   CodeBlock,
   Combobox,
   ConfirmDialog,
+  ConfirmDialogProvider,
+  ConfirmFlyout,
   ContentLoadingScreen,
   DashboardPageHeader,
+  DataTable,
   DialogShell,
   Dropdown,
   EXPAND_ANIMATION_MS,
@@ -8832,6 +10314,8 @@ export {
   EmptyStateLine,
   ErrorShell,
   ErrorStack,
+  FileDropZone,
+  FilePickerButton,
   GradientBackground,
   HEADER_ROW_CLASS,
   HttpMethodBadge,
@@ -8843,10 +10327,13 @@ export {
   Input,
   LISTBOX_POSITIONING,
   MaskedIcon,
+  Metric,
+  MetricGrid,
   MultiselectCombobox,
   NavSelectionIndicator,
   NavigationPane,
   NavigationProgress,
+  NumberBox,
   OpenLinkLabel,
   OutcomeMessageBar,
   OutcomeToastProvider,
@@ -8869,8 +10356,10 @@ export {
   POPUP_SLIDE_EASING,
   POPUP_SLIDE_MS,
   POP_IN_OFFSET_PX,
+  Pager,
   Panel,
   ProgressRing,
+  PropertyList,
   REPOSITION_ANIMATION_MS,
   REPOSITION_DELETE_DELAY_MS,
   REPOSITION_EASING,
@@ -8895,6 +10384,7 @@ export {
   THEME_MODE_ATTRIBUTE,
   TIGHT_STACK_CLASS,
   TWO_COLUMN_FORM_CLASS,
+  TabView,
   TableActions,
   TableCentredCell,
   TableCentredHeader,
@@ -8908,21 +10398,32 @@ export {
   WinuiStringsProvider,
   applyThemeMode,
   baseFontStack,
+  clampNumber,
   copyOutcomeIcon,
   copyToClipboard,
   fluentComponents,
+  formatFileSize,
+  formatMetricValue,
   infoLabelSlot,
+  matchesAccept,
   monospaceStack,
   moveItem,
   pageFrameClassName,
+  pagerPageCount,
+  pagerPageWindow,
+  parseNumberText,
   progressIndeterminateCss,
   refuseToggle,
+  resolveNumberChange,
   resolveThemeMode,
+  stepPrecision,
   stopRowSelection,
   useBadgeHue,
+  useConfirm,
   useCopyLabel,
   useCopyToClipboard,
   useDangerActionClasses,
+  useDangerFillClass,
   useDangerTextClass,
   useDialogInvocation,
   useDiscardGuard,
@@ -8931,6 +10432,7 @@ export {
   useReorderList,
   useRouteAddress,
   useScrollAreaHost,
+  useToast,
   useTruncation,
   useWinuiTheme,
   valuesAsOptions,