@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/imported/shape-blur/ShapeBlur.jsx

@@ -0,0 +1,256 @@
+import { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+const vertexShader = /* glsl */ `
+varying vec2 v_texcoord;
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_texcoord = uv;
+}
+`;
+
+const fragmentShader = /* glsl */ `
+varying vec2 v_texcoord;
+
+uniform vec2 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform float u_shapeSize;
+uniform float u_roundness;
+uniform float u_borderSize;
+uniform float u_circleSize;
+uniform float u_circleEdge;
+
+#ifndef PI
+#define PI 3.1415926535897932384626433832795
+#endif
+#ifndef TWO_PI
+#define TWO_PI 6.2831853071795864769252867665590
+#endif
+
+#ifndef VAR
+#define VAR 0
+#endif
+
+#ifndef FNC_COORD
+#define FNC_COORD
+vec2 coord(in vec2 p) {
+    p = p / u_resolution.xy;
+    if (u_resolution.x > u_resolution.y) {
+        p.x *= u_resolution.x / u_resolution.y;
+        p.x += (u_resolution.y - u_resolution.x) / u_resolution.y / 2.0;
+    } else {
+        p.y *= u_resolution.y / u_resolution.x;
+        p.y += (u_resolution.x - u_resolution.y) / u_resolution.x / 2.0;
+    }
+    p -= 0.5;
+    p *= vec2(-1.0, 1.0);
+    return p;
+}
+#endif
+
+#define st0 coord(gl_FragCoord.xy)
+#define mx coord(u_mouse * u_pixelRatio)
+
+float sdRoundRect(vec2 p, vec2 b, float r) {
+    vec2 d = abs(p - 0.5) * 4.2 - b + vec2(r);
+    return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+}
+float sdCircle(in vec2 st, in vec2 center) {
+    return length(st - center) * 2.0;
+}
+float sdPoly(in vec2 p, in float w, in int sides) {
+    float a = atan(p.x, p.y) + PI;
+    float r = TWO_PI / float(sides);
+    float d = cos(floor(0.5 + a / r) * r - a) * length(max(abs(p) * 1.0, 0.0));
+    return d * 2.0 - w;
+}
+
+float aastep(float threshold, float value) {
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold - afwidth, threshold + afwidth, value);
+}
+float fill(in float x) { return 1.0 - aastep(0.0, x); }
+float fill(float x, float size, float edge) {
+    return 1.0 - smoothstep(size - edge, size + edge, x);
+}
+float stroke(in float d, in float t) { return (1.0 - aastep(t, abs(d))); }
+float stroke(float x, float size, float w, float edge) {
+    float d = smoothstep(size - edge, size + edge, x + w * 0.5) - smoothstep(size - edge, size + edge, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+float strokeAA(float x, float size, float w, float edge) {
+    float afwidth = length(vec2(dFdx(x), dFdy(x))) * 0.70710678;
+    float d = smoothstep(size - edge - afwidth, size + edge + afwidth, x + w * 0.5)
+            - smoothstep(size - edge - afwidth, size + edge + afwidth, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+void main() {
+    vec2 st = st0 + 0.5;
+    vec2 posMouse = mx * vec2(1., -1.) + 0.5;
+
+    float size = u_shapeSize;
+    float roundness = u_roundness;
+    float borderSize = u_borderSize;
+    float circleSize = u_circleSize;
+    float circleEdge = u_circleEdge;
+
+    float sdfCircle = fill(
+        sdCircle(st, posMouse),
+        circleSize,
+        circleEdge
+    );
+
+    float sdf;
+    if (VAR == 0) {
+        sdf = sdRoundRect(st, vec2(size), roundness);
+        sdf = strokeAA(sdf, 0.0, borderSize, sdfCircle) * 4.0;
+    } else if (VAR == 1) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = fill(sdf, 0.6, sdfCircle) * 1.2;
+    } else if (VAR == 2) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = strokeAA(sdf, 0.58, 0.02, sdfCircle) * 4.0;
+    } else if (VAR == 3) {
+        sdf = sdPoly(st - vec2(0.5, 0.45), 0.3, 3);
+        sdf = fill(sdf, 0.05, sdfCircle) * 1.4;
+    }
+
+    vec3 color = vec3(1.0);
+    float alpha = sdf;
+    gl_FragColor = vec4(color.rgb, alpha);
+}
+`;
+
+const ShapeBlur = ({
+  className = '',
+  variation = 0,
+  pixelRatioProp = 2,
+  shapeSize = 1.2,
+  roundness = 0.4,
+  borderSize = 0.05,
+  circleSize = 0.3,
+  circleEdge = 0.5
+}) => {
+  const mountRef = useRef();
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) return;
+
+    let active = true;
+    let animationFrameId;
+    let time = 0,
+      lastTime = 0;
+
+    const vMouse = new THREE.Vector2();
+    const vMouseDamp = new THREE.Vector2();
+    const vResolution = new THREE.Vector2();
+
+    let w = 1,
+      h = 1;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera();
+    camera.position.z = 1;
+
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setClearColor(0x000000, 0);
+    mount.appendChild(renderer.domElement);
+
+    const geo = new THREE.PlaneGeometry(1, 1);
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        u_mouse: { value: vMouseDamp },
+        u_resolution: { value: vResolution },
+        u_pixelRatio: { value: pixelRatioProp },
+        u_shapeSize: { value: shapeSize },
+        u_roundness: { value: roundness },
+        u_borderSize: { value: borderSize },
+        u_circleSize: { value: circleSize },
+        u_circleEdge: { value: circleEdge }
+      },
+      defines: { VAR: variation },
+      transparent: true
+    });
+
+    const quad = new THREE.Mesh(geo, material);
+    scene.add(quad);
+
+    const onPointerMove = e => {
+      const rect = mount.getBoundingClientRect();
+      vMouse.set(e.clientX - rect.left, e.clientY - rect.top);
+    };
+
+    document.addEventListener('mousemove', onPointerMove);
+    document.addEventListener('pointermove', onPointerMove);
+
+    const resize = () => {
+      if (!active) return;
+      w = mount.clientWidth;
+      h = mount.clientHeight;
+      const dpr = Math.min(window.devicePixelRatio, 2);
+
+      renderer.setSize(w, h);
+      renderer.setPixelRatio(dpr);
+
+      camera.left = -w / 2;
+      camera.right = w / 2;
+      camera.top = h / 2;
+      camera.bottom = -h / 2;
+      camera.updateProjectionMatrix();
+
+      quad.scale.set(w, h, 1);
+      vResolution.set(w, h).multiplyScalar(dpr);
+      material.uniforms.u_pixelRatio.value = dpr;
+    };
+
+    resize();
+    window.addEventListener('resize', resize);
+
+    const ro = new ResizeObserver(() => {
+      if (!active) return;
+      resize();
+    });
+    ro.observe(mount);
+
+    const update = () => {
+      if (!active) return;
+      time = performance.now() * 0.001;
+      const dt = time - lastTime;
+      lastTime = time;
+
+      ['x', 'y'].forEach(k => {
+        vMouseDamp[k] = THREE.MathUtils.damp(vMouseDamp[k], vMouse[k], 8, dt);
+      });
+
+      renderer.render(scene, camera);
+      animationFrameId = requestAnimationFrame(update);
+    };
+    update();
+
+    return () => {
+      active = false;
+
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener('resize', resize);
+      ro.disconnect();
+      document.removeEventListener('mousemove', onPointerMove);
+      document.removeEventListener('pointermove', onPointerMove);
+      if (mount.contains(renderer.domElement)) {
+        mount.removeChild(renderer.domElement);
+      }
+      renderer.dispose();
+      renderer.forceContextLoss();
+    };
+  }, [variation, pixelRatioProp, shapeSize, roundness, borderSize, circleSize, circleEdge]);
+
+  return <div className={className} ref={mountRef} style={{ width: '100%', height: '100%' }} />;
+};
+
+export default ShapeBlur;

package/assets/upstream/recipes/imported/shape-grid/ShapeGrid.css

@@ -0,0 +1,6 @@
+.shapegrid-canvas {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}

package/assets/upstream/recipes/imported/shape-grid/ShapeGrid.jsx

@@ -0,0 +1,387 @@
+import { useRef, useEffect } from 'react';
+import './ShapeGrid.css';
+
+const ShapeGrid = ({
+  direction = 'right',
+  speed = 1,
+  borderColor = '#999',
+  squareSize = 40,
+  hoverFillColor = '#222',
+  shape = 'square',
+  hoverTrailAmount = 0,
+  className = ''
+}) => {
+  const canvasRef = useRef(null);
+  const requestRef = useRef(null);
+  const numSquaresX = useRef();
+  const numSquaresY = useRef();
+  const gridOffset = useRef({ x: 0, y: 0 });
+  const hoveredSquare = useRef(null);
+  const trailCells = useRef([]);
+  const cellOpacities = useRef(new Map());
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    const isHex = shape === 'hexagon';
+    const isTri = shape === 'triangle';
+    const hexHoriz = squareSize * 1.5;
+    const hexVert = squareSize * Math.sqrt(3);
+
+    const resizeCanvas = () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+      numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1;
+      numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1;
+    };
+
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+
+    const drawHex = (cx, cy, size) => {
+      ctx.beginPath();
+      for (let i = 0; i < 6; i++) {
+        const angle = (Math.PI / 3) * i;
+        const vx = cx + size * Math.cos(angle);
+        const vy = cy + size * Math.sin(angle);
+        if (i === 0) ctx.moveTo(vx, vy);
+        else ctx.lineTo(vx, vy);
+      }
+      ctx.closePath();
+    };
+
+    const drawCircle = (cx, cy, size) => {
+      ctx.beginPath();
+      ctx.arc(cx, cy, size / 2, 0, Math.PI * 2);
+      ctx.closePath();
+    };
+
+    const drawTriangle = (cx, cy, size, flip) => {
+      ctx.beginPath();
+      if (flip) {
+        ctx.moveTo(cx, cy + size / 2);
+        ctx.lineTo(cx + size / 2, cy - size / 2);
+        ctx.lineTo(cx - size / 2, cy - size / 2);
+      } else {
+        ctx.moveTo(cx, cy - size / 2);
+        ctx.lineTo(cx + size / 2, cy + size / 2);
+        ctx.lineTo(cx - size / 2, cy + size / 2);
+      }
+      ctx.closePath();
+    };
+
+    const drawGrid = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      if (isHex) {
+        const colShift = Math.floor(gridOffset.current.x / hexHoriz);
+        const offsetX = ((gridOffset.current.x % hexHoriz) + hexHoriz) % hexHoriz;
+        const offsetY = ((gridOffset.current.y % hexVert) + hexVert) % hexVert;
+
+        const cols = Math.ceil(canvas.width / hexHoriz) + 3;
+        const rows = Math.ceil(canvas.height / hexVert) + 3;
+
+        for (let col = -2; col < cols; col++) {
+          for (let row = -2; row < rows; row++) {
+            const cx = col * hexHoriz + offsetX;
+            const cy = row * hexVert + ((col + colShift) % 2 !== 0 ? hexVert / 2 : 0) + offsetY;
+
+            const cellKey = `${col},${row}`;
+            const alpha = cellOpacities.current.get(cellKey);
+            if (alpha) {
+              ctx.globalAlpha = alpha;
+              drawHex(cx, cy, squareSize);
+              ctx.fillStyle = hoverFillColor;
+              ctx.fill();
+              ctx.globalAlpha = 1;
+            }
+
+            drawHex(cx, cy, squareSize);
+            ctx.strokeStyle = borderColor;
+            ctx.stroke();
+          }
+        }
+      } else if (isTri) {
+        const halfW = squareSize / 2;
+        const colShift = Math.floor(gridOffset.current.x / halfW);
+        const rowShift = Math.floor(gridOffset.current.y / squareSize);
+        const offsetX = ((gridOffset.current.x % halfW) + halfW) % halfW;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const cols = Math.ceil(canvas.width / halfW) + 4;
+        const rows = Math.ceil(canvas.height / squareSize) + 4;
+
+        for (let col = -2; col < cols; col++) {
+          for (let row = -2; row < rows; row++) {
+            const cx = col * halfW + offsetX;
+            const cy = row * squareSize + squareSize / 2 + offsetY;
+            const flip = ((col + colShift + row + rowShift) % 2 + 2) % 2 !== 0;
+
+            const cellKey = `${col},${row}`;
+            const alpha = cellOpacities.current.get(cellKey);
+            if (alpha) {
+              ctx.globalAlpha = alpha;
+              drawTriangle(cx, cy, squareSize, flip);
+              ctx.fillStyle = hoverFillColor;
+              ctx.fill();
+              ctx.globalAlpha = 1;
+            }
+
+            drawTriangle(cx, cy, squareSize, flip);
+            ctx.strokeStyle = borderColor;
+            ctx.stroke();
+          }
+        }
+      } else if (shape === 'circle') {
+        const offsetX = ((gridOffset.current.x % squareSize) + squareSize) % squareSize;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const cols = Math.ceil(canvas.width / squareSize) + 3;
+        const rows = Math.ceil(canvas.height / squareSize) + 3;
+
+        for (let col = -2; col < cols; col++) {
+          for (let row = -2; row < rows; row++) {
+            const cx = col * squareSize + squareSize / 2 + offsetX;
+            const cy = row * squareSize + squareSize / 2 + offsetY;
+
+            const cellKey = `${col},${row}`;
+            const alpha = cellOpacities.current.get(cellKey);
+            if (alpha) {
+              ctx.globalAlpha = alpha;
+              drawCircle(cx, cy, squareSize);
+              ctx.fillStyle = hoverFillColor;
+              ctx.fill();
+              ctx.globalAlpha = 1;
+            }
+
+            drawCircle(cx, cy, squareSize);
+            ctx.strokeStyle = borderColor;
+            ctx.stroke();
+          }
+        }
+      } else {
+        const offsetX = ((gridOffset.current.x % squareSize) + squareSize) % squareSize;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const cols = Math.ceil(canvas.width / squareSize) + 3;
+        const rows = Math.ceil(canvas.height / squareSize) + 3;
+
+        for (let col = -2; col < cols; col++) {
+          for (let row = -2; row < rows; row++) {
+            const sx = col * squareSize + offsetX;
+            const sy = row * squareSize + offsetY;
+
+            const cellKey = `${col},${row}`;
+            const alpha = cellOpacities.current.get(cellKey);
+            if (alpha) {
+              ctx.globalAlpha = alpha;
+              ctx.fillStyle = hoverFillColor;
+              ctx.fillRect(sx, sy, squareSize, squareSize);
+              ctx.globalAlpha = 1;
+            }
+
+            ctx.strokeStyle = borderColor;
+            ctx.strokeRect(sx, sy, squareSize, squareSize);
+          }
+        }
+      }
+
+      const gradient = ctx.createRadialGradient(
+        canvas.width / 2,
+        canvas.height / 2,
+        0,
+        canvas.width / 2,
+        canvas.height / 2,
+        Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
+      );
+      gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
+
+    const updateAnimation = () => {
+      const effectiveSpeed = Math.max(speed, 0.1);
+      const wrapX = isHex ? hexHoriz * 2 : squareSize;
+      const wrapY = isHex ? hexVert : isTri ? squareSize * 2 : squareSize;
+
+      switch (direction) {
+        case 'right':
+          gridOffset.current.x = (gridOffset.current.x - effectiveSpeed + wrapX) % wrapX;
+          break;
+        case 'left':
+          gridOffset.current.x = (gridOffset.current.x + effectiveSpeed + wrapX) % wrapX;
+          break;
+        case 'up':
+          gridOffset.current.y = (gridOffset.current.y + effectiveSpeed + wrapY) % wrapY;
+          break;
+        case 'down':
+          gridOffset.current.y = (gridOffset.current.y - effectiveSpeed + wrapY) % wrapY;
+          break;
+        case 'diagonal':
+          gridOffset.current.x = (gridOffset.current.x - effectiveSpeed + wrapX) % wrapX;
+          gridOffset.current.y = (gridOffset.current.y - effectiveSpeed + wrapY) % wrapY;
+          break;
+        default:
+          break;
+      }
+
+      updateCellOpacities();
+      drawGrid();
+      requestRef.current = requestAnimationFrame(updateAnimation);
+    };
+
+    const updateCellOpacities = () => {
+      const targets = new Map();
+
+      if (hoveredSquare.current) {
+        targets.set(`${hoveredSquare.current.x},${hoveredSquare.current.y}`, 1);
+      }
+
+      if (hoverTrailAmount > 0) {
+        for (let i = 0; i < trailCells.current.length; i++) {
+          const t = trailCells.current[i];
+          const key = `${t.x},${t.y}`;
+          if (!targets.has(key)) {
+            targets.set(key, (trailCells.current.length - i) / (trailCells.current.length + 1));
+          }
+        }
+      }
+
+      for (const [key] of targets) {
+        if (!cellOpacities.current.has(key)) {
+          cellOpacities.current.set(key, 0);
+        }
+      }
+
+      for (const [key, opacity] of cellOpacities.current) {
+        const target = targets.get(key) || 0;
+        const next = opacity + (target - opacity) * 0.15;
+        if (next < 0.005) {
+          cellOpacities.current.delete(key);
+        } else {
+          cellOpacities.current.set(key, next);
+        }
+      }
+    };
+
+    const handleMouseMove = event => {
+      const rect = canvas.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+
+      if (isHex) {
+        const colShift = Math.floor(gridOffset.current.x / hexHoriz);
+        const offsetX = ((gridOffset.current.x % hexHoriz) + hexHoriz) % hexHoriz;
+        const offsetY = ((gridOffset.current.y % hexVert) + hexVert) % hexVert;
+        const adjustedX = mouseX - offsetX;
+        const adjustedY = mouseY - offsetY;
+
+        const col = Math.round(adjustedX / hexHoriz);
+        const rowOffset = (col + colShift) % 2 !== 0 ? hexVert / 2 : 0;
+        const row = Math.round((adjustedY - rowOffset) / hexVert);
+
+        if (
+          !hoveredSquare.current ||
+          hoveredSquare.current.x !== col ||
+          hoveredSquare.current.y !== row
+        ) {
+          if (hoveredSquare.current && hoverTrailAmount > 0) {
+            trailCells.current.unshift({ ...hoveredSquare.current });
+            if (trailCells.current.length > hoverTrailAmount) trailCells.current.length = hoverTrailAmount;
+          }
+          hoveredSquare.current = { x: col, y: row };
+        }
+      } else if (isTri) {
+        const halfW = squareSize / 2;
+        const offsetX = ((gridOffset.current.x % halfW) + halfW) % halfW;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const adjustedX = mouseX - offsetX;
+        const adjustedY = mouseY - offsetY;
+
+        const col = Math.round(adjustedX / halfW);
+        const row = Math.floor(adjustedY / squareSize);
+
+        if (
+          !hoveredSquare.current ||
+          hoveredSquare.current.x !== col ||
+          hoveredSquare.current.y !== row
+        ) {
+          if (hoveredSquare.current && hoverTrailAmount > 0) {
+            trailCells.current.unshift({ ...hoveredSquare.current });
+            if (trailCells.current.length > hoverTrailAmount) trailCells.current.length = hoverTrailAmount;
+          }
+          hoveredSquare.current = { x: col, y: row };
+        }
+      } else if (shape === 'circle') {
+        const offsetX = ((gridOffset.current.x % squareSize) + squareSize) % squareSize;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const adjustedX = mouseX - offsetX;
+        const adjustedY = mouseY - offsetY;
+
+        const col = Math.round(adjustedX / squareSize);
+        const row = Math.round(adjustedY / squareSize);
+
+        if (
+          !hoveredSquare.current ||
+          hoveredSquare.current.x !== col ||
+          hoveredSquare.current.y !== row
+        ) {
+          if (hoveredSquare.current && hoverTrailAmount > 0) {
+            trailCells.current.unshift({ ...hoveredSquare.current });
+            if (trailCells.current.length > hoverTrailAmount) trailCells.current.length = hoverTrailAmount;
+          }
+          hoveredSquare.current = { x: col, y: row };
+        }
+      } else {
+        const offsetX = ((gridOffset.current.x % squareSize) + squareSize) % squareSize;
+        const offsetY = ((gridOffset.current.y % squareSize) + squareSize) % squareSize;
+
+        const adjustedX = mouseX - offsetX;
+        const adjustedY = mouseY - offsetY;
+
+        const col = Math.floor(adjustedX / squareSize);
+        const row = Math.floor(adjustedY / squareSize);
+
+        if (
+          !hoveredSquare.current ||
+          hoveredSquare.current.x !== col ||
+          hoveredSquare.current.y !== row
+        ) {
+          if (hoveredSquare.current && hoverTrailAmount > 0) {
+            trailCells.current.unshift({ ...hoveredSquare.current });
+            if (trailCells.current.length > hoverTrailAmount) trailCells.current.length = hoverTrailAmount;
+          }
+          hoveredSquare.current = { x: col, y: row };
+        }
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (hoveredSquare.current && hoverTrailAmount > 0) {
+        trailCells.current.unshift({ ...hoveredSquare.current });
+        if (trailCells.current.length > hoverTrailAmount) trailCells.current.length = hoverTrailAmount;
+      }
+      hoveredSquare.current = null;
+    };
+
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+
+    requestRef.current = requestAnimationFrame(updateAnimation);
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+      cancelAnimationFrame(requestRef.current);
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, [direction, speed, borderColor, hoverFillColor, squareSize, shape, hoverTrailAmount]);
+
+  return <canvas ref={canvasRef} className={`shapegrid-canvas ${className}`}></canvas>;
+};
+
+export default ShapeGrid;

package/assets/upstream/recipes/imported/shiny-text/ShinyText.css

@@ -0,0 +1,3 @@
+.shiny-text {
+  display: inline-block;
+}