@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0

package/DS1/0-face/cut-fade.ts

@@ -0,0 +1,312 @@
+/**
+ * Cut words fade, never an ellipsis. Wherever Design system 1 cuts words that do
+ * not fit (a row's name, a tag, a menu entry, a calendar's title), they fade out
+ * over their last square (`var(--ds-unit)`), a mask on the words, so they fade
+ * into whatever is behind them. Words that fit stay crisp: the fade is drawn
+ * only while an element is marked `data-cut="end"`, and this module is what
+ * measures and marks it.
+ *
+ * Every stylesheet writes the fade the same way: the element clips
+ * (`text-overflow: clip`), and only under `[data-cut="end"]` takes
+ * `mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent)`,
+ * the gradient running to the left in a right-to-left page.
+ *
+ * - `watchCuts()` is the watcher a component owns: it marks the elements it
+ *   watches while `scrollWidth > clientWidth + 1`, measures again when they
+ *   resize, when `measure()` is called (after a render, since words can change
+ *   without the box resizing), once the page's fonts have loaded and, with
+ *   `text: true`, when the words inside them change. `disconnect()` lets go.
+ * - Every watcher measures in the next frame, together with every other one:
+ *   all widths are read, then all marks written, so a page building a few
+ *   hundred words lays itself out once for them rather than once each. Read
+ *   one by one, after each element connected or updated, the words of Ezo's
+ *   landing page laid it out again two hundred times, over half a second.
+ *   Elements that resize are measured the same way, in one pass for all.
+ * - `CutFades` is the same watcher as a Lit reactive controller: it starts when
+ *   its element connects, measures after every update and stops when it
+ *   disconnects.
+ * - `startCutFades()` is for a page without Lit: it marks DS1's native classes
+ *   (`.ds-row__name`, `.ds-sidebar__label`, `.ds-menu__item`, …) in the page,
+ *   and keeps marking them as the page changes. It returns a function that
+ *   stops it.
+ */
+
+/** The attribute a cut element carries: `data-cut="end"`. */
+export const CUT_ATTRIBUTE = "data-cut";
+
+/**
+ * The native classes DS1's stylesheets fade when they are marked cut, for
+ * `startCutFades()` on a page without Lit.
+ */
+export const CUT_FADE_SELECTOR = [
+  ".ds-row__name",
+  ".ds-sidebar__label",
+  ".ds-menu__item",
+  ".ds-badge__label",
+  ".ds-notice__title",
+  ".ds-notice__text",
+  ".ds-progress__label",
+  ".ds-stat__figure",
+  ".ds-document__toc-list a",
+  ".ds-footer__links a",
+  ".item-text",
+].join(", ");
+
+/** Whether an element's words are wider than its box. */
+export function isCut(element: Element): boolean {
+  return element.scrollWidth > element.clientWidth + 1;
+}
+
+/** Marks an element `data-cut="end"` while its words do not fit, and takes the mark off when they do. Returns whether it is cut. */
+export function markCut(element: Element): boolean {
+  const cut = isCut(element);
+  const mark = element.getAttribute(CUT_ATTRIBUTE);
+  if (cut) {
+    if (mark !== "end") element.setAttribute(CUT_ATTRIBUTE, "end");
+  } else if (mark === "end") element.removeAttribute(CUT_ATTRIBUTE);
+  return cut;
+}
+
+/** Elements to watch: one, several, or a function that finds them again at each measure. */
+export type CutSource = Element | Iterable<Element> | (() => Iterable<Element>);
+
+export type CutWatchOptions = {
+  /** Also measure again when the words inside a watched element change (a MutationObserver). */
+  text?: boolean;
+};
+
+export type CutWatcher = {
+  /** Watches these elements and measures them. A function is asked again at each measure, so elements a render adds are taken in. */
+  watch(source: CutSource): void;
+  /** Watches what matches `selector` inside `root`, found again at each measure. */
+  select(root: ParentNode, selector: string): void;
+  /** Measures every watched element again: after a render, or when words change. */
+  measure(): void;
+  /** Stops watching and lets every element go. Marks stay as they are. */
+  disconnect(): void;
+};
+
+type Watched = {
+  /** Finds the elements again and observes the new ones; returns them. */
+  refresh(): Set<Element>;
+  stopped: boolean;
+};
+
+/** Reads every element's widths first, then writes every mark, so the page is laid out once for all of them. */
+function markAll(elements: Iterable<Element>) {
+  const cuts: [Element, boolean][] = [];
+  for (const element of elements) if (element.isConnected) cuts.push([element, isCut(element)]);
+  hookFonts();
+  for (const [element, cut] of cuts) {
+    const mark = element.getAttribute(CUT_ATTRIBUTE);
+    if (cut) {
+      if (mark !== "end") element.setAttribute(CUT_ATTRIBUTE, "end");
+    } else if (mark === "end") element.removeAttribute(CUT_ATTRIBUTE);
+  }
+}
+
+const live = new Set<Watched>();
+const queued = new Set<Watched>();
+let frame = false;
+
+const nextFrame = (run: () => void) => {
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+  else setTimeout(run, 0);
+};
+
+function flush() {
+  frame = false;
+  const watchers = [...queued];
+  queued.clear();
+  const elements = new Set<Element>();
+  for (const watcher of watchers) {
+    if (watcher.stopped) continue;
+    for (const element of watcher.refresh()) elements.add(element);
+  }
+  markAll(elements);
+}
+
+/** Measures this watcher in the next frame, with every other watcher waiting for it. */
+function schedule(watcher: Watched) {
+  if (watcher.stopped) return;
+  queued.add(watcher);
+  if (frame) return;
+  frame = true;
+  nextFrame(flush);
+}
+
+// One observer for every watched element: the sizes of a frame arrive in one
+// call, read in one pass. An element two watchers hold (a row's name, which the
+// row and its ds-text both watch) is let go when the last one does.
+let sizes: ResizeObserver | undefined;
+const holders = new Map<Element, number>();
+function observe(element: Element) {
+  if (typeof ResizeObserver === "undefined") return;
+  sizes ??= new ResizeObserver(entries => markAll(entries.map(entry => entry.target)));
+  const held = holders.get(element) ?? 0;
+  if (!held) sizes.observe(element);
+  holders.set(element, held + 1);
+}
+function unobserve(element: Element) {
+  const held = holders.get(element);
+  if (!held) return;
+  if (held > 1) { holders.set(element, held - 1); return; }
+  holders.delete(element);
+  sizes?.unobserve(element);
+}
+
+// Words drawn in a fallback face are narrower or wider once the page's fonts
+// arrive. Asking for `document.fonts.ready` lays out a page that has changed,
+// so it is asked once, while a measure has just laid the page out anyway.
+let fontsHooked = false;
+function hookFonts() {
+  if (fontsHooked || typeof document === "undefined") return;
+  fontsHooked = true;
+  const again = () => { for (const watcher of live) schedule(watcher); };
+  const fonts = document.fonts;
+  fonts?.ready?.then(again, () => {});
+  fonts?.addEventListener?.("loadingdone", again);
+}
+
+/** A watcher that marks the elements it watches `data-cut="end"` while their words do not fit. */
+export function watchCuts(options: CutWatchOptions = {}): CutWatcher {
+  const sources: CutSource[] = [];
+  let watched = new Set<Element>();
+  const words = options.text && typeof MutationObserver !== "undefined"
+    ? new MutationObserver(() => schedule(self))
+    : undefined;
+
+  const collect = () => {
+    const found = new Set<Element>();
+    for (const source of sources) {
+      const elements = typeof source === "function" ? source() : source instanceof Element ? [source] : source;
+      for (const element of elements) found.add(element);
+    }
+    return found;
+  };
+
+  const self: Watched = {
+    stopped: false,
+    refresh() {
+      const next = collect();
+      let changed = next.size !== watched.size;
+      for (const element of watched) {
+        if (!next.has(element)) { unobserve(element); changed = true; }
+      }
+      for (const element of next) {
+        if (!watched.has(element)) { observe(element); changed = true; }
+      }
+      // A MutationObserver cannot let one element go, so it starts again when the set changes.
+      if (words && changed) {
+        words.disconnect();
+        for (const element of next) words.observe(element, { childList: true, characterData: true, subtree: true });
+      }
+      watched = next;
+      return watched;
+    },
+  };
+  live.add(self);
+
+  return {
+    watch(source) { sources.push(source); schedule(self); },
+    select(root, selector) { sources.push(() => root.querySelectorAll(selector)); schedule(self); },
+    measure() { schedule(self); },
+    disconnect() {
+      self.stopped = true;
+      live.delete(self);
+      queued.delete(self);
+      for (const element of watched) unobserve(element);
+      words?.disconnect();
+      watched = new Set();
+      sources.length = 0;
+    },
+  };
+}
+
+
+/**
+ * The part of a Lit element `CutFades` uses, so this module needs nothing from
+ * Lit. The render root is read as a node to search; it is typed loosely so an
+ * element type-checks in every product, whichever DOM library it compiles with.
+ */
+type ControllerHost = Element & {
+  addController(controller: { hostConnected?(): void; hostUpdated?(): void; hostDisconnected?(): void }): void;
+  readonly renderRoot?: unknown;
+};
+
+export type CutFadeOptions = {
+  /** What to measure in the element's render root (its shadow root), found again after every update. */
+  selector?: string;
+  /** Other elements to measure, asked again after every update: the host itself, its slotted children. */
+  targets?: () => Iterable<Element>;
+  /** Also measure again when the element's own children or words change (the words slotted into it). */
+  text?: boolean;
+};
+
+/**
+ * The cut-words watcher as a Lit reactive controller:
+ * `protected readonly cuts = new CutFades(this, { selector: ".label" })`. It watches from
+ * when the element connects to when it disconnects, and measures after every
+ * update; call `measure()` when words change outside an update.
+ */
+export class CutFades {
+  private watcher: CutWatcher | undefined;
+  private words: MutationObserver | undefined;
+  private readonly host: ControllerHost;
+  private readonly options: CutFadeOptions;
+
+  constructor(host: ControllerHost, options: CutFadeOptions) {
+    this.host = host;
+    this.options = options;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    this.hostDisconnected();
+    const watcher = watchCuts();
+    const { selector, targets, text } = this.options;
+    if (selector) watcher.watch(() => ((this.host.renderRoot as ParentNode | undefined) ?? this.host).querySelectorAll(selector));
+    if (targets) watcher.watch(targets);
+    this.watcher = watcher;
+    // Words slotted into the element can change without an update or a resize.
+    if (text && typeof MutationObserver !== "undefined") {
+      this.words = new MutationObserver(() => this.measure());
+      this.words.observe(this.host, { childList: true, characterData: true, subtree: true });
+    }
+  }
+
+  hostUpdated() { this.measure(); }
+
+  hostDisconnected() {
+    this.words?.disconnect();
+    this.words = undefined;
+    this.watcher?.disconnect();
+    this.watcher = undefined;
+  }
+
+  /** Measures again, as after an update. */
+  measure() { this.watcher?.measure(); }
+}
+
+/**
+ * Marks DS1's native classes cut on a page without Lit, so their words fade
+ * where they are cut, and keeps marking them as the page changes. Returns a
+ * function that stops it.
+ *
+ * @example
+ * // A module script on the page, beside one.css and controls.css (Sync 1 `root` `"modules": ["cut-fade"]`):
+ * startCutFades();
+ */
+export function startCutFades(root: ParentNode = document, selector: string = CUT_FADE_SELECTOR): () => void {
+  const watcher = watchCuts();
+  watcher.select(root, selector);
+  // The page is marked as it starts, in one pass; its changes are measured in the frame after them.
+  markAll(root.querySelectorAll(selector));
+  const changes = typeof MutationObserver === "undefined" ? undefined : new MutationObserver(() => watcher.measure());
+  const node = root instanceof Document ? root.documentElement : (root as Node);
+  changes?.observe(node, { childList: true, characterData: true, subtree: true });
+  return () => {
+    changes?.disconnect();
+    watcher.disconnect();
+  };
+}

package/DS1/0-face/define.ts

@@ -1,5 +1,33 @@
+type StyledElement = HTMLElement & {
+  createRenderRoot?: () => HTMLElement | ShadowRoot;
+  renderOptions?: { renderBefore?: ChildNode | null };
+};
+type StyledConstructor = CustomElementConstructor & {
+  elementStyles?: Array<{ cssText?: string; cssRules?: CSSRuleList }>;
+  shadowRootOptions?: ShadowRootInit;
+};
+
 /** Register a shared element once; a fresh page picks up changes during HMR. */
 export function define(name: string, element: CustomElementConstructor): void {
-  if (typeof customElements === "undefined") return;
-  if (!customElements.get(name)) customElements.define(name, element);
+  if (typeof customElements === 'undefined' || customElements.get(name)) return;
+  const type = element as StyledConstructor;
+  const prototype = element.prototype as StyledElement;
+  const original = prototype.createRenderRoot;
+  if (original) {
+    const definingDocument = document;
+    prototype.createRenderRoot = function (this: StyledElement) {
+      if (this.ownerDocument === definingDocument || !type.elementStyles?.length) return original.call(this);
+      // Constructed sheets cannot cross documents. The exact finalized component
+      // styles can, as ordinary style nodes in the owning document's shadow root.
+      const root = this.shadowRoot ?? this.attachShadow(type.shadowRootOptions ?? { mode: 'open' });
+      for (const sheet of type.elementStyles) {
+        const style = this.ownerDocument.createElement('style');
+        style.textContent = sheet.cssText ?? Array.from(sheet.cssRules ?? [], rule => rule.cssText).join('\n');
+        root.append(style);
+      }
+      if (this.renderOptions) this.renderOptions.renderBefore ??= root.firstChild;
+      return root;
+    };
+  }
+  customElements.define(name, element);
 }

package/DS1/0-face/face-correction.ts

@@ -0,0 +1,96 @@
+/**
+ * A face Design system 1 did not draw, set on the sixteen: its `@font-face` corrected once so that at 14px on a
+ * 16px line its capitals are 10px tall and its baseline stands 3px above the square's foot, as GT America's do
+ * (https://designsystem1.com/1-root/constraints/#a-face-you-add). Plain TypeScript with no imports, for the
+ * browser and for a build script alike.
+ *
+ * A face's metrics are fractions of its em: the ascent and descent the browser sets a line with and the height
+ * of its capitals (`readFaceMetrics` takes them from a TrueType or OpenType file). `google-face-metrics.json`
+ * beside this module holds them for the Google faces 0001's products offer; `scripts/face-metrics.mjs` measures
+ * more. Correct the face, never its words: no padding, `top` or transform in a component.
+ */
+
+/** A face's vertical metrics, each over its em. */
+export interface FaceMetrics {
+  ascent: number;
+  descent: number;
+  capHeight: number;
+}
+
+/** GT America's: capitals 0.71 of the em, and its ascent less its descent, which places the baseline in a line. */
+export const SIXTEEN_FACE = { capHeight: 0.71, baseline: 0.742 } as const;
+
+/** The four `@font-face` descriptors that put a face on the sixteen, as CSS values. */
+export interface FaceDescriptors {
+  sizeAdjust: string;
+  ascentOverride: string;
+  descentOverride: string;
+  lineGapOverride: string;
+}
+
+/**
+ * The descriptors for a face: `size-adjust` makes its capitals 0.71 of the em, and the overrides make its ascent
+ * less its descent 0.742 while it keeps its own height of ascent and descent. `size-adjust` scales the overrides
+ * too, so they are given before it.
+ */
+export function faceDescriptors({ ascent, descent, capHeight }: FaceMetrics): FaceDescriptors {
+  if (!(capHeight > 0) || !(ascent + descent > 0)) throw new Error('A face needs a cap height and a line height');
+  const size = SIXTEEN_FACE.capHeight / capHeight;
+  const height = Math.max((ascent + descent) * size, SIXTEEN_FACE.baseline);
+  const percent = (value: number) => `${+(value * 100).toFixed(2)}%`;
+  return {
+    sizeAdjust: percent(size),
+    ascentOverride: percent((height + SIXTEEN_FACE.baseline) / 2 / size),
+    descentOverride: percent((height - SIXTEEN_FACE.baseline) / 2 / size),
+    lineGapOverride: '0%',
+  };
+}
+
+/** The descriptors as declarations for an `@font-face` rule. */
+export function faceCorrection(metrics: FaceMetrics): string {
+  const { sizeAdjust, ascentOverride, descentOverride, lineGapOverride } = faceDescriptors(metrics);
+  return `size-adjust:${sizeAdjust};ascent-override:${ascentOverride};descent-override:${descentOverride};line-gap-override:${lineGapOverride}`;
+}
+
+/**
+ * A stylesheet of `@font-face` rules (Google's css2 answer, say) with every face corrected in its own rule,
+ * without comments or spaces. A face with no metrics stops it: an uncorrected face would stand off the sixteen.
+ */
+export function correctFaces(css: string, metrics: Readonly<Record<string, FaceMetrics>>): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s*([{};:,])\s*/g, '$1').trim().replace(/@font-face{([^}]*)}/g, (_, body: string) => {
+    const family = body.match(/font-family:(['"]?)([^;'"]+)\1(?:;|$)/)?.[2];
+    if (!family || !Object.hasOwn(metrics, family)) throw new Error(`No metrics for the face ${family ?? '(unnamed)'}`);
+    return `@font-face{${body}${body.endsWith(';') ? '' : ';'}${faceCorrection(metrics[family]!)}}`;
+  });
+}
+
+/** Google's css2 stylesheet at `href`, read and corrected. css2 answers with woff2 to the browser asking. */
+export async function correctedGoogleFonts(href: string, metrics: Readonly<Record<string, FaceMetrics>>, init?: RequestInit): Promise<string> {
+  const response = await fetch(href, init);
+  if (!response.ok) throw new Error(`Google Fonts answered ${response.status} for ${href}`);
+  return correctFaces(await response.text(), metrics);
+}
+
+/**
+ * The metrics a browser sets a line of the face with, from its TrueType or OpenType file (not woff2): `hhea`'s
+ * ascent and descent, or `OS/2`'s typographic ones when the face asks for them (USE_TYPO_METRICS), and `OS/2`'s
+ * cap height, each over `head`'s units per em, to four places.
+ */
+export function readFaceMetrics(file: Uint8Array): FaceMetrics {
+  const view = new DataView(file.buffer, file.byteOffset, file.byteLength);
+  const tables = new Map<string, number>();
+  for (let i = 0, count = view.getUint16(4); i < count; i++) {
+    const at = 12 + i * 16;
+    tables.set(String.fromCharCode(...file.subarray(at, at + 4)), view.getUint32(at + 8));
+  }
+  const head = tables.get('head'), hhea = tables.get('hhea'), os2 = tables.get('OS/2');
+  if (head === undefined || hhea === undefined || os2 === undefined) throw new Error('Not a TrueType or OpenType face');
+  const em = view.getUint16(head + 18);
+  const typo = (view.getUint16(os2 + 62) & 0x80) !== 0;
+  const ascent = typo ? view.getInt16(os2 + 68) : view.getInt16(hhea + 4);
+  const descent = -(typo ? view.getInt16(os2 + 70) : view.getInt16(hhea + 6));
+  const capHeight = view.getUint16(os2) >= 2 ? view.getInt16(os2 + 88) : 0;
+  if (!capHeight) throw new Error('The face has no cap height in OS/2');
+  const fraction = (value: number) => Math.round((value / em) * 10000) / 10000;
+  return { ascent: fraction(ascent), descent: fraction(descent), capHeight: fraction(capHeight) };
+}

package/DS1/0-face/failures.ts

@@ -0,0 +1,32 @@
+/** A real operation failure, separate from validation, warnings and message colour.
+ * Applications subscribe to `ds-failure`; this module never sends network requests.
+ * Use an authored, stable code and summary, never user content or a server response.
+ */
+export interface Failure {
+  code: string;
+  message: string;
+  /** Original caught error; only its stack frames enter the diagnostic. */
+  error?: unknown;
+  /** Captured at reporting time so startup handoff keeps the original call site. */
+  stack?: string;
+}
+export const FAILURE_EVENT = "ds-failure";
+/** A bounded handoff for failures shown before the application reporter starts. */
+const PENDING = Symbol.for("design-system-1.pending-failures");
+
+/** Report a failed operation. Safe during server rendering; no DOM text is read. */
+export function reportFailure(failure: Failure): void {
+  if (typeof window === "undefined" || typeof failure?.code !== "string" || typeof failure.message !== "string" || !/^[a-z][a-z0-9_.-]{0,79}$/.test(failure.code) || !failure.message.trim()) return;
+  const source = failure.error instanceof Error ? failure.error : new Error();
+  const stack = (failure.stack ?? source.stack ?? "").split("\n")
+    .filter(line => /^\s*at\s/.test(line) || /@.*:\d+/.test(line))
+    .slice(0, 8).join("\n").trim().slice(0, 500);
+  const detail = { code: failure.code, message: failure.message.trim().slice(0, 200), ...(stack ? { stack } : {}) };
+  // A reporter acknowledges by preventing the default: queueing for later.
+  if (window.dispatchEvent(new CustomEvent<Failure>(FAILURE_EVENT, { detail, cancelable: true }))) {
+    const scope = globalThis as unknown as Record<symbol, Failure[] | undefined>;
+    const pending = scope[PENDING] ??= [];
+    pending.push(detail);
+    if (pending.length > 20) pending.shift();
+  }
+}

package/DS1/0-face/feedback-overlays.ts

@@ -3,7 +3,7 @@
  * `confirm()` and `prompt()`, for pages without Lit or any other framework.
  *
  * Each is drawn on the native `dialog.ds-overlay` frame from `1-root/controls.css`
- * (which the page loads) with its native buttons, `.ds-button--primary`,
+ * (which the page loads), as a sheet from the screen's foot on a phone, with its native buttons, `.ds-button--primary`,
  * `--secondary` and `--danger`, and opened with `showModal()`, so the browser
  * keeps the rest of the page inert behind it. Their words default to the
  * shared words (OK, Cancel) in the page's language where the page loads the
@@ -99,8 +99,10 @@ function show(spec: Spec): Promise<boolean | string | null> {
   return new Promise(resolve => {
     const id = `ds-feedback-${++count}`;
     const opener = focused();
+    // A sheet from the foot of a phone's screen, never a modal there (Joachim, 20 October 2026).
+    const phone = typeof matchMedia === "function" && matchMedia("(max-width: 768px)").matches;
     const dialog = element("dialog", {
-      class: "ds-overlay",
+      class: phone ? "ds-overlay ds-overlay--sheet" : "ds-overlay",
       role: spec.kind === "prompt" ? "dialog" : "alertdialog",
       "aria-labelledby": `${id}-title`,
       "data-ds-feedback": spec.kind,
@@ -127,7 +129,7 @@ function show(spec: Spec): Promise<boolean | string | null> {
 
     const footer = element("div", { "data-ds-overlay": "footer" });
     const cancel = spec.cancel === undefined ? undefined : element("button", { type: "button", class: "ds-button ds-button--secondary", value: "cancel" }, spec.cancel);
-    const confirm = element("button", { type: "button", class: spec.danger ? "ds-button ds-button--secondary ds-button--danger" : "ds-button ds-button--primary", value: "confirm" }, spec.confirm);
+    const confirm = element("button", { type: "button", class: spec.danger ? "ds-button ds-button--danger" : "ds-button ds-button--primary", value: "confirm" }, spec.confirm);
     if (cancel) footer.appendChild(cancel);
     footer.appendChild(confirm);
     dialog.appendChild(footer);

package/DS1/0-face/feedback.ts

@@ -38,3 +38,6 @@ export { copyText } from "./copy-text";
 export type { CopyTextOptions } from "./copy-text";
 export { setFeedbackWords } from "./feedback-words";
 export type { FeedbackWord, FeedbackWords } from "./feedback-words";
+
+export { reportFailure, FAILURE_EVENT } from "./failures";
+export type { Failure } from "./failures";

package/DS1/0-face/focus-vision.swift

@@ -0,0 +1,31 @@
+// Image focus with Apple's Vision framework: the faces in each picture and the part a person looks at
+// first (attention-based saliency), as JSON for `focusFromRegions()` in focus.ts. macOS only; a build
+// script runs it where it can and falls back to `focusOf()` elsewhere.
+//
+//   swift focus-vision.swift photo.jpg other.jpg …
+//   {"photo.jpg":{"faces":[{"x":0.41,"y":0.12,"w":0.18,"h":0.14}],"salient":[…]}, …}
+//
+// Boxes are fractions of the picture, from its top left corner, as the web measures them.
+import Foundation
+import Vision
+
+func box(_ rect: CGRect) -> [String: Double] {
+  ["x": rect.minX, "y": 1 - rect.maxY, "w": rect.width, "h": rect.height]
+}
+
+var result: [String: [String: [[String: Double]]]] = [:]
+for path in CommandLine.arguments.dropFirst() {
+  let url = URL(fileURLWithPath: path)
+  let faces = VNDetectFaceRectanglesRequest()
+  let salient = VNGenerateAttentionBasedSaliencyImageRequest()
+  let handler = VNImageRequestHandler(url: url, options: [:])
+  do { try handler.perform([faces, salient]) } catch {
+    FileHandle.standardError.write("\(path): \(error.localizedDescription)\n".data(using: .utf8)!)
+    continue
+  }
+  let found = (faces.results ?? []).filter { $0.confidence > 0.6 }.map { box($0.boundingBox) }
+  let objects = (salient.results?.first?.salientObjects ?? []).map { box($0.boundingBox) }
+  result[url.lastPathComponent] = ["faces": found, "salient": objects]
+}
+let data = try JSONSerialization.data(withJSONObject: result, options: [.sortedKeys])
+FileHandle.standardOutput.write(data)