@actuate-media/cms-admin 0.61.0 → 0.63.0

package/src/components/forms/NotificationsPanel.tsx

@@ -3,8 +3,7 @@
 /**
  * Notifications tab of the Form Schema drawer. Persists per-form notification
  * settings (recipients, reply-to, subject/message templates, field inclusion,
- * autoresponder). Actual email/webhook delivery + the "send test" action are
- * wired in a later phase (PR 6); this panel owns the configuration only.
+ * autoresponder). Email delivery uses the configured email adapter when enabled.
  */
 import { useEffect, useState } from 'react'
 import * as Switch from '@radix-ui/react-switch'
@@ -179,8 +178,10 @@ export function NotificationsPanel({
       </fieldset>
 
       <p className="text-muted-foreground text-xs">
-        Email &amp; webhook delivery (including the test action) is wired in an upcoming release.
-        Settings saved here apply automatically once delivery is enabled.
+        For CRM integrations (Zapier, HubSpot via Zapier, etc.), use the{' '}
+        <span className="font-medium">Integrations</span> tab to add a signed webhook. Email
+        notifications send when recipients are configured and your email provider is set up (
+        <span className="font-mono">RESEND_API_KEY</span> or SMTP).
       </p>
 
       <div className="flex justify-end">

package/src/components/forms/WebhooksPanel.tsx

@@ -0,0 +1,311 @@
+'use client'
+
+/**
+ * Integrations tab of the Form Schema drawer. Manages signed outbound webhooks
+ * (Zapier Catch Hook, Make, custom CRM endpoints) and guides editors through
+ * the default Zapier → Webhooks by Zapier → Catch Hook setup.
+ */
+import * as Switch from '@radix-ui/react-switch'
+import { ExternalLink, Loader2, Plus, Trash2, Zap } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  createFormWebhook,
+  deleteFormWebhook,
+  fetchFormWebhooks,
+  testFormWebhook,
+  updateFormWebhook,
+  type FormWebhookConfig,
+} from '../../lib/forms-service.js'
+import { ConfirmDialog } from '../ui/ConfirmDialog.js'
+import { FormsErrorState, FormsLoading, btnPrimary, btnSecondary } from './primitives.js'
+
+const ZAPIER_CATCH_HOOK_DOCS = 'https://zapier.com/apps/webhook/integrations'
+const FORMS_INTEGRATIONS_DOCS = 'https://actuatecms.dev/docs/forms-and-integrations'
+
+const inputCls =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function WebhooksPanel({ formId, formSlug }: { formId: string; formSlug: string }) {
+  const [webhooks, setWebhooks] = useState<FormWebhookConfig[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [url, setUrl] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [createdSecret, setCreatedSecret] = useState<string | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<FormWebhookConfig | null>(null)
+  const [testingId, setTestingId] = useState<string | null>(null)
+
+  async function reload(): Promise<void> {
+    setLoading(true)
+    setError(null)
+    try {
+      setWebhooks(await fetchFormWebhooks(formId))
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load webhooks')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchFormWebhooks(formId)
+      .then((rows) => {
+        if (active) setWebhooks(rows)
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e.message : 'Failed to load webhooks')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  async function handleCreate(e: React.FormEvent): Promise<void> {
+    e.preventDefault()
+    const trimmed = url.trim()
+    if (!trimmed) {
+      toast.error('Paste your Catch Hook URL first.')
+      return
+    }
+    setCreating(true)
+    const res = await createFormWebhook(formId, {
+      url: trimmed,
+      events: ['form.submitted'],
+      enabled: true,
+    })
+    setCreating(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.secret) setCreatedSecret(res.data.secret)
+    setUrl('')
+    toast.success('Webhook connected.')
+    await reload()
+  }
+
+  async function toggleEnabled(webhook: FormWebhookConfig, enabled: boolean): Promise<void> {
+    const res = await updateFormWebhook(formId, webhook.id, { enabled })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    setWebhooks((rows) => rows.map((row) => (row.id === webhook.id ? { ...row, enabled } : row)))
+  }
+
+  async function handleTest(webhookId: string): Promise<void> {
+    setTestingId(webhookId)
+    const res = await testFormWebhook(formId, webhookId)
+    setTestingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.ok) {
+      toast.success(`Test delivery succeeded (HTTP ${res.data.status}).`)
+    } else {
+      toast.error(res.data?.error || `Test failed (HTTP ${res.data?.status ?? 'unknown'}).`)
+    }
+    await reload()
+  }
+
+  async function confirmDelete(): Promise<void> {
+    if (!pendingDelete) return
+    const res = await deleteFormWebhook(formId, pendingDelete.id)
+    setPendingDelete(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Webhook removed.')
+    await reload()
+  }
+
+  if (loading) return <FormsLoading label="Loading integrations…" />
+  if (error) return <FormsErrorState message={error} onRetry={() => void reload()} />
+
+  return (
+    <div className="space-y-5">
+      <section
+        className="border-border bg-muted/40 space-y-3 rounded-lg border p-4"
+        aria-labelledby="zapier-helper-title"
+      >
+        <div className="flex items-start gap-3">
+          <span className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
+            <Zap size={18} aria-hidden />
+          </span>
+          <div className="min-w-0 space-y-2">
+            <h3 id="zapier-helper-title" className="text-foreground text-sm font-medium">
+              Connect to Zapier (recommended)
+            </h3>
+            <ol className="text-muted-foreground list-decimal space-y-1 pl-4 text-sm">
+              <li>
+                In Zapier, create a Zap with trigger{' '}
+                <span className="text-foreground font-medium">Webhooks by Zapier → Catch Hook</span>
+                .
+              </li>
+              <li>Copy the hook URL Zapier gives you and paste it below.</li>
+              <li>
+                Map fields in your action step — submission values arrive under{' '}
+                <span className="font-mono text-xs">data.email</span>,{' '}
+                <span className="font-mono text-xs">data.name</span>, etc.
+              </li>
+              <li>
+                Use event <span className="font-mono text-xs">form.submitted</span> only (spam hits
+                emit <span className="font-mono text-xs">form.spam_detected</span> separately).
+              </li>
+            </ol>
+            <p className="text-muted-foreground text-xs">
+              HubSpot, Salesforce, Slack, and Google Sheets work through Zapier actions — no native
+              Actuate app required for v1.
+            </p>
+            <div className="flex flex-wrap gap-3 pt-1">
+              <a
+                href={ZAPIER_CATCH_HOOK_DOCS}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
+              >
+                Open Zapier Webhooks
+                <ExternalLink size={14} aria-hidden />
+              </a>
+              <a
+                href={FORMS_INTEGRATIONS_DOCS}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
+              >
+                Full integration guide
+                <ExternalLink size={14} aria-hidden />
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <form onSubmit={handleCreate} className="space-y-3">
+        <label className="block">
+          <span className="text-foreground mb-1 block text-sm font-medium">Webhook URL</span>
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://hooks.zapier.com/hooks/catch/…"
+            className={inputCls}
+            autoComplete="off"
+          />
+          <span className="text-muted-foreground mt-1 block text-xs">
+            Paste your Catch Hook URL for form <span className="font-mono">{formSlug}</span>.
+            Payloads are HMAC-signed via <span className="font-mono">X-Actuate-Signature</span>.
+          </span>
+        </label>
+        <button
+          type="submit"
+          className={`${btnPrimary} inline-flex items-center`}
+          disabled={creating}
+        >
+          {creating ? (
+            <>
+              <Loader2 className="mr-2 inline h-4 w-4 animate-spin" aria-hidden />
+              Connecting…
+            </>
+          ) : (
+            <>
+              <Plus className="mr-1 inline h-4 w-4" aria-hidden />
+              Add webhook
+            </>
+          )}
+        </button>
+      </form>
+
+      {createdSecret && (
+        <div
+          className="border-success/30 bg-success/10 text-foreground space-y-2 rounded-md border px-3 py-3 text-sm"
+          role="status"
+        >
+          <p className="font-medium">Signing secret (shown once)</p>
+          <p className="text-muted-foreground text-xs">
+            Store this if your CRM verifies HMAC signatures. You cannot retrieve it again after
+            closing this panel.
+          </p>
+          <pre className="border-border bg-background overflow-x-auto rounded border px-2 py-1.5 font-mono text-xs">
+            {createdSecret}
+          </pre>
+          <button type="button" className={btnSecondary} onClick={() => setCreatedSecret(null)}>
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {webhooks.length === 0 ? (
+        <p className="text-muted-foreground text-sm">
+          No webhooks yet. Add a Catch Hook URL to send each submission to your CRM.
+        </p>
+      ) : (
+        <ul className="space-y-3" aria-label="Configured webhooks">
+          {webhooks.map((webhook) => (
+            <li
+              key={webhook.id}
+              className="border-border flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <div className="min-w-0">
+                <p className="text-foreground truncate font-mono text-xs">{webhook.url}</p>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  Events: {webhook.events.join(', ') || 'form.submitted'}
+                  {webhook.lastDeliveryAt
+                    ? ` · Last delivery: ${webhook.lastDeliveryStatus ?? 'unknown'}`
+                    : ''}
+                </p>
+              </div>
+              <div className="flex shrink-0 flex-wrap items-center gap-2">
+                <Switch.Root
+                  checked={webhook.enabled}
+                  onCheckedChange={(v) => void toggleEnabled(webhook, v)}
+                  aria-label={`Enable webhook ${webhook.url}`}
+                  className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative h-[18px] w-8 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                >
+                  <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+                </Switch.Root>
+                <button
+                  type="button"
+                  className={btnSecondary}
+                  disabled={testingId === webhook.id}
+                  onClick={() => void handleTest(webhook.id)}
+                >
+                  {testingId === webhook.id ? 'Testing…' : 'Send test'}
+                </button>
+                <button
+                  type="button"
+                  className="text-destructive hover:bg-destructive/10 focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none"
+                  aria-label="Remove webhook"
+                  onClick={() => setPendingDelete(webhook)}
+                >
+                  <Trash2 size={16} aria-hidden />
+                  Remove
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <ConfirmDialog
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        onConfirm={() => void confirmDelete()}
+        title="Remove webhook?"
+        description="New submissions will no longer be sent to this URL. Existing Zapier Zaps are not deleted — disable them in Zapier if needed."
+        confirmLabel="Remove"
+        cancelLabel="Keep webhook"
+        destructive
+      />
+    </div>
+  )
+}

package/src/lib/forms-service.ts

@@ -17,6 +17,8 @@ import type {
   FormField,
   FormNotificationSettings,
   FormEmbedSettings,
+  FormWebhookConfig,
+  FormWebhookEvent,
   FormStatus,
   FormStats,
   FormsSidebarCount,
@@ -35,6 +37,8 @@ export type {
   FieldValidationRules,
   FormNotificationSettings,
   FormEmbedSettings,
+  FormWebhookConfig,
+  FormWebhookEvent,
   FormStatus,
   FormStats,
   FormsSidebarCount,
@@ -251,6 +255,83 @@ export async function updateEmbedSettings(
   return { data: res.data, error: res.error }
 }
 
+// ─── Webhooks (CRM / Zapier) ───────────────────────────────────────────────
+
+export interface WebhookTestResult {
+  ok: boolean
+  status: number
+  attempts: number
+  error?: string
+}
+
+export interface CreateFormWebhookPayload {
+  url: string
+  events?: FormWebhookEvent[]
+  enabled?: boolean
+  retryCount?: number
+}
+
+export interface UpdateFormWebhookPayload {
+  url?: string
+  events?: FormWebhookEvent[]
+  enabled?: boolean
+  retryCount?: number
+}
+
+/** Plaintext secret is returned only on create — store it before closing the dialog. */
+export type CreatedFormWebhook = FormWebhookConfig & { secret: string }
+
+export async function fetchFormWebhooks(formId: string): Promise<FormWebhookConfig[]> {
+  const res = await cmsApi<FormWebhookConfig[]>(`/forms/${encodeURIComponent(formId)}/webhooks`)
+  throwIfError(res)
+  return res.data ?? []
+}
+
+export async function createFormWebhook(
+  formId: string,
+  payload: CreateFormWebhookPayload,
+): Promise<{ data?: CreatedFormWebhook; error?: string }> {
+  const res = await cmsApi<CreatedFormWebhook>(`/forms/${encodeURIComponent(formId)}/webhooks`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+  return { data: res.data, error: res.error }
+}
+
+export async function updateFormWebhook(
+  formId: string,
+  webhookId: string,
+  payload: UpdateFormWebhookPayload,
+): Promise<{ data?: FormWebhookConfig; error?: string }> {
+  const res = await cmsApi<FormWebhookConfig>(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}`,
+    { method: 'PATCH', body: JSON.stringify(payload) },
+  )
+  return { data: res.data, error: res.error }
+}
+
+export async function deleteFormWebhook(
+  formId: string,
+  webhookId: string,
+): Promise<{ error?: string }> {
+  const res = await cmsApi(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}`,
+    { method: 'DELETE' },
+  )
+  return { error: res.error }
+}
+
+export async function testFormWebhook(
+  formId: string,
+  webhookId: string,
+): Promise<{ data?: WebhookTestResult; error?: string }> {
+  const res = await cmsApi<WebhookTestResult>(
+    `/forms/${encodeURIComponent(formId)}/webhooks/${encodeURIComponent(webhookId)}/test`,
+    { method: 'POST' },
+  )
+  return { data: res.data, error: res.error }
+}
+
 // ─── Entries (submissions) ─────────────────────────────────────────────────
 
 /** A page of submissions as returned by `GET /forms/entries`. */

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -17,6 +17,7 @@ import { AuthorBioSection } from './AuthorBioSection.js'
 import { RelatedPostsSection } from './RelatedPostsSection.js'
 import { GallerySection } from './GallerySection.js'
 import { EmbedSection } from './EmbedSection.js'
+import { WidgetEmbedSection } from './WidgetEmbedSection.js'
 
 /**
  * Section types with a real canvas body component below. Anything else —
@@ -36,6 +37,7 @@ const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
   'related-posts',
   'gallery',
   'embed',
+  'widget-embed',
 ])
 
 /** True when the canvas renders this type for real (not as a placeholder). */
@@ -70,6 +72,8 @@ function SectionBody({ section, context }: { section: PageSection; context?: Pos
       return <GallerySection section={section} />
     case 'embed':
       return <EmbedSection section={section} />
+    case 'widget-embed':
+      return <WidgetEmbedSection section={section} />
     default: {
       // Custom (config-declared) and unmanaged types: use a consumer-supplied
       // canvas renderer when one is registered (see admin-renderers.tsx).

package/src/views/page-editor/sections/WidgetEmbedSection.tsx

@@ -0,0 +1,32 @@
+import { Puzzle } from 'lucide-react'
+import { parseWidgetEmbed, WIDGET_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/**
+ * Canvas body for the `widget-embed` section. Shows a reserved-height placeholder
+ * instead of loading third-party scripts inside the editor.
+ */
+export function WidgetEmbedSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const parsed = parseWidgetEmbed(c)
+  const title = str(c, 'title')
+  const minHeight = parsed?.minHeightPx ?? 280
+
+  return (
+    <section className="mx-auto max-w-3xl px-6" aria-label={title || 'Third-party widget'}>
+      <div
+        className="bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl"
+        style={{ minHeight: `${minHeight}px` }}
+      >
+        <Puzzle className="h-8 w-8" aria-hidden />
+        <p className="text-foreground text-sm font-medium">
+          {parsed
+            ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
+            : 'Configure widget provider + ids'}
+        </p>
+        {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
+      </div>
+    </section>
+  )
+}

package/src/views/settings/SeoSettingsTab.tsx

@@ -126,6 +126,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <SettingsValidationSummary issues={seo.issues} />
 
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
+      <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />
 
@@ -409,6 +410,150 @@ function SeoPreviewCard({
   )
 }
 
+// ---------------------------------------------------------------------------
+// Organization (Schema.org)
+// ---------------------------------------------------------------------------
+
+function OrganizationCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
+  const nameId = useId()
+  const urlId = useId()
+  const sameAsId = useId()
+  const [pickerOpen, setPickerOpen] = useState(false)
+
+  const { form, setField, issues, sources, siteName, siteUrl } = seo
+  const nameIssue = issues.find((i) => i.field === 'organizationName')
+  const urlIssue = issues.find((i) => i.field === 'organizationUrl')
+  const logoIssue = issues.find((i) => i.field === 'organizationLogo')
+  const sameAsIssue = issues.find((i) => i.field === 'organizationSameAs')
+
+  const nameEditable = sources.organizationName?.editable !== false && canEdit
+  const urlEditable = sources.organizationUrl?.editable !== false && canEdit
+  const logoEditable = sources.organizationLogo?.editable !== false && canEdit
+  const sameAsEditable = sources.organizationSameAs?.editable !== false && canEdit
+
+  return (
+    <SettingsCard
+      title="Organization"
+      description="Schema.org Organization data injected sitewide in JSON-LD. Logo and social profiles should use absolute production URLs."
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor={nameId} className={LABEL_CLASS}>
+            Organization name
+            <SettingsSourceBadge meta={sources.organizationName} />
+          </label>
+          <input
+            id={nameId}
+            type="text"
+            value={form.organizationName}
+            disabled={!nameEditable}
+            placeholder={siteName || 'Your organization'}
+            onChange={(e) => setField('organizationName', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">Falls back to site name when empty.</p>
+          {nameIssue && <p className="text-destructive mt-1 text-sm">{nameIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={urlId} className={LABEL_CLASS}>
+            Organization URL
+            <SettingsSourceBadge meta={sources.organizationUrl} />
+          </label>
+          <input
+            id={urlId}
+            type="url"
+            value={form.organizationUrl}
+            disabled={!urlEditable}
+            placeholder={siteUrl || 'https://example.com'}
+            aria-invalid={urlIssue?.severity === 'error'}
+            onChange={(e) => setField('organizationUrl', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            Canonical organization homepage. Falls back to site URL when empty.
+          </p>
+          {urlIssue && <p className="text-destructive mt-1 text-sm">{urlIssue.message}</p>}
+        </div>
+
+        <div>
+          <span className={LABEL_CLASS}>
+            Organization logo
+            <SettingsSourceBadge meta={sources.organizationLogo} />
+          </span>
+          <div className="flex items-center gap-3">
+            <div className="border-border bg-muted flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border">
+              {form.organizationLogo ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={form.organizationLogo}
+                  alt="Organization logo preview"
+                  className="h-full w-full object-contain p-1"
+                />
+              ) : (
+                <ImageIcon size={20} className="text-muted-foreground" aria-hidden="true" />
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setPickerOpen(true)}
+                  disabled={!logoEditable}
+                  className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  <Upload size={14} aria-hidden="true" />
+                  {form.organizationLogo ? 'Replace logo' : 'Choose logo'}
+                </button>
+                {form.organizationLogo && logoEditable && (
+                  <button
+                    type="button"
+                    onClick={() => setField('organizationLogo', '')}
+                    className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors"
+                  >
+                    <X size={14} aria-hidden="true" />
+                    Remove
+                  </button>
+                )}
+              </div>
+              <p className="text-muted-foreground text-sm">Square PNG or SVG recommended.</p>
+            </div>
+          </div>
+          {logoIssue && <p className="text-destructive mt-1 text-sm">{logoIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={sameAsId} className={LABEL_CLASS}>
+            Social profiles (sameAs)
+            <SettingsSourceBadge meta={sources.organizationSameAs} />
+          </label>
+          <textarea
+            id={sameAsId}
+            rows={4}
+            value={form.organizationSameAs}
+            disabled={!sameAsEditable}
+            placeholder={'https://linkedin.com/company/your-brand\nhttps://twitter.com/your-brand'}
+            aria-invalid={sameAsIssue?.severity === 'error'}
+            onChange={(e) => setField('organizationSameAs', e.target.value)}
+            className={`${INPUT_CLASS} resize-y font-mono text-sm`}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            One HTTPS profile URL per line (LinkedIn, X, Facebook, YouTube, etc.).
+          </p>
+          {sameAsIssue && <p className="text-destructive mt-1 text-sm">{sameAsIssue.message}</p>}
+        </div>
+      </div>
+
+      <MediaPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        accept="image/*"
+        onSelect={(url) => setField('organizationLogo', url)}
+      />
+    </SettingsCard>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Search Engine Verification
 // ---------------------------------------------------------------------------