@guard-rail/core 0.10.0 → 0.11.0

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  sendPasswordResetAction,\n  updateMemberRole,\n} from \"../server/actions\";\nimport { useGRail } from \"./Provider\";\nimport { CloseIcon, KeyIcon } 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 */\nexport const 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 [notice, setNotice] = 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; notice?: string }>) =>\n    startTransition(async () => {\n      setError(null);\n      setNotice(null);\n      const res = await fn();\n      if (!res.success) setError(res.error ?? \"Something went wrong.\");\n      else if (res.notice) setNotice(res.notice);\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      {/* Hoisted to <head> — see the note on the theme <style> in Admin.tsx. */}\n      <style href=\"guardrail-team-animation\" precedence=\"default\">\n        {ANIMATION_CSS}\n      </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          {notice && (\n            <div style={{ fontSize: 12, color: v(\"muted\"), marginBottom: 12 }} role=\"status\">\n              {notice}\n            </div>\n          )}\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(() => sendPasswordResetAction(m.email))}\n                    aria-label={`Send password reset to ${m.email}`}\n                    title=\"Send password reset\"\n                  >\n                    <KeyIcon />\n                  </button>\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                New people get an email to set a password. Invites and resets go\n                out through your <code>onInvite</code> / <code>onPasswordReset</code>{\" \"}\n                handlers, or your auth provider&apos;s own emails if you haven&apos;t\n                set them.\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  sendPasswordResetAction,\n  updateMemberRole,\n} from \"../server/actions\";\nimport { useGRail } from \"./Provider\";\nimport { CloseIcon, KeyIcon } from \"./Icons\";\nimport type { GRMember, GRRole } from \"../core/types\";\n\nconst ROLES: GRRole[] = [\"admin\", \"editor\"];\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 [notice, setNotice] = 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; notice?: string }>) =>\n    startTransition(async () => {\n      setError(null);\n      setNotice(null);\n      const res = await fn();\n      if (!res.success) setError(res.error ?? \"Something went wrong.\");\n      else if (res.notice) setNotice(res.notice);\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      <div\n        data-guardrail\n        data-guardrail-scrim\n        {...(closing ? { \"data-closing\": \"\" } : {})}\n        className=\"gr-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        className=\"gr-drawer\"\n        role=\"dialog\"\n        aria-label=\"Team\"\n      >\n        <header className=\"gr-drawer-head\">\n          <h2 className=\"gr-drawer-title\">Team</h2>\n          <button className=\"gr-icon-btn gr-text-muted\" onClick={requestClose} aria-label=\"Close\">\n            <CloseIcon />\n          </button>\n        </header>\n\n        <div className=\"gr-drawer-body\">\n          {error && <div className=\"gr-error gr-mb-12\">{error}</div>}\n          {notice && (\n            <div className=\"gr-fs-12 gr-text-muted gr-mb-12\" role=\"status\">\n              {notice}\n            </div>\n          )}\n\n          {loading ? (\n            <p className=\"gr-fs-13 gr-text-muted\">Loading…</p>\n          ) : (\n            members.map((m) => (\n              <div key={m.email} data-gr-row className=\"gr-member-row\">\n                <span className=\"gr-member-email\" title={m.email}>\n                  {m.email}\n                  {m.email === currentEmail && \" (you)\"}\n                </span>\n\n                {m.status === \"pending\" && <span className=\"gr-badge\">Invited</span>}\n\n                {isAdmin ? (\n                  <select\n                    className=\"gr-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 className=\"gr-fs-12 gr-text-muted\">{m.role}</span>\n                )}\n\n                {isAdmin && (\n                  <button\n                    className=\"gr-icon-btn gr-text-muted gr-size-22\"\n                    disabled={pending}\n                    onClick={() => run(() => sendPasswordResetAction(m.email))}\n                    aria-label={`Send password reset to ${m.email}`}\n                    title=\"Send password reset\"\n                  >\n                    <KeyIcon />\n                  </button>\n                )}\n\n                {isAdmin && (\n                  <button\n                    className=\"gr-icon-btn gr-text-muted gr-size-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 className=\"gr-section-label\">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                  className=\"gr-field\"\n                  type=\"email\"\n                  placeholder=\"name@company.com\"\n                  value={inviteEmail}\n                  onChange={(e) => setInviteEmail(e.target.value)}\n                  required\n                />\n                <div className=\"gr-flex gr-gap-8\">\n                  <select\n                    className=\"gr-select gr-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 className=\"gr-primary-btn\" type=\"submit\" disabled={pending}>\n                    {pending ? \"Working…\" : \"Invite\"}\n                  </button>\n                </div>\n              </form>\n              <p className=\"gr-fs-11 gr-text-subtle gr-mt-10\">\n                New people get an email to set a password. Invites and resets go\n                out through your <code>onInvite</code> / <code>onPasswordReset</code>{\" \"}\n                handlers, or your auth provider&apos;s own emails if you haven&apos;t\n                set them.\n              </p>\n            </>\n          )}\n        </div>\n      </aside>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/react/guardrail.css

@@ -0,0 +1,563 @@
+/*
+ * Guardrail's editing chrome — the sign-in bar, toolbar, editors, drawers and
+ * the outlines drawn around editable fields.
+ *
+ * Imported by the package itself (see GRailAdmin), so a site doesn't link it by
+ * hand, and shipped as a real stylesheet rather than inline styles so it works
+ * under a strict Content-Security-Policy (style-src 'self', no 'unsafe-inline').
+ *
+ * Theming: every color is a --gr-* variable. Override any of them in your own
+ * CSS to restyle the chrome, e.g.
+ *
+ *   :root { --gr-accent: #7c3aed; --gr-field-outline: #7c3aed; }
+ *
+ * Three layers: change a base color (--gr-bg, --gr-fg, --gr-border …) to retheme
+ * everything, or set the --gr-overlay-* variables to restyle only the floating
+ * surfaces (sign-in bar, toolbar, popups, drawers, picker) — they default to the
+ * base colors, so you only set what you want to differ.
+ *
+ * The defaults below are declared in :where(:root), which has no specificity, so
+ * a plain :root rule of yours wins whatever order the stylesheets load in — no
+ * !important, no selector tricks.
+ *
+ * Every class is prefixed gr-, so nothing here can collide with a site's own.
+ */
+
+/* ---- theme ---------------------------------------------------------------- */
+
+:where(:root) { --gr-bg: #ffffff; --gr-bg-glass: rgba(255,255,255,0.97); --gr-fg: #111827; --gr-fg2: #4b5563; --gr-muted: #6b7280; --gr-subtle: #9ca3af; --gr-border: #e5e7eb; --gr-border-strong: #d1d5db; --gr-border-soft: #f3f4f6; --gr-input-bg: #ffffff; --gr-soft: #f3f4f6; --gr-accent: #2563eb; --gr-accent-soft: #eff6ff; --gr-accent-text: #1d4ed8; --gr-primary-bg: #111827; --gr-primary-fg: #ffffff; --gr-danger: #dc2626; --gr-label: #1e3a8a; --gr-shadow: rgba(0,0,0,0.25); --gr-field-outline: #60a5fa; --gr-field-outline-active: #2563eb; --gr-on-accent: #ffffff; --gr-scrim: rgba(0,0,0,0.4); --gr-scrim-modal: rgba(0,0,0,0.5); --gr-badge-bg: #fef3c7; --gr-badge-fg: #92400e; --gr-overlay-bg: var(--gr-bg); --gr-overlay-bg-glass: var(--gr-bg-glass); --gr-overlay-fg: var(--gr-fg); --gr-overlay-border: var(--gr-border); }
+[data-guardrail] { color-scheme: light; }
+@media (prefers-color-scheme: dark) {
+  :where(:root) { --gr-bg: #0f1b2d; --gr-bg-glass: rgba(15,27,45,0.97); --gr-fg: #e6edf7; --gr-fg2: #b6c4d8; --gr-muted: #9fb0c7; --gr-subtle: #7d8ea6; --gr-border: rgba(148,163,184,0.22); --gr-border-strong: rgba(148,163,184,0.35); --gr-border-soft: rgba(148,163,184,0.14); --gr-input-bg: #14243b; --gr-soft: #1a2d49; --gr-accent: #3b82f6; --gr-accent-soft: rgba(59,130,246,0.16); --gr-accent-text: #93c5fd; --gr-primary-bg: #3b82f6; --gr-primary-fg: #ffffff; --gr-danger: #f87171; --gr-label: #dbeafe; --gr-shadow: rgba(0,0,0,0.5); }
+  [data-guardrail] { color-scheme: dark; }
+}
+
+/* ---- components ------------------------------------------------------------ */
+
+.gr-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--gr-overlay-bg);
+  color: var(--gr-overlay-fg);
+  padding: 12px 16px;
+  z-index: 10000;
+  border-top: 1px solid var(--gr-overlay-border);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-banner-form {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.gr-brand {
+  font-weight: 900;
+  letter-spacing: 0.15em;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+.gr-brand-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+.gr-error {
+  color: var(--gr-danger);
+  font-size: 12px;
+  font-weight: 700;
+}
+.gr-input {
+  border: 1px solid var(--gr-border-strong);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--gr-fg);
+  background: var(--gr-input-bg);
+  outline: none;
+}
+.gr-primary-btn {
+  background: var(--gr-primary-bg);
+  color: var(--gr-primary-fg);
+  padding: 7px 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+}
+.gr-toolbar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  background: var(--gr-overlay-bg-glass);
+  backdrop-filter: blur(8px);
+  color: var(--gr-overlay-fg);
+  padding: 12px 20px;
+  border-radius: 9999px;
+  box-shadow: 0 20px 40px var(--gr-shadow);
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border: 1px solid var(--gr-overlay-border);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gr-accent);
+}
+.gr-toolbar-label {
+  font-size: 10px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--gr-label);
+}
+.gr-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--gr-border-strong);
+}
+.gr-link-btn {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--gr-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.gr-popover {
+  position: fixed;
+  bottom: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  background: var(--gr-overlay-bg);
+  color: var(--gr-overlay-fg);
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 20px 40px var(--gr-shadow);
+  border: 1px solid var(--gr-overlay-border);
+  min-width: 300px;
+  cursor: default;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--gr-subtle);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.gr-field {
+  border: 1px solid var(--gr-border-strong);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--gr-fg);
+  background: var(--gr-input-bg);
+  width: 100%;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+.gr-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--gr-border-soft);
+}
+.gr-cancel-btn {
+  background: var(--gr-soft);
+  color: var(--gr-fg2);
+  padding: 7px 14px;
+  border-radius: 4px;
+  font-size: 12px;
+  border: none;
+  cursor: pointer;
+}
+.gr-anchored-bar {
+  position: fixed;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--gr-overlay-bg-glass);
+  color: var(--gr-overlay-fg);
+  backdrop-filter: blur(8px);
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px var(--gr-shadow);
+  border: 1px solid var(--gr-overlay-border);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-anchored-panel {
+  position: fixed;
+  z-index: 10001;
+  max-height: calc(100vh - 24px);
+  overflow-y: auto;
+  background: var(--gr-overlay-bg);
+  color: var(--gr-overlay-fg);
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0 12px 32px var(--gr-shadow);
+  border: 1px solid var(--gr-overlay-border);
+  min-width: 260px;
+  max-width: min(340px, calc(100vw - 16px));
+  cursor: default;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--gr-fg);
+  cursor: pointer;
+  padding: 0;
+}
+.gr-icon-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  border: none;
+  background: var(--gr-accent);
+  color: var(--gr-on-accent);
+  cursor: pointer;
+  padding: 0;
+}
+.gr-scrim {
+  position: fixed;
+  inset: 0;
+  background: var(--gr-scrim);
+  z-index: 10002;
+}
+.gr-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: min(420px, 100vw);
+  background: var(--gr-overlay-bg);
+  color: var(--gr-overlay-fg);
+  z-index: 10003;
+  box-shadow: -12px 0 32px var(--gr-shadow);
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--gr-overlay-border);
+}
+.gr-drawer-title {
+  font-size: 14px;
+  font-weight: 800;
+  margin: 0;
+}
+.gr-drawer-body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+.gr-member-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--gr-border-soft);
+}
+.gr-member-email {
+  flex: 1;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gr-select {
+  border: 1px solid var(--gr-border-strong);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font-size: 12px;
+  background: var(--gr-input-bg);
+  color: var(--gr-fg);
+}
+.gr-badge {
+  font-size: 9px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--gr-badge-bg);
+  color: var(--gr-badge-fg);
+}
+.gr-section-label {
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--gr-subtle);
+  margin: 20px 0 8px;
+}
+.gr-picker-scrim {
+  position: fixed;
+  inset: 0;
+  background: var(--gr-scrim-modal);
+  z-index: 10010;
+}
+.gr-picker {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(720px, calc(100vw - 32px));
+  max-height: min(640px, calc(100vh - 32px));
+  background: var(--gr-overlay-bg);
+  color: var(--gr-overlay-fg);
+  border-radius: 12px;
+  z-index: 10011;
+  box-shadow: 0 24px 64px var(--gr-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
+}
+.gr-picker-tile {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid transparent;
+  background: var(--gr-soft);
+  cursor: pointer;
+  padding: 0;
+}
+.gr-picker-tile-active {
+  border-color: var(--gr-accent);
+}
+.gr-picker-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.gr-dropzone {
+  border: 1.5px dashed var(--gr-border-strong);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--gr-muted);
+  margin-bottom: 14px;
+  cursor: pointer;
+}
+.gr-dropzone-active {
+  border-color: var(--gr-accent);
+  background: var(--gr-accent-soft);
+  color: var(--gr-accent-text);
+}
+.gr-preview-thumb {
+  width: 100%;
+  max-width: 300px;
+  height: auto;
+  max-height: 200px;
+  object-fit: contain;
+  background: var(--gr-soft);
+  border-radius: 6px;
+  display: block;
+  margin-bottom: 8px;
+}
+.gr-secondary-btn {
+  background: var(--gr-soft);
+  color: var(--gr-fg);
+  padding: 7px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.gr-marker-outline {
+  position: fixed;
+  z-index: 9990;
+  pointer-events: none;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+.gr-marker-handle {
+  position: fixed;
+  z-index: 9991;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px 4px 7px;
+  border-radius: 6px;
+  border: none;
+  background: var(--gr-accent);
+  color: var(--gr-on-accent);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: system-ui, -apple-system, sans-serif;
+  cursor: pointer;
+  box-shadow: 0 4px 12px var(--gr-shadow);
+}
+.gr-repeater-item {
+  position: relative;
+  outline: 1px dashed var(--gr-field-outline);
+  outline-offset: 2px;
+}
+.gr-repeater-toolbar {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 20;
+  display: flex;
+  gap: 2px;
+  background: var(--gr-overlay-bg-glass);
+  color: var(--gr-overlay-fg);
+  backdrop-filter: blur(6px);
+  padding: 3px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px var(--gr-shadow);
+  border: 1px solid var(--gr-overlay-border);
+}
+.gr-repeater-add-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.gr-repeater-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 6px;
+  border: 1.5px dashed var(--gr-accent);
+  background: transparent;
+  color: var(--gr-accent);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.gr-repeater-slug-input {
+  border: 1px solid var(--gr-border-strong);
+  border-radius: 4px;
+  padding: 7px 9px;
+  font-size: 13px;
+  color: var(--gr-fg);
+  background: var(--gr-input-bg);
+  min-width: 180px;
+}
+
+/* ---- modifiers and utilities ----------------------------------------------
+ * Single-class rules that follow the components above, so they win over a
+ * component's own value when both are on one element. */
+
+.gr-text-fg { color: var(--gr-fg); }
+.gr-text-muted { color: var(--gr-muted); }
+.gr-text-subtle { color: var(--gr-subtle); }
+.gr-text-danger { color: var(--gr-danger); }
+.gr-fs-11 { font-size: 11px; }
+.gr-fs-12 { font-size: 12px; }
+.gr-fs-13 { font-size: 13px; }
+.gr-lh-15 { line-height: 1.5; }
+.gr-m-0 { margin: 0; }
+.gr-mx-6 { margin-left: 6px; margin-right: 6px; }
+.gr-mt-8 { margin-top: 8px; }
+.gr-mt-10 { margin-top: 10px; }
+.gr-mt-16 { margin-top: 16px; }
+.gr-mb-0 { margin-bottom: 0; }
+.gr-mb-8 { margin-bottom: 8px; }
+.gr-mb-12 { margin-bottom: 12px; }
+.gr-mb-16 { margin-bottom: 16px; }
+.gr-p-0 { padding: 0; }
+.gr-w-full { width: 100%; }
+.gr-w-auto { width: auto; }
+.gr-size-22 { width: 22px; height: 22px; }
+.gr-size-24 { width: 24px; height: 24px; }
+.gr-flex { display: flex; }
+.gr-inline-flex { display: inline-flex; }
+.gr-flex-1 { flex: 1; }
+.gr-items-center { align-items: center; }
+.gr-justify-between { justify-content: space-between; }
+.gr-justify-end { justify-content: flex-end; }
+.gr-gap-4 { gap: 4px; }
+.gr-gap-6 { gap: 6px; }
+.gr-gap-8 { gap: 8px; }
+.gr-no-underline { text-decoration: none; }
+
+/* A text-only button, e.g. "Forgot password?". */
+.gr-text-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--gr-muted);
+  font-size: 12px;
+  text-decoration: underline;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+/* ---- editable fields ------------------------------------------------------
+ * Drawn on the developer's own elements by <GRail>, which marks them with a
+ * data attribute instead of a style attribute. Images get a separate marker. */
+
+[data-gr-field] { cursor: pointer; }
+[data-gr-field="text"] { outline: 1px dashed var(--gr-field-outline); outline-offset: 2px; }
+[data-gr-field="text"][data-gr-editing] { outline: 2px solid var(--gr-field-outline-active); cursor: text; }
+
+.gr-marker-outline { border: 1px dashed var(--gr-field-outline); }
+.gr-marker-outline[data-gr-editing] { border: 2px solid var(--gr-field-outline-active); }
+
+/* ---- drawer animation ------------------------------------------------------ */
+@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
+  }
+}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@guard-rail/core",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Lightweight inline content editing for developer-owned Next.js sites.",
   "license": "ISC",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -20,6 +22,7 @@
       "types": "./dist/index.client.d.ts",
       "default": "./dist/index.client.js"
     },
+    "./styles.css": "./dist/react/guardrail.css",
     "./adapters/supabase": {
       "types": "./dist/adapters/supabase/index.d.ts",
       "default": "./dist/adapters/supabase/index.js"
@@ -38,13 +41,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepare": "pnpm run build",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "@supabase/ssr": ">=0.8.0 <1",
     "@supabase/supabase-js": "^2.0.0",
@@ -69,5 +65,10 @@
     "react": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}