@prenta/admin 2.6.1 → 2.8.0

package/src/views/WidgetsPlaceholder.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { EmptyState } from '../components/ui/EmptyState.js'
+import { LayoutGrid } from 'lucide-react'
+
+export function WidgetsPlaceholder() {
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        flush
+        title="Widgets"
+        subtitle="Widget areas will be editable here."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              // No Appearance landing screen exists yet, so the section is not a link.
+              { label: 'Appearance' },
+              { label: 'Widgets' },
+            ]}
+          />
+        }
+      />
+      <EmptyState
+        icon={<LayoutGrid size={24} aria-hidden />}
+        title="No widgets yet"
+        description="This screen is a placeholder. Header and footer are edited from Appearance."
+      />
+    </div>
+  )
+}

package/src/views/dashboard/kpi-grid.ts

@@ -0,0 +1,38 @@
+/**
+ * Dashboard KPI grid (SHELL.md §8, Dashboard.html `.kpis`).
+ *
+ * Five cards: one row of five from 1400px; below that a six-track grid where
+ * the first two cards span three tracks and the rest two (2+3); on phones two
+ * columns, the last card spanning both.
+ *
+ * Any other count (four, when the site has a single content collection) gets
+ * the same tiers without empty slots: one row from 1400px, two columns below,
+ * and an odd last card spanning both columns.
+ *
+ * 1400px is the kit's own step, not a layout tier, so it uses the stock
+ * `min-[1400px]:` variant. The classes are written out in full so Tailwind
+ * sees them.
+ */
+
+const WIDE_COLUMNS: Record<number, string> = {
+  1: 'min-[1400px]:grid-cols-1',
+  2: 'min-[1400px]:grid-cols-2',
+  3: 'min-[1400px]:grid-cols-3',
+  4: 'min-[1400px]:grid-cols-4',
+  5: 'min-[1400px]:grid-cols-5',
+}
+
+export function kpiGridClass(count: number): string {
+  const wide = WIDE_COLUMNS[count] ?? 'min-[1400px]:grid-cols-5'
+  const base = count === 5 ? 'grid-cols-6 mobile:grid-cols-2' : 'grid-cols-2'
+  return `grid gap-3 mobile:gap-2 ${base} ${wide}`
+}
+
+export function kpiCardSpan(index: number, count: number): string {
+  const last = index === count - 1
+  if (count === 5) {
+    const tablet = index < 2 ? 'col-span-3' : 'col-span-2'
+    return `${tablet} min-[1400px]:col-span-1 ${last ? 'mobile:col-span-2' : 'mobile:col-span-1'}`
+  }
+  return last && count % 2 === 1 ? 'col-span-2 min-[1400px]:col-span-1' : ''
+}

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

@@ -0,0 +1,231 @@
+'use client'
+
+import { useId, type ReactNode } from 'react'
+import type { AnnouncementTone } from '@prenta/core'
+
+import { Toggle } from '../../components/ui/Toggle.js'
+import {
+  ANNOUNCEMENT_LINK_MAX,
+  ANNOUNCEMENT_MAX,
+  ANNOUNCEMENT_TONES,
+  type AnnouncementForm,
+} from './chrome-form.js'
+import { CARD, FieldLabel, Help, INPUT, MONO, RadioPills } from './controls.js'
+
+/** The swatch beside each Style pill. The site styles the tones; this only hints. */
+const TONE_SWATCH: Record<AnnouncementTone, string> = {
+  brand: 'var(--acc)',
+  dark: 'var(--site-txt)',
+  alert: 'var(--site-alert)',
+}
+
+/** A labelled switch row (the kit's `Line`): label, a help line, then the switch. */
+function SwitchLine({
+  label,
+  sub,
+  on,
+  onChange,
+  disabled,
+}: {
+  label: string
+  sub: string
+  on: boolean
+  onChange: (on: boolean) => void
+  disabled: boolean
+}) {
+  const id = useId()
+  return (
+    <div className="text-sm2 text-txt flex items-center gap-2 leading-[normal] font-medium">
+      <span className="min-w-0 flex-1">
+        <span id={`${id}-label`}>{label}</span>
+        <small id={`${id}-sub`} className="text-hint text-faint mt-px block font-normal">
+          {sub}
+        </small>
+      </span>
+      <Toggle
+        aria-labelledby={`${id}-label`}
+        aria-describedby={`${id}-sub`}
+        checked={on}
+        disabled={disabled}
+        onCheckedChange={onChange}
+      />
+    </div>
+  )
+}
+
+function Field({
+  label,
+  htmlFor,
+  help,
+  children,
+}: {
+  label: string
+  htmlFor: string
+  help?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className="min-w-0">
+      <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
+      {children}
+      {help ? <Help>{help}</Help> : null}
+    </div>
+  )
+}
+
+export interface AnnouncementTabProps {
+  form: AnnouncementForm
+  onChange: (form: AnnouncementForm) => void
+  problem: string | null
+  readOnly: boolean
+}
+
+/**
+ * The announcement bar card. The header switch turns the bar on and off; while
+ * it's off the body is at 50% and can't be used. The site styles the tones and
+ * keeps a visitor's dismissal by the announcement's `id`, which the server
+ * changes whenever the message, link or tone changes.
+ */
+export function AnnouncementTab({ form, onChange, problem, readOnly }: AnnouncementTabProps) {
+  const id = useId()
+  const set = (patch: Partial<AnnouncementForm>) => onChange({ ...form, ...patch })
+  const off = !form.on
+  const bodyDisabled = readOnly || off
+
+  return (
+    <section aria-labelledby={`${id}-title`} className={CARD}>
+      <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}-title`}
+            className="text-card-title text-txt m-0 leading-[normal] font-[650]"
+          >
+            Announcement bar
+          </h2>
+          <p className="text-meta text-sub m-0 mt-px leading-[normal]">
+            Shows above the header on every page. No developer needed.
+          </p>
+        </div>
+        <Toggle
+          aria-label="Show announcement bar"
+          checked={form.on}
+          disabled={readOnly}
+          onCheckedChange={(on) => set({ on })}
+        />
+      </div>
+      <div
+        data-off={off || undefined}
+        // Off: 50% and not interactive (the kit's `pointer-events: none`);
+        // `inert` also keeps it out of the Tab order and the accessibility tree.
+        inert={off || undefined}
+        className={`flex flex-col gap-3.5 px-4 py-3.5 ${off ? 'pointer-events-none opacity-50' : ''}`}
+      >
+        <Field
+          label="Message"
+          htmlFor={`${id}-text`}
+          help={
+            <span aria-live="polite">
+              <span className={form.text.length > ANNOUNCEMENT_MAX ? 'text-err' : undefined}>
+                {form.text.length}/{ANNOUNCEMENT_MAX}
+              </span>{' '}
+              · keep it to one line on mobile.
+            </span>
+          }
+        >
+          <input
+            id={`${id}-text`}
+            className={INPUT}
+            maxLength={ANNOUNCEMENT_MAX}
+            value={form.text}
+            disabled={bodyDisabled}
+            onChange={(event) => set({ text: event.target.value })}
+          />
+        </Field>
+        <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+          <Field label="Link text" htmlFor={`${id}-link`} help="Optional">
+            <input
+              id={`${id}-link`}
+              className={INPUT}
+              maxLength={ANNOUNCEMENT_LINK_MAX}
+              value={form.linkLabel}
+              disabled={bodyDisabled}
+              onChange={(event) => set({ linkLabel: event.target.value })}
+            />
+          </Field>
+          <Field label="Links to" htmlFor={`${id}-url`}>
+            <input
+              id={`${id}-url`}
+              className={`${INPUT} ${MONO}`}
+              value={form.linkUrl}
+              spellCheck={false}
+              disabled={bodyDisabled}
+              onChange={(event) => set({ linkUrl: event.target.value })}
+            />
+          </Field>
+        </div>
+        <div>
+          <span className="text-meta text-txt mb-[5px] block font-semibold">Style</span>
+          <RadioPills
+            name={`${id}-tone`}
+            label="Style"
+            value={form.tone}
+            disabled={bodyDisabled}
+            options={ANNOUNCEMENT_TONES.map((tone) => ({
+              id: tone.id,
+              label: tone.label,
+              swatch: TONE_SWATCH[tone.id],
+            }))}
+            onChange={(tone) => set({ tone: tone as AnnouncementTone })}
+          />
+          <Help>Your site styles each tone with its own colors.</Help>
+        </div>
+        <SwitchLine
+          label="Visitors can dismiss it"
+          sub="Stays hidden for that visitor until the message changes."
+          on={form.dismissible}
+          disabled={bodyDisabled}
+          onChange={(dismissible) => set({ dismissible })}
+        />
+        <SwitchLine
+          label="Schedule"
+          sub="Turns itself on and off. Your site is refreshed automatically."
+          on={form.scheduled}
+          disabled={bodyDisabled}
+          onChange={(scheduled) => set({ scheduled })}
+        />
+        {form.scheduled ? (
+          <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+            <Field label="Starts" htmlFor={`${id}-start`}>
+              <input
+                id={`${id}-start`}
+                className={INPUT}
+                type="datetime-local"
+                value={form.startsAt}
+                disabled={bodyDisabled}
+                onChange={(event) => set({ startsAt: event.target.value })}
+              />
+            </Field>
+            <Field label="Ends" htmlFor={`${id}-end`}>
+              <input
+                id={`${id}-end`}
+                className={INPUT}
+                type="datetime-local"
+                value={form.endsAt}
+                disabled={bodyDisabled}
+                onChange={(event) => set({ endsAt: event.target.value })}
+              />
+            </Field>
+          </div>
+        ) : null}
+      </div>
+      {problem ? (
+        // Outside the body, so it shows at full strength while the bar is off.
+        <div className="-mt-1.5 px-4 pb-3.5">
+          <Help tone="error">
+            <span role="alert">{problem}</span>
+          </Help>
+        </div>
+      ) : null}
+    </section>
+  )
+}

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

@@ -0,0 +1,358 @@
+'use client'
+
+import { Plus, X } from 'lucide-react'
+import { useId, type ReactNode } from 'react'
+import type { FieldDef } from '@prenta/core'
+
+import { Toggle } from '../../components/ui/Toggle.js'
+import type { ChromeMenuOption } from '../../lib/chrome-service.js'
+import {
+  SOCIAL_PLATFORMS,
+  fieldHelp,
+  fieldLabel,
+  humanizeKey,
+  isKnownField,
+  isToggled,
+  menuListSlots,
+} from './chrome-form.js'
+import { Help, INPUT, KeyChip, MONO, RadioPills, TEXTAREA } from './controls.js'
+
+type Rec = Record<string, unknown>
+
+function rec(value: unknown): Rec {
+  return typeof value === 'object' && value !== null && !Array.isArray(value) ? (value as Rec) : {}
+}
+
+function text(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+export interface ChromeFieldProps {
+  /** The region, for unique radio names. */
+  region: string
+  fieldKey: string
+  def: FieldDef
+  /** The stored-format value (brand fields have none). */
+  value: unknown
+  onChange: (value: unknown) => void
+  menus: ChromeMenuOption[]
+  siteTitle: string
+  disabled: boolean
+  problem?: string
+  /** Opens Settings for a brand field's "Change". */
+  onOpenBrand: () => void
+  brandHref: string
+}
+
+/** A menu picker. A saved slug the menus list doesn't have stays selectable. */
+function MenuSelect({
+  value,
+  onChange,
+  menus,
+  label,
+  none,
+  disabled,
+  describedBy,
+}: {
+  value: string
+  onChange: (slug: string) => void
+  menus: ChromeMenuOption[]
+  label: string
+  none?: boolean
+  disabled: boolean
+  describedBy?: string
+}) {
+  const missing = value && !menus.some((menu) => menu.slug === value)
+  return (
+    <select
+      className={INPUT}
+      aria-label={label}
+      aria-describedby={describedBy}
+      value={value}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    >
+      {none || !value ? <option value="">{none ? 'None' : 'Pick a menu'}</option> : null}
+      {missing ? <option value={value}>{`${value} (not found)`}</option> : null}
+      {menus.map((menu) => (
+        <option key={menu.slug} value={menu.slug}>
+          {menu.name}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+/**
+ * One field of a region, built from its definition (`.hf-f`): the head row
+ * with the label, help, key chip and (for optional and boolean fields) a
+ * switch, then the control for its type.
+ */
+export function ChromeField({
+  region,
+  fieldKey,
+  def,
+  value,
+  onChange,
+  menus,
+  siteTitle,
+  disabled,
+  problem,
+  onOpenBrand,
+  brandHref,
+}: ChromeFieldProps) {
+  const id = useId()
+  const label = fieldLabel(fieldKey, def)
+  const help = fieldHelp(def)
+  const helpId = help ? `${id}-help` : undefined
+  const problemId = problem ? `${id}-problem` : undefined
+  const describedBy = [helpId, problemId].filter(Boolean).join(' ') || undefined
+  const toggled = isToggled(def)
+  const on = toggled ? rec(value).on === true : true
+  const known = isKnownField(def)
+
+  const head = (
+    <div className="text-sm2 text-txt flex items-center gap-2 leading-[normal] font-semibold">
+      <span className="min-w-0 flex-1">
+        {label}
+        {help ? (
+          <small id={helpId} className="text-hint text-faint mt-px block font-normal">
+            {help}
+          </small>
+        ) : null}
+      </span>
+      <KeyChip>{fieldKey}</KeyChip>
+      {toggled || def.type === 'boolean' ? (
+        <Toggle
+          aria-label={label}
+          checked={def.type === 'boolean' ? value === true : on}
+          disabled={disabled}
+          onCheckedChange={(next) =>
+            onChange(def.type === 'boolean' ? next : { ...rec(value), on: next })
+          }
+        />
+      ) : null}
+    </div>
+  )
+
+  let body: ReactNode = null
+  if (!known) {
+    body = (
+      <Help>
+        {`This field's type (${String((def as { type: unknown }).type)}) needs a newer admin. Its saved value is kept.`}
+      </Help>
+    )
+  } else if (def.type === 'brand') {
+    body = (
+      <div className="rounded-9 border-bdr text-sm2 text-sub flex items-center gap-2.5 border border-dashed px-[11px] py-[9px] leading-[normal]">
+        <span className="text-txt text-[14px] font-extrabold tracking-[-0.3px]">{siteTitle}</span>
+        <span>From brand settings</span>
+        <a
+          href={brandHref}
+          onClick={(event) => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+            event.preventDefault()
+            onOpenBrand()
+          }}
+          className="text-acc ml-auto font-semibold whitespace-nowrap no-underline"
+        >
+          Change
+        </a>
+      </div>
+    )
+  } else if (def.type === 'menu') {
+    if (def.list) {
+      const list = Array.isArray(value) ? (value as unknown[]) : []
+      const slots = menuListSlots(def, list.length)
+      body = (
+        <div className="flex flex-col gap-1.5">
+          {Array.from({ length: slots }, (_, index) => (
+            <MenuSelect
+              key={index}
+              none
+              label={`${label} ${index + 1}`}
+              value={text(list[index])}
+              menus={menus}
+              disabled={disabled}
+              describedBy={describedBy}
+              onChange={(slug) => {
+                const next = Array.from({ length: Math.max(list.length, index + 1) }, (_, i) =>
+                  text(list[i]),
+                )
+                next[index] = slug
+                onChange(next)
+              }}
+            />
+          ))}
+        </div>
+      )
+    } else if (toggled) {
+      body = on ? (
+        <MenuSelect
+          label={label}
+          value={text(rec(value).value)}
+          menus={menus}
+          disabled={disabled}
+          describedBy={describedBy}
+          onChange={(slug) => onChange({ ...rec(value), value: slug })}
+        />
+      ) : null
+    } else {
+      body = (
+        <MenuSelect
+          label={label}
+          value={text(value)}
+          menus={menus}
+          disabled={disabled}
+          describedBy={describedBy}
+          onChange={onChange}
+        />
+      )
+    }
+  } else if (def.type === 'link') {
+    const link = rec(value)
+    body = on ? (
+      <div className="grid grid-cols-2 gap-2 [@media(width<=560px)]:grid-cols-1">
+        <input
+          className={INPUT}
+          aria-label={def.optional ? 'Button text' : `${label} text`}
+          aria-describedby={describedBy}
+          value={text(link.label)}
+          disabled={disabled}
+          onChange={(event) => onChange({ ...link, label: event.target.value })}
+        />
+        <input
+          className={`${INPUT} ${MONO}`}
+          aria-label={def.optional ? 'Links to' : `${label} URL`}
+          aria-describedby={describedBy}
+          value={text(link.url)}
+          disabled={disabled}
+          spellCheck={false}
+          onChange={(event) => onChange({ ...link, url: event.target.value })}
+        />
+      </div>
+    ) : null
+  } else if (def.type === 'text') {
+    const current = toggled ? text(rec(value).value) : text(value)
+    const input = (
+      <input
+        className={INPUT}
+        type={def.format === 'tel' ? 'tel' : def.format === 'email' ? 'email' : 'text'}
+        aria-label={label}
+        aria-describedby={describedBy}
+        aria-invalid={problem ? true : undefined}
+        value={current}
+        disabled={disabled}
+        onChange={(event) =>
+          onChange(toggled ? { ...rec(value), value: event.target.value } : event.target.value)
+        }
+      />
+    )
+    body = on ? input : null
+  } else if (def.type === 'textarea') {
+    body = (
+      <textarea
+        className={TEXTAREA}
+        aria-label={label}
+        aria-describedby={describedBy}
+        aria-invalid={problem ? true : undefined}
+        value={text(value)}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    )
+  } else if (def.type === 'select') {
+    body = (
+      <RadioPills
+        name={`hf-${region}-${fieldKey}`}
+        label={label}
+        options={def.options.map((option) => ({ id: option, label: humanizeKey(option) }))}
+        value={text(value)}
+        disabled={disabled}
+        onChange={onChange}
+      />
+    )
+  } else if (def.type === 'social') {
+    const rows = (Array.isArray(value) ? value : []).map(rec)
+    const update = (index: number, patch: Rec) =>
+      onChange(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)))
+    body = (
+      <div className="flex flex-col gap-1.5">
+        {rows.map((row, index) => {
+          const platform = text(row.platform)
+          const platforms = SOCIAL_PLATFORMS.includes(platform)
+            ? SOCIAL_PLATFORMS
+            : [platform, ...SOCIAL_PLATFORMS]
+          return (
+            <div
+              key={index}
+              className="grid grid-cols-[120px_minmax(0,1fr)_28px] items-center gap-1.5 [@media(width<=560px)]:grid-cols-[96px_minmax(0,1fr)_28px]"
+            >
+              <select
+                className={INPUT}
+                aria-label="Platform"
+                value={platform}
+                disabled={disabled}
+                onChange={(event) => update(index, { platform: event.target.value })}
+              >
+                {platforms.map((option) => (
+                  <option key={option} value={option}>
+                    {option || 'Pick one'}
+                  </option>
+                ))}
+              </select>
+              <input
+                className={`${INPUT} ${MONO}`}
+                aria-label={`${platform || 'Link'} URL`}
+                value={text(row.url)}
+                disabled={disabled}
+                spellCheck={false}
+                onChange={(event) => update(index, { url: event.target.value })}
+              />
+              <button
+                type="button"
+                aria-label={`Remove ${platform || 'link'}`}
+                disabled={disabled}
+                onClick={() => onChange(rows.filter((_, i) => i !== index))}
+                className="rounded-6 text-faint hover:bg-err-l hover:text-err flex h-7 w-7 cursor-pointer items-center justify-center border-0 bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <X size={14} strokeWidth={1.8} aria-hidden />
+              </button>
+            </div>
+          )
+        })}
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() =>
+            onChange([
+              ...rows,
+              {
+                platform:
+                  SOCIAL_PLATFORMS.find((option) => !rows.some((row) => row.platform === option)) ??
+                  SOCIAL_PLATFORMS[0],
+                url: 'https://',
+              },
+            ])
+          }
+          className="rounded-8 border-bdr bg-card text-meta text-txt hover:border-acc-m hover:bg-acc-l hover:text-acc inline-flex h-7 cursor-pointer items-center gap-[5px] self-start border px-[9px] leading-[normal] font-[550] whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-45"
+        >
+          <Plus size={12} strokeWidth={1.8} aria-hidden />
+          Add link
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5" data-field={fieldKey}>
+      {head}
+      {body}
+      {problem ? (
+        <Help id={problemId} tone="error">
+          {problem}
+        </Help>
+      ) : null}
+    </div>
+  )
+}