@drawnagency/primitives 0.1.86 → 0.1.88

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -6,15 +6,27 @@ import { FontPicker } from "../shared/FontPicker";
 import { Input } from "../shared/Input";
 import { Select } from "../shared/Select";
 import { FormLabel } from "../shared/FormLabel";
+import { useMediaLibrary } from "./MediaLibraryContext";
 import { deriveContrast } from "../../lib/contrast";
 import { buildGoogleFontsUrl } from "../../lib/google-fonts";
 import type { SiteConfig } from "../../schemas/site-config";
+import type { MediaItem } from "../../media/types";
 
 interface Props {
   siteConfig: SiteConfig;
   onChange: (config: SiteConfig) => void;
 }
 
+// Smallest generated variant for the editor-preview thumbnail (mirrors
+// DocInspector's thumbSrc) — avoids needing a MediaProvider in this context.
+function thumbSrc(imageId: string, item: MediaItem | undefined): string | null {
+  if (!item || item.kind !== "image") return null;
+  if (item.mimeType === "image/svg+xml") return `/api/media/${imageId}/original.svg`;
+  const widths = item.variants.map((v) => v.width).sort((a, b) => a - b);
+  if (widths.length === 0) return null;
+  return `/api/media/${imageId}/${widths[0]}.webp`;
+}
+
 const darkModeOptions = [
   { label: "Light", value: "light" },
   { label: "Dark", value: "dark" },
@@ -33,11 +45,19 @@ const FAVICON_MAX_BYTES = 100 * 1024;
 
 export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
   const [faviconError, setFaviconError] = useState<string | null>(null);
+  const mediaLibrary = useMediaLibrary();
 
   function update(patch: Partial<SiteConfig>) {
     onChange({ ...siteConfig, ...patch });
   }
 
+  function pickLogo(which: "light" | "dark") {
+    mediaLibrary?.openSelectModal((imageId) => {
+      const base = siteConfig.logo ?? { light: { imageId: "" }, dark: null, invertInDark: false, showInNav: true };
+      update({ logo: { ...base, [which]: { imageId } } });
+    });
+  }
+
   function handleFaviconFile(file: File | undefined) {
     if (!file) return;
     if (!FAVICON_TYPES.includes(file.type)) {
@@ -154,6 +174,92 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         {faviconError && <p className="mt-1 text-xs text-red-600">{faviconError}</p>}
       </div>
 
+      {(() => {
+        const logo = siteConfig.logo;
+        const lightSrc = logo ? thumbSrc(logo.light.imageId, mediaLibrary?.manifest.images[logo.light.imageId]) : null;
+        const darkSrc = logo?.dark ? thumbSrc(logo.dark.imageId, mediaLibrary?.manifest.images[logo.dark.imageId]) : null;
+        const needsDarkHint = logo != null && siteConfig.darkMode !== "light" && !logo.dark && !logo.invertInDark;
+
+        return (
+          <div>
+            <FormLabel>Logo</FormLabel>
+            <div className="flex items-center gap-3">
+              {logo && (lightSrc ? (
+                <img
+                  src={lightSrc}
+                  alt="Current logo"
+                  className="h-8 w-auto max-w-[8rem] rounded border border-base-200 bg-base-accent object-contain p-1"
+                />
+              ) : (
+                <span className="text-xs text-base-contrast-light">Logo selected</span>
+              ))}
+              <Button variant="secondary" size="sm" onClick={() => pickLogo("light")}>
+                {logo ? "Replace logo" : "Add logo"}
+              </Button>
+              {logo && (
+                <Button variant="ghost" tone="destructive" size="sm" aria-label="Remove logo" onClick={() => update({ logo: null })}>
+                  Remove logo
+                </Button>
+              )}
+            </div>
+            <p className="mt-1 text-xs text-base-contrast/70">Shown in the site navigation in place of the site name.</p>
+
+            {logo && (
+              <div className="mt-3 space-y-3 border-l-2 border-base-200 pl-3">
+                <div>
+                  <FormLabel>Dark variant</FormLabel>
+                  <div className="flex items-center gap-3">
+                    {logo.dark && (darkSrc ? (
+                      <img
+                        src={darkSrc}
+                        alt="Current dark-mode logo"
+                        className="h-8 w-auto max-w-[8rem] rounded border border-base-200 bg-base-accent object-contain p-1"
+                      />
+                    ) : (
+                      <span className="text-xs text-base-contrast-light">Dark logo selected</span>
+                    ))}
+                    <Button variant="secondary" size="sm" onClick={() => pickLogo("dark")}>
+                      {logo.dark ? "Replace dark variant" : "Add dark variant"}
+                    </Button>
+                    {logo.dark && (
+                      <Button
+                        variant="ghost"
+                        tone="destructive"
+                        size="sm"
+                        aria-label="Remove dark variant"
+                        onClick={() => update({ logo: { ...logo, dark: null } })}
+                      >
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                  <Checkbox
+                    className="mt-2"
+                    checked={logo.invertInDark}
+                    onChange={(v) => update({ logo: { ...logo, invertInDark: v } })}
+                    label="Invert in dark mode"
+                    description="Flips the light logo's colors instead of uploading a separate file."
+                    disabled={Boolean(logo.dark)}
+                  />
+                </div>
+
+                <Checkbox
+                  checked={logo.showInNav}
+                  onChange={(v) => update({ logo: { ...logo, showInNav: v } })}
+                  label="Show in navigation"
+                />
+
+                {needsDarkHint && (
+                  <p className="text-xs text-amber-600">
+                    Add a dark variant or enable invert so the logo stays legible in dark mode.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })()}
+
       <Select
         label="Dark mode"
         value={siteConfig.darkMode}

package/src/hooks/useCollabSession.ts

@@ -5,6 +5,13 @@ import type {
 } from "../collab/types";
 
 const REJOIN_DELAYS_MS = [5_000, 15_000, 30_000, 60_000];
+// Circuit breaker: after this many consecutive failed rejoins (~3.5 min of
+// backoff), stop the auto-rejoin loop and stay in solo mode rather than retry
+// forever — an unbounded reconnect loop is itself a way to hammer the backend.
+// Refocusing the tab (visibilitychange → visible) resets the breaker and
+// retries, so a user returning to a long-idle/offline tab reconnects without a
+// manual reload.
+const MAX_REJOIN_ATTEMPTS = 6;
 
 export interface UseCollabSessionArgs {
   provider: CollabProvider | null;
@@ -129,14 +136,34 @@ export function useCollabSession(args: UseCollabSessionArgs): UseCollabSessionRe
       // race two concurrent joins into two sessions, and the orphaned timer
       // would survive unmount (the cleanup only clears the tracked one).
       if (timer) clearTimeout(timer);
+      // Circuit breaker: give up after a capped number of consecutive failures
+      // rather than rejoin forever. onVisible() below rearms it on refocus.
+      if (attempt >= MAX_REJOIN_ATTEMPTS) {
+        console.warn(`Collab: stopped auto-rejoining after ${attempt} consecutive failures; staying solo until the tab is refocused.`);
+        return;
+      }
       const delay = REJOIN_DELAYS_MS[Math.min(attempt, REJOIN_DELAYS_MS.length - 1)];
       attempt += 1;
       timer = setTimeout(() => { timer = null; void join(); }, delay);
     }
 
+    // Rearm the breaker (and reconnect immediately) when the user tabs back to
+    // a disconnected editor — the common recovery from a laptop-sleep / network
+    // blip that exhausted the rejoin budget. No-op while already live/connecting.
+    function onVisible() {
+      if (cancelled) return;
+      if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
+      if (sessionRef.current || joining) return;
+      if (timer) { clearTimeout(timer); timer = null; }
+      attempt = 0;
+      void join();
+    }
+    if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisible);
+
     void join();
     return () => {
       cancelled = true;
+      if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisible);
       if (timer) clearTimeout(timer);
       void sessionRef.current?.disconnect().catch(() => {});
       sessionRef.current = null;

package/src/hooks/useMediaPipeline.ts

@@ -13,7 +13,7 @@ import {
   removePendingMediaDeletion,
 } from "../lib/dexie";
 import { generateVideoPoster } from "../media/videoPoster";
-import { tallyImageIds, collectImageIds, clearImageIds } from "../lib/image-refs";
+import { tallyImageIds, collectImageIds, clearImageIds, applyLogoDeletion } from "../lib/image-refs";
 import {
   createFolderId, uniqueFolderName, effectiveParentId, canMoveFolder,
   descendantFolderIds, itemFolderId, planFolderUpload,
@@ -36,6 +36,10 @@ interface UseMediaPipelineInput {
   // Surfaces non-error, informational notices (e.g. "N files already exist
   // and were left where they are" on dedup skip) to the caller.
   onUploadNotice?: (message: string) => void;
+  // Lets handleMediaDelete null out siteConfig.logo when its backing asset is
+  // deleted. Updater form (not a plain setter) so the caller can adapt its own
+  // value-based site-config change handler.
+  onSiteConfigChange?: (updater: (prev: SiteConfig) => SiteConfig) => void;
 }
 
 export function useMediaPipeline({
@@ -49,6 +53,7 @@ export function useMediaPipeline({
   markSectionDirty,
   onUploadError,
   onUploadNotice,
+  onSiteConfigChange,
 }: UseMediaPipelineInput) {
   const [processingItems, setProcessingItems] = useState<QueueItem[]>([]);
   const [pendingMediaItems, setPendingMediaItems] = useState<LibraryMediaItem[]>([]);
@@ -440,8 +445,15 @@ export function useMediaPipeline({
       }),
     );
 
+    if (siteConfig?.logo && onSiteConfigChange) {
+      const logoIds = collectImageIds(siteConfig.logo);
+      if (ids.some((id) => logoIds.has(id))) {
+        onSiteConfigChange((prev) => ({ ...prev, logo: applyLogoDeletion(prev.logo, idSet) }));
+      }
+    }
+
     setLocalChangesExist(true);
-  }, [pendingMediaItems, markSectionDirty, setSections, setDirtySectionIds, setLocalChangesExist]);
+  }, [pendingMediaItems, markSectionDirty, setSections, setDirtySectionIds, setLocalChangesExist, siteConfig, onSiteConfigChange]);
 
   const handleMediaAltChange = useCallback((id: string, alt: string) => {
     setMediaManifest((prev) => {
@@ -585,8 +597,9 @@ export function useMediaPipeline({
   const referenceCountMap = useMemo((): Record<string, number> => {
     const counts = new Map<string, number>();
     for (const { section } of sections) tallyImageIds(section, counts);
+    if (siteConfig) tallyImageIds(siteConfig, counts);
     return Object.fromEntries(counts);
-  }, [sections]);
+  }, [sections, siteConfig]);
 
   // --- Unified enqueue ---
 

package/src/lib/image-refs.ts

@@ -1,3 +1,5 @@
+import type { SiteConfig } from "../schemas/site-config";
+
 /**
  * Structural walkers over section content for `imageId` references.
  *
@@ -51,3 +53,20 @@ export function clearImageIds(value: unknown, ids: Set<string>): unknown {
   }
   return value;
 }
+
+/**
+ * Applies a media-deletion id set to a site logo config, granularly: deleting
+ * the light variant's backing asset removes the logo entirely (no light = no
+ * logo to show), while deleting only the dark variant's asset keeps the
+ * light logo + flags and drops just the dark override. Returns the same
+ * `logo` reference unchanged when neither id was deleted.
+ */
+export function applyLogoDeletion(
+  logo: SiteConfig["logo"],
+  deletedIds: Set<string>,
+): SiteConfig["logo"] {
+  if (!logo) return logo;
+  if (deletedIds.has(logo.light.imageId)) return null;
+  if (logo.dark && deletedIds.has(logo.dark.imageId)) return { ...logo, dark: null };
+  return logo;
+}

package/src/lib/registry.ts

@@ -176,6 +176,12 @@ export interface SectionDefinition<T = unknown> {
    * top-level `description`. Presentation/metadata only — not validated.
    */
   authoringNote?: string;
+  /**
+   * When true, this section must run client-side on the viewer page: the viewer
+   * renderer hydrates it as an Astro island (`client:visible`) instead of
+   * emitting static HTML. Opt-in per type; default (absent/false) stays zero-JS.
+   */
+  interactive?: boolean;
 }
 
 // --- defineSection ---
@@ -204,6 +210,7 @@ type DefineSectionInput<S extends ZodType> = {
   settingsTabs?: { label: string; fields: string[] }[];
   presets?: SectionPreset[];
   authoringNote?: string;
+  interactive?: boolean;
 };
 
 export function defineSection<S extends ZodType>(

package/src/media/resolve.ts

@@ -86,3 +86,37 @@ export function rebindImageRef<T extends { imageId?: string }>(ref: T, imageId:
   for (const key of BAKED_MEDIA_KEYS) delete fresh[key];
   return fresh as T;
 }
+
+export interface ResolvedLogo {
+  lightUrl: string;
+  darkUrl: string | null;
+  invertInDark: boolean;
+  showInNav: boolean;
+}
+
+/**
+ * Resolves a SiteConfig["logo"] entry into concrete URLs. Returns null when
+ * there is no logo configured, when the light variant's imageId can't be
+ * resolved against the manifest, or when the light variant resolves to a
+ * video (an `<img>` can't render mp4/webm) — callers should fall back to
+ * rendering the site name as text rather than a broken image. Still-image and
+ * animated (gif) picks are both fine — only a video pick is rejected, since
+ * both those tags resolve to `tag: "img"`.
+ */
+export function resolveLogo(
+  logo: { light: { imageId: string }; dark: { imageId: string } | null; invertInDark: boolean; showInNav: boolean } | null,
+  manifest: MediaManifest,
+  provider: MediaProvider,
+): ResolvedLogo | null {
+  if (!logo) return null;
+  const light = resolveMedia({ imageId: logo.light.imageId }, manifest, [1], provider);
+  if (!light?.src || light.tag === "video") return null;
+  const dark = logo.dark ? resolveMedia({ imageId: logo.dark.imageId }, manifest, [1], provider) : null;
+  const darkUrl = dark && dark.tag !== "video" ? dark.src : null;
+  return {
+    lightUrl: light.src,
+    darkUrl,
+    invertInDark: logo.invertInDark,
+    showInNav: logo.showInNav,
+  };
+}

package/src/schemas/site-config.ts

@@ -211,6 +211,19 @@ export const SiteConfigSchema = z.object({
     .refine((v) => v.startsWith("data:image/"), "Favicon must be an image data URL")
     .nullable()
     .default(null),
+  // Optional site logo, stored as media-library references (so it participates
+  // in usage tracking + GC protection, and its resolved URL is reusable for the
+  // Phase 3 social-preview image). Every field defaults so pre-existing
+  // site-config.json files keep parsing.
+  logo: z
+    .object({
+      light: z.object({ imageId: z.string() }),
+      dark: z.object({ imageId: z.string() }).nullable().default(null),
+      invertInDark: z.boolean().default(false),
+      showInNav: z.boolean().default(true),
+    })
+    .nullable()
+    .default(null),
   media: MediaConfigSchema.default(MediaConfigSchema.parse({})),
   // Brand chatbot config (editor-owned; the platform kill switch lives in the
   // sites table, not here). Every field defaults so pre-existing