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

@mks2508/mks-ui 0.5.4 → 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 (26) hide show

package/src/react-ui/ui/DynamicToggle/prototype-v8b-react-structure.html ADDED Viewed

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>v8b — Isolate CSS culprit</title>
+<style>
+  :root {
+    --fg: #e2e8f0; --bg: #0f172a; --card: #1e293b;
+    --muted: #64748b; --border: #334155; --accent: #e2e8f0;
+    --dt-dur: 0.22s; --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --dt-indicator-dur: 0.3s; --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  * { 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, sans-serif; color: var(--fg);
+  }
+  h2 { font-size: 1rem; }
+  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
+  p.note { color: var(--muted); font-size: 10px; max-width: 200px; text-align: center; }
+  .row { display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center; }
+  .col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
+  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;
+  }
+  /* ════ Gooey canvas — EXACT same as v8 prototype ════ */
+  .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; overflow: visible; }
+  /* ════ Wrapper (same in all variants) ════ */
+  .demo {
+    position: relative;
+    width: 260px; height: 38px;
+    margin-top: 20px;
+    border-radius: 9999px;
+  }
+  /* ════ React-like wrappers ════ */
+  .dt-root {
+    position: relative; padding: 2px; user-select: none;
+    height: 38px; width: 260px; font-size: 12px; border-radius: 9999px;
+    /* filter mode: */
+    background: transparent; border: 1px solid transparent;
+    overflow: visible;
+  }
+  .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: var(--accent); border-radius: 9999px;
+    pointer-events: none; z-index: 0;
+    transition: left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  .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: var(--muted);
+    transition: color var(--dt-dur) var(--dt-ease), opacity var(--dt-dur) var(--dt-ease);
+  }
+</style>
+</head>
+<body>
+<h2>v8b — What kills the gooey in Safari?</h2>
+<button onclick="toggleAll()">Toggle All</button>
+<div class="row">
+  <div class="col">
+    <h3>1: Bare (v8 exact)</h3>
+    <div class="demo"><div class="gooey-canvas" id="c1"></div></div>
+  </div>
+  <div class="col">
+    <h3>2: + dt-root only</h3>
+    <p class="note">Root wrapper, no track/group</p>
+    <div class="dt-root"><div class="gooey-canvas" id="c2"></div></div>
+  </div>
+  <div class="col">
+    <h3>3: + track (z-index:1)</h3>
+    <p class="note">Root + track with z-index:1</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="c3"></div>
+      <div class="dt-track"></div>
+    </div>
+  </div>
+</div>
+<div class="row" style="margin-top:1.5rem">
+  <div class="col">
+    <h3>4: + group (container+overflow)</h3>
+    <p class="note">Full structure with labels</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="c4"></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>5: Full BUT no container-type</h3>
+    <p class="note">Group: container-type:normal, overflow:visible</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="c5"></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 class="col">
+    <h3>6: Full BUT track z-index:auto</h3>
+    <p class="note">Track without stacking context</p>
+    <div class="dt-root">
+      <div class="gooey-canvas" id="c6"></div>
+      <div class="dt-track" style="z-index:auto;">
+        <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>
+<script>
+const W=260, H=38, PAD=2, BH=15, TH=H+BH;
+const ER=Math.min(9999,H/2), IPX=W*0.2, BW=W-2*IPX;
+const BR=Math.min(ER*0.6,BH*0.45,12), FILL='#1e293b', BLUR=Math.round(H*0.15);
+const SPRING=`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 EOUT='cubic-bezier(0.33, 1, 0.68, 1)';
+let gid=0;
+function mkSVG(el) {
+  const id='goo-'+(++gid);
+  const svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
+  svg.setAttribute('width',W); svg.setAttribute('height',TH);
+  svg.setAttribute('viewBox',`0 0 ${W} ${TH}`);
+  svg.style.cssText=`position:absolute;top:-${BH}px;left:0;overflow:visible`;
+  svg.innerHTML=`<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>`;
+  const pill=document.createElementNS('http://www.w3.org/2000/svg','rect');
+  pill.setAttribute('x',PAD); pill.setAttribute('y',BH);
+  pill.setAttribute('width',W-PAD*2); pill.setAttribute('height',H-PAD*2);
+  pill.setAttribute('rx',ER); pill.setAttribute('ry',ER);
+  pill.setAttribute('fill',FILL);
+  svg.appendChild(pill);
+  const b=document.createElementNS('http://www.w3.org/2000/svg','rect');
+  b.setAttribute('x',IPX); b.setAttribute('y',BH);
+  b.setAttribute('width',BW); b.setAttribute('height',0);
+  b.setAttribute('rx',BR); b.setAttribute('ry',BR);
+  b.setAttribute('fill',FILL);
+  svg.appendChild(b);
+  el.style.filter=`url(#${id}) drop-shadow(0 0 0.5px #334155) drop-shadow(0 0 0.5px #334155)`;
+  el.appendChild(svg);
+  return b;
+}
+const toggles=[];
+function mk(cid) {
+  const bubble=mkSVG(document.getElementById(cid));
+  let exp=false, anim=null, last={y:BH,h:0};
+  toggles.push(()=>{
+    exp=!exp;
+    const toY=exp?0:BH, toH=exp?BH:0;
+    if(anim) anim.cancel();
+    anim=bubble.animate(
+      [{y:`${last.y}px`,height:`${last.h}px`},{y:`${toY}px`,height:`${toH}px`}],
+      {duration:exp?550:400, easing:exp?SPRING:EOUT, fill:'forwards'}
+    );
+    last={y:toY,h:toH};
+  });
+}
+function init(){
+  ['c1','c2','c3','c4','c5','c6'].forEach(mk);
+}
+function toggleAll(){toggles.forEach(fn=>fn());}
+document.addEventListener('DOMContentLoaded',init);
+</script>
+</body>
+</html>