@prenta/admin 2.6.1 → 2.8.0

package/src/views/header-footer/code-samples.ts

@@ -0,0 +1,146 @@
+/**
+ * The Developer tab's "How it's wired" samples: the kit's `CODE` strings
+ * (appearance-hf.jsx), with the names this repo ships. `@prenta/sdk` doesn't
+ * exist; `defineRegion` and `field` are on `@prenta/core/config`, the Astro
+ * helpers on `@prenta/core/astro/site`, `<Announcement>` on
+ * `@prenta/client/react`, and the public endpoint is `/public/chrome` inside
+ * the `{ data }` envelope (CONFLICTS.md §3).
+ */
+
+export type CodeSampleId = 'config' | 'render' | 'api'
+
+export interface CodeSample {
+  id: CodeSampleId
+  /** The segmented control's label. */
+  label: string
+  /** The caption over the code. */
+  file: string
+  src: string
+}
+
+export const CODE_SAMPLES: readonly CodeSample[] = [
+  {
+    id: 'config',
+    label: 'Schema',
+    file: 'prenta.config.ts',
+    src: `import { defineRegion, field } from '@prenta/core/config';
+
+// Markup stays in your components. This only declares
+// what editors can change. Saved values are typed.
+export const header = defineRegion('header', {
+  component: './src/components/site/Header.astro',
+  variants: {
+    default:  'Logo left, menu right',
+    centered: 'Centered logo',
+    minimal:  'Logo + CTA',          // landing pages
+  },
+  fields: {
+    logo:    field.brand('logo'),             // read-only, from Settings
+    menu:    field.menu({ default: 'main' }),
+    cta:     field.link({ optional: true }),
+    phone:   field.text({ optional: true, format: 'tel' }),
+    topMenu: field.menu({ optional: true, label: 'Top bar' }),
+    search:  field.boolean({ default: false }),
+    sticky:  field.boolean({ default: true }),
+  },
+});
+
+export const footer = defineRegion('footer', {
+  component: './src/components/site/Footer.astro',
+  variants: { columns: 'Columns', compact: 'Compact', minimal: 'Single line' },
+  fields: {
+    tone:      field.select(['dark', 'light'], { default: 'dark' }),
+    about:     field.textarea({ max: 200 }),
+    cols:      field.menu({ list: true, max: 3 }),
+    social:    field.social(),
+    legalMenu: field.menu({ optional: true }),
+    copy:      field.text({ tokens: ['{year}'] }),
+  },
+});`,
+  },
+  {
+    id: 'render',
+    label: 'Layout',
+    file: 'src/layouts/Base.astro',
+    src: `---
+import { createAstroSiteHelpers } from '@prenta/core/astro/site';
+import { Announcement } from '@prenta/client/react'; // headless, unstyled
+import Header from '../components/site/Header.astro';
+import Footer from '../components/site/Footer.astro';
+
+// Resolves site defaults + page overrides + schedule in one call.
+const { getChrome } = createAstroSiteHelpers();
+const { header, footer, announcement } = (await getChrome(Astro.url.pathname)) ?? {};
+---
+<Announcement data={announcement} className="ann" client:load />  <!-- or render your own -->
+{header && <Header variant={header.variant} {...header.fields} />}
+<slot />
+{footer && <Footer variant={footer.variant} {...footer.fields} />}`,
+  },
+  {
+    id: 'api',
+    label: 'API',
+    file: 'GET /api/cms/public/chrome?path=/seo-audit',
+    src: `{
+  "data": {
+    "header": {
+      "variant": "minimal",            // page override wins
+      "fields": {
+        "logo": { ... },               // from Settings > Brand
+        "menu": { "id": "main", "name": "Main", "items": [ ... ] },
+        "cta": { "label": "Get a free audit", "url": "/seo-audit" },
+        "phone": "(757) 555-0100",
+        "topMenu": null,
+        "search": false,
+        "sticky": true
+      }
+    },
+    "footer": { "variant": "columns", "fields": { ... } },
+    "announcement": {
+      "id": "ann_8f2c41d0",           // changes when the message changes
+      "text": "Free SEO audits are back for Q4. Limited spots.",
+      "link": { "label": "Book yours", "url": "/seo-audit" },
+      "tone": "brand",                 // style it with your tokens
+      "dismissible": true,
+      "endsAt": null
+    },
+    "etag": "W/\\"chrome-6b1f0c2e9a4d\\""
+  }
+}`,
+  },
+]
+
+export const LOCAL_DEV_SAMPLE = `npx prenta pull chrome   // writes .prenta/chrome.json
+npx prenta types         // generates ChromeFields types`
+
+export type CodeTokenKind = 'comment' | 'string' | 'keyword' | 'plain'
+
+export interface CodeToken {
+  kind: CodeTokenKind
+  text: string
+}
+
+const LITERALS = /(\/\/[^\n]*|<!--[^\n]*-->|'[^'\n]*'|"(?:[^"\\\n]|\\.)*")/g
+const KEYWORDS = /\b(import|from|export|const|await)\b/g
+
+/**
+ * The kit's highlighter (`hl`): comments, then strings, then a few keywords.
+ * Joining the tokens' text gives back the source exactly.
+ */
+export function highlight(src: string): CodeToken[] {
+  const tokens: CodeToken[] = []
+  src.split(LITERALS).forEach((part, index) => {
+    if (!part) return
+    if (index % 2 === 1) {
+      tokens.push({
+        kind: part.startsWith('//') || part.startsWith('<!--') ? 'comment' : 'string',
+        text: part,
+      })
+      return
+    }
+    part.split(KEYWORDS).forEach((piece, j) => {
+      if (piece) tokens.push({ kind: j % 2 === 1 ? 'keyword' : 'plain', text: piece })
+    })
+  })
+  return tokens
+}

package/src/views/header-footer/controls.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { Lock } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+/** `.ap-in`: 34px, radius 8, 13px; `.ap-in.mono` is 12px DM Mono. */
+export const INPUT =
+  'rounded-8 border-bdr bg-card text-body text-txt placeholder:text-faint focus-visible:border-acc-m h-[34px] w-full min-w-0 border px-2.5 leading-[normal] disabled:cursor-not-allowed disabled:opacity-60'
+export const MONO = 'font-mono text-[12px]'
+/** `.ap-in` as a multi-line box (the kit's textarea). */
+export const TEXTAREA =
+  'rounded-8 border-bdr bg-card text-body text-txt focus-visible:border-acc-m min-h-[60px] w-full min-w-0 resize-y border px-2.5 py-2 leading-[1.45] disabled:cursor-not-allowed disabled:opacity-60'
+
+/** `.ap-lb`: 12px / 600, 5px above the control. */
+export function FieldLabel({ htmlFor, children }: { htmlFor?: string; children: ReactNode }) {
+  return (
+    <label htmlFor={htmlFor} className="text-meta text-txt mb-[5px] block font-semibold">
+      {children}
+    </label>
+  )
+}
+
+/** `.ap-help`: 11.5px --muted, 5px under the control. */
+export function Help({
+  id,
+  tone = 'muted',
+  children,
+}: {
+  id?: string
+  tone?: 'muted' | 'error'
+  children: ReactNode
+}) {
+  return (
+    <div
+      id={id}
+      className={`text-hint mt-[5px] leading-[1.45] ${tone === 'error' ? 'text-err' : 'text-faint'}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** `.hf-key`: a field key or id as a mono chip. */
+export function KeyChip({
+  children,
+  bare = false,
+  size = 11,
+}: {
+  children: ReactNode
+  bare?: boolean
+  /** 11px; a variant card's id is 10.5px. */
+  size?: 11 | 10.5
+}) {
+  return (
+    <code
+      // 500: the admin ships DM Mono at 400 and 500 only, so 600 would be synthesized.
+      className={`text-faint overflow-hidden font-mono font-medium text-ellipsis whitespace-nowrap ${
+        size === 11 ? 'text-[11px]' : 'text-[10.5px]'
+      } ${bare ? '' : 'rounded-5 border-bdr bg-bg border px-1.5'}`}
+    >
+      {children}
+    </code>
+  )
+}
+
+/** `.hf-lock`: "Defined in code". */
+export function LockPill({ children }: { children: ReactNode }) {
+  return (
+    <span className="rounded-pill border-bdr bg-bg text-faint inline-flex items-center gap-1 border px-[7px] text-[10.5px] leading-[normal] font-[650] whitespace-nowrap">
+      <Lock size={11} strokeWidth={1.8} aria-hidden />
+      {children}
+    </span>
+  )
+}
+
+export interface PillOption {
+  id: string
+  label: string
+  /** A 12px swatch before the label (announcement tones). */
+  swatch?: string
+}
+
+/**
+ * `.mn-chks` / `.mn-chk`: radio pills. 12.5px, radius 99, padding 3px 10px
+ * 3px 8px; the checked pill has an --acc border on --acc-l.
+ */
+export function RadioPills({
+  name,
+  label,
+  options,
+  value,
+  onChange,
+  disabled,
+}: {
+  name: string
+  /** Accessible name for the group. */
+  label: string
+  options: readonly PillOption[]
+  value: string
+  onChange: (id: string) => void
+  disabled?: boolean
+}) {
+  return (
+    <div role="radiogroup" aria-label={label} className="flex flex-wrap gap-1.5">
+      {options.map((option) => {
+        const checked = option.id === value
+        return (
+          <label
+            key={option.id}
+            className={`rounded-pill text-sm2 text-txt inline-flex items-center gap-1.5 border py-[3px] pr-2.5 pl-2 leading-[normal] whitespace-nowrap ${
+              checked ? 'border-acc bg-acc-l' : 'border-bdr'
+            } ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.id}
+              checked={checked}
+              disabled={disabled}
+              onChange={() => onChange(option.id)}
+              className="accent-acc m-0"
+            />
+            {option.swatch ? (
+              <i
+                aria-hidden
+                className="inline-block h-3 w-3 rounded-[3px]"
+                style={{ background: option.swatch }}
+              />
+            ) : null}
+            {option.label}
+          </label>
+        )
+      })}
+    </div>
+  )
+}
+
+/** A card heading row (`.ap-ch`) with the title, a subline and an optional right slot. */
+export function CardHead({
+  title,
+  description,
+  id,
+  children,
+}: {
+  title: string
+  description?: ReactNode
+  id?: string
+  children?: ReactNode
+}) {
+  return (
+    <div className="border-bdr flex items-center gap-2.5 border-b px-4 py-[13px]">
+      <div className="min-w-0 flex-1">
+        <h2 id={id} className="text-card-title text-txt m-0 leading-[normal] font-[650]">
+          {title}
+        </h2>
+        {description ? (
+          <p className="text-meta text-sub m-0 mt-px leading-[normal]">{description}</p>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+/** `.ap-card`: --card, 1px --bdr, radius 12, --shd. */
+export const CARD = 'rounded-12 border-bdr bg-card shadow-shd text-txt min-w-0 border'

package/src/views/lazy-views.tsx

@@ -18,6 +18,18 @@ export const MediaBrowser = lazy(() =>
 )
 export const Settings = lazy(() => import('./Settings.js').then((m) => ({ default: m.Settings })))
 export const Jobs = lazy(() => import('./Jobs.js').then((m) => ({ default: m.Jobs })))
+export const AppearanceChrome = lazy(() =>
+  import('./AppearanceChrome.js').then((m) => ({ default: m.AppearanceChrome })),
+)
+export const WidgetsPlaceholder = lazy(() =>
+  import('./WidgetsPlaceholder.js').then((m) => ({ default: m.WidgetsPlaceholder })),
+)
+export const FormsSettings = lazy(() =>
+  import('./FormsSettings.js').then((m) => ({ default: m.FormsSettings })),
+)
+export const SpamFolder = lazy(() =>
+  import('./SpamFolder.js').then((m) => ({ default: m.SpamFolder })),
+)
 export const Profile = lazy(() => import('./Profile.js').then((m) => ({ default: m.Profile })))
 export const Forms = lazy(() => import('./Forms.js').then((m) => ({ default: m.Forms })))
 export const FormEditor = lazy(() =>

package/src/views/page-editor/PageTab.tsx

@@ -157,7 +157,7 @@ export function PageTab({
             breaks nothing, and warning about it would train editors to dismiss
             the warning that matters. */}
         {move && (
-          <div className="bg-warning/10 border-warning/30 space-y-2 rounded-lg border p-2.5">
+          <div className="bg-warn-l border-warning/30 space-y-2 rounded-lg border p-2.5">
             <div className="flex gap-2">
               <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
               <p className="text-[11.5px] leading-normal">
@@ -336,7 +336,7 @@ export function PageTab({
         </div>
 
         {!directives.index && (
-          <div className="bg-warning/10 border-warning/30 flex gap-2 rounded-lg border p-2.5">
+          <div className="bg-warn-l border-warning/30 flex gap-2 rounded-lg border p-2.5">
             <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
             <p className="text-[11.5px] leading-normal">
               <b className="font-semibold">This page is hidden from search.</b> Publishing will not

package/src/views/page-editor/ReviewBar.tsx

@@ -36,7 +36,7 @@ export function ReviewBar({
       // whole canvas means, and a screen-reader user gets no equivalent of the
       // amber colour that announces it to everyone else.
       role="status"
-      className="border-warning/35 bg-warning/10 text-foreground mx-auto mb-3 flex w-fit max-w-full flex-wrap items-center gap-2.5 rounded-full border py-1.5 pr-1.5 pl-3.5 text-[11.5px]"
+      className="border-warning/35 bg-warn-l text-foreground mx-auto mb-3 flex w-fit max-w-full flex-wrap items-center gap-2.5 rounded-full border py-1.5 pr-1.5 pl-3.5 text-[11.5px]"
     >
       <History className="text-warning h-3.5 w-3.5 shrink-0" aria-hidden />
       <span className="min-w-0">

package/src/views/page-editor/VersionHistoryPanel.tsx

@@ -159,7 +159,7 @@ export function VersionHistoryPanel({
 
 const TONE_CLASS: Record<string, string> = {
   live: 'bg-success/15 text-success',
-  draft: 'bg-warning/15 text-warning',
+  draft: 'bg-warn-l text-warning',
   neutral: 'bg-muted text-muted-foreground',
   danger: 'bg-destructive/15 text-destructive',
 }

package/src/views/seo/AuditTab.tsx

@@ -125,7 +125,7 @@ function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
       {coverage?.partial ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-foreground rounded-lg border p-4"
+          className="border-warning/30 bg-warn-l text-foreground rounded-lg border p-4"
         >
           <div className="flex items-start gap-3">
             <AlertTriangle size={20} className="text-warning shrink-0" aria-hidden="true" />

package/src/views/seo/OverviewTab.tsx

@@ -57,9 +57,10 @@ export function OverviewTab({
 
   return (
     <div className="space-y-6">
-      {/* Site score + metrics */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-        <SectionCard title="Site SEO Score" className="lg:col-span-1">
+      {/* Site score + metrics. One column up to 1024px, where the score stops
+          fighting the metrics (cms-layouts.css `.ov-top`, tablet). */}
+      <div className="not-narrow:grid-cols-3 grid grid-cols-1 gap-4">
+        <SectionCard title="Site SEO Score" className="not-narrow:col-span-1">
           <div className="flex items-center gap-4">
             <div className="flex flex-col">
               <span className="text-foreground text-4xl font-medium tabular-nums">
@@ -98,7 +99,7 @@ export function OverviewTab({
           )}
         </SectionCard>
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-2">
+        <div className="not-narrow:col-span-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
           {metrics.length === 0 ? (
             <div className="sm:col-span-2">
               <SeoEmptyState
@@ -165,7 +166,7 @@ export function OverviewTab({
                   tone === 'poor'
                     ? 'bg-destructive/10 text-destructive'
                     : tone === 'fair'
-                      ? 'bg-warning/10 text-warning'
+                      ? 'bg-warn-l text-warning'
                       : 'bg-success/10 text-success'
                 return (
                   <li key={w.id} className="flex items-start justify-between gap-3 py-3">

package/src/views/seo/ProposalsTab.tsx

@@ -233,7 +233,7 @@ function AutopilotChip({
       ? `Autopilot paused — ${chipPauseLabel(autopilot.pausedReason)}`
       : `Autopilot on · ${autopilot.appliedLast7d} applied this week`
   const tone = paused
-    ? 'border-warning/40 bg-warning/10 text-foreground hover:bg-warning/20'
+    ? 'border-warning/40 bg-warn-l text-foreground hover:bg-warning/20'
     : 'border-border bg-muted/40 text-foreground hover:bg-accent'
   return (
     <button

package/src/views/settings/AISettingsTab.tsx

@@ -8,7 +8,8 @@ import { BrandVoiceCard, type BrandVoiceAiReadiness } from './BrandVoiceCard.js'
 import { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
-import { SettingsCard, SettingsSaveBar } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, useSavedToast } from './components.js'
 import {
   useAiSettings,
   type AiProviderKey,
@@ -37,6 +38,7 @@ export interface AISettingsTabProps {
 export function AISettingsTab({ role, config }: AISettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const ai = useAiSettings(canEdit)
+  useSavedToast(ai.saveState)
 
   const brandVoiceAiReadiness = useMemo((): BrandVoiceAiReadiness => {
     const contentWriting = ai.form.features.find((f) => f.key === 'ai.features.contentWriting')
@@ -165,13 +167,15 @@ export function AISettingsTab({ role, config }: AISettingsTabProps) {
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={ai.dirty}
-        canEdit={canEdit}
-        hasErrors={Boolean(ai.budgetError)}
-        saveState={ai.saveState}
+        saving={ai.saveState === 'saving'}
+        saveDisabled={!canEdit || Boolean(ai.budgetError)}
         onSave={ai.save}
-        onReset={ai.reset}
+        onDiscard={ai.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/AccessProtectionCard.tsx

@@ -78,7 +78,7 @@ export function AccessProtectionCard({
           </p>
         )}
         {entries.length > 0 && (
-          <div className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-2.5 text-sm">
+          <div className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-md border p-2.5 text-sm">
             <AlertTriangle size={15} className="mt-0.5 shrink-0" aria-hidden="true" />
             <span>
               Make sure your own IP