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

package/dist/0-face/focus.js

@@ -0,0 +1,196 @@
+/**
+ * Image focus: where a photo's subject is, so a picture cut to its box
+ * (`object-fit: cover`) keeps it in view instead of its middle. A person's
+ * face first, then whatever in the picture holds the most detail. Plain
+ * TypeScript with no imports, for the browser and for a build script alike.
+ *
+ * The focus is a point of the picture, across and down from 0 to 1, and it is
+ * written as the picture's `object-position` (`objectPosition()`), so a
+ * cover crop of any shape keeps that point in view. Work it out once, where
+ * the page is built, and write it into the markup, so the first paint is
+ * already cut right. On a Mac, `focus-vision.swift` finds the faces and the
+ * salient part with Apple's Vision framework, and `focusFromRegions()` turns
+ * them into the focus; elsewhere, or where it finds nothing, `focusOf()`
+ * reads the pixels:
+ *
+ * ```ts
+ * // swift 0-face/focus-vision.swift *.jpg > regions.json
+ * import { focusFromRegions, focusOf, objectPosition } from "./0-face/focus.ts";
+ * const focus = focusFromRegions(regions[name]) ?? focusOf(data, info.width, info.height, info.channels);
+ * // <img src="…" style="object-position: 50% 18%">
+ * ```
+ *
+ * A page with no build step marks a picture `data-ds-focus="auto"` and calls
+ * `startFocus()`: once the picture has loaded, its focus is found and kept in
+ * the browser, so it is right from the first paint on the next visit. A
+ * picture whose focus a person chose says so, `data-ds-focus="40% 20%"`, and
+ * is never measured. A picture from another host without CORS cannot be read
+ * and keeps its middle.
+ */
+export const CENTRE = { x: 0.5, y: 0.5 };
+/** The width a picture is measured at; enough to find a face, and cheap. */
+export const FOCUS_SAMPLE = 64;
+/** Whether a pixel's colour is skin, in YCbCr, for any skin tone. */
+function isSkin(r, g, b) {
+    const y = 0.299 * r + 0.587 * g + 0.114 * b;
+    const cb = 128 - 0.168736 * r - 0.331264 * g + 0.5 * b;
+    const cr = 128 + 0.5 * r - 0.418688 * g - 0.081312 * b;
+    return y > 40 && cb >= 77 && cb <= 127 && cr >= 137 && cr <= 173 && r > g && r > b;
+}
+const clamp = (value) => Math.min(1, Math.max(0, value));
+/**
+ * The focus of a picture from its pixels (RGB or RGBA, row by row), measured
+ * small (about `FOCUS_SAMPLE` across). Skin that gathers into a face wins:
+ * the highest band of rows dense with skin, since a face stands above hands
+ * and arms. Without one, the centre of the picture's detail (where neighbouring
+ * pixels differ most), drawn a little towards the middle so a busy edge does
+ * not take the crop.
+ */
+export function focusOf(pixels, width, height, channels = 4) {
+    if (width < 2 || height < 2)
+        return CENTRE;
+    const at = (x, y) => (y * width + x) * channels;
+    const luma = new Float32Array(width * height);
+    const skin = new Uint8Array(width * height);
+    let skinCount = 0;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const i = at(x, y);
+            const r = pixels[i], g = pixels[i + 1], b = pixels[i + 2];
+            luma[y * width + x] = 0.299 * r + 0.587 * g + 0.114 * b;
+            if (isSkin(r, g, b)) {
+                skin[y * width + x] = 1;
+                skinCount++;
+            }
+        }
+    }
+    // A face: skin over at least half a percent of the picture, in a band of rows.
+    if (skinCount >= width * height * 0.005) {
+        const band = Math.max(2, Math.round(height / 10));
+        const rows = new Float32Array(height);
+        for (let y = 0; y < height; y++)
+            for (let x = 0; x < width; x++)
+                rows[y] += skin[y * width + x];
+        let densest = 0;
+        const bands = [];
+        for (let y = 0; y + band <= height; y++) {
+            let sum = 0;
+            for (let k = 0; k < band; k++)
+                sum += rows[y + k];
+            bands.push(sum);
+            densest = Math.max(densest, sum);
+        }
+        const top = bands.findIndex(sum => sum >= densest * 0.45);
+        if (top >= 0) {
+            let sx = 0, sy = 0, n = 0;
+            for (let y = top; y < Math.min(height, top + band * 2); y++) {
+                for (let x = 0; x < width; x++)
+                    if (skin[y * width + x]) {
+                        sx += x;
+                        sy += y;
+                        n++;
+                    }
+            }
+            if (n)
+                return { x: clamp((sx / n + 0.5) / width), y: clamp((sy / n + 0.5) / height) };
+        }
+    }
+    // Otherwise the picture's detail.
+    let sx = 0, sy = 0, total = 0;
+    for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+            const i = y * width + x;
+            const energy = Math.abs(luma[i + 1] - luma[i - 1]) + Math.abs(luma[i + width] - luma[i - width]);
+            sx += x * energy;
+            sy += y * energy;
+            total += energy;
+        }
+    }
+    if (!total)
+        return CENTRE;
+    const pull = 0.35;
+    return {
+        x: clamp(((sx / total + 0.5) / width) * (1 - pull) + 0.5 * pull),
+        y: clamp(((sy / total + 0.5) / height) * (1 - pull) + 0.5 * pull),
+    };
+}
+/**
+ * The focus from what a detector found (`focus-vision.swift`: Apple's face
+ * detection and attention-based saliency), or `undefined` when it found
+ * nothing. Faces win: the point between them across, and down a little above
+ * the top of the highest, so a crop keeps the heads whole with room above
+ * them. Otherwise the middle of everything salient.
+ */
+export function focusFromRegions(found) {
+    const faces = (found.faces ?? []).filter(face => face.w * face.h > 0.0005);
+    if (faces.length) {
+        const biggest = Math.max(...faces.map(face => face.w * face.h));
+        const kept = faces.filter(face => face.w * face.h >= biggest * 0.25);
+        const left = Math.min(...kept.map(face => face.x));
+        const right = Math.max(...kept.map(face => face.x + face.w));
+        const top = Math.min(...kept.map(face => face.y));
+        const height = Math.max(...kept.map(face => face.h));
+        return { x: clamp((left + right) / 2), y: clamp(top - height * 0.35) };
+    }
+    const salient = found.salient ?? [];
+    if (!salient.length)
+        return undefined;
+    const left = Math.min(...salient.map(r => r.x));
+    const right = Math.max(...salient.map(r => r.x + r.w));
+    const top = Math.min(...salient.map(r => r.y));
+    const bottom = Math.max(...salient.map(r => r.y + r.h));
+    return { x: clamp((left + right) / 2), y: clamp((top + bottom) / 2) };
+}
+/** The focus as CSS `object-position`, in whole percents. */
+export function objectPosition(focus) {
+    return `${Math.round(focus.x * 100)}% ${Math.round(focus.y * 100)}%`;
+}
+const KEY = "ds-focus:";
+/** Finds and sets the focus of one picture marked `data-ds-focus="auto"`, once it has loaded. */
+export function focusImage(image) {
+    const chosen = image.dataset.dsFocus;
+    if (chosen && chosen !== "auto") {
+        image.style.objectPosition = chosen;
+        return;
+    }
+    const source = image.currentSrc || image.src;
+    try {
+        const kept = localStorage.getItem(KEY + source);
+        if (kept) {
+            image.style.objectPosition = kept;
+            return;
+        }
+    }
+    catch { /* Storage can be blocked. */ }
+    const measure = () => {
+        if (!image.naturalWidth)
+            return;
+        const width = FOCUS_SAMPLE;
+        const height = Math.max(2, Math.round((image.naturalHeight / image.naturalWidth) * width));
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext("2d", { willReadFrequently: true });
+        if (!context)
+            return;
+        try {
+            context.drawImage(image, 0, 0, width, height);
+            const position = objectPosition(focusOf(context.getImageData(0, 0, width, height).data, width, height, 4));
+            image.style.objectPosition = position;
+            try {
+                localStorage.setItem(KEY + source, position);
+            }
+            catch { /* Storage can be blocked. */ }
+        }
+        catch { /* A picture from another host without CORS cannot be read; it keeps its middle. */ }
+    };
+    if (image.complete)
+        measure();
+    else
+        image.addEventListener("load", measure, { once: true });
+}
+/** Sets the focus of every picture marked `data-ds-focus` in `root`. */
+export function startFocus(root = document) {
+    for (const image of root.querySelectorAll("img[data-ds-focus]"))
+        focusImage(image);
+}

package/dist/0-face/grid.d.ts

@@ -1,3 +1,13 @@
-/** Triple G toggles the grid; triple L inspects named layout areas. */
+/** The presses of one key, each within 800ms of the last, that toggle an overlay. */
+export declare const GRID_PRESSES = 5;
+/**
+ * Five presses of G toggle the grid and five of L inspect the layout, on every
+ * page that loads this module and for everyone who reads it: never put them
+ * behind a user, an owner or a development check. Escape hides both. Presses
+ * typed into a field, with a modifier or held down never count, and any other
+ * key starts the count again.
+ * A nested scrolling viewport opts in with data-ds-grid-scroll: its grid follows
+ * its content while the page grid remains aligned outside the viewport.
+ */
 export declare function initGridShortcut(): void;
 //# sourceMappingURL=grid.d.ts.map

package/dist/0-face/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../DS1/0-face/grid.ts"],"names":[],"mappings":"AAGA,uEAAuE;AACvE,wBAAgB,gBAAgB,IAAI,IAAI,CAoIvC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../DS1/0-face/grid.ts"],"names":[],"mappings":"AAIA,qFAAqF;AACrF,eAAO,MAAM,YAAY,IAAI,CAAC;AAE9B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAiLvC"}

package/dist/0-face/grid.js

@@ -1,6 +1,17 @@
 import { createLayoutInspector } from './layout-inspector';
 import { initGridFit } from './grid-fit';
-/** Triple G toggles the grid; triple L inspects named layout areas. */
+import { initConstraintShortcut } from './constraint-panel';
+/** The presses of one key, each within 800ms of the last, that toggle an overlay. */
+export const GRID_PRESSES = 5;
+/**
+ * Five presses of G toggle the grid and five of L inspect the layout, on every
+ * page that loads this module and for everyone who reads it: never put them
+ * behind a user, an owner or a development check. Escape hides both. Presses
+ * typed into a field, with a modifier or held down never count, and any other
+ * key starts the count again.
+ * A nested scrolling viewport opts in with data-ds-grid-scroll: its grid follows
+ * its content while the page grid remains aligned outside the viewport.
+ */
 export function initGridShortcut() {
     if (typeof document === "undefined")
         return;
@@ -10,6 +21,8 @@ export function initGridShortcut() {
     root.setAttribute("data-ds-grid-ready", "");
     root.setAttribute("data-design-system", "1");
     initGridFit();
+    // Five presses of C, for the page's owner alone (constraint-panel.ts).
+    initConstraintShortcut();
     const overlay = document.createElement("div");
     overlay.setAttribute("data-ds-grid-overlay", "");
     overlay.setAttribute("aria-hidden", "true");
@@ -43,19 +56,92 @@ export function initGridShortcut() {
   </style><div class="grid"></div>`;
     document.body.appendChild(overlay);
     const layout = createLayoutInspector();
+    const pageGrid = shadow.querySelector('.grid');
+    const scopedGrids = new Map();
+    let tracking = false;
+    const resize = new ResizeObserver(() => { if (tracking)
+        updatePosition(); });
+    const regionsChanged = new MutationObserver(() => { if (tracking)
+        updatePosition(); });
     const updatePosition = () => {
         overlay.style.setProperty("--ds-grid-scroll-x", `${window.scrollX}px`);
         overlay.style.setProperty("--ds-grid-scroll-y", `${window.scrollY}px`);
+        const present = new Set();
+        const holes = [];
+        document.querySelectorAll('[data-ds-grid-scroll]').forEach(element => {
+            const rect = element.getBoundingClientRect();
+            let left = rect.left + element.clientLeft, top = rect.top + element.clientTop;
+            let right = left + element.clientWidth, bottom = top + element.clientHeight;
+            // The overlay must respect enclosing scroll viewports as the content does.
+            for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+                const style = getComputedStyle(parent), box = parent.getBoundingClientRect();
+                if (/(auto|scroll|hidden|clip)/.test(style.overflowX)) {
+                    left = Math.max(left, box.left + parent.clientLeft);
+                    right = Math.min(right, box.left + parent.clientLeft + parent.clientWidth);
+                }
+                if (/(auto|scroll|hidden|clip)/.test(style.overflowY)) {
+                    top = Math.max(top, box.top + parent.clientTop);
+                    bottom = Math.min(bottom, box.top + parent.clientTop + parent.clientHeight);
+                }
+            }
+            left = Math.max(0, left);
+            top = Math.max(0, top);
+            right = Math.min(innerWidth, right);
+            bottom = Math.min(innerHeight, bottom);
+            if (right <= left || bottom <= top || !element.getClientRects().length)
+                return;
+            present.add(element);
+            let grid = scopedGrids.get(element);
+            if (!grid) {
+                grid = document.createElement('div');
+                grid.className = 'grid';
+                grid.setAttribute('data-ds-grid-region', '');
+                shadow.append(grid);
+                scopedGrids.set(element, grid);
+                resize.observe(element);
+            }
+            const style = getComputedStyle(element);
+            for (const property of ['--ds-grid-unit', '--unit', '--sf', '--ds-grid-color', '--ds-grid-origin-x', '--ds-grid-origin-y', '--ds-grid-line-offset']) {
+                const value = style.getPropertyValue(property);
+                if (value)
+                    grid.style.setProperty(property, value);
+                else
+                    grid.style.removeProperty(property);
+            }
+            Object.assign(grid.style, { inset: 'auto', left: `${left}px`, top: `${top}px`, width: `${right - left}px`, height: `${bottom - top}px` });
+            grid.style.setProperty('--ds-grid-scroll-x', `${window.scrollX + left + element.scrollLeft}px`);
+            grid.style.setProperty('--ds-grid-scroll-y', `${window.scrollY + top + element.scrollTop}px`);
+            // Opposite winding makes each viewport a hole in the page grid.
+            holes.push(`M${left},${top}V${bottom}H${right}V${top}Z`);
+        });
+        scopedGrids.forEach((grid, element) => { if (!present.has(element)) {
+            resize.unobserve(element);
+            grid.remove();
+            scopedGrids.delete(element);
+        } });
+        pageGrid.style.clipPath = holes.length ? `path("M0,0H${innerWidth}V${innerHeight}H0Z ${holes.join(' ')}")` : '';
     };
     const setVisible = (visible) => {
         overlay.hidden = !visible;
         root.toggleAttribute("data-ds-grid-visible", visible);
         if (visible) {
+            tracking = true;
             updatePosition();
-            window.addEventListener("scroll", updatePosition, { passive: true });
+            document.addEventListener('scroll', updatePosition, { passive: true, capture: true });
+            window.addEventListener('scroll', updatePosition, { passive: true });
+            window.addEventListener('resize', updatePosition, { passive: true });
+            regionsChanged.observe(document.body, { childList: true, subtree: true });
         }
         else {
-            window.removeEventListener("scroll", updatePosition);
+            tracking = false;
+            document.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('scroll', updatePosition);
+            window.removeEventListener('resize', updatePosition);
+            regionsChanged.disconnect();
+            resize.disconnect();
+            scopedGrids.forEach(grid => grid.remove());
+            scopedGrids.clear();
+            pageGrid.style.clipPath = '';
         }
         window.dispatchEvent(new CustomEvent("design-system-grid-changed", { detail: { visible } }));
     };
@@ -126,7 +212,7 @@ export function initGridShortcut() {
         presses = key === lastKey && now - lastPress <= 800 ? presses + 1 : 1;
         lastKey = key;
         lastPress = now;
-        if (presses === 3) {
+        if (presses === GRID_PRESSES) {
             reset();
             if (key === 'g')
                 setVisible(overlay.hidden !== false);

package/dist/0-face/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../DS1/0-face/i18n.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../DS1/0-face/i18n.ts"],"names":[],"mappings":"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"}

package/dist/0-face/i18n.js

@@ -577,17 +577,47 @@ export function loadSharedWords() {
     }
     return sharedWordsLoad;
 }
+/**
+ * The words a page loads as it starts (the shared words, the translations file), announced once
+ * between them: each announcement redraws every translated word on the page, so three arrivals in
+ * the first half second used to redraw it three times. A load that never ends holds the
+ * announcement back no longer than `STARTUP_WAIT`.
+ */
+const startupLoads = [];
+const STARTUP_WAIT = 1000;
+let announcement = null;
+let announced = false;
+/** The window this module loaded into, which hears its announcements. */
+const page = typeof window !== "undefined" ? window : undefined;
+function announceTranslations() {
+    if (announcement)
+        return;
+    const wait = new Promise((resolve) => setTimeout(resolve, STARTUP_WAIT));
+    announcement = Promise.race([Promise.allSettled(startupLoads.splice(0)), wait]).then(() => {
+        announcement = null;
+        announced = true;
+        if (!eventful() || !page)
+            return;
+        page.dispatchEvent(new CustomEvent("translations-loaded"));
+        // Dispatch language-changed to update all components
+        dispatchLanguageChanged(currentLanguage.value);
+    });
+}
 applyRouting();
 if (i18nOptions.sharedWords) {
-    void loadSharedWords();
+    startupLoads.push(loadSharedWords());
 }
 // Auto-load translations when this module is imported (for CDN bundle).
 // Waits a task, so a product can configure the module first, even after a
 // dynamic import.
 if (typeof window !== "undefined" && typeof document !== "undefined") {
+    let started = () => { };
+    startupLoads.push(new Promise((resolve) => (started = resolve)));
     const start = () => {
         if (i18nOptions.autoLoad !== false)
-            void loadExternalTranslations();
+            void loadExternalTranslations().finally(started);
+        else
+            started();
     };
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", start);
@@ -602,21 +632,13 @@ if (typeof window !== "undefined" && typeof document !== "undefined") {
 // below would otherwise throw after the code that imported this has finished.
 const eventful = () => typeof window !== "undefined" && typeof window.addEventListener === "function" && typeof window.dispatchEvent === "function";
 if (eventful()) {
-    window.addEventListener("translations-ready", () => {
-        // Dispatch that translations are loaded
-        window.dispatchEvent(new CustomEvent("translations-loaded"));
-        // Dispatch language-changed to update all components
-        dispatchLanguageChanged(currentLanguage.value);
-    });
-    // Initialize translations on module load
-    // Use setTimeout to give other parts of the app time to set up event listeners first
+    // New words: translations-loaded and language-changed, once for everything still arriving.
+    window.addEventListener("translations-ready", announceTranslations);
+    // A page whose words were all there at once still hears translations-loaded once, after its
+    // listeners have had a moment to attach; one already announced or on its way is enough.
     setTimeout(() => {
-        if (!eventful()) {
-            return;
-        }
-        window.dispatchEvent(new CustomEvent("translations-loaded"));
-        // Also dispatch language-changed with the current language
-        dispatchLanguageChanged(currentLanguage.value);
+        if (eventful() && !announced && window === page)
+            announceTranslations();
     }, 100);
 }
 // ============================================================================

package/dist/0-face/layout-inspector.d.ts

@@ -1,4 +1,8 @@
-/** Inspect named page areas without changing their size, opacity, or interaction. */
+/**
+ * Inspect a page's layout without changing its size, opacity, or interaction:
+ * named areas in dashed outlines with their name and size, text and fields in
+ * green boxes, and every component (a custom element) outlined with its tag name.
+ */
 export declare function createLayoutInspector(): {
     toggle: () => void;
     hide: () => void;

package/dist/0-face/layout-inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-inspector.d.ts","sourceRoot":"","sources":["../../DS1/0-face/layout-inspector.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,wBAAgB,qBAAqB;;;EAsLpC"}
+{"version":3,"file":"layout-inspector.d.ts","sourceRoot":"","sources":["../../DS1/0-face/layout-inspector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,qBAAqB;;;EA4MpC"}