@prenta/admin 0.92.0

package/src/components/ui/InspectorPane.tsx

@@ -0,0 +1,134 @@
+'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) {
+  // Cap at the split row's width (100% of the flex container) so the pane
+  // never overflows phones/tablets. Below the cap the pane fills the row
+  // master–detail style: the list yields, and the close button returns to
+  // it. On desktop the min() resolves to the design's fixed px width, so
+  // nothing changes there.
+  return (
+    <div
+      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
+      style={{ width: open ? `min(${width}px, 100%)` : 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: `min(${width - 28}px, calc(100% - 28px))` }}
+      >
+        {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-5 py-4">
+      <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-5 py-4 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-5 py-4">{children}</div>
+}

package/src/components/ui/Modal.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { type ReactNode, type RefObject } from 'react'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+
+const MODAL_SIZE_CLASS = {
+  md: 'max-w-lg',
+  lg: 'max-w-3xl',
+  /** Wide form dialogs (post/page field editors) — body scrolls inside the shell. */
+  xl: 'flex max-h-[min(92vh,880px)] max-w-5xl flex-col',
+} as const
+
+export type ModalSize = keyof typeof MODAL_SIZE_CLASS
+
+export interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  actions?: ReactNode
+  /** Dialog width preset. Defaults to `md` (512px). */
+  size?: ModalSize
+  /**
+   * Accessible description for the dialog, announced after the title. Optional —
+   * omit when the body content is self-explanatory.
+   */
+  description?: string
+  /**
+   * Element to focus when the dialog opens, instead of Radix's default
+   * (the first tabbable element, which is the header close button). Use for
+   * form dialogs where the user should land in the first input.
+   */
+  initialFocusRef?: RefObject<HTMLElement | null>
+  /**
+   * When set, overlay click, Escape, and the header X invoke this instead of
+   * closing immediately — use to confirm before discarding unsaved edits.
+   * The dialog stays open until the parent calls `onClose()`.
+   */
+  onDismiss?: () => void
+}
+
+/**
+ * The canonical admin modal. Built on Radix `Dialog`, which provides the
+ * accessibility contract for free: focus is trapped while open and restored to
+ * the trigger on close, Escape and overlay-click dismiss, the surface is
+ * exposed as `role="dialog"` + `aria-modal`, and the title/description are wired
+ * via `aria-labelledby`/`aria-describedby`.
+ *
+ * The portal mounts inside `.prenta-admin` (see `adminPortalContainer`) so the
+ * dialog inherits theme tokens and dark mode instead of rendering unstyled on
+ * `document.body`.
+ */
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  actions,
+  size = 'md',
+  description,
+  initialFocusRef,
+  onDismiss,
+}: ModalProps) {
+  const scrollBody = size === 'xl'
+
+  function handleDismissAttempt() {
+    if (onDismiss) onDismiss()
+    else onClose()
+  }
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) handleDismissAttempt()
+      }}
+    >
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
+        <Dialog.Content
+          className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
+          onInteractOutside={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
+          onEscapeKeyDown={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
+          onOpenAutoFocus={
+            initialFocusRef
+              ? (event) => {
+                  if (initialFocusRef.current) {
+                    event.preventDefault()
+                    initialFocusRef.current.focus()
+                  }
+                }
+              : undefined
+          }
+        >
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+            <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close dialog"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-4 w-4" aria-hidden />
+              </button>
+            </Dialog.Close>
+          </div>
+          {description && (
+            <Dialog.Description className="text-muted-foreground px-6 pt-4 text-sm">
+              {description}
+            </Dialog.Description>
+          )}
+          <div className={scrollBody ? 'min-h-0 flex-1 overflow-y-auto px-6 py-4' : 'px-6 py-4'}>
+            {children}
+          </div>
+          {actions && (
+            <div className="border-border flex justify-end gap-2 border-t px-6 py-4">{actions}</div>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/ui/Pagination.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+export interface PaginationProps {
+  page: number
+  perPage: number
+  total: number
+  onPageChange: (page: number) => void
+  onPerPageChange: (perPage: number) => void
+}
+
+export function Pagination({
+  page,
+  perPage,
+  total,
+  onPageChange,
+  onPerPageChange,
+}: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / perPage))
+  const start = (page - 1) * perPage + 1
+  const end = Math.min(page * perPage, total)
+
+  function pageNumbers(): (number | 'ellipsis')[] {
+    const pages: (number | 'ellipsis')[] = []
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || Math.abs(i - page) <= 1) {
+        pages.push(i)
+      } else if (pages[pages.length - 1] !== 'ellipsis') {
+        pages.push('ellipsis')
+      }
+    }
+    return pages
+  }
+
+  return (
+    <div className="flex items-center justify-between text-sm">
+      <span className="text-[var(--muted-foreground)]">
+        {start}–{end} of {total} results
+      </span>
+
+      <div className="flex items-center gap-2">
+        <select
+          value={perPage}
+          onChange={(e) => {
+            onPerPageChange(Number(e.target.value))
+            onPageChange(1)
+          }}
+          className="rounded-md border border-[var(--border)] bg-[var(--input-background)] px-2 py-1 text-sm"
+        >
+          {[10, 25, 50, 100].map((n) => (
+            <option key={n} value={n}>
+              {n} / page
+            </option>
+          ))}
+        </select>
+
+        <nav className="flex items-center gap-1">
+          <button
+            onClick={() => onPageChange(page - 1)}
+            disabled={page <= 1}
+            className="rounded-md px-2 py-1 hover:bg-[var(--accent)] disabled:opacity-50"
+          >
+            Prev
+          </button>
+          {pageNumbers().map((p, i) =>
+            p === 'ellipsis' ? (
+              <span key={`e${i}`} className="px-1 text-[var(--muted-foreground)]">
+                …
+              </span>
+            ) : (
+              <button
+                key={p}
+                onClick={() => onPageChange(p)}
+                className={`min-w-[2rem] rounded-md px-2 py-1 ${
+                  p === page
+                    ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                    : 'hover:bg-[var(--accent)]'
+                }`}
+              >
+                {p}
+              </button>
+            ),
+          )}
+          <button
+            onClick={() => onPageChange(page + 1)}
+            disabled={page >= totalPages}
+            className="rounded-md px-2 py-1 hover:bg-[var(--accent)] disabled:opacity-50"
+          >
+            Next
+          </button>
+        </nav>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/PanelSection.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+/**
+ * Bordered panel with a header divider — Dashboard, modals, and list-heavy views.
+ * Matches Settings/Section card rhythm: `px-6` gutters, `py-4` header, body flush
+ * below the divider with its own padding.
+ */
+export function PanelSection({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title?: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section
+      className={`bg-card border-border overflow-hidden rounded-xl border shadow-sm ${className}`}
+    >
+      {(title || action) && (
+        <header className="border-border flex items-center justify-between gap-3 border-b px-6 py-4">
+          <div className="min-w-0">
+            {title &&
+              (typeof title === 'string' ? (
+                <h2 className="text-foreground text-sm font-medium">{title}</h2>
+              ) : (
+                title
+              ))}
+            {description &&
+              (typeof description === 'string' ? (
+                <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
+              ) : (
+                description
+              ))}
+          </div>
+          {action}
+        </header>
+      )}
+      {children}
+    </section>
+  )
+}
+
+/** Standard inset for list rows / table bodies inside a {@link PanelSection}. */
+export const PANEL_LIST_ROW_CLASS =
+  'hover:bg-accent/50 focus-visible:bg-accent/50 w-full px-6 py-4 text-left transition-colors'

package/src/components/ui/ReauthDialog.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal } from './Modal.js'
+import { Button } from './Button.js'
+
+export interface ReauthDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Called with the entered password. Resolve on success; throw or return without closing on failure. */
+  onSubmit: (password: string) => Promise<void>
+  title?: string
+  description?: string
+  confirmLabel?: string
+  /** When true, the confirm button uses the destructive (danger) variant. */
+  destructive?: boolean
+}
+
+/**
+ * Password re-auth modal for sensitive admin actions. Prefer this over
+ * `window.prompt()` so the flow stays in-theme and accessible.
+ */
+export function ReauthDialog({
+  open,
+  onClose,
+  onSubmit,
+  title = "Confirm it's you",
+  description = 'This is a sensitive action. Re-enter your password to continue.',
+  confirmLabel = 'Confirm',
+  destructive = false,
+}: ReauthDialogProps) {
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const resetAndClose = () => {
+    setPassword('')
+    onClose()
+  }
+
+  const submit = async () => {
+    if (!password || busy) return
+    setBusy(true)
+    try {
+      await onSubmit(password)
+      setPassword('')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={resetAndClose}
+      title={title}
+      actions={
+        <>
+          <Button variant="ghost" onClick={resetAndClose} disabled={busy}>
+            Cancel
+          </Button>
+          <Button
+            variant={destructive ? 'danger' : 'primary'}
+            loading={busy}
+            disabled={!password || busy}
+            onClick={submit}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-muted-foreground mb-3 text-sm">{description}</p>
+      <label
+        htmlFor="reauth-password"
+        className="text-card-foreground mb-1 block text-sm font-medium"
+      >
+        Your password
+      </label>
+      <input
+        id="reauth-password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') void submit()
+        }}
+        autoComplete="current-password"
+        autoFocus
+        className="border-border bg-input-background text-foreground focus:ring-brand w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+      />
+    </Modal>
+  )
+}