@guard-rail/core 0.1.0

package/dist/react/Team.js

@@ -0,0 +1,190 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState, useTransition } from "react";
+import {
+  inviteMember,
+  listTeam,
+  removeMember,
+  updateMemberRole
+} from "../server/actions";
+import { useGRail } from "./Provider";
+import { CloseIcon } from "./Icons";
+import { S } from "./styles";
+const ROLES = ["admin", "editor"];
+const ANIMATION_CSS = `
+@keyframes gr-fade-in { from { opacity: 0 } to { opacity: 1 } }
+@keyframes gr-slide-in {
+  from { transform: translateX(100%) }
+  to   { transform: translateX(0) }
+}
+[data-guardrail-scrim] { animation: gr-fade-in 160ms ease-out both }
+[data-guardrail-team]  { animation: gr-slide-in 220ms cubic-bezier(0.32, 0.72, 0, 1) both }
+[data-guardrail-team] [data-gr-row] { animation: gr-fade-in 240ms ease-out both }
+@keyframes gr-fade-out { from { opacity: 1 } to { opacity: 0 } }
+@keyframes gr-slide-out {
+  from { transform: translateX(0) }
+  to   { transform: translateX(100%) }
+}
+[data-guardrail-scrim][data-closing] { animation: gr-fade-out 180ms ease-in both }
+[data-guardrail-team][data-closing]  { animation: gr-slide-out 180ms cubic-bezier(0.4, 0, 1, 1) both }
+@media (prefers-reduced-motion: reduce) {
+  [data-guardrail-scrim], [data-guardrail-team], [data-guardrail-team] [data-gr-row] {
+    animation: none
+  }
+}
+`;
+function TeamDrawer({ onClose }) {
+  const { role, email: currentEmail } = useGRail();
+  const isAdmin = role === "admin";
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState("editor");
+  const [pending, startTransition] = useTransition();
+  const refresh = () => listTeam().then((rows) => {
+    setMembers(rows);
+    setLoading(false);
+  });
+  useEffect(() => {
+    void refresh();
+  }, []);
+  const run = (fn) => startTransition(async () => {
+    setError(null);
+    const res = await fn();
+    if (!res.success) setError(res.error ?? "Something went wrong.");
+    await refresh();
+  });
+  const [closing, setClosing] = useState(false);
+  const requestClose = useCallback(() => {
+    const reduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) return onClose();
+    setClosing(true);
+  }, [onClose]);
+  useEffect(() => {
+    if (!closing) return;
+    const t = window.setTimeout(onClose, 400);
+    return () => window.clearTimeout(t);
+  }, [closing, onClose]);
+  useEffect(() => {
+    const onKey = (e) => e.key === "Escape" && requestClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [requestClose]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: ANIMATION_CSS }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-guardrail": true,
+        "data-guardrail-scrim": true,
+        ...closing ? { "data-closing": "" } : {},
+        style: S.scrim,
+        onClick: requestClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        "data-guardrail": true,
+        "data-guardrail-team": true,
+        ...closing ? { "data-closing": "" } : {},
+        onAnimationEnd: (e) => {
+          if (closing && e.target === e.currentTarget) onClose();
+        },
+        style: S.drawer,
+        role: "dialog",
+        "aria-label": "Team",
+        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__ */ 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: [
+              /* @__PURE__ */ jsxs("span", { style: S.memberEmail, title: m.email, children: [
+                m.email,
+                m.email === currentEmail && " (you)"
+              ] }),
+              m.status === "pending" && /* @__PURE__ */ jsx("span", { style: S.badge, children: "Invited" }),
+              isAdmin ? /* @__PURE__ */ jsx(
+                "select",
+                {
+                  style: S.select,
+                  value: m.role,
+                  disabled: pending,
+                  onChange: (e) => run(
+                    () => updateMemberRole(m.email, e.target.value)
+                  ),
+                  children: ROLES.map((r) => /* @__PURE__ */ jsx("option", { value: r, children: r }, r))
+                }
+              ) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: m.role }),
+              isAdmin && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...S.iconBtn, color: "#9ca3af", width: 22, height: 22 },
+                  disabled: pending,
+                  onClick: () => run(() => removeMember(m.email)),
+                  "aria-label": `Remove ${m.email}`,
+                  title: "Remove",
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ] }, m.email)),
+            isAdmin && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: S.sectionLabel, children: "Invite someone" }),
+              /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    run(async () => {
+                      const res = await inviteMember(inviteEmail, inviteRole);
+                      if (res.success) setInviteEmail("");
+                      return res;
+                    });
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        style: S.field,
+                        type: "email",
+                        placeholder: "name@company.com",
+                        value: inviteEmail,
+                        onChange: (e) => setInviteEmail(e.target.value),
+                        required: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "select",
+                        {
+                          style: { ...S.select, flex: 1 },
+                          value: inviteRole,
+                          onChange: (e) => setInviteRole(e.target.value),
+                          children: ROLES.map((r) => /* @__PURE__ */ jsx("option", { value: r, children: r }, r))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("button", { style: S.primaryBtn, type: "submit", disabled: pending, children: pending ? "Working\u2026" : "Invite" })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: "#9ca3af", marginTop: 10 }, children: [
+                "Guardrail records the invite. Sending the email is your app's job \u2014 wire the ",
+                /* @__PURE__ */ jsx("code", { children: "onInvite" }),
+                " handler."
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TeamDrawer
+};
+//# sourceMappingURL=Team.js.map

package/dist/react/Team.js.map

@@ -0,0 +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":[]}

package/dist/react/resizeImage.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Longest edge an uploaded image is scaled down to — WordPress's default "big
+ * image" threshold. Enough for full-width heroes on high-density screens,
+ * while a 12-megapixel phone photo (~4000px) shrinks to a fraction of its size.
+ */
+declare const MAX_IMAGE_EDGE = 2560;
+interface PreparedImage {
+    file: File;
+    width?: number;
+    height?: number;
+    resized: boolean;
+}
+/**
+ * Scales an image down before upload, in the browser.
+ *
+ * This runs client-side because uploads go straight to storage and never pass
+ * through the server. That makes it a convenience rather than a guarantee: the
+ * server's 10 MB cap and the bucket's own limit remain the hard ceiling.
+ *
+ * Re-encoding also drops EXIF data, including GPS location from phone photos.
+ * Images already within the limit are uploaded untouched, never recompressed.
+ */
+declare function prepareImage(file: File, maxEdge?: number): Promise<PreparedImage>;
+
+export { MAX_IMAGE_EDGE, type PreparedImage, prepareImage };

package/dist/react/resizeImage.js

@@ -0,0 +1,52 @@
+const MAX_IMAGE_EDGE = 2560;
+const RESIZABLE = {
+  "image/jpeg": 0.85,
+  "image/webp": 0.85,
+  "image/png": void 0
+  // lossless; quality does not apply
+};
+async function prepareImage(file, maxEdge = MAX_IMAGE_EDGE) {
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+  } catch {
+    return { file, resized: false };
+  }
+  const { width, height } = bitmap;
+  const scale = Math.min(1, maxEdge / Math.max(width, height));
+  if (scale === 1 || !(file.type in RESIZABLE)) {
+    bitmap.close();
+    return { file, width, height, resized: false };
+  }
+  const w = Math.round(width * scale);
+  const h = Math.round(height * scale);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    bitmap.close();
+    return { file, width, height, resized: false };
+  }
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(bitmap, 0, 0, w, h);
+  bitmap.close();
+  const blob = await new Promise(
+    (resolve) => canvas.toBlob(resolve, file.type, RESIZABLE[file.type])
+  );
+  if (!blob || blob.type !== file.type) {
+    return { file, width, height, resized: false };
+  }
+  return {
+    file: new File([blob], file.name, { type: file.type, lastModified: Date.now() }),
+    width: w,
+    height: h,
+    resized: true
+  };
+}
+export {
+  MAX_IMAGE_EDGE,
+  prepareImage
+};
+//# sourceMappingURL=resizeImage.js.map

package/dist/react/resizeImage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/resizeImage.ts"],"sourcesContent":["/**\n * Longest edge an uploaded image is scaled down to — WordPress's default \"big\n * image\" threshold. Enough for full-width heroes on high-density screens,\n * while a 12-megapixel phone photo (~4000px) shrinks to a fraction of its size.\n */\nexport const MAX_IMAGE_EDGE = 2560;\n\n/**\n * Types the browser can re-encode faithfully, with the quality used for each.\n * GIF is left alone because a canvas keeps only the first frame, and AVIF\n * because most browsers cannot encode it — both upload unchanged.\n */\nconst RESIZABLE: Record<string, number | undefined> = {\n  \"image/jpeg\": 0.85,\n  \"image/webp\": 0.85,\n  \"image/png\": undefined, // lossless; quality does not apply\n};\n\nexport interface PreparedImage {\n  file: File;\n  width?: number;\n  height?: number;\n  resized: boolean;\n}\n\n/**\n * Scales an image down before upload, in the browser.\n *\n * This runs client-side because uploads go straight to storage and never pass\n * through the server. That makes it a convenience rather than a guarantee: the\n * server's 10 MB cap and the bucket's own limit remain the hard ceiling.\n *\n * Re-encoding also drops EXIF data, including GPS location from phone photos.\n * Images already within the limit are uploaded untouched, never recompressed.\n */\nexport async function prepareImage(\n  file: File,\n  maxEdge: number = MAX_IMAGE_EDGE,\n): Promise<PreparedImage> {\n  let bitmap: ImageBitmap;\n  try {\n    // Apply EXIF orientation, or re-encoded phone photos come out sideways.\n    bitmap = await createImageBitmap(file, { imageOrientation: \"from-image\" });\n  } catch {\n    // Not decodable here; let the server and storage decide.\n    return { file, resized: false };\n  }\n\n  const { width, height } = bitmap;\n  const scale = Math.min(1, maxEdge / Math.max(width, height));\n\n  if (scale === 1 || !(file.type in RESIZABLE)) {\n    bitmap.close();\n    return { file, width, height, resized: false };\n  }\n\n  const w = Math.round(width * scale);\n  const h = Math.round(height * scale);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = w;\n  canvas.height = h;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) {\n    bitmap.close();\n    return { file, width, height, resized: false };\n  }\n  ctx.imageSmoothingEnabled = true;\n  ctx.imageSmoothingQuality = \"high\";\n  ctx.drawImage(bitmap, 0, 0, w, h);\n  bitmap.close();\n\n  const blob = await new Promise<Blob | null>((resolve) =>\n    canvas.toBlob(resolve, file.type, RESIZABLE[file.type]),\n  );\n\n  // Browsers quietly fall back to PNG for types they cannot encode; keep the\n  // original rather than upload a mislabelled or bloated file.\n  if (!blob || blob.type !== file.type) {\n    return { file, width, height, resized: false };\n  }\n\n  return {\n    file: new File([blob], file.name, { type: file.type, lastModified: Date.now() }),\n    width: w,\n    height: h,\n    resized: true,\n  };\n}\n"],"mappings":"AAKO,MAAM,iBAAiB;AAO9B,MAAM,YAAgD;AAAA,EACpD,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA;AACf;AAmBA,eAAsB,aACpB,MACA,UAAkB,gBACM;AACxB,MAAI;AACJ,MAAI;AAEF,aAAS,MAAM,kBAAkB,MAAM,EAAE,kBAAkB,aAAa,CAAC;AAAA,EAC3E,QAAQ;AAEN,WAAO,EAAE,MAAM,SAAS,MAAM;AAAA,EAChC;AAEA,QAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,QAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAO,MAAM,CAAC;AAE3D,MAAI,UAAU,KAAK,EAAE,KAAK,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACb,WAAO,EAAE,MAAM,OAAO,QAAQ,SAAS,MAAM;AAAA,EAC/C;AAEA,QAAM,IAAI,KAAK,MAAM,QAAQ,KAAK;AAClC,QAAM,IAAI,KAAK,MAAM,SAAS,KAAK;AACnC,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,KAAK;AACR,WAAO,MAAM;AACb,WAAO,EAAE,MAAM,OAAO,QAAQ,SAAS,MAAM;AAAA,EAC/C;AACA,MAAI,wBAAwB;AAC5B,MAAI,wBAAwB;AAC5B,MAAI,UAAU,QAAQ,GAAG,GAAG,GAAG,CAAC;AAChC,SAAO,MAAM;AAEb,QAAM,OAAO,MAAM,IAAI;AAAA,IAAqB,CAAC,YAC3C,OAAO,OAAO,SAAS,KAAK,MAAM,UAAU,KAAK,IAAI,CAAC;AAAA,EACxD;AAIA,MAAI,CAAC,QAAQ,KAAK,SAAS,KAAK,MAAM;AACpC,WAAO,EAAE,MAAM,OAAO,QAAQ,SAAS,MAAM;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL,MAAM,IAAI,KAAK,CAAC,IAAI,GAAG,KAAK,MAAM,EAAE,MAAM,KAAK,MAAM,cAAc,KAAK,IAAI,EAAE,CAAC;AAAA,IAC/E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;","names":[]}