@pokela/components 2.5.2 → 2.6.1

package/ExplodedView.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/**
+ * ExplodedView: räjäytyskuva. Kerrokset levyinä 3D-tilassa, päällekkäin
+ * tai viuhkana, niin että näkee mistä valmis pinta koostuu.
+ *
+ * Kerrokset ovat oikeaa HTML:ää, eivät kuvia: teksti pysyy terävänä ja
+ * sisältö on samaa koodia kuin muualla. Ei WebGL:ää eikä kirjastoja,
+ * pelkät CSS 3D -muunnokset.
+ *
+ * - Osoitin kääntää pinoa ja erkanee kerroksia.
+ * - Elementit, joilla on sama `data-kohde`, syttyvät yhdessä: osoitin
+ *   komponentin päällä näyttää sen jokaisessa kerroksessa.
+ * - Klikkaus nostaa kerroksen kerrallaan esiin ja lopuksi palauttaa
+ *   koko pinon.
+ * - Tilassa `auki` vieritys kokoaa kerrokset yhdeksi suoraksi
+ *   pinnaksi, kun kuva poistuu näkymän yläreunasta.
+ *
+ * Silmukka pyörii vain kun jokin liikkuu, ja pysähtyy kun kuva ei näy.
+ * Pysyvää liikettä ei ole, joten taukonappia ei tarvita (WCAG 2.2.2).
+ * Vähemmän liikettä pyytäneelle pino näkyy paikallaan alkutilassaan.
+ *
+ * Kuva on koriste, jonka sisältö on muualla sivulla: ruudunlukija lukee
+ * vain `label`-kuvauksen. Kerroksiin ei laiteta linkkejä eikä nappeja:
+ * ne olisivat näppäimistölle piilotettuja kohteita.
+ *
+ * `Tila` on Figmassa variantti: `auki` on pino viuhkana, `koottu`
+ * kerrokset yhdeksi pinnaksi koottuna. Ks. ExplodedView.figma.ts.
+ */
+export type ExplodedTila = 'auki' | 'koottu';
+export type ExplodedLayer = {
+    /** Kerroksen nimi levyn yläpuolella, esim. "01 Tokenit". */
+    name: string;
+    /** Mistä kerros tulee, esim. "tokens.json". Valinnainen. */
+    source?: string;
+    content: ReactNode;
+};
+export default function ExplodedView({ layers, label, tila, className, }: {
+    /** Alimmasta ylimpään. Ylin on valmis pinta. */
+    layers: ExplodedLayer[];
+    /** Kuvan kuvaus ruudunlukijalle. */
+    label: string;
+    /** Alkutila. `koottu` näyttää valmiin pinnan; klikkaus avaa pinon. */
+    tila?: ExplodedTila;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/ExplodedView.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+const lerp = (a, b, k) => a + (b - a) * k;
+export default function ExplodedView({ layers, label, tila = 'auki', className, }) {
+    const kehys = useRef(null);
+    const pino = useRef(null);
+    useEffect(() => {
+        const hero = kehys.current;
+        const el = pino.current;
+        if (!hero || !el)
+            return;
+        const kerrokset = [...el.querySelectorAll('.exploded__layer')];
+        const vahemman = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const n = kerrokset.length;
+        /* Levyn mitat luetaan CSS:stä, jotta ne ovat yhdessä paikassa. */
+        const levyL = el.offsetWidth || 960;
+        const levyK = el.offsetHeight || 600;
+        /* x, y: osoitin -1…1 jousella. p: 1 = auki, 0 = koottu. */
+        const t = {
+            x: 0, y: 0, vx: 0, vy: 0, kx: 0, ky: 0,
+            p: tila === 'auki' ? 1 : 0,
+            auki: tila === 'auki',
+            vieritys: 1,
+            nakyy: true, raf: 0, edellinen: 0,
+            mitta: 1, kapea: false,
+        };
+        function koko() {
+            const r = hero.getBoundingClientRect();
+            t.kapea = r.width < 560;
+            /* Vino pino vie enemmän tilaa kuin levy itse. */
+            const tarveL = levyL * (t.kapea ? 1.3 : 2.1);
+            const tarveK = levyK * (t.kapea ? 2.6 : 2.1);
+            t.mitta = Math.min(r.width / tarveL, r.height / tarveK);
+            piirra();
+        }
+        function piirra() {
+            const p = t.p;
+            const rx = t.kapea ? lerp(0, 58, p) - t.y * 6 * p : lerp(0, 12, p) - t.y * 8 * p;
+            const ry = t.kapea ? t.x * 3 * p : lerp(0, 52, p) + t.x * 12 * p;
+            const rz = t.kapea ? t.x * 4 * p : lerp(0, -4, p);
+            const vali = (t.kapea ? 0.36 : 0.42) * levyL * p * (1 + 0.1 * Math.abs(t.x));
+            const r = hero.getBoundingClientRect();
+            const tayttava = Math.min(r.width / levyL, r.height / levyK) * 0.92;
+            el.style.setProperty('--rx', `${rx}deg`);
+            el.style.setProperty('--ry', `${ry}deg`);
+            el.style.setProperty('--rz', `${rz}deg`);
+            el.style.setProperty('--vali', `${vali}px`);
+            el.style.setProperty('--nosto', `${(t.kapea ? 0 : 0.05) * levyK * p}px`);
+            el.style.setProperty('--s', String(lerp(tayttava, t.mitta, p)));
+            /* Koottuna alemmat levyt piiloon, ettei niiden reuna näy ylimmän alta. */
+            kerrokset.forEach((k, i) => k.classList.toggle('exploded__layer--piilossa', p < 0.02 && i < n - 1));
+        }
+        const kohde = () => (t.auki ? t.vieritys : 0);
+        function vaihe(nyt) {
+            t.raf = 0;
+            const dt = Math.min(50, t.edellinen ? nyt - t.edellinen : 16.7);
+            t.edellinen = nyt;
+            const f = dt / 16.7;
+            const k = 0.07 * f;
+            t.vx = (t.vx + (t.kx - t.x) * k) * Math.pow(0.8, f);
+            t.vy = (t.vy + (t.ky - t.y) * k) * Math.pow(0.8, f);
+            t.x += t.vx * f;
+            t.y += t.vy * f;
+            t.p += (kohde() - t.p) * Math.min(1, 0.12 * f);
+            piirra();
+            const lepaa = Math.abs(t.vx) + Math.abs(t.vy) + Math.abs(t.kx - t.x) + Math.abs(t.ky - t.y) + Math.abs(kohde() - t.p) <
+                0.0005;
+            if (t.nakyy && !document.hidden && !lepaa)
+                t.raf = requestAnimationFrame(vaihe);
+            else
+                t.edellinen = 0;
+        }
+        const herata = () => {
+            if (!t.raf && t.nakyy)
+                t.raf = requestAnimationFrame(vaihe);
+        };
+        const asetu = () => {
+            t.p = kohde();
+            piirra();
+        };
+        const liiku = vahemman ? asetu : herata;
+        const osoitin = (e) => {
+            if (e.pointerType !== 'mouse' && e.pointerType !== 'pen')
+                return;
+            const r = hero.getBoundingClientRect();
+            if (e.clientY < r.top - r.height || e.clientY > r.bottom + r.height)
+                return;
+            t.kx = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
+            t.ky = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
+            herata();
+        };
+        const poistu = () => {
+            t.kx = 0;
+            t.ky = 0;
+            herata();
+        };
+        /* Kohdistus: klikkaus kiertää kerrokset alimmasta ylimpään. Koottu
+           pino avautuu ensin, ja kierroksen lopussa palaa alkutilaansa. */
+        let aktiivinen = -1;
+        function kohdista(i) {
+            aktiivinen = i;
+            el.classList.toggle('exploded__stack--kohdistus', i >= 0);
+            kerrokset.forEach((k, j) => k.classList.toggle('exploded__layer--aktiivinen', j === i));
+        }
+        const klikkaus = () => {
+            if (!t.auki) {
+                t.auki = true;
+                kohdista(-1);
+            }
+            else if (aktiivinen >= n - 1) {
+                kohdista(-1);
+                if (tila === 'koottu')
+                    t.auki = false;
+            }
+            else {
+                kohdista(aktiivinen + 1);
+            }
+            liiku();
+        };
+        const valaise = (e) => {
+            el.querySelectorAll('.exploded--valaistu').forEach((x) => x.classList.remove('exploded--valaistu'));
+            const k = e.target.closest('[data-kohde]');
+            if (!k)
+                return;
+            el.querySelectorAll(`[data-kohde="${k.dataset.kohde}"]`).forEach((x) => x.classList.add('exploded--valaistu'));
+        };
+        const sammuta = () => el.querySelectorAll('.exploded--valaistu').forEach((x) => x.classList.remove('exploded--valaistu'));
+        /* Vieritys kokoaa, kun kuva poistuu yläreunasta. */
+        const vieritys = () => {
+            const r = hero.getBoundingClientRect();
+            const q = Math.max(0, Math.min(1, -r.top / (r.height * 0.7)));
+            t.vieritys = 1 - q * q * (3 - 2 * q);
+            if (t.auki && tila === 'auki')
+                liiku();
+        };
+        const nakyvyys = new IntersectionObserver(([e]) => {
+            t.nakyy = e.isIntersecting;
+            if (t.nakyy)
+                herata();
+        });
+        nakyvyys.observe(hero);
+        const mitat = new ResizeObserver(koko);
+        mitat.observe(hero);
+        if (!vahemman) {
+            window.addEventListener('pointermove', osoitin, { passive: true });
+            hero.addEventListener('pointerleave', poistu);
+            window.addEventListener('scroll', vieritys, { passive: true });
+        }
+        hero.addEventListener('click', klikkaus);
+        el.addEventListener('pointerover', valaise);
+        el.addEventListener('pointerleave', sammuta);
+        koko();
+        if (!vahemman)
+            vieritys();
+        asetu();
+        /* Ennen tätä pinolla ei ole mittoja, joten se on piilossa. */
+        hero.classList.add('exploded--valmis');
+        return () => {
+            cancelAnimationFrame(t.raf);
+            nakyvyys.disconnect();
+            mitat.disconnect();
+            window.removeEventListener('pointermove', osoitin);
+            hero.removeEventListener('pointerleave', poistu);
+            window.removeEventListener('scroll', vieritys);
+            hero.removeEventListener('click', klikkaus);
+            el.removeEventListener('pointerover', valaise);
+            el.removeEventListener('pointerleave', sammuta);
+        };
+    }, [tila]);
+    return (_jsx("div", { ref: kehys, className: ['exploded', `exploded--${tila}`, className].filter(Boolean).join(' '), role: "img", "aria-label": label, children: _jsx("div", { className: "exploded__stage", "aria-hidden": "true", children: _jsx("div", { ref: pino, className: "exploded__stack", children: layers.map((layer, i) => (_jsxs("div", { className: "exploded__layer", style: { '--i': i }, children: [_jsx("div", { className: "exploded__plate", children: layer.content }), _jsxs("div", { className: "exploded__name", children: [_jsx("span", { className: "meta ink", children: layer.name }), layer.source ? _jsx("span", { className: "meta meta--s", children: layer.source }) : null] })] }, layer.name))) }) }) }));
+}

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.5.2.
+React-komponentit: **Pokela Design System**, versio 2.6.1.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -22,6 +22,7 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `ListRow`
 - `Accordion`
 - `Timeline`
+- `ExplodedView`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -44,6 +45,7 @@ import Link from 'next/link';
 - **Nav, Footer** — tarvitsevat sivuston sanakirjan ja reitityksen
 - **BeforeAfter, Video** — rakentuvat Median varaan, ja Media lukee kuvamanifestia
 - **HeroName** — piirtää sivuston omaa nimeä fontin ääriviivoista (`@/content/nimi.generated.json`)
+- **SivuKerroksina** — kokoaa tämän sivuston räjäytyskuvan sen omista tokeneista ja sisällöstä; yleinen osa on ExplodedView
 - **HeroIntro, HeroIntroLiike** — ovat etusivun intro: sivuston ominaisuus, ei design systemin osa
 - **ComponentView, PrintCv** — ovat riippumattomia mutta sivuston ominaisuuksia — lähdekoodinäkymä ja CV:n tulostusasu — eivät design systemin osia
 
@@ -54,6 +56,7 @@ import Link from 'next/link';
 - `styles/list-row.css`
 - `styles/accordion.css`
 - `styles/timeline.css`
+- `styles/exploded-view.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/guidelines/components.md

@@ -7,6 +7,7 @@ Use these instead of building an equivalent.
 - `ListRow`
 - `Accordion`, `useAccordionGroup`
 - `Timeline`, `TimelineItem`
+- `ExplodedView`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -46,4 +47,22 @@ the total duration.
 </Timeline>
 ```
 
+`ExplodedView` shows layers as plates in 3D space: how a finished surface is
+built from its parts. Each layer is real markup, not an image. Give elements
+the same `data-kohde` in several layers and they light up together on hover.
+`tila="koottu"` starts with the layers collapsed into one surface. Put no
+links or buttons inside the layers; the whole view is one image to a screen
+reader, described by `label`.
+
+```jsx
+<ExplodedView
+  label="The page as three layers: tokens, components and the finished page."
+  layers={[
+    { name: '01 Tokens', source: 'tokens.json', content: <Tokens /> },
+    { name: '02 Components', content: <Components /> },
+    { name: '03 Page', content: <Page /> },
+  ]}
+/>
+```
+
 `Reveal` fades its children in on scroll. Wrap sections, not single elements.

package/index.d.ts

@@ -7,6 +7,8 @@ export { Accordion, useAccordionGroup } from './Accordion.js';
 export type { AccordionProps } from './Accordion.js';
 export { default as Timeline, TimelineItem } from './Timeline.js';
 export type { TimelineVariant } from './Timeline.js';
+export { default as ExplodedView } from './ExplodedView.js';
+export type { ExplodedTila, ExplodedLayer } from './ExplodedView.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/index.js

@@ -4,6 +4,7 @@ export { default as Icon, ICON_NAMES } from './Icon.js';
 export { default as ListRow } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';
 export { default as Timeline, TimelineItem } from './Timeline.js';
+export { default as ExplodedView } from './ExplodedView.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pokela/components",
-  "version": "2.5.2",
+  "version": "2.6.1",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
@@ -27,7 +27,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.5.2"
+    "@pokela/tokens": "^2.6.1"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/exploded-view.css

@@ -0,0 +1,77 @@
+/* Räjäytyskuva (components/ExplodedView.tsx). Levyt erottaa toisistaan
+   viiva ja taustan sävy, ei varjo: järjestelmässä ei ole varjoja.
+   Näyttämö on kiinteän kokoinen ja skaalataan
+   paikkaansa (--s), joten levyn sisältö käyttää sivun omia mittoja.
+   Kulmat, väli ja mittakaava tulevat skriptistä. */
+.exploded {
+  /* Levyn mitat: näyttämön koordinaatisto, ei layout-mitta. */
+  --levy-leveys: 960px;
+  --levy-korkeus: 600px;
+  position: relative;
+  aspect-ratio: 4 / 5;
+  background: var(--badge-surface);
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+@media (min-width: 600px) { .exploded { aspect-ratio: 16 / 9; } }
+@media (min-width: 900px) { .exploded { aspect-ratio: 21 / 9; } }
+
+.exploded__stage {
+  position: absolute; inset: 0;
+  perspective: calc(var(--levy-leveys) * 2.3);
+  perspective-origin: 50% 40%;
+  opacity: 0;
+  transition: opacity var(--dur-slow) var(--ease-standard);
+}
+.exploded--valmis .exploded__stage { opacity: 1; }
+
+.exploded__stack {
+  --rx: 0deg; --ry: 0deg; --rz: 0deg; --vali: 0px; --nosto: 0px; --s: 1;
+  position: absolute; left: 50%; top: 50%;
+  width: var(--levy-leveys); height: var(--levy-korkeus);
+  margin-left: calc(var(--levy-leveys) / -2);
+  margin-top: calc(var(--levy-korkeus) / -2);
+  transform-style: preserve-3d;
+  transform: scale(var(--s)) translateY(var(--nosto)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
+    translateZ(calc(var(--vali) * -1));
+}
+
+.exploded__layer {
+  --i: 0;
+  position: absolute; inset: 0;
+  transform-style: preserve-3d;
+  transform: translateZ(calc(var(--i) * var(--vali) + var(--korotus, 0px)));
+  transition: transform var(--dur-base) var(--ease-out);
+}
+.exploded__layer--aktiivinen { --korotus: var(--space-40); }
+.exploded__layer--piilossa { visibility: hidden; }
+
+.exploded__plate {
+  position: absolute; inset: 0; overflow: hidden;
+  background: var(--paper); color: var(--ink);
+  border: var(--hairline) solid var(--line);
+  transition: opacity var(--dur-slow) var(--ease-standard);
+}
+.exploded__name {
+  position: absolute; left: 0; bottom: 100%;
+  display: grid; gap: var(--space-4);
+  padding-bottom: var(--space-16);
+  white-space: nowrap;
+  transition: opacity var(--dur-slow) var(--ease-standard);
+}
+
+/* Lähde on taustapinnalla, ei paperilla: ink-faint jää siinä alle 4.5:1. */
+.exploded__name .meta--s { color: var(--ink-muted); }
+
+.exploded__stack--kohdistus .exploded__layer:not(.exploded__layer--aktiivinen) .exploded__plate,
+.exploded__stack--kohdistus .exploded__layer:not(.exploded__layer--aktiivinen) .exploded__name { opacity: 0.35; }
+
+/* Sama kohde kaikissa kerroksissa: katkoviiva muuttuu yhtenäiseksi. */
+.exploded [data-kohde] {
+  outline: var(--hairline) dashed transparent;
+  outline-offset: var(--space-4);
+  transition: outline-color var(--dur-fast) var(--ease-standard);
+}
+.exploded--valaistu { outline: var(--hairline-strong) solid var(--ink); }

package/styles.css

@@ -6,3 +6,4 @@
 @import './styles/list-row.css';
 @import './styles/accordion.css';
 @import './styles/timeline.css';
+@import './styles/exploded-view.css';