@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/makers/message.ts

@@ -0,0 +1,292 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { argv, exit, stdout } from 'node:process'
+import { pathToFileURL } from 'node:url'
+
+import { ELSEWHERE, RECEIPT, answer, answering, asking, given, guidance, issue, marked, named, needed, only, prompted, refuse, spend, within, wordsIn, wrapped, type Asked } from '@prestack/thread/core/asking'
+import { named as packageOf } from '@prestack/thread/core/scope'
+import { findTree, inTree } from '@prestack/thread/core/tree'
+
+import { keyProps, keysIn, readWording, walk, wordingFile } from '../generators/i18n.ts'
+import { fileFor, languagesIn, sourceIn } from '../localizations.ts'
+
+const TREE = findTree()
+
+const DOTTED = /^[a-z][a-z0-9]*(?:[.-][a-z0-9]+)*$/
+
+const KEY: Asked = { at: 'key', guide: 'lowercase words joined by dots — `checkout.confirm`, `errors.db.not_found.title`' }
+
+interface Row {
+  readonly id: string
+  readonly is?: string
+  readonly sets?: Readonly<Record<string, string>>
+}
+
+async function languages(): Promise<{
+  readonly held: readonly { readonly id: string; readonly name: string; readonly flag: string }[]
+  readonly source: string
+}> {
+  const path = inTree(TREE, `localizations.${'ts'}`)
+  let sheet: { LOCALIZATION?: { readonly holds?: readonly Row[]; readonly declares?: readonly Row[] } } = {}
+  try {
+    sheet = (await import(pathToFileURL(path).href)) as typeof sheet
+  } catch {
+    sheet = {}
+  }
+  if (sheet.LOCALIZATION === undefined) {
+    refuse(
+      `there is no ${within(TREE.at, path)} declaring a \`LOCALIZATION\` here, so this app is in no ` +
+        `language and a message has nowhere to go. Run \`npx thread attach ${packageOf('ui')}\`.`,
+    )
+  }
+  const rows = [...(sheet.LOCALIZATION.holds ?? []), ...(sheet.LOCALIZATION.declares ?? [])]
+  const held = languagesIn(rows)
+  const source = sourceIn(rows)
+  if (held.length === 0 || source === undefined) {
+    refuse('no language is declared, so there is nothing to write a message in. Add one with `npx thread create language`.')
+  }
+  return { held, source }
+}
+
+function usage(props: readonly string[]): ReadonlyMap<string, readonly string[]> {
+  const found = new Map<string, string[]>()
+  for (const file of walk(TREE.at)) {
+    const text = readFileSync(file, 'utf8')
+    for (const key of new Set(keysIn(text, props))) {
+      const held = found.get(key) ?? []
+      held.push(within(TREE.at, file))
+      found.set(key, held)
+    }
+  }
+  return found
+}
+
+const mark = (key: string, said: string): string => marked([key, said])
+
+function write(at: string, language: string, held: Readonly<Record<string, string>>): void {
+  writeFileSync(join(at, fileFor(language)), wordingFile(held), 'utf8')
+}
+
+async function run(): Promise<number> {
+  const { held: spoken, source } = await languages()
+  const props = keyProps(TREE.at)
+  if (props.length === 0) {
+    refuse(
+      `nothing in the installed \`${packageOf('ui')}\` declares a prop of type \`MessageKey\`, so no key could be ` +
+        'recognised anywhere. That is a broken install rather than an app with no wording.',
+    )
+  }
+
+  const LANGUAGES: readonly Asked[] = spoken.map((one) => ({ at: one.id, guide: `what it says in ${one.name}` }))
+
+  const NEW: readonly Asked[] = [KEY, ...LANGUAGES]
+
+  const wording = new Map<string, Record<string, string>>()
+  for (const one of spoken) wording.set(one.id, { ...readWording(TREE.at, one.id) })
+
+  const written = wording.get(source) ?? {}
+  const keys = Object.keys(written).sort()
+  const used = usage(props)
+
+  const blank = (key: string): readonly string[] =>
+    spoken.filter((one) => ((wording.get(one.id) ?? {})[key] ?? '') === '').map((one) => one.id)
+
+  const listing = [
+    `${String(keys.length)} message(s), in ${spoken.map((one) => one.id).join(', ')} — written in ${source}:`,
+    '',
+
+    ...keys.map((key) => {
+      const missing = blank(key)
+      const said = (written[key] ?? '') || '(nothing yet)'
+      return (
+        `  [${mark(key, written[key] ?? '')}] ${key.padEnd(38)} ${said.length > 46 ? `${said.slice(0, 45)}…` : said}` +
+        `${missing.length === 0 ? '' : `  · still to write: ${missing.join(', ')}`}` +
+        `${(used.get(key) ?? []).length === 0 ? '  · named by nothing here' : ''}`
+      )
+    }),
+  ].join('\n')
+
+  const words = wordsIn(['new'])
+  const verb = words[0]
+
+  const flagged = argv.indexOf(RECEIPT)
+  if (flagged === -1) {
+    stdout.write(`${listing}\n`)
+    const nonce = issue(TREE.at, listing)
+    stdout.write(
+      [
+        '',
+        ...answering('message'),
+        '',
+        ...guidance(NEW),
+        '',
+        ...wrapped(
+          'Every language is asked for and none may be left blank. A key that exists in one language and ' +
+            'not another is what makes a screen come out half translated, and it is refused here rather ' +
+            'than found by whoever is reading the app in the other one.',
+          '  ',
+        ),
+        '',
+        `  npx thread create message new ${RECEIPT} ${nonce}`,
+        '',
+        ...ELSEWHERE,
+        '',
+        ...wrapped(
+          'A rename moves the wording in every language and rewrites every file in the interface that ' +
+            'names it, in one run.',
+          '  ',
+        ),
+        '',
+      ].join('\n'),
+    )
+    stdout.write(`create: receipt ${nonce} — spent on use, and stale the moment the wording changes.\n`)
+    return 0
+  }
+
+  spend(TREE.at, listing, argv[flagged + 1], `the wording`)
+
+  const all = given()
+  const { piped, ask, shut } = asking(all)
+
+  const ASKS: Readonly<Record<string, readonly string[]>> = {
+    new: ['do', ...named(NEW)],
+    edit: ['do', 'mark', ...named(NEW)],
+    remove: ['do', 'mark'],
+  }
+
+  const doing = verb ?? (await ask('do', 'new, edit or remove: '))
+  const allowed = ASKS[doing]
+  if (allowed === undefined) {
+    shut()
+    refuse(`there is nothing called "${doing}" to do here — say new, edit, remove, or read, which needs no receipt`)
+  }
+  if (piped) only(all, allowed, `\`${doing}\``)
+
+  if (doing === 'remove' || doing === 'edit') {
+    const which = words[1] ?? (piped ? needed(all, 'mark', `\`${doing}\``) : await ask('mark', 'mark: '))
+    const one = keys.find((key) => mark(key, written[key] ?? '') === which)
+    if (one === undefined) {
+      shut()
+      refuse(`\`${which}\` is not a mark this sheet issued — they are printed in brackets beside each message.`)
+    }
+
+    if (doing === 'remove') {
+      const where = used.get(one) ?? []
+      if (where.length > 0) {
+        shut()
+        refuse(
+          `\`${one}\` is named by ${where.slice(0, 6).join(', ')}` +
+            `${where.length > 6 ? ` and ${String(where.length - 6)} more` : ''}. ` +
+            'Removing it would leave those asking for wording that does not exist, which throws the moment ' +
+            'the screen renders. Take it out of the interface first.',
+        )
+      }
+      shut()
+      for (const language of spoken) {
+        const made = { ...(wording.get(language.id) ?? {}) }
+        delete made[one]
+        write(TREE.at, language.id, made)
+      }
+      stdout.write(`create: removed ${one} from ${String(spoken.length)} language file(s)\n`)
+      return 0
+    }
+
+    const renamed = piped ? (answer(all, KEY.at) ?? '') : await ask(KEY.at, `key (${one}, blank to keep) `)
+    if (renamed !== '' && !DOTTED.test(renamed)) {
+      shut()
+      refuse(`\`${renamed}\` is not a key — lowercase words joined by dots.`)
+    }
+    if (renamed !== '' && written[renamed] !== undefined) {
+      shut()
+      refuse(`\`${renamed}\` is already a message. Two keys with one name is one key, and the other's wording is lost.`)
+    }
+
+    const said = new Map<string, string>()
+    for (const language of spoken) {
+      const now = (wording.get(language.id) ?? {})[one] ?? ''
+      const next = piped
+        ? (answer(all, language.id) ?? '')
+        : await ask(language.id, `${language.name} (${now || 'nothing yet'}) `)
+      said.set(language.id, next === '' ? now : next)
+    }
+    shut()
+
+    const name = renamed === '' ? one : renamed
+    for (const language of spoken) {
+      const made = { ...(wording.get(language.id) ?? {}) }
+      delete made[one]
+      made[name] = said.get(language.id) ?? ''
+      write(TREE.at, language.id, made)
+    }
+
+    let moved = 0
+    if (renamed !== '') {
+      for (const file of walk(TREE.at)) {
+        const text = readFileSync(file, 'utf8')
+        if (!keysIn(text, props).includes(one)) continue
+        writeFileSync(
+          file,
+          text.replace(
+            new RegExp(`(\\b(?:${props.join('|')})\\s*=\\s*")${one.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(")`, 'g'),
+            `$1${name}$2`,
+          ),
+          'utf8',
+        )
+        moved += 1
+      }
+    }
+
+    stdout.write(
+      `create: ${one}${renamed === '' ? '' : ` is now ${name}`} — rewritten in ${String(spoken.length)} language file(s)` +
+        `${moved === 0 ? '' : ` and ${String(moved)} file(s) of the interface`}\n`,
+    )
+    const still = blankIn(said, spoken)
+    if (still.length > 0) {
+      stdout.write(`create: still nothing in ${still.join(', ')} — the gate refuses while that holds.\n`)
+    }
+    return 0
+  }
+
+  const key = piped ? needed(all, KEY.at, '`new`') : await ask(KEY.at, prompted(KEY))
+  if (!DOTTED.test(key)) {
+    shut()
+    refuse(`\`${key}\` is not a key — lowercase words joined by dots, like \`checkout.confirm\`.`)
+  }
+  if (written[key] !== undefined) {
+    shut()
+    refuse(`\`${key}\` is already a message. Edit it by its mark, or choose another key.`)
+  }
+
+  const said = new Map<string, string>()
+  for (const language of spoken) {
+    const next = piped
+      ? (answer(all, language.id) ?? '')
+      : await ask(language.id, `what it says in ${language.name}: `)
+    if (next === '') {
+      shut()
+      refuse(
+        `\`${key}\` has nothing to say in ${language.name}. Every language is answered at the moment a key ` +
+          'is made, because a key that exists in one language and not another is a screen that comes out ' +
+          'half translated. There is no way past this on purpose.',
+      )
+    }
+    said.set(language.id, next)
+  }
+  shut()
+
+  for (const language of spoken) {
+    write(TREE.at, language.id, { ...(wording.get(language.id) ?? {}), [key]: said.get(language.id) ?? '' })
+  }
+  stdout.write(`create: wrote ${key} in ${spoken.map((one) => one.id).join(', ')}\n`)
+  stdout.write(`create: name it in the interface with one of: ${props.join(', ')} — for example \`label="${key}"\`.\n`)
+  return 0
+}
+
+function blankIn(
+  said: ReadonlyMap<string, string>,
+  spoken: readonly { readonly id: string }[],
+): readonly string[] {
+  return spoken.filter((one) => (said.get(one.id) ?? '') === '').map((one) => one.id)
+}
+
+if (argv[1] !== undefined) exit(await run())

package/dist/ui/material.ts

@@ -0,0 +1,236 @@
+import { held, naming, sheeted, type Holds, type Token, type Wearing } from './token.ts'
+
+export interface Setting {
+  readonly property: string
+
+  readonly is?: string
+
+  readonly token?: string
+
+  readonly asks?: Readonly<Record<string, string | number>>
+}
+
+export const BOUND = {
+  background: ['colour', 'gradient', 'texture', 'noise', 'img'],
+  backgroundImage: ['gradient', 'texture', 'noise', 'img'],
+  backdropFilter: ['blur'],
+  borderWidth: ['edge'],
+  borderStyle: ['line'],
+  borderColor: ['colour'],
+  boxShadow: ['shadow'],
+  color: ['colour'],
+  opacity: ['opacity'],
+} as const
+
+type Property = keyof typeof BOUND
+
+type MaterialSettingFor<P extends Property> = {
+  readonly property: P
+
+  readonly is?: string
+
+  readonly token?: (typeof BOUND)[P][number]
+
+  readonly asks?: Readonly<Record<string, string | number>>
+}
+
+type MaterialSetting = { [P in Property]: MaterialSettingFor<P> }[Property]
+
+export interface Material {
+  readonly id: string
+
+  readonly sets: readonly MaterialSetting[]
+
+  readonly states?: readonly {
+    readonly when: readonly string[]
+    readonly sets: readonly MaterialSetting[]
+  }[]
+
+  readonly plays?: string
+
+  readonly keyframes?: readonly {
+    readonly id: string
+    readonly sets: Readonly<Record<string, readonly MaterialSetting[]>>
+  }[]
+}
+
+export const FREE = ['transition', 'outline'] as const
+
+export const material = <const T extends Material>(
+  one: T & {
+    readonly sets: {
+      readonly [I in keyof T['sets']]: T['sets'][I] extends { readonly is: infer Said }
+        ? { readonly is: Wearing<Said & string> }
+        : unknown
+    }
+  } & (T extends { readonly states: infer States }
+    ? {
+        readonly states: {
+          readonly [S in keyof States]: States[S] extends { readonly sets: infer Sets }
+            ? {
+                readonly sets: {
+                  readonly [I in keyof Sets]: Sets[I] extends { readonly is: infer Said }
+                    ? { readonly is: Wearing<Said & string> }
+                    : unknown
+                }
+              }
+            : unknown
+        }
+      }
+    : unknown) &
+    (T extends { readonly keyframes: infer Frames }
+      ? {
+          readonly keyframes: {
+            readonly [F in keyof Frames]: Frames[F] extends { readonly sets: infer Stops }
+              ? {
+                  readonly sets: {
+                    readonly [Stop in keyof Stops]: {
+                      readonly [I in keyof Stops[Stop]]: Stops[Stop][I] extends { readonly is: infer Said }
+                        ? { readonly is: Wearing<Said & string> }
+                        : unknown
+                    }
+                  }
+                }
+              : unknown
+          }
+        }
+      : unknown),
+): T => one
+
+function rowsIn(value: string): readonly string[] {
+  return value.split(/\s+/).filter((one) => one !== '')
+}
+
+function bounded(
+  set: Setting,
+  by: string,
+  kinds: Readonly<Record<string, string>>,
+  bound: Readonly<Record<string, readonly string[]>>,
+): void {
+  const value = set.is ?? ''
+
+  const rows = rowsIn(value)
+
+  const allowed = bound[set.property]
+  if (allowed === undefined) return
+
+  for (const row of rows) {
+    const kind = kinds[row]
+    if (kind === undefined || allowed.includes(kind)) continue
+    const list = allowed.map((one) => `\`${one}\``).join(' · ')
+    throw new Error(
+      `\`${by}\` sets \`${set.property}\` to \`${row}\`, and \`${row}\` is a \`${kind}\` row. ` +
+        `\`${set.property}\` takes: ${list}.`,
+    )
+  }
+}
+
+function valued(
+  set: Setting,
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  by: string,
+  kinds: Readonly<Record<string, string>> | undefined,
+  bound: Readonly<Record<string, readonly string[]>>,
+): Holds {
+  if (set.is !== undefined && set.token !== undefined) {
+    throw new Error(
+      `\`${by}\` states both a value and a token for \`${set.property}\`. A property is either a ` +
+        'value the style guide holds or a token asked for one, never both.',
+    )
+  }
+
+  if (set.is !== undefined) {
+    if (kinds !== undefined) bounded(set, by, kinds, bound)
+    return naming(named, set.is, by, set.property)
+  }
+
+  if (set.token === undefined) {
+    throw new Error(
+      `\`${by}\` sets \`${set.property}\` to nothing. State a value with \`is\`, or name a token ` +
+        'and what to ask it for.',
+    )
+  }
+
+  const token = tokens[set.token]
+  if (token === undefined) {
+    throw new Error(
+      `\`${by}\` asks \`${set.token}\` for \`${set.property}\`, and no token by that name is ` +
+        'declared. A token has to exist before anything can ask it for a value.',
+    )
+  }
+
+  if (token.makes === undefined) {
+    throw new Error(
+      `\`${by}\` asks \`${set.token}\` for \`${set.property}\`, and \`${set.token}\` carries no ` +
+        'rule, so there is nothing to ask. Name a style guide value instead.',
+    )
+  }
+
+  return held(named, token.makes(set.asks ?? {}), by)
+}
+
+export function composed(
+  sets: readonly Setting[],
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  by: string,
+  kinds: Readonly<Record<string, string>>,
+  bound: Readonly<Record<string, readonly string[]>>,
+): Readonly<Record<string, Holds>> {
+  const made: Record<string, Holds> = {}
+  for (const set of sets) {
+
+    if (bound[set.property] === undefined && (set.property === 'animation' || set.property === 'animationName')) {
+      throw new Error(
+        `\`${by}\` sets \`${set.property}\` itself, which buries the keyframes name inside a ` +
+          'string where nothing can check it. Name a style guide row of the `animation` kind, or ' +
+          'declare keyframes and name them with `plays`.',
+      )
+    }
+    made[set.property] = valued(set, named, tokens, by, kinds, bound)
+  }
+  return made
+}
+
+function playing(material: Material, plays: string | undefined): Readonly<Record<string, Holds>> {
+  if (plays === undefined) return {}
+  if ((material.keyframes ?? []).some((one) => one.id === plays)) return { animationName: sheeted(material.id, plays) }
+  const declared = (material.keyframes ?? []).map((one) => one.id)
+  throw new Error(
+    `\`${material.id}\` plays \`${plays}\`, and declares no keyframes by that name. ` +
+      (declared.length === 0
+        ? 'It declares none at all, so there is nothing for it to play.'
+        : `It declares: ${declared.join(' · ')}.`),
+  )
+}
+
+export function compose(
+  material: Material,
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  kinds: Readonly<Record<string, string>>,
+): Readonly<Record<string, Holds>> {
+  return {
+    ...composed(material.sets, named, tokens, material.id, kinds, BOUND),
+    ...playing(material, material.plays),
+  }
+}
+
+export function keyframesOf(
+  material: Material,
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  kinds: Readonly<Record<string, string>>,
+): readonly {
+  readonly id: string
+  readonly stops: readonly { readonly stop: string; readonly made: Readonly<Record<string, Holds>> }[]
+}[] {
+  return (material.keyframes ?? []).map((one) => ({
+    id: one.id,
+    stops: Object.keys(one.sets).map((stop) => ({
+      stop,
+      made: composed(one.sets[stop] ?? [], named, tokens, material.id, kinds, BOUND),
+    })),
+  }))
+}

package/dist/ui/materials/mat_bordered.ts

@@ -0,0 +1,13 @@
+import { material } from '../material.ts'
+
+export const BORDERED = material({
+  id: 'bordered',
+  sets: [
+    { property: 'background', is: 'colour-surface' },
+    { property: 'borderWidth', is: 'edge-thick' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-ink' },
+    { property: 'boxShadow', is: 'shadow-hard' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+} as const)

package/dist/ui/materials/mat_ceramic.ts

@@ -0,0 +1,13 @@
+import { material } from '../material.ts'
+
+export const CERAMIC = material({
+  id: 'ceramic',
+  sets: [
+    { property: 'backgroundImage', is: 'gradient-sheen' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-edge-ceramic' },
+    { property: 'boxShadow', is: 'shadow-2' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+} as const)

package/dist/ui/materials/mat_clay.ts

@@ -0,0 +1,13 @@
+import { material } from '../material.ts'
+
+export const CLAY = material({
+  id: 'clay',
+  sets: [
+    { property: 'background', is: 'colour-surface' },
+    { property: 'borderWidth', is: 'edge-thin' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-edge-clay' },
+    { property: 'boxShadow', is: 'shadow-2' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+} as const)

package/dist/ui/materials/mat_elevated.ts

@@ -0,0 +1,24 @@
+import { material } from '../material.ts'
+
+export const ELEVATED = material({
+  id: 'elevated',
+  sets: [
+    { property: 'background', is: 'colour-surface' },
+    { property: 'boxShadow', is: 'shadow-2' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [{ property: 'boxShadow', is: 'shadow-3' }],
+    },
+    {
+      when: ['active'],
+      sets: [{ property: 'boxShadow', is: 'shadow-1' }],
+    },
+    {
+      when: ['active', 'hover'],
+      sets: [{ property: 'boxShadow', is: 'shadow-1' }],
+    },
+  ],
+} as const)

package/dist/ui/materials/mat_flat.ts

@@ -0,0 +1,34 @@
+import { material } from '../material.ts'
+
+export const FLAT = material({
+  id: 'flat',
+  sets: [
+    { property: 'background', is: 'colour-surface' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-edge-faint' },
+    { property: 'boxShadow', is: 'shadow-1' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [{ property: 'boxShadow', is: 'shadow-2' }],
+    },
+    {
+      when: ['focus'],
+      sets: [
+        { property: 'borderColor', is: 'colour-accent' },
+        { property: 'borderWidth', is: 'edge-thick' },
+      ],
+    },
+    {
+      when: ['focus', 'hover'],
+      sets: [
+        { property: 'borderColor', is: 'colour-accent' },
+        { property: 'borderWidth', is: 'edge-thick' },
+        { property: 'boxShadow', is: 'shadow-2' },
+      ],
+    },
+  ],
+} as const)

package/dist/ui/materials/mat_glass.ts

@@ -0,0 +1,20 @@
+import { material } from '../material.ts'
+
+export const GLASS = material({
+  id: 'glass',
+  sets: [
+    { property: 'background', is: 'colour-glass' },
+    { property: 'backdropFilter', is: 'blur-md' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-edge-glass' },
+    { property: 'boxShadow', is: 'shadow-3' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [{ property: 'backdropFilter', is: 'blur-lg' }],
+    },
+  ],
+} as const)

package/dist/ui/materials/mat_lit.ts

@@ -0,0 +1,13 @@
+import { material } from '../material.ts'
+
+export const LIT = material({
+  id: 'lit',
+  sets: [
+    { property: 'background', is: 'colour-surface-lit' },
+    { property: 'borderWidth', is: 'edge-thin' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-edge-lit' },
+    { property: 'boxShadow', is: 'shadow-glow' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+} as const)

package/dist/ui/materials/mat_moulded.ts

@@ -0,0 +1,11 @@
+import { material } from '../material.ts'
+
+export const MOULDED = material({
+  id: 'moulded',
+  sets: [
+    { property: 'background', is: 'colour-page' },
+    { property: 'borderStyle', is: 'line-off' },
+    { property: 'boxShadow', is: 'shadow-moulded' },
+    { property: 'color', is: 'colour-ink' },
+  ],
+} as const)