npm - @mks2508/mks-ui - Versions diffs - 0.5.2 → 0.5.7 - Mend

@mks2508/mks-ui 0.5.2 → 0.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/src/react-ui/ui/DynamicToggle/prototype-v8-gooey-safari.html ADDED Viewed

@@ -0,0 +1,560 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Prototype v8 — Gooey Safari vs Chrome</title>
+<style>
+  :root {
+    --fg: #e2e8f0;
+    --bg: #0f172a;
+    --card: #1e293b;
+    --muted: #64748b;
+    --border: #334155;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    padding: 3rem 1rem; gap: 2rem;
+    background: var(--bg);
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--fg);
+  }
+  h2 { font-size: 1rem; color: var(--fg); }
+  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
+  .row { display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center; }
+  .col { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+  #log {
+    font-family: monospace; font-size: 12px; color: #22d3ee;
+    background: #0c0c1d; border: 1px solid #334155;
+    padding: 1rem; border-radius: 8px; width: 600px; max-width: 90vw;
+    white-space: pre-wrap;
+  }
+  button {
+    padding: 0.5rem 1.5rem; border-radius: 8px; border: 1px solid var(--border);
+    background: var(--card); color: var(--fg); cursor: pointer; font-size: 0.8rem;
+  }
+  button:hover { background: #334155; }
+  button.active { background: #22d3ee; color: #0f172a; border-color: #22d3ee; }
+  /* ── Gooey container ── */
+  .gooey-demo {
+    position: relative;
+    width: 260px;
+    height: 38px;
+    margin-top: 20px;
+  }
+  .gooey-canvas {
+    position: absolute; inset: 0;
+    border-radius: 9999px;
+    pointer-events: none;
+    transform: translateZ(0);
+    contain: layout style;
+    overflow: visible;
+  }
+  .gooey-canvas svg {
+    position: absolute;
+    top: -15px; /* -bubbleH */
+    left: 0;
+    overflow: visible;
+  }
+  /* ══ React structure CSS (for wrapped variants) ══ */
+  .dt-root {
+    position: relative; padding: 2px; user-select: none;
+    height: 38px; width: 260px; font-size: 12px; border-radius: 9999px;
+    background: transparent; border: 1px solid transparent;
+    overflow: visible; margin-top: 20px;
+  }
+  .dt-track {
+    position: relative; display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    place-items: center; width: 100%; height: 100%;
+    z-index: 1;
+  }
+  .dt-group {
+    grid-column: span 2; position: relative;
+    width: 100%; height: 100%;
+    display: grid; grid-template-columns: repeat(2, 1fr);
+    container-type: size; overflow: hidden;
+  }
+  .dt-indicator {
+    position: absolute; width: 50%; left: 50%; top: 0; bottom: 0;
+    background: #e2e8f0; border-radius: 9999px;
+    pointer-events: none; z-index: 0;
+  }
+  .dt-option {
+    display: inline-grid; place-items: center;
+    cursor: pointer; font-weight: 500; z-index: 2;
+    height: 100%; width: 100%; grid-column: span 2;
+  }
+  .dt-group label {
+    display: inline-grid; place-items: center;
+    cursor: pointer; font-weight: 500; z-index: 2;
+    height: 100%; width: 100%; color: #64748b;
+  }
+  p.note { color: var(--muted); font-size: 10px; max-width: 180px; text-align: center; }
+</style>
+</head>
+<body>
+<h2>Prototype v8 — Gooey Enter Animation: Safari vs Chrome</h2>
+<div id="log">Detecting...</div>
+<div class="row">
+  <button onclick="toggleAll()">Toggle All (expand/collapse)</button>
+</div>
+<div class="row">
+  <!-- ═══ A: WAAPI + linear() easing (Chrome path) ═══ -->
+  <div class="col">
+    <h3>A: WAAPI + linear() easing</h3>
+    <div class="gooey-demo" id="demo-waapi">
+      <div class="gooey-canvas" id="canvas-waapi"></div>
+    </div>
+  </div>
+  <!-- ═══ B: WAAPI + multi-keyframe spring (baked) ═══ -->
+  <div class="col">
+    <h3>B: WAAPI + multi-keyframe spring</h3>
+    <div class="gooey-demo" id="demo-waapi-baked">
+      <div class="gooey-canvas" id="canvas-waapi-baked"></div>
+    </div>
+  </div>
+  <!-- ═══ C: rAF + setAttribute (Motion-style) ═══ -->
+  <div class="col">
+    <h3>C: rAF + setAttribute</h3>
+    <div class="gooey-demo" id="demo-raf">
+      <div class="gooey-canvas" id="canvas-raf"></div>
+    </div>
+  </div>
+</div>
+<div class="row" style="margin-top: 1rem;">
+  <!-- ═══ D: CSS transition on SVG rect ═══ -->
+  <div class="col">
+    <h3>D: CSS transition (Sileo vanilla)</h3>
+    <div class="gooey-demo" id="demo-css">
+      <div class="gooey-canvas" id="canvas-css"></div>
+    </div>
+  </div>
+  <!-- ═══ E: WAAPI on CSS transform (scaleY) ═══ -->
+  <div class="col">
+    <h3>E: WAAPI scaleY transform</h3>
+    <div class="gooey-demo" id="demo-scale">
+      <div class="gooey-canvas" id="canvas-scale"></div>
+    </div>
+  </div>
+</div>
+<hr style="border-color:#334155;width:80%;margin:1rem 0;">
+<h2>React DOM Wrappers — same WAAPI method A</h2>
+<div class="row">
+  <div class="col">
+    <h3>F: Bare (= A above)</h3>
+    <div class="gooey-demo">
+      <div class="gooey-canvas" id="canvas-f"></div>
+    </div>
+  </div>
+  <div class="col">
+    <h3>G: + dt-root</h3>
+    <p class="note">Canvas inside dt-root, no track</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="canvas-g"></div>
+    </div>
+  </div>
+  <div class="col">
+    <h3>H: + track + group</h3>
+    <p class="note">Full React structure</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="canvas-h"></div>
+      <div class="dt-track">
+        <div class="dt-indicator"></div>
+        <label class="dt-option"><span>Free</span></label>
+        <div class="dt-group">
+          <label><span>Solo</span></label>
+          <label><span>Team</span></label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <h3>I: Full, no container-type</h3>
+    <p class="note">Group: container-type:normal, overflow:visible</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="canvas-i"></div>
+      <div class="dt-track">
+        <div class="dt-indicator"></div>
+        <label class="dt-option"><span>Free</span></label>
+        <div class="dt-group" style="container-type:normal;overflow:visible;">
+          <label><span>Solo</span></label>
+          <label><span>Team</span></label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+// ════════════════════════════════════════════════════════
+// CONSTANTS
+// ════════════════════════════════════════════════════════
+const WIDTH = 260;
+const HEIGHT = 38;
+const PAD = 2;
+const BUBBLE_H = Math.round(HEIGHT * 0.4); // 15
+const TOTAL_H = HEIGHT + BUBBLE_H;
+const RADIUS = 9999;
+const EFFECTIVE_R = Math.min(RADIUS, HEIGHT / 2);
+const INSET = 0.2;
+const INSET_PX = WIDTH * INSET;
+const BUBBLE_W = WIDTH - 2 * INSET_PX;
+const BUBBLE_R = Math.min(EFFECTIVE_R * 0.6, BUBBLE_H * 0.45, 12);
+const FILL = '#1e293b';
+const BLUR = Math.round(HEIGHT * 0.15);
+const EXPAND_MS = 550;
+const COLLAPSE_MS = 400;
+// Spring easing — the one Chrome handles perfectly
+const SPRING_GENTLE = `linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)`;
+const EASE_OUT_CUBIC = 'cubic-bezier(0.33, 1, 0.68, 1)';
+// Pre-computed spring curve (same points as SPRING_GENTLE)
+const SPRING_CURVE = [
+  [0, 0], [0.0105, 0.009], [0.021, 0.035], [0.044, 0.141],
+  [0.129, 0.723], [0.167, 0.938], [0.194, 1.017], [0.2185, 1.067],
+  [0.243, 1.099], [0.26, 1.108], [0.2805, 1.1], [0.301, 1.078],
+  [0.325, 1.049], [0.373, 0.994], [0.402, 0.981], [0.434, 0.974],
+  [0.502, 0.975], [0.625, 0.997], [0.747, 1.001], [1, 1],
+];
+const EASE_OUT_CURVE = [
+  [0, 0], [0.05, 0.185], [0.1, 0.345], [0.15, 0.48],
+  [0.2, 0.594], [0.25, 0.688], [0.3, 0.765], [0.35, 0.827],
+  [0.4, 0.876], [0.45, 0.913], [0.5, 0.941], [0.55, 0.961],
+  [0.6, 0.975], [0.65, 0.984], [0.7, 0.990], [0.75, 0.994],
+  [0.8, 0.997], [0.85, 0.998], [0.9, 0.999], [0.95, 1.0], [1, 1],
+];
+// Sileo's spring easing for CSS transitions
+const SILEO_SPRING_CSS = `linear(0, 0.002 0.6%, 0.007 1.2%, 0.015 1.8%, 0.027 2.5%, 0.044 3.3%, 0.065 4.1%, 0.091 5%, 0.55 12%, 0.726 14.5%, 0.864 16.9%, 0.924 18.1%, 0.976 19.4%, 1.001 20.2%, 1.021 21%, 1.036 21.9%, 1.046 22.8%, 1.052 23.8%, 1.054 25%, 1.052 26.2%, 1.046 27.6%, 1.037 29.2%, 1.024 31.1%, 1.009 33.6%, 0.998 36.3%, 0.991 39.7%, 0.988 44.1%, 0.99 50.1%, 0.996 58.4%, 0.999 68.8%, 1)`;
+// ════════════════════════════════════════════════════════
+// FEATURE DETECTION
+// ════════════════════════════════════════════════════════
+function detectLinearEasing() {
+  try {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none';
+    document.body.appendChild(el);
+    const anim = el.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 100, easing: 'linear(0, 1.5, 1)', fill: 'forwards' },
+    );
+    anim.currentTime = 50;
+    const mid = parseFloat(getComputedStyle(el).opacity);
+    anim.cancel();
+    el.remove();
+    return { supported: mid > 0.8, midValue: mid };
+  } catch (e) {
+    return { supported: false, midValue: -1, error: e.message };
+  }
+}
+function detectCSSLinear() {
+  try {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;visibility:hidden;transition:opacity 0s linear(0,1.5,1)';
+    document.body.appendChild(el);
+    const computed = getComputedStyle(el).transitionTimingFunction;
+    el.remove();
+    return { parsed: computed !== 'linear' && computed.includes('linear'), raw: computed };
+  } catch (e) {
+    return { parsed: false, raw: '', error: e.message };
+  }
+}
+// ════════════════════════════════════════════════════════
+// SVG CREATION HELPERS
+// ════════════════════════════════════════════════════════
+function createGooeyFilterDefs(id) {
+  return `<defs>
+    <filter id="${id}" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="${BLUR}" result="blur"/>
+      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
+      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+    </filter>
+  </defs>`;
+}
+function createSVGBase(canvasEl, filterId) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('width', WIDTH);
+  svg.setAttribute('height', TOTAL_H);
+  svg.setAttribute('viewBox', `0 0 ${WIDTH} ${TOTAL_H}`);
+  svg.style.cssText = `position:absolute;top:-${BUBBLE_H}px;left:0;overflow:visible`;
+  svg.innerHTML = createGooeyFilterDefs(filterId);
+  // Pill rect (static)
+  const pill = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  pill.setAttribute('x', PAD);
+  pill.setAttribute('y', BUBBLE_H);
+  pill.setAttribute('width', WIDTH - PAD * 2);
+  pill.setAttribute('height', HEIGHT - PAD * 2);
+  pill.setAttribute('rx', EFFECTIVE_R);
+  pill.setAttribute('ry', EFFECTIVE_R);
+  pill.setAttribute('fill', FILL);
+  svg.appendChild(pill);
+  // Bubble rect
+  const bubble = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  bubble.setAttribute('x', INSET_PX);
+  bubble.setAttribute('y', BUBBLE_H);
+  bubble.setAttribute('width', BUBBLE_W);
+  bubble.setAttribute('height', 0);
+  bubble.setAttribute('rx', BUBBLE_R);
+  bubble.setAttribute('ry', BUBBLE_R);
+  bubble.setAttribute('fill', FILL);
+  svg.appendChild(bubble);
+  canvasEl.style.filter = `url(#${filterId}) drop-shadow(0 0 0.5px #334155) drop-shadow(0 0 0.5px #334155)`;
+  canvasEl.appendChild(svg);
+  return { svg, pill, bubble };
+}
+// ════════════════════════════════════════════════════════
+// ANIMATION METHODS
+// ════════════════════════════════════════════════════════
+let _waapiId = 0;
+// --- A: WAAPI + linear() easing ---
+function createMethodWaapi(canvasEl) {
+  const { bubble } = createSVGBase(canvasEl, 'goo-waapi-' + (++_waapiId));
+  let expanded = false;
+  let anim = null;
+  let last = { y: BUBBLE_H, h: 0 };
+  return {
+    toggle() {
+      expanded = !expanded;
+      const toY = expanded ? 0 : BUBBLE_H;
+      const toH = expanded ? BUBBLE_H : 0;
+      const dur = expanded ? EXPAND_MS : COLLAPSE_MS;
+      const easing = expanded ? SPRING_GENTLE : EASE_OUT_CUBIC;
+      if (anim) anim.cancel();
+      anim = bubble.animate(
+        [
+          { y: `${last.y}px`, height: `${last.h}px` },
+          { y: `${toY}px`, height: `${toH}px` },
+        ],
+        { duration: dur, easing, fill: 'forwards' },
+      );
+      last = { y: toY, h: toH };
+    },
+    get expanded() { return expanded; },
+  };
+}
+// --- B: WAAPI + multi-keyframe spring (baked into values) ---
+function createMethodWaapiBaked(canvasEl) {
+  const { bubble } = createSVGBase(canvasEl, 'goo-waapi-baked');
+  let expanded = false;
+  let anim = null;
+  let last = { y: BUBBLE_H, h: 0 };
+  function springKeyframes(fromY, toY, fromH, toH, curve) {
+    return curve.map(([offset, t]) => ({
+      offset,
+      y: `${fromY + (toY - fromY) * t}px`,
+      height: `${fromH + (toH - fromH) * t}px`,
+    }));
+  }
+  return {
+    toggle() {
+      expanded = !expanded;
+      const toY = expanded ? 0 : BUBBLE_H;
+      const toH = expanded ? BUBBLE_H : 0;
+      const dur = expanded ? EXPAND_MS : COLLAPSE_MS;
+      const curve = expanded ? SPRING_CURVE : EASE_OUT_CURVE;
+      if (anim) anim.cancel();
+      anim = bubble.animate(
+        springKeyframes(last.y, toY, last.h, toH, curve),
+        { duration: dur, easing: 'linear', fill: 'forwards' },
+      );
+      last = { y: toY, h: toH };
+    },
+    get expanded() { return expanded; },
+  };
+}
+// --- C: rAF + setAttribute (Motion-style) ---
+function createMethodRaf(canvasEl) {
+  const { bubble } = createSVGBase(canvasEl, 'goo-raf');
+  let expanded = false;
+  let running = null;
+  let last = { y: BUBBLE_H, h: 0 };
+  function sampleCurve(curve, progress) {
+    if (progress <= 0) return curve[0][1];
+    if (progress >= 1) return curve[curve.length - 1][1];
+    let lo = 0, hi = curve.length - 1;
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1;
+      if (curve[mid][0] <= progress) lo = mid; else hi = mid;
+    }
+    const [t0, v0] = curve[lo];
+    const [t1, v1] = curve[hi];
+    return v0 + (v1 - v0) * ((progress - t0) / (t1 - t0));
+  }
+  function animateRaf(fromY, toY, fromH, toH, duration, curve) {
+    if (running) { running.cancelled = true; cancelAnimationFrame(running.raf); }
+    const ctx = { cancelled: false, raf: 0 };
+    running = ctx;
+    const start = performance.now();
+    function step(now) {
+      if (ctx.cancelled) return;
+      const p = Math.min((now - start) / duration, 1);
+      const t = sampleCurve(curve, p);
+      const curY = fromY + (toY - fromY) * t;
+      const curH = fromH + (toH - fromH) * t;
+      bubble.setAttribute('y', curY);
+      bubble.setAttribute('height', curH);
+      if (p < 1) ctx.raf = requestAnimationFrame(step);
+    }
+    ctx.raf = requestAnimationFrame(step);
+  }
+  return {
+    toggle() {
+      expanded = !expanded;
+      const toY = expanded ? 0 : BUBBLE_H;
+      const toH = expanded ? BUBBLE_H : 0;
+      const dur = expanded ? EXPAND_MS : COLLAPSE_MS;
+      const curve = expanded ? SPRING_CURVE : EASE_OUT_CURVE;
+      animateRaf(last.y, toY, last.h, toH, dur, curve);
+      last = { y: toY, h: toH };
+    },
+    get expanded() { return expanded; },
+  };
+}
+// --- D: CSS transition on SVG rect (Sileo vanilla approach) ---
+function createMethodCSS(canvasEl) {
+  const { bubble } = createSVGBase(canvasEl, 'goo-css');
+  let expanded = false;
+  // Add CSS transition to the bubble rect
+  // Sileo vanilla uses transform: scaleY + CSS custom properties
+  // But let's test direct CSS transition on y/height (SVG2 CSS properties)
+  bubble.style.transition = `y ${EXPAND_MS}ms ${SILEO_SPRING_CSS}, height ${EXPAND_MS}ms ${SILEO_SPRING_CSS}`;
+  return {
+    toggle() {
+      expanded = !expanded;
+      bubble.style.y = expanded ? '0px' : `${BUBBLE_H}px`;
+      bubble.style.height = expanded ? `${BUBBLE_H}px` : '0px';
+    },
+    get expanded() { return expanded; },
+  };
+}
+// --- E: WAAPI on CSS transform (scaleY — guaranteed to work everywhere) ---
+function createMethodScale(canvasEl) {
+  const { bubble } = createSVGBase(canvasEl, 'goo-scale');
+  let expanded = false;
+  let anim = null;
+  // Set bubble to full size but scaleY(0)
+  bubble.setAttribute('y', 0);
+  bubble.setAttribute('height', BUBBLE_H);
+  bubble.style.transformOrigin = '50% 100%';
+  bubble.style.transformBox = 'fill-box';
+  bubble.style.transform = 'scaleY(0)';
+  return {
+    toggle() {
+      expanded = !expanded;
+      if (anim) anim.cancel();
+      anim = bubble.animate(
+        [
+          { transform: expanded ? 'scaleY(0)' : 'scaleY(1)' },
+          { transform: expanded ? 'scaleY(1)' : 'scaleY(0)' },
+        ],
+        {
+          duration: expanded ? EXPAND_MS : COLLAPSE_MS,
+          easing: expanded ? SPRING_GENTLE : EASE_OUT_CUBIC,
+          fill: 'forwards',
+        },
+      );
+    },
+    get expanded() { return expanded; },
+  };
+}
+// ════════════════════════════════════════════════════════
+// INIT
+// ════════════════════════════════════════════════════════
+const methods = [];
+function init() {
+  const detection = detectLinearEasing();
+  const cssDetection = detectCSSLinear();
+  const ua = navigator.userAgent;
+  const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua);
+  document.getElementById('log').textContent =
+    `Browser: ${isSafari ? 'Safari' : 'Chrome/Other'}\n` +
+    `WAAPI linear() easing: ${detection.supported} (midpoint opacity: ${detection.midValue.toFixed(3)})\n` +
+    `CSS linear() parsing: ${cssDetection.parsed} (raw: ${cssDetection.raw.slice(0, 60)}...)\n` +
+    `\nExpected:\n` +
+    `  A (WAAPI+linear): ${detection.supported ? 'SPRING' : 'NO spring — plain linear fallback'}\n` +
+    `  B (WAAPI+baked):  SPRING always (values in keyframes)\n` +
+    `  C (rAF+setAttr):  SPRING always (Motion-style)\n` +
+    `  D (CSS trans):    ${cssDetection.parsed ? 'SPRING' : 'NO spring — CSS linear() not parsed'}\n` +
+    `  E (WAAPI scaleY): ${detection.supported ? 'SPRING' : 'NO spring — transform, not SVG attr'}`;
+  methods.push(createMethodWaapi(document.getElementById('canvas-waapi')));
+  methods.push(createMethodWaapiBaked(document.getElementById('canvas-waapi-baked')));
+  methods.push(createMethodRaf(document.getElementById('canvas-raf')));
+  methods.push(createMethodCSS(document.getElementById('canvas-css')));
+  methods.push(createMethodScale(document.getElementById('canvas-scale')));
+  // Wrapped variants — all use WAAPI method A
+  methods.push(createMethodWaapi(document.getElementById('canvas-f')));
+  methods.push(createMethodWaapi(document.getElementById('canvas-g')));
+  methods.push(createMethodWaapi(document.getElementById('canvas-h')));
+  methods.push(createMethodWaapi(document.getElementById('canvas-i')));
+}
+function toggleAll() {
+  methods.forEach(m => m.toggle());
+}
+document.addEventListener('DOMContentLoaded', init);
+</script>
+</body>
+</html>