@buoy-gg/network 7.0.12 → 7.0.14

package/lib/module/network/components/NetworkOverrideEditor.js

@@ -0,0 +1,794 @@
+"use strict";
+
+import { useMemo, useState } from "react";
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { ChevronDown, ChevronRight, macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import Explorer from "./response-editor/Explorer";
+import { ResponseEditorContext } from "./response-editor/editorContext";
+import { NetworkNumberPrompt } from "./NetworkNumberPrompt";
+import { STATUS_MAX, STATUS_MIN } from "../overrides/types";
+
+/**
+ * The rule form — one decision, everything else out of the way.
+ *
+ * It used to ask for six things at equal weight (URL, method, kind, status,
+ * body, lifetime) with three paragraphs of hint text explaining them. That's a
+ * form, not a tool, and the hints were the tell: a control that needs a
+ * paragraph is the wrong control.
+ *
+ * Two things fixed it.
+ *
+ * FIRST, `kind` is gone from the UI. `respond | fail | delay` is our data
+ * model, not the developer's — nobody thinks "kind=respond, status=500", they
+ * think "make it a 500" or "make it go offline". Folding kind + status +
+ * failKind into a single OUTCOME list removes a section, a paragraph, and an
+ * entire concept, and every option now says what it does without being
+ * explained.
+ *
+ * SECOND, everything that arrives already correct is collapsed. A rule made
+ * from a real request knows its URL and method, so those become one summary
+ * line you can open if you need it. The body is prefilled and usually edited in
+ * the response tree instead, so it collapses too. What's left on arrival is the
+ * question actually being asked.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"];
+const DELAY_PRESETS = [0, 500, 1000, 3000, 10000];
+
+/**
+ * The single decision, ordered by how often a developer reaches for it.
+ *
+ * Each carries a plain-language name AND its status code: scanning for "the
+ * auth one" shouldn't require knowing that 401 is unauthorized, and someone who
+ * does know should be able to find 401 without reading labels.
+ */
+
+const OUTCOMES = [{
+  id: "500",
+  label: "Server error",
+  code: "500",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 500,
+    statusText: "Internal Server Error"
+  }
+}, {
+  id: "401",
+  label: "Unauthorized",
+  code: "401",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 401,
+    statusText: "Unauthorized"
+  }
+}, {
+  id: "404",
+  label: "Not found",
+  code: "404",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 404,
+    statusText: "Not Found"
+  }
+}, {
+  id: "403",
+  label: "Forbidden",
+  code: "403",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 403,
+    statusText: "Forbidden"
+  }
+}, {
+  id: "429",
+  label: "Rate limited",
+  code: "429",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 429,
+    statusText: "Too Many Requests"
+  }
+}, {
+  id: "503",
+  label: "Unavailable",
+  code: "503",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 503,
+    statusText: "Service Unavailable"
+  }
+}, {
+  id: "400",
+  label: "Bad request",
+  code: "400",
+  danger: true,
+  patch: {
+    kind: "respond",
+    status: 400,
+    statusText: "Bad Request"
+  }
+}, {
+  id: "200",
+  label: "Success",
+  code: "200",
+  patch: {
+    kind: "respond",
+    status: 200,
+    statusText: "OK"
+  }
+}, {
+  id: "offline",
+  label: "Offline",
+  danger: true,
+  patch: {
+    kind: "fail",
+    failKind: "network"
+  }
+}, {
+  id: "timeout",
+  label: "Timeout",
+  danger: true,
+  patch: {
+    kind: "fail",
+    failKind: "timeout"
+  }
+}, {
+  id: "passthrough",
+  label: "Real response",
+  patch: {
+    kind: "delay"
+  }
+}];
+function outcomeIdFor(draft) {
+  if (draft.kind === "delay") return "passthrough";
+  if (draft.kind === "fail") {
+    return draft.failKind === "timeout" ? "timeout" : "offline";
+  }
+  return String(draft.status ?? 200);
+}
+function OutcomeChip({
+  outcome,
+  active,
+  onPress
+}) {
+  const accent = outcome.danger ? macOSColors.semantic.error : macOSColors.semantic.info;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore override outcome",
+    accessibilityLabel: `${outcome.label}${outcome.code ? ` ${outcome.code}` : ""}`,
+    style: [styles.outcome, active && {
+      borderColor: accent,
+      backgroundColor: `${accent}1F`
+    }],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.outcomeLabel, active && {
+        color: accent
+      }],
+      children: outcome.label
+    }), outcome.code ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.outcomeCode, active && {
+        color: accent
+      }],
+      children: outcome.code
+    }) : null]
+  });
+}
+
+/** A collapsed row that opens to reveal its controls. */
+function Disclosure({
+  title,
+  summary,
+  open,
+  onToggle,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.disclosure,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: onToggle,
+      "sentry-label": "ignore override disclosure",
+      style: styles.disclosureHeader,
+      children: [open ? /*#__PURE__*/_jsx(ChevronDown, {
+        size: 12,
+        color: macOSColors.text.muted
+      }) : /*#__PURE__*/_jsx(ChevronRight, {
+        size: 12,
+        color: macOSColors.text.muted
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.disclosureTitle,
+        children: title
+      }), summary && !open ? /*#__PURE__*/_jsx(Text, {
+        style: styles.disclosureSummary,
+        numberOfLines: 1,
+        children: summary
+      }) : null]
+    }), open ? /*#__PURE__*/_jsx(View, {
+      style: styles.disclosureBody,
+      children: children
+    }) : null]
+  });
+}
+function Chip({
+  label,
+  active,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onPress,
+    "sentry-label": "ignore override chip",
+    style: [styles.chip, active && styles.chipActive],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.chipText, active && styles.chipTextActive],
+      children: label
+    })
+  });
+}
+export function NetworkOverrideEditor({
+  draft,
+  onChange,
+  onSave,
+  onCancel,
+  saveLabel = "Save",
+  applySafeAreaInset = false
+}) {
+  // `minBottom` is a floor, not a preference: the dimension map can't know
+  // about a device that ships next year, and an unmapped one falls through to
+  // `bottom: 0`. This guarantees the buttons clear the indicator either way.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
+  const patch = next => onChange({
+    ...draft,
+    ...next
+  });
+
+  // A rule made from a request arrives with its scope already right, so it
+  // starts closed. A blank one has nothing to match on yet, so it starts open.
+  const [scopeOpen, setScopeOpen] = useState(!draft.urlPattern.trim());
+  const [bodyOpen, setBodyOpen] = useState(false);
+  /**
+   * The "Edit all" buffer — deliberately NOT seeded with the current body.
+   *
+   * Prefilling it would be the obvious thing and it's wrong twice over: a real
+   * response is routinely hundreds of KB, which a multiline TextInput handles
+   * badly, and you only reach for this when you intend to REPLACE the whole
+   * thing anyway. Starting empty means paste-and-go instead of select-all-
+   * delete-paste on a field that's fighting you.
+   */
+  const [pasteText, setPasteText] = useState(null);
+  /** Which custom number the top-of-screen prompt is asking for, if any. */
+  const [prompt, setPrompt] = useState(null);
+  const activeOutcome = outcomeIdFor(draft);
+  /** True when the status is a real one that no listed outcome covers. */
+  const customStatusActive = draft.kind === "respond" && typeof draft.status === "number" && !OUTCOMES.some(outcome => outcome.code === String(draft.status));
+  const showsBody = draft.kind === "respond";
+  const method = draft.methods?.[0];
+  const scopeSummary = `${method ?? "Any"}  ${draft.urlPattern || "No URL yet"}`;
+  const bodySummary = useMemo(() => {
+    const body = (draft.body ?? "").trim();
+    if (!body) return "Empty";
+    const lines = body.split("\n").length;
+    return `${lines} line${lines === 1 ? "" : "s"}`;
+  }, [draft.body]);
+
+  /**
+   * The body as a tree, or null when it can't be one (empty, or not JSON).
+   *
+   * Memoized on the raw string because an override body can be large and this
+   * would otherwise re-parse on every keystroke elsewhere in the form.
+   */
+  const parsedBody = useMemo(() => {
+    const body = (draft.body ?? "").trim();
+    if (!body) return null;
+    try {
+      return JSON.parse(body);
+    } catch {
+      return null;
+    }
+  }, [draft.body]);
+  const bodyIsNonJsonText = (draft.body ?? "").trim().length > 0 && !parsedBody;
+  const delayMs = draft.delayMs ?? 0;
+  /** Custom fields own the value only when no preset chip already claims it. */
+  const customDelayActive = delayMs > 0 && !DELAY_PRESETS.includes(delayMs);
+  const customTimesActive = !draft.alternate && typeof draft.times === "number" && draft.times !== 1;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsxs(Disclosure, {
+        title: "Applies to",
+        summary: scopeSummary,
+        open: scopeOpen,
+        onToggle: () => setScopeOpen(v => !v),
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          style: styles.input,
+          value: draft.urlPattern,
+          onChangeText: urlPattern => patch({
+            urlPattern
+          }),
+          placeholder: "https://api.example.com/v1/users*",
+          placeholderTextColor: macOSColors.text.muted,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          multiline: true,
+          "sentry-label": "ignore override url pattern"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.chipRow,
+          children: [/*#__PURE__*/_jsx(Chip, {
+            label: "Any",
+            active: !method,
+            onPress: () => patch({
+              methods: undefined
+            })
+          }), METHODS.map(m => /*#__PURE__*/_jsx(Chip, {
+            label: m,
+            active: method === m,
+            onPress: () => patch({
+              methods: [m]
+            })
+          }, m))]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.outcomeGrid,
+        children: [OUTCOMES.map(outcome => /*#__PURE__*/_jsx(OutcomeChip, {
+          outcome: outcome,
+          active: activeOutcome === outcome.id,
+          onPress: () => patch(outcome.patch)
+        }, outcome.id)), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setPrompt("status"),
+          "sentry-label": "ignore custom status",
+          accessibilityLabel: "Custom status code",
+          style: [styles.customField, customStatusActive && styles.customFieldActive],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.customValue, customStatusActive && styles.customInputActive],
+            children: customStatusActive ? String(draft.status) : "Custom"
+          })
+        })]
+      }), showsBody ? /*#__PURE__*/_jsx(Disclosure, {
+        title: "Response body",
+        summary: bodySummary,
+        open: bodyOpen,
+        onToggle: () => setBodyOpen(v => !v),
+        children: pasteText !== null ?
+        /*#__PURE__*/
+        /* Replace-the-whole-thing mode. Starts empty — see `pasteText`. */
+        _jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextInput, {
+            style: [styles.input, styles.bodyInput],
+            value: pasteText,
+            onChangeText: setPasteText,
+            placeholder: "Paste a new body\u2026",
+            placeholderTextColor: macOSColors.text.muted,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            autoFocus: true,
+            multiline: true,
+            "sentry-label": "ignore override body paste"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.inlineActions,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setPasteText(null),
+              "sentry-label": "ignore cancel body paste",
+              style: styles.textButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.textButtonMuted,
+                children: "Cancel"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                const next = pasteText.trim();
+                // Pretty-print JSON on the way in so the tree it becomes
+                // is readable; anything else is kept exactly as pasted.
+                try {
+                  patch({
+                    body: JSON.stringify(JSON.parse(next), null, 2)
+                  });
+                } catch {
+                  patch({
+                    body: next
+                  });
+                }
+                setPasteText(null);
+              },
+              disabled: !pasteText.trim(),
+              "sentry-label": "ignore apply body paste",
+              style: styles.textButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.textButtonLabel, !pasteText.trim() && styles.textButtonDisabled],
+                children: "Replace"
+              })
+            })]
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [parsedBody !== null ?
+          /*#__PURE__*/
+          /* The SAME tree as the request detail — tap a value to edit
+             it. Editing writes the whole document back as the rule's
+             body, so the two surfaces behave identically. */
+          _jsx(ResponseEditorContext.Provider, {
+            value: {
+              root: parsedBody,
+              onChange: next => patch({
+                body: JSON.stringify(next, null, 2)
+              })
+            },
+            children: /*#__PURE__*/_jsx(Explorer, {
+              editable: true,
+              label: "",
+              value: parsedBody,
+              defaultExpanded: [""]
+            })
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyBody,
+            children: bodyIsNonJsonText ? "This body isn't JSON, so there's no tree to show." : "No body yet."
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setPasteText(""),
+            "sentry-label": "ignore edit all body",
+            style: styles.textButton,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.textButtonLabel,
+              children: "Edit all"
+            })
+          })]
+        })
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.field,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.subLabel,
+          children: "Delay"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.chipRow,
+          children: [DELAY_PRESETS.map(ms => /*#__PURE__*/_jsx(Chip, {
+            label: ms === 0 ? "None" : `${ms / 1000}s`,
+            active: delayMs === ms,
+            onPress: () => patch({
+              delayMs: ms
+            })
+          }, ms)), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setPrompt("delay"),
+            "sentry-label": "ignore custom delay",
+            accessibilityLabel: "Custom delay in seconds",
+            style: [styles.customField, customDelayActive && styles.customFieldActive],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.customValue, customDelayActive && styles.customInputActive],
+              children: customDelayActive ? `${delayMs / 1000}s` : "Custom"
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.field,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.subLabel,
+          children: "Fires"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.subHint,
+          children: "A limited rule switches itself off once it's used up. Every other alternates forever \u2014 the first request through, the next overridden."
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.chipRow,
+          children: [/*#__PURE__*/_jsx(Chip, {
+            label: "Always",
+            active: !draft.alternate && draft.times == null,
+            onPress: () => patch({
+              alternate: false,
+              times: null
+            })
+          }), /*#__PURE__*/_jsx(Chip, {
+            label: "Once",
+            active: !draft.alternate && draft.times === 1,
+            onPress: () => patch({
+              alternate: false,
+              times: 1
+            })
+          }), /*#__PURE__*/_jsx(Chip, {
+            label: "Every other",
+            active: draft.alternate === true,
+            onPress: () => patch({
+              alternate: true,
+              times: null
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              patch({
+                alternate: false
+              });
+              setPrompt("times");
+            },
+            "sentry-label": "ignore custom times",
+            accessibilityLabel: "Custom number of times",
+            style: [styles.customField, customTimesActive && styles.customFieldActive],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.customValue, customTimesActive && styles.customInputActive],
+              children: customTimesActive ? `${draft.times}×` : "Custom"
+            })
+          })]
+        })]
+      })]
+    }), prompt === "status" ? /*#__PURE__*/_jsx(NetworkNumberPrompt, {
+      title: "Custom status code",
+      hint: `${STATUS_MIN}–${STATUS_MAX}`,
+      value: customStatusActive ? draft.status : undefined,
+      min: STATUS_MIN,
+      max: STATUS_MAX,
+      onSubmit: next => {
+        patch({
+          kind: "respond",
+          status: next ?? undefined,
+          statusText: undefined
+        });
+        setPrompt(null);
+      },
+      onCancel: () => setPrompt(null)
+    }) : null, prompt === "delay" ? /*#__PURE__*/_jsx(NetworkNumberPrompt, {
+      title: "Custom delay",
+      hint: "Seconds",
+      value: customDelayActive ? delayMs / 1000 : undefined,
+      min: 0,
+      onSubmit: next => {
+        patch({
+          delayMs: next != null ? Math.round(next * 1000) : 0
+        });
+        setPrompt(null);
+      },
+      onCancel: () => setPrompt(null)
+    }) : null, prompt === "times" ? /*#__PURE__*/_jsx(NetworkNumberPrompt, {
+      title: "Fires how many times",
+      hint: "Leave empty for always",
+      value: customTimesActive ? draft.times : undefined,
+      min: 1,
+      onSubmit: next => {
+        // Empty or zero means "no limit" rather than a rule that is spent
+        // before it ever fires.
+        patch({
+          alternate: false,
+          times: next && next > 0 ? next : null
+        });
+        setPrompt(null);
+      },
+      onCancel: () => setPrompt(null)
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.footer, {
+        paddingBottom: 12 + bottomInset
+      }],
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onCancel,
+        "sentry-label": "ignore cancel override",
+        style: [styles.footerButton, styles.cancelButton],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.cancelText,
+          children: "Cancel"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onSave,
+        disabled: !draft.urlPattern.trim(),
+        "sentry-label": "ignore save override",
+        style: [styles.footerButton, styles.saveButton, !draft.urlPattern.trim() && styles.saveButtonDisabled],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.saveText,
+          children: saveLabel
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    padding: 12,
+    paddingBottom: 24,
+    gap: 4
+  },
+  field: {
+    gap: 8,
+    paddingVertical: 6
+  },
+  outcomeGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    paddingVertical: 10
+  },
+  outcome: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 9,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
+  outcomeLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  outcomeCode: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: macOSColors.text.muted
+  },
+  disclosure: {
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card,
+    overflow: "hidden"
+  },
+  disclosureHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 10
+  },
+  disclosureTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary
+  },
+  disclosureSummary: {
+    flex: 1,
+    textAlign: "right",
+    fontSize: 11,
+    color: macOSColors.text.muted
+  },
+  disclosureBody: {
+    paddingHorizontal: 10,
+    paddingBottom: 10,
+    gap: 8
+  },
+  input: {
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontFamily: "monospace",
+    minHeight: 40
+  },
+  bodyInput: {
+    minHeight: 140,
+    textAlignVertical: "top"
+  },
+  chipRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6
+  },
+  chip: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
+  },
+  chipActive: {
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: `${macOSColors.semantic.info}1F`
+  },
+  chipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  chipTextActive: {
+    color: macOSColors.semantic.info
+  },
+  customField: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
+  },
+  customFieldActive: {
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: `${macOSColors.semantic.info}1F`
+  },
+  customValue: {
+    paddingVertical: 6,
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  customInputActive: {
+    color: macOSColors.semantic.info
+  },
+  subHint: {
+    fontSize: 10,
+    lineHeight: 14,
+    color: macOSColors.text.muted,
+    marginTop: -2
+  },
+  subLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.6,
+    color: macOSColors.text.muted,
+    textTransform: "uppercase"
+  },
+  textButton: {
+    alignSelf: "flex-start",
+    paddingVertical: 4
+  },
+  textButtonLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.semantic.info
+  },
+  textButtonMuted: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  textButtonDisabled: {
+    opacity: 0.4
+  },
+  inlineActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  emptyBody: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    paddingVertical: 6
+  },
+  footer: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 12,
+    borderTopWidth: 1,
+    borderTopColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
+  },
+  footerButton: {
+    flex: 1,
+    paddingVertical: 11,
+    borderRadius: 6,
+    alignItems: "center",
+    borderWidth: 1
+  },
+  cancelButton: {
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.secondary
+  },
+  saveButton: {
+    borderColor: macOSColors.semantic.info,
+    backgroundColor: `${macOSColors.semantic.info}22`
+  },
+  saveButtonDisabled: {
+    opacity: 0.4
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: macOSColors.semantic.info
+  }
+});