@prenta/admin 2.6.1 → 2.8.0

package/src/__tests__/lib/jobs-service.test.ts

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+/*
+ * The drawer's calls in the Jobs service: the review page query, the
+ * decision envelope's `documentStatus` and `notice`, and reading why a
+ * decision was refused. And the batch wizard's: estimate, preview, create.
+ */
+
+const cmsApi = vi.hoisted(() => vi.fn())
+vi.mock('../../lib/api.js', () => ({ cmsApi, getApiBase: () => '/api/cms' }))
+
+const {
+  createBatchAiJob,
+  decideReviewItem,
+  estimateBatchAi,
+  listReviewItems,
+  previewBatchAi,
+  reviewConflict,
+} = await import('../../lib/jobs-service.js')
+
+beforeEach(() => cmsApi.mockReset())
+
+describe('batch AI', () => {
+  const request = {
+    operation: 'custom' as const,
+    source: 'posts',
+    statusFilter: 'all' as const,
+    review: 'review' as const,
+    onApprove: 'draft' as const,
+    instruction: 'Translate it & keep names',
+    field: 'excerpt' as const,
+    filter: { documentIds: ['a', 'b'] },
+  }
+
+  it('estimates with the request as the query, ids comma-separated', async () => {
+    const value = { count: 2, sample: [], tokens: 1800, minutes: 2, pctOfMonthlyLimit: null }
+    cmsApi.mockResolvedValue({ data: value, status: 200 })
+    expect(await estimateBatchAi(request)).toEqual({ ok: true, value })
+    const [endpoint] = cmsApi.mock.calls[0]!
+    expect(endpoint).toBe(
+      '/jobs/batch-ai/estimate?operation=custom&source=posts&statusFilter=all&field=excerpt&instruction=Translate+it+%26+keep+names&documentIds=a%2Cb',
+    )
+    cmsApi.mockClear()
+    await estimateBatchAi({
+      ...request,
+      operation: 'meta',
+      field: undefined,
+      instruction: null,
+      filter: undefined,
+    })
+    expect(cmsApi.mock.calls[0]![0]).toBe(
+      '/jobs/batch-ai/estimate?operation=meta&source=posts&statusFilter=all',
+    )
+  })
+
+  it('previews with a POST, reading the items', async () => {
+    const items = [{ documentId: 'a', title: 'A', after: 'New text.' }]
+    cmsApi.mockResolvedValue({ data: { items }, status: 200 })
+    expect(await previewBatchAi(request)).toEqual({ ok: true, value: items })
+    expect(cmsApi.mock.calls[0]![0]).toBe('/jobs/batch-ai/preview')
+    expect(cmsApi.mock.calls[0]![1]).toMatchObject({
+      method: 'POST',
+      body: JSON.stringify(request),
+    })
+  })
+
+  it('passes a spent cap on', async () => {
+    cmsApi.mockResolvedValue({ error: 'AI limit reached', status: 429 })
+    expect(await previewBatchAi(request)).toEqual({
+      ok: false,
+      error: 'AI limit reached',
+      status: 429,
+    })
+  })
+
+  it('creates with a POST and returns the job', async () => {
+    cmsApi.mockResolvedValue({ data: { id: 'job_420' }, status: 201 })
+    expect(await createBatchAiJob(request)).toEqual({ ok: true, value: { id: 'job_420' } })
+    expect(cmsApi).toHaveBeenCalledWith('/jobs/batch-ai', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    })
+  })
+})
+
+describe('listReviewItems', () => {
+  it('asks for 20 at a time, from a cursor', async () => {
+    cmsApi.mockResolvedValue({ data: { items: [], nextCursor: null }, status: 200 })
+    await listReviewItems('job 1')
+    await listReviewItems('job 1', { cursor: 'r20' })
+    await listReviewItems('job 1', { limit: 40 })
+    expect(cmsApi.mock.calls.map(([endpoint]) => endpoint)).toEqual([
+      '/jobs/job%201/review?limit=20',
+      '/jobs/job%201/review?limit=20&cursor=r20',
+      '/jobs/job%201/review?limit=40',
+    ])
+  })
+
+  it('passes a 403 on', async () => {
+    cmsApi.mockResolvedValue({ error: 'Only people who can edit content…', status: 403 })
+    expect(await listReviewItems('job')).toEqual({
+      ok: false,
+      error: 'Only people who can edit content…',
+      status: 403,
+    })
+  })
+})
+
+describe('decideReviewItem', () => {
+  it('reads documentStatus and notice beside data', async () => {
+    const item = { id: 'r1', status: 'pending' }
+    cmsApi.mockResolvedValue({
+      data: item,
+      body: { data: item, documentStatus: 'PUBLISHED', notice: 'The document stays published.' },
+      status: 200,
+    })
+    const res = await decideReviewItem('job', 'r1', { action: 'undo' })
+    expect(res).toEqual({
+      ok: true,
+      value: { item, documentStatus: 'PUBLISHED', notice: 'The document stays published.' },
+    })
+    expect(cmsApi).toHaveBeenCalledWith('/jobs/job/review/r1', {
+      method: 'POST',
+      body: '{"action":"undo"}',
+    })
+  })
+
+  it('has no status for an image and no notice by default', async () => {
+    cmsApi.mockResolvedValue({
+      data: { id: 'r1' },
+      body: { data: { id: 'r1' }, documentStatus: null },
+      status: 200,
+    })
+    const res = await decideReviewItem('job', 'r1', { action: 'approve', onApprove: 'publish' })
+    expect(res.ok && res.value).toMatchObject({ documentStatus: null, notice: null })
+  })
+})
+
+describe('reviewConflict', () => {
+  // The messages cms-core's jobs/review.ts sends with a 409.
+  it.each([
+    [
+      'This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+      'published',
+    ],
+    [
+      'The document changed while this was being saved, so nothing was written. Try again.',
+      'changed',
+    ],
+    ["The page this links to, /about, isn't published at that address any more.", 'link-gone'],
+    ['The page this links to, /about, isn’t published at that address any more.', 'link-gone'],
+    ['This change was already decided.', 'decided'],
+    ['This change no longer exists.', 'gone'],
+    ["The document no longer exists, so the change can't be applied.", 'gone'],
+    ['This document already links to /about.', null],
+    [
+      'The field changed after this was approved. Restore it from the document history instead.',
+      null,
+    ],
+  ])('reads %j as %s', (message, kind) => {
+    expect(reviewConflict(409, message)).toBe(kind)
+  })
+
+  it('reads only 409s', () => {
+    expect(reviewConflict(400, 'This change was already decided.')).toBeNull()
+  })
+})

package/src/__tests__/router/admin-route-order.test.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * AdminRoot matches routes top to bottom and returns on the first hit, so a
+ * literal route listed after a param route of the same shape never renders:
+ * `/pages/trash` behind `/pages/:id` opened the page editor with id "trash".
+ */
+const source = readFileSync(fileURLToPath(new URL('../../AdminRoot.tsx', import.meta.url)), 'utf8')
+
+/** Every `matchRoute('…')` pattern in source order (template-literal routes skipped). */
+const patterns = [...source.matchAll(/matchRoute\(\s*'([^']+)'\s*\)/g)].map((m) => m[1]!)
+
+function shadows(param: string, literal: string): boolean {
+  const a = param.split('/').filter(Boolean)
+  const b = literal.split('/').filter(Boolean)
+  return a.length === b.length && a.every((part, i) => part.startsWith(':') || part === b[i])
+}
+
+describe('AdminRoot route order', () => {
+  it('finds the routes it checks', () => {
+    expect(patterns).toContain('/pages/trash')
+    expect(patterns).toContain('/pages/:id')
+  })
+
+  it('lists every literal route before any param route that would swallow it', () => {
+    const problems: string[] = []
+    patterns.forEach((literal, i) => {
+      if (literal.includes(':')) return
+      for (const earlier of patterns.slice(0, i)) {
+        if (earlier.includes(':') && shadows(earlier, literal)) {
+          problems.push(`${literal} is unreachable behind ${earlier}`)
+        }
+      }
+    })
+    expect(problems).toEqual([])
+  })
+})

package/src/__tests__/styles/ai-gradient-contrast.test.ts

@@ -0,0 +1,135 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { ACCENT_PRESET_LIST, contrastRatio, tuneAccent } from '@prenta/core/appearance'
+
+const tokens = JSON.parse(
+  readFileSync(
+    resolve(dirname(fileURLToPath(import.meta.url)), '../../../design-system/tokens.json'),
+    'utf8',
+  ),
+)
+
+/** `oklch(from var(--acc) calc(l ± d) c calc(h - r))` → the lightness and hue shifts. */
+function ai2Shift(value: string): { dl: number; dh: number } {
+  const m = /calc\(l ([+-]) ([\d.]+)\) c calc\(h - ([\d.]+)\)/.exec(value)
+  if (!m) throw new Error(`unexpected --ai2: ${value}`)
+  return { dl: (m[1] === '-' ? -1 : 1) * Number(m[2]), dh: -Number(m[3]) }
+}
+
+const toLinear = (c: number) => {
+  const v = c / 255
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+}
+const toGamma = (v: number) => {
+  const c = Math.min(1, Math.max(0, v))
+  return c <= 0.0031308 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055
+}
+
+/** `#rrggbb` → OKLCH (Björn Ottosson's OKLab). */
+function hexToOklch(hex: string) {
+  const n = parseInt(hex.slice(1), 16)
+  const r = toLinear((n >> 16) & 255)
+  const g = toLinear((n >> 8) & 255)
+  const b = toLinear(n & 255)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  return { L, C: Math.hypot(A, B), H: ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360 }
+}
+
+/** OKLCH → `#rrggbb`, channels clipped to sRGB as the browser paints them. */
+function oklchToHex({ L, C, H }: { L: number; C: number; H: number }) {
+  const a = C * Math.cos((H * Math.PI) / 180)
+  const b = C * Math.sin((H * Math.PI) / 180)
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3
+  const rgb = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ]
+  return `#${rgb
+    .map((v) =>
+      Math.round(toGamma(v) * 255)
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('')}`
+}
+
+/** The second gradient stop for an accent, as the token computes it. */
+function ai2(accent: string, shift: { dl: number; dh: number }) {
+  const o = hexToOklch(accent)
+  return oklchToHex({
+    L: Math.min(1, Math.max(0, o.L + shift.dl)),
+    C: o.C,
+    H: (o.H + shift.dh + 360) % 360,
+  })
+}
+
+/** Hover is `filter: brightness(1.07)`, which scales the encoded channels. */
+function hover(hex: string) {
+  return `#${[1, 3, 5]
+    .map((i) =>
+      Math.min(255, Math.round(parseInt(hex.slice(i, i + 2), 16) * 1.07))
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('')}`
+}
+
+const light = ai2Shift(tokens.color.light.ai.ai2.value)
+const dark = ai2Shift(tokens.color.dark.ai.ai2.value)
+
+/** Every 17th step per channel: 4,096 custom picks. */
+function* grid() {
+  for (let r = 0; r < 256; r += 17)
+    for (let g = 0; g < 256; g += 17)
+      for (let b = 0; b < 256; b += 17)
+        yield `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`
+}
+
+/**
+ * The AI button keeps its label on the gradient, so white (Porcelain, Linen)
+ * or near-black (Graphite) text must clear 4.5:1 at both ends, at rest and on
+ * hover. The kit's lighter second stop fails on light bases (Cobalt 2.85:1),
+ * and hover's brightness(1.07) costs custom blues about 0.4; CONFLICTS.md §2.
+ */
+describe('AI gradient contrast', () => {
+  it('keeps white text at 4.5:1 at both stops for every preset on light bases', () => {
+    for (const preset of ACCENT_PRESET_LIST) {
+      const stops = [preset.light.accentLt, ai2(preset.light.accentLt, light)]
+      for (const stop of stops) {
+        expect(contrastRatio('#ffffff', stop), `${preset.name} ${stop}`).toBeGreaterThanOrEqual(4.5)
+        expect(
+          contrastRatio('#ffffff', hover(stop)),
+          `${preset.name} ${stop} hover`,
+        ).toBeGreaterThanOrEqual(4.5)
+      }
+    }
+  })
+
+  it('keeps white text at 4.5:1 for custom accents on light bases, on hover too', () => {
+    for (const pick of grid()) {
+      const tuned = tuneAccent(pick)!
+      for (const stop of [tuned.lt, ai2(tuned.lt, light)]) {
+        expect(contrastRatio('#ffffff', hover(stop)), `${pick} ${stop}`).toBeGreaterThanOrEqual(4.5)
+      }
+    }
+  })
+
+  it('keeps dark text at 4.5:1 on the second stop in Graphite', () => {
+    for (const preset of ACCENT_PRESET_LIST) {
+      expect(
+        contrastRatio('#0e0f11', ai2(preset.dark.accentDk, dark)),
+        preset.name,
+      ).toBeGreaterThanOrEqual(4.5)
+    }
+  })
+})

package/src/__tests__/styles/breakpoint-order.test.ts

@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile } from 'tailwindcss'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * Any `--breakpoint-*` theme.css adds must sort in width order against
+ * Tailwind's own. Tailwind 4.2 compares breakpoints with parseInt() on the
+ * value, so px sorts before every rem tier, and a fractional rem tier ties with
+ * the stock one that shares its integer part (64.0625rem vs lg's 64rem) and
+ * falls back to name order. Either way `laptop:p-4` can lose to `lg:p-2`
+ * without any error. This compiles the real declarations and checks the order.
+ */
+
+const require = createRequire(import.meta.url)
+const twTheme = require.resolve('tailwindcss/theme.css')
+const theme = readFileSync(
+  fileURLToPath(new URL('../../styles/theme.css', import.meta.url)),
+  'utf8',
+)
+
+const declared = [...theme.matchAll(/^\s*--breakpoint-([\w-]+):\s*([^;]+);/gm)].map(
+  ([, name, value]) => ({ name: name!, value: value!.trim() }),
+)
+
+const STOCK = ['sm', 'md', 'lg', 'xl', '2xl']
+
+/** Emitted `@media (width >= …)` thresholds, in output order, as rem. */
+async function emittedOrder(): Promise<number[]> {
+  const compiler = await compile(
+    [
+      "@import 'tailwindcss/theme.css';",
+      `@theme inline {\n${declared.map((b) => `--breakpoint-${b.name}: ${b.value};`).join('\n')}\n}`,
+      '@tailwind utilities;',
+    ].join('\n'),
+    {
+      base: dirname(twTheme),
+      loadStylesheet: async () => ({
+        path: twTheme,
+        base: dirname(twTheme),
+        content: readFileSync(twTheme, 'utf8'),
+      }),
+    },
+  )
+  const names = [...new Set([...STOCK, ...declared.map((b) => b.name)])]
+  const css = compiler.build(names.map((n, i) => `${n}:p-${i + 1}`))
+  return [...css.matchAll(/@media \(width >= ([\d.]+)(rem|px)\)/g)].map(([, n, unit]) =>
+    unit === 'px' ? Number(n) / 16 : Number(n),
+  )
+}
+
+describe('breakpoint variants', () => {
+  it('emit narrowest first, stock and custom together', async () => {
+    const widths = await emittedOrder()
+    expect(widths.length).toBe(new Set([...STOCK, ...declared.map((b) => b.name)]).size)
+    expect(widths).toEqual([...widths].sort((a, b) => a - b))
+  })
+
+  it('never share an integer rem part with a stock breakpoint (Tailwind ties those)', () => {
+    const stockInts = [40, 48, 64, 80, 96]
+    for (const { name, value } of declared.filter((b) => !STOCK.includes(b.name))) {
+      const rem = value.endsWith('px') ? parseFloat(value) / 16 : parseFloat(value)
+      expect(stockInts, `--breakpoint-${name}: ${value}`).not.toContain(Math.trunc(rem))
+    }
+  })
+})