@weasel-js/forge 1.13.0-rc.0 → 1.14.0

package/dist/{chunk-35DOPXHZ.js → chunk-PGLOYXDP.js}

@@ -1,28 +1,145 @@
-import { isNative, ClockContext } from './chunk-L5XM5VKB.js';
+import { clockSpecOf, isNative, ClockContext } from './chunk-TT4ZOYB6.js';
 import { isSafeOverride, storyNameFromExport, storyId, PROP_ARG_TYPES_EXPORT } from './chunk-5WS67HMU.js';
-import { portSafePart, appliedLocal, withUnsent, coverOf, ArgsContext } from './chunk-KEQBGDUZ.js';
-import { useVisibleRaf, useLatest, isPlainObject } from '@weasel-js/core';
-import { createContext, useSyncExternalStore, useRef, useEffect, useState, Component, useLayoutEffect, useContext, createElement } from 'react';
-import { createEmitter } from '@weasel-js/registry';
+import { portSafePart, appliedLocal, withUnsent, coverOf, ArgsContext } from './chunk-B26DWEYT.js';
+import { DEFAULT_LAYOUT } from './chunk-STK2AZH2.js';
+import { createContext, useState, useRef, useEffect, Component, useLayoutEffect, useContext, createElement } from 'react';
+import { createClock, createClockRegistry } from '@weasel-js/clock';
+import { useClockLoop } from '@weasel-js/clock/react';
+import { useLatest, isPlainObject } from '@weasel-js/core';
 import { jsx } from 'react/jsx-runtime';
 import { f, UnionNode, ObjectNode } from '@weasel-js/labkit/config';
 import { iconFromData } from '@weasel-js/ui/components/Icon';
 
+// src/frame/a11yContrast.ts
+var RECHECKED = /* @__PURE__ */ new Set(["bgOverlap", "pseudoContent", "elmPartiallyObscured", "elmPartiallyObscuring"]);
+var undecided = (key) => ({ decided: false, key });
+function pseudoArea(el, which) {
+  const style = getComputedStyle(el, which);
+  if (style.content === "none" || style.display === "none" || style.visibility === "hidden" || style.position !== "absolute") return 0;
+  if (style.backgroundColor === "rgba(0, 0, 0, 0)" && style.backgroundImage === "none") return 0;
+  const width = parseFloat(style.width);
+  const height = parseFloat(style.height);
+  if (!style.width.endsWith("px") || !style.height.endsWith("px")) return width === 0 || height === 0 ? 0 : Infinity;
+  return width * height;
+}
+function hasPseudoBackdrop(node, root) {
+  const rect = node.getBoundingClientRect();
+  const minimum = rect.width * rect.height * 0.25;
+  for (let el = node; el; el = el.parentElement) {
+    if (pseudoArea(el, "::before") + pseudoArea(el, "::after") > minimum) return true;
+    if (el === root) return false;
+  }
+  return false;
+}
+function hasCompositing(node) {
+  for (let el = node; el; el = el.parentElement) {
+    const style = getComputedStyle(el);
+    if (Number(style.opacity) < 1 || style.filter !== "none" || style.mixBlendMode !== "normal") return true;
+    if (style.backdropFilter && style.backdropFilter !== "none") return true;
+  }
+  return false;
+}
+var isChrome = (el, root) => !root.contains(el) && !el.contains(root);
+var paints = (style) => style.backgroundImage !== "none" || style.backgroundColor !== "rgba(0, 0, 0, 0)";
+function stacksWithoutChrome(axe, node, root) {
+  const stacks = [];
+  for (const stack of axe.commons.dom.getTextElementStack(node)) {
+    const at = stack.indexOf(node);
+    const above = at < 0 ? stack : stack.slice(0, at);
+    if (above.some((el) => isChrome(el, root) && paints(getComputedStyle(el)))) return null;
+    const kept = [...above.filter((el) => !isChrome(el, root)), ...at < 0 ? [] : stack.slice(at)];
+    stacks.push(axe.commons.dom.reduceToElementsBelowFloating(kept, node));
+  }
+  return stacks;
+}
+function covers(el, style, rects) {
+  const box = el.getBoundingClientRect();
+  const scrolls = ["scroll", "auto"].includes(style.overflow);
+  const right = scrolls ? box.left + el.scrollWidth : box.right;
+  const bottom = scrolls ? box.top + el.scrollHeight : box.bottom;
+  return rects.every((r) => r.top >= box.top && r.bottom <= bottom && r.left >= box.left && r.right <= right);
+}
+function ownText(node) {
+  let text = "";
+  for (const child of node.childNodes) if (child.nodeType === Node.TEXT_NODE) text += child.textContent ?? "";
+  return text.trim();
+}
+function textRects(node) {
+  const range = document.createRange();
+  const rects = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType !== Node.TEXT_NODE || !child.textContent?.trim()) continue;
+    range.selectNodeContents(child);
+    rects.push(...range.getClientRects());
+  }
+  return rects;
+}
+function judgeContrast(axe, node, root) {
+  const { Color, flattenColors, hasValidContrastRatio } = axe.commons.color;
+  const style = getComputedStyle(node);
+  if (hasPseudoBackdrop(node, root)) return undecided("pseudoContent");
+  if (style.textShadow !== "none") return undecided("complexTextShadows");
+  if (hasCompositing(node) || parseFloat(style.getPropertyValue("-webkit-text-stroke-width")) > 0) return undecided("blended");
+  const stacks = stacksWithoutChrome(axe, node, root);
+  if (!stacks?.length) return undecided("bgOverlap");
+  for (const stack of stacks) {
+    if (stack[0] !== node) return undecided("bgOverlap");
+    if (stack.length !== stacks[0].length || stack.some((el, i) => el !== stacks[0][i])) return undecided("elmPartiallyObscuring");
+  }
+  const rects = textRects(node);
+  const layers = [];
+  for (const el of stacks[0]) {
+    const elStyle = getComputedStyle(el);
+    if (elStyle.backgroundImage !== "none") return undecided(elStyle.backgroundImage.includes("gradient") ? "bgGradient" : "bgImage");
+    if (el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof SVGElement) return undecided("imgNode");
+    const color = new Color().parseString(elStyle.backgroundColor);
+    if (color.alpha === 0) continue;
+    if (elStyle.display !== "inline" && !covers(el, elStyle, rects)) return undecided("elmPartiallyObscured");
+    layers.push(color);
+    if (color.alpha === 1) break;
+  }
+  const white = new Color().parseString("#fff");
+  const bg = layers.reduceRight((backdrop, layer) => flattenColors(layer, backdrop), white);
+  const fg = new Color().parseString(style.getPropertyValue("-webkit-text-fill-color") || style.color);
+  const bold = parseFloat(style.fontWeight) >= 700 || style.fontWeight === "bold";
+  const verdict = hasValidContrastRatio(bg, fg, parseFloat(style.fontSize), bold);
+  if (Math.floor(verdict.contrastRatio * 100) === 100) return undecided("equalRatio");
+  if (!verdict.isValid && ownText(node).length === 1) return undecided("shortTextContent");
+  return {
+    decided: true,
+    isValid: verdict.isValid,
+    ratio: verdict.contrastRatio,
+    expected: verdict.expectedContrastRatio,
+    fg: fg.toHexString(),
+    bg: bg.toHexString()
+  };
+}
+
 // src/frame/a11y.ts
 var IMPACTS = /* @__PURE__ */ new Set(["minor", "moderate", "serious", "critical"]);
-function finding(from) {
+function reasonOf(node) {
+  if (node.reason) return node.reason;
+  const checks = [...node.any ?? [], ...node.all ?? [], ...node.none ?? []];
+  const said = checks.find((c) => c.data?.messageKey) ?? checks.find((c) => c.message);
+  if (!said) return void 0;
+  const key = said.data?.messageKey;
+  return { ...key ? { key } : {}, ...said.message ? { message: said.message } : {} };
+}
+function finding(from, withReasons = false) {
   const impact = from.impact ?? "";
+  const reasons = withReasons ? from.nodes.map(reasonOf) : [];
   return {
     id: from.id,
     impact: IMPACTS.has(impact) ? impact : null,
     help: from.help,
     helpUrl: from.helpUrl,
     description: from.description,
-    nodes: from.nodes.map((node) => ({
+    nodes: from.nodes.map((node, i) => ({
       // An axe target entry is a selector, or an array of them for an element inside a shadow root.
       target: node.target.map((part) => Array.isArray(part) ? part.join(" ") : String(part)),
       html: node.html,
-      ...node.failureSummary === void 0 ? {} : { failureSummary: node.failureSummary }
+      ...node.failureSummary === void 0 ? {} : { failureSummary: node.failureSummary },
+      ...reasons[i] ? { reason: reasons[i] } : {}
     }))
   };
 }
@@ -45,17 +162,49 @@ var last = Promise.resolve();
 async function runAxe(element, { page = true } = {}) {
   const axe = await loadAxe();
   const rules = page ? void 0 : Object.fromEntries(PAGE_RULES.map((id) => [id, { enabled: false }]));
-  const run = () => axe.run(element, rules ? { rules } : void 0);
+  const run = async () => recheckContrast(axe, element, await axe.run(element, { elementRef: true, ...rules ? { rules } : {} }));
   const running = last.then(run, run);
   last = running;
   const result = await running;
   return {
-    violations: result.violations.map(finding),
-    incomplete: result.incomplete.map(finding),
+    violations: result.violations.map((f3) => finding(f3)),
+    incomplete: result.incomplete.map((f3) => finding(f3, true)),
     passes: result.passes.length,
     inapplicable: result.inapplicable.length
   };
 }
+function recheckContrast(axe, root, result) {
+  const review = result.incomplete.find((f3) => f3.id === "color-contrast");
+  const rechecked = (n) => n.element !== void 0 && RECHECKED.has(reasonOf(n)?.key ?? "");
+  if (!review?.nodes.some(rechecked)) return result;
+  const kept = [];
+  const failed = [];
+  let passed = false;
+  axe.setup(document);
+  try {
+    for (const node of review.nodes) {
+      const verdict = rechecked(node) ? judgeContrast(axe, node.element, root) : null;
+      if (!verdict) kept.push(node);
+      else if (!verdict.decided) kept.push({ ...node, failureSummary: void 0, reason: { key: verdict.key } });
+      else if (verdict.isValid) passed = true;
+      else {
+        const summary = `Contrast is ${verdict.ratio.toFixed(2)}:1 (foreground ${verdict.fg}, background ${verdict.bg}); ${verdict.expected}:1 is needed.`;
+        failed.push({ ...node, failureSummary: summary });
+      }
+    }
+  } finally {
+    axe.teardown();
+  }
+  const others = (list) => list.filter((f3) => f3.id !== "color-contrast");
+  const failing = result.violations.find((f3) => f3.id === "color-contrast");
+  const violations = failed.length === 0 ? result.violations : [
+    ...others(result.violations),
+    { ...review, impact: "serious", ...failing, nodes: [...failing?.nodes ?? [], ...failed] }
+  ];
+  const incomplete = kept.length === 0 ? others(result.incomplete) : result.incomplete.map((f3) => f3 === review ? { ...f3, nodes: kept } : f3);
+  const passes = passed && !result.passes.some((p) => p.id === "color-contrast") ? [...result.passes, { id: "color-contrast" }] : result.passes;
+  return { ...result, violations, incomplete, passes };
+}
 async function auditElement(element, options) {
   try {
     return { ok: true, report: await runAxe(element, options) };
@@ -332,138 +481,32 @@ function createGlobalsTarget(root, scope) {
     }
   };
 }
-var NEVER = () => () => {
-};
-var notPlaying = () => false;
-function useClockLoop(clock, target) {
-  const playing = useSyncExternalStore(clock?.subscribe ?? NEVER, clock ? () => clock.get().playing : notPlaying);
-  const last2 = useRef(null);
-  const raf = useVisibleRaf(
-    (now, raf2) => {
-      if (!clock) return;
-      const prev = last2.current;
-      last2.current = now;
-      if (prev !== null) clock.tick(now - prev);
-      if (clock.get().playing) raf2.request();
-    },
-    {
-      ...target ? { target } : {},
-      onResume: () => {
-        last2.current = null;
-      }
-    }
-  );
-  useEffect(() => {
-    if (!playing) return;
-    last2.current = null;
-    raf.request();
-    return () => raf.cancel();
-  }, [playing, raf]);
-}
-function spanOf(spec) {
-  const start = Number.isFinite(spec.start) ? spec.start : 0;
-  const duration = Number.isFinite(spec.duration) && spec.duration > 0 ? spec.duration : 0;
-  return { start, end: start + duration };
-}
-function clampTime(span, t) {
-  if (Number.isNaN(t)) return span.start;
-  return Math.min(span.end, Math.max(span.start, t));
-}
-function advance(state, elapsed) {
-  if (!state.playing) return state;
-  const { start, end } = state.span;
-  const length = end - start;
-  if (length <= 0) return { ...state, time: start, playing: false };
-  const next = state.time + elapsed * state.rate;
-  if (next <= end) return { ...state, time: next };
-  if (!state.loop) return { ...state, time: end, playing: false };
-  return { ...state, time: start + (next - start) % length };
-}
-var validRate = (rate) => typeof rate === "number" && Number.isFinite(rate) && rate > 0;
-var placed = (span, requested) => requested === null ? span.start : clampTime(span, requested);
-function createClock(spec, initial) {
-  let declared = spanOf(spec);
-  let override = null;
-  let requested = { time: initial ?? null };
-  let state = {
-    time: placed(declared, requested.time),
-    playing: false,
-    loop: spec.loop ?? true,
-    rate: validRate(spec.rate) ? spec.rate : 1,
-    span: declared
-  };
-  const changed = createEmitter();
-  const pendingIn = (at) => requested && requested.time !== null && requested.time !== at.time ? requested.time : null;
-  let pending = pendingIn(state);
-  const set = (next) => {
-    const nextPending = pendingIn(next);
-    if (nextPending === pending && next.time === state.time && next.playing === state.playing && next.loop === state.loop && next.rate === state.rate && next.span.start === state.span.start && next.span.end === state.span.end)
-      return;
-    state = next;
-    pending = nextPending;
-    changed.emit();
-  };
-  const moved = (next) => {
-    requested = null;
-    set(next);
-  };
-  const respan = () => {
-    const span = override ?? declared;
-    set({ ...state, span, time: requested ? placed(span, requested.time) : clampTime(span, state.time) });
-  };
-  return {
-    get: () => state,
-    subscribe: changed.subscribe,
-    play() {
-      if (state.playing) return;
-      moved({ ...state, playing: true, time: state.time >= state.span.end ? state.span.start : state.time });
-    },
-    pause: () => set({ ...state, playing: false }),
-    seek: (time) => moved({ ...state, time: clampTime(state.span, time) }),
-    request(time) {
-      requested = { time: Number.isNaN(time) ? null : time };
-      set({ ...state, playing: false, time: placed(state.span, requested.time) });
-    },
-    pending: () => pending,
-    setLoop: (loop) => set({ ...state, loop }),
-    setRate(rate) {
-      if (validRate(rate)) set({ ...state, rate });
-    },
-    setSpan(span) {
-      override = span ? spanOf(span) : null;
-      respan();
-    },
-    declare(next) {
-      declared = spanOf(next);
-      respan();
-    },
-    tick(elapsed) {
-      if (state.playing) moved(advance(state, elapsed));
-    }
-  };
-}
-function useStoryClock(spec, initial) {
-  const [clock, setClock] = useState(() => spec ? createClock(spec, initial()) : null);
-  let current = clock;
-  if (spec && !clock) {
-    current = createClock(spec, initial());
-    setClock(current);
-  } else if (!spec && clock) {
+var keyOf = (spec) => spec ? `${spec.start ?? 0}|${spec.duration}|${spec.loop ?? true}|${spec.rate ?? 1}` : null;
+function useOwnClock(spec) {
+  const [handle, setHandle] = useState(() => spec ? createClock(clockSpecOf(spec)) : null);
+  let current = handle;
+  if (spec && !handle) {
+    current = createClock(clockSpecOf(spec));
+    setHandle(current);
+  } else if (!spec && handle) {
     current = null;
-    setClock(null);
+    setHandle(null);
   }
   const latest = useLatest(spec);
-  const spanKey = spec ? `${spec.start ?? 0}:${spec.duration}` : null;
+  const key = keyOf(spec);
+  const declared = useRef(key);
   useEffect(() => {
-    if (current && latest.current) current.declare(latest.current);
-  }, [current, spanKey, latest]);
+    if (!current || !latest.current || key === declared.current) return;
+    declared.current = key;
+    current.declare(clockSpecOf(latest.current));
+  }, [current, key, latest]);
   return current;
 }
-var NO_INITIAL = () => null;
 function OwnClock({ spec, children }) {
-  const clock = useStoryClock(spec, NO_INITIAL);
-  useClockLoop(clock);
-  return /* @__PURE__ */ jsx(ClockContext.Provider, { value: clock, children });
+  const handle = useOwnClock(spec);
+  const [registry] = useState(() => createClockRegistry(handle));
+  useClockLoop(registry);
+  return /* @__PURE__ */ jsx(ClockContext.Provider, { value: handle, children });
 }
 function WithStoryClock({ story, config, children }) {
   const outer = useContext(ClockContext);
@@ -811,7 +854,7 @@ function loadCsfModule(mod, title, projectParameters = {}) {
         return scoped(ctx, (context) => renderFn(context.args, context));
       },
       decorators: [...asArray(spec.decorators), ...asArray(meta.decorators)].map(adapt),
-      layout: layout && LAYOUTS.includes(layout) ? layout : "padded",
+      layout: layout && LAYOUTS.includes(layout) ? layout : DEFAULT_LAYOUT,
       viewport: resolveViewport(parameters, storyGlobals),
       isolate: typeof isolate === "string" ? isolate : null,
       play: play ? ({ canvasElement, config: config2, globals }) => play({ ...csfContext(config2, globals), canvasElement, step: async (_label, fn) => fn() }) : null,
@@ -835,7 +878,7 @@ function loadNativeModule(mod, title) {
       initialState: spec.state ?? null,
       render: spec.render,
       decorators: [...spec.decorators ?? [], ...metaSpec.decorators ?? []],
-      layout: spec.layout ?? metaSpec.layout ?? "centered",
+      layout: spec.layout ?? metaSpec.layout ?? DEFAULT_LAYOUT,
       viewport: spec.viewport ?? null,
       isolate: spec.isolate ?? metaSpec.isolate ?? null,
       play: spec.play ?? null,
@@ -854,50 +897,12 @@ function indexRenderOf(mod) {
   const render = isNative(meta, "meta") ? meta?.index : meta?.parameters?.forge?.index;
   return typeof render === "function" ? render : null;
 }
-var IN_VIEW_MARGIN = "50%";
-function useNearViewport(ref, margin, initial = true) {
-  const [near, setNear] = useState(() => initial || typeof IntersectionObserver === "undefined");
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || typeof IntersectionObserver === "undefined") return;
-    const recheck = () => {
-      observer.unobserve(el);
-      observer.observe(el);
-    };
-    let watching = false;
-    const watch = (on) => {
-      if (on === watching) return;
-      watching = on;
-      if (on) {
-        document.addEventListener("scroll", recheck, { capture: true, passive: true });
-        window.addEventListener("resize", recheck);
-      } else {
-        document.removeEventListener("scroll", recheck, { capture: true });
-        window.removeEventListener("resize", recheck);
-      }
-    };
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const last2 = entries.at(-1);
-        if (!last2) return;
-        const root = last2.rootBounds;
-        const box = last2.boundingClientRect;
-        setNear(
-          root ? box.bottom >= root.top && box.top <= root.bottom && box.right >= root.left && box.left <= root.right : last2.isIntersecting
-        );
-        watch(Boolean(root) && !last2.isIntersecting);
-      },
-      { root: document, rootMargin: margin }
-    );
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-      watch(false);
-    };
-  }, [ref, margin]);
-  return near;
-}
 var scopeOf = (id) => `[data-fg-host="${id}"]`;
+function applyGlobalsTo(host, hostId, globals, setup) {
+  const target = createGlobalsTarget(host, scopeOf(hostId));
+  setup.applyGlobals?.(globals, target);
+  return () => target.dispose();
+}
 function useHostConditions(host, opts) {
   const { hostId, globals, overrides: persisted, setup } = opts;
   const latest = useLatest({ setup });
@@ -923,15 +928,13 @@ function useHostConditions(host, opts) {
     for (const [name, value] of Object.entries(persisted)) overrides.set(name, value);
     applied.current = { ...persisted };
   }, [host, hostId, persisted]);
-  useLayoutEffect(() => {
-    if (!host) return;
-    const target = createGlobalsTarget(host, scopeOf(hostId));
-    latest.current.setup.applyGlobals?.(globals, target);
-    return () => target.dispose();
-  }, [host, hostId, globals, latest]);
+  useLayoutEffect(
+    () => host ? applyGlobalsTo(host, hostId, globals, latest.current.setup) : void 0,
+    [host, hostId, globals, latest]
+  );
   return overridesRef;
 }
 
-export { IN_VIEW_MARGIN, StoryHost, auditElement, createA11yHighlighter, createGlobalsTarget, createOverrides, cssRulesOf, indexRenderOf, loadStories, resolveCssVar, runAxe, scanCssVars, useClockLoop, useHostConditions, useNearViewport, useStoryClock, varRefs };
-//# sourceMappingURL=chunk-35DOPXHZ.js.map
-//# sourceMappingURL=chunk-35DOPXHZ.js.map
+export { StoryHost, applyGlobalsTo, auditElement, createA11yHighlighter, createGlobalsTarget, createOverrides, cssRulesOf, indexRenderOf, loadStories, resolveCssVar, runAxe, scanCssVars, useHostConditions, useOwnClock, varRefs };
+//# sourceMappingURL=chunk-PGLOYXDP.js.map
+//# sourceMappingURL=chunk-PGLOYXDP.js.map