@eventcatalog/core 3.29.2 → 3.31.1

package/eventcatalog/src/components/Settings/GeneralSettingsForm.tsx

@@ -0,0 +1,371 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Toaster, toast } from 'sonner';
+import { Check } from 'lucide-react';
+import {
+  generalSettingsSchema,
+  KNOWN_THEMES,
+  isKnownTheme,
+  type GeneralSettings,
+} from '@utils/eventcatalog-config/config-schema';
+import { ReadOnlyBanner } from './ReadOnlyBanner';
+import { LogoUpload } from './LogoUpload';
+import { Row, cn, inputBase, inputError, monoInput } from './Row';
+
+interface Props {
+  canEdit: boolean;
+  initial: GeneralSettings & { logo?: { src?: string } };
+  apiBase: string;
+}
+
+interface FormState {
+  organization: string;
+  tagline: string;
+  homepageLink: string;
+  editUrl: string;
+  repositoryUrl: string;
+  theme: string;
+}
+
+type FieldKey = keyof FormState;
+
+const toFormState = (s: GeneralSettings): FormState => ({
+  organization: s.organizationName ?? s.title ?? s.logo?.text ?? '',
+  tagline: s.tagline ?? '',
+  homepageLink: s.homepageLink ?? '',
+  editUrl: s.editUrl ?? '',
+  repositoryUrl: s.repositoryUrl ?? '',
+  theme: s.theme || 'default',
+});
+
+const themeOptions = (currentTheme: string): string[] => {
+  const known = [...KNOWN_THEMES];
+  if (currentTheme && !isKnownTheme(currentTheme)) {
+    return [...known, currentTheme];
+  }
+  return known;
+};
+
+const THEME_PREVIEWS: Record<string, { accent: string; bg: string; label: string }> = {
+  default: { accent: '#6366f1', bg: '#0b0b0f', label: 'Default' },
+  ocean: { accent: '#06b6d4', bg: '#082431', label: 'Ocean' },
+  sapphire: { accent: '#3b82f6', bg: '#0b1430', label: 'Sapphire' },
+  sunset: { accent: '#f97316', bg: '#2a0f0a', label: 'Sunset' },
+  forest: { accent: '#22c55e', bg: '#0c1f12', label: 'Forest' },
+};
+
+const ensureUrlScheme = (value: string): string => {
+  const v = value.trim();
+  if (!v) return '';
+  if (/^https?:\/\//i.test(v)) return v;
+  return `https://${v}`;
+};
+
+export const GeneralSettingsForm = ({ canEdit, initial, apiBase }: Props) => {
+  const [form, setForm] = useState<FormState>(() => toFormState(initial));
+  const [pristine, setPristine] = useState<FormState>(() => toFormState(initial));
+  const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
+  const [savingKey, setSavingKey] = useState<FieldKey | null>(null);
+  const originalThemeRef = useRef<string>(initial.theme || 'default');
+
+  const dirtyKeys = useMemo<Set<FieldKey>>(() => {
+    const s = new Set<FieldKey>();
+    (Object.keys(form) as FieldKey[]).forEach((k) => {
+      if (form[k] !== pristine[k]) s.add(k);
+    });
+    return s;
+  }, [form, pristine]);
+
+  const isFormDirty = dirtyKeys.size > 0;
+
+  // Live theme preview; revert on unmount if not saved.
+  useEffect(() => {
+    if (!canEdit) return;
+    document.documentElement.setAttribute('data-catalog-theme', form.theme || 'default');
+    return () => {
+      document.documentElement.setAttribute('data-catalog-theme', originalThemeRef.current || 'default');
+    };
+  }, [form.theme, canEdit]);
+
+  // beforeunload guard while any field is dirty.
+  useEffect(() => {
+    if (!isFormDirty) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isFormDirty]);
+
+  const setField = (key: FieldKey, value: string) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const handleChange = (key: FieldKey) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
+    setField(key, e.target.value);
+
+  const handleUrlBlur = (key: 'homepageLink' | 'editUrl' | 'repositoryUrl') => () => {
+    setForm((prev) => ({ ...prev, [key]: ensureUrlScheme(prev[key]) }));
+  };
+
+  const validateAll = (): { ok: true } | { ok: false; errors: Partial<Record<FieldKey, string>> } => {
+    const candidate = {
+      title: form.organization,
+      tagline: form.tagline,
+      organizationName: form.organization,
+      homepageLink: form.homepageLink,
+      editUrl: form.editUrl,
+      repositoryUrl: form.repositoryUrl,
+      logo: { text: form.organization },
+      theme: form.theme,
+    };
+    const parsed = generalSettingsSchema.safeParse(candidate);
+    if (parsed.success) return { ok: true };
+    const next: Partial<Record<FieldKey, string>> = {};
+    for (const issue of parsed.error.issues) {
+      const [key] = issue.path as string[];
+      if (key === 'title' || key === 'organizationName' || key === 'logo') next.organization = issue.message;
+      else if (key === 'tagline') next.tagline = issue.message;
+      else if (key === 'homepageLink') next.homepageLink = issue.message;
+      else if (key === 'editUrl') next.editUrl = issue.message;
+      else if (key === 'repositoryUrl') next.repositoryUrl = issue.message;
+      else if (key === 'theme') next.theme = issue.message;
+    }
+    return { ok: false, errors: next };
+  };
+
+  // Per-row save: validate the whole form, but only block on errors that
+  // affect the row being saved. The API still receives the full payload.
+  const saveRow = async (key: FieldKey) => {
+    if (!canEdit) return;
+    const result = validateAll();
+    if (!result.ok && result.errors[key]) {
+      setErrors((prev) => ({ ...prev, [key]: result.errors[key] }));
+      toast.error(result.errors[key] || 'Please fix the highlighted field');
+      return;
+    }
+
+    setSavingKey(key);
+    try {
+      const payload = {
+        title: form.organization,
+        organizationName: form.organization,
+        logo: { text: form.organization },
+        tagline: form.tagline || undefined,
+        homepageLink: form.homepageLink || undefined,
+        editUrl: form.editUrl || undefined,
+        repositoryUrl: form.repositoryUrl || undefined,
+        theme: form.theme,
+      };
+      const res = await fetch(`${apiBase}/general`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        toast.error(body.error || 'Could not save');
+        return;
+      }
+      setPristine(form);
+      originalThemeRef.current = form.theme;
+      toast.success('Saved to eventcatalog.config.js');
+    } catch (err) {
+      toast.error(`Could not save: ${(err as Error).message}`);
+    } finally {
+      setSavingKey(null);
+    }
+  };
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+      <Toaster richColors closeButton position="bottom-right" theme="system" />
+      {!canEdit && (
+        <div className="pb-6">
+          <ReadOnlyBanner />
+        </div>
+      )}
+
+      <Row
+        title="Theme"
+        description="Pick a built-in colour theme. Selection updates the preview live; click Save to persist."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('theme')}
+        saving={savingKey === 'theme'}
+        onSave={() => saveRow('theme')}
+        error={errors.theme}
+      >
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+          {themeOptions(form.theme).map((t) => {
+            const preview = THEME_PREVIEWS[t] ?? { accent: '#888', bg: '#1a1a1a', label: t };
+            const isActive = form.theme === t;
+            const isCustom = !isKnownTheme(t);
+            return (
+              <button
+                type="button"
+                key={t}
+                onClick={() => setField('theme', t)}
+                disabled={!canEdit}
+                aria-pressed={isActive}
+                className={cn(
+                  'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
+                  'disabled:cursor-not-allowed disabled:opacity-50',
+                  isActive
+                    ? 'border-[rgb(var(--ec-accent))] ring-2 ring-[rgb(var(--ec-accent)/0.25)]'
+                    : 'border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-page-text-muted)/0.6)]'
+                )}
+              >
+                <div className="relative h-14 w-full overflow-hidden" style={{ background: preview.bg }}>
+                  <div
+                    className="absolute -bottom-2 -right-2 h-12 w-12 rounded-full opacity-90 blur-md"
+                    style={{ background: preview.accent }}
+                    aria-hidden
+                  />
+                  <div
+                    className="absolute left-3 top-3 h-1.5 w-10 rounded-full opacity-90"
+                    style={{ background: preview.accent }}
+                    aria-hidden
+                  />
+                  <div
+                    className="absolute left-3 top-6 h-1 w-7 rounded-full opacity-60"
+                    style={{ background: 'rgba(255,255,255,0.4)' }}
+                    aria-hidden
+                  />
+                  {isActive && (
+                    <span className="absolute right-1.5 top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-white text-black shadow-sm">
+                      <Check className="h-2.5 w-2.5" aria-hidden />
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center justify-between gap-2 px-3 py-2">
+                  <span className="text-[12px] font-medium capitalize text-[rgb(var(--ec-page-text))]">{preview.label}</span>
+                  {isCustom && (
+                    <span className="rounded-full border border-[rgb(var(--ec-page-border))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+                      custom
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Row>
+
+      <Row
+        title="Organization"
+        description="Used as the catalog name, the brand line next to the logo, and OpenGraph metadata."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('organization')}
+        saving={savingKey === 'organization'}
+        onSave={() => saveRow('organization')}
+        error={errors.organization}
+      >
+        <input
+          type="text"
+          value={form.organization}
+          onChange={handleChange('organization')}
+          disabled={!canEdit}
+          maxLength={100}
+          placeholder="Acme Inc."
+          className={cn(inputBase, errors.organization && inputError)}
+          required
+        />
+      </Row>
+
+      <Row
+        title="Tagline"
+        description="A short subtitle shown beneath the organization name on the homepage."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('tagline')}
+        saving={savingKey === 'tagline'}
+        onSave={() => saveRow('tagline')}
+        error={errors.tagline}
+      >
+        <textarea
+          value={form.tagline}
+          onChange={handleChange('tagline')}
+          disabled={!canEdit}
+          maxLength={500}
+          rows={2}
+          placeholder="Discover and explore our events, services, and architecture."
+          className={cn(inputBase, 'resize-y', errors.tagline && inputError)}
+        />
+      </Row>
+
+      <Row
+        title="Homepage link"
+        description="Where the logo links to. Useful for pointing back to your main site."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('homepageLink')}
+        saving={savingKey === 'homepageLink'}
+        onSave={() => saveRow('homepageLink')}
+        error={errors.homepageLink}
+      >
+        <input
+          type="url"
+          value={form.homepageLink}
+          onChange={handleChange('homepageLink')}
+          onBlur={handleUrlBlur('homepageLink')}
+          disabled={!canEdit}
+          placeholder="https://example.com"
+          className={cn(inputBase, monoInput, errors.homepageLink && inputError)}
+        />
+      </Row>
+
+      <Row
+        title="Edit URL"
+        description="Base URL for the “Edit on GitHub” links shown on resource pages."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('editUrl')}
+        saving={savingKey === 'editUrl'}
+        onSave={() => saveRow('editUrl')}
+        error={errors.editUrl}
+      >
+        <input
+          type="url"
+          value={form.editUrl}
+          onChange={handleChange('editUrl')}
+          onBlur={handleUrlBlur('editUrl')}
+          disabled={!canEdit}
+          placeholder="https://github.com/org/repo/edit/main"
+          className={cn(inputBase, monoInput, errors.editUrl && inputError)}
+        />
+      </Row>
+
+      <Row
+        title="Repository URL"
+        description="Link to your catalog's source repository. Shown in the header for quick navigation back to the code."
+        canEdit={canEdit}
+        dirty={dirtyKeys.has('repositoryUrl')}
+        saving={savingKey === 'repositoryUrl'}
+        onSave={() => saveRow('repositoryUrl')}
+        error={errors.repositoryUrl}
+      >
+        <input
+          type="url"
+          value={form.repositoryUrl}
+          onChange={handleChange('repositoryUrl')}
+          onBlur={handleUrlBlur('repositoryUrl')}
+          disabled={!canEdit}
+          placeholder="https://github.com/org/repo"
+          className={cn(inputBase, monoInput, errors.repositoryUrl && inputError)}
+        />
+      </Row>
+
+      <Row
+        title="Logo"
+        description="Image shown in the top-left corner. PNG, JPG, SVG, or WebP up to 2MB."
+        canEdit={canEdit}
+        // Logo upload saves itself directly; no inline Save button needed.
+        dirty={false}
+      >
+        <LogoUpload
+          canEdit={canEdit}
+          initialSrc={initial.logo?.src ? `${initial.logo.src}?t=${Date.now()}` : undefined}
+          apiUrl={`${apiBase}/logo`}
+        />
+      </Row>
+    </form>
+  );
+};

package/eventcatalog/src/components/Settings/LlmAccessSettingsForm.tsx

@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react';
+import { Toaster, toast } from 'sonner';
+import { Bot, FileText } from 'lucide-react';
+import { aiSettingsSchema } from '@utils/eventcatalog-config/config-schema';
+import { ReadOnlyBanner } from './ReadOnlyBanner';
+import { Row } from './Row';
+import { ToggleRow, UpgradeRequired, UrlPanel } from './SettingsShared';
+
+interface Props {
+  canEdit: boolean;
+  initial: { llmsTxtEnabled: boolean; chatEnabled: boolean };
+  hasScalePlan: boolean;
+  apiBase: string;
+  llmsTxtUrl: string;
+  llmsFullTxtUrl: string;
+  schemasTxtUrl: string;
+}
+
+export const LlmAccessSettingsForm = ({
+  canEdit,
+  initial,
+  hasScalePlan,
+  apiBase,
+  llmsTxtUrl,
+  llmsFullTxtUrl,
+  schemasTxtUrl,
+}: Props) => {
+  const [llmsTxtEnabled, setLlmsTxtEnabled] = useState(initial.llmsTxtEnabled);
+  const [pristine, setPristine] = useState(initial.llmsTxtEnabled);
+  const [saving, setSaving] = useState(false);
+
+  const dirty = llmsTxtEnabled !== pristine;
+
+  useEffect(() => {
+    if (!dirty) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [dirty]);
+
+  const save = async () => {
+    if (!canEdit) return;
+    const candidate = aiSettingsSchema.safeParse({
+      llmsTxtEnabled,
+      chatEnabled: initial.chatEnabled,
+    });
+    if (!candidate.success) {
+      toast.error('Invalid settings');
+      return;
+    }
+    setSaving(true);
+    try {
+      const res = await fetch(`${apiBase}/ai`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(candidate.data),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        toast.error(body.error || 'Could not save');
+        return;
+      }
+      setPristine(llmsTxtEnabled);
+      toast.success('Saved to eventcatalog.config.js');
+    } catch (err) {
+      toast.error(`Could not save: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+      <Toaster richColors closeButton position="bottom-right" theme="system" />
+      {!canEdit && (
+        <div className="pb-6">
+          <ReadOnlyBanner />
+        </div>
+      )}
+
+      <Row
+        title="llms.txt"
+        description="Generate llms.txt files so tools like Claude, ChatGPT, and Cursor can read your catalog at /docs/llm/llms.txt."
+        canEdit={canEdit}
+        dirty={dirty}
+        saving={saving}
+        onSave={save}
+      >
+        <ToggleRow
+          icon={<Bot className="h-4 w-4" aria-hidden />}
+          label={llmsTxtEnabled ? 'Enabled' : 'Disabled'}
+          hint={
+            llmsTxtEnabled
+              ? 'AI tools can read your catalog at /docs/llm/llms.txt.'
+              : 'AI tools will not be able to read your catalog.'
+          }
+          checked={llmsTxtEnabled}
+          disabled={!canEdit}
+          onChange={setLlmsTxtEnabled}
+        />
+        {llmsTxtEnabled && <LlmsTxtPreview url={llmsTxtUrl} fullUrl={llmsFullTxtUrl} />}
+      </Row>
+
+      <Row
+        title="schemas.txt"
+        description="Give LLMs access to every schema across your organization in one place — events, commands, queries, and services."
+        canEdit={false}
+        dirty={false}
+      >
+        {hasScalePlan ? (
+          <SchemasTxtAvailable url={schemasTxtUrl} />
+        ) : (
+          <UpgradeRequired
+            tier="Scale"
+            blurb="The schema index is a Scale-plan feature. Upgrade to publish a machine-readable catalogue of your schemas alongside llms.txt."
+          />
+        )}
+      </Row>
+    </form>
+  );
+};
+
+const LlmsTxtPreview = ({ url, fullUrl }: { url: string; fullUrl: string }) => {
+  const variants = [
+    { label: 'Index', path: url },
+    { label: 'Full', path: fullUrl },
+  ];
+  return (
+    <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)] px-4 py-3">
+      <p className="text-[12px] font-medium text-[rgb(var(--ec-page-text))]">Point your LLM here</p>
+      <p className="mt-0.5 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+        Drop this URL into Claude, ChatGPT, Cursor, or any AI tool to give it the full context of your catalog.
+      </p>
+      <p className="mt-1 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+        From there you can ask questions about your architecture, services, and events.
+      </p>
+      <div className="mt-2.5">
+        <UrlPanel url={url} />
+      </div>
+      <div className="mt-2.5 flex flex-wrap gap-1.5">
+        {variants.map((v) => (
+          <a
+            key={v.path}
+            href={v.path}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] px-2 py-0.5 text-[11px] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
+          >
+            {v.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SchemasTxtAvailable = ({ url }: { url: string }) => (
+  <div className="space-y-3">
+    <ToggleRow
+      icon={<FileText className="h-4 w-4" aria-hidden />}
+      label="Enabled"
+      hint="A markdown index of every event, command, query, and service schema in your catalog."
+      checked={true}
+      disabled={true}
+      onChange={() => {}}
+    />
+    <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)] px-4 py-3">
+      <p className="text-[12px] font-medium text-[rgb(var(--ec-page-text))]">Point your LLM here</p>
+      <p className="mt-0.5 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+        Share this URL with Claude, ChatGPT, Cursor, or any AI tool to give it every schema in your catalog.
+      </p>
+      <p className="mt-1 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+        Perfect for asking about message shapes, fields, and contracts.
+      </p>
+      <div className="mt-2.5">
+        <UrlPanel url={url} />
+      </div>
+    </div>
+  </div>
+);

package/eventcatalog/src/components/Settings/LogoUpload.tsx

@@ -0,0 +1,137 @@
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { ImageIcon, Trash2, Upload, Loader2 } from 'lucide-react';
+
+interface LogoUploadProps {
+  canEdit: boolean;
+  initialSrc?: string;
+  apiUrl: string;
+  onSrcChange?: (src: string | null) => void;
+}
+
+export const LogoUpload = ({ canEdit, initialSrc, apiUrl, onSrcChange }: LogoUploadProps) => {
+  const [src, setSrc] = useState<string | null>(initialSrc ?? null);
+  const [busy, setBusy] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const upload = async (file: File) => {
+    setBusy(true);
+    const fd = new FormData();
+    fd.append('logo', file);
+    try {
+      const res = await fetch(apiUrl, { method: 'POST', body: fd });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        toast.error(body.error || 'Logo upload failed');
+        return;
+      }
+      const next = `${body.src}?t=${Date.now()}`;
+      setSrc(next);
+      onSrcChange?.(body.src);
+      toast.success('Logo uploaded');
+    } catch (err) {
+      toast.error(`Logo upload failed: ${(err as Error).message}`);
+    } finally {
+      setBusy(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  };
+
+  const remove = async () => {
+    setBusy(true);
+    try {
+      const res = await fetch(apiUrl, { method: 'DELETE' });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        toast.error(body.error || 'Could not remove logo');
+        return;
+      }
+      setSrc(null);
+      onSrcChange?.(null);
+      toast.success('Logo removed');
+    } catch (err) {
+      toast.error(`Could not remove logo: ${(err as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (!canEdit || busy) return;
+    const file = e.dataTransfer.files?.[0];
+    if (file) void upload(file);
+  };
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault();
+        if (canEdit && !busy) setDragOver(true);
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={onDrop}
+      className={`relative flex items-center gap-5 rounded-lg border border-dashed px-4 py-4 transition-colors ${
+        dragOver
+          ? 'border-[rgb(var(--ec-accent)/0.6)] bg-[rgb(var(--ec-accent-subtle)/0.4)]'
+          : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)]'
+      }`}
+    >
+      <div className="relative flex h-20 w-20 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl bg-[rgb(var(--ec-page-bg))] ring-1 ring-[rgb(var(--ec-page-border))]">
+        {src ? (
+          <img src={src} alt="Catalog logo preview" className="h-16 w-16 object-contain" />
+        ) : (
+          <ImageIcon className="h-7 w-7 text-[rgb(var(--ec-page-text-muted)/0.7)]" aria-hidden />
+        )}
+        {busy && (
+          <div className="absolute inset-0 flex items-center justify-center bg-[rgb(var(--ec-page-bg)/0.7)] backdrop-blur-sm">
+            <Loader2 className="h-4 w-4 animate-spin text-[rgb(var(--ec-page-text))]" aria-hidden />
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1">
+        <p className="text-[13px] font-medium text-[rgb(var(--ec-page-text))]">{src ? 'Replace logo' : 'Upload a logo'}</p>
+        <p className="text-[12px] text-[rgb(var(--ec-page-text-muted))]">
+          {dragOver ? 'Release to upload' : 'Drag a file here, or click to browse.'}
+        </p>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/png,image/jpeg,image/svg+xml,image/webp"
+          className="hidden"
+          disabled={!canEdit || busy}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) void upload(file);
+          }}
+        />
+        <button
+          type="button"
+          disabled={!canEdit || busy}
+          onClick={() => inputRef.current?.click()}
+          className="inline-flex items-center gap-1.5 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-3 py-1.5 text-[12px] font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.78)] disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Upload className="h-3 w-3" aria-hidden />
+          {src ? 'Replace' : 'Upload'}
+        </button>
+        {src && (
+          <button
+            type="button"
+            disabled={!canEdit || busy}
+            onClick={remove}
+            aria-label="Remove logo"
+            className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-transparent text-[rgb(var(--ec-page-text-muted))] transition-colors hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Trash2 className="h-3.5 w-3.5" aria-hidden />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};