@drawnagency/primitives 0.1.92 → 0.1.94

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -5,9 +5,11 @@ import { ColorPicker } from "../shared/ColorPicker";
 import { FontPicker } from "../shared/FontPicker";
 import { Input } from "../shared/Input";
 import { Select } from "../shared/Select";
+import { SubTabs } from "../shared/SubTabs";
 import { FormLabel } from "../shared/FormLabel";
 import { useMediaLibrary } from "./MediaLibraryContext";
-import { deriveContrast } from "../../lib/contrast";
+import { contrastRatio, wcagLevel, suggestAccessibleOn } from "../../lib/contrast";
+import { cn } from "../../lib/cn";
 import { buildGoogleFontsUrl } from "../../lib/google-fonts";
 import type { SiteConfig } from "../../schemas/site-config";
 import type { MediaItem } from "../../media/types";
@@ -43,6 +45,39 @@ const cornerRadiusOptions = [
 const FAVICON_TYPES = ["image/svg+xml", "image/png"];
 const FAVICON_MAX_BYTES = 100 * 1024;
 
+// Page-background tokens the brand colors are shown against, so contrast is
+// measured against the real surface (base.css: --color-base is hsl(0 0% 92%)
+// in light, hsl(0 0% 12%) in dark).
+const LIGHT_BASE = "#ebebeb";
+const DARK_BASE = "#1f1f1f";
+
+interface ContrastEntry {
+  mode: string;
+  ratio: number;
+}
+
+/** Compact WCAG readout: contrast ratio + AA / large-only / fail badge per mode. */
+function ContrastRow({ label, entries }: { label: string; entries: ContrastEntry[] }) {
+  return (
+    <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs">
+      <span className="text-base-contrast-light">{label}</span>
+      {entries.map((e) => {
+        const level = wcagLevel(e.ratio);
+        const tone = level.aa ? "text-green-600" : level.aaLarge ? "text-amber-600" : "text-red-600";
+        const mark = level.aa ? "AA" : level.aaLarge ? "large only" : "fail";
+        return (
+          <span key={e.mode} className="inline-flex items-center gap-1">
+            {entries.length > 1 && <span className="text-base-contrast-light">{e.mode}</span>}
+            <span className={cn("font-medium tabular-nums", tone)}>
+              {e.ratio.toFixed(2)}:1 · {mark}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
 export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
   const [faviconError, setFaviconError] = useState<string | null>(null);
   const mediaLibrary = useMediaLibrary();
@@ -82,17 +117,34 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
     update({ primaryContrast: color });
   }
 
-  function resetContrastToAuto() {
-    update({ primaryContrast: deriveContrast(siteConfig.primaryColor) });
+  function suggestAccent() {
+    update({ primaryContrast: suggestAccessibleOn(siteConfig.primaryColor) });
+  }
+
+  function handleDarkColorChange(color: string) {
+    update({ primaryColorDark: color });
+  }
+
+  function handleDarkContrastChange(color: string) {
+    update({ primaryContrastDark: color });
+  }
+
+  function suggestAccentDark() {
+    update({ primaryContrastDark: suggestAccessibleOn(siteConfig.primaryColorDark ?? siteConfig.primaryColor) });
   }
 
+  const customizeDarkPrimary = () => update({ primaryColorDark: siteConfig.primaryColor });
+  const matchLightPrimary = () => update({ primaryColorDark: null });
+  const customizeDarkAccent = () => update({ primaryContrastDark: siteConfig.primaryContrast });
+  const matchLightAccent = () => update({ primaryContrastDark: null });
+
   function handleFontChange(field: "headingFont" | "bodyFont", family: string) {
     const next = { ...siteConfig, [field]: family };
     next.googleFontsUrl = buildGoogleFontsUrl(next.headingFont, next.bodyFont);
     onChange(next);
   }
 
-  return (
+  const detailsContent = (
     <div className="space-y-5">
       <Input
         label="Site name"
@@ -102,34 +154,25 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
       />
 
       <div>
-        <FormLabel>Primary color</FormLabel>
-        <div className="flex items-center gap-3">
-          <ColorPicker
-            value={siteConfig.primaryColor}
-            onChange={handleColorChange}
-            label="Primary color"
-          />
-          <span className="text-sm text-base-contrast-light">{siteConfig.primaryColor}</span>
-        </div>
-      </div>
-
-      <div>
-        <FormLabel>Accent (button &amp; highlight text)</FormLabel>
-        <div className="flex items-center gap-3">
-          <ColorPicker
-            value={siteConfig.primaryContrast}
-            onChange={handleContrastChange}
-            label="Accent color"
-          />
-          <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrast}</span>
-          <Button type="button" variant="ghost" size="sm" onClick={resetContrastToAuto}>
-            Reset to auto
-          </Button>
+        <FormLabel htmlFor="site-description">Description</FormLabel>
+        <textarea
+          id="site-description"
+          aria-label="Site description"
+          rows={2}
+          maxLength={300}
+          value={siteConfig.description ?? ""}
+          onChange={(e) => update({ description: e.target.value || null })}
+          placeholder="Short summary for search results and social shares."
+          className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast"
+        />
+        <div className="mt-1 flex items-start justify-between gap-2">
+          <p className="text-xs text-base-contrast/70">
+            Used for the page's meta description and the social / OG preview.
+          </p>
+          <span className="shrink-0 text-xs text-base-contrast-light tabular-nums">
+            {(siteConfig.description ?? "").length}/300
+          </span>
         </div>
-        <p className="mt-1 text-xs text-base-contrast/70">
-          Shown as text on primary-colored buttons and as the text-selection color. "Reset to auto" derives a
-          legible light or dark value from your primary brand color.
-        </p>
       </div>
 
       <div>
@@ -259,6 +302,58 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
           </div>
         );
       })()}
+    </div>
+  );
+
+  // Which modes to score depends on darkMode: light-only shows Light, dark-only
+  // shows Dark, "optional" shows both (and reveals the per-mode variant inputs).
+  const showLight = siteConfig.darkMode !== "dark";
+  const showDark = siteConfig.darkMode !== "light";
+  const effPrimaryDark = siteConfig.primaryColorDark ?? siteConfig.primaryColor;
+  const effAccentDark = siteConfig.primaryContrastDark ?? siteConfig.primaryContrast;
+  const primaryTextEntries: ContrastEntry[] = [
+    ...(showLight ? [{ mode: "Light", ratio: contrastRatio(siteConfig.primaryColor, LIGHT_BASE) }] : []),
+    ...(showDark ? [{ mode: "Dark", ratio: contrastRatio(effPrimaryDark, DARK_BASE) }] : []),
+  ];
+  const accentEntries: ContrastEntry[] = [
+    ...(showLight ? [{ mode: "Light", ratio: contrastRatio(siteConfig.primaryContrast, siteConfig.primaryColor) }] : []),
+    ...(showDark ? [{ mode: "Dark", ratio: contrastRatio(effAccentDark, effPrimaryDark) }] : []),
+  ];
+
+  const stylesContent = (
+    <div className="space-y-5">
+      <div>
+        <FormLabel>Primary color</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryColor}
+            onChange={handleColorChange}
+            label="Primary color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryColor}</span>
+        </div>
+        <ContrastRow label="As heading / link text" entries={primaryTextEntries} />
+      </div>
+
+      <div>
+        <FormLabel>Accent (button &amp; highlight text)</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryContrast}
+            onChange={handleContrastChange}
+            label="Accent color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrast}</span>
+          <Button type="button" variant="ghost" size="sm" onClick={suggestAccent}>
+            Suggest
+          </Button>
+        </div>
+        <ContrastRow label="As button label on primary" entries={accentEntries} />
+        <p className="mt-1 text-xs text-base-contrast/70">
+          Shown as text on primary-colored buttons and as the text-selection color. "Suggest" picks the black
+          or white with the strongest contrast on your primary color.
+        </p>
+      </div>
 
       <Select
         label="Dark mode"
@@ -267,6 +362,68 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         options={darkModeOptions}
       />
 
+      {siteConfig.darkMode === "optional" && (
+        <div className="space-y-4 border-l-2 border-base-200 pl-3">
+          <div>
+            <p className="text-sm font-medium text-base-contrast">Dark mode variants</p>
+            <p className="mt-0.5 text-xs text-base-contrast-light">
+              Optional overrides used only in dark mode, so light and dark can each hit their own contrast target.
+            </p>
+          </div>
+
+          <div>
+            <FormLabel>Primary (dark)</FormLabel>
+            {!siteConfig.primaryColorDark ? (
+              <div className="flex items-center gap-3">
+                <span className="text-sm text-base-contrast-light">Matches light ({siteConfig.primaryColor})</span>
+                <Button type="button" variant="secondary" size="sm" onClick={customizeDarkPrimary}>
+                  Customize
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <ColorPicker
+                  value={siteConfig.primaryColorDark}
+                  onChange={handleDarkColorChange}
+                  label="Primary color (dark)"
+                />
+                <span className="text-sm text-base-contrast-light">{siteConfig.primaryColorDark}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={matchLightPrimary}>
+                  Match light
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div>
+            <FormLabel>Accent (dark)</FormLabel>
+            {!siteConfig.primaryContrastDark ? (
+              <div className="flex items-center gap-3">
+                <span className="text-sm text-base-contrast-light">Matches light ({siteConfig.primaryContrast})</span>
+                <Button type="button" variant="secondary" size="sm" onClick={customizeDarkAccent}>
+                  Customize
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <ColorPicker
+                  value={siteConfig.primaryContrastDark}
+                  onChange={handleDarkContrastChange}
+                  label="Accent color (dark)"
+                />
+                <span className="text-sm text-base-contrast-light">{siteConfig.primaryContrastDark}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={suggestAccentDark}>
+                  Suggest
+                </Button>
+                <Button type="button" variant="ghost" size="sm" onClick={matchLightAccent}>
+                  Match light
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       <div>
         <Select
           label="Corner radius"
@@ -278,7 +435,11 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
           Rounding of cards, media frames, buttons, and panels across the site.
         </p>
       </div>
+    </div>
+  );
 
+  const typographyContent = (
+    <div className="space-y-5">
       <FontPicker
         label="Heading font"
         value={siteConfig.headingFont}
@@ -310,4 +471,14 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
       />
     </div>
   );
+
+  return (
+    <SubTabs
+      tabs={[
+        { id: "details", label: "Details", content: detailsContent },
+        { id: "styles", label: "Styles", content: stylesContent },
+        { id: "typography", label: "Typography", content: typographyContent },
+      ]}
+    />
+  );
 }

package/src/components/shell/ViewerLoginForm.tsx

@@ -1,6 +1,7 @@
 import { useState, type FormEvent } from "react";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
+import { Select } from "../shared/Select";
 import { safeRedirect } from "../../lib/safeRedirect";
 
 interface Props {
@@ -14,6 +15,11 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const audienceOptions = [
+    ...(audiences.length > 1 ? [{ value: "", label: "Select audience..." }] : []),
+    ...audiences.map((a) => ({ value: a.name, label: a.displayName })),
+  ];
+
   // An open (passwordless) audience needs no password field — enter with one click.
   // Default to requiring a password until an audience is chosen so the field
   // doesn't flash for the "Select audience..." state.
@@ -56,25 +62,12 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   return (
     <div className="mx-auto max-w-sm">
       <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="audience" className="mb-1.5 block text-sm font-medium text-base-contrast">
-            Audience
-          </label>
-          <select
-            id="audience"
-            value={audience}
-            onChange={(e) => setAudience(e.target.value)}
-            required
-            className="w-full rounded border border-base-200 px-3 py-2 text-sm"
-          >
-            {audiences.length > 1 && <option value="">Select audience...</option>}
-            {audiences.map((a) => (
-              <option key={a.name} value={a.name}>
-                {a.displayName}
-              </option>
-            ))}
-          </select>
-        </div>
+        <Select
+          label="Audience"
+          value={audience}
+          onChange={setAudience}
+          options={audienceOptions}
+        />
 
         {needsPassword && (
           <PasswordInput

package/src/hooks/useMediaPipeline.ts

@@ -13,6 +13,7 @@ import {
   removePendingMediaDeletion,
 } from "../lib/dexie";
 import { generateVideoPoster } from "../media/videoPoster";
+import { ASSET_CACHE_CONTROL } from "../storage/types";
 import { tallyImageIds, collectImageIds, clearImageIds, applyLogoDeletion } from "../lib/image-refs";
 import {
   createFolderId, uniqueFolderName, effectiveParentId, canMoveFolder,
@@ -285,6 +286,9 @@ export function useMediaPipeline({
           const xhr = new XMLHttpRequest();
           xhr.open("PUT", uploadUrl);
           xhr.setRequestHeader("Content-Type", file.type);
+          // Without this the object is stored as `no-cache` and every later
+          // play is billed origin egress — see ASSET_CACHE_CONTROL.
+          xhr.setRequestHeader("Cache-Control", ASSET_CACHE_CONTROL);
           xhr.upload.onprogress = (e) => {
             if (e.lengthComputable) setUploadProgress((prev) => ({ ...prev, [hash as string]: e.loaded / e.total }));
           };

package/src/lib/contrast.ts

@@ -21,3 +21,55 @@ export function contrastColor(hex: string): "#1a1a1a" | "#ffffff" {
   const b = parseInt(h.slice(4, 6), 16);
   return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? "#1a1a1a" : "#ffffff";
 }
+
+// --- WCAG 2.x contrast (relative-luminance based) -------------------------
+
+function toRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  const x = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+  return [
+    parseInt(x.slice(0, 2), 16),
+    parseInt(x.slice(2, 4), 16),
+    parseInt(x.slice(4, 6), 16),
+  ];
+}
+
+/** WCAG relative luminance of an sRGB hex color (0 = black, 1 = white). */
+export function relativeLuminance(hex: string): number {
+  const [r, g, b] = toRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** WCAG contrast ratio between two hex colors, 1 (identical) → 21 (#000/#fff). */
+export function contrastRatio(a: string, b: string): number {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export interface WcagLevel {
+  /** ≥ 4.5:1 — AA for normal-size text. */
+  aa: boolean;
+  /** ≥ 3:1 — AA for large text and UI components. */
+  aaLarge: boolean;
+  /** ≥ 7:1 — AAA for normal-size text. */
+  aaa: boolean;
+}
+
+export function wcagLevel(ratio: number): WcagLevel {
+  return { aa: ratio >= 4.5, aaLarge: ratio >= 3, aaa: ratio >= 7 };
+}
+
+/**
+ * Pick the pure black/white that maximizes contrast against `bg` — used to
+ * suggest an accessible accent (text on a primary-colored button). Pure b/w
+ * gives the highest achievable ratio for a foreground on a fixed background.
+ */
+export function suggestAccessibleOn(bg: string): "#000000" | "#ffffff" {
+  return contrastRatio("#000000", bg) >= contrastRatio("#ffffff", bg) ? "#000000" : "#ffffff";
+}

package/src/lib/index.ts

@@ -3,7 +3,16 @@ export { cn } from "./cn";
 export { audiencePasses } from "./pages";
 export { resolveChatbotName, resolveThinkingPhrases, DEFAULT_CHATBOT_NAME } from "./chatbot";
 export { generateNavLinks, toSectionId, type NavItem } from "./nav";
-export { deriveContrast, contrastColor } from "./contrast";
+export {
+  deriveContrast,
+  contrastColor,
+  relativeLuminance,
+  contrastRatio,
+  wcagLevel,
+  suggestAccessibleOn,
+  type WcagLevel,
+} from "./contrast";
+export { primaryVarValue, accentVarValue } from "./theme-vars";
 export { sanitizeHtml, ensureSanitizer } from "./sanitize";
 export { gridColsClass } from "./grid";
 export { getIcon, curatedIcons, type IconEntry } from "./icons";

package/src/lib/theme-vars.ts

@@ -0,0 +1,31 @@
+import type { SiteConfig } from "../schemas/site-config";
+
+/**
+ * Computes the CSS value for the brand `--color-primary` / `--color-primary-contrast`
+ * custom properties. When darkMode is "optional" AND a dark variant is set, the
+ * value is a CSS `light-dark(<light>, <dark>)` expression — the browser resolves
+ * it per the element's `color-scheme` (the `.dark` class sets `color-scheme: dark`;
+ * `:root` sets `color-scheme: light`). Otherwise it's the plain light hex.
+ *
+ * Single source of truth for every injection site: Layout.astro / LoginLayout.astro
+ * (SSR inline `<html style>`) and EditorShell (live setProperty + localStorage).
+ */
+type ThemeColorConfig = Pick<
+  SiteConfig,
+  "primaryColor" | "primaryContrast" | "primaryColorDark" | "primaryContrastDark" | "darkMode"
+>;
+
+const DEFAULT_PRIMARY = "#009ca6";
+const DEFAULT_CONTRAST = "#f0f0f0";
+
+function lightDark(light: string, dark: string | null | undefined, optional: boolean): string {
+  return optional && dark ? `light-dark(${light}, ${dark})` : light;
+}
+
+export function primaryVarValue(c?: Partial<ThemeColorConfig> | null): string {
+  return lightDark(c?.primaryColor ?? DEFAULT_PRIMARY, c?.primaryColorDark, c?.darkMode === "optional");
+}
+
+export function accentVarValue(c?: Partial<ThemeColorConfig> | null): string {
+  return lightDark(c?.primaryContrast ?? DEFAULT_CONTRAST, c?.primaryContrastDark, c?.darkMode === "optional");
+}

package/src/schemas/site-config.ts

@@ -127,15 +127,41 @@ const CanonicalIndexSchema = z
       seenSlugs.add(p.slug);
     }
 
+    // Page section orders must partition sections{} exactly: every section id
+    // appears in exactly one page order, and every page-order id has a
+    // sections{} entry. On failure, name the offending ids by category so an
+    // agent (or human) can act without diffing the whole index by hand.
+    const fmtIds = (ids: string[]) => ids.map((id) => `"${id}"`).sort().join(", ");
     const fromPages: string[] = [];
     for (const p of data.pages) fromPages.push(...p.order);
     const fromPagesSet = new Set(fromPages);
-    if (fromPages.length !== fromPagesSet.size) {
-      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "A section id appears in more than one page" });
-    }
     const sectionKeys = Object.keys(data.sections);
-    if (fromPagesSet.size !== sectionKeys.length || !sectionKeys.every((k) => fromPagesSet.has(k))) {
-      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Page section orders must partition sections{} exactly" });
+    const sectionSet = new Set(sectionKeys);
+
+    const counts = new Map<string, number>();
+    for (const id of fromPages) counts.set(id, (counts.get(id) ?? 0) + 1);
+    const duplicated = [...counts].filter(([, n]) => n > 1).map(([id]) => id);
+    if (duplicated.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) appear in more than one page order: ${fmtIds(duplicated)}`,
+      });
+    }
+
+    const orderedNotInSections = [...fromPagesSet].filter((id) => !sectionSet.has(id));
+    if (orderedNotInSections.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) in a page order but missing from sections{}: ${fmtIds(orderedNotInSections)}`,
+      });
+    }
+
+    const sectionsNotOrdered = sectionKeys.filter((id) => !fromPagesSet.has(id));
+    if (sectionsNotOrdered.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Section id(s) in sections{} but not in any page order: ${fmtIds(sectionsNotOrdered)}`,
+      });
     }
   });
 
@@ -201,6 +227,12 @@ export const SiteConfigSchema = z.object({
   siteName: z.string().default("Brand Portal"),
   primaryColor: HexColorSchema.default("#009ca6"),
   primaryContrast: HexColorSchema.default("#f0f0f0"),
+  // Dark-mode overrides for the brand primary / accent. Only applied when
+  // darkMode is "optional" (both modes are reachable, so a single value can't
+  // satisfy both). null = reuse the light value in dark mode. Rendered via the
+  // CSS light-dark() function (see lib/theme-vars.ts).
+  primaryColorDark: HexColorSchema.nullable().default(null),
+  primaryContrastDark: HexColorSchema.nullable().default(null),
   darkMode: z.enum(["light", "dark", "optional"]).default("light"),
   // Maps to the --radius-outer design token (see lib/corner-radius.ts);
   // defaults so pre-existing site-config.json files keep parsing.

package/src/storage/index.ts

@@ -1,2 +1,2 @@
 export type { StorageProvider, FileWrite, AssetStore } from "./types";
-export { StorageConflictError } from "./types";
+export { StorageConflictError, ASSET_CACHE_CONTROL } from "./types";

package/src/storage/types.ts

@@ -39,6 +39,21 @@ export type FileWrite = {
   encoding?: "utf-8" | "base64";
 };
 
+/**
+ * `Cache-Control` every bucket upload must set. Object paths are content-hashed
+ * ("media/{hash}/original.mp4"), so a given URL's bytes never change — replacing
+ * a video mints a new hash and therefore a new URL. That makes `immutable` safe
+ * and a one-year max-age correct.
+ *
+ * This is NOT cosmetic. A bucket upload sent with no `cache-control` request
+ * header is stored as `no-cache`, which means neither the browser nor a CDN will
+ * ever reuse a response — every play of every video becomes origin egress,
+ * including a plain page reload. That default is what exhausted the Supabase
+ * project's egress quota while the bucket sat at 46% of its size limit. Any new
+ * upload path MUST send this header.
+ */
+export const ASSET_CACHE_CONTROL = "max-age=31536000, immutable";
+
 /**
  * Optional large-asset store (Supabase Storage bucket). Holds video originals
  * too big for the git path; deliberately generic so future large kinds (zips)

package/src/types/database.ts

@@ -737,6 +737,16 @@ export type Database = {
         Returns: undefined
       }
       collab_site_member: { Args: { p_site_id: string }; Returns: boolean }
+      get_site_users_with_status: {
+        Args: { p_site_id: string }
+        Returns: {
+          created_at: string | null
+          email: string
+          last_sign_in_at: string | null
+          role: string
+          user_id: string
+        }[]
+      }
       get_user_id_by_email: { Args: { lookup_email: string }; Returns: string }
       heartbeat_section_locks: {
         Args: { p_section_ids: string[]; p_site_id: string }