@citisen/dsh-font 0.1.0

package/scripts/verify-client.mjs

@@ -0,0 +1,410 @@
+/**
+ * Load an emitted DSH client bundle in Node, assert its envelope, and then run
+ * `apply(ctx)` against stub services to prove the presentation path works.
+ *
+ * A broken client bundle otherwise fails only in the browser, where the
+ * diagnostic is a console error inside the boot audit. This check makes the
+ * cheap-to-catch failure modes — a bundle that registers nothing, one whose
+ * factory throws, one that paints nothing, one that registers no Settings row —
+ * fail on the command line instead.
+ *
+ * Usage:
+ *   node scripts/verify-client.mjs [path/to/lib/client.js]
+ */
+
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const bundlePath = resolve(process.argv[2] ?? join(root, 'lib', 'client.js'))
+const source = readFileSync(bundlePath, 'utf8')
+
+/** The package name, which the bundle id must equal. */
+const PACKAGE_NAME = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8')).name
+
+/** Minimal React stub: enough for the row component to build a tree. */
+const react = {
+  createElement: (type, props, ...children) => ({ type, props: props ?? {}, children }),
+  useCallback: (fn) => fn,
+  useEffect: () => undefined,
+  useRef: (value) => ({ current: value }),
+  useState: (value) => [value, () => undefined],
+}
+
+/** A tiny observable store, matching the `@deepseek-ai/dsh-client-store` face. */
+const stores = []
+const storeModule = {
+  defineStore: (spec) => {
+    const state = spec.init()
+    const listeners = new Set()
+    const handle = {
+      spec,
+      state,
+      create: () =>
+        Object.fromEntries(
+          Object.entries(spec.actions).map(([name, action]) => [
+            name,
+            (...args) => {
+              action(state, ...args)
+              for (const listener of listeners) listener()
+            },
+          ]),
+        ),
+      getSnapshot: () => state,
+      subscribe: (listener) => {
+        listeners.add(listener)
+        return () => listeners.delete(listener)
+      },
+    }
+    stores.push(handle)
+    return handle
+  },
+}
+
+const stubs = {
+  react,
+  'react/jsx-runtime': { jsx: react.createElement, jsxs: react.createElement },
+  'react-dom': {},
+  'react-dom/client': {},
+  '@deepseek-ai/cordis': {},
+  '@deepseek-ai/dsh-client-store': storeModule,
+  '@deepseek-ai/dsh-client-ui-slots': {},
+  '@deepseek-ai/dsh-client-ui-primitives': new Proxy(
+    {},
+    { get: (_target, key) => (key === 'then' ? undefined : () => null) },
+  ),
+  '@deepseek-ai/dsh-client-ui-dockkit': {},
+}
+
+const registrations = []
+globalThis.window = {
+  __ModuleLoader__: {
+    load(registration) {
+      registrations.push(registration)
+    },
+  },
+}
+
+const requested = []
+const requireStub = (specifier) => {
+  requested.push(specifier)
+  if (!(specifier in stubs)) throw new Error(`unknown platform module "${specifier}"`)
+  return stubs[specifier]
+}
+
+// eslint-disable-next-line no-eval -- the bundle is a classic script by contract
+;(0, eval)(source)
+
+assert.equal(registrations.length, 1, 'the bundle must register exactly one factory')
+const [registration] = registrations
+assert.equal(registration.id, PACKAGE_NAME)
+assert.equal(typeof registration.factory, 'function')
+
+const plugin = registration.factory(requireStub)
+assert.equal(typeof plugin.apply, 'function', 'bundle must export apply()')
+assert.ok(Array.isArray(plugin.inject), 'bundle must export inject as an array')
+assert.deepEqual(plugin.inject, ['slots', 'locale', 'settingsScope'])
+assert.equal(typeof plugin.fontStyleSheet, 'function')
+assert.equal(typeof plugin.applyFonts, 'function')
+
+// The build must have substituted the template's identity placeholder, or the
+// bundle would register the placeholder instead of the real package name.
+assert.ok(
+  !source.includes('dsh:plugin-id'),
+  'the identity placeholder must be substituted at build time',
+)
+
+// ── the stylesheet builder ──────────────────────────────────────────────────
+const section = {
+  uiFontFamily: 'Inter, sans-serif',
+  codeFontFamily: '"JetBrains Mono", monospace',
+  uiFontScale: 1.25,
+  contentFontSize: 16,
+  codeFontSize: 13,
+}
+const sheet = plugin.fontStyleSheet(section)
+assert.match(sheet, /--dsh-font-ui-scale:1\.25;/)
+assert.match(sheet, /--dsh-font-code-size:13px;/)
+// The content size is an INLINE custom property on `body` (ui-layout's theme
+// presenter owns that declaration), so the sheet must not declare it — an
+// inline value would win and nothing here could override it.
+assert.ok(
+  !sheet.includes('--dsh-content-font-size:'),
+  'the sheet must not declare the inline-owned content size',
+)
+assert.match(sheet, /\.dsh-font-size-14\{font-size:calc\(14px \* var\(--dsh-font-ui-scale,1\)\) !important\}/)
+for (const step of [11, 12, 13, 14, 16, 20, 24]) {
+  assert.ok(sheet.includes(`.dsh-font-size-${String(step)}{`), `missing scale class for ${String(step)}px`)
+}
+// The scale is stamped per element, never inherited from a universal rule.
+assert.ok(
+  !sheet.includes('html body,html body *'),
+  'the scale must not be a universal rule (it would compound with the content size)',
+)
+
+// The conversation ladder must be absolute px derived from the content slider.
+assert.match(sheet, /--dsh-font-markdown-h1:700 calc\(16px \+ 7px\) \/ calc\(16px \+ 16px\)/)
+assert.match(sheet, /--dsh-font-markdown-base:var\(--dsh-font-conversation-size,14px\) \/ calc\(16px \+ 10px\)/)
+assert.match(sheet, /--dsw-font-markdown-code-block-font-size:var\(--dsh-font-code-size,12px\) !important;/)
+
+// A different content size must move the ladder, not just the base variable.
+const bigger = plugin.fontStyleSheet({ ...section, contentFontSize: 20 })
+assert.match(bigger, /--dsh-font-markdown-h1:700 calc\(20px \+ 7px\) \/ calc\(20px \+ 16px\)/)
+assert.notEqual(bigger, sheet)
+
+// ── applyFonts against a DOM stub ───────────────────────────────────────────
+const appended = []
+const styleTags = []
+const rootProperties = new Map()
+const bodyProperties = new Map()
+const makeNode = (tagName) => ({
+  tagName,
+  id: '',
+  textContent: '',
+  dataset: {},
+  className: '',
+  appendChild: (child) => appended.push(child),
+  querySelectorAll: () => [],
+  classList: { add: () => undefined, remove: () => undefined },
+  getAttribute: () => null,
+})
+globalThis.document = {
+  head: makeNode('head'),
+  body: { ...makeNode('body'), style: { setProperty: (name, value) => bodyProperties.set(name, value) } },
+  documentElement: { style: { setProperty: (name, value) => rootProperties.set(name, value) } },
+  getElementById: (id) => styleTags.find((tag) => tag.id === id) ?? null,
+  createElement: (tagName) => {
+    const node = makeNode(tagName)
+    styleTags.push(node)
+    return node
+  },
+}
+globalThis.console = console
+
+plugin.applyFonts(section)
+assert.equal(styleTags.length, 1, 'applyFonts must create one stylesheet')
+assert.equal(styleTags[0].tagName, 'style')
+assert.equal(styleTags[0].id, 'dsh-font/variables')
+assert.equal(styleTags[0].dataset.plugin, 'dsh-font')
+
+// The host half looks this element up by the same id when it repaints the
+// pre-paint row; a drift between the two halves would silently stack two
+// stylesheets with the later one winning.
+const hostSource = readFileSync(join(root, 'lib', 'index.js'), 'utf8')
+const hostStyleId = /const FONT_STYLE_ID = '([^']+)'/.exec(hostSource)?.[1]
+assert.equal(
+  hostStyleId,
+  styleTags[0].id,
+  'lib/index.js FONT_STYLE_ID must equal the client half stylesheet id',
+)
+
+assert.match(styleTags[0].textContent, /\.dsh-font-size-14\{/)
+assert.equal(rootProperties.get('--dsw-font-family'), 'Inter, sans-serif')
+assert.equal(rootProperties.get('--ds-font-family-code'), '"JetBrains Mono", monospace')
+// The content size must be written where ui-layout writes it, or the inline
+// presenter value would win over the stylesheet.
+assert.equal(bodyProperties.get('--dsh-content-font-size'), '16px')
+
+// Re-applying must rewrite the same tag, not accumulate stylesheets.
+plugin.applyFonts({ ...section, contentFontSize: 18, uiFontScale: 1 })
+assert.equal(styleTags.length, 1, 'applyFonts must reuse its own stylesheet tag')
+assert.match(styleTags[0].textContent, /--dsh-font-ui-scale:1;/)
+assert.equal(bodyProperties.get('--dsh-content-font-size'), '18px')
+
+// ── the interface-scale stamping pass ───────────────────────────────────────
+// A fake tree whose computed sizes are the shipped ones.
+const sizes = new Map()
+const fakeElement = (size, extras = {}) => {
+  const classes = new Set()
+  const element = {
+    className: 'x',
+    classList: {
+      contains: (name) => classes.has(name),
+      add: (name) => classes.add(name),
+      remove: (name) => classes.delete(name),
+    },
+    getAttribute: () => null,
+    classes,
+    ...extras,
+  }
+  sizes.set(element, `${String(size)}px`)
+  return element
+}
+const shipped14 = fakeElement(14)
+const shipped12 = fakeElement(12)
+const shipped9 = fakeElement(9)
+const shipped17 = fakeElement(17)
+const inlineStyled = fakeElement(16)
+inlineStyled.className = ''
+inlineStyled.getAttribute = (name) => (name === 'style' ? 'color:red' : null)
+
+const allElements = [shipped14, shipped12, shipped9, shipped17, inlineStyled]
+const stampedSelector = /\.dsh-font-size-(\d+)(?:,|$)/
+globalThis.document = {
+  head: makeNode('head'),
+  body: {
+    ...makeNode('body'),
+    style: { setProperty: () => undefined },
+    querySelectorAll: (selector) =>
+      selector.startsWith('.dsh-font-size-')
+        ? allElements.filter((element) => [...element.classes].some((name) => name.startsWith('dsh-font-size-')))
+        : allElements,
+  },
+  documentElement: { style: { setProperty: () => undefined } },
+  getElementById: () => null,
+  createElement: (tagName) => makeNode(tagName),
+}
+globalThis.getComputedStyle = (element) => ({ fontSize: sizes.get(element) ?? '' })
+
+plugin.applyFonts({ ...section, uiFontScale: 1.25 })
+assert.ok(shipped14.classes.has('dsh-font-size-14'), '14px must be stamped')
+assert.ok(shipped12.classes.has('dsh-font-size-12'), '12px must be stamped')
+assert.ok(inlineStyled.classes.has('dsh-font-size-16'), 'inline-styled 16px must be stamped')
+assert.equal(shipped9.classes.size, 0, 'an unlisted size must not be stamped')
+assert.equal(shipped17.classes.size, 0, 'an unlisted size must not be stamped')
+
+// A repeat pass reuses the measurement and does not duplicate stamps.
+plugin.applyFonts({ ...section, uiFontScale: 1.5 })
+assert.equal(shipped14.classes.size, 1, 'a repeat pass must not accumulate stamps')
+
+// Returning to 1 must clear every stamp.
+plugin.applyFonts({ ...section, uiFontScale: 1 })
+assert.equal(shipped14.classes.size, 0, 'scale 1 must clear the stamps')
+assert.equal(inlineStyled.classes.size, 0, 'scale 1 must clear the stamps')
+void stampedSelector
+
+// Restore a recording DOM for the remaining checks.
+rootProperties.clear()
+bodyProperties.clear()
+globalThis.document = {
+  head: makeNode('head'),
+  body: { ...makeNode('body'), style: { setProperty: (name, value) => bodyProperties.set(name, value) } },
+  documentElement: { style: { setProperty: (name, value) => rootProperties.set(name, value) } },
+  getElementById: (id) => styleTags.find((tag) => tag.id === id) ?? null,
+  createElement: (tagName) => {
+    const node = makeNode(tagName)
+    styleTags.push(node)
+    return node
+  },
+}
+
+// ── apply(ctx) end to end ───────────────────────────────────────────────────
+const themeOverrides = []
+const registeredSlots = []
+const dictionaries = []
+const locale = {
+  register: (namespace, dict) => {
+    dictionaries.push({ namespace, dict })
+    return () => undefined
+  },
+}
+
+let scopeListener
+const scope = {
+  getSnapshot: () => ({
+    status: 'ready',
+    value: section,
+    revision: 7,
+    writable: true,
+    mode: 'host',
+  }),
+  subscribe: (listener) => {
+    scopeListener = listener
+    return () => undefined
+  },
+  set: () => Promise.resolve(),
+  unset: () => Promise.resolve(),
+}
+
+const ctx = {
+  effect: (execute) => {
+    execute()
+    return { dispose: () => undefined }
+  },
+  on: () => undefined,
+  get: (name) => (name === 'theme' ? { overrideTokens: (source, tokens) => themeOverrides.push({ source, tokens }) } : undefined),
+  locale,
+  settingsScope: { bind: (spec) => (assert.equal(spec.namespace, 'ui-font'), scope) },
+  slots: {
+    inject: (name, callback) => {
+      assert.equal(name, 'settings.general.item')
+      callback()
+    },
+    register: (options, component) => {
+      registeredSlots.push({ options, component })
+      return () => undefined
+    },
+  },
+}
+
+plugin.apply(ctx)
+
+assert.equal(themeOverrides.length, 1, 'the families must be stacked onto the theme')
+assert.equal(themeOverrides[0].source, PACKAGE_NAME)
+assert.deepEqual(Object.keys(themeOverrides[0].tokens).sort(), ['--ds-font-family-code', '--dsw-font-family'])
+assert.equal(themeOverrides[0].tokens['--dsw-font-family'].light, section.uiFontFamily)
+assert.equal(themeOverrides[0].tokens['--dsw-font-family'].dark, section.uiFontFamily)
+
+assert.equal(dictionaries.length, 1)
+assert.deepEqual(Object.keys(dictionaries[0].dict.zh).sort(), Object.keys(dictionaries[0].dict.en).sort())
+
+assert.equal(registeredSlots.length, 1)
+const [{ options, component }] = registeredSlots
+assert.equal(options.id, 'font')
+assert.equal(options.name, 'settings.general.item')
+assert.equal(options.locale, 'settings.font')
+assert.ok(stores.length >= 1, 'the row must register a store')
+assert.equal(typeof component, 'function')
+
+// The row's inject face must expose the two write paths.
+const actions = options.inject(options.store.create())
+assert.equal(typeof actions.setField, 'function')
+assert.equal(typeof actions.reset, 'function')
+
+// The component must render a tree containing the localized labels.
+const rendered = component({
+  t: (key) => key,
+  useStore: (selector) => selector(options.store.getSnapshot()),
+  ...actions,
+})
+const labels = []
+const collect = (node) => {
+  if (node === null || node === undefined) return
+  if (typeof node === 'string' || typeof node === 'number') {
+    labels.push(String(node))
+    return
+  }
+  if (typeof node !== 'object') return
+  const children = Array.isArray(node.children) ? node.children : [node.children]
+  for (const child of children) collect(child)
+  // `Field` and `SliderControl` carry their copy in props, because the stubs
+  // above do not render function components.
+  collect(node.props?.children)
+  for (const key of ['label', 'value', 'hint', 'ariaLabel', 'placeholder']) {
+    collect(node.props?.[key])
+  }
+}
+collect(rendered)
+for (const key of [
+  'font.title',
+  'font.uiFamily',
+  'font.codeFamily',
+  'font.uiScale',
+  'font.contentSize',
+  'font.codeSize',
+  'font.reset',
+]) {
+  assert.ok(labels.includes(key), `rendered row is missing ${key}`)
+}
+
+// A pushed settings change must repaint.
+rootProperties.clear()
+scopeListener()
+assert.equal(rootProperties.get('--dsw-font-family'), section.uiFontFamily)
+
+delete globalThis.document
+
+console.log('verify-client: OK — envelope, stylesheet, theme stacking, and settings row all verified')
+console.log(`verify-client: factory required ${requested.join(', ')}`)

package/scripts/verify-host.mjs

@@ -0,0 +1,187 @@
+/**
+ * Verify the host half without a running DSH: import `lib/index.js`, exercise
+ * the pure builders against the real `@deepseek-ai/schemastery`, execute the
+ * emitted pre-paint bootstrap against a DOM stub, and drive `apply(ctx)` with a
+ * stub context to prove the namespace registers and the index-injection row
+ * reaches the webserver table.
+ *
+ * Usage:
+ *   node scripts/verify-host.mjs
+ */
+
+import assert from 'node:assert/strict'
+import { existsSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+
+/**
+ * Import `lib/index.js` through the installed profile when one exists.
+ *
+ * The host half imports `@deepseek-ai/schemastery`, which dsh supplies to a
+ * plugin from the installation's module fallback rather than from the plugin's
+ * own tree. Importing through the profile link reproduces that resolution, so
+ * this check also proves the plugin's runtime dependencies actually resolve at
+ * the place dsh will load it from. Falling back to the direct path keeps the
+ * check usable in a bare checkout.
+ */
+async function importHost() {
+  const dshHome = process.env.DSH_HOME
+  const profile = process.env.DSH_PROFILE ?? 'web'
+  if (dshHome !== undefined) {
+    const anchor = join(dshHome, 'profiles', profile, 'package.json')
+    if (existsSync(anchor)) {
+      try {
+        // Resolve the bare specifier: `exports` maps "." to lib/index.js, and a
+        // direct `dsh-font/lib/index.js` path is deliberately not exported.
+        const resolved = createRequire(anchor).resolve('dsh-font')
+        return { host: await import(pathToFileURL(resolved).href), via: resolved }
+      } catch {
+        /* not installed in that profile; fall through to the direct import */
+      }
+    }
+  }
+  const direct = join(root, 'lib', 'index.js')
+  return { host: await import(pathToFileURL(direct).href), via: direct }
+}
+
+const { host, via } = await importHost()
+console.log(`verify-host: loaded ${via}`)
+
+const {
+  FONT_SETTINGS_NAMESPACE,
+  FontSettingsSchema,
+  DEFAULT_UI_FONT_FAMILY,
+  DEFAULT_CODE_FONT_FAMILY,
+  FONT_STYLE_ID,
+  fontStyleSheet,
+  fontBootstrapScript,
+  fontInjection,
+  apply,
+} = host
+
+assert.equal(FONT_SETTINGS_NAMESPACE, 'ui-font')
+
+// The schema resolves a complete default section — what an absent settings
+// document must produce for the pre-paint bootstrap to be a no-op.
+const defaults = FontSettingsSchema({})
+assert.equal(defaults.uiFontFamily, DEFAULT_UI_FONT_FAMILY)
+assert.equal(defaults.codeFontFamily, DEFAULT_CODE_FONT_FAMILY)
+assert.equal(defaults.uiFontScale, 1)
+assert.equal(defaults.contentFontSize, 14)
+assert.equal(defaults.codeFontSize, 12)
+
+// Out-of-range values must be rejected at the wire boundary.
+assert.throws(() => FontSettingsSchema({ contentFontSize: 99 }))
+assert.throws(() => FontSettingsSchema({ uiFontScale: 0.1 }))
+
+// The pre-paint sheet carries the scale and both size axes, one rule per
+// hard-coded UI text step.
+const sheet = fontStyleSheet(defaults)
+assert.match(sheet, /--dsh-font-ui-scale:1;/)
+assert.match(sheet, /--dsh-font-content-size:14px/)
+assert.match(sheet, /--dsh-font-code-size:12px/)
+assert.match(sheet, /font-size:calc\(14px \* var\(--dsh-font-ui-scale,1\)\) !important/)
+for (const step of [11, 12, 13, 14, 16, 20, 24]) {
+  assert.ok(sheet.includes(`calc(${String(step)}px * `), `missing scale rule for ${String(step)}px`)
+}
+
+const script = fontBootstrapScript(defaults)
+assert.ok(script.includes(JSON.stringify(FONT_STYLE_ID)), 'bootstrap must key on the stylesheet id')
+assert.ok(!script.includes('</script'), 'bootstrap must not close its own script element')
+
+// Execute the bootstrap against a DOM stub and read back what it wrote.
+const appended = []
+const created = []
+const element = () => ({
+  id: '',
+  textContent: '',
+  dataset: {},
+  appendChild: (child) => appended.push(child),
+})
+const rootStyle = new Map()
+globalThis.document = {
+  head: element(),
+  documentElement: { style: { setProperty: (name, value) => rootStyle.set(name, value) } },
+  getElementById: () => null,
+  createElement: (tag) => {
+    const node = { ...element(), tagName: tag }
+    created.push(node)
+    return node
+  },
+}
+globalThis.console = console
+// eslint-disable-next-line no-eval -- the emitted pre-paint script is a classic script by contract
+;(0, eval)(script)
+
+assert.equal(created.length, 1)
+assert.equal(created[0].tagName, 'style')
+assert.equal(created[0].id, FONT_STYLE_ID)
+assert.match(created[0].textContent, /--dsh-font-ui-scale:1;/)
+assert.equal(appended.length, 1)
+assert.equal(rootStyle.get('--dsw-font-family'), DEFAULT_UI_FONT_FAMILY)
+assert.equal(rootStyle.get('--ds-font-family-code'), DEFAULT_CODE_FONT_FAMILY)
+delete globalThis.document
+
+// A non-default section must flow through both the sheet and the script.
+const custom = { ...defaults, uiFontScale: 1.25, contentFontSize: 16, codeFontSize: 13 }
+assert.match(fontStyleSheet(custom), /--dsh-font-content-size:16px/)
+assert.match(fontStyleSheet(custom), /font-size:calc\(16px \* var\(--dsh-font-ui-scale,1\)\)/)
+
+const injection = fontInjection(defaults)
+assert.equal(injection.kind, 'script')
+assert.equal(injection.placement, 'head')
+
+// Drive apply(ctx) with a stub that records the namespace and the injection.
+const registered = []
+const listeners = new Map()
+let injectedSettings
+const ctx = {
+  inject(deps, callback) {
+    assert.deepEqual(deps, ['settings'])
+    injectedSettings = {
+      settings: {
+        register(namespace, schema) {
+          registered.push({ namespace, schema })
+        },
+      },
+    }
+    callback(injectedSettings)
+  },
+  on(event, listener) {
+    listeners.set(event, listener)
+  },
+  get(name) {
+    return name === 'settings' ? injectedSettings.settings : undefined
+  },
+}
+
+apply(ctx)
+
+assert.equal(registered.length, 1)
+assert.equal(registered[0].namespace, 'ui-font')
+assert.ok(registered[0].schema !== undefined)
+
+const table = []
+listeners.get('webserver/index-inject')(table)
+assert.equal(table.length, 1)
+assert.equal(table[0].kind, 'script')
+
+// With no provider at all, apply() must still answer the injection table with
+// the schema defaults rather than throwing.
+const bareListeners = new Map()
+apply({
+  inject: () => undefined,
+  on: (event, listener) => bareListeners.set(event, listener),
+  get: () => undefined,
+})
+const bareTable = []
+bareListeners.get('webserver/index-inject')(bareTable)
+assert.equal(bareTable.length, 1)
+assert.match(bareTable[0].text, /--dsh-font-ui-scale:1;/)
+
+console.log('verify-host: OK — namespace registered, pre-paint script executed, injection row emitted')
+console.log(`verify-host: stylesheet ${String(sheet.length)} chars, script ${String(script.length)} chars`)