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-v7-ios.html ADDED Viewed

@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DynamicToggle — Sileo-style gooey (Safari-safe)</title>
+<style>
+  :root {
+    --fg: #e2e8f0;
+    --bg: #0f172a;
+    --card: #1e293b;
+    --muted: #64748b;
+    --border: #334155;
+    --duration: 0.22;
+    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --drop-off: 0.4;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    padding: 4rem 1rem; gap: 2rem;
+    background: var(--bg);
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--fg);
+  }
+  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
+  .row { display: flex; gap: 2rem; align-items: end; flex-wrap: wrap; justify-content: center; }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
+  }
+  /* ================================================================
+   * CONTROL BASE
+   * ================================================================ */
+  .control {
+    --w: 260px;
+    --h: 38px;
+    --radius: 9999px;
+    --font: 0.75rem;
+    --bubble-h-pct: 40;
+    --bubble-inset-pct: 20;
+    --_r: min(var(--radius), calc(var(--h) / 2));
+    position: relative;
+    width: var(--w);
+    height: var(--h);
+    padding: 2px;
+    margin-top: calc(var(--h) * 0.5);
+    /* Sileo: GPU layer + containment on root */
+    transform: translateZ(0);
+    contain: layout style;
+    overflow: visible;
+  }
+  .control__track {
+    display: grid; place-items: center;
+    grid-template-columns: repeat(4, 1fr);
+    width: 100%; height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+  .indicator {
+    position: absolute;
+    width: 50%; left: 0; top: 0; bottom: 0;
+    background: var(--fg);
+    border-radius: var(--radius);
+    transition: translate calc(var(--duration) * 1s) var(--ease);
+  }
+  label {
+    display: inline-grid; place-items: center;
+    height: 100%; width: 100%;
+    cursor: pointer; font-size: var(--font);
+    color: var(--fg); z-index: 2; font-weight: 500;
+  }
+  .control__track > label { color: var(--card); }
+  .group {
+    width: 100%; height: 100%;
+    display: grid; position: relative;
+    grid-template-columns: 1fr 1fr;
+    container-type: size;
+    overflow: hidden;
+  }
+  .group, .control__track > label:nth-of-type(1) { grid-column: span 2; }
+  .group .indicator {
+    background: var(--fg); left: 50%; top: 0;
+    translate: -50% 0;
+    pointer-events: none;
+    transition: translate calc(var(--duration) * 1s) var(--ease),
+                clip-path calc(var(--duration) * 1s) var(--ease),
+                background calc(var(--duration) * 1s) var(--ease);
+    clip-path: inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round var(--radius));
+  }
+  /* ── Pseudo text ── */
+  .group::before {
+    content: attr(data-label);
+    position: absolute; left: 50%; top: 50%;
+    translate: -50% -80%;
+    color: var(--fg); font-size: var(--font); font-weight: 500;
+    z-index: 2; white-space: nowrap; pointer-events: none;
+    transition: scale calc(var(--duration) * 1s) var(--ease),
+                translate calc(var(--duration) * 1s) var(--ease),
+                opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .group::after {
+    content: attr(data-opts);
+    position: absolute; left: 50%; top: 50%;
+    translate: -50% 20%;
+    color: var(--muted); font-size: calc(var(--font) * 0.85);
+    opacity: 0.6; z-index: 2; white-space: nowrap; pointer-events: none;
+    transition: opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .group:not([data-opts])::after { content: none; }
+  .group label {
+    color: var(--muted); cursor: pointer; z-index: 2;
+    transition: color calc(var(--duration) * 1s) var(--ease),
+                opacity calc(var(--duration) * 1s) var(--ease),
+                translate calc(var(--duration) * 1s) var(--ease);
+  }
+  .group label span {
+    display: grid; place-items: center; height: 100%; width: 100%;
+    border-radius: var(--radius);
+    transition: scale calc(var(--duration) * 1s) var(--ease);
+  }
+  /* Collapsed modes */
+  .group[data-collapsed="title"]::before { translate: -50% -50%; }
+  .group[data-collapsed="title"]::after { display: none; }
+  .group[data-collapsed="title"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
+  .group[data-collapsed="title"]:not(:has(:checked)) label span { scale: 0.5; }
+  .group[data-collapsed="opts"]::before { display: none; }
+  .group[data-collapsed="opts"]::after { translate: -50% -50%; font-size: var(--font); opacity: 0.7; }
+  .group[data-collapsed="opts"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
+  .group[data-collapsed="opts"]:not(:has(:checked)) label span { scale: 0.5; }
+  /* Track states */
+  .control__track:has(> :checked) > label { color: var(--card); }
+  .control__track:not(:has(> :checked)) > label { color: var(--fg); opacity: var(--drop-off); }
+  .control__track:not(:has(> :checked)) > .indicator { translate: 100% 0; }
+  .control__track:has(> :checked) .group .indicator { background: transparent; }
+  /* Group expanded */
+  .control--goo .group:has(:checked)::before { opacity: 0; translate: -50% -80%; scale: 1; }
+  .group:has(:checked)::after { opacity: 0; }
+  .group:has(:checked) label { opacity: 0.75; color: var(--muted); translate: 0 0; }
+  .group:has(:checked) label span { scale: 1; }
+  .group:has(:checked) .indicator { background: var(--card); clip-path: inset(0 0 0 0 round var(--radius)); }
+  .group:has(:nth-of-type(1):checked) label:nth-of-type(1),
+  .group:has(:nth-of-type(2):checked) label:nth-of-type(2) { color: var(--fg); opacity: 1; }
+  .group:has(:nth-of-type(1):checked) .indicator { translate: -100% 0; }
+  .group:has(:nth-of-type(2):checked) .indicator { translate: 0 0; }
+  /* ================================================================
+   * SILEO-STYLE GOOEY: SVG filter on a canvas div, SVG rects inside
+   * Key: animated content is SVG <rect>, not HTML div.
+   * Safari re-renders SVG filter smoothly when SVG children change.
+   * ================================================================ */
+  .control--goo {
+    background: transparent;
+    border: none;
+  }
+  .goo-canvas {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    /* Sileo's Safari formula */
+    transform: translateZ(0);
+    contain: layout style;
+    overflow: visible;
+  }
+  .goo-svg {
+    position: absolute;
+    top: 0; left: 0;
+    overflow: visible;
+    pointer-events: none;
+  }
+  /* Bubble TEXT — outside the filtered SVG, on top */
+  .control--goo .bubble-label {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font);
+    font-weight: 500;
+    color: var(--fg);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .control--goo:has(.group :checked) .bubble-label {
+    opacity: 1;
+  }
+  /* SIZES */
+  .control.sm  { --w: 210px; --h: 30px; --font: 10px; }
+  .control.lg  { --w: 320px; --h: 44px; --font: 14px; }
+  .control.xl  { --w: 400px; --h: 52px; --font: 16px; }
+  .control.rounded { --radius: 12px; }
+  .control.square  { --radius: 6px; }
+</style>
+</head>
+<body>
+<h3>Sileo-style gooey — SVG rects + filter (Safari-safe)</h3>
+<p style="color:var(--muted);font-size:12px;max-width:600px;text-align:center">
+  SVG filter applied to a canvas div. Pill + bubble are SVG <code>&lt;rect&gt;</code> elements
+  animated via WAAPI. Safari renders filter smoothly because changes are SVG-internal.
+</p>
+<h3>collapsed="title" — Sizes</h3>
+<div class="row">
+  <div><h3>SM</h3>
+    <div class="control sm control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Changes</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gs-a">Tree</label><input class="sr-only" type="radio" name="gs" id="gs-a" checked>
+        <div class="group" data-collapsed="title" data-label="Changes"><div class="indicator"></div>
+          <label for="gs-b"><span>Flat</span></label><input class="sr-only" type="radio" name="gs" id="gs-b">
+          <label for="gs-c"><span>Grp</span></label><input class="sr-only" type="radio" name="gs" id="gs-c">
+        </div></div></div></div>
+  <div><h3>Default</h3>
+    <div class="control control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Premium</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gd-a">Free</label><input class="sr-only" type="radio" name="gd" id="gd-a" checked>
+        <div class="group" data-collapsed="title" data-label="Premium"><div class="indicator"></div>
+          <label for="gd-b"><span>Solo</span></label><input class="sr-only" type="radio" name="gd" id="gd-b">
+          <label for="gd-c"><span>Team</span></label><input class="sr-only" type="radio" name="gd" id="gd-c">
+        </div></div></div></div>
+  <div><h3>LG</h3>
+    <div class="control lg control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Billing</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gl-a">Annual</label><input class="sr-only" type="radio" name="gl" id="gl-a" checked>
+        <div class="group" data-collapsed="title" data-label="Billing"><div class="indicator"></div>
+          <label for="gl-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="gl" id="gl-b">
+          <label for="gl-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="gl" id="gl-c">
+        </div></div></div></div>
+</div>
+<h3>Shapes</h3>
+<div class="row">
+  <div class="control rounded control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Theme</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="gr-a">System</label><input class="sr-only" type="radio" name="gr" id="gr-a">
+      <div class="group" data-collapsed="title" data-label="Theme"><div class="indicator"></div>
+        <label for="gr-b"><span>Light</span></label><input class="sr-only" type="radio" name="gr" id="gr-b" checked>
+        <label for="gr-c"><span>Dark</span></label><input class="sr-only" type="radio" name="gr" id="gr-c">
+      </div></div></div>
+  <div class="control square control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Output</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="gsq-a">Input</label><input class="sr-only" type="radio" name="gsq" id="gsq-a">
+      <div class="group" data-collapsed="title" data-label="Output"><div class="indicator"></div>
+        <label for="gsq-b"><span>JSON</span></label><input class="sr-only" type="radio" name="gsq" id="gsq-b" checked>
+        <label for="gsq-c"><span>XML</span></label><input class="sr-only" type="radio" name="gsq" id="gsq-c">
+      </div></div></div>
+</div>
+<h3>collapsed="opts"</h3>
+<div class="row">
+  <div class="control control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Premium</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="go-a">Free</label><input class="sr-only" type="radio" name="go" id="go-a" checked>
+      <div class="group" data-collapsed="opts" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
+        <label for="go-b"><span>Solo</span></label><input class="sr-only" type="radio" name="go" id="go-b">
+        <label for="go-c"><span>Team</span></label><input class="sr-only" type="radio" name="go" id="go-c">
+      </div></div></div>
+</div>
+<script>
+// ================================================================
+// SILEO-STYLE GOOEY ENGINE
+// SVG filter + animated SVG rects (not HTML divs)
+// ================================================================
+const BLUR_RATIO = 0.15;
+const DURATION = 0.25; // seconds
+const OUTLINE_COLOR = '#334155';
+let filterCounter = 0;
+document.querySelectorAll('[data-goo]').forEach(control => {
+  const canvas = control.querySelector('.goo-canvas');
+  const svg = control.querySelector('.goo-svg');
+  const group = control.querySelector('.group');
+  const bubbleLabel = control.querySelector('.bubble-label');
+  const style = getComputedStyle(control);
+  const w = parseFloat(style.getPropertyValue('--w'));
+  const h = parseFloat(style.getPropertyValue('--h'));
+  const r = parseFloat(style.getPropertyValue('--radius'));
+  const effectiveR = Math.min(r, h / 2);
+  const bubbleHPct = parseFloat(style.getPropertyValue('--bubble-h-pct')) || 40;
+  const bubbleInsetPct = parseFloat(style.getPropertyValue('--bubble-inset-pct')) || 20;
+  const blur = Math.round(h * BLUR_RATIO);
+  const bubbleH = h * bubbleHPct / 100;
+  const bubbleInset = w * bubbleInsetPct / 100;
+  const bubbleW = w - 2 * bubbleInset;
+  const bubbleR = Math.min(effectiveR * 0.6, bubbleH * 0.45, 12);
+  // Create unique filter
+  const filterId = `goo-${filterCounter++}`;
+  // Build SVG content: filter defs + pill rect + bubble rect
+  const totalH = h + bubbleH;
+  svg.setAttribute('width', w);
+  svg.setAttribute('height', totalH);
+  svg.setAttribute('viewBox', `0 0 ${w} ${totalH}`);
+  svg.style.top = `-${bubbleH}px`;
+  svg.innerHTML = `
+    <defs>
+      <filter id="${filterId}" 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>
+    <rect class="pill-rect"
+      x="2" y="${bubbleH}" width="${w - 4}" height="${h - 4}" rx="${effectiveR}" ry="${effectiveR}"
+      fill="var(--card)"/>
+    <rect class="bubble-rect"
+      x="${bubbleInset}" y="${bubbleH}" width="${bubbleW}" height="0" rx="${bubbleR}" ry="${bubbleR}"
+      fill="var(--card)"/>
+  `;
+  // Apply filter + drop-shadow to canvas
+  canvas.style.filter = `url(#${filterId}) drop-shadow(0 0 0.5px ${OUTLINE_COLOR}) drop-shadow(0 0 0.5px ${OUTLINE_COLOR})`;
+  const pillRect = svg.querySelector('.pill-rect');
+  const bubbleRect = svg.querySelector('.bubble-rect');
+  // Position bubble label
+  bubbleLabel.style.left = bubbleInset + 'px';
+  bubbleLabel.style.right = bubbleInset + 'px';
+  bubbleLabel.style.height = bubbleH + 'px';
+  bubbleLabel.style.bottom = h + 'px';
+  // Animate bubble rect via WAAPI (like Sileo uses Motion)
+  let currentAnim = null;
+  function animateBubble(expand) {
+    if (currentAnim) currentAnim.cancel();
+    const targetY = expand ? bubbleH - bubbleH : bubbleH;
+    const targetH = expand ? bubbleH : 0;
+    currentAnim = bubbleRect.animate([
+      { // from current
+        y: bubbleRect.getAttribute('y'),
+        height: bubbleRect.getAttribute('height'),
+      },
+      { // to target
+        y: targetY,
+        height: targetH,
+      }
+    ], {
+      duration: DURATION * 1500,
+      easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)',
+      fill: 'forwards',
+    });
+    currentAnim.onfinish = () => {
+      bubbleRect.setAttribute('y', targetY);
+      bubbleRect.setAttribute('height', targetH);
+    };
+  }
+  // Listen for radio changes
+  function checkState() {
+    const expanded = group.querySelector(':checked') !== null;
+    animateBubble(expanded);
+  }
+  control.querySelectorAll('input[type="radio"]').forEach(input => {
+    input.addEventListener('change', checkState);
+  });
+  // Initial state
+  checkState();
+});
+</script>
+</body>
+</html>