@zyncat/ui 0.11.0 → 0.13.0

package/src/components/compound/support-rail/SupportRail.usage.md

@@ -0,0 +1,18 @@
+# SupportRail - @zyncat/ui/support-rail
+
+Group: compound
+Docs: https://ui.zyncat.app/support-rail
+
+An edge tab that grows a support panel out of its own measured box.
+
+Pick it over Sheet when the affordance must stay visible and the panel must not take the screen
+over. actions renders the rows; selecting one fires onSelect and leaves the rail open, so render
+what happens next in children. title names the panel, status is the mono line under it, needleLabel
+is the vertical word on the tab, live adds the availability dot, footer pins a bottom strip. side
+right|left flips the needle, the collapse origin and the drag axis. Drag the grabber outward past
+88px or flick it over 500px/s to dismiss; Escape and the close button are the keyboard equivalents.
+Row padding is --support-rail-row-pad-block/-inline, not a density prop.
+
+```tsx
+<SupportRail actions={actions} status="Open - closes 20:00" live onSelect={route} />
+```

package/src/components/compound/support-rail/support-rail.css

@@ -0,0 +1,421 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .support-rail {
+    --support-rail-width: 318px;
+    --support-rail-needle-width: 42px;
+    --support-rail-needle-height: 150px;
+    --support-rail-needle-duck: 0.55;
+    --support-rail-needle-tracking: 0.22em;
+    --support-rail-caps-tracking: 0.13em;
+    --support-rail-grabber-width: 13px;
+    --support-rail-grabber-pill: 34px;
+    --support-rail-live-size: 6px;
+    --support-rail-live-reach: 2.6;
+    --support-rail-rule-width: 1.5px;
+    --support-rail-rule-height: 20px;
+
+    --support-rail-row-pad-block: var(--space-4);
+    --support-rail-row-pad-inline: var(--space-4);
+    --support-rail-row-nudge: 5px;
+
+    --support-rail-surface: var(--bg-subtle);
+    --support-rail-surface-raised: var(--bg-surface);
+    --support-rail-line: var(--border-default);
+    --support-rail-line-soft: var(--border-subtle);
+    --support-rail-accent: var(--accent);
+    --support-rail-live-color: var(--success);
+    --support-rail-radius: var(--radius-2xl);
+
+    --support-rail-open-duration: calc(var(--duration-slower) * 1.4);
+    --support-rail-close-duration: var(--duration-slower);
+    --support-rail-needle-delay: calc(var(--duration-slow) * 0.5);
+    --support-rail-stagger: calc(var(--duration-fast) * 0.3);
+
+    --support-rail-collapse-x: 1;
+    --support-rail-collapse-y: 1;
+    --support-rail-drag: 0px;
+    --support-rail-index: 0;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: min(var(--support-rail-width), 100%);
+    isolation: isolate;
+    pointer-events: none;
+    font-family: var(--font-sans);
+    color: var(--text-strong);
+  }
+
+  .support-rail[data-side='right'] {
+    right: 0;
+  }
+  .support-rail[data-side='left'] {
+    left: 0;
+  }
+
+  .support-rail__needle {
+    position: absolute;
+    top: 50%;
+    width: var(--support-rail-needle-width);
+    height: var(--support-rail-needle-height);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    background: var(--support-rail-surface);
+    border: var(--border-hairline) solid var(--support-rail-line);
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    pointer-events: auto;
+    color: inherit;
+    font: inherit;
+    opacity: 1;
+    translate: 0 -50%;
+    scale: 1;
+    transition:
+      scale var(--support-rail-open-duration) var(--ease-spring) var(--support-rail-needle-delay),
+      opacity var(--duration-base) linear var(--support-rail-needle-delay),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .support-rail[data-side='right'] .support-rail__needle {
+    right: 0;
+    border-right: 0;
+    border-radius: var(--support-rail-radius) 0 0 var(--support-rail-radius);
+    transform-origin: 100% 50%;
+  }
+  .support-rail[data-side='left'] .support-rail__needle {
+    left: 0;
+    border-left: 0;
+    border-radius: 0 var(--support-rail-radius) var(--support-rail-radius) 0;
+    transform-origin: 0 50%;
+  }
+
+  .support-rail__needle:hover {
+    background: var(--support-rail-surface-raised);
+  }
+  .support-rail__needle:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-md), var(--focus-ring);
+  }
+
+  .support-rail[data-open='true'] .support-rail__needle {
+    opacity: 0;
+    scale: var(--support-rail-needle-duck);
+    pointer-events: none;
+    transition:
+      scale var(--duration-base) var(--ease-exit),
+      opacity var(--duration-fast) linear;
+  }
+
+  .support-rail__live {
+    position: relative;
+    display: block;
+    width: var(--support-rail-live-size);
+    height: var(--support-rail-live-size);
+    border-radius: var(--radius-full);
+    background: var(--support-rail-live-color);
+  }
+  .support-rail__live::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+    background: var(--support-rail-live-color);
+    animation: support-rail-pulse var(--duration-pulse) var(--ease-standard) infinite;
+  }
+
+  .support-rail__needle-label {
+    writing-mode: vertical-rl;
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    letter-spacing: var(--support-rail-needle-tracking);
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .support-rail[data-side='left'] .support-rail__needle-label {
+    writing-mode: vertical-lr;
+    rotate: 180deg;
+  }
+
+  .support-rail__needle-rule {
+    display: block;
+    width: var(--support-rail-rule-width);
+    height: var(--support-rail-rule-height);
+    border-radius: var(--radius-full);
+    background: var(--support-rail-accent);
+  }
+
+  .support-rail__panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    overflow: hidden;
+    background: var(--support-rail-surface);
+    box-shadow: var(--shadow-lg);
+    pointer-events: none;
+    opacity: 0;
+    translate: var(--support-rail-drag) 0;
+    scale: var(--support-rail-collapse-x) var(--support-rail-collapse-y);
+    will-change: scale, translate;
+    transition:
+      scale var(--support-rail-close-duration) var(--ease-exit),
+      translate var(--support-rail-close-duration) var(--ease-exit),
+      opacity var(--duration-base) linear calc(var(--support-rail-close-duration) * 0.5);
+  }
+
+  .support-rail[data-side='right'] .support-rail__panel {
+    right: 0;
+    border-left: var(--border-hairline) solid var(--support-rail-line);
+    transform-origin: 100% 50%;
+  }
+  .support-rail[data-side='left'] .support-rail__panel {
+    left: 0;
+    border-right: var(--border-hairline) solid var(--support-rail-line);
+    transform-origin: 0 50%;
+  }
+
+  .support-rail[data-open='true'] .support-rail__panel {
+    pointer-events: auto;
+    opacity: 1;
+    scale: 1 1;
+    transition:
+      scale var(--support-rail-open-duration) var(--ease-spring),
+      translate var(--support-rail-open-duration) var(--ease-spring),
+      opacity var(--duration-base) linear;
+  }
+
+  .support-rail[data-dragging] .support-rail__panel {
+    transition: none;
+  }
+
+  .support-rail__body {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    outline: none;
+  }
+  .support-rail[data-side='left'] .support-rail__body {
+    flex-direction: row-reverse;
+  }
+  .support-rail[data-dragging] .support-rail__body {
+    user-select: none;
+  }
+
+  .support-rail__grabber {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--support-rail-grabber-width);
+    border-right: var(--border-hairline) solid var(--support-rail-line-soft);
+    cursor: grab;
+    touch-action: none;
+  }
+  .support-rail[data-side='left'] .support-rail__grabber {
+    border-right: 0;
+    border-left: var(--border-hairline) solid var(--support-rail-line-soft);
+  }
+  .support-rail[data-dragging] .support-rail__grabber {
+    cursor: grabbing;
+  }
+  .support-rail__grabber-pill {
+    display: block;
+    width: var(--border-emphasis);
+    height: var(--support-rail-grabber-pill);
+    border-radius: var(--radius-full);
+    background: var(--text-subtle);
+  }
+
+  .support-rail__stack {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .support-rail__header {
+    flex: none;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-4);
+  }
+  .support-rail__heading {
+    min-width: 0;
+  }
+  .support-rail__title {
+    font: var(--type-title-lg);
+    letter-spacing: var(--tracking-tight);
+  }
+  .support-rail__status {
+    margin-top: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: var(--leading-micro);
+    letter-spacing: var(--support-rail-caps-tracking);
+    text-transform: uppercase;
+    color: var(--text-subtle);
+  }
+
+  .support-rail__close {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--control-height-sm);
+    height: var(--control-height-sm);
+    padding: 0;
+    background: transparent;
+    border: var(--border-hairline) solid var(--support-rail-line);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: var(--transition-colors);
+  }
+  .support-rail__close:hover {
+    background: var(--text-strong);
+    border-color: var(--text-strong);
+    color: var(--text-inverse);
+  }
+  .support-rail__close:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .support-rail__list {
+    flex: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-top: var(--border-hairline) solid var(--support-rail-line-soft);
+  }
+
+  .support-rail__row {
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-template-columns: var(--icon-md) 1fr auto;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--support-rail-row-pad-block) var(--support-rail-row-pad-inline);
+    background: transparent;
+    border: 0;
+    border-bottom: var(--border-hairline) solid var(--support-rail-line-soft);
+    text-align: left;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-base) var(--ease-standard),
+      padding var(--duration-slow) var(--ease-standard);
+  }
+  .support-rail__row:hover {
+    background: var(--neutral-wash);
+    padding-left: calc(var(--support-rail-row-pad-inline) + var(--support-rail-row-nudge));
+  }
+  .support-rail[data-side='left'] .support-rail__row:hover {
+    padding-left: var(--support-rail-row-pad-inline);
+    padding-right: calc(var(--support-rail-row-pad-inline) + var(--support-rail-row-nudge));
+  }
+  .support-rail__row:active {
+    background: var(--neutral-wash-press);
+  }
+  .support-rail__row:focus-visible {
+    outline: none;
+    z-index: 1;
+    box-shadow: var(--focus-ring);
+  }
+
+  .support-rail__row-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--icon-sm);
+    color: var(--text-secondary);
+  }
+  .support-rail__row-text {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .support-rail__row-label {
+    font-size: var(--size-body);
+    line-height: var(--leading-body);
+    font-weight: var(--weight-medium);
+  }
+  .support-rail__row-note {
+    font: var(--type-micro);
+    font-weight: var(--weight-regular);
+    color: var(--text-secondary);
+  }
+  .support-rail__row-meta {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    letter-spacing: var(--tracking-caps);
+    color: var(--text-subtle);
+  }
+
+  .support-rail__extra {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .support-rail__extra:not(:empty) {
+    padding: var(--space-4) var(--space-5) var(--space-5);
+  }
+
+  .support-rail__footer {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-top: var(--border-hairline) solid var(--support-rail-line);
+    font: var(--type-caption);
+    color: var(--text-secondary);
+  }
+
+  .support-rail__row,
+  .support-rail__extra,
+  .support-rail__footer {
+    animation: support-rail-row-in var(--duration-slower) var(--ease-spring) backwards;
+    animation-delay: calc((var(--support-rail-index) + 1) * var(--support-rail-stagger));
+  }
+
+  @keyframes support-rail-row-in {
+    from {
+      translate: 0 var(--distance-sm);
+      opacity: 0;
+    }
+  }
+
+  @keyframes support-rail-pulse {
+    0% {
+      scale: 1;
+      opacity: 0.55;
+    }
+    70%,
+    100% {
+      scale: var(--support-rail-live-reach);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .support-rail__live::after {
+      animation: none;
+      scale: 1.9;
+      opacity: 0.28;
+    }
+  }
+}

package/src/components/dev/MotionDevtools.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import './motion-devtools.css';
+
 import { useEffect, useState, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
+
+import { cx } from '../internal/utils/cx';
 import { Button } from '../primitives/button/Button';
 import { Checkbox } from '../primitives/checkbox/Checkbox';
 import { Collapse } from '../primitives/collapse/Collapse';
 import { motionSlowmo, shouldBeActive, type SlowmoState } from './slowmo-engine';
-import { cx } from '../internal/utils/cx';
 
 export type MotionDevtoolsPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 

package/src/components/dev/MotionDevtools.usage.md

@@ -0,0 +1,16 @@
+# MotionDevtools - @zyncat/ui/motion-devtools
+
+Group: dev
+
+Dev-only floating panel that slows or freezes EVERY animation at once (CSS and WAAPI) for motion debugging.
+
+Mount once at the app root - no provider, touches no other component. Gate behind a dev check; keep
+it out of production. placement top-left|top-right|bottom-left|bottom-right, offset, presets,
+maxFactor, defaultFactor, scaleTimers, persist, defaultOpen. Also exports motionSlowmo for
+console/hotkey control.
+
+```tsx
+{
+  import.meta.env.DEV && <MotionDevtools placement="bottom-right" />;
+}
+```