@esportsplus/ui 0.56.2 → 0.56.4

package/build/components/surface-field/index.js

@@ -0,0 +1,474 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1a5zh7n1 = template_u1.template(`<div class='surface-field-surface'><button class='surface-field-surface-handle' type='button'></button><div class='surface-field-surface-content'></div><button class='surface-field-surface-resize' type='button'>`);
+const template_1a5zh7n7 = template_u1.template(`<div class='surface-field'><canvas aria-hidden='true' class='surface-field-canvas'></canvas><div class='surface-field-content'>`);
+const ALPHA_LEVELS = 32;
+const DEFAULTS = {
+    accent: '#6683e8',
+    base: 0.14,
+    breathe: 0,
+    brightness: 0.2,
+    camera: null,
+    connected: true,
+    gap: 22,
+    lineRadius: 200,
+    pointerPush: 2,
+    radius: 250,
+    ripplePush: 6,
+    still: false,
+    surfacePadding: 0,
+    tint: 0,
+    wander: false
+};
+const IDLE = 1500;
+const KEYS = Object.keys(DEFAULTS);
+const HALO = 0.75;
+const RIPPLE_LIFE = 1.4;
+const RIPPLE_SPEED = 520;
+const RIPPLE_WIDTH = 36;
+const SELECTOR = '.surface-field-surface, [data-surface-field]';
+const TAU = Math.PI * 2;
+const TINT_LEVELS = 5;
+let colors = new Map(), probe = null, z = 1;
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function falloff(distance, radius) {
+    if (radius <= 0 || distance >= radius) {
+        return 0;
+    }
+    let t = distance / radius;
+    return (1 - t * t) * (1 - t * t);
+}
+function rgb(color) {
+    let cached = colors.get(color);
+    if (cached) {
+        return cached;
+    }
+    probe ??= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    probe.clearRect(0, 0, 1, 1);
+    probe.fillStyle = '#000';
+    probe.fillStyle = color;
+    probe.fillRect(0, 0, 1, 1);
+    let data = probe.getImageData(0, 0, 1, 1).data, value = [data[0], data[1], data[2]];
+    if (colors.size > 64) {
+        colors.clear();
+    }
+    colors.set(color, value);
+    return value;
+}
+const surface = component(function ({ bounded = true, height = 160, label = 'surface', minHeight = 72, minWidth = 120, state, width = 240, x = 0, y = 0, ...attributes }, content) {
+    let element, start = null;
+    if (state) {
+        ({ height, width, x, y } = state);
+    }
+    function apply() {
+        if (!element) {
+            return;
+        }
+        let parent = element.parentElement;
+        width = Math.max(minWidth, width);
+        height = Math.max(minHeight, height);
+        if (bounded && parent) {
+            let pw = parent.clientWidth, ph = parent.clientHeight;
+            width = clamp(width, minWidth, Math.max(minWidth, pw));
+            height = clamp(height, minHeight, Math.max(minHeight, ph));
+            x = clamp(x, 0, Math.max(0, pw - width));
+            y = clamp(y, 0, Math.max(0, ph - height));
+        }
+        element.style.height = `${height}px`;
+        element.style.translate = `${x}px ${y}px`;
+        element.style.width = `${width}px`;
+        if (state && (state.height !== height || state.width !== width || state.x !== x || state.y !== y)) {
+            state.height = height;
+            state.width = width;
+            state.x = x;
+            state.y = y;
+        }
+    }
+    function begin(event) {
+        if (event.button !== 0 || !element) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        element.classList.add('--active');
+        element.style.zIndex = String(++z);
+        start = {
+            h: height,
+            pointerX: event.clientX,
+            pointerY: event.clientY,
+            scale: element.getBoundingClientRect().width / element.offsetWidth || 1,
+            w: width,
+            x,
+            y
+        };
+    }
+    function end() {
+        element?.classList.remove('--active');
+        start = null;
+    }
+    function nudge(event, resize) {
+        let step = event.shiftKey ? 32 : 8, dx = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0, dy = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
+        if (!dx && !dy) {
+            return;
+        }
+        event.preventDefault();
+        if (resize) {
+            width += dx;
+            height += dy;
+        }
+        else {
+            x += dx;
+            y += dy;
+        }
+        apply();
+    }
+    return (() => {
+        let root_1a5zh7n0 = template_1a5zh7n1(), element_1a5zh7n2 = root_1a5zh7n0.firstChild, element_1a5zh7n3 = element_1a5zh7n2.firstElementChild, element_1a5zh7n4 = element_1a5zh7n3.nextElementSibling, element_1a5zh7n5 = element_1a5zh7n4.nextElementSibling;
+        template_u1.setProperties(element_1a5zh7n2, this?.attributes);
+        template_u1.setProperties(element_1a5zh7n2, attributes);
+        template_u1.onconnect(element_1a5zh7n2, (el) => {
+            element = el;
+            apply();
+        });
+        template_u1.setProperty(element_1a5zh7n3, 'aria-label', `Move ${label} surface with arrow keys`);
+        template_u1.delegate(element_1a5zh7n3, 'keydown', (event) => nudge(event, false));
+        template_u1.delegate(element_1a5zh7n3, 'lostpointercapture', end);
+        template_u1.delegate(element_1a5zh7n3, 'pointerdown', begin);
+        template_u1.delegate(element_1a5zh7n3, 'pointermove', (event) => {
+            if (!start) {
+                return;
+            }
+            x = start.x + (event.clientX - start.pointerX) / start.scale;
+            y = start.y + (event.clientY - start.pointerY) / start.scale;
+            apply();
+        });
+        template_u1.slot(element_1a5zh7n4, content, 1);
+        template_u1.setProperty(element_1a5zh7n5, 'aria-label', `Resize ${label} surface with arrow keys; right and down make it larger`);
+        template_u1.delegate(element_1a5zh7n5, 'keydown', (event) => nudge(event, true));
+        template_u1.delegate(element_1a5zh7n5, 'lostpointercapture', end);
+        template_u1.delegate(element_1a5zh7n5, 'pointerdown', begin);
+        template_u1.delegate(element_1a5zh7n5, 'pointermove', (event) => {
+            if (!start) {
+                return;
+            }
+            width = start.w + (event.clientX - start.pointerX) / start.scale;
+            height = start.h + (event.clientY - start.pointerY) / start.scale;
+            apply();
+        });
+        return root_1a5zh7n0;
+    })();
+});
+export default Object.assign(component(function (attributes, content) {
+    let given = {}, rest = {}, state = attributes.state;
+    for (let key in attributes) {
+        if (key === 'state') {
+            continue;
+        }
+        if (KEYS.includes(key)) {
+            given[key] = attributes[key];
+        }
+        else {
+            rest[key] = attributes[key];
+        }
+    }
+    let canvas, context = null, frame = 0, host, key = '', last = 0, light = { intensity: 0, x: 0, y: 0 }, reduced = matchMedia('(prefers-reduced-motion: reduce)'), observer, pointer = { at: -Infinity, inside: false, x: 0, y: 0 }, ripples = [], size = { dpr: 0, height: 0, width: 0 }, visible = false;
+    let bucket = new Uint16Array(0), dotAlpha = new Float32Array(0), dotLight = new Float32Array(0), lineLight = new Float32Array(0), order = new Uint32Array(0), px = new Float32Array(0), py = new Float32Array(0), segment = new Uint32Array(0), segmentBucket = new Uint16Array(0), segmentOrder = new Uint32Array(0), seed = new Float32Array(0);
+    function options() {
+        let snapshot = {};
+        for (let i = 0, n = KEYS.length; i < n; i++) {
+            let k = KEYS[i];
+            snapshot[k] = state?.[k] ?? given[k] ?? DEFAULTS[k];
+        }
+        let camera = snapshot.camera;
+        if (camera) {
+            snapshot.camera = { x: camera.x, y: camera.y, zoom: camera.zoom };
+        }
+        return snapshot;
+    }
+    function grow(n) {
+        if (px.length >= n) {
+            return;
+        }
+        bucket = new Uint16Array(n);
+        dotAlpha = new Float32Array(n);
+        dotLight = new Float32Array(n);
+        lineLight = new Float32Array(n);
+        order = new Uint32Array(n);
+        px = new Float32Array(n);
+        py = new Float32Array(n);
+        segment = new Uint32Array(n * 4);
+        segmentBucket = new Uint16Array(n * 2);
+        segmentOrder = new Uint32Array(n * 2);
+        seed = new Float32Array(n);
+    }
+    function start() {
+        if (!frame && visible && host?.isConnected) {
+            last = performance.now();
+            frame = requestAnimationFrame(tick);
+        }
+    }
+    function stop() {
+        cancelAnimationFrame(frame);
+        frame = 0;
+    }
+    function tick(now) {
+        frame = requestAnimationFrame(tick);
+        if (!host || !canvas || !context) {
+            return;
+        }
+        let dt = Math.min(64, now - last) / 1000, o = options(), width = host.clientWidth, height = host.clientHeight, dpr = Math.min(2, devicePixelRatio || 1);
+        last = now;
+        if (width !== size.width || height !== size.height || dpr !== size.dpr) {
+            canvas.height = Math.max(1, Math.round(height * dpr));
+            canvas.width = Math.max(1, Math.round(width * dpr));
+            size = { dpr, height, width };
+            key = '';
+        }
+        let bounds = host.getBoundingClientRect(), elements = host.querySelectorAll(SELECTOR), rects = [];
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let r = elements[i].getBoundingClientRect();
+            if (r.width && r.height) {
+                rects.push({
+                    bottom: r.bottom - bounds.top,
+                    left: r.left - bounds.left,
+                    right: r.right - bounds.left,
+                    top: r.top - bounds.top
+                });
+            }
+        }
+        let animate = !o.still && !reduced.matches, intensity = 0, target = { x: light.x, y: light.y }, wandering = false;
+        if (animate && pointer.inside) {
+            intensity = 1;
+            target = { x: pointer.x, y: pointer.y };
+        }
+        else if (animate && o.wander && now - pointer.at > IDLE) {
+            let t = now / 1000;
+            intensity = 0.85;
+            target = {
+                x: width / 2 + Math.cos(t * 0.23) * width * 0.34 + Math.sin(t * 0.57) * width * 0.08,
+                y: height / 2 + Math.sin(t * 0.31) * height * 0.3 + Math.cos(t * 0.49) * height * 0.08
+            };
+            wandering = true;
+        }
+        if (light.intensity < 0.01 && intensity > 0) {
+            light.x = target.x;
+            light.y = target.y;
+        }
+        let follow = 1 - Math.exp(-dt * (wandering ? 2.5 : 16)), fade = 1 - Math.exp(-dt * 6);
+        light.intensity += (intensity - light.intensity) * fade;
+        light.x += (target.x - light.x) * follow;
+        light.y += (target.y - light.y) * follow;
+        if (!animate) {
+            light.intensity = 0;
+            ripples.length = 0;
+        }
+        else if (ripples.length) {
+            ripples = ripples.filter((ripple) => (now - ripple.born) / 1000 < RIPPLE_LIFE);
+        }
+        let color = getComputedStyle(canvas).color, settled = Math.abs(intensity - light.intensity) < 0.002
+            && (light.intensity < 0.002 || (Math.abs(target.x - light.x) < 0.1 && Math.abs(target.y - light.y) < 0.1)), signature = JSON.stringify([o, color, rects, pointer.inside && animate ? [pointer.x, pointer.y] : 0]);
+        if (settled && !wandering && !ripples.length && !(animate && o.breathe > 0) && signature === key) {
+            return;
+        }
+        key = signature;
+        draw(o, rects, color, animate ? now : 0, animate);
+    }
+    function draw(o, rects, color, now, animate) {
+        let ctx = context, { dpr, height, width } = size, camera = o.camera, gap = Math.max(6, o.gap) * (camera ? Math.max(0.01, camera.zoom) : 1), zoom = camera ? Math.max(0.01, camera.zoom) : 1;
+        while (gap < 8) {
+            gap *= 2;
+        }
+        let cols = Math.floor(width / gap) + 2, rows = Math.floor(height / gap) + 2, n = cols * rows, i0 = camera ? Math.floor(-camera.x / gap) : 0, j0 = camera ? Math.floor(-camera.y / gap) : 0, ox = camera ? camera.x + i0 * gap : (width - (cols - 1) * gap) / 2, oy = camera ? camera.y + j0 * gap : (height - (rows - 1) * gap) / 2, padding = o.surfacePadding * zoom, clear = Math.max(2, gap * 0.8 + padding), band = Math.max(clear + gap, gap * 3 + padding), halo = band + gap * 1.5, push = Math.min(o.radius, gap * 5), peak = Math.min(1, o.brightness * 2.5), time = now / 1000;
+        grow(n);
+        for (let j = 0; j < rows; j++) {
+            for (let i = 0; i < cols; i++) {
+                let k = j * cols + i, x = ox + i * gap, y = oy + j * gap, glow = 0, shown = 1;
+                seed[k] = ((Math.sin((i + i0) * 12.9898 + (j + j0) * 78.233) * 43758.5453) % 1 + 1) % 1;
+                for (let r = 0, m = rects.length; r < m; r++) {
+                    let rect = rects[r], cx = clamp(x, rect.left, rect.right), cy = clamp(y, rect.top, rect.bottom), dx = x - cx, dy = y - cy, d = Math.sqrt(dx * dx + dy * dy);
+                    if (d === 0) {
+                        shown = 0;
+                        break;
+                    }
+                    if (d < halo) {
+                        glow = Math.max(glow, 1 - d / halo);
+                    }
+                    if (d < band) {
+                        let scale = (clear + d * (band - clear) / band) / d;
+                        x = cx + dx * scale;
+                        y = cy + dy * scale;
+                    }
+                }
+                let dot = glow * glow * HALO, line = dot;
+                if (shown && light.intensity > 0.001) {
+                    let dx = x - light.x, dy = y - light.y, d = Math.sqrt(dx * dx + dy * dy);
+                    dot += falloff(d, o.radius) * light.intensity;
+                    line += falloff(d, o.lineRadius) * light.intensity;
+                    if (pointer.inside && o.pointerPush && d > 0.001 && d < push) {
+                        let s = o.pointerPush * (1 - d / push) * (1 - d / push) * light.intensity / d;
+                        x += dx * s;
+                        y += dy * s;
+                    }
+                }
+                for (let r = 0, m = shown ? ripples.length : 0; r < m; r++) {
+                    let ripple = ripples[r], age = (now - ripple.born) / 1000, dx = x - ripple.x, dy = y - ripple.y, d = Math.sqrt(dx * dx + dy * dy), life = 1 - age / RIPPLE_LIFE, wave = (d - age * RIPPLE_SPEED) / RIPPLE_WIDTH, strength = Math.exp(-wave * wave) * life * life;
+                    if (d > 0.001) {
+                        x += dx / d * o.ripplePush * strength;
+                        y += dy / d * o.ripplePush * strength;
+                    }
+                    dot += strength * 0.8;
+                    line += strength * 0.6;
+                }
+                let breath = animate && o.breathe > 0
+                    ? 1 - o.breathe * 0.5 * (1 + Math.sin(time * 1.3 + seed[k] * TAU))
+                    : 1;
+                dot = Math.min(1, dot);
+                px[k] = x;
+                py[k] = y;
+                dotLight[k] = dot;
+                dotAlpha[k] = shown * breath * (o.base + (peak - o.base) * Math.max(0, dot));
+                lineLight[k] = shown * Math.min(1, line);
+            }
+        }
+        let accent = rgb(o.accent), base = rgb(color), buckets = ALPHA_LEVELS * TINT_LEVELS, counts = new Uint32Array(buckets + 1), fills = [], tint = clamp(o.tint, 0, 1);
+        for (let t = 0; t < TINT_LEVELS; t++) {
+            let mix = tint * t / (TINT_LEVELS - 1);
+            fills[t] = `rgb(${Math.round(base[0] + (accent[0] - base[0]) * mix)} ${Math.round(base[1] + (accent[1] - base[1]) * mix)} ${Math.round(base[2] + (accent[2] - base[2]) * mix)})`;
+        }
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (o.connected) {
+            let segments = 0;
+            for (let j = 0; j < rows; j++) {
+                for (let i = 0; i < cols; i++) {
+                    let k = j * cols + i;
+                    for (let neighbour of [i + 1 < cols ? k + 1 : -1, j + 1 < rows ? k + cols : -1]) {
+                        if (neighbour < 0) {
+                            continue;
+                        }
+                        let lit = Math.min(lineLight[k], lineLight[neighbour]), alpha = Math.round(lit * o.brightness * (ALPHA_LEVELS - 1));
+                        if (alpha < 1) {
+                            continue;
+                        }
+                        segment[segments * 2] = k;
+                        segment[segments * 2 + 1] = neighbour;
+                        segmentBucket[segments] = Math.round(lit * (TINT_LEVELS - 1)) * ALPHA_LEVELS + Math.min(alpha, ALPHA_LEVELS - 1);
+                        counts[segmentBucket[segments] + 1]++;
+                        segments++;
+                    }
+                }
+            }
+            sort(counts, segmentBucket, segmentOrder, segments);
+            ctx.lineWidth = 1;
+            for (let b = 0; b < buckets; b++) {
+                let from = counts[b], to = counts[b + 1];
+                if (from === to) {
+                    continue;
+                }
+                ctx.beginPath();
+                for (let s = from; s < to; s++) {
+                    let a = segment[segmentOrder[s] * 2], c = segment[segmentOrder[s] * 2 + 1];
+                    ctx.moveTo(px[a], py[a]);
+                    ctx.lineTo(px[c], py[c]);
+                }
+                ctx.globalAlpha = (b % ALPHA_LEVELS) / (ALPHA_LEVELS - 1);
+                ctx.strokeStyle = fills[Math.floor(b / ALPHA_LEVELS)];
+                ctx.stroke();
+            }
+            counts.fill(0);
+        }
+        let dots = 0;
+        for (let k = 0; k < n; k++) {
+            let alpha = Math.round(dotAlpha[k] * (ALPHA_LEVELS - 1));
+            if (alpha < 1) {
+                bucket[k] = buckets;
+                continue;
+            }
+            bucket[k] = Math.round(dotLight[k] * (TINT_LEVELS - 1)) * ALPHA_LEVELS + Math.min(alpha, ALPHA_LEVELS - 1);
+            counts[bucket[k] + 1]++;
+            dots++;
+        }
+        sort(counts, bucket, order, n);
+        for (let b = 0; b < buckets; b++) {
+            let from = counts[b], to = counts[b + 1];
+            if (from === to) {
+                continue;
+            }
+            let r = 0.85 + 0.45 * Math.floor(b / ALPHA_LEVELS) / (TINT_LEVELS - 1);
+            ctx.beginPath();
+            for (let s = from; s < to; s++) {
+                let k = order[s];
+                ctx.moveTo(px[k] + r, py[k]);
+                ctx.arc(px[k], py[k], r, 0, TAU);
+            }
+            ctx.globalAlpha = (b % ALPHA_LEVELS) / (ALPHA_LEVELS - 1);
+            ctx.fillStyle = fills[Math.floor(b / ALPHA_LEVELS)];
+            ctx.fill();
+        }
+        ctx.globalAlpha = 1;
+    }
+    function sort(counts, keys, into, n) {
+        for (let b = 1, m = counts.length; b < m; b++) {
+            counts[b] += counts[b - 1];
+        }
+        let cursor = counts.slice();
+        for (let i = 0; i < n; i++) {
+            if (keys[i] < counts.length - 1) {
+                into[cursor[keys[i]]++] = i;
+            }
+        }
+    }
+    function track(event) {
+        if (!host) {
+            return;
+        }
+        let bounds = host.getBoundingClientRect();
+        pointer.at = performance.now();
+        pointer.inside = true;
+        pointer.x = event.clientX - bounds.left;
+        pointer.y = event.clientY - bounds.top;
+    }
+    return (() => {
+        let root_1a5zh7n6 = template_1a5zh7n7(), element_1a5zh7n8 = root_1a5zh7n6.firstChild, element_1a5zh7n9 = element_1a5zh7n8.firstElementChild.nextElementSibling;
+        template_u1.setProperties(element_1a5zh7n8, this?.attributes);
+        template_u1.setProperties(element_1a5zh7n8, rest);
+        template_u1.onconnect(element_1a5zh7n8, (element) => {
+            host = element;
+            canvas = element.querySelector('.surface-field-canvas');
+            context = canvas.getContext('2d');
+            observer = new IntersectionObserver((entries) => {
+                visible = entries[entries.length - 1].isIntersecting;
+                if (visible) {
+                    start();
+                }
+                else {
+                    stop();
+                }
+            });
+            observer.observe(element);
+        });
+        template_u1.ondisconnect(element_1a5zh7n8, () => {
+            observer?.disconnect();
+            stop();
+        });
+        template_u1.delegate(element_1a5zh7n8, 'pointerdown', (event) => {
+            track(event);
+            if (event.button !== 0 || event.target.closest?.(SELECTOR)) {
+                return;
+            }
+            ripples.push({ born: performance.now(), x: pointer.x, y: pointer.y });
+            if (ripples.length > 6) {
+                ripples.shift();
+            }
+        });
+        template_u1.on(element_1a5zh7n8, 'pointerleave', () => {
+            pointer.at = performance.now();
+            pointer.inside = false;
+        });
+        template_u1.delegate(element_1a5zh7n8, 'pointermove', track);
+        template_u1.slot(element_1a5zh7n9, content, 1);
+        return root_1a5zh7n6;
+    })();
+}), { surface });

package/build/components/surface-field/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.surface-field{--color:var(--color-text-500);--surface-background:var(--color-white-300);--surface-border-color:oklch(from var(--color-black-300) l c h / .06);--surface-border-radius:14px;--surface-box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 8px 24px -8px oklch(from var(--color-black-300) l c h / .14);--surface-box-shadow-active:0 2px 4px oklch(from var(--color-black-300) l c h / .08), 0 20px 40px -12px oklch(from var(--color-black-300) l c h / .24);--surface-grip-color:var(--color-text-300);--surface-handle-height:28px;--surface-lift-duration:.2s;isolation:isolate;position:relative}.surface-field-canvas{color:var(--color);pointer-events:none;z-index:0;width:100%;height:100%;transition:none;position:absolute;inset:0}.surface-field-content{z-index:1;height:100%;position:relative}.surface-field-surface{background:var(--surface-background);border-radius:var(--surface-border-radius);box-shadow:0 0 0 1px var(--surface-border-color), var(--surface-box-shadow);transition:box-shadow var(--surface-lift-duration) ease, scale var(--surface-lift-duration) ease;flex-direction:column;display:flex;position:absolute;top:0;left:0}.surface-field-surface.--active{box-shadow:0 0 0 1px var(--surface-border-color), var(--surface-box-shadow-active);scale:1.01}.surface-field-surface-content{flex:1;min-height:0;padding:0 16px 16px;overflow:hidden}.surface-field-surface-handle,.surface-field-surface-resize{color:var(--surface-grip-color);touch-action:none;background:0 0;border:0;padding:0}.surface-field-surface-handle:focus-visible,.surface-field-surface-resize:focus-visible{outline:2px solid oklch(from var(--color) l c h/.4);outline-offset:-2px}.surface-field-surface-handle{border-radius:var(--surface-border-radius) var(--surface-border-radius) 0 0;cursor:grab;height:var(--surface-handle-height);flex-shrink:0;width:100%;position:relative}.surface-field-surface-handle:before{content:"";opacity:.7;background:currentColor;border-radius:999px;width:18px;height:2px;position:absolute;top:50%;left:50%;translate:-50% -50%}.surface-field-surface.--active .surface-field-surface-handle{cursor:grabbing}.surface-field-surface-resize{border-radius:0 0 var(--surface-border-radius) 0;cursor:nwse-resize;opacity:.7;background:linear-gradient(135deg,#0000 45%,currentColor 45% 52%,#0000 52%) 4px 4px/12px 12px no-repeat,linear-gradient(135deg,#0000 70%,currentColor 70% 77%,#0000 77%) 4px 4px/12px 12px no-repeat;width:22px;height:22px;position:absolute;bottom:0;right:0}@media (prefers-reduced-motion:reduce){.surface-field-surface{transition:box-shadow var(--surface-lift-duration) ease}.surface-field-surface.--active{scale:1}}}
+/*$vite$:1*/

package/package.json

@@ -58,7 +58,7 @@
     "**/*.scss"
   ],
   "type": "module",
-  "version": "0.56.2",
+  "version": "0.56.4",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/src/components/bento-grid/scss/index.scss

@@ -130,8 +130,9 @@
         scale: 0.75;
     }
 
-    // Wide enough for columns: the call to action waits below the card and the text lifts to make room for it.
-    @container (min-width: 720px) {
+    // Wide enough for three ~180px columns: the call to action waits below the card and the text lifts to make room
+    // for it. Magic UI switches at the lg viewport, where its grid is around 700–900px; docs previews are narrower.
+    @container (min-width: 560px) {
         &-card {
             grid-column: span var(--span);
         }

package/src/components/index.ts

@@ -50,6 +50,7 @@ export { default as modal } from './modal';
 export { default as morphingButton } from './morphing-button';
 export { default as morphingNav } from './morphing-nav';
 export { default as multiStepForm } from './multi-step-form';
+export { default as navigationMenu } from './navigation-menu';
 export { default as nestedMenu } from './nested-menu';
 export { default as notificationBell } from './notification-bell';
 export { default as number } from './number';
@@ -58,6 +59,7 @@ export { default as overlay } from './overlay';
 export { default as pageDots } from './page-dots';
 export { default as pagination } from './pagination';
 export { default as password } from './password';
+export { default as planCard } from './plan-card';
 export { default as progress } from './progress';
 export { default as pullToRefresh } from './pull-to-refresh';
 export { default as radio } from './radio';
@@ -92,6 +94,7 @@ export { default as statusPicker } from './status-picker';
 export { default as stickyHeader } from './sticky-header';
 export { default as stickyStack } from './sticky-stack';
 export { default as storyProgress } from './story-progress';
+export { default as surfaceField } from './surface-field';
 export { default as swipeDeck } from './swipe-deck';
 export { default as switch } from './switch';
 export { default as tagInput } from './tag-input';