@btst/stack 5.0.0 → 5.2.0

package/dist/packages/stack/src/plugins/feature-flags/client/components/pages/edit-flag-page.internal.mjs

@@ -0,0 +1,391 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId, useState } from 'react';
+import { usePluginSiteNavigation, PermissionAccess } from '@btst/stack/context';
+import { featureFlagsPermissions } from '../../../../../../../../plugins/feature-flags/permissions.mjs';
+import { useFlagDefinition, useCreateFlag, useUpdateFlag, useArchiveFlag } from '../../../../../../../../plugins/feature-flags/client/hooks/index.mjs';
+import { FEATURE_FLAGS_PLUGIN_ID } from '../../constants.mjs';
+import { FlagsPage, Field, Rollout } from '../shared.mjs';
+
+function EditFlagPage({ flagKey }) {
+  return flagKey ? /* @__PURE__ */ jsx(ExistingFlag, { flagKey }) : /* @__PURE__ */ jsx(FlagForm, {});
+}
+function ExistingFlag({ flagKey }) {
+  const { data: flag } = useFlagDefinition(flagKey);
+  return /* @__PURE__ */ jsx(FlagForm, { flag }, flagKey);
+}
+function FlagForm({ flag }) {
+  const id = useId();
+  const { Link, resolve, navigate } = usePluginSiteNavigation(
+    FEATURE_FLAGS_PLUGIN_ID
+  );
+  const create = useCreateFlag();
+  const update = useUpdateFlag();
+  const archive = useArchiveFlag();
+  const [name, setName] = useState(flag?.name ?? "");
+  const [key, setKey] = useState(flag?.key ?? "");
+  const [description, setDescription] = useState(flag?.description ?? "");
+  const [type, setType] = useState(
+    flag?.type ?? "boolean"
+  );
+  const [percent, setPercent] = useState(flag?.rolloutPct ?? 0);
+  const [tags, setTags] = useState(flag?.tags.join(", ") ?? "");
+  const [enabled, setEnabled] = useState(flag?.enabled ?? false);
+  const [rules, setRules] = useState(
+    () => (flag?.segments ?? []).map((rule, index) => ({
+      ...rule,
+      id: String(index),
+      text: Array.isArray(rule.value) ? rule.value.join(", ") : rule.value
+    }))
+  );
+  const [nextRule, setNextRule] = useState(rules.length);
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [confirmArchive, setConfirmArchive] = useState(false);
+  const pending = create.isPending || update.isPending || archive.isPending;
+  const readOnly = !!flag?.archivedAt;
+  const listPath = resolve("feature-flags").href;
+  const split = (value) => [
+    ...new Set(
+      value.split(",").map((item) => item.trim()).filter(Boolean)
+    )
+  ];
+  const save = async (event) => {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+    if (type === "segment" && !rules.length) {
+      setError("Add at least one targeting rule.");
+      return;
+    }
+    const segments = rules.map((rule) => ({
+      field: rule.field,
+      operator: rule.operator,
+      value: rule.operator === "in" ? split(rule.text) : rule.text.trim()
+    }));
+    const data = {
+      key,
+      name,
+      description,
+      type,
+      rolloutPct: type === "rollout" ? percent : null,
+      segments: type === "segment" ? segments : [],
+      tags: split(tags),
+      ...flag ? {} : { enabled }
+    };
+    try {
+      if (flag) {
+        const { key: _key, ...patch } = data;
+        await update.mutateAsync({ key: flag.key, data: patch });
+        setMessage("Flag saved");
+      } else {
+        await create.mutateAsync(data);
+        await navigate("feature-flags");
+      }
+    } catch (caught) {
+      setError(
+        caught instanceof Error ? caught.message : "The flag could not be saved. Try again."
+      );
+    }
+  };
+  const archiveFlag = async () => {
+    if (!flag) return;
+    setError("");
+    try {
+      await archive.mutateAsync(flag.key);
+      await navigate("feature-flags");
+    } catch (caught) {
+      setError(
+        caught instanceof Error ? caught.message : "The flag could not be archived. Try again."
+      );
+    }
+  };
+  const changeRule = (ruleId, patch) => setRules(
+    (current) => current.map(
+      (rule) => rule.id === ruleId ? { ...rule, ...patch } : rule
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    FlagsPage,
+    {
+      title: flag ? flag.name : "New flag",
+      description: flag ? "Update the audience and configuration for this feature." : "Give your feature a stable key, then choose who can see it.",
+      action: /* @__PURE__ */ jsx(Link, { href: listPath, children: "All flags" }),
+      children: [
+        readOnly && /* @__PURE__ */ jsx("p", { className: "ff-notice", children: "This flag is archived and always evaluates to false." }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: (event) => void save(event), children: [
+          /* @__PURE__ */ jsxs("fieldset", { className: "ff-form-grid", disabled: pending || readOnly, children: [
+            /* @__PURE__ */ jsx("legend", { className: "ff-sr-only", children: "Flag configuration" }),
+            /* @__PURE__ */ jsxs("div", { className: "ff-form-section", children: [
+              /* @__PURE__ */ jsx("h2", { children: "Flag details" }),
+              /* @__PURE__ */ jsx(Field, { id: `${id}-name`, label: "Name", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${id}-name`,
+                  required: true,
+                  maxLength: 200,
+                  value: name,
+                  onChange: (event) => setName(event.target.value),
+                  placeholder: "New checkout"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  id: `${id}-key`,
+                  label: "Key",
+                  hint: "Use lowercase letters, numbers, and hyphens. The key cannot change later.",
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: `${id}-key`,
+                      "aria-describedby": `${id}-key-hint`,
+                      required: true,
+                      pattern: "[a-z0-9]+(-[a-z0-9]+)*",
+                      maxLength: 100,
+                      readOnly: !!flag,
+                      value: key,
+                      onChange: (event) => setKey(event.target.value),
+                      placeholder: "new-checkout"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(Field, { id: `${id}-description`, label: "Description", children: /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  id: `${id}-description`,
+                  maxLength: 2e3,
+                  rows: 3,
+                  value: description,
+                  onChange: (event) => setDescription(event.target.value),
+                  placeholder: "What does this flag control?"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  id: `${id}-tags`,
+                  label: "Tags",
+                  hint: "Separate tags with commas to organize your flags.",
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: `${id}-tags`,
+                      "aria-describedby": `${id}-tags-hint`,
+                      value: tags,
+                      onChange: (event) => setTags(event.target.value),
+                      placeholder: "beta, checkout"
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ff-form-section", children: [
+              /* @__PURE__ */ jsx("h2", { children: "Delivery" }),
+              /* @__PURE__ */ jsx(Field, { id: `${id}-type`, label: "Flag type", children: /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: `${id}-type`,
+                  value: type,
+                  onChange: (event) => setType(event.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "boolean", children: "Boolean" }),
+                    /* @__PURE__ */ jsx("option", { value: "rollout", children: "Percentage rollout" }),
+                    /* @__PURE__ */ jsx("option", { value: "segment", children: "Segment targeting" })
+                  ]
+                }
+              ) }),
+              type === "boolean" && /* @__PURE__ */ jsx("p", { className: "ff-explanation", children: "When enabled, this flag is true for everyone. Disable it at any time from the flag list." }),
+              type === "rollout" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Field,
+                  {
+                    id: `${id}-percent`,
+                    label: "Rollout percentage",
+                    hint: "The same user or session stays in the same rollout group.",
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        id: `${id}-percent`,
+                        type: "number",
+                        min: 0,
+                        max: 100,
+                        step: "any",
+                        required: true,
+                        value: percent,
+                        onChange: (event) => setPercent(event.target.valueAsNumber),
+                        "aria-describedby": `${id}-percent-hint`
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(Rollout, { percent: Number.isFinite(percent) ? percent : 0 })
+              ] }),
+              type === "segment" && /* @__PURE__ */ jsxs("div", { className: "ff-rules", children: [
+                /* @__PURE__ */ jsx("p", { className: "ff-note", children: "All rules must match. \u201CIs one of\u201D accepts comma-separated values." }),
+                rules.map((rule, index) => /* @__PURE__ */ jsxs("fieldset", { className: "ff-rule", children: [
+                  /* @__PURE__ */ jsxs("legend", { children: [
+                    "Rule ",
+                    index + 1
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { children: [
+                    "Field",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: rule.field,
+                        onChange: (event) => {
+                          const field = event.target.value;
+                          changeRule(rule.id, {
+                            field,
+                            operator: field === "tags" ? "contains" : "equals"
+                          });
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "userId", children: "User ID" }),
+                          /* @__PURE__ */ jsx("option", { value: "email", children: "Email" }),
+                          /* @__PURE__ */ jsx("option", { value: "tags", children: "Tags" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { children: [
+                    "Match",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: rule.operator,
+                        onChange: (event) => changeRule(rule.id, {
+                          operator: event.target.value
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "option",
+                            {
+                              value: rule.field === "tags" ? "contains" : "equals",
+                              children: rule.field === "tags" ? "Contains" : "Equals"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("option", { value: "in", children: "Is one of" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { children: [
+                    "Value",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        required: true,
+                        maxLength: 32e3,
+                        value: rule.text,
+                        onChange: (event) => changeRule(rule.id, { text: event.target.value })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setRules(
+                        (current) => current.filter((item) => item.id !== rule.id)
+                      ),
+                      "aria-label": `Remove rule ${index + 1}`,
+                      children: "Remove"
+                    }
+                  )
+                ] }, rule.id)),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setRules((current) => [
+                        ...current,
+                        {
+                          id: String(nextRule),
+                          field: "userId",
+                          operator: "equals",
+                          value: "",
+                          text: ""
+                        }
+                      ]);
+                      setNextRule((current) => current + 1);
+                    },
+                    disabled: rules.length >= 50,
+                    children: "Add rule"
+                  }
+                )
+              ] }),
+              !flag && /* @__PURE__ */ jsxs("label", { className: "ff-checkbox", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: enabled,
+                    onChange: (event) => setEnabled(event.target.checked)
+                  }
+                ),
+                "Enable on creation"
+              ] })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { role: "alert", className: "ff-error", children: error }),
+          message && /* @__PURE__ */ jsx("p", { role: "status", className: "ff-success", children: message }),
+          /* @__PURE__ */ jsxs("div", { className: "ff-form-footer", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ff-actions", children: [
+              !readOnly && /* @__PURE__ */ jsx(
+                PermissionAccess,
+                {
+                  permission: flag ? featureFlagsPermissions.flags.update({ key: flag.key }) : featureFlagsPermissions.flags.create({ key }),
+                  children: /* @__PURE__ */ jsx("button", { className: "ff-primary", type: "submit", disabled: pending, children: pending ? "Saving\u2026" : flag ? "Save changes" : "Create flag" })
+                }
+              ),
+              /* @__PURE__ */ jsx(Link, { href: listPath, children: "Cancel" })
+            ] }),
+            flag && !readOnly && /* @__PURE__ */ jsx(
+              PermissionAccess,
+              {
+                permission: featureFlagsPermissions.flags.archive({
+                  key: flag.key
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: pending,
+                    onClick: () => setConfirmArchive(true),
+                    children: "Archive flag"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        confirmArchive && /* @__PURE__ */ jsxs("div", { className: "ff-notice", role: "alert", children: [
+          /* @__PURE__ */ jsxs("h2", { children: [
+            "Archive ",
+            flag?.name,
+            "?"
+          ] }),
+          /* @__PURE__ */ jsx("p", { children: "Archived flags always evaluate to false. Its key remains reserved." }),
+          /* @__PURE__ */ jsxs("div", { className: "ff-actions", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: pending,
+                onClick: () => void archiveFlag(),
+                children: "Confirm archive"
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setConfirmArchive(false), children: "Keep flag" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { EditFlagPage };

package/dist/packages/stack/src/plugins/feature-flags/client/components/pages/flag-detail-page.internal.cjs

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const plugins_featureFlags_client_hooks_index = require('../../../../../../../../plugins/feature-flags/client/hooks/index.cjs');
+const constants = require('../../constants.cjs');
+const shared = require('../shared.cjs');
+
+function FlagDetailPage({ flagKey }) {
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.FEATURE_FLAGS_PLUGIN_ID);
+  const {
+    data: evaluations,
+    refetch,
+    isFetching
+  } = plugins_featureFlags_client_hooks_index.useFlagEvaluations(flagKey);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    shared.FlagsPage,
+    {
+      title: "Evaluation log",
+      description: flagKey,
+      action: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: resolve("feature-flags").href, children: "All flags" }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EvaluationPreview, { flagKey, onEvaluated: refetch }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-section-heading", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Recent evaluations" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-note", children: "Recent results are kept in memory and reset when the server restarts." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: isFetching,
+              onClick: () => void refetch(),
+              children: "Refresh log"
+            }
+          )
+        ] }),
+        evaluations.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-table-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("caption", { className: "ff-sr-only", children: [
+            "Recent evaluations for ",
+            flagKey
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Time" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Result" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: "Context" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: evaluations.map((evaluation) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: evaluation.timestamp, children: new Date(evaluation.timestamp).toLocaleString() }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: evaluation.result ? "ff-success" : "ff-muted",
+                children: String(evaluation.result)
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "ff-context", children: JSON.stringify(evaluation.context) }) })
+          ] }, evaluation.id)) })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-empty", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "No evaluations yet" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Evaluate this flag with a context above, or use it in your app." })
+        ] })
+      ]
+    }
+  );
+}
+function EvaluationPreview({
+  flagKey,
+  onEvaluated
+}) {
+  const id = React.useId();
+  const [context, setContext] = React.useState();
+  const [take, setTake] = React.useState(0);
+  const submit = (event) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const value = (key) => String(data.get(key) ?? "").trim();
+    setContext({
+      ...value("userId") ? { userId: value("userId") } : {},
+      ...value("sessionId") ? { sessionId: value("sessionId") } : {},
+      ...value("email") ? { email: value("email") } : {},
+      ...value("tags") ? {
+        tags: value("tags").split(",").map((tag) => tag.trim()).filter(Boolean)
+      } : {}
+    });
+    setTake((current) => current + 1);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "ff-preview", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Try a context" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-note", children: "Check the live result for a user or session. This also adds an evaluation to the log." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-preview-fields", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-user`, label: "User ID", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-user`, name: "userId", maxLength: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-session`, label: "Session ID", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-session`, name: "sessionId", maxLength: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-email`, label: "Email", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: `${id}-email`,
+            name: "email",
+            type: "email",
+            maxLength: 320
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(shared.Field, { id: `${id}-tags`, label: "Context tags", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-tags`, name: "tags", placeholder: "beta, staff" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", children: "Evaluate flag" }),
+        context && /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewResult,
+          {
+            flagKey,
+            context,
+            onEvaluated
+          },
+          take
+        )
+      ] })
+    ] })
+  ] });
+}
+function PreviewResult({
+  flagKey,
+  context,
+  onEvaluated
+}) {
+  const { data, isFetching, error, refetch, dataUpdatedAt } = plugins_featureFlags_client_hooks_index.useFlag(
+    flagKey,
+    context
+  );
+  React.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  React.useEffect(() => {
+    if (dataUpdatedAt) onEvaluated();
+  }, [dataUpdatedAt, onEvaluated]);
+  return error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "ff-error", children: error.message }) : /* @__PURE__ */ jsxRuntime.jsx("output", { "aria-live": "polite", children: isFetching || data === void 0 ? "Evaluating\u2026" : `Result: ${data}` });
+}
+
+exports.FlagDetailPage = FlagDetailPage;

package/dist/packages/stack/src/plugins/feature-flags/client/components/pages/flag-detail-page.internal.mjs

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useEffect } from 'react';
+import { usePluginSiteNavigation } from '@btst/stack/context';
+import { useFlagEvaluations, useFlag } from '../../../../../../../../plugins/feature-flags/client/hooks/index.mjs';
+import { FEATURE_FLAGS_PLUGIN_ID } from '../../constants.mjs';
+import { FlagsPage, Field } from '../shared.mjs';
+
+function FlagDetailPage({ flagKey }) {
+  const { Link, resolve } = usePluginSiteNavigation(FEATURE_FLAGS_PLUGIN_ID);
+  const {
+    data: evaluations,
+    refetch,
+    isFetching
+  } = useFlagEvaluations(flagKey);
+  return /* @__PURE__ */ jsxs(
+    FlagsPage,
+    {
+      title: "Evaluation log",
+      description: flagKey,
+      action: /* @__PURE__ */ jsx(Link, { href: resolve("feature-flags").href, children: "All flags" }),
+      children: [
+        /* @__PURE__ */ jsx(EvaluationPreview, { flagKey, onEvaluated: refetch }),
+        /* @__PURE__ */ jsxs("div", { className: "ff-section-heading", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { children: "Recent evaluations" }),
+            /* @__PURE__ */ jsx("p", { className: "ff-note", children: "Recent results are kept in memory and reset when the server restarts." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: isFetching,
+              onClick: () => void refetch(),
+              children: "Refresh log"
+            }
+          )
+        ] }),
+        evaluations.length ? /* @__PURE__ */ jsx("div", { className: "ff-table-scroll", children: /* @__PURE__ */ jsxs("table", { children: [
+          /* @__PURE__ */ jsxs("caption", { className: "ff-sr-only", children: [
+            "Recent evaluations for ",
+            flagKey
+          ] }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Time" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Result" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Context" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: evaluations.map((evaluation) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("time", { dateTime: evaluation.timestamp, children: new Date(evaluation.timestamp).toLocaleString() }) }),
+            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: evaluation.result ? "ff-success" : "ff-muted",
+                children: String(evaluation.result)
+              }
+            ) }),
+            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("code", { className: "ff-context", children: JSON.stringify(evaluation.context) }) })
+          ] }, evaluation.id)) })
+        ] }) }) : /* @__PURE__ */ jsxs("div", { className: "ff-empty", children: [
+          /* @__PURE__ */ jsx("h2", { children: "No evaluations yet" }),
+          /* @__PURE__ */ jsx("p", { children: "Evaluate this flag with a context above, or use it in your app." })
+        ] })
+      ]
+    }
+  );
+}
+function EvaluationPreview({
+  flagKey,
+  onEvaluated
+}) {
+  const id = useId();
+  const [context, setContext] = useState();
+  const [take, setTake] = useState(0);
+  const submit = (event) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const value = (key) => String(data.get(key) ?? "").trim();
+    setContext({
+      ...value("userId") ? { userId: value("userId") } : {},
+      ...value("sessionId") ? { sessionId: value("sessionId") } : {},
+      ...value("email") ? { email: value("email") } : {},
+      ...value("tags") ? {
+        tags: value("tags").split(",").map((tag) => tag.trim()).filter(Boolean)
+      } : {}
+    });
+    setTake((current) => current + 1);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "ff-preview", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Try a context" }),
+    /* @__PURE__ */ jsx("p", { className: "ff-note", children: "Check the live result for a user or session. This also adds an evaluation to the log." }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ff-preview-fields", children: [
+        /* @__PURE__ */ jsx(Field, { id: `${id}-user`, label: "User ID", children: /* @__PURE__ */ jsx("input", { id: `${id}-user`, name: "userId", maxLength: 256 }) }),
+        /* @__PURE__ */ jsx(Field, { id: `${id}-session`, label: "Session ID", children: /* @__PURE__ */ jsx("input", { id: `${id}-session`, name: "sessionId", maxLength: 256 }) }),
+        /* @__PURE__ */ jsx(Field, { id: `${id}-email`, label: "Email", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${id}-email`,
+            name: "email",
+            type: "email",
+            maxLength: 320
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Field, { id: `${id}-tags`, label: "Context tags", children: /* @__PURE__ */ jsx("input", { id: `${id}-tags`, name: "tags", placeholder: "beta, staff" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ff-actions", children: [
+        /* @__PURE__ */ jsx("button", { type: "submit", children: "Evaluate flag" }),
+        context && /* @__PURE__ */ jsx(
+          PreviewResult,
+          {
+            flagKey,
+            context,
+            onEvaluated
+          },
+          take
+        )
+      ] })
+    ] })
+  ] });
+}
+function PreviewResult({
+  flagKey,
+  context,
+  onEvaluated
+}) {
+  const { data, isFetching, error, refetch, dataUpdatedAt } = useFlag(
+    flagKey,
+    context
+  );
+  useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  useEffect(() => {
+    if (dataUpdatedAt) onEvaluated();
+  }, [dataUpdatedAt, onEvaluated]);
+  return error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "ff-error", children: error.message }) : /* @__PURE__ */ jsx("output", { "aria-live": "polite", children: isFetching || data === void 0 ? "Evaluating\u2026" : `Result: ${data}` });
+}
+
+export { FlagDetailPage };