@drawnagency/primitives 0.1.92 → 0.1.93

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/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/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 }