@drawnagency/primitives 0.1.84 → 0.1.87

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useState } from "react";
+import { Button } from "../shared/Button";
+import { cn } from "../../lib/cn";
+import ChatPanel from "../chat/ChatPanel";
+import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+import { audiencePasses } from "../../lib/pages";
+
+interface Props {
+  siteConfig: SiteConfig;
+  onSiteConfigChange: (config: SiteConfig) => void;
+  audiences: Audience[];
+  platformEnabled: boolean;
+}
+
+function slugify(label: string): string {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "task";
+}
+
+function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[]; selected: string[]; onToggle: (name: string) => void }) {
+  return (
+    <div className="flex flex-wrap gap-1">
+      {audiences.map((a) => (
+        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
+          className={cn("rounded-full border px-2 py-0.5 text-xs",
+            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
+          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
+          {a.displayName}
+        </button>
+      ))}
+      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
+    </div>
+  );
+}
+
+export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props) {
+  const chatbot = siteConfig.chatbot;
+  const [newTaskLabel, setNewTaskLabel] = useState("");
+  const [showTest, setShowTest] = useState(false);
+  const [previewAudience, setPreviewAudience] = useState("");
+
+  // A deselected audience can no longer chat — never keep simulating it.
+  useEffect(() => {
+    if (previewAudience && !chatbot.audiences.includes(previewAudience)) setPreviewAudience("");
+  }, [previewAudience, chatbot.audiences]);
+
+  const patch = (p: Partial<ChatbotConfig>) =>
+    onSiteConfigChange({ ...siteConfig, chatbot: { ...chatbot, ...p } });
+
+  const patchTask = (i: number, p: Partial<ChatbotTask>) =>
+    patch({ tasks: chatbot.tasks.map((t, idx) => (idx === i ? { ...t, ...p } : t)) });
+
+  function addTask() {
+    const label = newTaskLabel.trim();
+    if (!label || chatbot.tasks.length >= 20) return;
+    let id = slugify(label);
+    if (chatbot.tasks.some((t) => t.id === id)) {
+      for (let n = 2; ; n++) {
+        const suffix = `-${n}`;
+        const candidate = `${id.slice(0, 32 - suffix.length)}${suffix}`;
+        if (!chatbot.tasks.some((t) => t.id === candidate)) {
+          id = candidate;
+          break;
+        }
+      }
+    }
+    patch({ tasks: [...chatbot.tasks, { id, label, prompt: "", access: [] }] });
+    setNewTaskLabel("");
+  }
+
+  const toggleName = (list: string[], name: string) =>
+    list.includes(name) ? list.filter((n) => n !== name) : [...list, name];
+
+  // Record lookups can hit inherited Object.prototype members ("constructor"
+  // is a legal audience name) — treat anything non-string as absent.
+  const overlayValue = (name: string) => {
+    const v = chatbot.audiencePrompts[name];
+    return typeof v === "string" ? v : "";
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {!platformEnabled && (
+        <div className="rounded border border-base-200 bg-base-accent px-3 py-2 text-sm text-base-contrast">
+          Chat is not enabled for this site — contact Drawn Agency. You can still edit the
+          configuration below; it activates when chat is switched on.
+        </div>
+      )}
+
+      <label className="flex items-center gap-2 text-sm text-base-contrast">
+        <input type="checkbox" aria-label="Enable chatbot" checked={chatbot.enabled}
+          className="h-5 w-5 cursor-pointer accent-primary"
+          onChange={(e) => patch({ enabled: e.target.checked })} />
+        Show the chat widget to viewers
+      </label>
+
+      <div>
+        <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
+        <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
+        <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
+        {chatbot.audiences.map((name) => (
+          <div key={name} className="mt-2">
+            <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
+              Additional guidance for {name}
+            </label>
+            <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
+              value={overlayValue(name)}
+              onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
+              placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
+              className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <label htmlFor="chatbot-system-prompt" className="mb-1 block text-sm font-medium text-base-contrast">System prompt</label>
+        <textarea id="chatbot-system-prompt" aria-label="System prompt" rows={5} maxLength={8000}
+          value={chatbot.systemPrompt}
+          onChange={(e) => patch({ systemPrompt: e.target.value })}
+          placeholder="Describe the brand's voice and how the assistant should behave — e.g. “Speak warmly and concisely; always reference our color names, never hex codes.”"
+          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+        <p className="text-right text-xs text-base-contrast-light">{chatbot.systemPrompt.length}/8000</p>
+      </div>
+
+      <div>
+        <p className="mb-1 text-sm font-medium text-base-contrast">Tasks</p>
+        <p className="mb-2 text-xs text-base-contrast-light">Goal presets shown as a dropdown in the widget. Each task layers its own instructions onto the system prompt.</p>
+        <div className="space-y-3">
+          {chatbot.tasks.map((t, i) => (
+            <div key={t.id} className="rounded border border-base-200 p-2">
+              <div className="mb-1 flex items-center justify-between gap-2">
+                <input aria-label={`Task ${t.id} label`} value={t.label} maxLength={60}
+                  onChange={(e) => patchTask(i, { label: e.target.value })}
+                  className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+                <Button type="button" variant="destructive"
+                  onClick={() => patch({ tasks: chatbot.tasks.filter((_, idx) => idx !== i) })}>
+                  Remove
+                </Button>
+              </div>
+              <textarea aria-label={`Task ${t.id} prompt`} rows={2} maxLength={4000} value={t.prompt}
+                onChange={(e) => patchTask(i, { prompt: e.target.value })}
+                placeholder="Instructions for this task…"
+                className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+              <AudienceChips audiences={audiences} selected={t.access} onToggle={(n) => patchTask(i, { access: toggleName(t.access, n) })} />
+            </div>
+          ))}
+        </div>
+        <div className="mt-2 flex gap-2">
+          <input aria-label="New task label" value={newTaskLabel} maxLength={60}
+            onChange={(e) => setNewTaskLabel(e.target.value)}
+            placeholder="e.g. Draft a social post"
+            className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
+          <Button type="button" onClick={addTask}>Add task</Button>
+        </div>
+      </div>
+
+      <div>
+        <Button type="button" onClick={() => setShowTest((s) => !s)} disabled={!platformEnabled}>
+          {showTest ? "Hide test chat" : "Test with current draft"}
+        </Button>
+        <p className="mt-1 text-xs text-base-contrast-light">
+          Tests your unsaved prompt and tasks. Answers ground on published content.
+        </p>
+        {showTest && platformEnabled && (
+          <label className="mt-2 flex items-center gap-2 text-xs text-base-contrast">
+            Preview as
+            <select aria-label="Preview as" value={previewAudience} onChange={(e) => setPreviewAudience(e.target.value)}
+              className="rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
+              <option value="">Editor (base prompt only)</option>
+              {chatbot.audiences.map((n) => <option key={n} value={n}>{n}</option>)}
+            </select>
+            <span className="text-base-contrast-light">Prompt and task preview only — grounding stays editor-wide.</span>
+          </label>
+        )}
+        {showTest && platformEnabled && (
+          <ChatPanel
+            open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
+            tasks={chatbot.tasks
+              .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
+              .map((t) => ({ id: t.id, label: t.label }))}
+            isEditor draftChatbot={chatbot}
+            simulateAudience={previewAudience || undefined}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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/components/shell/SiteSettingsModal.tsx

@@ -5,6 +5,7 @@ import { Tabs } from "../shared/Tabs";
 import { SiteSettingsViewerAccess } from "./SiteSettingsViewerAccess";
 import { SiteSettingsDisplay } from "./SiteSettingsDisplay";
 import { SiteSettingsUsers } from "./SiteSettingsUsers";
+import { SiteSettingsChatbot } from "./SiteSettingsChatbot";
 import type { SiteConfig } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 
@@ -14,6 +15,8 @@ interface Props {
   siteConfig: SiteConfig;
   onSiteConfigChange: (config: SiteConfig) => void;
   onAudiencesChange: (audiences: Audience[]) => void;
+  audiences: Audience[];
+  chatbotPlatformEnabled: boolean;
   capabilities: {
     oauth: boolean;
     emailPassword: boolean;
@@ -25,7 +28,7 @@ interface Props {
   currentUser: { email: string; role: "owner" | "editor" } | null;
 }
 
-export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props) {
+export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, audiences, chatbotPlatformEnabled, capabilities, currentUser }: Props) {
   const [signOutError, setSignOutError] = useState<string | null>(null);
 
   async function handleSignOut() {
@@ -50,25 +53,30 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
 
   const allTabs = [
     {
-      id: "users",
-      label: "Users",
-      show: capabilities.userManagement && currentUser?.role === "owner",
+      id: "viewer-access",
+      label: "Audiences",
+      show: true,
       content: (
         <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
-          <SiteSettingsUsers currentUser={currentUser} />
+          <SiteSettingsViewerAccess
+            audienceManagement={capabilities.audienceManagement}
+            passwordToggle={capabilities.passwordToggle}
+            onAudiencesChange={onAudiencesChange}
+          />
         </div>
       ),
     },
     {
-      id: "viewer-access",
-      label: "Viewer Access",
+      id: "chatbot",
+      label: "Chatbot",
       show: true,
       content: (
         <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
-          <SiteSettingsViewerAccess
-            audienceManagement={capabilities.audienceManagement}
-            passwordToggle={capabilities.passwordToggle}
-            onAudiencesChange={onAudiencesChange}
+          <SiteSettingsChatbot
+            siteConfig={siteConfig}
+            onSiteConfigChange={onSiteConfigChange}
+            audiences={audiences}
+            platformEnabled={chatbotPlatformEnabled}
           />
         </div>
       ),
@@ -83,6 +91,16 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
         </div>
       ),
     },
+    {
+      id: "users",
+      label: "Users",
+      show: capabilities.userManagement && currentUser?.role === "owner",
+      content: (
+        <div data-testid="site-settings-tab-panel" className="flex flex-1 flex-col overflow-y-auto px-6 py-4">
+          <SiteSettingsUsers currentUser={currentUser} />
+        </div>
+      ),
+    },
   ];
 
   const tabItems = allTabs.filter((t) => t.show).map(({ id, label, content }) => ({ id, label, content }));

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

package/dist/components/shell/ChatbotConfigModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatbotConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/ChatbotConfigModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAA8B,MAAM,2BAA2B,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAsBD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,KAAK,2CA0JxH"}