@lunora/studio 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/packem_chunks/fanout-panel.js

@@ -0,0 +1,482 @@
+import { c } from 'react/compiler-runtime';
+import { useState } from 'react';
+import { E as ErrorAlert } from '../packem_shared/error-alert-CXjqyGw9.js';
+import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.js';
+import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
+import { C as Card } from '../packem_shared/card-DURq3ElK.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
+import { u as useAdminQuery } from '../packem_shared/use-admin-query-CfHYWx5n.js';
+import { useAutoRefresh } from '../packem_shared/DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
+import useDebounced from '../packem_shared/useDebounced-Dxncpg6z.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-BHHJi3Gb.js';
+import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
+
+const formatMs = (ms) => `${ms.toString()} ms`;
+const isFanoutIdle = (result) => result.totalConnections === 0 && result.shapePoke.passes === 0 && result.whisper.passes === 0;
+const StatCard = (t0) => {
+  const $ = c(8);
+  const {
+    label,
+    testId,
+    value
+  } = t0;
+  let t1;
+  if ($[0] !== label) {
+    t1 = /* @__PURE__ */ jsxDEV("span", {
+      className: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+      children: label
+    }, void 0, false);
+    $[0] = label;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== testId || $[3] !== value) {
+    t2 = /* @__PURE__ */ jsxDEV("span", {
+      className: "truncate text-2xl font-semibold tabular-nums text-foreground",
+      "data-testid": testId,
+      children: value
+    }, void 0, false);
+    $[2] = testId;
+    $[3] = value;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = /* @__PURE__ */ jsxDEV(Card, {
+      className: "gap-0 py-0",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-col gap-2.5 p-4",
+        children: [t1, t2]
+      }, void 0, true)
+    }, void 0, false);
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+};
+const PathCounters = (t0) => {
+  const $ = c(48);
+  const {
+    counters,
+    includeTiming,
+    prefix,
+    t,
+    title
+  } = t0;
+  const t1 = `${prefix}-section`;
+  let t2;
+  if ($[0] !== title) {
+    t2 = /* @__PURE__ */ jsxDEV("h3", {
+      className: "text-sm font-medium text-foreground",
+      children: title
+    }, void 0, false);
+    $[0] = title;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = `${prefix}-stats`;
+  let t4;
+  if ($[2] !== t) {
+    t4 = t("Passes");
+    $[2] = t;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const t5 = `${prefix}-passes`;
+  let t6;
+  if ($[4] !== counters.passes || $[5] !== t4 || $[6] !== t5) {
+    t6 = /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t4,
+      testId: t5,
+      value: counters.passes
+    }, void 0, false);
+    $[4] = counters.passes;
+    $[5] = t4;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t) {
+    t7 = t("Sockets iterated");
+    $[8] = t;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  const t8 = `${prefix}-iterated`;
+  let t9;
+  if ($[10] !== counters.socketsIterated || $[11] !== t7 || $[12] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t7,
+      testId: t8,
+      value: counters.socketsIterated
+    }, void 0, false);
+    $[10] = counters.socketsIterated;
+    $[11] = t7;
+    $[12] = t8;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] !== t) {
+    t10 = t("Delivered");
+    $[14] = t;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  const t11 = `${prefix}-delivered`;
+  let t12;
+  if ($[16] !== counters.socketsDelivered || $[17] !== t10 || $[18] !== t11) {
+    t12 = /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t10,
+      testId: t11,
+      value: counters.socketsDelivered
+    }, void 0, false);
+    $[16] = counters.socketsDelivered;
+    $[17] = t10;
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== t) {
+    t13 = t("Peak width");
+    $[20] = t;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  const t14 = `${prefix}-peak`;
+  let t15;
+  if ($[22] !== counters.peakSocketsIterated || $[23] !== t13 || $[24] !== t14) {
+    t15 = /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t13,
+      testId: t14,
+      value: counters.peakSocketsIterated
+    }, void 0, false);
+    $[22] = counters.peakSocketsIterated;
+    $[23] = t13;
+    $[24] = t14;
+    $[25] = t15;
+  } else {
+    t15 = $[25];
+  }
+  let t16;
+  if ($[26] !== counters.totalMs || $[27] !== includeTiming || $[28] !== prefix || $[29] !== t) {
+    t16 = includeTiming && /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t("Total time"),
+      testId: `${prefix}-total-ms`,
+      value: formatMs(counters.totalMs)
+    }, void 0, false);
+    $[26] = counters.totalMs;
+    $[27] = includeTiming;
+    $[28] = prefix;
+    $[29] = t;
+    $[30] = t16;
+  } else {
+    t16 = $[30];
+  }
+  let t17;
+  if ($[31] !== counters.maxMs || $[32] !== includeTiming || $[33] !== prefix || $[34] !== t) {
+    t17 = includeTiming && /* @__PURE__ */ jsxDEV(StatCard, {
+      label: t("Max time"),
+      testId: `${prefix}-max-ms`,
+      value: formatMs(counters.maxMs)
+    }, void 0, false);
+    $[31] = counters.maxMs;
+    $[32] = includeTiming;
+    $[33] = prefix;
+    $[34] = t;
+    $[35] = t17;
+  } else {
+    t17 = $[35];
+  }
+  let t18;
+  if ($[36] !== t12 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t3 || $[41] !== t6 || $[42] !== t9) {
+    t18 = /* @__PURE__ */ jsxDEV("dl", {
+      className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+      "data-testid": t3,
+      children: [t6, t9, t12, t15, t16, t17]
+    }, void 0, true);
+    $[36] = t12;
+    $[37] = t15;
+    $[38] = t16;
+    $[39] = t17;
+    $[40] = t3;
+    $[41] = t6;
+    $[42] = t9;
+    $[43] = t18;
+  } else {
+    t18 = $[43];
+  }
+  let t19;
+  if ($[44] !== t1 || $[45] !== t18 || $[46] !== t2) {
+    t19 = /* @__PURE__ */ jsxDEV("section", {
+      className: "flex flex-col gap-2",
+      "data-testid": t1,
+      children: [t2, t18]
+    }, void 0, true);
+    $[44] = t1;
+    $[45] = t18;
+    $[46] = t2;
+    $[47] = t19;
+  } else {
+    t19 = $[47];
+  }
+  return t19;
+};
+const FanoutPanel = (t0) => {
+  const $ = c(32);
+  const {
+    initialShardKey
+  } = t0;
+  const t = useT();
+  const [shardKey, setShardKey] = useState(initialShardKey ?? "");
+  let t1;
+  if ($[0] !== shardKey) {
+    t1 = shardKey.trim();
+    $[0] = shardKey;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const debouncedShard = useDebounced(t1, 400);
+  let t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {};
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== debouncedShard) {
+    t3 = {
+      keepPreviousData: true,
+      shardKey: debouncedShard
+    };
+    $[3] = debouncedShard;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const {
+    data: result,
+    error,
+    errorSource,
+    refetch
+  } = useAdminQuery(ADMIN_FUNCTIONS.getFanoutMetrics, t2, t3);
+  useAutoRefresh(refetch, true);
+  let t4;
+  if ($[5] !== result) {
+    t4 = result !== void 0 && isFanoutIdle(result);
+    $[5] = result;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const isIdle = t4;
+  let t5;
+  if ($[7] !== shardKey) {
+    t5 = /* @__PURE__ */ jsxDEV(ShardInput, {
+      onChange: setShardKey,
+      testId: "fanout-shard-input",
+      value: shardKey
+    }, void 0, false);
+    $[7] = shardKey;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== result || $[10] !== t) {
+    t6 = result !== void 0 && /* @__PURE__ */ jsxDEV("div", {
+      className: "ml-auto flex items-center gap-2 text-sm text-muted-foreground",
+      "data-testid": "fanout-count",
+      children: [result.promoted && /* @__PURE__ */ jsxDEV(Badge, {
+        "data-testid": "fanout-promoted",
+        variant: result.relayCount >= result.maxRelays ? "destructive" : "default",
+        children: result.relayCount >= result.maxRelays ? t("auto-scaled: {relayCount}/{maxRelays} relays (at ceiling)", {
+          maxRelays: result.maxRelays,
+          relayCount: result.relayCount
+        }) : t("auto-scaled: {relayCount}/{maxRelays} relays", {
+          maxRelays: result.maxRelays,
+          relayCount: result.relayCount
+        })
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "secondary",
+        children: t("{count} connections", {
+          count: result.totalConnections
+        })
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "secondary",
+        children: t("peak {count} subscribers", {
+          count: result.peakSubscribers
+        })
+      }, void 0, false)]
+    }, void 0, true);
+    $[9] = result;
+    $[10] = t;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== t5 || $[13] !== t6) {
+    t7 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [t5, t6]
+    }, void 0, true);
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== error || $[16] !== errorSource) {
+    t8 = error !== null && /* @__PURE__ */ jsxDEV(ErrorAlert, {
+      error: errorSource,
+      testId: "fanout-error"
+    }, void 0, false);
+    $[15] = error;
+    $[16] = errorSource;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== error || $[19] !== isIdle || $[20] !== t) {
+    t9 = error === null && isIdle && /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("Realtime fan-out cost and per-topic subscriber counts for this shard."),
+      icon: /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.6,
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          d: "M4 12h4l3 7 4-14 3 7h2"
+        }, void 0, false)
+      }, void 0, false),
+      testId: "fanout-empty",
+      title: t("No fan-out activity yet.")
+    }, void 0, false);
+    $[18] = error;
+    $[19] = isIdle;
+    $[20] = t;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== error || $[23] !== isIdle || $[24] !== result || $[25] !== t) {
+    t10 = error === null && result !== void 0 && !isIdle && /* @__PURE__ */ jsxDEV(Fragment, {
+      children: [result.topics.length > 0 && /* @__PURE__ */ jsxDEV("section", {
+        className: "flex flex-col gap-2",
+        "data-testid": "fanout-topics-section",
+        children: [/* @__PURE__ */ jsxDEV("h3", {
+          className: "text-sm font-medium text-foreground",
+          children: t("Hot topics")
+        }, void 0, false), /* @__PURE__ */ jsxDEV(Card, {
+          className: "overflow-hidden py-0",
+          children: /* @__PURE__ */ jsxDEV(Table, {
+            "data-testid": "fanout-topics-table",
+            children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+              children: /* @__PURE__ */ jsxDEV(TableRow, {
+                children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("Topic")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  children: t("Kind")
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                  className: "text-right",
+                  children: t("Subscribers")
+                }, void 0, false)]
+              }, void 0, true)
+            }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+              children: result.topics.map(_temp)
+            }, void 0, false)]
+          }, void 0, true)
+        }, void 0, false)]
+      }, void 0, true), /* @__PURE__ */ jsxDEV("section", {
+        className: "flex flex-col gap-3",
+        "data-testid": "fanout-cost",
+        children: [/* @__PURE__ */ jsxDEV("h2", {
+          className: "text-sm font-medium text-muted-foreground",
+          children: t("Fan-out cost since this instance woke")
+        }, void 0, false), /* @__PURE__ */ jsxDEV(PathCounters, {
+          counters: result.shapePoke,
+          includeTiming: true,
+          prefix: "fanout-poke",
+          t,
+          title: t("Shape pokes")
+        }, void 0, false), /* @__PURE__ */ jsxDEV(PathCounters, {
+          counters: result.whisper,
+          includeTiming: false,
+          prefix: "fanout-whisper",
+          t,
+          title: t("Whisper broadcasts")
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true);
+    $[22] = error;
+    $[23] = isIdle;
+    $[24] = result;
+    $[25] = t;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+    t11 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-4",
+      "data-testid": "fanout-panel",
+      children: [t7, t8, t9, t10]
+    }, void 0, true);
+    $[27] = t10;
+    $[28] = t7;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  return t11;
+};
+function _temp(topic) {
+  return /* @__PURE__ */ jsxDEV(TableRow, {
+    "data-testid": "fanout-topic-row",
+    children: [/* @__PURE__ */ jsxDEV(TableCell, {
+      className: "font-mono text-xs",
+      children: topic.topic
+    }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+      children: /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "outline",
+        children: topic.kind
+      }, void 0, false)
+    }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+      className: "text-right font-medium tabular-nums",
+      children: topic.subscribers
+    }, void 0, false)]
+  }, `${topic.kind}:${topic.topic}`, true);
+}
+
+export { FanoutPanel as default };

package/dist/packem_chunks/flags-panel.js

@@ -0,0 +1,176 @@
+import { useState, useMemo } from 'react';
+import { E as ErrorAlert } from '../packem_shared/error-alert-CXjqyGw9.js';
+import { B as Badge } from '../packem_shared/badge-B2PKA1-5.js';
+import { C as Card, a as CardContent } from '../packem_shared/card-DURq3ElK.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { L as Label } from '../packem_shared/label-D8ykjn5J.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
+import { T as Textarea } from '../packem_shared/textarea-D3gaCU_-.js';
+import { u as useAdminQuery } from '../packem_shared/use-admin-query-CfHYWx5n.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-BHHJi3Gb.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const parseContext = (raw) => {
+  const trimmed = raw.trim();
+  if (trimmed.length === 0) {
+    return {
+      context: void 0,
+      error: null
+    };
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {
+        context: void 0,
+        error: "Targeting context must be a JSON object."
+      };
+    }
+    return {
+      context: parsed,
+      error: null
+    };
+  } catch {
+    return {
+      context: void 0,
+      error: "Targeting context is not valid JSON."
+    };
+  }
+};
+const CONTEXT_PLACEHOLDER = '{ "targetingKey": "user-123", "plan": "premium" }';
+const formatValue = (evaluation) => {
+  if (evaluation.type === "object") {
+    return JSON.stringify(evaluation.value);
+  }
+  return String(evaluation.value);
+};
+const FlagsPanel = ({
+  initialShardKey = ""
+}) => {
+  const t = useT();
+  const [contextText, setContextText] = useState("");
+  const {
+    context,
+    error: contextError
+  } = parseContext(contextText);
+  const args = useMemo(() => context === void 0 ? {} : {
+    context
+  }, [context]);
+  const {
+    data,
+    error,
+    errorSource,
+    liveError
+  } = useAdminQuery(ADMIN_FUNCTIONS.listFlags, args, {
+    live: true,
+    shardKey: initialShardKey
+  });
+  const loaded = data !== void 0;
+  const configured = data?.configured ?? false;
+  const flags = useMemo(() => Array.isArray(data?.flags) ? [...data.flags].toSorted((a, b) => a.key.localeCompare(b.key)) : [], [data]);
+  let body;
+  if (loaded && !configured) {
+    body = /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t("No @lunora/flags provider is wired in this deployment. Add lunora/flags.ts with defineFlags({ provider }) to gate code paths on feature flags."),
+      testId: "flags-unconfigured",
+      title: t("No flags provider configured")
+    }, void 0, false);
+  } else if (loaded && flags.length === 0) {
+    body = /* @__PURE__ */ jsxDEV(EmptyState, {
+      description: t('A flags provider is configured, but no handler reads a flag yet. Call ctx.flags.boolean("key", false) in a query, mutation, or action.'),
+      testId: "flags-empty",
+      title: t("No flags read")
+    }, void 0, false);
+  } else {
+    body = /* @__PURE__ */ jsxDEV(Card, {
+      className: "overflow-hidden py-0",
+      children: /* @__PURE__ */ jsxDEV(CardContent, {
+        className: "px-0",
+        children: /* @__PURE__ */ jsxDEV(Table, {
+          "data-testid": "flags-table",
+          children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+            children: /* @__PURE__ */ jsxDEV(TableRow, {
+              children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("Key")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("Type")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("Value")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("Reason")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("Variant")
+              }, void 0, false)]
+            }, void 0, true)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+            children: flags.map((flag) => /* @__PURE__ */ jsxDEV(TableRow, {
+              "data-testid": `flags-row-${flag.key}`,
+              children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs",
+                children: flag.key
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs text-muted-foreground",
+                children: flag.type
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs",
+                children: formatValue(flag)
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                children: flag.errorCode === void 0 ? /* @__PURE__ */ jsxDEV("span", {
+                  className: "font-mono text-xs text-muted-foreground",
+                  children: flag.reason ?? "—"
+                }, void 0, false) : /* @__PURE__ */ jsxDEV(Badge, {
+                  "data-testid": `flags-error-${flag.key}`,
+                  variant: "destructive",
+                  children: flag.errorCode
+                }, void 0, false)
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                className: "font-mono text-xs text-muted-foreground",
+                children: flag.variant ?? "—"
+              }, void 0, false)]
+            }, flag.key, true))
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col gap-6",
+    "data-testid": "lunora-flags-panel",
+    children: [error !== null && /* @__PURE__ */ jsxDEV(ErrorAlert, {
+      error: errorSource,
+      testId: "flags-error"
+    }, void 0, false), /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-muted-foreground",
+      children: t('Feature flags are read in code with ctx.flags.<type>("key", default). They evaluate through the OpenFeature provider configured in lunora/flags.ts; edit the targeting context below to see how each flag resolves for a given audience.')
+    }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-2",
+      children: [/* @__PURE__ */ jsxDEV(Label, {
+        htmlFor: "flags-targeting-context",
+        children: t("Targeting context (JSON)")
+      }, void 0, false), /* @__PURE__ */ jsxDEV(Textarea, {
+        className: "font-mono text-xs",
+        "data-testid": "flags-context-input",
+        id: "flags-targeting-context",
+        onChange: (event) => {
+          setContextText(event.target.value);
+        },
+        placeholder: CONTEXT_PLACEHOLDER,
+        rows: 3,
+        value: contextText
+      }, void 0, false), contextError !== null && /* @__PURE__ */ jsxDEV("p", {
+        className: "text-xs text-destructive",
+        "data-testid": "flags-context-error",
+        role: "alert",
+        children: t(contextError)
+      }, void 0, false), liveError !== void 0 && /* @__PURE__ */ jsxDEV("p", {
+        className: "text-xs text-amber-600 dark:text-amber-500",
+        "data-testid": "flags-live-error",
+        role: "alert",
+        children: t("Live updates unavailable; showing the last evaluation.")
+      }, void 0, false)]
+    }, void 0, true), body]
+  }, void 0, true);
+};
+
+export { FlagsPanel };