npm - @actuate-media/cms-admin - Versions diffs - 0.65.0 → 0.67.0 - Mend

@actuate-media/cms-admin 0.65.0 → 0.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/CHANGELOG.md +39 -0
package/dist/AdminRoot.d.ts.map +1 -1
package/dist/AdminRoot.js +7 -4
package/dist/AdminRoot.js.map +1 -1
package/dist/__tests__/components/inspector-pane.test.d.ts +2 -0
package/dist/__tests__/components/inspector-pane.test.d.ts.map +1 -0
package/dist/__tests__/components/inspector-pane.test.js +31 -0
package/dist/__tests__/components/inspector-pane.test.js.map +1 -0
package/dist/__tests__/lib/pages-tree.test.d.ts +2 -0
package/dist/__tests__/lib/pages-tree.test.d.ts.map +1 -0
package/dist/__tests__/lib/pages-tree.test.js +173 -0
package/dist/__tests__/lib/pages-tree.test.js.map +1 -0
package/dist/__tests__/views/dashboard.test.js +7 -3
package/dist/__tests__/views/dashboard.test.js.map +1 -1
package/dist/__tests__/views/media-seo-audit.render.test.d.ts +2 -0
package/dist/__tests__/views/media-seo-audit.render.test.d.ts.map +1 -0
package/dist/__tests__/views/media-seo-audit.render.test.js +102 -0
package/dist/__tests__/views/media-seo-audit.render.test.js.map +1 -0
package/dist/__tests__/views/onboarding-block.render.test.d.ts +2 -0
package/dist/__tests__/views/onboarding-block.render.test.d.ts.map +1 -0
package/dist/__tests__/views/onboarding-block.render.test.js +146 -0
package/dist/__tests__/views/onboarding-block.render.test.js.map +1 -0
package/dist/__tests__/views/pages-list-view.test.js +77 -1
package/dist/__tests__/views/pages-list-view.test.js.map +1 -1
package/dist/actuate-admin.css +1 -1
package/dist/components/script-tags/ScriptTagEditorPane.d.ts +26 -0
package/dist/components/script-tags/ScriptTagEditorPane.d.ts.map +1 -0
package/dist/components/script-tags/ScriptTagEditorPane.js +160 -0
package/dist/components/script-tags/ScriptTagEditorPane.js.map +1 -0
package/dist/components/ui/InspectorPane.d.ts +51 -0
package/dist/components/ui/InspectorPane.d.ts.map +1 -0
package/dist/components/ui/InspectorPane.js +42 -0
package/dist/components/ui/InspectorPane.js.map +1 -0
package/dist/components/ui/RowActions.d.ts +19 -0
package/dist/components/ui/RowActions.d.ts.map +1 -0
package/dist/components/ui/RowActions.js +16 -0
package/dist/components/ui/RowActions.js.map +1 -0
package/dist/components/ui/index.d.ts +4 -0
package/dist/components/ui/index.d.ts.map +1 -1
package/dist/components/ui/index.js +2 -0
package/dist/components/ui/index.js.map +1 -1
package/dist/layout/Header.js +1 -1
package/dist/layout/Header.js.map +1 -1
package/dist/layout/Layout.js +8 -38
package/dist/layout/Layout.js.map +1 -1
package/dist/lib/page-editor-service.d.ts +11 -2
package/dist/lib/page-editor-service.d.ts.map +1 -1
package/dist/lib/page-editor-service.js +8 -2
package/dist/lib/page-editor-service.js.map +1 -1
package/dist/lib/pages-service.d.ts +9 -0
package/dist/lib/pages-service.d.ts.map +1 -1
package/dist/lib/pages-service.js +14 -0
package/dist/lib/pages-service.js.map +1 -1
package/dist/lib/pages-tree.d.ts +44 -0
package/dist/lib/pages-tree.d.ts.map +1 -0
package/dist/lib/pages-tree.js +106 -0
package/dist/lib/pages-tree.js.map +1 -0
package/dist/lib/posts-service.d.ts +11 -0
package/dist/lib/posts-service.d.ts.map +1 -1
package/dist/lib/posts-service.js +13 -0
package/dist/lib/posts-service.js.map +1 -1
package/dist/lib/seo-service.d.ts +3 -0
package/dist/lib/seo-service.d.ts.map +1 -1
package/dist/lib/seo-service.js.map +1 -1
package/dist/views/Dashboard.d.ts.map +1 -1
package/dist/views/Dashboard.js +40 -3
package/dist/views/Dashboard.js.map +1 -1
package/dist/views/MediaBrowser.d.ts.map +1 -1
package/dist/views/MediaBrowser.js +55 -2
package/dist/views/MediaBrowser.js.map +1 -1
package/dist/views/MediaSeoAudit.d.ts +25 -0
package/dist/views/MediaSeoAudit.d.ts.map +1 -0
package/dist/views/MediaSeoAudit.js +97 -0
package/dist/views/MediaSeoAudit.js.map +1 -0
package/dist/views/Pages/PagesListView.d.ts.map +1 -1
package/dist/views/Pages/PagesListView.js +145 -16
package/dist/views/Pages/PagesListView.js.map +1 -1
package/dist/views/Pages/PagesTreeTable.d.ts +35 -0
package/dist/views/Pages/PagesTreeTable.d.ts.map +1 -0
package/dist/views/Pages/PagesTreeTable.js +28 -0
package/dist/views/Pages/PagesTreeTable.js.map +1 -0
package/dist/views/Posts/PostsListView.d.ts.map +1 -1
package/dist/views/Posts/PostsListView.js +66 -9
package/dist/views/Posts/PostsListView.js.map +1 -1
package/dist/views/ScriptTags.d.ts +5 -1
package/dist/views/ScriptTags.d.ts.map +1 -1
package/dist/views/ScriptTags.js +32 -7
package/dist/views/ScriptTags.js.map +1 -1
package/dist/views/dashboard/OnboardingBlock.d.ts +29 -0
package/dist/views/dashboard/OnboardingBlock.d.ts.map +1 -0
package/dist/views/dashboard/OnboardingBlock.js +71 -0
package/dist/views/dashboard/OnboardingBlock.js.map +1 -0
package/dist/views/page-editor/PageSectionEditor.d.ts +7 -1
package/dist/views/page-editor/PageSectionEditor.d.ts.map +1 -1
package/dist/views/page-editor/PageSectionEditor.js +3 -3
package/dist/views/page-editor/PageSectionEditor.js.map +1 -1
package/dist/views/page-editor/PageSettingsModal.d.ts +1 -1
package/dist/views/page-editor/PageSettingsModal.d.ts.map +1 -1
package/dist/views/page-editor/PageSettingsModal.js +42 -3
package/dist/views/page-editor/PageSettingsModal.js.map +1 -1
package/dist/views/seo/TechnicalTab.d.ts.map +1 -1
package/dist/views/seo/TechnicalTab.js +15 -0
package/dist/views/seo/TechnicalTab.js.map +1 -1
package/package.json +3 -3
package/src/AdminRoot.tsx +7 -3
package/src/__tests__/components/inspector-pane.test.tsx +64 -0
package/src/__tests__/lib/pages-tree.test.ts +197 -0
package/src/__tests__/views/dashboard.test.tsx +7 -3
package/src/__tests__/views/media-seo-audit.render.test.tsx +117 -0
package/src/__tests__/views/onboarding-block.render.test.tsx +193 -0
package/src/__tests__/views/pages-list-view.test.tsx +93 -1
package/src/components/script-tags/ScriptTagEditorPane.tsx +474 -0
package/src/components/ui/InspectorPane.tsx +129 -0
package/src/components/ui/RowActions.tsx +50 -0
package/src/components/ui/index.ts +12 -0
package/src/layout/Header.tsx +2 -2
package/src/layout/Layout.tsx +8 -80
package/src/lib/page-editor-service.ts +16 -2
package/src/lib/pages-service.ts +18 -0
package/src/lib/pages-tree.ts +145 -0
package/src/lib/posts-service.ts +26 -0
package/src/lib/seo-service.ts +3 -0
package/src/views/Dashboard.tsx +286 -214
package/src/views/MediaBrowser.tsx +673 -512
package/src/views/MediaSeoAudit.tsx +320 -0
package/src/views/Pages/PagesListView.tsx +459 -185
package/src/views/Pages/PagesTreeTable.tsx +339 -0
package/src/views/Posts/PostsListView.tsx +135 -10
package/src/views/ScriptTags.tsx +204 -129
package/src/views/dashboard/OnboardingBlock.tsx +233 -0
package/src/views/page-editor/PageSectionEditor.tsx +9 -2
package/src/views/page-editor/PageSettingsModal.tsx +75 -2
package/src/views/seo/TechnicalTab.tsx +15 -0
package/dist/views/ScriptTagEditor.d.ts +0 -6
package/dist/views/ScriptTagEditor.d.ts.map +0 -1
package/dist/views/ScriptTagEditor.js +0 -111
package/dist/views/ScriptTagEditor.js.map +0 -1
package/src/views/ScriptTagEditor.tsx +0 -353

package/src/components/script-tags/ScriptTagEditorPane.tsx ADDED Viewed

@@ -0,0 +1,474 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Copy, Minus, Plus, Trash2, X } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { Toggle } from '../ui/Toggle.js'
+import { ConfirmDialog } from '../ui/ConfirmDialog.js'
+import { cmsApi } from '../../lib/api.js'
+export interface ScriptTag {
+  id: string
+  name: string
+  code: string
+  placement: string
+  scope: string
+  targetPaths: string[]
+  priority: number
+  enabled: boolean
+  loadAsync: boolean
+  disableInPreview: boolean
+  consentCategory: string
+  createdAt: string
+  updatedAt: string
+}
+export const PLACEMENT_LABELS: Record<string, string> = {
+  head: 'Head',
+  body_open: 'Body start',
+  body_close: 'Body end',
+}
+export const CONSENT_LABELS: Record<string, string> = {
+  none: 'No consent',
+  analytics: 'Analytics',
+  marketing: 'Marketing',
+  functional: 'Functional',
+  preferences: 'Preferences',
+}
+const PLACEMENT_OPTIONS = [
+  { value: 'head', label: 'Head', hint: '<head>' },
+  { value: 'body_open', label: 'Body start', hint: '<body>' },
+  { value: 'body_close', label: 'Body end', hint: '</body>' },
+]
+const SCOPE_OPTIONS = [
+  { value: 'site', label: 'Entire site' },
+  { value: 'parents', label: 'Parent pages' },
+  { value: 'urls', label: 'Specific URLs' },
+]
+const CONSENT_OPTIONS = ['none', 'analytics', 'marketing', 'functional', 'preferences']
+function OptionTile({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      onClick={onClick}
+      className={`rounded-[7px] border px-2 py-2 text-[12px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+        active
+          ? 'border-[var(--acc)] bg-[var(--acc-l)] text-[var(--acc)]'
+          : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)]'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+function ToggleRow({
+  label,
+  hint,
+  checked,
+  onCheckedChange,
+}: {
+  label: string
+  hint: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5">
+      <div className="min-w-0">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{label}</div>
+        <div className="text-[11px] text-[var(--muted)]">{hint}</div>
+      </div>
+      <Toggle checked={checked} onCheckedChange={onCheckedChange} aria-label={label} />
+    </div>
+  )
+}
+export interface ScriptTagEditorPaneProps {
+  /** null = create mode */
+  tag: ScriptTag | null
+  onClose: () => void
+  /** Called after any successful save/duplicate/delete so the list can refetch. */
+  onChanged: (savedId?: string) => void
+}
+export function ScriptTagEditorPane({ tag, onClose, onChanged }: ScriptTagEditorPaneProps) {
+  const isNew = tag === null
+  const [name, setName] = useState('')
+  const [code, setCode] = useState('')
+  const [placement, setPlacement] = useState('head')
+  const [scope, setScope] = useState('site')
+  const [targetPaths, setTargetPaths] = useState<string[]>([])
+  const [pathInput, setPathInput] = useState('')
+  const [priority, setPriority] = useState(100)
+  const [enabled, setEnabled] = useState(true)
+  const [loadAsync, setLoadAsync] = useState(false)
+  const [disableInPreview, setDisableInPreview] = useState(true)
+  const [consentCategory, setConsentCategory] = useState('none')
+  const [saving, setSaving] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  useEffect(() => {
+    setName(tag?.name ?? '')
+    setCode(tag?.code ?? '')
+    setPlacement(tag?.placement ?? 'head')
+    setScope(tag?.scope ?? 'site')
+    setTargetPaths(tag?.targetPaths ?? [])
+    setPathInput('')
+    setPriority(tag?.priority ?? 100)
+    setEnabled(tag?.enabled ?? true)
+    setLoadAsync(tag?.loadAsync ?? false)
+    setDisableInPreview(tag?.disableInPreview ?? true)
+    setConsentCategory(tag?.consentCategory ?? 'none')
+  }, [tag])
+  const addPath = () => {
+    const trimmed = pathInput.trim()
+    if (!trimmed) return
+    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+    if (!targetPaths.includes(normalized)) setTargetPaths([...targetPaths, normalized])
+    setPathInput('')
+  }
+  const buildPayload = () => ({
+    name: name.trim(),
+    code,
+    placement,
+    scope,
+    targetPaths: scope === 'site' ? [] : targetPaths,
+    priority,
+    enabled,
+    loadAsync,
+    disableInPreview,
+    consentCategory,
+  })
+  const validate = (): boolean => {
+    if (!name.trim()) {
+      toast.error('Name is required')
+      return false
+    }
+    if (!code.trim()) {
+      toast.error('Code snippet is required')
+      return false
+    }
+    if (scope !== 'site' && targetPaths.length === 0) {
+      toast.error('At least one target path is required for this scope')
+      return false
+    }
+    return true
+  }
+  const handleSave = async () => {
+    if (!validate()) return
+    setSaving(true)
+    const res = isNew
+      ? await cmsApi<ScriptTag>('/script-tags', {
+          method: 'POST',
+          body: JSON.stringify(buildPayload()),
+        })
+      : await cmsApi<ScriptTag>(`/script-tags/${tag.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(buildPayload()),
+        })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(isNew ? 'Script created' : 'Script saved')
+    onChanged(res.data?.id ?? tag?.id)
+  }
+  const handleDuplicate = async () => {
+    if (!tag) return
+    const res = await cmsApi<ScriptTag>('/script-tags', {
+      method: 'POST',
+      body: JSON.stringify({ ...buildPayload(), name: `${name.trim()} (Copy)`, enabled: false }),
+    })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Script duplicated (created disabled)')
+    onChanged(res.data?.id)
+  }
+  const handleDelete = async () => {
+    if (!tag) return
+    const res = await cmsApi(`/script-tags/${tag.id}`, { method: 'DELETE' })
+    setConfirmDelete(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Script deleted')
+    onChanged()
+    onClose()
+  }
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel="Close script editor">
+        <div className="flex items-center gap-2.5">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Script name…"
+            aria-label="Script name"
+            className="min-w-0 flex-1 rounded-[7px] border border-transparent bg-transparent px-1.5 py-1 text-[14px] font-semibold text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--bdr)] focus:border-[var(--acc)] focus:outline-none"
+          />
+          <Toggle
+            checked={enabled}
+            onCheckedChange={setEnabled}
+            variant="enabled"
+            aria-label={enabled ? 'Deactivate script' : 'Activate script'}
+          />
+        </div>
+        <div className="mt-1.5 flex flex-wrap items-center gap-1.5 px-1.5">
+          <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[10.5px] text-[var(--sub)]">
+            {PLACEMENT_LABELS[placement] ?? placement}
+          </span>
+          <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[10.5px] text-[var(--sub)]">
+            {CONSENT_LABELS[consentCategory] ?? consentCategory}
+          </span>
+        </div>
+      </InspectorPaneHeader>
+      <InspectorPaneBody>
+        <InspectorPaneSection title="Code" subtitle="HTML / JS">
+          <textarea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="<!-- Paste your script here -->"
+            rows={8}
+            spellCheck={false}
+            aria-label="Script code"
+            className="w-full rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-2 font-mono text-[11.5px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none"
+          />
+          <p className="mt-1 text-[11px] text-[var(--muted)]">
+            Fires on frontend only — never injected during CMS rendering.
+          </p>
+        </InspectorPaneSection>
+        <InspectorPaneSection title="Injection Location">
+          <div className="grid grid-cols-3 gap-1.5" role="group" aria-label="Injection location">
+            {PLACEMENT_OPTIONS.map((opt) => (
+              <OptionTile
+                key={opt.value}
+                active={placement === opt.value}
+                onClick={() => setPlacement(opt.value)}
+              >
+                <span className="block">{opt.label}</span>
+                <span className="block font-mono text-[10px] font-normal text-[var(--muted)]">
+                  {opt.hint}
+                </span>
+              </OptionTile>
+            ))}
+          </div>
+          <div className="mt-3 flex items-center justify-between gap-3">
+            <div>
+              <div className="text-[12.5px] font-medium text-[var(--txt)]">Load Priority</div>
+              <div className="text-[11px] text-[var(--muted)]">Lower = fires first</div>
+            </div>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                aria-label="Decrease priority"
+                onClick={() => setPriority((p) => Math.max(0, p - 1))}
+                className="flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+              >
+                <Minus size={13} />
+              </button>
+              <input
+                type="number"
+                value={priority}
+                min={0}
+                onChange={(e) => setPriority(Math.max(0, parseInt(e.target.value, 10) || 0))}
+                aria-label="Load priority"
+                className="w-14 rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-1.5 py-1 text-center font-mono text-[12px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none"
+              />
+              <button
+                type="button"
+                aria-label="Increase priority"
+                onClick={() => setPriority((p) => p + 1)}
+                className="flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+              >
+                <Plus size={13} />
+              </button>
+            </div>
+          </div>
+        </InspectorPaneSection>
+        <InspectorPaneSection title="Firing Conditions">
+          <div className="grid grid-cols-3 gap-1.5" role="group" aria-label="Scope">
+            {SCOPE_OPTIONS.map((opt) => (
+              <OptionTile
+                key={opt.value}
+                active={scope === opt.value}
+                onClick={() => setScope(opt.value)}
+              >
+                {opt.label}
+              </OptionTile>
+            ))}
+          </div>
+          {scope !== 'site' && (
+            <div className="mt-3">
+              <label
+                htmlFor="script-tag-path-input"
+                className="mb-1 block text-[11.5px] font-medium text-[var(--sub)]"
+              >
+                {scope === 'parents' ? 'Parent paths (includes child pages)' : 'URL paths'}
+              </label>
+              <div className="flex gap-1.5">
+                <input
+                  id="script-tag-path-input"
+                  type="text"
+                  value={pathInput}
+                  onChange={(e) => setPathInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault()
+                      addPath()
+                    }
+                  }}
+                  placeholder="/services"
+                  className="min-w-0 flex-1 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 font-mono text-[12px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none"
+                />
+                <button
+                  type="button"
+                  onClick={addPath}
+                  aria-label="Add path"
+                  className="flex h-[31px] w-[31px] shrink-0 items-center justify-center rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+                >
+                  <Plus size={14} />
+                </button>
+              </div>
+              {targetPaths.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                  {targetPaths.map((p) => (
+                    <span
+                      key={p}
+                      className="inline-flex items-center gap-1 rounded-[var(--r-pill)] border border-[var(--bdr)] bg-[var(--bg)] px-2 py-0.5 font-mono text-[11px] text-[var(--sub)]"
+                    >
+                      {p}
+                      <button
+                        type="button"
+                        onClick={() => setTargetPaths(targetPaths.filter((x) => x !== p))}
+                        aria-label={`Remove ${p}`}
+                        className="text-[var(--muted)] hover:text-[var(--err)]"
+                      >
+                        <X size={11} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </InspectorPaneSection>
+        <InspectorPaneSection title="Cookie Consent" subtitle="GDPR / CCPA">
+          <div className="mb-1.5 text-[12.5px] font-medium text-[var(--txt)]">
+            Consent category required
+          </div>
+          <div className="grid grid-cols-3 gap-1.5" role="group" aria-label="Consent category">
+            {CONSENT_OPTIONS.map((value) => (
+              <OptionTile
+                key={value}
+                active={consentCategory === value}
+                onClick={() => setConsentCategory(value)}
+              >
+                {CONSENT_LABELS[value]}
+              </OptionTile>
+            ))}
+          </div>
+          {consentCategory !== 'none' && (
+            <p className="mt-2 text-[11px] text-[var(--muted)]">
+              The script is injected only after the visitor accepts cookies (Actuate Consent
+              &ldquo;Accept all&rdquo;).
+            </p>
+          )}
+        </InspectorPaneSection>
+        <InspectorPaneSection title="Advanced">
+          <ToggleRow
+            label="Load async"
+            hint="Non-blocking — doesn't delay page render"
+            checked={loadAsync}
+            onCheckedChange={setLoadAsync}
+          />
+          <ToggleRow
+            label="Disable in preview mode"
+            hint="Skip firing inside CMS page preview"
+            checked={disableInPreview}
+            onCheckedChange={setDisableInPreview}
+          />
+        </InspectorPaneSection>
+      </InspectorPaneBody>
+      <InspectorPaneFooter>
+        <button
+          type="button"
+          onClick={() => void handleSave()}
+          disabled={saving}
+          className="w-full rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saving ? 'Saving…' : 'Save Script'}
+        </button>
+        {!isNew && (
+          <div className="mt-2 flex items-center justify-center gap-4">
+            <button
+              type="button"
+              onClick={() => void handleDuplicate()}
+              className="inline-flex items-center gap-1.5 text-[12px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+            >
+              <Copy size={12} />
+              Duplicate
+            </button>
+            <button
+              type="button"
+              onClick={() => setConfirmDelete(true)}
+              className="inline-flex items-center gap-1.5 text-[12px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--err)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+            >
+              <Trash2 size={12} />
+              Delete
+            </button>
+          </div>
+        )}
+      </InspectorPaneFooter>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete script?"
+        description={`"${name || 'This script'}" will stop firing on your site immediately.`}
+        confirmLabel="Delete"
+        destructive
+        onConfirm={() => void handleDelete()}
+        onClose={() => setConfirmDelete(false)}
+      />
+    </>
+  )
+}

package/src/components/ui/InspectorPane.tsx ADDED Viewed

@@ -0,0 +1,129 @@
+'use client'
+import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
+/**
+ * Design-system inline split-pane pattern: a list that shrinks while a
+ * fixed-width editor/detail pane slides in beside it (Script Tags 420px,
+ * Entries 400px, Forms 390px, SEO Content 380px in the handoff).
+ *
+ * Compose as:
+ *
+ *   <SplitPaneLayout>
+ *     <SplitPaneList>…table…</SplitPaneList>
+ *     <InspectorPane open={!!selected} width={420} aria-label="Edit script">
+ *       <InspectorPaneHeader onClose={close}>…</InspectorPaneHeader>
+ *       <InspectorPaneBody>…sections…</InspectorPaneBody>
+ *       <InspectorPaneFooter>…save…</InspectorPaneFooter>
+ *     </InspectorPane>
+ *   </SplitPaneLayout>
+ */
+export function SplitPaneLayout({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`flex min-h-0 flex-1 overflow-hidden ${className ?? ''}`}>{children}</div>
+}
+export function SplitPaneList({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`min-w-0 flex-1 overflow-y-auto ${className ?? ''}`}>{children}</div>
+}
+export interface InspectorPaneProps {
+  open: boolean
+  /** Outer shell width in px when open (inner card fills it minus 12px gutters). */
+  width: number
+  children: ReactNode
+  'aria-label': string
+}
+export function InspectorPane({
+  open,
+  width,
+  children,
+  'aria-label': ariaLabel,
+}: InspectorPaneProps) {
+  return (
+    <div
+      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
+      style={{ width: open ? width : 0 }}
+      aria-hidden={!open}
+    >
+      <div
+        role="region"
+        aria-label={ariaLabel}
+        className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
+        style={{ width: width - 28 }}
+      >
+        {open ? children : null}
+      </div>
+    </div>
+  )
+}
+export function InspectorPaneHeader({
+  children,
+  onClose,
+  closeLabel = 'Close panel',
+}: {
+  children: ReactNode
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-4 py-3.5">
+      <div className="min-w-0 flex-1">{children}</div>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+      >
+        <X size={16} />
+      </button>
+    </div>
+  )
+}
+export function InspectorPaneBody({ children }: { children: ReactNode }) {
+  return <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+}
+/** Bordered section with the design's uppercase 10.5px section title. */
+export function InspectorPaneSection({
+  title,
+  subtitle,
+  children,
+}: {
+  title?: string
+  subtitle?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="border-b border-[var(--bdr)] px-4 py-3.5 last:border-b-0">
+      {title && (
+        <div className="mb-2.5 flex items-baseline gap-2">
+          <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
+            {title}
+          </span>
+          {subtitle && <span className="text-[11px] text-[var(--muted)]">{subtitle}</span>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+export function InspectorPaneFooter({ children }: { children: ReactNode }) {
+  return <div className="border-t border-[var(--bdr)] px-4 py-3.5">{children}</div>
+}

package/src/components/ui/RowActions.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+'use client'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+/**
+ * Design-system table row actions (`.row-actions` / `.ra-icon-btn`): a
+ * right-aligned cluster of 27px bordered icon buttons that fades in on row
+ * hover (the row must have the `group` class) and on keyboard focus.
+ */
+export function RowActions({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={`flex items-center justify-end gap-1 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 focus-within:opacity-100 ${className ?? ''}`}
+    >
+      {children}
+    </div>
+  )
+}
+export interface RowActionButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'type'
+> {
+  /** Accessible label — required, these are icon-only buttons. */
+  'aria-label': string
+  /** Red hover treatment for destructive actions. */
+  danger?: boolean
+  children: ReactNode
+}
+export function RowActionButton({
+  danger = false,
+  className,
+  children,
+  ...rest
+}: RowActionButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+        danger
+          ? 'hover:border-[var(--err)] hover:bg-[var(--err-l)] hover:text-[var(--err)]'
+          : 'hover:border-[var(--acc-m)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)]'
+      } ${className ?? ''}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/ui/index.ts CHANGED Viewed

@@ -42,6 +42,18 @@ export { FilterPill } from './FilterPill.js'
 export type { FilterPillProps } from './FilterPill.js'
 export { StatPill } from './StatPill.js'
 export type { StatPillProps } from './StatPill.js'
+export { RowActions, RowActionButton } from './RowActions.js'
+export type { RowActionButtonProps } from './RowActions.js'
+export {
+  SplitPaneLayout,
+  SplitPaneList,
+  InspectorPane,
+  InspectorPaneHeader,
+  InspectorPaneBody,
+  InspectorPaneSection,
+  InspectorPaneFooter,
+} from './InspectorPane.js'
+export type { InspectorPaneProps } from './InspectorPane.js'
 export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

package/src/layout/Header.tsx CHANGED Viewed

@@ -127,8 +127,8 @@ export function Header({
                 className="hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors"
                 aria-label="Account menu"
               >
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600">
-                  <span className="text-sm font-medium text-white">{initial}</span>
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--acc)]">
+                  <span className="text-xs font-semibold text-white">{initial}</span>
                 </div>
                 <ChevronDown
                   className="text-muted-foreground hidden h-4 w-4 sm:block"