@3sln/nook 0.0.0-stage → 0.2.0

package/src/ui/swipeDial.js

@@ -0,0 +1,389 @@
+import { positionPoint } from "../bl/menu.js";
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+// One layout model serves pinned menus and held gestures. Built-ins always own
+// their directional slots; extras never change fast-swipe routing.
+export function layoutDial(bounds, origin, position, entries) {
+  const sx = position.includes("right") ? -1 : 1,
+    sy = position.startsWith("top") ? 1 : -1;
+  const horizontal = sx > 0 ? bounds.right - origin.x : origin.x - bounds.left;
+  const vertical = sy > 0 ? bounds.bottom - origin.y : origin.y - bounds.top;
+  const radius = Math.max(40, Math.min(232, horizontal - 32, vertical - 32));
+  const capacity = Math.max(
+    2,
+    Math.min(
+      6,
+      bounds.width < 360 ? 4 : 6,
+      1 + Math.floor((Math.PI * radius) / 128),
+    ),
+  );
+  const reserved = entries.filter(
+    (entry) => entry.id === "all" || entry.id === "settings",
+  );
+  const extras = entries
+    .filter((entry) => entry.id !== "all" && entry.id !== "settings")
+    .slice(0, Math.max(0, capacity - reserved.length));
+  const chosen = new Set([...reserved, ...extras]);
+  const items = entries
+    .filter((entry) => chosen.has(entry))
+    .map((entry) => {
+      const angle =
+        entry.id === "all"
+          ? 0
+          : entry.id === "settings"
+            ? Math.PI / 2
+            : ((extras.indexOf(entry) + 1) * Math.PI) / 2 / (extras.length + 1);
+      return {
+        ...entry,
+        angle,
+        x: clamp(
+          origin.x + sx * radius * Math.cos(angle),
+          bounds.left + 32,
+          bounds.right - 32,
+        ),
+        y: clamp(
+          origin.y + sy * radius * Math.sin(angle),
+          bounds.top + 32,
+          bounds.bottom - 32,
+        ),
+      };
+    });
+  const overlaps = (a, b, gap = 4) =>
+    a.left < b.right + gap &&
+    a.right > b.left - gap &&
+    a.top < b.bottom + gap &&
+    a.bottom > b.top - gap;
+  const icons = items.map((item) => ({
+    left: item.x - 28,
+    right: item.x + 28,
+    top: item.y - 28,
+    bottom: item.y + 28,
+  }));
+  const captions = [];
+  const candidates = items
+    .map((item) => {
+      const dx = sx * Math.cos(item.angle),
+        dy = sy * Math.sin(item.angle);
+      const offsets = [
+        [dx * 92, dy * 72],
+        [-dx * 92, -dy * 72],
+        [0, -64],
+        [0, 64],
+        [-88, 0],
+        [88, 0],
+        [-88, -64],
+        [88, -64],
+        [-88, 64],
+        [88, 64],
+        [0, -112],
+        [0, 112],
+      ];
+      const choices = offsets
+        .map(([x, y]) => {
+          const cx = clamp(item.x + x, bounds.left + 52, bounds.right - 52);
+          const cy = clamp(item.y + y, bounds.top + 26, bounds.bottom - 26);
+          return {
+            x: cx,
+            y: cy,
+            left: cx - 48,
+            right: cx + 48,
+            top: cy - 22,
+            bottom: cy + 22,
+          };
+        })
+        .filter((candidate) => icons.every((box) => !overlaps(candidate, box)));
+      return { item, choices };
+    })
+    .sort((a, b) => a.choices.length - b.choices.length);
+  for (const { item, choices } of candidates) {
+    const fitted = choices.find((candidate) =>
+      captions.every((box) => !overlaps(candidate, box)),
+    );
+    const location = fitted || { x: item.x, y: item.y };
+    item.captionFits = Boolean(fitted);
+    item.captionX = location.x - item.x;
+    item.captionY = location.y - item.y;
+    if (fitted) captions.push(location);
+  }
+  return { grid: false, radius, items };
+}
+
+// Arrow keys follow screen direction rather than the source declaration order.
+export function directionalChoice(nodes, current, key) {
+  const direction = {
+    ArrowLeft: [-1, 0],
+    ArrowRight: [1, 0],
+    ArrowUp: [0, -1],
+    ArrowDown: [0, 1],
+  }[key];
+  if (!direction || !current) return nodes[0];
+  const center = (node) => {
+    const box = node.getBoundingClientRect();
+    return [box.left + box.width / 2, box.top + box.height / 2];
+  };
+  const [x, y] = center(current);
+  return (
+    nodes
+      .filter((node) => node !== current)
+      .map((node) => {
+        const [nx, ny] = center(node);
+        const dx = nx - x,
+          dy = ny - y;
+        return {
+          node,
+          forward: dx * direction[0] + dy * direction[1],
+          distance: Math.hypot(dx, dy),
+        };
+      })
+      .filter(({ forward }) => forward > 1)
+      .sort((a, b) => a.distance - b.distance)[0]?.node || current
+  );
+}
+
+export default function swipeDial({ dock, i18n, signal }) {
+  const view = dock.views.get("root"),
+    root = view.el;
+  root.classList.add("swipe-dial");
+  root.setAttribute("part", "surface swipe-dial");
+  let timer,
+    pending,
+    selected,
+    preview = false;
+  let options = [];
+  const alias = (node, name, add) => {
+    if (!node) return;
+    const parts = new Set(
+      (node.getAttribute("part") || "").split(/\s+/).filter(Boolean),
+    );
+    if (add) parts.add(name);
+    else parts.delete(name);
+    const value = [...parts].join(" ");
+    if (node.getAttribute("part") !== value) node.setAttribute("part", value);
+  };
+  const rect = () =>
+    dock.anchorRect || {
+      left: 0,
+      top: 0,
+      right: dock.ownerDocument.defaultView.innerWidth,
+      bottom: dock.ownerDocument.defaultView.innerHeight,
+      width: dock.ownerDocument.defaultView.innerWidth,
+      height: dock.ownerDocument.defaultView.innerHeight,
+    };
+  const origin = () => {
+    const box = dock.handle.getBoundingClientRect();
+    if (box.width && box.height)
+      return {
+        x: clamp(box.left + box.width / 2, rect().left + 32, rect().right - 32),
+        y: clamp(box.top + box.height / 2, rect().top + 32, rect().bottom - 32),
+      };
+    const b = rect(),
+      [x, y] = positionPoint(dock.position, b.width, b.height);
+    return {
+      x: b.left + clamp(x, 32, b.width - 32),
+      y: b.top + clamp(y, 32, b.height - 32),
+    };
+  };
+  const pinned = () => dock.state?.path.at(-1) === "root";
+  const collect = () => {
+    const next = (dock.rootEntries || [])
+      .map((entry) => ({
+        id: entry.id,
+        el:
+          typeof entry.id === "string"
+            ? dock.builtins.get(entry.id)
+            : dock.records.get(entry.id)?.buttons[0],
+      }))
+      .filter((option) => option.el && !option.el.hidden);
+    const wanted = new Set(next.map((option) => option.el));
+    for (const old of options)
+      if (!wanted.has(old.el)) {
+        alias(old.el, "swipe-dial-option", false);
+        alias(old.el.querySelector(".icon"), "swipe-dial-icon", false);
+        alias(old.el.querySelector(".item-label"), "swipe-dial-label", false);
+        const caption = old.el.querySelector(".dial-caption");
+        if (caption) caption.replaceWith(...caption.childNodes);
+        old.el.removeAttribute("data-dial-hidden");
+        old.el.removeAttribute("data-selected");
+      }
+    for (const option of next) {
+      const text = option.el.querySelector(".item-label");
+      if (text && text.parentNode === option.el) {
+        const caption = dock.ownerDocument.createElement("span");
+        caption.className = "dial-caption";
+        caption.setAttribute("part", "dial-caption");
+        text.before(caption);
+        caption.append(text);
+      }
+      alias(option.el, "swipe-dial-option", true);
+      alias(option.el.querySelector(".icon"), "swipe-dial-icon", true);
+      alias(option.el.querySelector(".item-label"), "swipe-dial-label", true);
+    }
+    options = next;
+  };
+  const render = () => {
+    collect();
+    const b = rect(),
+      o = origin();
+    const layout = layoutDial(b, o, dock.position, options);
+    root.dataset.dialLayout = layout.grid ? "grid" : "radial";
+    root.dataset.labelSide = dock.position.startsWith("bottom")
+      ? "above"
+      : "below";
+    root.style.setProperty("--nook-dial-origin-x", `${o.x - b.left}px`);
+    root.style.setProperty("--nook-dial-origin-y", `${o.y - b.top}px`);
+    const fitted = new Map(layout.items.map((item) => [item.id, item]));
+    let next = null;
+    for (const option of options) {
+      const location = fitted.get(option.id);
+      option.el.toggleAttribute("data-dial-hidden", !location);
+      option.el.removeAttribute("data-caption-visible");
+      if (!location) continue;
+      option.el.dataset.dialOrder = String(location.angle);
+      option.el.style.setProperty("--nook-dial-x", `${location.x - b.left}px`);
+      option.el.style.setProperty("--nook-dial-y", `${location.y - b.top}px`);
+      option.el.style.setProperty("--nook-caption-x", `${location.captionX}px`);
+      option.el.style.setProperty("--nook-caption-y", `${location.captionY}px`);
+      const caption = option.el.querySelector(".dial-caption");
+      if (caption) caption.hidden = !location.captionFits;
+    }
+    // Measure after all positions are written. Actual font/part overrides can
+    // make a caption taller than the conservative model; omit those captions.
+    const visible = options
+      .filter((option) => fitted.has(option.id))
+      .map((option) => ({ option, box: option.el.getBoundingClientRect() }));
+    const captions = [];
+    const overlaps = (a, b) =>
+      a.left < b.right + 3 &&
+      a.right > b.left - 3 &&
+      a.top < b.bottom + 3 &&
+      a.bottom > b.top - 3;
+    for (const { option, box } of visible) {
+      if (
+        preview &&
+        pending &&
+        box.width &&
+        box.height &&
+        pending.lastX >= box.left &&
+        pending.lastX <= box.right &&
+        pending.lastY >= box.top &&
+        pending.lastY <= box.bottom
+      )
+        next = option;
+      const caption = option.el.querySelector(".dial-caption");
+      if (!caption || caption.hidden) continue;
+      const labelBox = caption.getBoundingClientRect();
+      if (!labelBox.width || !labelBox.height) continue;
+      if (
+        labelBox.left < b.left ||
+        labelBox.right > b.right ||
+        labelBox.top < b.top ||
+        labelBox.bottom > b.bottom ||
+        visible.some(({ box: icon }) => overlaps(labelBox, icon)) ||
+        captions.some((other) => overlaps(labelBox, other))
+      )
+        caption.hidden = true;
+      else {
+        captions.push(labelBox);
+        option.el.setAttribute("data-caption-visible", "");
+        if (
+          preview &&
+          pending &&
+          pending.lastX >= labelBox.left &&
+          pending.lastX <= labelBox.right &&
+          pending.lastY >= labelBox.top &&
+          pending.lastY <= labelBox.bottom
+        )
+          next = option;
+      }
+    }
+    if (preview && pending) {
+      const distance = Math.hypot(
+        pending.lastX - pending.x,
+        pending.lastY - pending.y,
+      );
+      root.style.setProperty(
+        "--nook-dial-progress",
+        String(clamp((distance - 28) / 72, 0, 1)),
+      );
+      if (distance < 56) next = null;
+    } else root.style.setProperty("--nook-dial-progress", "1");
+    for (const option of options)
+      option.el.toggleAttribute("data-selected", option === next);
+    if (selected?.id !== next?.id) {
+      selected = next;
+      i18n.text(
+        dock.live,
+        next ? "Release to choose {label}." : "",
+        next
+          ? () => ({ label: next.el.getAttribute("aria-label") })
+          : undefined,
+      );
+    } else selected = next;
+  };
+  const sync = () => {
+    collect();
+    const active = pinned();
+    root.toggleAttribute("data-preview", preview);
+    root.setAttribute("aria-hidden", String(!active));
+    if (active || preview) {
+      root.hidden = false;
+      root.inert = !active;
+      render();
+    } else if (!view.exit) root.hidden = true;
+  };
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = undefined;
+    pending = null;
+    selected = null;
+    preview = false;
+    root.removeAttribute("data-preview");
+    sync();
+  };
+  const move = (pointer) => {
+    if (pointer.drag) return;
+    pending = pointer;
+    if (preview) {
+      render();
+      return;
+    }
+    if (Math.hypot(pointer.lastX - pointer.x, pointer.lastY - pointer.y) < 28)
+      return;
+    pointer.swipeStarted = true;
+    if (timer !== undefined) return;
+    timer = setTimeout(() => {
+      timer = undefined;
+      if (signal.aborted || dock.pointer !== pending || pending.drag) return;
+      preview = true;
+      sync();
+    }, 180);
+  };
+  signal.addEventListener(
+    "abort",
+    () => {
+      clearTimeout(timer);
+      preview = false;
+      pending = null;
+    },
+    { once: true },
+  );
+  return {
+    move,
+    cancel,
+    sync,
+    root,
+    release(x, y) {
+      if (!preview || !pending) return null;
+      pending.lastX = x;
+      pending.lastY = y;
+      render();
+      return selected?.id || null;
+    },
+    get shown() {
+      return preview;
+    },
+    get selection() {
+      return selected?.id || null;
+    },
+  };
+}

package/src/ui/tutorialGraphics.js

@@ -0,0 +1,56 @@
+const node = (x, y, name, extra = "") =>
+  `<g class="tutorial-node ${extra}" transform="translate(${x} ${y})"><circle r="18"/><svg x="-9" y="-9" width="18" height="18" viewBox="0 0 24 24"><use href="#nook-icon-${name}"/></svg></g>`;
+const nook = `<path class="tutorial-nook" d="M244 142a24 24 0 0 1 24-24v24Z"/><svg x="251" y="125" width="13" height="13" viewBox="0 0 24 24"><use href="#nook-icon-nook"/></svg>`;
+const frame = `<rect class="tutorial-screen" x="12" y="6" width="256" height="136" rx="12"/><path class="tutorial-lines" d="M30 26h72m-72 10h48m-48 10h60"/>`;
+const arc = `<path class="tutorial-path" d="M156 124a92 92 0 0 1 92-92"/>${node(156, 124, "menu", "tutorial-pick-actions")}${node(183, 59, "feedback")}${node(248, 32, "settings", "tutorial-pick-settings")}`;
+const diagrams = {
+  touch: `${frame}${arc}${nook}<path class="tutorial-direction" d="M240 124h-58m7-5-7 5 7 5m59-13V60m-5 7 5-7 5 7"/><g class="tutorial-swipe-cursor"><circle class="tutorial-contact" cx="248" cy="124" r="8"/><circle class="tutorial-contact-ring" cx="248" cy="124" r="13"/></g>`,
+  keyboard: `${frame}${arc}${nook}<g class="tutorial-keys"><rect x="28" y="94" width="36" height="30" rx="6"/><rect class="tutorial-enter" x="70" y="94" width="56" height="30" rx="6"/><text x="46" y="114">→</text><text x="98" y="114" class="tutorial-enter-label">Enter</text></g><circle class="tutorial-key-focus tutorial-focus-one" cx="156" cy="124" r="23"/><circle class="tutorial-key-focus tutorial-focus-two" cx="183" cy="59" r="23"/>`,
+  drag: `${frame}<path class="tutorial-direction" d="m235 115-184-82m4 7-4-7 9-1"/><g class="tutorial-targets"><rect x="16" y="10" width="28" height="28" rx="7"/><rect x="236" y="10" width="28" height="28" rx="7"/><rect x="16" y="110" width="28" height="28" rx="7"/></g><g class="tutorial-drag-home">${nook}</g><g class="tutorial-drag-preview">${node(30, 24, "nook")}</g><circle class="tutorial-hold" cx="248" cy="124" r="15"/><g class="tutorial-drag-cursor"><circle class="tutorial-contact" cx="248" cy="124" r="8"/></g>`,
+};
+export function tutorialGraphic(make, kind) {
+  const figure = make("figure", `tutorial-graphic tutorial-${kind}-graphic`);
+  figure.className = `tutorial-graphic tutorial-graphic-${kind}`;
+  figure.setAttribute("aria-hidden", "true");
+  figure.innerHTML = `<svg viewBox="0 0 280 150" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false">${diagrams[kind]}</svg>`;
+  return figure;
+}
+export const tutorialGraphicsStyles = `
+.tutorial-graphic { margin: 12px auto 20px; max-width: var(--nook-tutorial-graphic-width,360px); border: 1px solid var(--nook-border); border-radius: 12px; overflow: hidden; background: color-mix(in srgb,var(--nook-surface) 85%,var(--nook-accent) 3%); }
+.tutorial-graphic > svg { display: block; width: 100%; height: auto; color: var(--nook-text); }
+.tutorial-screen { stroke: var(--nook-border); fill: var(--nook-surface); }
+.tutorial-lines { stroke: var(--nook-border); }
+.tutorial-path, .tutorial-direction { stroke: var(--nook-muted); stroke-dasharray: 3 5; opacity: .5; }
+.tutorial-node circle { fill: var(--nook-surface); stroke: var(--nook-border); }
+.tutorial-node svg { color: var(--nook-text); }
+.tutorial-nook { fill: var(--nook-accent); stroke: var(--nook-accent); }
+.tutorial-nook + svg { color: var(--nook-on-accent); }
+.tutorial-contact { fill: var(--nook-surface); stroke: var(--nook-accent); stroke-width: 3; }
+.tutorial-contact-ring { stroke: var(--nook-accent); opacity: .3; }
+.tutorial-swipe-cursor { animation: tutorial-swipe 6s ease-in-out infinite; }
+.tutorial-graphic-touch .tutorial-pick-actions circle { animation: tutorial-actions 6s ease-in-out infinite; }
+.tutorial-graphic-touch .tutorial-pick-settings circle { animation: tutorial-settings 6s ease-in-out infinite; }
+@keyframes tutorial-swipe { 0%,8%,46%,54%,96%,100% { transform: translate(0,0); opacity: 0; } 12%,42%,58%,92% { opacity: 1; } 30%,40% { transform: translate(-92px,0); } 78%,90% { transform: translate(0,-92px); } }
+@keyframes tutorial-actions { 0%,20%,46%,100% { fill: var(--nook-surface); stroke: var(--nook-border); } 30%,40% { fill: color-mix(in srgb,var(--nook-accent) 16%,var(--nook-surface)); stroke: var(--nook-accent); } }
+@keyframes tutorial-settings { 0%,65%,96%,100% { fill: var(--nook-surface); stroke: var(--nook-border); } 78%,90% { fill: color-mix(in srgb,var(--nook-accent) 16%,var(--nook-surface)); stroke: var(--nook-accent); } }
+.tutorial-keys rect { fill: var(--nook-surface); stroke: var(--nook-border); }
+.tutorial-keys text { fill: var(--nook-text); stroke: none; text-anchor: middle; font: 12px var(--nook-font); }
+.tutorial-key-focus { stroke: var(--nook-accent); }
+.tutorial-focus-one { animation: tutorial-focus-one 5s ease-in-out infinite; }
+.tutorial-focus-two { animation: tutorial-focus-two 5s ease-in-out infinite; opacity: 0; }
+.tutorial-enter { animation: tutorial-key-press 5s ease-in-out infinite; }
+@keyframes tutorial-focus-one { 0%,25%,95%,100% { opacity: 1; } 35%,85% { opacity: 0; } }
+@keyframes tutorial-focus-two { 0%,25%,95%,100% { opacity: 0; } 35%,85% { opacity: 1; } }
+@keyframes tutorial-key-press { 0%,55%,90%,100% { stroke: var(--nook-border); } 65%,80% { stroke: var(--nook-accent); } }
+.tutorial-targets rect { stroke: var(--nook-accent); stroke-dasharray: 3 4; opacity: .4; }
+.tutorial-hold { stroke: var(--nook-accent); stroke-dasharray: 94; stroke-dashoffset: 94; animation: tutorial-hold 6s linear infinite; }
+.tutorial-drag-cursor { animation: tutorial-drag 6s ease-in-out infinite; }
+.tutorial-drag-preview { opacity: .3; animation: tutorial-preview 6s ease-in-out infinite; }
+.tutorial-drag-home { animation: tutorial-home 6s ease-in-out infinite; }
+@keyframes tutorial-hold { 0%,5%,90%,100% { stroke-dashoffset: 94; opacity: 0; } 10% { stroke-dashoffset: 94; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 40%,80% { stroke-dashoffset: 0; opacity: 0; } }
+@keyframes tutorial-drag { 0%,30%,95%,100% { transform: translate(0,0); opacity: 0; } 5%,65% { opacity: 1; } 65%,85% { transform: translate(-218px,-100px); } 85% { opacity: 0; } }
+@keyframes tutorial-preview { 0%,25%,95%,100% { opacity: .15; } 40%,85% { opacity: 1; } }
+@keyframes tutorial-home { 0%,65%,95%,100% { opacity: 1; } 72%,85% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .tutorial-graphic * { animation: none !important; } }
+@media (max-width:480px) { .tutorial-graphic { max-width: var(--nook-tutorial-graphic-width,280px); margin-block: 8px 12px; } }
+`;