@preset.nz/facets 0.2.0 → 0.3.0

package/src/field-renderers.tsx

@@ -3,9 +3,13 @@
  * components plus a single `registerBuiltinRenderers` entry point. Splitting
  * each renderer into its own file would be over-organisation for code that
  * never hot-reloads in isolation. */
-import { useMemo, useRef } from "react"
+import { useEffect, useId, useMemo, useRef } from "react"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ColorField } from "@/components/ui/color-field"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { NumberField } from "@/components/ui/number-field"
+import { PathField } from "@/components/ui/path-field"
 import {
   Select,
   SelectContent,
@@ -13,27 +17,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Checkbox } from "@/components/ui/checkbox"
 import { Separator } from "@/components/ui/separator"
-import { NumberField } from "@/components/ui/number-field"
 import { Slider } from "@/components/ui/slider"
-import { ColorField } from "@/components/ui/color-field"
-import { registerFieldRenderer } from "./registry"
+import { filtersOf, useFileHandlers, useMissing, useRecent } from "./file-handlers"
 import { COLUMN_ROW, NUMBER_WIDTH, NUMBER_WIDTH_INSIDE, useLabelLayout } from "./layout"
+import { registerFieldRenderer } from "./registry"
 import type {
   CheckboxFieldDef,
   ColorFieldDef,
   FieldRenderer,
   FieldRendererProps,
-  NumberFieldDef,
-  SelectFieldDef,
-  SliderFieldDef,
-  TextFieldDef,
-  TextareaFieldDef,
   FileFieldDef,
   LabelFieldDef,
+  NumberFieldDef,
   PanelView,
+  SelectFieldDef,
   SeparatorFieldDef,
+  SliderFieldDef,
+  TextareaFieldDef,
+  TextFieldDef,
   VectorFieldDef,
 } from "./types"
 
@@ -59,10 +61,13 @@ export function FieldShell({
   view,
   top,
   above,
+  htmlFor,
   children,
 }: {
   label?: string
   view?: PanelView
+  /** The id of the control the label names, so clicking the label focuses it. */
+  htmlFor?: string
   /** In a label column: align the label to the top of a tall control. */
   top?: boolean
   /** The label sits above the control even in a label column (a wide control, like a vector of four). */
@@ -74,7 +79,10 @@ export function FieldShell({
   if (view === "collapsed") {
     return (
       <div className="grid grid-cols-[5.5rem_minmax(0,1fr)] items-center gap-2">
-        <Label className="truncate text-[11px] font-medium text-muted-foreground tracking-wide">
+        <Label
+          htmlFor={htmlFor}
+          className="truncate text-[11px] font-medium text-muted-foreground tracking-wide"
+        >
           {label}
         </Label>
         <div className="min-w-0">{children}</div>
@@ -86,6 +94,7 @@ export function FieldShell({
     return (
       <div className={top ? COLUMN_ROW.replace("items-center", "items-start") : COLUMN_ROW}>
         <Label
+          htmlFor={htmlFor}
           title={label}
           className={
             "block truncate text-[11px] font-medium text-muted-foreground tracking-wide" +
@@ -101,7 +110,10 @@ export function FieldShell({
   return (
     <div className="flex flex-col gap-1">
       {label && (
-        <Label className="text-[11px] font-medium text-muted-foreground tracking-wide">
+        <Label
+          htmlFor={htmlFor}
+          className="text-[11px] font-medium text-muted-foreground tracking-wide"
+        >
           {label}
         </Label>
       )}
@@ -126,13 +138,7 @@ function formatPrimitive(value: unknown): string {
   return String(value)
 }
 
-const TextRenderer: FieldRenderer<TextFieldDef> = ({
-  field,
-  value,
-  disabled,
-  onChange,
-  view,
-}) => {
+const TextRenderer: FieldRenderer<TextFieldDef> = ({ field, value, disabled, onChange, view }) => {
   const display = formatPrimitive(value)
   return (
     <FieldShell label={field.label ?? field.id} view={view}>
@@ -199,11 +205,7 @@ const NumberRenderer: FieldRenderer<NumberFieldDef> = ({
 }) => {
   const layout = useLabelLayout()
   const num =
-    typeof value === "number"
-      ? value
-      : value != null && value !== ""
-      ? Number(value)
-      : null
+    typeof value === "number" ? value : value != null && value !== "" ? Number(value) : null
   const finite = num != null && Number.isFinite(num)
   const label = field.label ?? field.id
   if (!onChange) {
@@ -299,9 +301,7 @@ const SliderRenderer: FieldRenderer<SliderFieldDef> = ({
           )}
         </div>
       ) : (
-        <ReadOnlyText>
-          {Number.isFinite(num) ? num.toLocaleString() : <Empty />}
-        </ReadOnlyText>
+        <ReadOnlyText>{Number.isFinite(num) ? num.toLocaleString() : <Empty />}</ReadOnlyText>
       )}
     </FieldShell>
   )
@@ -324,19 +324,13 @@ const SelectRenderer: FieldRenderer<SelectFieldDef> = ({
   if (!onChange) {
     return (
       <FieldShell label={field.label ?? field.id} view={view}>
-        <ReadOnlyText>
-          {matched ? matched.label : current ? current : <Empty />}
-        </ReadOnlyText>
+        <ReadOnlyText>{matched ? matched.label : current ? current : <Empty />}</ReadOnlyText>
       </FieldShell>
     )
   }
   return (
     <FieldShell label={field.label ?? field.id} view={view}>
-      <Select
-        value={current}
-        onValueChange={(v) => onChange(v)}
-        disabled={disabled}
-      >
+      <Select value={current} onValueChange={(v) => onChange(v)} disabled={disabled}>
         <SelectTrigger className="w-full">
           {/* Children, not the primitive's own lookup: Base UI's Value shows
               the raw value unless it's told the label. */}
@@ -432,14 +426,93 @@ const CheckboxRenderer: FieldRenderer<CheckboxFieldDef> = ({
 const FileRenderer: FieldRenderer<FileFieldDef> = ({
   field,
   value,
+  disabled,
+  onChange,
+  error,
   view,
 }) => {
-  const asset = value as { name?: string } | null | undefined
+  const label = field.label ?? field.id
+  const inputId = useId()
+  const h = useFileHandlers()
+  const path = typeof value === "string" && value !== "" ? value : null
+  const missing = useMissing(path, h)
+  const [recent, reloadRecent] = useRecent(field.recentKey, h, path)
+
+  // What was last committed and not yet seen come back as the value. The host's `write` is the
+  // validator and may be asynchronous, so the field cannot tell "accepted" from the call: it
+  // sees it when the value prop becomes the committed path. Only then is the path remembered. A
+  // refusal (`error`) or any other change of value drops the pending commit.
+  const pending = useRef<string | null | undefined>(undefined)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: settles when the value changes; the rest is read fresh
+  useEffect(() => {
+    const committed = pending.current
+    pending.current = undefined
+    if (committed !== undefined && committed === path && path !== null && field.recentKey) {
+      Promise.resolve(h?.remember?.(field.recentKey, path)).then(reloadRecent, () => {})
+    }
+  }, [path])
+  useEffect(() => {
+    if (error) pending.current = undefined
+  }, [error])
+
+  // The context menu stays native, and the text menu keeps the field while its text is being
+  // edited: whether the input had focus is read before the click that opens the menu moves it.
+  const editing = useRef(false)
+
+  // The old read-only `{ name }` value.
+  if (value != null && typeof value === "object") {
+    const name = (value as { name?: string }).name
+    return (
+      <FieldShell label={label} view={view}>
+        <ReadOnlyText>{name ? name : <Empty />}</ReadOnlyText>
+      </FieldShell>
+    )
+  }
+
+  const editable = !!onChange
+  const commit = (next: string | null) => {
+    pending.current = next
+    onChange?.(next)
+  }
+  const pick = h?.pick
+  const menu = h?.contextMenu
+  const act = async () => {
+    const choice = await menu?.({ missing: missing || path === null, canClear: editable && !!path })
+    if (choice === "reveal" && path) {
+      try {
+        await h?.reveal?.(path, h.base?.())
+      } catch {
+        // The file went between the check and the click; the next focus check says Missing.
+      }
+    } else if (choice === "clear" && editable && path) commit(null)
+  }
+
   return (
-    <FieldShell label={field.label ?? field.id} view={view}>
-      <ReadOnlyText>
-        {asset?.name ? asset.name : <Empty />}
-      </ReadOnlyText>
+    <FieldShell label={label} view={view} htmlFor={inputId}>
+      <PathField
+        id={inputId}
+        value={path}
+        placeholder={field.placeholder}
+        disabled={disabled}
+        status={error ? "invalid" : missing ? "missing" : "ok"}
+        message={error}
+        onCommit={editable ? commit : undefined}
+        recent={editable && recent.length > 0 ? recent : undefined}
+        onBrowse={
+          editable && pick
+            ? () => pick({ filters: filtersOf(field), title: field.title })
+            : undefined
+        }
+        onMouseDownCapture={(e) => {
+          const input = e.currentTarget.querySelector("input")
+          editing.current = input !== null && input === document.activeElement
+        }}
+        onContextMenu={(e) => {
+          if (!menu || disabled || editing.current) return
+          e.preventDefault()
+          void act()
+        }}
+      />
     </FieldShell>
   )
 }
@@ -454,11 +527,7 @@ function toNumberArray(value: unknown, arity: number): Array<number | null> {
   })
 }
 
-function formatComponent(
-  n: number | null,
-  integer: boolean,
-  precision?: number,
-): string {
+function formatComponent(n: number | null, integer: boolean, precision?: number): string {
   if (n == null) return ""
   if (integer) return Math.trunc(n).toLocaleString()
   if (precision != null) return n.toFixed(precision)
@@ -493,6 +562,7 @@ const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
           style={{ gridTemplateColumns: `repeat(${arity}, minmax(0, 1fr))` }}
         >
           {field.components.map((c, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: components are a fixed positional tuple
             <div key={i} className="flex flex-col gap-0.5 min-w-0">
               {c.label && (
                 <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
@@ -505,9 +575,7 @@ const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
                 ) : (
                   <>
                     {formatComponent(values[i], isInt, field.precision)}
-                    {c.suffix && (
-                      <span className="text-muted-foreground">{c.suffix}</span>
-                    )}
+                    {c.suffix && <span className="text-muted-foreground">{c.suffix}</span>}
                   </>
                 )}
               </div>
@@ -526,6 +594,7 @@ const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
       >
         {field.components.map((c, i) => (
           <NumberField
+            // biome-ignore lint/suspicious/noArrayIndexKey: components are a fixed positional tuple
             key={i}
             label={c.label ?? AXES[i] ?? String(i + 1)}
             value={values[i] ?? c.min ?? 0}
@@ -566,63 +635,21 @@ const SeparatorRenderer: FieldRenderer<SeparatorFieldDef> = ({ field, view }) =>
 // The same in every mode: there is nothing to edit. Greys out under
 // disabledWhen so a hint can follow the field it describes.
 const LabelRenderer: FieldRenderer<LabelFieldDef> = ({ field, disabled }) => (
-  <p
-    className={
-      "text-xs text-muted-foreground" + (disabled ? " opacity-50" : "")
-    }
-  >
-    {field.label}
-  </p>
+  <p className={`text-xs text-muted-foreground${disabled ? " opacity-50" : ""}`}>{field.label}</p>
 )
 
 export function registerBuiltinRenderers(): void {
-  registerFieldRenderer(
-    "separator",
-    SeparatorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "label",
-    LabelRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "text",
-    TextRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "textarea",
-    TextareaRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "number",
-    NumberRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "slider",
-    SliderRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "select",
-    SelectRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "color",
-    ColorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "checkbox",
-    CheckboxRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "file",
-    FileRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "vector",
-    VectorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
+  registerFieldRenderer("separator", SeparatorRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("label", LabelRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("text", TextRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("textarea", TextareaRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("number", NumberRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("slider", SliderRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("select", SelectRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("color", ColorRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("checkbox", CheckboxRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("file", FileRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("vector", VectorRenderer as FieldRenderer<import("./types").FieldDef>)
 }
 
-export type {
-  FieldRenderer,
-  FieldRendererProps,
-}
+export type { FieldRenderer, FieldRendererProps }

package/src/file-handlers.ts

@@ -0,0 +1,158 @@
+import { useEffect, useRef, useState } from "react"
+import type { FileFieldDef, FileFilter } from "./types"
+
+/** What the user chose in the file field's context menu. */
+export type FileMenuChoice = "reveal" | "clear"
+
+/**
+ * The native half of the `file` field, supplied by the host so facets depends on neither Tauri
+ * nor app-kit. app-kit's functions have exactly these shapes: `recent: recentPaths`,
+ * `remember: rememberPath`, `pick: pickFile`, `exists: pathsExist`, `reveal: revealPath`,
+ * `contextMenu: pathFieldMenu`. Every member is optional; a field uses what the host gave it
+ * and is a plain editable text field when it gave none.
+ */
+export interface FileHandlers {
+  /** The recent paths of a field kind (`recentKey`), newest first. Feeds the ▾ list. */
+  recent?: (key: string) => Promise<string[]>
+  /**
+   * Put a path at the top of a kind's recent list. Called once the host has accepted a commit
+   * (the field's value became the committed path), never for a refused one.
+   */
+  remember?: (key: string, path: string) => void | Promise<void>
+  /** The native Open dialog: the absolute path chosen, or null when cancelled. Feeds the browse icon. */
+  pick?: (opts: { filters?: FileFilter[]; title?: string }) => Promise<string | null>
+  /**
+   * Whether each path exists, in order. Relative paths resolve against `base`. Gone recents are
+   * left out of the ▾ list, and the current value shows Missing; both are re-checked when the
+   * window regains focus.
+   */
+  exists?: (paths: string[], base?: string) => Promise<boolean[]>
+  /** Show the file in the Finder. */
+  reveal?: (path: string, base?: string) => void | Promise<void>
+  /**
+   * A native menu at the pointer (Reveal in Finder, Clear). Resolves to the choice, or null when
+   * dismissed. Without it the field has no context menu of its own.
+   */
+  contextMenu?: (opts: { missing: boolean; canClear?: boolean }) => Promise<FileMenuChoice | null>
+  /** The folder relative paths resolve against: the document's. Read when a field checks or reveals. */
+  base?: () => string | undefined
+}
+
+let handlers: FileHandlers | null = null
+const listeners = new Set<() => void>()
+
+/**
+ * Register the host's file handlers, once at startup (like `registerFieldRenderer`): every `file`
+ * field in every panel then works the same way. Pass `null` to remove them. Replaces any earlier
+ * registration; fields already drawn pick the change up.
+ */
+export function registerFileHandlers(next: FileHandlers | null): void {
+  handlers = next
+  for (const l of listeners) l()
+}
+
+export function getFileHandlers(): FileHandlers | null {
+  return handlers
+}
+
+/** The registered handlers, re-read if they are registered again while the field is drawn. */
+export function useFileHandlers(): FileHandlers | null {
+  const [, bump] = useState(0)
+  useEffect(() => {
+    const l = () => bump((n) => n + 1)
+    listeners.add(l)
+    return () => {
+      listeners.delete(l)
+    }
+  }, [])
+  return handlers
+}
+
+/**
+ * The Open dialog's filters for a field: `filters`, else the extensions in the deprecated
+ * `accept` (`".png,.jpg,image/*"` gives one "Files" filter of png and jpg), else none.
+ */
+export function filtersOf(
+  field: Pick<FileFieldDef, "filters" | "accept">,
+): FileFilter[] | undefined {
+  if (field.filters?.length) return field.filters
+  const extensions = (field.accept ?? "")
+    .split(",")
+    .map((t) => t.trim())
+    .filter((t) => /^\.[^./\\*]+$/.test(t))
+    .map((t) => t.slice(1))
+  return extensions.length ? [{ name: "Files", extensions }] : undefined
+}
+
+/**
+ * Whether the path is gone: false until the check says so, re-run when the path or base changes
+ * and whenever the window regains focus, so a file put back recovers without a click. Always
+ * false without an `exists` handler or a path.
+ */
+export function useMissing(path: string | null, h: FileHandlers | null): boolean {
+  const [missing, setMissing] = useState(false)
+  const exists = h?.exists
+  const base = h?.base?.()
+  useEffect(() => {
+    if (!exists || !path) {
+      setMissing(false)
+      return
+    }
+    let live = true
+    const check = () =>
+      exists([path], base).then(
+        (found) => live && setMissing(found[0] === false),
+        () => {},
+      )
+    void check()
+    window.addEventListener("focus", check)
+    return () => {
+      live = false
+      window.removeEventListener("focus", check)
+    }
+  }, [exists, path, base])
+  return missing
+}
+
+/**
+ * The ▾ list: the host's recent paths for a key with the gone ones left out (all of them when
+ * the host has no `exists`). Loaded on mount, whenever `refreshOn` changes and when the window
+ * regains focus. Returns the list and a function that reloads it.
+ */
+export function useRecent(
+  key: string | undefined,
+  h: FileHandlers | null,
+  refreshOn: unknown,
+): [string[], () => Promise<void>] {
+  const [list, setList] = useState<string[]>([])
+  const recent = h?.recent
+  const exists = h?.exists
+  const base = h?.base?.()
+  const latest = useRef(0)
+  const reload = useRef<() => Promise<void>>(async () => {})
+  reload.current = async () => {
+    if (!recent || !key) {
+      setList([])
+      return
+    }
+    const ticket = ++latest.current
+    try {
+      const all = await recent(key)
+      const found = exists && all.length ? await exists(all, base) : undefined
+      if (ticket === latest.current) setList(found ? all.filter((_, i) => found[i] !== false) : all)
+    } catch {
+      if (ticket === latest.current) setList([])
+    }
+  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reload is read through the ref; these are what should trigger it
+  useEffect(() => {
+    void reload.current()
+    const onFocus = () => void reload.current()
+    window.addEventListener("focus", onFocus)
+    return () => {
+      window.removeEventListener("focus", onFocus)
+      latest.current++
+    }
+  }, [key, recent, exists, base, refreshOn])
+  return [list, () => reload.current()]
+}

package/src/index.ts

@@ -1,11 +1,19 @@
-export * from "./types"
+export { FieldShell, ReadOnlyText, registerBuiltinRenderers } from "./field-renderers"
 export {
-  registerScope,
-  unregisterScope,
+  type FileHandlers,
+  type FileMenuChoice,
+  filtersOf,
+  getFileHandlers,
+  registerFileHandlers,
+} from "./file-handlers"
+export { COLUMN_ROW, useLabelLayout } from "./layout"
+export { schemaProblems } from "./pages"
+export { isDisabled, PropertyPanel, promotedFields, showsIn } from "./panel"
+export {
+  getFieldRenderer,
   getScope,
   registerFieldRenderer,
-  getFieldRenderer,
+  registerScope,
+  unregisterScope,
 } from "./registry"
-export { PropertyPanel, promotedFields, showsIn } from "./panel"
-export { registerBuiltinRenderers, FieldShell, ReadOnlyText } from "./field-renderers"
-export { useLabelLayout, COLUMN_ROW } from "./layout"
+export * from "./types"

package/src/layout.ts

@@ -15,6 +15,9 @@ export const LABEL_WIDTH_VAR = "--facets-label-w"
 /** The grid every `"column"` row sits on: the label, then the control. */
 export const COLUMN_ROW = `grid min-h-8 grid-cols-[var(${LABEL_WIDTH_VAR})_minmax(0,1fr)] items-center gap-x-3`
 
+/** A field's help in `"column"` layout: the same columns, the text under the control. */
+export const HELP_ROW = `grid grid-cols-[var(${LABEL_WIDTH_VAR})_minmax(0,1fr)] gap-x-3`
+
 /**
  * One width for every number field in a panel, whatever its label: the box is this wide in a label
  * column or under a label, and `NUMBER_WIDTH_INSIDE` when the label sits inside it (the default
@@ -30,7 +33,8 @@ export const NUMBER_WIDTH_INSIDE = "w-44 ml-auto"
  */
 export function labelColumnWidth(fields: FieldDef[]): string {
   const longest = fields.reduce(
-    (n, f) => (f.kind === "separator" || f.kind === "label" ? n : Math.max(n, (f.label ?? f.id).length)),
+    (n, f) =>
+      f.kind === "separator" || f.kind === "label" ? n : Math.max(n, (f.label ?? f.id).length),
     0,
   )
   return `${Math.min(16, Math.max(8, longest))}ch`

package/src/pages.ts

@@ -0,0 +1,50 @@
+import type { PropertySchema } from "./types"
+
+/**
+ * What the JSON Schema can't say about pages and advanced groups, since it
+ * needs one part of the schema checked against another. An empty list means
+ * the schema is sound. `registerScope` throws on any problem, so a bad schema
+ * fails where it is registered rather than drawing a page with nothing on it.
+ *
+ * - `pages`, when present, is not empty and its ids are unique.
+ * - With pages, every group names a declared page; without, none names one.
+ * - Every page, including the one page of a schema without `pages`, has a group
+ *   that isn't `advanced`. A schema with no groups at all is fine.
+ */
+export function schemaProblems(schema: PropertySchema): string[] {
+  const problems: string[] = []
+  const at = (i: number) => `groups[${i}] ("${schema.groups[i].id}")`
+  const pages = schema.pages
+  if (!pages) {
+    schema.groups.forEach((g, i) => {
+      if (g.page !== undefined)
+        problems.push(`${at(i)}: names page "${g.page}", but there are no pages`)
+    })
+    if (schema.groups.length > 0 && schema.groups.every((g) => g.advanced)) {
+      problems.push("every group is advanced: the panel would show only a closed Advanced row")
+    }
+    return problems
+  }
+  if (pages.length === 0) problems.push("pages is empty: omit it for one page")
+  const ids = new Set<string>()
+  for (const p of pages) {
+    if (p.id === "") {
+      problems.push("pages: an id is empty")
+      continue
+    }
+    if (ids.has(p.id)) problems.push(`pages: "${p.id}" is declared twice`)
+    ids.add(p.id)
+  }
+  schema.groups.forEach((g, i) => {
+    if (g.page === undefined) problems.push(`${at(i)}: names no page`)
+    else if (!ids.has(g.page)) problems.push(`${at(i)}: page "${g.page}" is not declared`)
+  })
+  for (const id of ids) {
+    const groups = schema.groups.filter((g) => g.page === id)
+    if (groups.length === 0) problems.push(`page "${id}" has no groups`)
+    else if (groups.every((g) => g.advanced)) {
+      problems.push(`page "${id}" has only advanced groups: give it one that isn't`)
+    }
+  }
+  return problems
+}