@drawnagency/primitives 0.1.105 → 0.1.106

package/src/components/shell/ViewerLoginForm.tsx

@@ -1,16 +1,25 @@
 import { useState, type FormEvent } from "react";
+import { Input } from "../shared/Input";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { Select } from "../shared/Select";
 import { safeRedirect } from "../../lib/safeRedirect";
 
 interface Props {
+  /** Audience mode only. Empty (and unused) in credential mode — the page must
+   *  not ship an audience list to a login form that doesn't offer the choice. */
   audiences: Array<{ name: string; displayName: string; hasPassword?: boolean }>;
+  /** Set by the page from the auth provider's capability, never by the client. */
+  mode?: "audience" | "credentials";
   next?: string | null;
 }
 
-export function ViewerLoginForm({ audiences, next }: Props) {
-  const [audience, setAudience] = useState(audiences.length === 1 ? audiences[0].name : "");
+export function ViewerLoginForm({ audiences, mode = "audience", next }: Props) {
+  const credentialMode = mode === "credentials";
+  const [username, setUsername] = useState("");
+  const [audience, setAudience] = useState(
+    !credentialMode && audiences.length === 1 ? audiences[0].name : "",
+  );
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -22,19 +31,19 @@ export function ViewerLoginForm({ audiences, next }: Props) {
 
   // 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.
+  // doesn't flash for the "Select audience..." state. Credential mode always
+  // takes a password.
   const selected = audiences.find((a) => a.name === audience);
-  const needsPassword = selected ? selected.hasPassword !== false : true;
+  const needsPassword = credentialMode || (selected ? selected.hasPassword !== false : true);
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     setLoading(true);
     setError(null);
 
-    const body: { audience: string; password: string; next?: string } = {
-      audience,
-      password: needsPassword ? password : "",
-    };
+    const body: { audience?: string; username?: string; password: string; next?: string } = credentialMode
+      ? { username: username.trim().toLowerCase(), password }
+      : { audience, password: needsPassword ? password : "" };
     if (next) body.next = next;
 
     try {
@@ -62,12 +71,23 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   return (
     <div className="mx-auto max-w-sm">
       <form onSubmit={handleSubmit} className="space-y-4">
-        <Select
-          label="Audience"
-          value={audience}
-          onChange={setAudience}
-          options={audienceOptions}
-        />
+        {credentialMode ? (
+          <Input
+            label="Username"
+            value={username}
+            onChange={setUsername}
+            autoComplete="username"
+            autoCapitalize="none"
+            spellCheck={false}
+          />
+        ) : (
+          <Select
+            label="Audience"
+            value={audience}
+            onChange={setAudience}
+            options={audienceOptions}
+          />
+        )}
 
         {needsPassword && (
           <PasswordInput
@@ -86,7 +106,7 @@ export function ViewerLoginForm({ audiences, next }: Props) {
           type="submit"
           variant="brand"
           size="md"
-          disabled={loading || !audience}
+          disabled={loading || (credentialMode ? username.trim().length === 0 : !audience)}
           isLoading={loading}
           loadingLabel="Verifying..."
           className="w-full"

package/src/lib/audience-overview.ts

@@ -0,0 +1,110 @@
+/**
+ * What each audience can actually see. Powers the Audience Details page, which
+ * answers "if I give a partner this password, what do they get?".
+ *
+ * Pure and view-agnostic: section labels/thumbnails are resolved by the caller
+ * (they need the section registry and the media provider) and passed in, so this
+ * stays trivially testable and ships no registry into viewer JS.
+ */
+import type { SiteIndex } from "../schemas/site-config";
+import { audiencePasses, pageDisplayTitle } from "./pages";
+import type { ThumbView } from "./thumb-views";
+
+/** Caller-resolved presentation for one section. */
+export interface SectionDisplay {
+  label: string;
+  typeLabel: string;
+  thumbnails: ThumbView[];
+}
+
+export interface OverviewSection extends SectionDisplay {
+  id: string;
+  available: boolean;
+  /** Live-but-draft sections are invisible to EVERY audience, not just this one. */
+  draft: boolean;
+}
+
+export interface OverviewPage {
+  id: string;
+  title: string;
+  slug: string;
+  href: string;
+  /** Live but off the sidebar — reachable by URL, so it counts as available. */
+  hiddenFromNav: boolean;
+  /** none = the page itself is gated away; partial = page in, some sections out. */
+  availability: "full" | "partial" | "none";
+  sections: OverviewSection[];
+}
+
+export interface AudienceOverview {
+  audience: string;
+  pages: OverviewPage[];
+  pagesAvailable: number;
+  pagesTotal: number;
+  sectionsAvailable: number;
+  sectionsTotal: number;
+}
+
+/**
+ * Availability for one audience across the whole site.
+ *
+ * Archived pages are excluded outright (nobody can reach them). Draft sections
+ * are listed as unavailable but flagged, so a page reading "3 of 8" is not
+ * mistaken for an access problem.
+ *
+ * The cascade matters: a section whose own access allows this audience is still
+ * unavailable inside a page that gates them out. Page access wins.
+ */
+export function buildAudienceOverview(
+  index: SiteIndex,
+  display: (sectionId: string) => SectionDisplay,
+  audience: string,
+): AudienceOverview {
+  const pages: OverviewPage[] = [];
+  let sectionsAvailable = 0;
+  let sectionsTotal = 0;
+  let pagesAvailable = 0;
+
+  for (const page of index.pages) {
+    if (page.status === "archived") continue;
+    const pageOpen = audiencePasses(page.access, audience);
+    if (pageOpen) pagesAvailable++;
+
+    const sections: OverviewSection[] = [];
+    for (const id of page.order) {
+      const meta = index.sections[id];
+      // Not in the index — the loader would drop it too; nothing to report.
+      if (!meta) continue;
+      if (meta.status === "archived") continue;
+      const draft = meta.status !== "live";
+      const available = pageOpen && !draft && audiencePasses(meta.access, audience);
+      sectionsTotal++;
+      if (available) sectionsAvailable++;
+      sections.push({ id, available, draft, ...display(id) });
+    }
+
+    const availableHere = sections.filter((s) => s.available).length;
+    pages.push({
+      id: page.id,
+      title: pageDisplayTitle(page.title),
+      slug: page.slug,
+      href: page.slug === "" ? "/" : `/${page.slug}`,
+      hiddenFromNav: !page.showInNav,
+      availability: !pageOpen
+        ? "none"
+        : availableHere === sections.length
+          ? "full"
+          : "partial",
+      sections,
+    });
+  }
+
+  return {
+    audience,
+    pages,
+    pagesAvailable,
+    pagesTotal: pages.length,
+    sectionsAvailable,
+    sectionsTotal,
+  };
+}

package/src/lib/audience-secret.ts

@@ -0,0 +1,99 @@
+/**
+ * Reversible storage for audience (viewer) passwords, so an editor or the
+ * default audience can be SHOWN an existing password rather than only replacing
+ * it. `password_hash` is bcrypt and one-way, so a sealed copy is stored beside
+ * it and opened on demand.
+ *
+ * The key is derived from the site's own SESSION_SECRET via HKDF — no new env
+ * var, no provisioner change, and (in platform mode) the shared Supabase project
+ * stores only a blob it cannot open, because the secret lives in the client
+ * site's Netlify env alone.
+ *
+ * This is envelope encryption with a derived key, NOT a KMS: whoever holds both
+ * SESSION_SECRET and the row recovers the password. That is the same secret that
+ * already signs every session cookie, and the protected value is a shared
+ * viewing password — an accepted bar, stated so it is never mistaken for more.
+ *
+ * WebCrypto only, no `node:crypto` at module scope: auth-supabase/supabase.ts
+ * value-imports this and is browser-reachable via portal.config.mjs (see
+ * .claude/rules/dev-server-symlinks.md and the sigv4.ts precedent).
+ */
+import { requireSessionSecret } from "../auth/security";
+
+/** Domain separation: this key must never coincide with a future HKDF use. */
+const INFO = "drawnagency:audience-password:v1";
+const VERSION = "v1";
+const IV_BYTES = 12;
+
+const enc = new TextEncoder();
+const dec = new TextDecoder();
+
+function toBase64Url(bytes: Uint8Array): string {
+  let binary = "";
+  for (const b of bytes) binary += String.fromCharCode(b);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function fromBase64Url(value: string): Uint8Array {
+  const padded = value.replace(/-/g, "+").replace(/_/g, "/");
+  const binary = atob(padded + "=".repeat((4 - (padded.length % 4)) % 4));
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+// Derived per call rather than memoised: HKDF is cheap next to the bcrypt
+// compare that always accompanies it, and a cache would outlive a rotated
+// SESSION_SECRET within a warm serverless process.
+async function deriveKey(): Promise<CryptoKey> {
+  const base = await crypto.subtle.importKey(
+    "raw",
+    requireSessionSecret() as BufferSource,
+    "HKDF",
+    false,
+    ["deriveKey"],
+  );
+  return crypto.subtle.deriveKey(
+    { name: "HKDF", hash: "SHA-256", salt: new Uint8Array(0), info: enc.encode(INFO) },
+    base,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"],
+  );
+}
+
+/** Seal a plaintext password into `v1.<iv>.<ciphertext>` (base64url parts). */
+export async function sealAudiencePassword(password: string): Promise<string> {
+  const iv = crypto.getRandomValues(new Uint8Array(IV_BYTES));
+  const ciphertext = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv: iv as BufferSource },
+    await deriveKey(),
+    enc.encode(password) as BufferSource,
+  );
+  return `${VERSION}.${toBase64Url(iv)}.${toBase64Url(new Uint8Array(ciphertext))}`;
+}
+
+/**
+ * Open a sealed password, or null when it cannot be trusted — unknown version,
+ * malformed parts, tampered ciphertext (GCM auth failure), or a rotated
+ * SESSION_SECRET. Callers treat null as "not revealable" and never as an error;
+ * they must ALSO verify the result against the bcrypt hash, since a valid seal
+ * can still be stale (a password changed by a writer that skipped the cipher).
+ */
+export async function openAudiencePassword(sealed: string | null | undefined): Promise<string | null> {
+  if (!sealed) return null;
+  const parts = sealed.split(".");
+  if (parts.length !== 3 || parts[0] !== VERSION) return null;
+  try {
+    const iv = fromBase64Url(parts[1]);
+    if (iv.byteLength !== IV_BYTES) return null;
+    const plain = await crypto.subtle.decrypt(
+      { name: "AES-GCM", iv: iv as BufferSource },
+      await deriveKey(),
+      fromBase64Url(parts[2]) as BufferSource,
+    );
+    return dec.decode(plain);
+  } catch {
+    return null;
+  }
+}

package/src/lib/events.ts

@@ -36,3 +36,6 @@ export const historyRestoreFailedEvent = createEvent<{ message: string }>("histo
 export const editorDirtyEvent = createEvent<{ hasUnsavedChanges: boolean }>("editor-dirty");
 export const siteNavChangeEvent = createEvent<SiteNav>("sitenavchange-v2");
 export const pageSelectEvent = createEvent<string>("pageselect");
+/** Nav → EditorShell: open the Audience Details surface inside the editor, so
+ *  editors keep the toolbar instead of navigating out to the /audiences route. */
+export const audienceDetailsEvent = createEvent<void>("audiencedetailsopen");

package/src/lib/nav.ts

@@ -1,6 +1,6 @@
 import type { LoadedSection } from "./loader";
 import { getSection, type SectionRegistry } from "./registry";
-import { audiencePasses, homePage, pageDisplayTitle } from "./pages";
+import { audiencePasses, pageDisplayTitle } from "./pages";
 import { navEntries } from "./nav-tree";
 import type { SiteIndex } from "../schemas/site-config";
 import type { SiteDocument } from "./documents";
@@ -156,7 +156,11 @@ export function generateSiteNav(opts: {
   documents?: SiteDocument[];
 }): SiteNav {
   const { index, activeSections, activePageId, mode, audience, registry, documents } = opts;
-  const active = activePageId ?? homePage(index).id;
+  // null means NO page is active — not "default to home". Surfaces that are not
+  // a page (the Audience Details route and its in-editor twin) rely on that: a
+  // page must not keep its highlight while you are somewhere else, or the
+  // sidebar claims you are in two places at once.
+  const active = activePageId;
   const byId = new Map(index.pages.map((p) => [p.id, p]));
 
   const toNavItem = (p: (typeof index.pages)[number]): PageNavItem => ({

package/src/lib/thumb-views.ts

@@ -0,0 +1,28 @@
+import type { Thumbnail } from "./registry";
+import { getMediaProvider } from "../media";
+import type { MediaManifest } from "../media/types";
+
+/**
+ * A section thumbnail with its media reference already resolved to a URL, so the
+ * component rendering it needs neither the registry nor the media provider. The
+ * Audience Details page resolves these server-side for exactly that reason.
+ */
+export type ThumbView =
+  | { kind: "color"; value: string }
+  | { kind: "image"; src: string | null; alt: string };
+
+function resolveThumbnailSrc(thumb: Thumbnail & { type: "image" }, manifest: MediaManifest): string | null {
+  const item = manifest.images[thumb.src];
+  if (!item) return null;
+  const resolved = getMediaProvider().resolve(item, [200]);
+  if (!resolved) return null;
+  return resolved.tag === "img" || resolved.tag === "video" ? resolved.src : null;
+}
+
+export function toThumbViews(thumbnails: Thumbnail[], manifest: MediaManifest): ThumbView[] {
+  return thumbnails.map((thumb) =>
+    thumb.type === "color"
+      ? { kind: "color", value: thumb.value }
+      : { kind: "image", src: resolveThumbnailSrc(thumb, manifest), alt: thumb.alt ?? "" },
+  );
+}

package/src/schemas/audience.ts

@@ -15,6 +15,58 @@ export const AudienceColorSchema = HexColorSchema.nullable();
 export type AudienceName = z.infer<typeof AudienceNameSchema>;
 export type AudienceColor = z.infer<typeof AudienceColorSchema>;
 
+/**
+ * A viewer sign-in name. Looser than an audience slug — dots are allowed, so
+ * `agency.jane` works — but still constrained enough to be typed correctly over
+ * the phone. Always lowercased before storage and lookup, so `Agency2` and
+ * `agency2` are the same login.
+ */
+export const ViewerUsernameSchema = z
+  .string()
+  .min(1)
+  .max(64)
+  .regex(
+    /^[a-z0-9]([a-z0-9._-]*[a-z0-9])?$/,
+    "lowercase alphanumeric; dots, dashes and underscores allowed",
+  );
+
+/** Normalize a typed username for storage and lookup. */
+export function normalizeUsername(input: string): string {
+  return input.trim().toLowerCase();
+}
+
+/**
+ * Wire-facing username: lowercased and trimmed BEFORE validation, so `Agency4`
+ * is accepted and stored as `agency4` rather than 400-ing on a case difference.
+ * Everything else the base schema rejects still fails.
+ */
+export const NormalizedUsernameSchema = z
+  .string()
+  .min(1)
+  .max(128)
+  .transform(normalizeUsername)
+  .pipe(ViewerUsernameSchema);
+
+/** Minimum for a NEW credential password. Deliberately stricter than the
+ *  audience passwords it replaces (which allowed a single character). */
+export const VIEWER_PASSWORD_MIN_LENGTH = 8;
+
+export const ViewerPasswordSchema = z.string().min(VIEWER_PASSWORD_MIN_LENGTH);
+
+/** A credential as it travels to the editor and the Audience Details page.
+ *  Never carries the hash or the sealed copy. */
+export const ViewerCredentialSchema = z.object({
+  username: z.string(),
+  label: z.string().nullable(),
+  /** The audience slug this sign-in grants — its content access, verbatim. */
+  audienceName: z.string(),
+  createdAt: z.string(),
+});
+
+export type ViewerUsername = z.infer<typeof ViewerUsernameSchema>;
+export type ViewerCredential = z.infer<typeof ViewerCredentialSchema>;
+
+
 /**
  * Convert a friendly display string into an audience slug.
  * Lowercases, replaces non-alphanumeric runs with single dashes,

package/src/schemas/auth.ts

@@ -21,8 +21,14 @@ export const AudienceSchema = z.object({
   displayName: z.string(),
   color: z.string().nullable(),
   readonly: z.boolean(),
+  /** Some way in exists: a credential in credential mode, an audience-level
+   *  password in `.env` mode. Consumers that only ask "is this gated?" (admin
+   *  dashboard, MCP) keep using this and need no knowledge of credentials. */
   hasPassword: z.boolean(),
   isDefault: z.boolean(),
+  /** Named sign-ins pointing at this audience. Always 0 in `.env` mode, which
+   *  has no credentials — use `hasPassword` there. */
+  credentialCount: z.number().int().nonnegative().default(0),
 });
 
 export type Session = z.infer<typeof SessionSchema>;

package/src/schemas/site-config.ts

@@ -26,7 +26,7 @@ export type SectionMeta = z.infer<typeof SectionMetaSchema>;
 // add its first segment here (the test in Step 1 guards the known set). This is
 // the single source of truth for reserved slugs; the schema, uniquePageSlug, and
 // /api/save all import it.
-export const RESERVED_SLUGS = ["edit", "api", "login", "set-password", "404", "present", "print"] as const;
+export const RESERVED_SLUGS = ["edit", "api", "login", "set-password", "404", "present", "print", "audiences"] as const;
 
 // Subset of RESERVED_SLUGS the index schema hard-rejects at parse time. Only
 // slugs reserved since before client sites existed may hard-fail here: parse-

package/src/types/database.ts

@@ -707,6 +707,54 @@ export type Database = {
           },
         ]
       }
+      viewer_credentials: {
+        Row: {
+          audience_id: string
+          created_at: string
+          id: string
+          label: string | null
+          password_cipher: string | null
+          password_hash: string
+          site_id: string
+          username: string
+        }
+        Insert: {
+          audience_id: string
+          created_at?: string
+          id?: string
+          label?: string | null
+          password_cipher?: string | null
+          password_hash: string
+          site_id: string
+          username: string
+        }
+        Update: {
+          audience_id?: string
+          created_at?: string
+          id?: string
+          label?: string | null
+          password_cipher?: string | null
+          password_hash?: string
+          site_id?: string
+          username?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "viewer_credentials_audience_id_fkey"
+            columns: ["audience_id"]
+            isOneToOne: false
+            referencedRelation: "viewer_audiences"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "viewer_credentials_site_id_fkey"
+            columns: ["site_id"]
+            isOneToOne: false
+            referencedRelation: "sites"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
     }
     Views: {
       [_ in never]: never
@@ -722,6 +770,12 @@ export type Database = {
           site_id: string
           user_id: string
         }[]
+        SetofOptions: {
+          from: "*"
+          to: "editor_locks"
+          isOneToOne: false
+          isSetofReturn: true
+        }
       }
       chat_usage_hit: {
         Args: {
@@ -737,9 +791,9 @@ export type Database = {
       get_site_users_with_status: {
         Args: { p_site_id: string }
         Returns: {
-          created_at: string | null
+          created_at: string
           email: string
-          last_sign_in_at: string | null
+          last_sign_in_at: string
           role: string
           user_id: string
         }[]
@@ -767,10 +821,10 @@ export type Database = {
           p_token_hash: string
         }
         Returns: {
+          client_id: string
+          family_id: string
+          platform_user_id: string
           status: string
-          family_id: string | null
-          client_id: string | null
-          platform_user_id: string | null
         }[]
       }
       provision_claim: { Args: { p_site_id: string }; Returns: boolean }

package/dist/chunk-ZDQ3TT47.js

@@ -1,30 +0,0 @@
-import {
-  HexColorSchema
-} from "./chunk-BGHWUJFV.js";
-
-// src/schemas/audience.ts
-import { z } from "zod";
-var AudienceNameSchema = z.string().min(1).max(32).regex(
-  /^[a-z0-9]([a-z0-9_-]*[a-z0-9])?$/,
-  "lowercase alphanumeric, dashes and underscores allowed"
-);
-var AudienceColorSchema = HexColorSchema.nullable();
-function slugifyAudienceName(input) {
-  return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-
-// src/schemas/media-grid-options.ts
-import { z as z2 } from "zod";
-var MediaGridOptionsSchema = z2.object({
-  square: z2.boolean().optional(),
-  border: z2.boolean().optional(),
-  crop: z2.boolean().optional(),
-  showCaptions: z2.boolean().optional()
-}).default({});
-
-export {
-  AudienceNameSchema,
-  AudienceColorSchema,
-  slugifyAudienceName,
-  MediaGridOptionsSchema
-};