@echodial/deck 0.1.0

package/dist/layers/space3d.css

@@ -0,0 +1,280 @@
+/* ==========================================================================
+   Deck — 21 Space (3D transforms)
+   3D earns its place when depth carries meaning: a card that has two sides, a
+   stack you are working down through, a control that physically depresses.
+   It does not earn its place as decoration on a landing page.
+
+   Every transform here uses translate / rotate / scale as individual
+   properties rather than the transform shorthand, so two effects on the same
+   element compose instead of overwriting each other.
+   ========================================================================== */
+
+@layer deck.effects {
+
+  /* --- Scene ---------------------------------------------------------------
+     A scene establishes the vanishing point. Children need preserve-3d to
+     stay in the same space instead of being flattened.
+     ---------------------------------------------------------------------- */
+  .scene {
+    perspective: var(--perspective, 1000px);
+    perspective-origin: var(--vanish, 50% 50%);
+  }
+  .scene-near { --perspective: 560px; }
+  .scene-far { --perspective: 2000px; }
+  .space { transform-style: preserve-3d; }
+  .flat { transform-style: flat; }
+  .backface-hidden { backface-visibility: hidden; }
+
+  /* --- Flip card -----------------------------------------------------------
+     Two faces, one footprint. Front and back are stacked in the same grid
+     cell so the card is exactly as tall as its taller side.
+     ---------------------------------------------------------------------- */
+  .flip {
+    display: grid;
+    transform-style: preserve-3d;
+    transition: rotate var(--dur-4) var(--ease-spring);
+  }
+  .flip > .flip-front, .flip > .flip-back {
+    grid-area: 1 / 1;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+  .flip > .flip-back { rotate: y 180deg; }
+  .flip.is-flipped { rotate: y 180deg; }
+  .flip-x { transition: rotate var(--dur-4) var(--ease-spring); }
+  .flip-x > .flip-back { rotate: x 180deg; }
+  .flip-x.is-flipped { rotate: x 180deg; }
+
+  /* Hover flip for pointer devices only — on touch it needs a real tap */
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .flip-hover:hover { rotate: y 180deg; }
+  }
+
+  /* --- Tilt ----------------------------------------------------------------
+     deck.js writes --tilt-x and --tilt-y from the pointer position. Both are
+     registered angles, so they interpolate smoothly back to rest.
+     ---------------------------------------------------------------------- */
+  .tilt {
+    transform-style: preserve-3d;
+    rotate: var(--tilt-axis, 1 1 0) var(--tilt-amount, 0deg);
+    transition: rotate var(--dur-3) var(--ease-out), scale var(--dur-2) var(--ease-out);
+    will-change: auto;
+  }
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .tilt.is-tilting { transition: rotate 80ms linear; }
+    .tilt:hover { scale: 1.015; }
+    /* Content that should float above the card face while it tilts */
+    .tilt .tilt-lift { transform: translateZ(var(--depth, 28px)); }
+    .tilt .tilt-lift-sm { transform: translateZ(12px); }
+  }
+
+  /* --- Depth stack ---------------------------------------------------------
+     A pile of records you are working through. The one on top is live, the
+     ones behind are context. --i is the child's own position, 0 for the top
+     card; deck.js parks a dismissed card at the end so the rest close up.
+     ---------------------------------------------------------------------- */
+  @supports (animation-delay: calc(sibling-index() * 1ms)) {
+    .pile > * { --i: calc(sibling-index() - 1); }
+  }
+  @supports not (animation-delay: calc(sibling-index() * 1ms)) {
+    .pile > :nth-child(1)   { --i: 0; }
+    .pile > :nth-child(2)   { --i: 1; }
+    .pile > :nth-child(3)   { --i: 2; }
+    .pile > :nth-child(4)   { --i: 3; }
+    .pile > :nth-child(5)   { --i: 4; }
+    .pile > :nth-child(6)   { --i: 5; }
+    .pile > :nth-child(7)   { --i: 6; }
+    .pile > :nth-child(8)   { --i: 7; }
+  }
+  .pile {
+    display: grid;
+    transform-style: preserve-3d;
+    perspective: 1200px;
+  }
+  .pile > * {
+    grid-area: 1 / 1;
+    translate: 0 calc(var(--i, 0) * 10px);
+    scale: calc(1 - var(--i, 0) * .045);
+    z-index: calc(10 - var(--i, 0));
+    filter: brightness(calc(1 - var(--i, 0) * .04));
+    transition: translate var(--dur-3) var(--ease-out),
+                scale var(--dur-3) var(--ease-out),
+                rotate var(--dur-3) var(--ease-out),
+                opacity var(--dur-2) var(--ease-out);
+  }
+  .pile > :nth-child(n+4) { opacity: 0; pointer-events: none; }
+
+  /* Fan the pile out to see what is in it */
+  .pile.is-fanned > * {
+    translate: calc(var(--i, 0) * 14px) calc(var(--i, 0) * 22px);
+    rotate: calc(var(--i, 0) * 2.5deg);
+    scale: 1;
+    filter: none;
+  }
+  .pile.is-fanned > :nth-child(n+4):not(.is-dismissed) { opacity: 1; pointer-events: auto; }
+
+  /* Dismiss the top card away from the pile */
+  .pile > .is-dismissed {
+    translate: 120% -20px;
+    rotate: 14deg;
+    opacity: 0;
+  }
+
+  /* --- Coverflow -----------------------------------------------------------
+     A horizontal scroller where the off-center items rotate away. Uses scroll
+     snap for the mechanics and 3D only for the read.
+     ---------------------------------------------------------------------- */
+  .coverflow {
+    display: flex;
+    gap: var(--space-4);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    perspective: 1200px;
+    padding-block: var(--space-6);
+    padding-inline: max(var(--space-gutter), 20%);
+    scrollbar-width: none;
+    overscroll-behavior-inline: contain;
+  }
+  .coverflow::-webkit-scrollbar { display: none; }
+  .coverflow > * {
+    flex: 0 0 auto;
+    scroll-snap-align: center;
+    transform-style: preserve-3d;
+    transition: rotate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out);
+  }
+  /* deck.js marks the centered item; without JS everything simply sits flat */
+  .coverflow > .is-behind-start { rotate: y 32deg; scale: .88; }
+  .coverflow > .is-behind-end { rotate: y -32deg; scale: .88; }
+  .coverflow > .is-front { rotate: y 0deg; scale: 1; }
+
+  /* --- Cube ----------------------------------------------------------------
+     Six faces for a rotating status block or an empty-state illustration.
+     ---------------------------------------------------------------------- */
+  .cube {
+    --size: 120px;
+    position: relative;
+    inline-size: var(--size);
+    block-size: var(--size);
+    transform-style: preserve-3d;
+    transition: rotate var(--dur-5) var(--ease-spring);
+  }
+  .cube > * {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--line);
+    background: color-mix(in oklab, var(--surface) 88%, transparent);
+    backface-visibility: visible;
+  }
+  .cube > .face-front  { transform: translateZ(calc(var(--size) / 2)); }
+  .cube > .face-back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
+  .cube > .face-end    { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
+  .cube > .face-start  { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
+  .cube > .face-top    { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
+  .cube > .face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
+
+  .cube[data-face="front"]  { rotate: 0deg; }
+  .cube[data-face="end"]    { rotate: y -90deg; }
+  .cube[data-face="back"]   { rotate: y 180deg; }
+  .cube[data-face="start"]  { rotate: y 90deg; }
+  .cube[data-face="top"]    { rotate: x -90deg; }
+  .cube[data-face="bottom"] { rotate: x 90deg; }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .cube-spin { animation: dk-cube 14s linear infinite; }
+    @keyframes dk-cube {
+      from { transform: rotateX(-18deg) rotateY(0deg); }
+      to   { transform: rotateX(-18deg) rotateY(360deg); }
+    }
+  }
+
+  /* --- Depressible controls ------------------------------------------------
+     A button with real thickness. The face moves down into the shadow instead
+     of just changing color.
+     ---------------------------------------------------------------------- */
+  .btn-3d {
+    --lift: 3px;
+    position: relative;
+    border: 0;
+    box-shadow:
+      0 var(--lift) 0 0 color-mix(in oklab, var(--brand-600) 62%, var(--ink-900)),
+      0 calc(var(--lift) + 3px) 8px oklch(20% .03 var(--hue-neutral) / .22);
+    translate: 0 0;
+    transition: translate 70ms var(--ease-out), box-shadow 70ms var(--ease-out);
+  }
+  .btn-3d:active {
+    translate: 0 var(--lift);
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-600) 62%, var(--ink-900));
+  }
+
+  /* --- Parallax layers -----------------------------------------------------
+     True 3D parallax: layers sit at different Z depths inside a perspective
+     container, so the browser does the math on the compositor. No scroll
+     handler, no jank.
+     ---------------------------------------------------------------------- */
+  .parallax {
+    block-size: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    perspective: 8px;
+    perspective-origin: 0 0;
+  }
+  .parallax-layer {
+    position: absolute;
+    inset: 0;
+    transform-origin: 0 0;
+  }
+  .parallax-back  { transform: translateZ(-6px) scale(1.75); }
+  .parallax-mid   { transform: translateZ(-3px) scale(1.375); }
+  .parallax-front { transform: translateZ(0); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .parallax { perspective: none; }
+    .parallax-layer { transform: none; position: relative; }
+  }
+
+  /* --- Page turn -----------------------------------------------------------
+     For stepping through a multi-page form or a wizard. Pairs with
+     Deck.transition() so the DOM swap and the motion happen together.
+     ---------------------------------------------------------------------- */
+  @media (prefers-reduced-motion: no-preference) {
+    .turn-out { animation: dk-turn-out var(--dur-3) var(--ease-in) both; transform-origin: left center; }
+    .turn-in  { animation: dk-turn-in var(--dur-4) var(--ease-out) both; transform-origin: left center; }
+    @keyframes dk-turn-out {
+      to { transform: perspective(1400px) rotateY(-22deg); opacity: 0; }
+    }
+    @keyframes dk-turn-in {
+      from { transform: perspective(1400px) rotateY(24deg); opacity: 0; }
+    }
+    [dir="rtl"] :is(.turn-out, .turn-in) { transform-origin: right center; }
+  }
+
+  /* --- Layered elevation ---------------------------------------------------
+     Lift an element toward the viewer inside a scene, rather than faking it
+     with a bigger shadow.
+     ---------------------------------------------------------------------- */
+  .z-lift-1 { transform: translateZ(8px); }
+  .z-lift-2 { transform: translateZ(20px); }
+  .z-lift-3 { transform: translateZ(40px); }
+  .z-sink   { transform: translateZ(-16px); }
+
+  /* --- Performance guard ---------------------------------------------------
+     3D forces layers onto the GPU. Promote only while something is actually
+     moving, and hand the memory back when it stops.
+     ---------------------------------------------------------------------- */
+  .tilt.is-tilting, .flip.is-flipped, .pile.is-fanned > *,
+  .coverflow > *, .cube {
+    will-change: transform, rotate, scale;
+  }
+  .tilt:not(.is-tilting), .flip:not(.is-flipped) { will-change: auto; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flip, .flip-x, .tilt, .cube, .pile > *, .coverflow > * {
+      transition-duration: 1ms;
+      rotate: none;
+    }
+    .flip.is-flipped, .flip-x.is-flipped { rotate: y 180deg; }
+    .coverflow > * { rotate: none; scale: 1; }
+  }
+}

package/dist/layers/toasts.css

@@ -0,0 +1,201 @@
+/* ==========================================================================
+   Deck — 13 Toasts
+   A stack, not a list. Collapsed toasts sit behind the newest one and fan out
+   on hover or focus. Queue logic is in deck.js (Deck.toast).
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* The fixed container. pointer-events: none on the region and auto on each
+     toast, so the empty area does not swallow clicks on the page beneath. Sits
+     above a .tabbar when the page has one, and clears the home indicator. */
+  .toast-region {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    inline-size: min(23rem, calc(100vw - var(--space-6)));
+    pointer-events: none;
+    /* the stack grows upward from the bottom by default */
+    inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
+    inset-inline-end: var(--space-4);
+  }
+  body:has(.tabbar) .toast-region {
+    inset-block-end: calc(var(--space-4) + var(--tap) + env(safe-area-inset-bottom));
+  }
+  @media (min-width: 48rem) {
+    body:has(.tabbar) .toast-region { inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); }
+  }
+
+  .toast-region-start { inset-inline: var(--space-4) auto; }
+  .toast-region-center { inset-inline: 0; margin-inline: auto; }
+  .toast-region-top {
+    inset-block: calc(var(--space-4) + env(safe-area-inset-top)) auto;
+    flex-direction: column-reverse;
+  }
+
+  /* On a phone the stack spans the width and sits above the thumb */
+  @media (max-width: 30rem) {
+    .toast-region { inset-inline: var(--space-3); inline-size: auto; }
+  }
+
+  /* --- The toast ----------------------------------------------------------- */
+  /* One notification. The accent colour is a single custom property,
+     --toast-accent, which paints the edge, the icon and the timer together, so
+     a kind is one declaration. Built by Deck.toast() rather than written by
+     hand; touch-action: pan-y lets a horizontal swipe dismiss it while a
+     vertical drag still scrolls the page. */
+  .toast {
+    --toast-accent: var(--ink-400);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    box-shadow: var(--shadow-4);
+    font-size: var(--text-sm);
+    pointer-events: auto;
+    overflow: hidden;
+    touch-action: pan-y;
+    transform-origin: bottom center;
+    transition: translate var(--dur-3) var(--ease-out),
+                scale var(--dur-3) var(--ease-out),
+                opacity var(--dur-2) var(--ease-out),
+                margin var(--dur-3) var(--ease-out);
+  }
+  .toast::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 3px;
+    background: var(--toast-accent);
+  }
+
+  /* The leading glyph, coloured by --toast-accent so it matches the kind
+     without a rule of its own. */
+  .toast-icon { color: var(--toast-accent); margin-block-start: 1px; flex: 0 0 auto; }
+  /* The text column of a toast. min-inline-size: 0 so a long unbroken string
+     cannot push the close button off the end. */
+  .toast-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
+  .toast-title { font-weight: 620; }
+  .toast-text { color: var(--text-muted); }
+  .toast-close {
+    flex: 0 0 auto;
+    inline-size: 26px;
+    block-size: 26px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-full);
+    color: var(--text-faint);
+    cursor: pointer;
+    margin-block-start: -2px;
+    margin-inline-end: -4px;
+  }
+  .toast-close:hover { background: var(--surface-hover); color: var(--text); }
+  .toast-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
+  .toast-action {
+    font-size: var(--text-sm);
+    font-weight: 620;
+    color: var(--brand);
+    cursor: pointer;
+    padding: var(--space-1) 0;
+  }
+  .toast-action:hover { text-decoration: underline; }
+
+  /* --- Kinds --------------------------------------------------------------- */
+  .toast-good { --toast-accent: var(--good-500); }
+  .toast-warn { --toast-accent: var(--warn-500); }
+  .toast-bad  { --toast-accent: var(--bad-500); }
+  .toast-info { --toast-accent: var(--brand-500); }
+  .toast-loading { --toast-accent: var(--brand-500); }
+
+  /* --- Auto-dismiss timer -------------------------------------------------- */
+  /* The auto-dismiss bar. A CSS animation rather than a JavaScript countdown,
+     which is what allows hovering or focusing the region to pause every timer
+     in it with one declaration — so a reader moving toward an Undo button does
+     not have it vanish as they arrive. */
+  .toast-timer {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    block-size: 2px;
+    inline-size: 100%;
+    background: var(--toast-accent);
+    opacity: .5;
+    transform-origin: left center;
+    animation: dk-toast-timer linear forwards;
+    animation-duration: var(--toast-duration, 5s);
+  }
+  @keyframes dk-toast-timer { to { scale: 0 1; } }
+  /* Hovering the stack pauses every timer in it */
+  .toast-region:is(:hover, :focus-within) .toast-timer { animation-play-state: paused; }
+
+  /* --- Enter and exit ------------------------------------------------------ */
+  .toast { animation: dk-toast-in var(--dur-3) var(--ease-spring); }
+  @keyframes dk-toast-in {
+    from { opacity: 0; translate: 0 16px; scale: .94; }
+  }
+  .toast-region-top .toast { animation-name: dk-toast-in-top; }
+  @keyframes dk-toast-in-top {
+    from { opacity: 0; translate: 0 -16px; scale: .94; }
+  }
+  .toast.is-leaving {
+    opacity: 0;
+    scale: .94;
+    translate: var(--toast-exit-x, 0) 8px;
+    margin-block-end: calc((var(--toast-h, 60px) + var(--space-2)) * -1);
+    pointer-events: none;
+  }
+
+  /* --- Collapsed stack -----------------------------------------------------
+     --i counts from the newest, which is the first child because push()
+     prepends. Beyond the third toast they hide behind.
+     ---------------------------------------------------------------------- */
+  @supports (animation-delay: calc(sibling-index() * 1ms)) {
+    .toast-region-stacked .toast { --i: calc(sibling-index() - 1); }
+  }
+  @supports not (animation-delay: calc(sibling-index() * 1ms)) {
+    .toast-region-stacked .toast:nth-child(1)   { --i: 0; }
+    .toast-region-stacked .toast:nth-child(2)   { --i: 1; }
+    .toast-region-stacked .toast:nth-child(3)   { --i: 2; }
+    .toast-region-stacked .toast:nth-child(4)   { --i: 3; }
+    .toast-region-stacked .toast:nth-child(5)   { --i: 4; }
+    .toast-region-stacked .toast:nth-child(6)   { --i: 5; }
+    .toast-region-stacked .toast:nth-child(7)   { --i: 6; }
+    .toast-region-stacked .toast:nth-child(8)   { --i: 7; }
+  }
+  .toast-region-stacked .toast {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    translate: 0 calc(var(--i) * -8px);
+    scale: calc(1 - var(--i) * .04);
+    opacity: calc(1 - var(--i) * .18);
+    z-index: calc(100 - var(--i));
+  }
+  .toast-region-stacked .toast:nth-child(n+4) { opacity: 0; pointer-events: none; }
+
+  .toast-region-stacked:is(:hover, :focus-within) .toast {
+    translate: 0 calc(var(--i) * (var(--toast-h, 68px) + var(--space-2)) * -1);
+    scale: 1;
+    opacity: 1;
+  }
+
+  /* --- Swipe to dismiss ---------------------------------------------------- */
+  .toast.is-dragging { transition: none; cursor: grabbing; user-select: none; }
+
+  /* --- Undo pattern -------------------------------------------------------- */
+  .toast-undo { --toast-accent: var(--ink-500); }
+  .toast-undo .toast-action { color: var(--text); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast, .toast-region-stacked .toast { animation: none; transition: opacity var(--dur-1) linear; }
+    .toast-timer { animation: none; display: none; }
+  }
+}