@buoy-gg/network 7.0.14 → 7.0.16

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

@@ -0,0 +1,939 @@
+"use strict";
+
+/**
+ * NetworkOverrideEditor.web — DOM twin of NetworkOverrideEditor.tsx.
+ *
+ * The rule form — one decision, everything else out of the way. Same shape as
+ * native: a collapsed "Applies to" disclosure (URL pattern + method chips),
+ * the OUTCOME grid (kind + status + failKind folded into one list), the
+ * collapsed "Response body" disclosure (the response-editor Explorer tree, or
+ * the empty "Edit all" paste buffer), always-visible Delay and Fires rows,
+ * the top-pinned NetworkNumberPrompt for custom numbers, and the
+ * Cancel/Save footer (Save disabled until a URL pattern exists).
+ *
+ * REUSED, not forked (all platform-free): `OverrideRuleDraft`,
+ * `STATUS_MIN`/`STATUS_MAX`, `ResponseEditorContext` — plus the response
+ * tree itself via the Explorer DOM twin (which reuses the pure nested-data
+ * ops).
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *
+ * Intentional deviations (all logged):
+ *  - `useSafeAreaInsets` is not ported: `applySafeAreaInset` is accepted for
+ *    API compatibility and ignored — a floating web panel (and a desktop
+ *    window) has no home indicator to clear, the exact case native gates OFF.
+ *  - `keyboardShouldPersistTaps` is a RN-keyboard concern with no DOM
+ *    equivalent.
+ *
+ * @platform React DOM Web
+ */
+
+import { useMemo, useState } from "react";
+import Explorer from "./response-editor/Explorer.web";
+import { ResponseEditorContext } from "./response-editor/editorContext";
+import { NetworkNumberPrompt } from "./NetworkNumberPrompt.web";
+import { STATUS_MAX, STATUS_MIN } from "../overrides/types";
+
+// =============================
+// Native palette (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    base: "#0A0A0C",
+    card: "#1A1A1C",
+    input: "#26262A"
+  },
+  border: {
+    default: "#2D2D2F",
+    input: "#3D3D42"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93"
+  },
+  semantic: {
+    error: "#FF453A",
+    info: "#00B8E6"
+  }
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flexShrink: 0,
+      display: "block"
+    },
+    children: children
+  });
+}
+const ChevronDown = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m6 9 6 6 6-6"
+  })
+});
+const ChevronRight = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m9 18 6-6-6-6"
+  })
+});
+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 — the
+ * OUTCOMES list, native verbatim (plain-language name AND status code).
+ */
+
+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("button", {
+    type: "button",
+    onClick: onPress,
+    "aria-label": `${outcome.label}${outcome.code ? ` ${outcome.code}` : ""}`,
+    "aria-pressed": active,
+    style: {
+      ...styles.outcome,
+      ...(active ? {
+        border: `1px solid ${accent}`,
+        backgroundColor: `${accent}1F`
+      } : null)
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      style: {
+        ...styles.outcomeLabel,
+        ...(active ? {
+          color: accent
+        } : null)
+      },
+      children: outcome.label
+    }), outcome.code ? /*#__PURE__*/_jsx("span", {
+      style: {
+        ...styles.outcomeCode,
+        ...(active ? {
+          color: accent
+        } : null)
+      },
+      children: outcome.code
+    }) : null]
+  });
+}
+
+/** A collapsed row that opens to reveal its controls. */
+function Disclosure({
+  title,
+  summary,
+  open,
+  onToggle,
+  children
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.disclosure,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: onToggle,
+      "aria-expanded": open,
+      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("span", {
+        style: styles.disclosureTitle,
+        children: title
+      }), summary && !open ? /*#__PURE__*/_jsx("span", {
+        style: styles.disclosureSummary,
+        children: summary
+      }) : null]
+    }), open ? /*#__PURE__*/_jsx("div", {
+      style: styles.disclosureBody,
+      children: children
+    }) : null]
+  });
+}
+function Chip({
+  label,
+  active,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    onClick: onPress,
+    "aria-pressed": active,
+    style: {
+      ...styles.chip,
+      ...(active ? styles.chipActive : null)
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      style: {
+        ...styles.chipText,
+        ...(active ? styles.chipTextActive : null)
+      },
+      children: label
+    })
+  });
+}
+export function NetworkOverrideEditor({
+  draft,
+  onChange,
+  onSave,
+  onCancel,
+  saveLabel = "Save",
+  applySafeAreaInset: _applySafeAreaInset = false
+}) {
+  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
+   * (native comment: you only reach for this to REPLACE the whole thing, and
+   * starting empty means paste-and-go).
+   */
+  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 — an override body can be large.
+   */
+  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("div", {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx("div", {
+      style: styles.scroll,
+      children: /*#__PURE__*/_jsxs("div", {
+        style: styles.scrollContent,
+        children: [/*#__PURE__*/_jsxs(Disclosure, {
+          title: "Applies to",
+          summary: scopeSummary,
+          open: scopeOpen,
+          onToggle: () => setScopeOpen(v => !v),
+          children: [/*#__PURE__*/_jsx("textarea", {
+            style: styles.input,
+            value: draft.urlPattern,
+            onChange: e => patch({
+              urlPattern: e.target.value
+            }),
+            placeholder: "https://api.example.com/v1/users*",
+            autoCapitalize: "none",
+            autoCorrect: "off",
+            spellCheck: false,
+            rows: 2,
+            "aria-label": "URL pattern"
+          }), /*#__PURE__*/_jsxs("div", {
+            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("div", {
+          style: styles.outcomeGrid,
+          children: [OUTCOMES.map(outcome => /*#__PURE__*/_jsx(OutcomeChip, {
+            outcome: outcome,
+            active: activeOutcome === outcome.id,
+            onPress: () => patch(outcome.patch)
+          }, outcome.id)), /*#__PURE__*/_jsx("button", {
+            type: "button",
+            onClick: () => setPrompt("status"),
+            "aria-label": "Custom status code",
+            style: {
+              ...styles.customField,
+              ...(customStatusActive ? styles.customFieldActive : null)
+            },
+            children: /*#__PURE__*/_jsx("span", {
+              style: {
+                ...styles.customValue,
+                ...(customStatusActive ? styles.customInputActive : null)
+              },
+              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("textarea", {
+              style: {
+                ...styles.input,
+                ...styles.bodyInput
+              },
+              value: pasteText,
+              onChange: e => setPasteText(e.target.value),
+              placeholder: "Paste a new body\u2026",
+              autoCapitalize: "none",
+              autoCorrect: "off",
+              spellCheck: false,
+              autoFocus: true,
+              "aria-label": "New response body"
+            }), /*#__PURE__*/_jsxs("div", {
+              style: styles.inlineActions,
+              children: [/*#__PURE__*/_jsx("button", {
+                type: "button",
+                onClick: () => setPasteText(null),
+                style: styles.textButton,
+                children: /*#__PURE__*/_jsx("span", {
+                  style: styles.textButtonMuted,
+                  children: "Cancel"
+                })
+              }), /*#__PURE__*/_jsx("button", {
+                type: "button",
+                onClick: () => {
+                  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(),
+                style: styles.textButton,
+                children: /*#__PURE__*/_jsx("span", {
+                  style: {
+                    ...styles.textButtonLabel,
+                    ...(!pasteText.trim() ? styles.textButtonDisabled : null)
+                  },
+                  children: "Replace"
+                })
+              })]
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [parsedBody !== null ?
+            /*#__PURE__*/
+            /* The SAME tree as the request detail — type into 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("span", {
+              style: styles.emptyBody,
+              children: bodyIsNonJsonText ? "This body isn't JSON, so there's no tree to show." : "No body yet."
+            }), /*#__PURE__*/_jsx("button", {
+              type: "button",
+              onClick: () => setPasteText(""),
+              style: styles.textButton,
+              children: /*#__PURE__*/_jsx("span", {
+                style: styles.textButtonLabel,
+                children: "Edit all"
+              })
+            })]
+          })
+        }) : null, /*#__PURE__*/_jsxs("div", {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx("span", {
+            style: styles.subLabel,
+            children: "Delay"
+          }), /*#__PURE__*/_jsxs("div", {
+            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("button", {
+              type: "button",
+              onClick: () => setPrompt("delay"),
+              "aria-label": "Custom delay in seconds",
+              style: {
+                ...styles.customField,
+                ...(customDelayActive ? styles.customFieldActive : null)
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                style: {
+                  ...styles.customValue,
+                  ...(customDelayActive ? styles.customInputActive : null)
+                },
+                children: customDelayActive ? `${delayMs / 1000}s` : "Custom"
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx("span", {
+            style: styles.subLabel,
+            children: "Fires"
+          }), /*#__PURE__*/_jsx("span", {
+            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("div", {
+            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("button", {
+              type: "button",
+              onClick: () => {
+                patch({
+                  alternate: false
+                });
+                setPrompt("times");
+              },
+              "aria-label": "Custom number of times",
+              style: {
+                ...styles.customField,
+                ...(customTimesActive ? styles.customFieldActive : null)
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                style: {
+                  ...styles.customValue,
+                  ...(customTimesActive ? styles.customInputActive : null)
+                },
+                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("div", {
+      style: styles.footer,
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: onCancel,
+        style: {
+          ...styles.footerButton,
+          ...styles.cancelButton
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          style: styles.cancelText,
+          children: "Cancel"
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: onSave,
+        disabled: !draft.urlPattern.trim(),
+        style: {
+          ...styles.footerButton,
+          ...styles.saveButton,
+          ...(!draft.urlPattern.trim() ? styles.saveButtonDisabled : null)
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          style: styles.saveText,
+          children: saveLabel
+        })
+      })]
+    })]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  root: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0
+  },
+  scroll: {
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto"
+  },
+  scrollContent: {
+    padding: "12px 12px 24px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: "6px 0"
+  },
+  outcomeGrid: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    padding: "10px 0"
+  },
+  outcome: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "9px 10px",
+    borderRadius: 6,
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.card,
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  outcomeLabel: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: macOSColors.text.primary
+  },
+  outcomeCode: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: macOSColors.text.muted
+  },
+  disclosure: {
+    borderRadius: 6,
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.card,
+    overflow: "hidden"
+  },
+  disclosureHeader: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: "10px 10px",
+    width: "100%",
+    boxSizing: "border-box",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0,
+    textAlign: "left",
+    font: "inherit"
+  },
+  disclosureTitle: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: macOSColors.text.primary,
+    whiteSpace: "nowrap"
+  },
+  disclosureSummary: {
+    flex: 1,
+    minWidth: 0,
+    textAlign: "right",
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  disclosureBody: {
+    padding: "0 10px 10px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  input: {
+    backgroundColor: macOSColors.background.input,
+    border: `1px solid ${macOSColors.border.input}`,
+    borderRadius: 6,
+    padding: "8px 10px",
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontFamily: "ui-monospace, Menlo, monospace",
+    minHeight: 40,
+    outline: "none",
+    resize: "vertical",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  bodyInput: {
+    minHeight: 140
+  },
+  chipRow: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6
+  },
+  chip: {
+    padding: "6px 10px",
+    borderRadius: 5,
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.base,
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  chipActive: {
+    border: `1px solid ${macOSColors.semantic.info}`,
+    backgroundColor: `${macOSColors.semantic.info}1F`
+  },
+  chipText: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: macOSColors.text.secondary
+  },
+  chipTextActive: {
+    color: macOSColors.semantic.info
+  },
+  customField: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: "0 8px",
+    borderRadius: 5,
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.base,
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  customFieldActive: {
+    border: `1px solid ${macOSColors.semantic.info}`,
+    backgroundColor: `${macOSColors.semantic.info}1F`
+  },
+  customValue: {
+    padding: "6px 0",
+    fontSize: 11,
+    fontWeight: 600,
+    color: macOSColors.text.secondary
+  },
+  customInputActive: {
+    color: macOSColors.semantic.info
+  },
+  subHint: {
+    fontSize: 10,
+    lineHeight: "14px",
+    color: macOSColors.text.muted,
+    marginTop: -2
+  },
+  subLabel: {
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: 0.6,
+    color: macOSColors.text.muted,
+    textTransform: "uppercase"
+  },
+  textButton: {
+    alignSelf: "flex-start",
+    padding: "4px 0",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0
+  },
+  textButtonLabel: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: macOSColors.semantic.info
+  },
+  textButtonMuted: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: macOSColors.text.secondary
+  },
+  textButtonDisabled: {
+    opacity: 0.4
+  },
+  inlineActions: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  emptyBody: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    padding: "6px 0"
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8,
+    padding: 12,
+    borderTop: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.base
+  },
+  footerButton: {
+    flex: 1,
+    padding: "11px 0",
+    borderRadius: 6,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  cancelButton: {
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.card
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: macOSColors.text.secondary
+  },
+  saveButton: {
+    border: `1px solid ${macOSColors.semantic.info}`,
+    backgroundColor: `${macOSColors.semantic.info}22`
+  },
+  saveButtonDisabled: {
+    opacity: 0.4,
+    cursor: "default"
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: 700,
+    color: macOSColors.semantic.info
+  }
+};