@540deg/ds 0.0.0-stage → 0.1.0

package/dist/components/organisms/Cycle/Cycle.js

@@ -0,0 +1,79 @@
+import Cycle_module_default from "./Cycle.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Cycle/Cycle.tsx
+var CX = 440;
+var CY = 320;
+var R = 215;
+var NODE_R = 34;
+var LENGTH = 2 * Math.PI * R;
+/**
+* Cycle is a ring of phases with an arc of progress. The phases before the active one are done;
+* marks paint a node red, green or yellow.
+*/
+function Cycle({ phases, active = -1, all = false, highlightFirst = false, marks = {}, label, className }) {
+	const n = phases.length;
+	const progress = all ? 1 : Math.max(0, active) / n;
+	return /* @__PURE__ */ jsxs("svg", {
+		className: [Cycle_module_default.cycle, className ?? ""].filter(Boolean).join(" "),
+		viewBox: "0 0 880 640",
+		role: "img",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				className: Cycle_module_default.ring,
+				cx: CX,
+				cy: CY,
+				r: R
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: Cycle_module_default.arc,
+				cx: CX,
+				cy: CY,
+				r: R,
+				transform: `rotate(-90 ${CX} ${CY})`,
+				strokeDasharray: LENGTH,
+				strokeDashoffset: LENGTH * (1 - progress)
+			}),
+			phases.map((phase, i) => {
+				const angle = -Math.PI / 2 + i / n * 2 * Math.PI;
+				const x = CX + R * Math.cos(angle);
+				const y = CY + R * Math.sin(angle);
+				const lx = CX + 300 * Math.cos(angle);
+				const ly = CY + 300 * Math.sin(angle);
+				const anchor = Math.abs(Math.cos(angle)) < .2 ? "middle" : Math.cos(angle) > 0 ? "start" : "end";
+				let state = all || i < active ? "done" : i === active ? "active" : "idle";
+				if (all && highlightFirst && i === 0) state = "active";
+				return /* @__PURE__ */ jsxs("g", {
+					className: Cycle_module_default.node,
+					"data-state": state,
+					"data-mark": marks[i],
+					children: [
+						/* @__PURE__ */ jsx("circle", {
+							cx: x,
+							cy: y,
+							r: NODE_R
+						}),
+						/* @__PURE__ */ jsx("text", {
+							className: Cycle_module_default.number,
+							x,
+							y,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							children: i + 1
+						}),
+						/* @__PURE__ */ jsx("text", {
+							className: Cycle_module_default.label,
+							x: lx,
+							y: ly,
+							textAnchor: anchor,
+							dominantBaseline: "central",
+							children: phase
+						})
+					]
+				}, phase);
+			})
+		]
+	});
+}
+//#endregion
+export { Cycle };

package/dist/components/organisms/Cycle/Cycle.module.js

@@ -0,0 +1,17 @@
+//#region src/components/organisms/Cycle/Cycle.module.css
+var cycle = "_cycle_1bjzo_4";
+var ring = "_ring_1bjzo_11";
+var arc = "_arc_1bjzo_17";
+var node = "_node_1bjzo_25";
+var number = "_number_1bjzo_70";
+var label = "_label_1bjzo_87";
+var Cycle_module_default = {
+	cycle,
+	ring,
+	arc,
+	node,
+	number,
+	label
+};
+//#endregion
+export { arc, cycle, Cycle_module_default as default, label, node, number, ring };

package/dist/components/organisms/Cycle/index.d.ts

@@ -0,0 +1,3 @@
+export { Cycle } from './Cycle';
+export { CYCLE_DEFAULTS, CYCLE_MARKS } from './types';
+export type { CycleMark, CycleProps } from './types';

package/dist/components/organisms/Cycle/types.d.ts

@@ -0,0 +1,18 @@
+export declare const CYCLE_MARKS: readonly ["red", "green", "yellow"];
+export type CycleMark = (typeof CYCLE_MARKS)[number];
+export type CycleProps = {
+    /** The phases, in order around the ring. */
+    phases: string[];
+    /** The active phase (index). Earlier ones are done. */
+    active?: number;
+    /** All phases done. */
+    all?: boolean;
+    /** With all, keep the first one as active. */
+    highlightFirst?: boolean;
+    /** Marks by index: red (a problem), green (solved), yellow (the concern). */
+    marks?: Record<number, CycleMark>;
+    /** Accessible name. */
+    label: string;
+    className?: string;
+};
+export declare const CYCLE_DEFAULTS: {};

package/dist/components/organisms/Cycle/types.js

@@ -0,0 +1,9 @@
+//#region src/components/organisms/Cycle/types.ts
+var CYCLE_MARKS = [
+	"red",
+	"green",
+	"yellow"
+];
+var CYCLE_DEFAULTS = {};
+//#endregion
+export { CYCLE_DEFAULTS, CYCLE_MARKS };

package/dist/components/organisms/Deck/Deck.d.ts

@@ -0,0 +1,6 @@
+import type { DeckProps } from './types';
+/**
+ * Deck is the frame of a talk: the blobs behind, the top bar that hides while navigating,
+ * the stops (Slides), the side index, keyboard navigation, the remembered theme and the footer.
+ */
+export declare function Deck({ items, children, footer, defaultTheme, storageKey, navLabel, indexLabel, blobs, homeHref, homeLabel, className, }: DeckProps): import("react").JSX.Element;

package/dist/components/organisms/Deck/Deck.js

@@ -0,0 +1,159 @@
+import { Bullets } from "../../atoms/Bullets/Bullets.js";
+import { ThemeToggle } from "../../atoms/ThemeToggle/ThemeToggle.js";
+import { Menu } from "../../molecules/Menu/Menu.js";
+import { NavMobile } from "../../molecules/NavMobile/NavMobile.js";
+import { Blobs } from "../Blobs/Blobs.js";
+import { DeckFooter } from "../DeckFooter/DeckFooter.js";
+import Deck_module_default from "./Deck.module.js";
+import { DECK_DEFAULTS } from "./types.js";
+import { useDeckNavigation } from "./useDeckNavigation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Deck/Deck.tsx
+/** The side index never paints more than this many marks; longer talks share them out evenly. */
+var MAX_MARKS = 20;
+function readTheme(key, fallback) {
+	if (!key) return fallback;
+	try {
+		const v = localStorage.getItem(key);
+		if (v === "claro") return "light";
+		if (v === "oscuro") return "dark";
+	} catch {}
+	return fallback;
+}
+/**
+* Deck is the frame of a talk: the blobs behind, the top bar that hides while navigating,
+* the stops (Slides), the side index, keyboard navigation, the remembered theme and the footer.
+*/
+function Deck({ items, children, footer, defaultTheme = DECK_DEFAULTS.defaultTheme, storageKey = DECK_DEFAULTS.storageKey, navLabel = DECK_DEFAULTS.navLabel, indexLabel = DECK_DEFAULTS.indexLabel, blobs = DECK_DEFAULTS.blobs, homeHref = DECK_DEFAULTS.homeHref, homeLabel = DECK_DEFAULTS.homeLabel, className }) {
+	const mainRef = useRef(null);
+	const footerRef = useRef(null);
+	const barRef = useRef(null);
+	const [theme, setTheme] = useState(() => readTheme(storageKey, defaultTheme));
+	const [barHidden, setBarHidden] = useState(false);
+	const [indexVisible, setIndexVisible] = useState(false);
+	const { stops, current, goTo } = useDeckNavigation(mainRef, footerRef);
+	const toggleTheme = (dark) => {
+		setTheme(dark ? "dark" : "light");
+		if (storageKey) try {
+			localStorage.setItem(storageKey, dark ? "oscuro" : "claro");
+		} catch {}
+	};
+	const wakeAt = useRef(0);
+	const pointerTop = useRef(false);
+	const atCover = useCallback(() => window.scrollY < window.innerHeight * .6, []);
+	useEffect(() => {
+		const WAIT = 1e3;
+		let raf = 0;
+		const busy = () => {
+			const bar = barRef.current;
+			return pointerTop.current || Boolean(document.querySelector("dialog[open]")) || Boolean(bar && (bar.contains(document.activeElement) || bar.matches(":hover")));
+		};
+		const watch = (now) => {
+			if (atCover()) setBarHidden(false);
+			else if (busy()) wakeAt.current = now;
+			else if (now - wakeAt.current > WAIT) setBarHidden(true);
+			setIndexVisible(window.scrollY > window.innerHeight * .6);
+			raf = requestAnimationFrame(watch);
+		};
+		raf = requestAnimationFrame(watch);
+		const hide = () => {
+			if (!atCover() && !pointerTop.current) setBarHidden(true);
+		};
+		const onMove = (e) => {
+			pointerTop.current = e.clientY < 120;
+			if (pointerTop.current) {
+				wakeAt.current = performance.now();
+				setBarHidden(false);
+			}
+		};
+		const onLeave = () => {
+			pointerTop.current = false;
+		};
+		document.addEventListener("keydown", hide, true);
+		window.addEventListener("scroll", hide, { passive: true });
+		document.addEventListener("pointermove", onMove, { passive: true });
+		document.addEventListener("pointerleave", onLeave);
+		return () => {
+			cancelAnimationFrame(raf);
+			document.removeEventListener("keydown", hide, true);
+			window.removeEventListener("scroll", hide);
+			document.removeEventListener("pointermove", onMove);
+			document.removeEventListener("pointerleave", onLeave);
+		};
+	}, [atCover]);
+	const toggle = /* @__PURE__ */ jsx(ThemeToggle, {
+		dark: theme === "dark",
+		onToggle: toggleTheme
+	});
+	const classes = [Deck_module_default.deck, className ?? ""].filter(Boolean).join(" ");
+	const marks = Math.min(stops.length, MAX_MARKS);
+	const grouped = stops.length > MAX_MARKS;
+	const markOf = (stop) => grouped ? Math.min(marks - 1, Math.floor(stop * marks / stops.length)) : stop;
+	const firstStopOf = (mark) => grouped ? Math.ceil(mark * stops.length / marks) : mark;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		"data-theme": theme,
+		"data-deck": "",
+		children: [
+			blobs ? /* @__PURE__ */ jsx(Blobs, {}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: barRef,
+				className: Deck_module_default.bar,
+				"data-hidden": barHidden ? "" : void 0,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: Deck_module_default.row,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: Deck_module_default.wide,
+						children: /* @__PURE__ */ jsx(Menu, {
+							items,
+							homeHref,
+							homeLabel,
+							label: navLabel,
+							end: toggle
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: Deck_module_default.narrow,
+						children: /* @__PURE__ */ jsx(NavMobile, {
+							items,
+							homeHref,
+							homeLabel,
+							label: navLabel,
+							end: toggle
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("main", {
+				ref: mainRef,
+				className: Deck_module_default.main,
+				"data-scale": "projection",
+				"data-deck-stops": "",
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: footerRef,
+				children: /* @__PURE__ */ jsx(DeckFooter, {
+					homeHref,
+					homeLabel,
+					...footer
+				})
+			}),
+			stops.length > 2 ? /* @__PURE__ */ jsx("div", {
+				className: Deck_module_default.index,
+				"data-visible": indexVisible ? "" : void 0,
+				children: /* @__PURE__ */ jsx(Bullets, {
+					orientation: "vertical",
+					count: marks,
+					current: markOf(current) + 1,
+					onSelect: (mark) => goTo(firstStopOf(mark - 1)),
+					label: indexLabel,
+					itemLabel: grouped ? "Tramo" : "Parada",
+					"aria-label": indexLabel
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Deck };

package/dist/components/organisms/Deck/Deck.module.js

@@ -0,0 +1,19 @@
+//#region src/components/organisms/Deck/Deck.module.css
+var deck = "_deck_1rkwo_4";
+var bar = "_bar_1rkwo_13";
+var row = "_row_1rkwo_39";
+var narrow = "_narrow_1rkwo_49";
+var wide = "_wide_1rkwo_54";
+var main = "_main_1rkwo_70";
+var index = "_index_1rkwo_76";
+var Deck_module_default = {
+	deck,
+	bar,
+	row,
+	narrow,
+	wide,
+	main,
+	index
+};
+//#endregion
+export { bar, deck, Deck_module_default as default, index, main, narrow, row, wide };

package/dist/components/organisms/Deck/index.d.ts

@@ -0,0 +1,4 @@
+export { Deck } from './Deck';
+export { DECK_DEFAULTS, DECK_THEMES } from './types';
+export type { DeckProps, DeckTheme } from './types';
+export { useDeckNavigation } from './useDeckNavigation';

package/dist/components/organisms/Deck/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { MenuDestination } from '../../molecules/Menu';
+import type { DeckFooterProps } from '../DeckFooter';
+export declare const DECK_THEMES: readonly ["dark", "light"];
+export type DeckTheme = (typeof DECK_THEMES)[number];
+export type DeckProps = {
+    /** The destinations of the top bar: the main stops of the talk. */
+    items: MenuDestination[];
+    /** The stops: Slides (and the photos that go with a block title). */
+    children: ReactNode;
+    /** The last stop. */
+    footer: DeckFooterProps;
+    /** Theme at first visit. Talks default to dark. */
+    defaultTheme?: DeckTheme;
+    /** localStorage key where the viewer's theme is remembered. Empty string disables it. */
+    storageKey?: string;
+    /** Accessible name of the top navigation. */
+    navLabel?: string;
+    /** Accessible name of the side index. */
+    indexLabel?: string;
+    /** Paint the background blobs. */
+    blobs?: boolean;
+    /** Where the logo links to: the cover. */
+    homeHref?: string;
+    /** Accessible name of the logo link. */
+    homeLabel?: string;
+    className?: string;
+};
+export declare const DECK_DEFAULTS: {
+    readonly defaultTheme: "dark";
+    readonly storageKey: "540:tema";
+    readonly navLabel: "Paradas de la charla";
+    readonly indexLabel: "Recorrido de la charla";
+    readonly blobs: true;
+    readonly homeHref: "#portada";
+    readonly homeLabel: "540, ir al inicio";
+};

package/dist/components/organisms/Deck/types.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Deck/types.ts
+var DECK_THEMES = ["dark", "light"];
+var DECK_DEFAULTS = {
+	defaultTheme: "dark",
+	storageKey: "540:tema",
+	navLabel: "Paradas de la charla",
+	indexLabel: "Recorrido de la charla",
+	blobs: true,
+	homeHref: "#portada",
+	homeLabel: "540, ir al inicio"
+};
+//#endregion
+export { DECK_DEFAULTS, DECK_THEMES };

package/dist/components/organisms/Deck/useDeckNavigation.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+/**
+ * The journey of a talk, ported from the talks' navegacion-540.js (without GSAP):
+ * - stops are the Slides inside <main> (at any depth), split by their outermost [data-stop] descendants, plus the footer;
+ * - the keyboard moves between stops (and pages inside a stop taller than the window);
+ * - the current stop is the one holding the center of the window.
+ */
+export declare function useDeckNavigation(mainRef: RefObject<HTMLElement | null>, footerRef: RefObject<HTMLElement | null>): {
+    stops: HTMLElement[];
+    current: number;
+    goTo: (i: number) => void;
+    next: () => void;
+    prev: () => void;
+    nameOf: (el: HTMLElement, i: number) => string;
+};

package/dist/components/organisms/Deck/useDeckNavigation.js

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Deck/useDeckNavigation.ts
+var WRAPPERS = /* @__PURE__ */ new Set(["DS-SLOT", "DS-ISLAND"]);
+/** The Slides under parent, at any depth: a wrapper (a div with a label, an island) does not hide them. Other sections are not stops. */
+function slidesOf(parent) {
+	return Array.from(parent.querySelectorAll("[data-slide]"));
+}
+/** The element after el, looking through the ds-slot/ds-island wrappers (not other wrappers: a photo goes next to its title). */
+function nextThroughWrappers(el) {
+	let cur = el;
+	while (!cur.nextElementSibling && cur.parentElement && WRAPPERS.has(cur.parentElement.tagName)) cur = cur.parentElement;
+	let next = cur.nextElementSibling;
+	while (next && WRAPPERS.has(next.tagName)) next = next.firstElementChild ?? next.nextElementSibling;
+	return next;
+}
+function photoAfter(el) {
+	const next = nextThroughWrappers(el);
+	return next && next.hasAttribute("data-deck-photo") ? next : null;
+}
+/**
+* The journey of a talk, ported from the talks' navegacion-540.js (without GSAP):
+* - stops are the Slides inside <main> (at any depth), split by their outermost [data-stop] descendants, plus the footer;
+* - the keyboard moves between stops (and pages inside a stop taller than the window);
+* - the current stop is the one holding the center of the window.
+*/
+function useDeckNavigation(mainRef, footerRef) {
+	const [stops, setStops] = useState([]);
+	const [current, setCurrent] = useState(0);
+	const rangesRef = useRef([]);
+	const collect = useCallback(() => {
+		const main = mainRef.current;
+		if (!main) return;
+		let list = slidesOf(main);
+		list = list.flatMap((section) => {
+			const inner = Array.from(section.querySelectorAll(":scope [data-stop]:not([data-stop] [data-stop])"));
+			return inner.length ? inner : [section];
+		});
+		if (footerRef.current) list.push(footerRef.current);
+		setStops(list);
+	}, [mainRef, footerRef]);
+	const measure = useCallback(() => {
+		rangesRef.current = stops.map((el) => {
+			const r = el.getBoundingClientRect();
+			const top = r.top + window.scrollY;
+			return [top, top + r.height];
+		});
+	}, [stops]);
+	const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	const slide = useCallback((y) => {
+		const max = document.documentElement.scrollHeight - window.innerHeight;
+		const top = Math.max(0, Math.min(Math.round(y), max));
+		window.scrollTo({
+			top,
+			behavior: reduced() ? "auto" : "smooth"
+		});
+	}, []);
+	const photoOf = (el) => el.tagName === "SECTION" ? photoAfter(el) : null;
+	const goTo = useCallback((i) => {
+		const n = Math.max(0, Math.min(stops.length - 1, i));
+		const el = stops[n];
+		if (!el) return;
+		if (n === stops.length - 1) {
+			slide(document.documentElement.scrollHeight);
+			return;
+		}
+		const vh = window.innerHeight;
+		const top = el.getBoundingClientRect().top + window.scrollY;
+		if (photoOf(el)) {
+			slide(top);
+			return;
+		}
+		const r = (el.querySelector("[data-slide-stage]") ?? el).getBoundingClientRect();
+		const t = r.top + window.scrollY;
+		slide(r.height < vh ? t - (vh - r.height) / 2 : top);
+	}, [stops, slide]);
+	const currentIndex = useCallback(() => {
+		if (!rangesRef.current.length) measure();
+		const yc = window.scrollY + window.innerHeight / 2;
+		const ranges = rangesRef.current;
+		for (let i = 0; i < ranges.length; i++) if (yc >= ranges[i][0] && yc < ranges[i][1]) return i;
+		let best = 0;
+		let min = Infinity;
+		ranges.forEach(([a, b], j) => {
+			const d = Math.abs((a + b) / 2 - yc);
+			if (d < min) {
+				min = d;
+				best = j;
+			}
+		});
+		return best;
+	}, [measure]);
+	const box = (i) => {
+		const el = stops[i];
+		const r = (el.querySelector("[data-slide-stage]") ?? el).getBoundingClientRect();
+		return [r.top + window.scrollY, r.bottom + window.scrollY];
+	};
+	const next = useCallback(() => {
+		const i = currentIndex();
+		const [, bottom] = box(i);
+		const y = window.scrollY;
+		const vh = window.innerHeight;
+		if (i > 0 && bottom - (y + vh) > 12) {
+			slide(Math.min(y + vh * .84, bottom - vh));
+			return;
+		}
+		goTo(i + 1);
+	}, [
+		currentIndex,
+		goTo,
+		slide,
+		stops
+	]);
+	const prev = useCallback(() => {
+		const i = currentIndex();
+		const [top] = box(i);
+		const y = window.scrollY;
+		const vh = window.innerHeight;
+		if (i > 0 && y - top > 12) {
+			slide(Math.max(top, y - vh * .84));
+			return;
+		}
+		goTo(i - 1);
+	}, [
+		currentIndex,
+		goTo,
+		slide,
+		stops
+	]);
+	useEffect(() => {
+		collect();
+	}, [collect]);
+	useEffect(() => {
+		if (!stops.length) return;
+		measure();
+		let lastY = -1;
+		let lastH = -1;
+		let raf = 0;
+		const tick = () => {
+			const y = window.scrollY;
+			const h = document.documentElement.scrollHeight;
+			if (h !== lastH) {
+				lastH = h;
+				measure();
+				lastY = -1;
+			}
+			if (y !== lastY) {
+				lastY = y;
+				setCurrent(currentIndex());
+			}
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		const onResize = () => {
+			measure();
+			setCurrent(currentIndex());
+		};
+		window.addEventListener("resize", onResize);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [
+		stops,
+		measure,
+		currentIndex
+	]);
+	useEffect(() => {
+		const editing = (t) => {
+			const el = t;
+			if (!el || !el.tagName) return false;
+			return el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+		};
+		const onKey = (e) => {
+			if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+			if (document.querySelector("dialog[open]")) return;
+			if (editing(e.target)) return;
+			const k = e.key;
+			if (k === "ArrowRight" || k === "ArrowDown" || k === "PageDown") {
+				e.preventDefault();
+				next();
+			} else if (k === " " || k === "Spacebar") {
+				e.preventDefault();
+				if (e.shiftKey) prev();
+				else next();
+			} else if (k === "ArrowLeft" || k === "ArrowUp" || k === "PageUp") {
+				e.preventDefault();
+				prev();
+			} else if (k === "Home") {
+				e.preventDefault();
+				goTo(0);
+			} else if (k === "End") {
+				e.preventDefault();
+				goTo(stops.length - 1);
+			}
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [
+		next,
+		prev,
+		goTo,
+		stops.length
+	]);
+	const nameOf = (el, i) => {
+		const txt = (el.querySelector("h1,h2,h3") ?? el.querySelector("p"))?.textContent?.trim() ?? el.id ?? "";
+		return `${i + 1} de ${stops.length}${txt ? `. ${txt.slice(0, 44)}` : ""}`;
+	};
+	return {
+		stops,
+		current,
+		goTo,
+		next,
+		prev,
+		nameOf
+	};
+}
+//#endregion
+export { useDeckNavigation };

package/dist/components/organisms/DeckFooter/DeckFooter.d.ts

@@ -0,0 +1,6 @@
+import type { DeckFooterProps } from './types';
+/**
+ * DeckFooter is the last stop of a talk: a full screen with the halo, the logo, the tagline,
+ * the networks, the thanks and the signature, all centered.
+ */
+export declare function DeckFooter({ tagline, networks, thanks, copyright, homeHref, homeLabel, className, }: DeckFooterProps): import("react").JSX.Element;