@guard-rail/core 0.2.0 → 0.2.1

package/dist/react/Team.js

@@ -9,7 +9,7 @@ import {
 } from "../server/actions";
 import { useGRail } from "./Provider";
 import { CloseIcon } from "./Icons";
-import { S } from "./styles";
+import { S, v } from "./styles";
 const ROLES = ["admin", "editor"];
 const ANIMATION_CSS = `
 @keyframes gr-fade-in { from { opacity: 0 } to { opacity: 1 } }
@@ -98,11 +98,11 @@ function TeamDrawer({ onClose }) {
         children: [
           /* @__PURE__ */ jsxs("header", { style: S.drawerHead, children: [
             /* @__PURE__ */ jsx("h2", { style: S.drawerTitle, children: "Team" }),
-            /* @__PURE__ */ jsx("button", { style: { ...S.iconBtn, color: "#6b7280" }, onClick: requestClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            /* @__PURE__ */ jsx("button", { style: { ...S.iconBtn, color: v("muted") }, onClick: requestClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
           ] }),
           /* @__PURE__ */ jsxs("div", { style: S.drawerBody, children: [
             error && /* @__PURE__ */ jsx("div", { style: { ...S.error, marginBottom: 12 }, children: error }),
-            loading ? /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "#6b7280" }, children: "Loading\u2026" }) : members.map((m) => /* @__PURE__ */ jsxs("div", { "data-gr-row": true, style: S.memberRow, children: [
+            loading ? /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: v("muted") }, children: "Loading\u2026" }) : members.map((m) => /* @__PURE__ */ jsxs("div", { "data-gr-row": true, style: S.memberRow, children: [
               /* @__PURE__ */ jsxs("span", { style: S.memberEmail, title: m.email, children: [
                 m.email,
                 m.email === currentEmail && " (you)"
@@ -119,11 +119,11 @@ function TeamDrawer({ onClose }) {
                   ),
                   children: ROLES.map((r) => /* @__PURE__ */ jsx("option", { value: r, children: r }, r))
                 }
-              ) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: m.role }),
+              ) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: v("muted") }, children: m.role }),
               isAdmin && /* @__PURE__ */ jsx(
                 "button",
                 {
-                  style: { ...S.iconBtn, color: "#9ca3af", width: 22, height: 22 },
+                  style: { ...S.iconBtn, color: v("muted"), width: 22, height: 22 },
                   disabled: pending,
                   onClick: () => run(() => removeMember(m.email)),
                   "aria-label": `Remove ${m.email}`,
@@ -172,7 +172,7 @@ function TeamDrawer({ onClose }) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: "#9ca3af", marginTop: 10 }, children: [
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: v("subtle"), marginTop: 10 }, children: [
                 "Guardrail records the invite. Sending the email is your app's job \u2014 wire the ",
                 /* @__PURE__ */ jsx("code", { children: "onInvite" }),
                 " handler."

package/dist/react/Team.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/Team.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useEffect, useState, useTransition } from \"react\";\nimport {\n  inviteMember,\n  listTeam,\n  removeMember,\n  updateMemberRole,\n} from \"../server/actions\";\nimport { useGRail } from \"./Provider\";\nimport { CloseIcon } from \"./Icons\";\nimport { S } from \"./styles\";\nimport type { GRMember, GRRole } from \"../core/types\";\n\nconst ROLES: GRRole[] = [\"admin\", \"editor\"];\n\n/**\n * Keyframes cannot be expressed as inline styles, so the drawer ships the few\n * it needs. Scoped to [data-guardrail-team] to stay clear of app styles, and\n * disabled under prefers-reduced-motion.\n */\nconst ANIMATION_CSS = `\n@keyframes gr-fade-in { from { opacity: 0 } to { opacity: 1 } }\n@keyframes gr-slide-in {\n  from { transform: translateX(100%) }\n  to   { transform: translateX(0) }\n}\n[data-guardrail-scrim] { animation: gr-fade-in 160ms ease-out both }\n[data-guardrail-team]  { animation: gr-slide-in 220ms cubic-bezier(0.32, 0.72, 0, 1) both }\n[data-guardrail-team] [data-gr-row] { animation: gr-fade-in 240ms ease-out both }\n@keyframes gr-fade-out { from { opacity: 1 } to { opacity: 0 } }\n@keyframes gr-slide-out {\n  from { transform: translateX(0) }\n  to   { transform: translateX(100%) }\n}\n[data-guardrail-scrim][data-closing] { animation: gr-fade-out 180ms ease-in both }\n[data-guardrail-team][data-closing]  { animation: gr-slide-out 180ms cubic-bezier(0.4, 0, 1, 1) both }\n@media (prefers-reduced-motion: reduce) {\n  [data-guardrail-scrim], [data-guardrail-team], [data-guardrail-team] [data-gr-row] {\n    animation: none\n  }\n}\n`;\n\nexport function TeamDrawer({ onClose }: { onClose: () => void }) {\n  const { role, email: currentEmail } = useGRail();\n  const isAdmin = role === \"admin\";\n\n  const [members, setMembers] = useState<GRMember[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [inviteEmail, setInviteEmail] = useState(\"\");\n  const [inviteRole, setInviteRole] = useState<GRRole>(\"editor\");\n  const [pending, startTransition] = useTransition();\n\n  const refresh = () =>\n    listTeam().then((rows) => {\n      setMembers(rows);\n      setLoading(false);\n    });\n\n  useEffect(() => {\n    void refresh();\n  }, []);\n\n  // Server actions re-check the role; this only decides what to render.\n  // Always refresh: a failure can still have changed the roster (an invite\n  // that saved but whose email failed, for instance).\n  const run = (fn: () => Promise<{ success: boolean; error?: string }>) =>\n    startTransition(async () => {\n      setError(null);\n      const res = await fn();\n      if (!res.success) setError(res.error ?? \"Something went wrong.\");\n      await refresh();\n    });\n\n  /**\n   * Unmounting on close skips the exit animation entirely. Stay mounted, play\n   * it, and let the parent unmount once it finishes.\n   */\n  const [closing, setClosing] = useState(false);\n  const requestClose = useCallback(() => {\n    const reduced =\n      typeof window !== \"undefined\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (reduced) return onClose(); // No animation, so no animationend to wait for.\n    setClosing(true);\n  }, [onClose]);\n\n  useEffect(() => {\n    if (!closing) return;\n    // Safety net if animationend never arrives (tab hidden, styles stripped).\n    const t = window.setTimeout(onClose, 400);\n    return () => window.clearTimeout(t);\n  }, [closing, onClose]);\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && requestClose();\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [requestClose]);\n\n  return (\n    <>\n      <style>{ANIMATION_CSS}</style>\n      <div\n        data-guardrail\n        data-guardrail-scrim\n        {...(closing ? { \"data-closing\": \"\" } : {})}\n        style={S.scrim}\n        onClick={requestClose}\n      />\n      <aside\n        data-guardrail\n        data-guardrail-team\n        {...(closing ? { \"data-closing\": \"\" } : {})}\n        onAnimationEnd={(e) => {\n          // Row fade-ins bubble up here too; only the drawer's own exit counts.\n          if (closing && e.target === e.currentTarget) onClose();\n        }}\n        style={S.drawer}\n        role=\"dialog\"\n        aria-label=\"Team\"\n      >\n        <header style={S.drawerHead}>\n          <h2 style={S.drawerTitle}>Team</h2>\n          <button style={{ ...S.iconBtn, color: \"#6b7280\" }} onClick={requestClose} aria-label=\"Close\">\n            <CloseIcon />\n          </button>\n        </header>\n\n        <div style={S.drawerBody}>\n          {error && <div style={{ ...S.error, marginBottom: 12 }}>{error}</div>}\n\n          {loading ? (\n            <p style={{ fontSize: 13, color: \"#6b7280\" }}>Loading…</p>\n          ) : (\n            members.map((m) => (\n              <div key={m.email} data-gr-row style={S.memberRow}>\n                <span style={S.memberEmail} title={m.email}>\n                  {m.email}\n                  {m.email === currentEmail && \" (you)\"}\n                </span>\n\n                {m.status === \"pending\" && <span style={S.badge}>Invited</span>}\n\n                {isAdmin ? (\n                  <select\n                    style={S.select}\n                    value={m.role}\n                    disabled={pending}\n                    onChange={(e) =>\n                      run(() =>\n                        updateMemberRole(m.email, e.target.value as GRRole),\n                      )\n                    }\n                  >\n                    {ROLES.map((r) => (\n                      <option key={r} value={r}>\n                        {r}\n                      </option>\n                    ))}\n                  </select>\n                ) : (\n                  <span style={{ fontSize: 12, color: \"#6b7280\" }}>{m.role}</span>\n                )}\n\n                {isAdmin && (\n                  <button\n                    style={{ ...S.iconBtn, color: \"#9ca3af\", width: 22, height: 22 }}\n                    disabled={pending}\n                    onClick={() => run(() => removeMember(m.email))}\n                    aria-label={`Remove ${m.email}`}\n                    title=\"Remove\"\n                  >\n                    <CloseIcon />\n                  </button>\n                )}\n              </div>\n            ))\n          )}\n\n          {isAdmin && (\n            <>\n              <p style={S.sectionLabel}>Invite someone</p>\n              <form\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  run(async () => {\n                    const res = await inviteMember(inviteEmail, inviteRole);\n                    if (res.success) setInviteEmail(\"\");\n                    return res;\n                  });\n                }}\n              >\n                <input\n                  style={S.field}\n                  type=\"email\"\n                  placeholder=\"name@company.com\"\n                  value={inviteEmail}\n                  onChange={(e) => setInviteEmail(e.target.value)}\n                  required\n                />\n                <div style={{ display: \"flex\", gap: 8 }}>\n                  <select\n                    style={{ ...S.select, flex: 1 }}\n                    value={inviteRole}\n                    onChange={(e) => setInviteRole(e.target.value as GRRole)}\n                  >\n                    {ROLES.map((r) => (\n                      <option key={r} value={r}>\n                        {r}\n                      </option>\n                    ))}\n                  </select>\n                  <button style={S.primaryBtn} type=\"submit\" disabled={pending}>\n                    {pending ? \"Working…\" : \"Invite\"}\n                  </button>\n                </div>\n              </form>\n              <p style={{ fontSize: 11, color: \"#9ca3af\", marginTop: 10 }}>\n                Guardrail records the invite. Sending the email is your app&apos;s\n                job — wire the <code>onInvite</code> handler.\n              </p>\n            </>\n          )}\n        </div>\n      </aside>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/react/Team.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useEffect, useState, useTransition } from \"react\";\nimport {\n  inviteMember,\n  listTeam,\n  removeMember,\n  updateMemberRole,\n} from \"../server/actions\";\nimport { useGRail } from \"./Provider\";\nimport { CloseIcon } from \"./Icons\";\nimport { S, v } from \"./styles\";\nimport type { GRMember, GRRole } from \"../core/types\";\n\nconst ROLES: GRRole[] = [\"admin\", \"editor\"];\n\n/**\n * Keyframes cannot be expressed as inline styles, so the drawer ships the few\n * it needs. Scoped to [data-guardrail-team] to stay clear of app styles, and\n * disabled under prefers-reduced-motion.\n */\nconst ANIMATION_CSS = `\n@keyframes gr-fade-in { from { opacity: 0 } to { opacity: 1 } }\n@keyframes gr-slide-in {\n  from { transform: translateX(100%) }\n  to   { transform: translateX(0) }\n}\n[data-guardrail-scrim] { animation: gr-fade-in 160ms ease-out both }\n[data-guardrail-team]  { animation: gr-slide-in 220ms cubic-bezier(0.32, 0.72, 0, 1) both }\n[data-guardrail-team] [data-gr-row] { animation: gr-fade-in 240ms ease-out both }\n@keyframes gr-fade-out { from { opacity: 1 } to { opacity: 0 } }\n@keyframes gr-slide-out {\n  from { transform: translateX(0) }\n  to   { transform: translateX(100%) }\n}\n[data-guardrail-scrim][data-closing] { animation: gr-fade-out 180ms ease-in both }\n[data-guardrail-team][data-closing]  { animation: gr-slide-out 180ms cubic-bezier(0.4, 0, 1, 1) both }\n@media (prefers-reduced-motion: reduce) {\n  [data-guardrail-scrim], [data-guardrail-team], [data-guardrail-team] [data-gr-row] {\n    animation: none\n  }\n}\n`;\n\nexport function TeamDrawer({ onClose }: { onClose: () => void }) {\n  const { role, email: currentEmail } = useGRail();\n  const isAdmin = role === \"admin\";\n\n  const [members, setMembers] = useState<GRMember[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [inviteEmail, setInviteEmail] = useState(\"\");\n  const [inviteRole, setInviteRole] = useState<GRRole>(\"editor\");\n  const [pending, startTransition] = useTransition();\n\n  const refresh = () =>\n    listTeam().then((rows) => {\n      setMembers(rows);\n      setLoading(false);\n    });\n\n  useEffect(() => {\n    void refresh();\n  }, []);\n\n  // Server actions re-check the role; this only decides what to render.\n  // Always refresh: a failure can still have changed the roster (an invite\n  // that saved but whose email failed, for instance).\n  const run = (fn: () => Promise<{ success: boolean; error?: string }>) =>\n    startTransition(async () => {\n      setError(null);\n      const res = await fn();\n      if (!res.success) setError(res.error ?? \"Something went wrong.\");\n      await refresh();\n    });\n\n  /**\n   * Unmounting on close skips the exit animation entirely. Stay mounted, play\n   * it, and let the parent unmount once it finishes.\n   */\n  const [closing, setClosing] = useState(false);\n  const requestClose = useCallback(() => {\n    const reduced =\n      typeof window !== \"undefined\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (reduced) return onClose(); // No animation, so no animationend to wait for.\n    setClosing(true);\n  }, [onClose]);\n\n  useEffect(() => {\n    if (!closing) return;\n    // Safety net if animationend never arrives (tab hidden, styles stripped).\n    const t = window.setTimeout(onClose, 400);\n    return () => window.clearTimeout(t);\n  }, [closing, onClose]);\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && requestClose();\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [requestClose]);\n\n  return (\n    <>\n      <style>{ANIMATION_CSS}</style>\n      <div\n        data-guardrail\n        data-guardrail-scrim\n        {...(closing ? { \"data-closing\": \"\" } : {})}\n        style={S.scrim}\n        onClick={requestClose}\n      />\n      <aside\n        data-guardrail\n        data-guardrail-team\n        {...(closing ? { \"data-closing\": \"\" } : {})}\n        onAnimationEnd={(e) => {\n          // Row fade-ins bubble up here too; only the drawer's own exit counts.\n          if (closing && e.target === e.currentTarget) onClose();\n        }}\n        style={S.drawer}\n        role=\"dialog\"\n        aria-label=\"Team\"\n      >\n        <header style={S.drawerHead}>\n          <h2 style={S.drawerTitle}>Team</h2>\n          <button style={{ ...S.iconBtn, color: v(\"muted\") }} onClick={requestClose} aria-label=\"Close\">\n            <CloseIcon />\n          </button>\n        </header>\n\n        <div style={S.drawerBody}>\n          {error && <div style={{ ...S.error, marginBottom: 12 }}>{error}</div>}\n\n          {loading ? (\n            <p style={{ fontSize: 13, color: v(\"muted\") }}>Loading…</p>\n          ) : (\n            members.map((m) => (\n              <div key={m.email} data-gr-row style={S.memberRow}>\n                <span style={S.memberEmail} title={m.email}>\n                  {m.email}\n                  {m.email === currentEmail && \" (you)\"}\n                </span>\n\n                {m.status === \"pending\" && <span style={S.badge}>Invited</span>}\n\n                {isAdmin ? (\n                  <select\n                    style={S.select}\n                    value={m.role}\n                    disabled={pending}\n                    onChange={(e) =>\n                      run(() =>\n                        updateMemberRole(m.email, e.target.value as GRRole),\n                      )\n                    }\n                  >\n                    {ROLES.map((r) => (\n                      <option key={r} value={r}>\n                        {r}\n                      </option>\n                    ))}\n                  </select>\n                ) : (\n                  <span style={{ fontSize: 12, color: v(\"muted\") }}>{m.role}</span>\n                )}\n\n                {isAdmin && (\n                  <button\n                    style={{ ...S.iconBtn, color: v(\"muted\"), width: 22, height: 22 }}\n                    disabled={pending}\n                    onClick={() => run(() => removeMember(m.email))}\n                    aria-label={`Remove ${m.email}`}\n                    title=\"Remove\"\n                  >\n                    <CloseIcon />\n                  </button>\n                )}\n              </div>\n            ))\n          )}\n\n          {isAdmin && (\n            <>\n              <p style={S.sectionLabel}>Invite someone</p>\n              <form\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  run(async () => {\n                    const res = await inviteMember(inviteEmail, inviteRole);\n                    if (res.success) setInviteEmail(\"\");\n                    return res;\n                  });\n                }}\n              >\n                <input\n                  style={S.field}\n                  type=\"email\"\n                  placeholder=\"name@company.com\"\n                  value={inviteEmail}\n                  onChange={(e) => setInviteEmail(e.target.value)}\n                  required\n                />\n                <div style={{ display: \"flex\", gap: 8 }}>\n                  <select\n                    style={{ ...S.select, flex: 1 }}\n                    value={inviteRole}\n                    onChange={(e) => setInviteRole(e.target.value as GRRole)}\n                  >\n                    {ROLES.map((r) => (\n                      <option key={r} value={r}>\n                        {r}\n                      </option>\n                    ))}\n                  </select>\n                  <button style={S.primaryBtn} type=\"submit\" disabled={pending}>\n                    {pending ? \"Working…\" : \"Invite\"}\n                  </button>\n                </div>\n              </form>\n              <p style={{ fontSize: 11, color: v(\"subtle\"), marginTop: 10 }}>\n                Guardrail records the invite. Sending the email is your app&apos;s\n                job — wire the <code>onInvite</code> handler.\n              </p>\n            </>\n          )}\n        </div>\n      </aside>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/react/styles.d.ts

@@ -3,7 +3,44 @@
  * classes would make the package depend on the consumer having Tailwind *and*
  * adding node_modules/guardrail to their content globs — it would render
  * unstyled on a clean install. Developer-authored content is never touched.
+ *
+ * Colors are CSS variables so the chrome can follow the visitor's OS light/dark
+ * preference — inline styles can't express a media query, but they can read a
+ * variable that one defines. THEME_CSS (rendered once by <GRailAdmin>) sets the
+ * variables; every use below carries the light value as its fallback, so the
+ * chrome still renders correctly if that stylesheet is ever absent.
  */
+declare const LIGHT: {
+    readonly bg: "#ffffff";
+    readonly "bg-glass": "rgba(255,255,255,0.97)";
+    readonly fg: "#111827";
+    readonly fg2: "#4b5563";
+    readonly muted: "#6b7280";
+    readonly subtle: "#9ca3af";
+    readonly border: "#e5e7eb";
+    readonly "border-strong": "#d1d5db";
+    readonly "border-soft": "#f3f4f6";
+    readonly "input-bg": "#ffffff";
+    readonly soft: "#f3f4f6";
+    readonly accent: "#2563eb";
+    readonly "accent-soft": "#eff6ff";
+    readonly "accent-text": "#1d4ed8";
+    readonly "primary-bg": "#111827";
+    readonly "primary-fg": "#ffffff";
+    readonly danger: "#dc2626";
+    readonly label: "#1e3a8a";
+    readonly shadow: "rgba(0,0,0,0.25)";
+};
+/** A themed color: reads the variable, falls back to the light value. */
+declare const v: (name: keyof typeof LIGHT) => string;
+/**
+ * Rendered once by <GRailAdmin>. Variables go on :root so portaled chrome
+ * inherits them. `color-scheme` is deliberately scoped to Guardrail's own
+ * elements, never :root — that would flip the host site's form controls and
+ * scrollbars too. It's what makes native controls inside the chrome (the
+ * team drawer's role <select>, its dropdown list) match the palette.
+ */
+declare const THEME_CSS: string;
 declare const S: {
     banner: {
         position: "fixed";
@@ -11,7 +48,7 @@ declare const S: {
         left: number;
         width: string;
         background: string;
-        color: "#000";
+        color: string;
         padding: string;
         zIndex: number;
         borderTop: string;
@@ -40,7 +77,7 @@ declare const S: {
         gap: number;
     };
     error: {
-        color: "#dc2626";
+        color: string;
         fontSize: number;
         fontWeight: number;
     };
@@ -49,13 +86,13 @@ declare const S: {
         borderRadius: number;
         padding: string;
         fontSize: number;
-        color: "#000";
+        color: string;
         background: string;
         outline: string;
     };
     primaryBtn: {
         background: string;
-        color: "#fff";
+        color: string;
         padding: string;
         borderRadius: number;
         fontSize: number;
@@ -71,10 +108,10 @@ declare const S: {
         zIndex: number;
         background: string;
         backdropFilter: "blur(8px)";
-        color: "#fff";
+        color: string;
         padding: string;
         borderRadius: number;
-        boxShadow: "0 20px 40px rgba(0,0,0,0.35)";
+        boxShadow: `0 20px 40px ${string}`;
         display: "flex";
         alignItems: "center";
         gap: number;
@@ -93,7 +130,7 @@ declare const S: {
         fontWeight: number;
         textTransform: "uppercase";
         letterSpacing: string;
-        color: "#dbeafe";
+        color: string;
     };
     divider: {
         width: number;
@@ -105,7 +142,7 @@ declare const S: {
         fontWeight: number;
         textTransform: "uppercase";
         letterSpacing: string;
-        color: "#9ca3af";
+        color: string;
         background: string;
         border: string;
         cursor: "pointer";
@@ -117,9 +154,10 @@ declare const S: {
         transform: "translateX(-50%)";
         zIndex: number;
         background: string;
+        color: string;
         padding: number;
         borderRadius: number;
-        boxShadow: "0 20px 40px rgba(0,0,0,0.25)";
+        boxShadow: `0 20px 40px ${string}`;
         border: string;
         minWidth: number;
         cursor: "default";
@@ -129,7 +167,7 @@ declare const S: {
         display: "block";
         fontSize: number;
         fontWeight: number;
-        color: "#9ca3af";
+        color: string;
         marginBottom: number;
         textTransform: "uppercase";
     };
@@ -138,7 +176,7 @@ declare const S: {
         borderRadius: number;
         padding: string;
         fontSize: number;
-        color: "#000";
+        color: string;
         background: string;
         width: string;
         marginBottom: number;
@@ -153,7 +191,7 @@ declare const S: {
     };
     cancelBtn: {
         background: string;
-        color: "#4b5563";
+        color: string;
         padding: string;
         borderRadius: number;
         fontSize: number;
@@ -168,10 +206,11 @@ declare const S: {
         alignItems: "center";
         gap: number;
         background: string;
+        color: string;
         backdropFilter: "blur(8px)";
         padding: number;
         borderRadius: number;
-        boxShadow: "0 8px 24px rgba(0,0,0,0.3)";
+        boxShadow: `0 8px 24px ${string}`;
         border: string;
         fontFamily: "system-ui, -apple-system, sans-serif";
     };
@@ -181,9 +220,10 @@ declare const S: {
         maxHeight: string;
         overflowY: "auto";
         background: string;
+        color: string;
         padding: number;
         borderRadius: number;
-        boxShadow: "0 12px 32px rgba(0,0,0,0.25)";
+        boxShadow: `0 12px 32px ${string}`;
         border: string;
         minWidth: number;
         maxWidth: string;
@@ -199,7 +239,7 @@ declare const S: {
         borderRadius: number;
         border: string;
         background: string;
-        color: "#e5e7eb";
+        color: string;
         cursor: "pointer";
         padding: number;
     };
@@ -229,9 +269,9 @@ declare const S: {
         height: string;
         width: string;
         background: string;
-        color: "#111827";
+        color: string;
         zIndex: number;
-        boxShadow: "-12px 0 32px rgba(0,0,0,0.2)";
+        boxShadow: `-12px 0 32px ${string}`;
         display: "flex";
         flexDirection: "column";
         fontFamily: "system-ui, -apple-system, sans-serif";
@@ -273,7 +313,7 @@ declare const S: {
         padding: string;
         fontSize: number;
         background: string;
-        color: "#111827";
+        color: string;
     };
     badge: {
         fontSize: number;
@@ -290,7 +330,7 @@ declare const S: {
         fontWeight: number;
         textTransform: "uppercase";
         letterSpacing: string;
-        color: "#9ca3af";
+        color: string;
         margin: string;
     };
     pickerScrim: {
@@ -307,10 +347,10 @@ declare const S: {
         width: string;
         maxHeight: string;
         background: string;
-        color: "#111827";
+        color: string;
         borderRadius: number;
         zIndex: number;
-        boxShadow: "0 24px 64px rgba(0,0,0,0.35)";
+        boxShadow: `0 24px 64px ${string}`;
         display: "flex";
         flexDirection: "column";
         overflow: "hidden";
@@ -332,7 +372,7 @@ declare const S: {
         padding: number;
     };
     pickerTileActive: {
-        borderColor: "#2563eb";
+        borderColor: string;
     };
     pickerThumb: {
         width: string;
@@ -346,14 +386,14 @@ declare const S: {
         padding: number;
         textAlign: "center";
         fontSize: number;
-        color: "#6b7280";
+        color: string;
         marginBottom: number;
         cursor: "pointer";
     };
     dropzoneActive: {
-        borderColor: "#2563eb";
+        borderColor: string;
         background: string;
-        color: "#1d4ed8";
+        color: string;
     };
     previewThumb: {
         width: string;
@@ -368,7 +408,7 @@ declare const S: {
     };
     secondaryBtn: {
         background: string;
-        color: "#111827";
+        color: string;
         padding: string;
         borderRadius: number;
         fontSize: number;
@@ -378,6 +418,38 @@ declare const S: {
         width: string;
         marginBottom: number;
     };
+    /**
+     * Edit affordance for image fields, drawn as separate fixed elements instead
+     * of styling the <img> itself. Backgrounds (next/image `fill` behind
+     * overlaid content) can't take an in-place affordance: it either sits under
+     * the content and can't be clicked, or gets lifted over it and hides it.
+     * The outline ignores the pointer so overlaid content stays interactive;
+     * the handle is the one clickable piece.
+     */
+    markerOutline: {
+        position: "fixed";
+        zIndex: number;
+        pointerEvents: "none";
+        boxSizing: "border-box";
+        borderRadius: number;
+    };
+    markerHandle: {
+        position: "fixed";
+        zIndex: number;
+        display: "inline-flex";
+        alignItems: "center";
+        gap: number;
+        padding: string;
+        borderRadius: number;
+        border: string;
+        background: string;
+        color: "#fff";
+        fontSize: number;
+        fontWeight: number;
+        fontFamily: "system-ui, -apple-system, sans-serif";
+        cursor: "pointer";
+        boxShadow: `0 4px 12px ${string}`;
+    };
     repeaterItem: {
         position: "relative";
         outline: string;
@@ -391,10 +463,12 @@ declare const S: {
         display: "flex";
         gap: number;
         background: string;
+        color: string;
         backdropFilter: "blur(6px)";
         padding: number;
         borderRadius: number;
-        boxShadow: "0 4px 12px rgba(0,0,0,0.25)";
+        boxShadow: `0 4px 12px ${string}`;
+        border: string;
     };
     repeaterAddRow: {
         display: "flex";
@@ -411,7 +485,7 @@ declare const S: {
         borderRadius: number;
         border: string;
         background: string;
-        color: "#2563eb";
+        color: string;
         fontSize: number;
         fontWeight: number;
         cursor: "pointer";
@@ -421,10 +495,10 @@ declare const S: {
         borderRadius: number;
         padding: string;
         fontSize: number;
-        color: "#000";
+        color: string;
         background: string;
         minWidth: number;
     };
 };
 
-export { S };
+export { S, THEME_CSS, v };