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

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"}

package/dist/0-face/layout-inspector.js

@@ -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 function createLayoutInspector() {
     const root = document.documentElement;
     const overlay = document.createElement('div');
@@ -17,145 +21,167 @@ export function createLayoutInspector() {
       color-scheme: inherit !important;
     }
     :host([hidden]) { display: none !important; }
-    .veil, .areas { position: absolute; inset: 0; overflow: hidden; }
-    .veil { background: color-mix(in srgb, var(--page-background, Canvas) 78%, transparent); }
-    .area {
+    .boxes { position: absolute; inset: 0; overflow: hidden; }
+    .box {
       position: absolute;
       box-sizing: border-box;
-      display: grid;
-      place-items: center;
-      background: color-mix(in srgb, var(--pastel) 40%, transparent);
-      border: 1px solid color-mix(in srgb, var(--pastel) 65%, #82718d);
+      border: 1px solid var(--tint);
     }
-    .name {
-      box-sizing: border-box;
-      max-width: 100%;
-      padding: 3px 8px;
-      background: var(--page-background, Canvas);
-      color: var(--base-slate, CanvasText);
-      font: 400 14px/20px var(--font-regular, var(--typeface-regular, sans-serif));
-      text-align: center;
-      overflow-wrap: anywhere;
-    }
-    .area[data-container] {
-      background: transparent;
-    }
-    .area[data-container] > .name {
+    .area { --tint: #efc9dc; border-style: dashed; }
+    .text { --tint: #bfe0cd; background: color-mix(in srgb, var(--tint) 18%, transparent); }
+    .field { --tint: #bfe0cd; background: color-mix(in srgb, var(--tint) 45%, transparent); }
+    .component { --tint: #d5c9ef; }
+    .tag {
       position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .area[data-compact] .name {
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      width: max-content;
-      max-width: none;
-      padding: 2px 4px;
-      font-size: 12px;
-      line-height: 16px;
-      white-space: nowrap;
-    }
-    .dimensions {
-      display: block;
-      font-size: 12px;
-      line-height: 16px;
+      box-sizing: border-box;
+      display: flex;
+      gap: 6px;
+      padding: 0 4px;
+      background: var(--tint);
+      color: #2a2530;
+      font: 400 12px/16px var(--font-regular, var(--typeface-regular, sans-serif));
       font-variant-numeric: tabular-nums;
       white-space: nowrap;
     }
+    .area > .tag { top: -1px; right: -1px; }
+    .component > .tag { bottom: 100%; left: -1px; }
+    .component[data-inside] > .tag { bottom: auto; top: -1px; }
+    .measure { opacity: 0.7; }
     @media print { :host { display: none !important; } }
-  </style><div class="veil"></div><div class="areas"></div>`;
+  </style><div class="boxes"></div>`;
     document.body.appendChild(overlay);
-    const layer = shadow.querySelector('.areas');
-    const colors = ['#efc9dc', '#d5c9ef', '#c2d9eb', '#bfe0cd', '#eee3b7', '#efcfb8'];
+    const layer = shadow.querySelector('.boxes');
+    // A page of thousands of words draws its first boxes and stops.
+    const limit = 2000;
+    const fields = new Set(['input', 'textarea', 'select', 'img', 'picture', 'svg', 'video', 'canvas', 'iframe']);
+    const skipped = new Set(['script', 'style', 'template', 'noscript', 'link', 'meta', 'slot']);
+    // Primitives drawn as what they show rather than named: words, an icon,
+    // and a gap with nothing to see.
+    const primitives = { 'ds-text': 'text', 'ds-icon': 'field', 'ds-gap': 'none' };
     let frame = 0;
     let visible = false;
     const observed = new Set();
     const observedRoots = new Set();
-    const getAreas = () => {
-        const named = [];
-        const collect = (scope) => {
-            named.push(...scope.querySelectorAll('[data-ds-area]'));
-            scope.querySelectorAll('[data-ds-layout-root]').forEach((host) => {
-                if (!host.shadowRoot)
-                    return;
-                if (!observedRoots.has(host.shadowRoot)) {
-                    mutations.observe(host.shadowRoot, { subtree: true, childList: true, characterData: true });
-                    observedRoots.add(host.shadowRoot);
+    const collect = () => {
+        const areas = [];
+        const words = [];
+        const components = [];
+        const visit = (parent, inText) => {
+            for (const element of Array.from(parent.children)) {
+                const name = element.localName;
+                if (skipped.has(name) || element.hasAttribute('data-ds-layout-overlay') || element.hasAttribute('data-ds-grid-overlay'))
+                    continue;
+                if (element.hasAttribute('data-ds-area'))
+                    areas.push(element);
+                const primitive = primitives[name];
+                if (primitive === 'none')
+                    continue;
+                const component = !primitive && name.includes('-');
+                if (component)
+                    components.push(element);
+                if (fields.has(name) || primitive === 'field') {
+                    if (!inText)
+                        words.push([element, 'field']);
+                    continue;
+                }
+                const text = !inText && !component && (primitive === 'text' || Array.from(element.childNodes).some((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ''));
+                if (text)
+                    words.push([element, 'text']);
+                // A design system component is drawn whole; an app's own component is
+                // opened, so what it holds is drawn too.
+                const content = element.shadowRoot;
+                if (content && !primitive && (!name.startsWith('ds-') || element.hasAttribute('data-ds-layout-root'))) {
+                    if (!observedRoots.has(content)) {
+                        mutations.observe(content, { subtree: true, childList: true, characterData: true });
+                        observedRoots.add(content);
+                    }
+                    visit(content, inText || text);
                 }
-                collect(host.shadowRoot);
-            });
+                visit(element, inText || text);
+            }
         };
-        collect(document.querySelector('[data-ds-inspect-active]') ?? document);
-        if (named.length)
-            return named;
+        visit(document.querySelector('[data-ds-inspect-active]') ?? document.body, false);
         // Semantic fallback for pages that have not supplied their own area names.
-        return Array.from(document.querySelectorAll('header, main, section, footer, one-footer'))
+        const named = areas.length ? areas : Array.from(document.querySelectorAll('header, main, section, footer, one-footer'))
             .filter((element) => !element.querySelector('section, header, footer, one-footer'));
+        return { areas: named, words, components };
+    };
+    const tag = (name, ...measures) => {
+        const label = document.createElement('span');
+        label.className = 'tag';
+        label.textContent = name;
+        for (const measure of measures) {
+            const part = document.createElement('span');
+            part.className = 'measure';
+            part.textContent = measure;
+            label.appendChild(part);
+        }
+        return label;
+    };
+    const box = (element, kind, rect) => {
+        const panel = document.createElement('div');
+        panel.className = `box ${kind}`;
+        panel.style.left = `${rect.left}px`;
+        panel.style.top = `${rect.top}px`;
+        panel.style.width = `${rect.width}px`;
+        panel.style.height = `${rect.height}px`;
+        if (kind === 'area') {
+            const areaName = element.dataset.dsArea || element.getAttribute('aria-label') ||
+                (element.localName === 'one-footer' ? 'footer' : element.localName);
+            // Reduce dimensions measured to a tenth of a CSS pixel; use a decimal
+            // for fluid shapes whose exact fraction would be too long to read.
+            const width = Math.max(1, Math.round(rect.width * 10));
+            const height = Math.max(1, Math.round(rect.height * 10));
+            let divisor = width;
+            let remainder = height;
+            while (remainder) {
+                [divisor, remainder] = [remainder, divisor % remainder];
+            }
+            const horizontal = width / divisor;
+            const vertical = height / divisor;
+            panel.appendChild(tag(areaName.replace(/[-_]/g, ' ').replace(/^./, (letter) => letter.toUpperCase()), `${Number(rect.width.toFixed(1))} × ${Number(rect.height.toFixed(1))}`, horizontal <= 100 && vertical <= 100 ? `${horizontal}:${vertical}` : `≈ ${Number((rect.width / rect.height).toFixed(2))}:1`));
+        }
+        else if (kind === 'component') {
+            // A name with no room above the component stands inside it.
+            panel.toggleAttribute('data-inside', rect.top < 16);
+            panel.appendChild(tag(element.localName));
+        }
+        return panel;
     };
     const render = () => {
         frame = 0;
         if (!visible)
             return;
-        const areas = getAreas();
-        const current = new Set(areas);
+        const { areas, words, components } = collect();
+        const watched = new Set([...areas, ...components]);
         for (const element of observed) {
-            if (!current.has(element)) {
+            if (!watched.has(element)) {
                 resize.unobserve(element);
                 observed.delete(element);
             }
         }
-        const fragments = document.createDocumentFragment();
-        areas.forEach((element, index) => {
+        for (const element of watched) {
             if (!observed.has(element)) {
                 resize.observe(element);
                 observed.add(element);
             }
+        }
+        // Areas first, then words, then components, so component names lie on top.
+        const drawn = [];
+        const draw = (element, kind) => {
+            if (drawn.length >= limit)
+                return;
             const rect = element.getBoundingClientRect();
             if (!rect.width || !rect.height || rect.bottom <= 0 || rect.top >= innerHeight || rect.right <= 0 || rect.left >= innerWidth)
                 return;
             if (getComputedStyle(element).visibility === 'hidden')
                 return;
-            const panel = document.createElement('div');
-            panel.className = 'area';
-            panel.toggleAttribute('data-container', !!element.shadowRoot?.querySelector('[data-ds-area]'));
-            panel.toggleAttribute('data-compact', rect.width < 80 || rect.height < 24);
-            panel.style.left = `${rect.left}px`;
-            panel.style.top = `${rect.top}px`;
-            panel.style.width = `${rect.width}px`;
-            panel.style.height = `${rect.height}px`;
-            panel.style.setProperty('--pastel', colors[index % colors.length] ?? null);
-            const label = document.createElement('span');
-            label.className = 'name';
-            const areaName = element.dataset.dsArea || element.getAttribute('aria-label') ||
-                (element.localName === 'one-footer' ? 'footer' : element.localName);
-            label.textContent = areaName.replace(/[-_]/g, ' ').replace(/^./, (letter) => letter.toUpperCase());
-            const dimensions = document.createElement('span');
-            dimensions.className = 'dimensions';
-            dimensions.textContent = `${Number(rect.width.toFixed(1))} × ${Number(rect.height.toFixed(1))} px`;
-            label.appendChild(dimensions);
-            const ratio = document.createElement('span');
-            ratio.className = 'dimensions';
-            // Reduce dimensions measured to a tenth of a CSS pixel; use a decimal
-            // for fluid shapes whose exact fraction would be too long to read.
-            const width = Math.max(1, Math.round(rect.width * 10));
-            const height = Math.max(1, Math.round(rect.height * 10));
-            let divisor = width;
-            let remainder = height;
-            while (remainder) {
-                [divisor, remainder] = [remainder, divisor % remainder];
-            }
-            const horizontal = width / divisor;
-            const vertical = height / divisor;
-            ratio.textContent = horizontal <= 100 && vertical <= 100
-                ? `${horizontal}:${vertical}`
-                : `≈ ${Number((rect.width / rect.height).toFixed(2))}:1`;
-            label.appendChild(ratio);
-            panel.appendChild(label);
-            fragments.appendChild(panel);
-        });
-        layer.replaceChildren(fragments);
+            drawn.push(box(element, kind, rect));
+        };
+        areas.forEach((element) => draw(element, 'area'));
+        words.forEach(([element, kind]) => draw(element, kind));
+        components.forEach((element) => draw(element, 'component'));
+        layer.replaceChildren(...drawn);
     };
     const schedule = () => { if (visible && !frame)
         frame = requestAnimationFrame(render); };

package/dist/0-face/preference-options.d.ts

@@ -25,6 +25,10 @@ export interface PreferenceOptions {
         light: string;
         dark: string;
     } | false;
+    /** Where the shape is stored: `"ds-one:shape"` by default. */
+    shapeStorageKey?: string;
+    /** The shape for a visitor who has chosen none; without it the components keep their own corners. */
+    shapeDefault?: "square" | "rounded" | "circular";
 }
 declare global {
     interface Window {

package/dist/0-face/preference-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preference-options.d.ts","sourceRoot":"","sources":["../../DS1/0-face/preference-options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;CACtD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QAAG,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;KAAE;CAC7D"}
+{"version":3,"file":"preference-options.d.ts","sourceRoot":"","sources":["../../DS1/0-face/preference-options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACrD,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qGAAqG;IACrG,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QAAG,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;KAAE;CAC7D"}

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

@@ -5,7 +5,8 @@
  * mobile browser, or a touch screen whose shorter side is at most 820px) is
  * drawn as if the screen were 280 units wide: the scale is the page's width
  * over 280, never under 0.75 or over 2, so a 375px phone draws everything a
- * third larger.
+ * third larger. The page's width is never taken as more than the screen's, so
+ * a page that a phone has widened and zoomed out never scales itself larger.
  *
  * `startScaling()` puts the scale on the page and keeps it there through
  * resizes and turns; `applyScaling()` does it once. Both set `--sf` and, on a
@@ -71,6 +72,12 @@ export declare function detectMobileDevice(): boolean;
  * the factor (the first surface's, or 1 when there is none).
  */
 export declare function applyScaling(options?: ScalingOptions): number;
+/**
+ * The screen's own width as it is held, in CSS pixels: the widest a page on it
+ * is laid out at, or 0 when the browser does not say. iOS gives the screen's
+ * upright width whichever way it is turned, so the side is taken by the turn.
+ */
+export declare function screenWidth(): number;
 /**
  * Puts the scale on the page now and again on every resize and turn; a
  * surface is followed as its own size changes. Returns a function that stops

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

@@ -1 +1 @@
-{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,OAAO,CAAC,aAAa,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;CACjC;AAMD,eAAO,MAAM,oBAAoB,EAAE,aAKlC,CAAC;AAOF,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,SAAI,GAAG,MAAM,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,GAAE,aAAoC,EAAE,UAAU,SAAI,GAAG,MAAM,CAMlI;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAO5C;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,CAQjE;AAYD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,IAAI,CAkBrE"}
+{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,OAAO,CAAC,aAAa,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;CACjC;AAMD,eAAO,MAAM,oBAAoB,EAAE,aAKlC,CAAC;AAOF,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,SAAI,GAAG,MAAM,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,GAAE,aAAoC,EAAE,UAAU,SAAI,GAAG,MAAM,CAMlI;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAO5C;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,CAQjE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAMpC;AAgBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,IAAI,CAkBrE"}

package/dist/0-face/scaling.js

@@ -81,10 +81,27 @@ export function applyScaling(options = {}) {
     }
     return applyPage(root ?? document.documentElement, config);
 }
+/**
+ * The screen's own width as it is held, in CSS pixels: the widest a page on it
+ * is laid out at, or 0 when the browser does not say. iOS gives the screen's
+ * upright width whichever way it is turned, so the side is taken by the turn.
+ */
+export function screenWidth() {
+    const { width = 0, height = 0 } = window.screen ?? {};
+    if (!width || !height)
+        return 0;
+    const turn = window.screen.orientation?.type;
+    const landscape = turn ? turn.startsWith("landscape") : window.matchMedia?.("(orientation: landscape)").matches ?? width > height;
+    return landscape ? Math.max(width, height) : Math.min(width, height);
+}
 function applyPage(root, config) {
     const mobile = detectMobileDevice();
-    // The page's width without its scroll bar.
-    const width = document.documentElement.clientWidth || window.innerWidth || 0;
+    // The page's width without its scroll bar, never more than the screen's: when something reaches
+    // past the edge, a phone's browser widens the page and zooms out, and a scale read from that
+    // width would draw everything larger, which keeps the page too wide and zoomed out.
+    const page = document.documentElement.clientWidth || window.innerWidth || 0;
+    const held = mobile ? screenWidth() : 0;
+    const width = held ? Math.min(page, held) : page;
     const factor = mobile ? calculateScalingFactor(width, { ...defaultScalingConfig, ...config }, window.devicePixelRatio || 1) : 1;
     root.style.setProperty("--sf", String(factor));
     root.toggleAttribute("data-mobile", mobile);

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

@@ -0,0 +1,35 @@
+/**
+ * Square, rounded or circular: the corners every component draws, chosen once
+ * and remembered (Ezo's Shape setting, for every product).
+ *
+ * The runtime is the second part of `theme-bootstrap.js`, which a page inlines
+ * in its <head> so the first paint already has the shape; imported here, it
+ * installs itself when the page did not. It marks the root with
+ * `data-ds-shape`, which `1-root/component-appearance.css` reads: square
+ * corners, rounded ones (squircles where the browser draws them) or pills. A
+ * visitor who has chosen nothing sees `shapeDefault` from
+ * `window.DS_ONE_PREFERENCES`, or the components' own corners. Offer the
+ * choice with `<ds-cycle type="shape">`.
+ */
+import "./theme-bootstrap.js";
+export type Shape = "square" | "rounded" | "circular";
+export declare const SHAPES: readonly Shape[];
+/** `window.DS_ONE_SHAPE`, installed by `theme-bootstrap.js`. */
+export interface ShapeRuntime {
+    /** The shape in effect, or null when none is chosen. */
+    shape(): Shape | null;
+    /** Choose and remember a shape, and put it on the page. */
+    set(shape: Shape): void;
+    /** Read the stored choice and the options again, and put them on the page. */
+    apply(): Shape | null;
+}
+declare global {
+    interface Window {
+        DS_ONE_SHAPE?: ShapeRuntime;
+    }
+}
+/** The shape in effect: the stored choice, else `shapeDefault`, else rounded (the components' own corners). */
+export declare function getShape(): Shape;
+/** Choose and remember a shape. */
+export declare function setShape(shape: Shape): void;
+//# sourceMappingURL=shape.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../DS1/0-face/shape.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,sBAAsB,CAAC;AAE9B,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACtD,eAAO,MAAM,MAAM,EAAE,SAAS,KAAK,EAAsC,CAAC;AAE1E,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC;IACtB,2DAA2D;IAC3D,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,8EAA8E;IAC9E,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,+GAA+G;AAC/G,wBAAgB,QAAQ,IAAI,KAAK,CAEhC;AAED,mCAAmC;AACnC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAE3C"}