elvish-css 1.0.0

package/global/transitions.css

@@ -0,0 +1,288 @@
+/**
+ * Elvish - View Transitions
+ * 
+ * Smooth, buttery transitions between layout states using the View Transitions API.
+ * 
+ * Browser Support (Jan 2026) - Baseline Newly Available since Oct 2025:
+ * - Chrome/Edge: ✅ 111+
+ * - Safari: ✅ 18+
+ * - Firefox: ✅ 144+
+ * 
+ * New features available:
+ * - view-transition-name: match-element (auto-naming)
+ * - view-transition-class (group styling)
+ * - :active-view-transition pseudo-class
+ * 
+ * Usage:
+ * 1. Add view-transition-name to elements that should animate independently
+ * 2. Use startTransition() helper to wrap DOM changes
+ * 3. Customize timing with CSS custom properties
+ */
+
+/* ===== ENABLE VIEW TRANSITIONS ===== */
+@view-transition {
+  navigation: auto; /* Enable for same-document navigations */
+}
+
+/* ===== TRANSITION TIMING TOKENS ===== */
+:root {
+  --transition-duration: 300ms;
+  --transition-duration-fast: 150ms;
+  --transition-duration-slow: 500ms;
+  
+  /* Easing curves */
+  --transition-ease: cubic-bezier(0.25, 0.1, 0.25, 1);      /* Smooth default */
+  --transition-ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Quick start, gentle end */
+  --transition-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Symmetric */
+  --transition-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */
+}
+
+/* ===== DEFAULT TRANSITION BEHAVIOR ===== */
+/* Old state fades/scales out */
+::view-transition-old(root) {
+  animation: var(--transition-duration) var(--transition-ease) both fade-out;
+}
+
+/* New state fades/scales in */
+::view-transition-new(root) {
+  animation: var(--transition-duration) var(--transition-ease) both fade-in;
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+/* ===== NAMED TRANSITION GROUPS ===== */
+
+/* 
+ * Assign view-transition-name to elements for independent animation.
+ * Each named element animates separately from the root transition.
+ */
+
+/* Layout primitives can opt-in to independent transitions */
+[data-transition] {
+  view-transition-name: var(--transition-name, auto);
+}
+
+/* Auto-naming for list/grid items - each gets unique name automatically */
+[data-transition="auto"] > * {
+  view-transition-name: match-element;
+}
+
+/* Group styling with view-transition-class */
+.transition-card-group > * {
+  view-transition-name: match-element;
+  view-transition-class: card;
+}
+
+/* Style all cards at once using the class */
+::view-transition-group(.card) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-spring);
+}
+
+/* Utility classes for common transition names */
+.transition-hero { view-transition-name: hero; }
+.transition-header { view-transition-name: header; }
+.transition-sidebar { view-transition-name: sidebar; }
+.transition-main { view-transition-name: main; }
+.transition-card { view-transition-name: card; }
+.transition-modal { view-transition-name: modal; }
+
+/* ===== TRANSITION ANIMATIONS ===== */
+
+/* Morph (default for named elements) - smooth position/size interpolation */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+}
+
+/* Slide transitions */
+::view-transition-old(slide-left) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-left;
+}
+::view-transition-new(slide-left) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-left;
+}
+
+::view-transition-old(slide-right) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-right;
+}
+::view-transition-new(slide-right) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-right;
+}
+
+::view-transition-old(slide-up) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-up;
+}
+::view-transition-new(slide-up) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-up;
+}
+
+::view-transition-old(slide-down) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-down;
+}
+::view-transition-new(slide-down) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-down;
+}
+
+@keyframes slide-out-left {
+  to { transform: translateX(-100%); opacity: 0; }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(100%); opacity: 0; }
+}
+@keyframes slide-out-right {
+  to { transform: translateX(100%); opacity: 0; }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(-100%); opacity: 0; }
+}
+@keyframes slide-out-up {
+  to { transform: translateY(-100%); opacity: 0; }
+}
+@keyframes slide-in-up {
+  from { transform: translateY(100%); opacity: 0; }
+}
+@keyframes slide-out-down {
+  to { transform: translateY(100%); opacity: 0; }
+}
+@keyframes slide-in-down {
+  from { transform: translateY(-100%); opacity: 0; }
+}
+
+/* Scale transitions */
+::view-transition-old(scale) {
+  animation: var(--transition-duration) var(--transition-ease-out) both scale-out;
+}
+::view-transition-new(scale) {
+  animation: var(--transition-duration) var(--transition-ease-spring) both scale-in;
+}
+
+@keyframes scale-out {
+  to { transform: scale(0.9); opacity: 0; }
+}
+@keyframes scale-in {
+  from { transform: scale(1.1); opacity: 0; }
+}
+
+/* Flip transitions */
+::view-transition-old(flip) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both flip-out;
+}
+::view-transition-new(flip) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both flip-in;
+}
+
+@keyframes flip-out {
+  to { transform: rotateY(90deg); opacity: 0; }
+}
+@keyframes flip-in {
+  from { transform: rotateY(-90deg); opacity: 0; }
+}
+
+/* ===== LAYOUT-SPECIFIC TRANSITIONS ===== */
+
+/* Sidebar collapse/expand */
+.transition-glan-veleg { view-transition-name: glan-veleg; }
+
+::view-transition-old(glan-veleg),
+::view-transition-new(glan-veleg) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+  /* Height and width interpolate automatically */
+}
+
+/* Switcher horizontal ↔ vertical */
+.transition-gwistindor { view-transition-name: gwistindor; }
+
+/* Grid reflow */
+.transition-vircantie { view-transition-name: vircantie; }
+
+/* Aspect ratio changes */
+.transition-gant-thala { view-transition-name: gant-thala; }
+
+::view-transition-old(gant-thala),
+::view-transition-new(gant-thala) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+  /* Aspect ratio morphs smoothly */
+}
+
+/* ===== THEME TRANSITIONS ===== */
+.transition-theme { view-transition-name: theme; }
+
+/* Cross-fade for theme changes */
+::view-transition-old(theme),
+::view-transition-new(theme) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(theme) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both fade-out;
+}
+
+::view-transition-new(theme) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both fade-in;
+}
+
+/* ===== REDUCED MOTION ===== */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+  
+  :root {
+    --transition-duration: 0ms;
+    --transition-duration-fast: 0ms;
+    --transition-duration-slow: 0ms;
+  }
+}
+
+/* ===== ACTIVE TRANSITION STATES ===== */
+/* Style the page during an active view transition */
+:root:active-view-transition {
+  /* Prevent interaction during transition */
+  pointer-events: none;
+}
+
+:root:active-view-transition-type(theme) {
+  /* Special handling for theme transitions */
+}
+
+:root:active-view-transition-type(layout) {
+  /* Special handling for layout transitions */
+}
+
+/* ===== FALLBACK FOR UNSUPPORTED BROWSERS ===== */
+/* 
+ * When View Transitions aren't supported, these CSS transitions
+ * provide a graceful fallback for common properties.
+ */
+@supports not (view-transition-name: none) {
+  /* Elvish primitives get CSS transition fallbacks */
+  i-glan-veleg,
+  i-gwistindor,
+  i-vircantie,
+  i-gant-thala,
+  i-enedh,
+  i-hath {
+    transition: 
+      width var(--transition-duration, 300ms) var(--transition-ease, ease),
+      height var(--transition-duration, 300ms) var(--transition-ease, ease),
+      flex-basis var(--transition-duration, 300ms) var(--transition-ease, ease),
+      gap var(--transition-duration, 300ms) var(--transition-ease, ease);
+  }
+  
+  i-gant-thala {
+    transition: aspect-ratio var(--transition-duration, 300ms) var(--transition-ease, ease);
+  }
+}

package/global/transitions.js

@@ -0,0 +1,289 @@
+/**
+ * Elvish - View Transitions Helper
+ * 
+ * Utilities for smooth view transitions between layout states.
+ * 
+ * Usage:
+ * 
+ * import { transition, transitionTo } from './transitions.js';
+ * 
+ * // Wrap any DOM change in a transition
+ * transition(() => {
+ *   element.classList.toggle('collapsed');
+ * });
+ * 
+ * // With custom options
+ * transition(() => {
+ *   sidebar.hidden = true;
+ * }, { duration: 500 });
+ * 
+ * // Transition with callback after completion
+ * transition(() => {
+ *   grid.setAttribute('columns', '4');
+ * }).then(() => {
+ *   console.log('Transition complete!');
+ * });
+ */
+
+/**
+ * Check if View Transitions API is supported
+ */
+export const supportsViewTransitions = () => 
+  typeof document !== 'undefined' && 
+  'startViewTransition' in document;
+
+/**
+ * Get the currently active view transition (if any)
+ * @returns {ViewTransition|null}
+ */
+export const getActiveTransition = () => 
+  document.activeViewTransition ?? null;
+
+/**
+ * Wrap a DOM mutation in a view transition
+ * 
+ * @param {Function} updateCallback - Function that performs DOM changes
+ * @param {Object} options - Configuration options
+ * @param {number} options.duration - Override transition duration (ms)
+ * @param {string} options.easing - Override easing function
+ * @param {string[]} options.types - Transition types for :active-view-transition-type()
+ * @returns {Promise} Resolves when transition completes
+ */
+export function transition(updateCallback, options = {}) {
+  // If View Transitions not supported, just run the callback
+  if (!supportsViewTransitions()) {
+    updateCallback();
+    return Promise.resolve();
+  }
+  
+  // Apply custom duration/easing if provided
+  const root = document.documentElement;
+  const originalDuration = root.style.getPropertyValue('--transition-duration');
+  const originalEasing = root.style.getPropertyValue('--transition-ease');
+  
+  if (options.duration) {
+    root.style.setProperty('--transition-duration', `${options.duration}ms`);
+  }
+  if (options.easing) {
+    root.style.setProperty('--transition-ease', options.easing);
+  }
+  
+  // Start the view transition with optional types
+  const transitionOptions = options.types 
+    ? { update: updateCallback, types: options.types }
+    : updateCallback;
+  
+  const viewTransition = document.startViewTransition(transitionOptions);
+  
+  // Restore original values after transition
+  return viewTransition.finished.then(() => {
+    if (options.duration) {
+      root.style.setProperty('--transition-duration', originalDuration || '');
+    }
+    if (options.easing) {
+      root.style.setProperty('--transition-ease', originalEasing || '');
+    }
+  });
+}
+
+/**
+ * Transition an element to a new state by changing attributes/classes
+ * 
+ * @param {HTMLElement} element - Element to transition
+ * @param {Object} changes - Attribute/class changes to apply
+ * @param {Object} changes.attrs - Attributes to set (use null to remove)
+ * @param {string[]} changes.addClass - Classes to add
+ * @param {string[]} changes.removeClass - Classes to remove
+ * @param {string[]} changes.toggleClass - Classes to toggle
+ * @param {Object} changes.style - Inline styles to set
+ * @param {Object} options - Transition options
+ * @returns {Promise}
+ */
+export function transitionTo(element, changes = {}, options = {}) {
+  return transition(() => {
+    // Apply attribute changes
+    if (changes.attrs) {
+      Object.entries(changes.attrs).forEach(([key, value]) => {
+        if (value === null) {
+          element.removeAttribute(key);
+        } else {
+          element.setAttribute(key, value);
+        }
+      });
+    }
+    
+    // Apply class changes
+    if (changes.addClass) {
+      element.classList.add(...changes.addClass);
+    }
+    if (changes.removeClass) {
+      element.classList.remove(...changes.removeClass);
+    }
+    if (changes.toggleClass) {
+      changes.toggleClass.forEach(cls => element.classList.toggle(cls));
+    }
+    
+    // Apply style changes
+    if (changes.style) {
+      Object.entries(changes.style).forEach(([prop, value]) => {
+        element.style.setProperty(prop, value);
+      });
+    }
+  }, options);
+}
+
+/**
+ * Transition between two elements (e.g., swap content)
+ * 
+ * @param {HTMLElement} outElement - Element leaving
+ * @param {HTMLElement} inElement - Element entering
+ * @param {Object} options - Transition options
+ * @returns {Promise}
+ */
+export function crossfade(outElement, inElement, options = {}) {
+  return transition(() => {
+    outElement.hidden = true;
+    inElement.hidden = false;
+  }, options);
+}
+
+/**
+ * Create a named transition group for an element
+ * Elements with the same view-transition-name animate together
+ * 
+ * @param {HTMLElement} element - Element to name
+ * @param {string} name - Transition name
+ */
+export function setTransitionName(element, name) {
+  element.style.viewTransitionName = name;
+}
+
+/**
+ * Remove transition name from element
+ * 
+ * @param {HTMLElement} element 
+ */
+export function clearTransitionName(element) {
+  element.style.viewTransitionName = '';
+}
+
+/**
+ * Batch multiple elements with unique transition names
+ * Useful for list/grid items that should animate independently
+ * 
+ * @param {NodeList|HTMLElement[]} elements - Elements to name
+ * @param {string} prefix - Name prefix (will add index)
+ */
+export function nameTransitionGroup(elements, prefix = 'item') {
+  elements.forEach((el, i) => {
+    el.style.viewTransitionName = `${prefix}-${i}`;
+  });
+}
+
+/**
+ * Enable auto-naming with match-element for a container's children
+ * Each child gets a unique browser-generated name automatically
+ * 
+ * @param {HTMLElement} container - Parent element
+ * @param {string} [transitionClass] - Optional view-transition-class for group styling
+ */
+export function enableAutoNaming(container, transitionClass) {
+  Array.from(container.children).forEach(child => {
+    child.style.viewTransitionName = 'match-element';
+    if (transitionClass) {
+      child.style.viewTransitionClass = transitionClass;
+    }
+  });
+}
+
+/**
+ * Disable auto-naming for a container's children
+ * 
+ * @param {HTMLElement} container - Parent element
+ */
+export function disableAutoNaming(container) {
+  Array.from(container.children).forEach(child => {
+    child.style.viewTransitionName = '';
+    child.style.viewTransitionClass = '';
+  });
+}
+
+/**
+ * Elvish-specific: Transition ratio change
+ * 
+ * @param {'golden'|'silver'|'fifth'} ratio - New ratio
+ * @param {Object} options - Transition options
+ */
+export function transitionRatio(ratio, options = {}) {
+  const ratioVar = `var(--ratio-${ratio})`;
+  const measures = { golden: '60ch', fifth: '70ch', silver: '80ch' };
+  
+  return transition(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--ratio', ratioVar);
+    root.style.setProperty('--measure', measures[ratio]);
+    root.dataset.ratio = ratio;
+  }, { duration: 400, types: ['layout', 'ratio'], ...options });
+}
+
+/**
+ * Elvish-specific: Transition theme change
+ * 
+ * @param {'light'|'dark'|'auto'} theme - New theme
+ * @param {Object} options - Transition options
+ */
+export function transitionTheme(theme, options = {}) {
+  return transition(() => {
+    const root = document.documentElement;
+    if (theme === 'auto') {
+      root.style.colorScheme = 'light dark';
+    } else {
+      root.style.colorScheme = theme;
+    }
+    localStorage.setItem('elvish-theme', theme);
+  }, { duration: 300, types: ['theme'], ...options });
+}
+
+/**
+ * Elvish-specific: Transition layout primitive state
+ * 
+ * @param {HTMLElement} primitive - Elvish layout element
+ * @param {Object} attrs - New attribute values
+ * @param {Object} options - Transition options
+ */
+export function transitionLayout(primitive, attrs, options = {}) {
+  // Give the primitive a transition name if it doesn't have one
+  if (!primitive.style.viewTransitionName) {
+    primitive.style.viewTransitionName = primitive.tagName.toLowerCase();
+  }
+  
+  return transitionTo(primitive, { attrs }, { types: ['layout'], ...options });
+}
+
+/**
+ * Skip/cancel the currently active view transition
+ */
+export function skipTransition() {
+  const active = getActiveTransition();
+  if (active) {
+    active.skipTransition();
+  }
+}
+
+// Default export for convenient importing
+export default {
+  transition,
+  transitionTo,
+  crossfade,
+  setTransitionName,
+  clearTransitionName,
+  nameTransitionGroup,
+  enableAutoNaming,
+  disableAutoNaming,
+  transitionRatio,
+  transitionTheme,
+  transitionLayout,
+  skipTransition,
+  supportsViewTransitions,
+  getActiveTransition,
+};