@zyncat/ui 0.10.0 → 0.12.0

package/dist/instagram-feed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/expressive/instagram-feed/InstagramFeed.tsx"],"names":[],"mappings":"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","file":"instagram-feed.js","sourcesContent":["'use client';\n\nimport './instagram-feed.css';\n\nimport { useId, useRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { cx } from '../../internal/utils/cx';\n\nconst CAPTION_LIMIT = 125;\nconst CAPTION_BREAK_RATIO = 0.65;\nconst THOUSAND = 1e3;\nconst MILLION = 1e6;\nconst COMPACT_DIGITS = 1;\nconst LIKE_POP_FROM = 0.8;\nconst SAVE_POP_FROM = 0.86;\nconst BURST_ENTER_FROM = 0.4;\nconst BURST_BOUNCE = 0.42;\nconst BURST_EXIT_SCALE = 1.25;\nconst DEFAULT_AUDIO = 'Original audio';\nconst SEPARATOR = '•';\nconst ELLIPSIS_MORE = '... more';\n\nconst CAPTION_SEGMENTS = /([#@][^\\s#@]+)/g;\nconst TRAILING_PUNCTUATION = /[\\s,.;:—-]+$/;\nconst TRAILING_ZERO = /\\.0$/;\n\nconst HEART = [\n  'M20.8 4.9a5.4 5.4 0 0 0-7.7 0L12 6l-1.1-1.1a5.4 5.4 0 0 0-7.7 7.7l8.8 8.8 8.8-8.8a5.4 5.4 0 0 0 0-7.7z',\n];\nconst SPEECH = [\n  'M21 11.6a8.4 8.4 0 0 1-8.5 8.4 8.6 8.6 0 0 1-4-1L3 20.9l1.9-4.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 8.5-8.4 8.4 8.4 0 0 1 8.5 8.4z',\n];\nconst REPOST = [\n  'M7.5 4.5 4 8l3.5 3.5',\n  'M4 8h12a4 4 0 0 1 4 4v1',\n  'M16.5 19.5 20 16l-3.5-3.5',\n  'M20 16H8a4 4 0 0 1-4-4v-1',\n];\nconst PAPER_PLANE = ['M22 3 2 10.5l8 3.2 3.2 8L22 3z', 'M10 13.7 22 3'];\nconst BOOKMARK = ['M6 3h12a.9.9 0 0 1 .9.9V21L12 16.2 5.1 21V3.9A.9.9 0 0 1 6 3z'];\nconst SPEAKER_BODY = 'M11 5 6.5 9H3v6h3.5L11 19z';\nconst SPEAKER_MUTED = [SPEAKER_BODY, 'M16 9.5 21 15', 'M21 9.5 16 15'];\nconst SPEAKER_LOUD = [SPEAKER_BODY, 'M16 9.6a4 4 0 0 1 0 4.8', 'M18.6 7.2a7.6 7.6 0 0 1 0 9.6'];\n\nfunction paths(list: readonly string[]) {\n  return list.map((d) => <path key={d} d={d} />);\n}\n\nfunction compact(value: number): string {\n  const rounded = Math.max(0, Math.round(Number(value) || 0));\n  if (rounded >= MILLION) return `${(rounded / MILLION).toFixed(COMPACT_DIGITS).replace(TRAILING_ZERO, '')}M`;\n  if (rounded >= THOUSAND) return `${(rounded / THOUSAND).toFixed(COMPACT_DIGITS).replace(TRAILING_ZERO, '')}K`;\n  return String(rounded);\n}\n\ninterface ClippedCaption {\n  head: string;\n  clipped: boolean;\n}\n\nfunction clipCaption(text: string): ClippedCaption {\n  if (text.length <= CAPTION_LIMIT) return { head: text, clipped: false };\n  let breakAt = text.lastIndexOf(' ', CAPTION_LIMIT);\n  if (breakAt < CAPTION_LIMIT * CAPTION_BREAK_RATIO) breakAt = CAPTION_LIMIT;\n  return { head: text.slice(0, breakAt).replace(TRAILING_PUNCTUATION, ''), clipped: true };\n}\n\nfunction captionSegments(text: string) {\n  return text\n    .split(CAPTION_SEGMENTS)\n    .filter(Boolean)\n    .map((segment, index) => ({ key: `${index}-${segment}`, text: segment, link: /^[#@]/.test(segment) }));\n}\n\nfunction slotted(source: ReactNode): ReactNode {\n  if (typeof source !== 'string') return source;\n  return source ? <img src={source} alt=\"\" /> : null;\n}\n\nfunction pop(el: HTMLElement | null, from: number) {\n  if (el) animate(el, { scale: [from, 1], timing: UIMotion.t.settle });\n}\n\nexport type InstagramFeedAction = 'comment' | 'repost' | 'send' | 'menu' | 'follow';\n\nexport interface InstagramFeedOwnProps {\n  /** Post kind. `video` runs the black media frame full-bleed and floats the header on it in white. @default 'image' */\n  type?: 'image' | 'video';\n  /** Which column to reproduce: the 390px mobile viewport, or the 470px web column that also carries Follow. @default 'web' */\n  width?: 'mobile' | 'web';\n  /** Account name shown in the header and again in front of the caption. */\n  handle: string;\n  /** Caption body. Clipped at 125 characters with a trailing \"... more\"; #tags and @mentions take the link colour. */\n  caption?: string;\n  /** Media frame proportion. @default '4:5' */\n  ratio?: '4:5' | '1:1';\n  /** Post media. A string is read as an image URL; a node (`<img>`, `<video>`, `next/image`) is rendered as given and gets `alt` from you. Empty leaves the platform's flat placeholder. */\n  media?: ReactNode;\n  /** Avatar inside the story ring. A string is read as an image URL; a node is rendered as given. */\n  avatar?: ReactNode;\n  /** Audio credit on the second header line, video posts only. @default 'Original audio' */\n  audio?: string;\n  /** Relative time in the header, e.g. `1d`. Omitted entirely when unset. */\n  stamp?: string;\n  /** Likes excluding you; the displayed count adds one while `liked` is on. @default 0 */\n  likes?: number;\n  /** Comment count beside the speech glyph. @default 0 */\n  comments?: number;\n  /** Repost count beside the repost glyph. @default 0 */\n  reposts?: number;\n  /** Controlled like state. */\n  liked?: boolean;\n  /** Uncontrolled initial like state. @default false */\n  defaultLiked?: boolean;\n  /** Fires when the heart or a double-tap on the media toggles the like. */\n  onLikedChange?: (liked: boolean) => void;\n  /** Controlled bookmark state. */\n  saved?: boolean;\n  /** Uncontrolled initial bookmark state. @default false */\n  defaultSaved?: boolean;\n  /** Fires when the bookmark toggles. */\n  onSavedChange?: (saved: boolean) => void;\n  /** Controlled mute state for the video mute chip. */\n  muted?: boolean;\n  /** Uncontrolled initial mute state. @default true */\n  defaultMuted?: boolean;\n  /** Fires when the mute chip toggles. The component never touches a media element you supplied. */\n  onMutedChange?: (muted: boolean) => void;\n  /** Fires for the actions that carry no state: comment, repost, send, menu, follow. */\n  onAction?: (action: InstagramFeedAction) => void;\n  /** Extra class(es) merged onto the card. */\n  className?: string;\n  /** Inline styles merged onto the card. */\n  style?: CSSProperties;\n}\n\nexport interface InstagramFeedProps extends InstagramFeedOwnProps {\n  /** Standard <article> attributes (aria-*, data-*, title, ...) forwarded to the card. */\n  htmlProps?: Omit<HTMLAttributes<HTMLElement>, keyof InstagramFeedOwnProps> & DataAttributes;\n}\n\nexport function InstagramFeed({\n  type = 'image',\n  width = 'web',\n  handle,\n  caption = '',\n  ratio = '4:5',\n  media,\n  avatar,\n  audio = DEFAULT_AUDIO,\n  stamp,\n  likes = 0,\n  comments = 0,\n  reposts = 0,\n  liked,\n  defaultLiked = false,\n  onLikedChange,\n  saved,\n  defaultSaved = false,\n  onSavedChange,\n  muted,\n  defaultMuted = true,\n  onMutedChange,\n  onAction,\n  className = '',\n  style,\n  htmlProps,\n}: InstagramFeedProps) {\n  const handleId = useId();\n  const likeRef = useRef<HTMLButtonElement>(null);\n  const saveRef = useRef<HTMLButtonElement>(null);\n  const burstRef = useRef<HTMLSpanElement>(null);\n  const burstToken = useRef(0);\n\n  const [isLiked, setLiked] = useControllable(liked, defaultLiked, onLikedChange);\n  const [isSaved, setSaved] = useControllable(saved, defaultSaved, onSavedChange);\n  const [isMuted, setMuted] = useControllable(muted, defaultMuted, onMutedChange);\n\n  const isVideo = type === 'video';\n  const clipped = clipCaption(caption);\n  const segments = captionSegments(clipped.head);\n\n  const toggleLike = () => {\n    setLiked(!isLiked);\n    pop(likeRef.current, LIKE_POP_FROM);\n  };\n\n  const toggleSave = () => {\n    setSaved(!isSaved);\n    pop(saveRef.current, SAVE_POP_FROM);\n  };\n\n  const burstLike = () => {\n    if (!isLiked) {\n      setLiked(true);\n      pop(likeRef.current, LIKE_POP_FROM);\n    }\n    const el = burstRef.current;\n    if (!el || UIMotion.reduced) return;\n    const token = ++burstToken.current;\n    void animate(el, {\n      scale: [BURST_ENTER_FROM, 1],\n      opacity: [0, 1],\n      timing: { type: 'spring', visualDuration: UIMotion.dur.base, bounce: BURST_BOUNCE },\n    }).finished.then(() => {\n      if (token !== burstToken.current) return;\n      animate(el, {\n        scale: [BURST_EXIT_SCALE],\n        opacity: [0],\n        timing: { duration: UIMotion.dur.slow, ease: UIMotion.ease.exit, delay: UIMotion.dur.fast },\n      });\n    });\n  };\n\n  return (\n    <article\n      {...htmlProps}\n      className={cx('instagram-feed', className)}\n      style={style}\n      aria-labelledby={handleId}\n      data-type={type}\n      data-width={width}\n      data-ratio={ratio}\n    >\n      <div className=\"instagram-feed__frame\">\n        <div className=\"instagram-feed__header\">\n          <span className=\"instagram-feed__ring\">\n            <span className=\"instagram-feed__avatar\">{slotted(avatar)}</span>\n          </span>\n          <div className=\"instagram-feed__identity\">\n            <div className=\"instagram-feed__line\">\n              <span className=\"instagram-feed__handle\" id={handleId}>\n                {handle}\n              </span>\n              {stamp ? (\n                <>\n                  <span className=\"instagram-feed__sep\" aria-hidden=\"true\">\n                    {SEPARATOR}\n                  </span>\n                  <span className=\"instagram-feed__stamp\">{stamp}</span>\n                </>\n              ) : null}\n            </div>\n            {isVideo ? <div className=\"instagram-feed__audio\">{audio}</div> : null}\n          </div>\n          {width === 'web' ? (\n            <button type=\"button\" className=\"instagram-feed__follow\" onClick={() => onAction?.('follow')}>\n              Follow\n            </button>\n          ) : null}\n          <button\n            type=\"button\"\n            className=\"instagram-feed__menu\"\n            aria-label=\"More options\"\n            onClick={() => onAction?.('menu')}\n          >\n            <span className=\"instagram-feed__pip\" />\n            <span className=\"instagram-feed__pip\" />\n            <span className=\"instagram-feed__pip\" />\n          </button>\n        </div>\n        <div className=\"instagram-feed__media\" onDoubleClick={burstLike}>\n          <span className=\"instagram-feed__slot\">{slotted(media)}</span>\n          <span ref={burstRef} className=\"instagram-feed__burst\" aria-hidden=\"true\">\n            <svg className=\"instagram-feed__burst-glyph\" viewBox=\"0 0 24 24\">\n              {paths(HEART)}\n            </svg>\n          </span>\n          {isVideo ? (\n            <button\n              type=\"button\"\n              className=\"instagram-feed__mute\"\n              aria-pressed={isMuted}\n              aria-label=\"Mute\"\n              onClick={() => setMuted(!isMuted)}\n            >\n              <svg className=\"instagram-feed__mute-glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                {paths(isMuted ? SPEAKER_MUTED : SPEAKER_LOUD)}\n              </svg>\n            </button>\n          ) : null}\n        </div>\n      </div>\n\n      <div className=\"instagram-feed__actions\">\n        <div className=\"instagram-feed__group\">\n          <span className=\"instagram-feed__action\">\n            <button\n              ref={likeRef}\n              type=\"button\"\n              className=\"instagram-feed__glyph-button\"\n              aria-pressed={isLiked}\n              aria-label=\"Like\"\n              onClick={toggleLike}\n            >\n              <svg className=\"instagram-feed__glyph instagram-feed__glyph--like\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                {paths(HEART)}\n              </svg>\n            </button>\n            <span className=\"instagram-feed__count\">{compact(likes + (isLiked ? 1 : 0))}</span>\n          </span>\n          <span className=\"instagram-feed__action\">\n            <button\n              type=\"button\"\n              className=\"instagram-feed__glyph-button\"\n              aria-label=\"Comment\"\n              onClick={() => onAction?.('comment')}\n            >\n              <svg className=\"instagram-feed__glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                {paths(SPEECH)}\n              </svg>\n            </button>\n            <span className=\"instagram-feed__count\">{compact(comments)}</span>\n          </span>\n          <span className=\"instagram-feed__action\">\n            <button\n              type=\"button\"\n              className=\"instagram-feed__glyph-button\"\n              aria-label=\"Repost\"\n              onClick={() => onAction?.('repost')}\n            >\n              <svg className=\"instagram-feed__glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                {paths(REPOST)}\n              </svg>\n            </button>\n            <span className=\"instagram-feed__count\">{compact(reposts)}</span>\n          </span>\n          <button\n            type=\"button\"\n            className=\"instagram-feed__glyph-button\"\n            aria-label=\"Share\"\n            onClick={() => onAction?.('send')}\n          >\n            <svg className=\"instagram-feed__glyph\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              {paths(PAPER_PLANE)}\n            </svg>\n          </button>\n        </div>\n        <button\n          ref={saveRef}\n          type=\"button\"\n          className=\"instagram-feed__glyph-button\"\n          aria-pressed={isSaved}\n          aria-label=\"Save\"\n          onClick={toggleSave}\n        >\n          <svg className=\"instagram-feed__glyph instagram-feed__glyph--save\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            {paths(BOOKMARK)}\n          </svg>\n        </button>\n      </div>\n\n      {caption ? (\n        <p className=\"instagram-feed__caption\">\n          <span className=\"instagram-feed__author\">{handle}</span>{' '}\n          {segments.map((segment) =>\n            segment.link ? (\n              <span key={segment.key} className=\"instagram-feed__link\">\n                {segment.text}\n              </span>\n            ) : (\n              <span key={segment.key}>{segment.text}</span>\n            ),\n          )}\n          {clipped.clipped ? <span className=\"instagram-feed__more\">{ELLIPSIS_MORE}</span> : null}\n        </p>\n      ) : null}\n    </article>\n  );\n}\n"]}

package/dist/lens.css

@@ -0,0 +1,119 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .lens {
+    --lens-ink: var(--text-strong);
+    --lens-surface: var(--bg-surface);
+    --lens-edge: color-mix(in oklab, var(--lens-ink) 16%, transparent);
+    --lens-highlight: color-mix(in oklab, var(--bg-surface) 90%, transparent);
+    --lens-shadow-alpha: 0.26;
+    --lens-lift: 10;
+    --lens-blur: 26;
+    --lens-vignette-mid: 5%;
+    --lens-vignette-edge: 15%;
+    --lens-fringe-warm: oklch(0.72 0.16 12 / 0.3);
+    --lens-fringe-cool: oklch(0.7 0.15 265 / 0.34);
+    --lens-rim-start: 79%;
+    --lens-rim-end: 87%;
+
+    position: relative;
+    display: block;
+    overflow: clip;
+    touch-action: none;
+  }
+
+  .lens:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .lens--active {
+    cursor: none;
+  }
+
+  .lens__content {
+    position: relative;
+  }
+
+  .lens__copy {
+    position: absolute;
+    margin: 0;
+    max-width: none;
+    will-change: scale;
+  }
+
+  .lens__glass {
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: var(--radius-full);
+    opacity: 0;
+    pointer-events: none;
+    will-change: translate, opacity;
+  }
+
+  .lens__core,
+  .lens__rim,
+  .lens__fringe,
+  .lens__vignette,
+  .lens__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+  }
+
+  .lens__core {
+    overflow: hidden;
+    background: var(--lens-surface);
+  }
+
+  .lens__rim {
+    overflow: hidden;
+    mask-image: radial-gradient(
+      circle at 50% 50%,
+      transparent 0 var(--lens-rim-start),
+      #000 var(--lens-rim-end),
+      #000 100%
+    );
+  }
+
+  .lens__fringe {
+    opacity: 0;
+    mix-blend-mode: multiply;
+    background: radial-gradient(
+      circle at 50% 50%,
+      transparent 78%,
+      var(--lens-fringe-warm) 90%,
+      var(--lens-fringe-cool) 97%,
+      transparent 100%
+    );
+  }
+
+  .lens__vignette {
+    background: radial-gradient(
+      circle at 50% 50%,
+      transparent 58%,
+      color-mix(in oklab, var(--lens-ink) var(--lens-vignette-mid), transparent) 84%,
+      color-mix(in oklab, var(--lens-ink) var(--lens-vignette-edge), transparent) 100%
+    );
+  }
+
+  .lens__specular {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    border-radius: var(--radius-full);
+    opacity: 0;
+    filter: blur(11px);
+    background: radial-gradient(closest-side, var(--lens-highlight), transparent);
+  }
+
+  .lens__ring {
+    box-shadow:
+      0 calc(var(--lens-lift) * 1px) calc(var(--lens-blur) * 1px) calc(var(--lens-blur) * -0.42px)
+        color-mix(in oklab, var(--lens-ink) calc(var(--lens-shadow-alpha) * 100%), transparent),
+      inset 0 0 0 1px var(--lens-edge),
+      inset 0 1px 1px var(--lens-highlight),
+      inset 0 0 calc(var(--lens-blur) * 0.5px) color-mix(in oklab, var(--lens-ink) 7%, transparent);
+  }
+}

package/dist/lens.js

@@ -0,0 +1,307 @@
+'use client';import { loop } from './chunk-IJS7TPGV.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './lens.css';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RADIUS_MIN = 60;
+var RADIUS_MAX = 260;
+var MAGNIFICATION_MIN = 1.2;
+var MAGNIFICATION_MAX = 6;
+var RIM_CROWD = 0.3;
+var MAX_STEP = 3;
+var MOVE_THRESHOLD = 0.4;
+var SPEED_REFERENCE = 26;
+var SPEED_SMOOTHING = 0.25;
+var MAGNIFICATION_EASE = 0.24;
+var OPACITY_EASE = 0.2;
+var PRESS_EASE = 0.28;
+var PRESS_SCALE = 0.035;
+var SHADOW_LIFT_BASE = 10;
+var SHADOW_LIFT_SPEED = 18;
+var SHADOW_LIFT_PRESS = 6;
+var SHADOW_BLUR_BASE = 26;
+var SHADOW_BLUR_SPEED = 26;
+var SHADOW_BLUR_PRESS = 12;
+var SHADOW_ALPHA_BASE = 0.26;
+var SHADOW_ALPHA_PRESS = 0.08;
+var FRINGE_BASE = 0.34;
+var FRINGE_SPEED = 0.5;
+var SPECULAR_ORBIT_BASE = 0.46;
+var SPECULAR_ORBIT_SPEED = 0.1;
+var SPECULAR_WIDTH = 1.05;
+var SPECULAR_HEIGHT = 0.44;
+var SPECULAR_OPACITY_BASE = 0.16;
+var SPECULAR_OPACITY_SPEED = 0.44;
+var RECLONE_INTERVAL_MS = 90;
+var KEYBOARD_STEP = 24;
+var ACTIVE_CLASS = "lens--active";
+var clamp = (v, min, max) => v < min ? min : v > max ? max : v;
+function cloneInto(host, content, width, height) {
+  host.textContent = "";
+  const copy = content.cloneNode(true);
+  copy.setAttribute("aria-hidden", "true");
+  copy.classList.add("lens__copy");
+  if (width && height) {
+    copy.style.width = `${width}px`;
+    copy.style.height = `${height}px`;
+  }
+  host.appendChild(copy);
+}
+function measure(parts, optics) {
+  const box = parts.content.getBoundingClientRect();
+  if (!box.width || !box.height) return;
+  optics.width = box.width;
+  optics.height = box.height;
+  const host = parts.glass.offsetParent ?? parts.stage;
+  const hostBox = host.getBoundingClientRect();
+  optics.offsetX = box.left - hostBox.left;
+  optics.offsetY = box.top - hostBox.top;
+  for (const layer of [parts.core, parts.rim]) {
+    const copy = layer.firstElementChild;
+    if (copy) {
+      copy.style.width = `${box.width}px`;
+      copy.style.height = `${box.height}px`;
+    }
+  }
+}
+function paint(parts, optics, radius, chromatic) {
+  const magnification = Math.max(1, optics.magnification);
+  const speed = Math.min(1, optics.speed / SPEED_REFERENCE);
+  const press = optics.press;
+  parts.glass.style.width = `${radius * 2}px`;
+  parts.glass.style.height = `${radius * 2}px`;
+  parts.glass.style.opacity = optics.opacity.toFixed(3);
+  parts.glass.style.translate = `${optics.offsetX + optics.centreX - radius}px ${optics.offsetY + optics.centreY - radius}px`;
+  parts.glass.style.scale = String(1 - press * PRESS_SCALE);
+  const place = (layer, scale) => {
+    const copy = layer.firstElementChild;
+    if (!copy) return;
+    copy.style.left = `${-(optics.centreX - radius)}px`;
+    copy.style.top = `${-(optics.centreY - radius)}px`;
+    copy.style.transformOrigin = `${optics.centreX}px ${optics.centreY}px`;
+    copy.style.scale = String(scale);
+  };
+  place(parts.core, magnification);
+  place(parts.rim, magnification + RIM_CROWD * (magnification - 1));
+  parts.fringe.style.opacity = chromatic ? (FRINGE_BASE + speed * FRINGE_SPEED).toFixed(3) : "0";
+  const lift = SHADOW_LIFT_BASE + speed * SHADOW_LIFT_SPEED - press * SHADOW_LIFT_PRESS;
+  const blur = SHADOW_BLUR_BASE + speed * SHADOW_BLUR_SPEED - press * SHADOW_BLUR_PRESS;
+  parts.ring.style.setProperty("--lens-lift", lift.toFixed(2));
+  parts.ring.style.setProperty("--lens-blur", blur.toFixed(2));
+  parts.ring.style.setProperty("--lens-shadow-alpha", (SHADOW_ALPHA_BASE + press * SHADOW_ALPHA_PRESS).toFixed(3));
+  const trailing = optics.angle + Math.PI;
+  const orbit = radius * (SPECULAR_ORBIT_BASE + speed * SPECULAR_ORBIT_SPEED);
+  parts.specular.style.width = `${radius * SPECULAR_WIDTH}px`;
+  parts.specular.style.height = `${radius * SPECULAR_HEIGHT}px`;
+  parts.specular.style.opacity = (SPECULAR_OPACITY_BASE + speed * SPECULAR_OPACITY_SPEED).toFixed(3);
+  parts.specular.style.translate = `calc(-50% + ${(Math.cos(trailing) * orbit).toFixed(1)}px) calc(-50% + ${(Math.sin(trailing) * orbit).toFixed(1)}px)`;
+  parts.specular.style.rotate = `${(trailing * 180 / Math.PI).toFixed(1)}deg`;
+}
+function Lens({
+  children,
+  magnification = 2.6,
+  radius = 132,
+  chromatic = true,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const stageRef = useRef(null);
+  const contentRef = useRef(null);
+  const glassRef = useRef(null);
+  const coreRef = useRef(null);
+  const rimRef = useRef(null);
+  const fringeRef = useRef(null);
+  const specularRef = useRef(null);
+  const ringRef = useRef(null);
+  const settings = useRef({ magnification, radius, chromatic });
+  useEffect(() => {
+    settings.current = { magnification, radius, chromatic };
+  }, [magnification, radius, chromatic]);
+  useEffect(() => {
+    const parts = stageRef.current && contentRef.current && glassRef.current && coreRef.current && rimRef.current && fringeRef.current && specularRef.current && ringRef.current ? {
+      stage: stageRef.current,
+      content: contentRef.current,
+      glass: glassRef.current,
+      core: coreRef.current,
+      rim: rimRef.current,
+      fringe: fringeRef.current,
+      specular: specularRef.current,
+      ring: ringRef.current
+    } : null;
+    if (!parts) return;
+    const optics = {
+      pointerX: 0,
+      pointerY: 0,
+      centreX: 0,
+      centreY: 0,
+      magnification: 1,
+      opacity: 0,
+      engaged: 0,
+      pressed: 0,
+      press: 0,
+      speed: 0,
+      angle: 0,
+      width: 0,
+      height: 0,
+      offsetX: 0,
+      offsetY: 0,
+      acquired: false,
+      dirty: false,
+      sinceClone: 0
+    };
+    const reduced = UIMotion.reduced;
+    const currentRadius = () => clamp(settings.current.radius, RADIUS_MIN, RADIUS_MAX);
+    const currentMagnification = () => clamp(settings.current.magnification, MAGNIFICATION_MIN, MAGNIFICATION_MAX);
+    const rebuild = () => {
+      const box = parts.content.getBoundingClientRect();
+      cloneInto(parts.core, parts.content, box.width, box.height);
+      cloneInto(parts.rim, parts.content, box.width, box.height);
+      measure(parts, optics);
+    };
+    const render = () => paint(parts, optics, currentRadius(), settings.current.chromatic);
+    const settleNow = () => {
+      optics.magnification = optics.engaged ? currentMagnification() : 1;
+      optics.opacity = optics.acquired && optics.engaged ? 1 : 0;
+      optics.press = optics.pressed;
+      optics.centreX = optics.pointerX;
+      optics.centreY = optics.pointerY;
+      optics.speed = 0;
+      render();
+    };
+    rebuild();
+    const mutations = new MutationObserver(() => {
+      optics.dirty = true;
+      if (reduced) {
+        rebuild();
+        settleNow();
+      }
+    });
+    mutations.observe(parts.content, { childList: true, subtree: true, characterData: true, attributes: true });
+    const resizes = new ResizeObserver(() => {
+      measure(parts, optics);
+      if (reduced) settleNow();
+    });
+    resizes.observe(parts.content);
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const acquire = (clientX, clientY) => {
+      const box = parts.content.getBoundingClientRect();
+      optics.pointerX = clientX - box.left;
+      optics.pointerY = clientY - box.top;
+      if (!optics.acquired) {
+        measure(parts, optics);
+        optics.acquired = true;
+        optics.centreX = optics.pointerX;
+        optics.centreY = optics.pointerY;
+      }
+      optics.engaged = 1;
+      parts.stage.classList.add(ACTIVE_CLASS);
+      if (reduced) settleNow();
+    };
+    const disengage = () => {
+      optics.engaged = 0;
+      optics.pressed = 0;
+      parts.stage.classList.remove(ACTIVE_CLASS);
+      if (reduced) settleNow();
+    };
+    const track = (event) => acquire(event.clientX, event.clientY);
+    parts.stage.addEventListener("pointermove", track, { signal });
+    parts.stage.addEventListener(
+      "pointerdown",
+      (event) => {
+        track(event);
+        optics.pressed = 1;
+        if (reduced) settleNow();
+      },
+      { signal }
+    );
+    parts.stage.addEventListener("pointerleave", disengage, { signal });
+    window.addEventListener(
+      "pointerup",
+      () => {
+        optics.pressed = 0;
+        if (reduced) settleNow();
+      },
+      { signal }
+    );
+    parts.stage.addEventListener(
+      "keydown",
+      (event) => {
+        const step = event.key === "ArrowLeft" ? [-KEYBOARD_STEP, 0] : event.key === "ArrowRight" ? [KEYBOARD_STEP, 0] : event.key === "ArrowUp" ? [0, -KEYBOARD_STEP] : event.key === "ArrowDown" ? [0, KEYBOARD_STEP] : null;
+        if (step) {
+          event.preventDefault();
+          if (!optics.acquired) {
+            measure(parts, optics);
+            optics.acquired = true;
+            optics.pointerX = optics.width / 2;
+            optics.pointerY = optics.height / 2;
+            optics.centreX = optics.pointerX;
+            optics.centreY = optics.pointerY;
+          } else {
+            optics.pointerX = clamp(optics.pointerX + step[0], 0, optics.width);
+            optics.pointerY = clamp(optics.pointerY + step[1], 0, optics.height);
+          }
+          optics.engaged = 1;
+          parts.stage.classList.add(ACTIVE_CLASS);
+          if (reduced) settleNow();
+          return;
+        }
+        if (event.key === "Escape" && optics.engaged) {
+          event.preventDefault();
+          disengage();
+        }
+      },
+      { signal }
+    );
+    parts.stage.addEventListener("blur", disengage, { signal });
+    const playback = loop(
+      (k, dt) => {
+        const step = Math.min(MAX_STEP, k);
+        optics.sinceClone += dt;
+        if (optics.dirty && optics.sinceClone > RECLONE_INTERVAL_MS) {
+          optics.dirty = false;
+          optics.sinceClone = 0;
+          rebuild();
+        }
+        const previousX = optics.centreX;
+        const previousY = optics.centreY;
+        optics.centreX = optics.pointerX;
+        optics.centreY = optics.pointerY;
+        const travelled = Math.hypot(optics.centreX - previousX, optics.centreY - previousY);
+        optics.speed += (travelled - optics.speed) * SPEED_SMOOTHING * step;
+        if (travelled > MOVE_THRESHOLD)
+          optics.angle = Math.atan2(optics.centreY - previousY, optics.centreX - previousX);
+        const target = optics.engaged ? currentMagnification() : 1;
+        optics.magnification += (target - optics.magnification) * MAGNIFICATION_EASE * step;
+        optics.opacity += ((optics.acquired && optics.engaged ? 1 : 0) - optics.opacity) * OPACITY_EASE * step;
+        optics.press += (optics.pressed - optics.press) * PRESS_EASE * step;
+        render();
+      },
+      { el: parts.stage, snap: render }
+    );
+    return () => {
+      playback.stop();
+      mutations.disconnect();
+      resizes.disconnect();
+      controller.abort();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: stageRef, className: cx("lens", className), style, tabIndex: 0, ...htmlProps, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, className: "lens__content", children }),
+    /* @__PURE__ */ jsxs("div", { ref: glassRef, className: "lens__glass", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("div", { ref: coreRef, className: "lens__core" }),
+      /* @__PURE__ */ jsx("div", { ref: rimRef, className: "lens__rim" }),
+      /* @__PURE__ */ jsx("div", { ref: fringeRef, className: "lens__fringe" }),
+      /* @__PURE__ */ jsx("div", { className: "lens__vignette" }),
+      /* @__PURE__ */ jsx("div", { ref: specularRef, className: "lens__specular" }),
+      /* @__PURE__ */ jsx("div", { ref: ringRef, className: "lens__ring" })
+    ] })
+  ] });
+}
+
+export { Lens };
+//# sourceMappingURL=lens.js.map
+//# sourceMappingURL=lens.js.map

package/dist/lens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/expressive/lens/Lens.tsx"],"names":[],"mappings":"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","file":"lens.js","sourcesContent":["'use client';\n\nimport './lens.css';\n\nimport { useEffect, useRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { loop } from '../../../engine';\nimport type { LensStyle } from '../../../tokens/component-styles.generated';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { cx } from '../../internal/utils/cx';\n\nconst RADIUS_MIN = 60;\nconst RADIUS_MAX = 260;\nconst MAGNIFICATION_MIN = 1.2;\nconst MAGNIFICATION_MAX = 6;\nconst RIM_CROWD = 0.3;\nconst MAX_STEP = 3;\nconst MOVE_THRESHOLD = 0.4;\nconst SPEED_REFERENCE = 26;\nconst SPEED_SMOOTHING = 0.25;\nconst MAGNIFICATION_EASE = 0.24;\nconst OPACITY_EASE = 0.2;\nconst PRESS_EASE = 0.28;\nconst PRESS_SCALE = 0.035;\nconst SHADOW_LIFT_BASE = 10;\nconst SHADOW_LIFT_SPEED = 18;\nconst SHADOW_LIFT_PRESS = 6;\nconst SHADOW_BLUR_BASE = 26;\nconst SHADOW_BLUR_SPEED = 26;\nconst SHADOW_BLUR_PRESS = 12;\nconst SHADOW_ALPHA_BASE = 0.26;\nconst SHADOW_ALPHA_PRESS = 0.08;\nconst FRINGE_BASE = 0.34;\nconst FRINGE_SPEED = 0.5;\nconst SPECULAR_ORBIT_BASE = 0.46;\nconst SPECULAR_ORBIT_SPEED = 0.1;\nconst SPECULAR_WIDTH = 1.05;\nconst SPECULAR_HEIGHT = 0.44;\nconst SPECULAR_OPACITY_BASE = 0.16;\nconst SPECULAR_OPACITY_SPEED = 0.44;\nconst RECLONE_INTERVAL_MS = 90;\nconst KEYBOARD_STEP = 24;\nconst ACTIVE_CLASS = 'lens--active';\n\nconst clamp = (v: number, min: number, max: number) => (v < min ? min : v > max ? max : v);\n\ninterface Optics {\n  pointerX: number;\n  pointerY: number;\n  centreX: number;\n  centreY: number;\n  magnification: number;\n  opacity: number;\n  engaged: number;\n  pressed: number;\n  press: number;\n  speed: number;\n  angle: number;\n  width: number;\n  height: number;\n  offsetX: number;\n  offsetY: number;\n  acquired: boolean;\n  dirty: boolean;\n  sinceClone: number;\n}\n\ninterface Parts {\n  stage: HTMLElement;\n  content: HTMLElement;\n  glass: HTMLElement;\n  core: HTMLElement;\n  rim: HTMLElement;\n  fringe: HTMLElement;\n  specular: HTMLElement;\n  ring: HTMLElement;\n}\n\nfunction cloneInto(host: HTMLElement, content: HTMLElement, width: number, height: number) {\n  host.textContent = '';\n  const copy = content.cloneNode(true) as HTMLElement;\n  copy.setAttribute('aria-hidden', 'true');\n  copy.classList.add('lens__copy');\n  if (width && height) {\n    copy.style.width = `${width}px`;\n    copy.style.height = `${height}px`;\n  }\n  host.appendChild(copy);\n}\n\nfunction measure(parts: Parts, optics: Optics) {\n  const box = parts.content.getBoundingClientRect();\n  if (!box.width || !box.height) return;\n  optics.width = box.width;\n  optics.height = box.height;\n  const host = (parts.glass.offsetParent as HTMLElement | null) ?? parts.stage;\n  const hostBox = host.getBoundingClientRect();\n  optics.offsetX = box.left - hostBox.left;\n  optics.offsetY = box.top - hostBox.top;\n  for (const layer of [parts.core, parts.rim]) {\n    const copy = layer.firstElementChild as HTMLElement | null;\n    if (copy) {\n      copy.style.width = `${box.width}px`;\n      copy.style.height = `${box.height}px`;\n    }\n  }\n}\n\nfunction paint(parts: Parts, optics: Optics, radius: number, chromatic: boolean) {\n  const magnification = Math.max(1, optics.magnification);\n  const speed = Math.min(1, optics.speed / SPEED_REFERENCE);\n  const press = optics.press;\n\n  parts.glass.style.width = `${radius * 2}px`;\n  parts.glass.style.height = `${radius * 2}px`;\n  parts.glass.style.opacity = optics.opacity.toFixed(3);\n  parts.glass.style.translate = `${optics.offsetX + optics.centreX - radius}px ${optics.offsetY + optics.centreY - radius}px`;\n  parts.glass.style.scale = String(1 - press * PRESS_SCALE);\n\n  const place = (layer: HTMLElement, scale: number) => {\n    const copy = layer.firstElementChild as HTMLElement | null;\n    if (!copy) return;\n    copy.style.left = `${-(optics.centreX - radius)}px`;\n    copy.style.top = `${-(optics.centreY - radius)}px`;\n    copy.style.transformOrigin = `${optics.centreX}px ${optics.centreY}px`;\n    copy.style.scale = String(scale);\n  };\n  place(parts.core, magnification);\n  place(parts.rim, magnification + RIM_CROWD * (magnification - 1));\n\n  parts.fringe.style.opacity = chromatic ? (FRINGE_BASE + speed * FRINGE_SPEED).toFixed(3) : '0';\n\n  const lift = SHADOW_LIFT_BASE + speed * SHADOW_LIFT_SPEED - press * SHADOW_LIFT_PRESS;\n  const blur = SHADOW_BLUR_BASE + speed * SHADOW_BLUR_SPEED - press * SHADOW_BLUR_PRESS;\n  parts.ring.style.setProperty('--lens-lift', lift.toFixed(2));\n  parts.ring.style.setProperty('--lens-blur', blur.toFixed(2));\n  parts.ring.style.setProperty('--lens-shadow-alpha', (SHADOW_ALPHA_BASE + press * SHADOW_ALPHA_PRESS).toFixed(3));\n\n  const trailing = optics.angle + Math.PI;\n  const orbit = radius * (SPECULAR_ORBIT_BASE + speed * SPECULAR_ORBIT_SPEED);\n  parts.specular.style.width = `${radius * SPECULAR_WIDTH}px`;\n  parts.specular.style.height = `${radius * SPECULAR_HEIGHT}px`;\n  parts.specular.style.opacity = (SPECULAR_OPACITY_BASE + speed * SPECULAR_OPACITY_SPEED).toFixed(3);\n  parts.specular.style.translate = `calc(-50% + ${(Math.cos(trailing) * orbit).toFixed(1)}px) calc(-50% + ${(Math.sin(trailing) * orbit).toFixed(1)}px)`;\n  parts.specular.style.rotate = `${((trailing * 180) / Math.PI).toFixed(1)}deg`;\n}\n\nexport interface LensOwnProps {\n  /** The specimen the glass magnifies. It stays in the accessibility tree; the magnified copy is aria-hidden. */\n  children: ReactNode;\n  /** How much the glass magnifies, clamped to 1.2-6. @default 2.6 */\n  magnification?: number;\n  /** Glass radius in pixels, clamped to 60-260. @default 132 */\n  radius?: number;\n  /** Chromatic fringing at the rim, which strengthens with travel speed. @default true */\n  chromatic?: boolean;\n  /** Extra class(es) merged onto the stage. */\n  className?: string;\n  /** Inline styles merged onto the stage. */\n  style?: LensStyle;\n}\n\nexport interface LensProps extends LensOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, title, ...) forwarded to the stage. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof LensOwnProps> & DataAttributes;\n}\n\nexport function Lens({\n  children,\n  magnification = 2.6,\n  radius = 132,\n  chromatic = true,\n  className = '',\n  style,\n  htmlProps,\n}: LensProps) {\n  const stageRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const glassRef = useRef<HTMLDivElement>(null);\n  const coreRef = useRef<HTMLDivElement>(null);\n  const rimRef = useRef<HTMLDivElement>(null);\n  const fringeRef = useRef<HTMLDivElement>(null);\n  const specularRef = useRef<HTMLDivElement>(null);\n  const ringRef = useRef<HTMLDivElement>(null);\n  const settings = useRef({ magnification, radius, chromatic });\n\n  useEffect(() => {\n    settings.current = { magnification, radius, chromatic };\n  }, [magnification, radius, chromatic]);\n\n  useEffect(() => {\n    const parts: Parts | null =\n      stageRef.current &&\n      contentRef.current &&\n      glassRef.current &&\n      coreRef.current &&\n      rimRef.current &&\n      fringeRef.current &&\n      specularRef.current &&\n      ringRef.current\n        ? {\n            stage: stageRef.current,\n            content: contentRef.current,\n            glass: glassRef.current,\n            core: coreRef.current,\n            rim: rimRef.current,\n            fringe: fringeRef.current,\n            specular: specularRef.current,\n            ring: ringRef.current,\n          }\n        : null;\n    if (!parts) return;\n\n    const optics: Optics = {\n      pointerX: 0,\n      pointerY: 0,\n      centreX: 0,\n      centreY: 0,\n      magnification: 1,\n      opacity: 0,\n      engaged: 0,\n      pressed: 0,\n      press: 0,\n      speed: 0,\n      angle: 0,\n      width: 0,\n      height: 0,\n      offsetX: 0,\n      offsetY: 0,\n      acquired: false,\n      dirty: false,\n      sinceClone: 0,\n    };\n\n    const reduced = UIMotion.reduced;\n    const currentRadius = () => clamp(settings.current.radius, RADIUS_MIN, RADIUS_MAX);\n    const currentMagnification = () => clamp(settings.current.magnification, MAGNIFICATION_MIN, MAGNIFICATION_MAX);\n\n    const rebuild = () => {\n      const box = parts.content.getBoundingClientRect();\n      cloneInto(parts.core, parts.content, box.width, box.height);\n      cloneInto(parts.rim, parts.content, box.width, box.height);\n      measure(parts, optics);\n    };\n\n    const render = () => paint(parts, optics, currentRadius(), settings.current.chromatic);\n\n    const settleNow = () => {\n      optics.magnification = optics.engaged ? currentMagnification() : 1;\n      optics.opacity = optics.acquired && optics.engaged ? 1 : 0;\n      optics.press = optics.pressed;\n      optics.centreX = optics.pointerX;\n      optics.centreY = optics.pointerY;\n      optics.speed = 0;\n      render();\n    };\n\n    rebuild();\n\n    const mutations = new MutationObserver(() => {\n      optics.dirty = true;\n      if (reduced) {\n        rebuild();\n        settleNow();\n      }\n    });\n    mutations.observe(parts.content, { childList: true, subtree: true, characterData: true, attributes: true });\n\n    const resizes = new ResizeObserver(() => {\n      measure(parts, optics);\n      if (reduced) settleNow();\n    });\n    resizes.observe(parts.content);\n\n    const controller = new AbortController();\n    const signal = controller.signal;\n\n    const acquire = (clientX: number, clientY: number) => {\n      const box = parts.content.getBoundingClientRect();\n      optics.pointerX = clientX - box.left;\n      optics.pointerY = clientY - box.top;\n      if (!optics.acquired) {\n        measure(parts, optics);\n        optics.acquired = true;\n        optics.centreX = optics.pointerX;\n        optics.centreY = optics.pointerY;\n      }\n      optics.engaged = 1;\n      parts.stage.classList.add(ACTIVE_CLASS);\n      if (reduced) settleNow();\n    };\n\n    const disengage = () => {\n      optics.engaged = 0;\n      optics.pressed = 0;\n      parts.stage.classList.remove(ACTIVE_CLASS);\n      if (reduced) settleNow();\n    };\n\n    const track = (event: PointerEvent | MouseEvent) => acquire(event.clientX, event.clientY);\n\n    parts.stage.addEventListener('pointermove', track, { signal });\n    parts.stage.addEventListener(\n      'pointerdown',\n      (event) => {\n        track(event);\n        optics.pressed = 1;\n        if (reduced) settleNow();\n      },\n      { signal },\n    );\n    parts.stage.addEventListener('pointerleave', disengage, { signal });\n    window.addEventListener(\n      'pointerup',\n      () => {\n        optics.pressed = 0;\n        if (reduced) settleNow();\n      },\n      { signal },\n    );\n\n    parts.stage.addEventListener(\n      'keydown',\n      (event) => {\n        const step =\n          event.key === 'ArrowLeft'\n            ? [-KEYBOARD_STEP, 0]\n            : event.key === 'ArrowRight'\n              ? [KEYBOARD_STEP, 0]\n              : event.key === 'ArrowUp'\n                ? [0, -KEYBOARD_STEP]\n                : event.key === 'ArrowDown'\n                  ? [0, KEYBOARD_STEP]\n                  : null;\n        if (step) {\n          event.preventDefault();\n          if (!optics.acquired) {\n            measure(parts, optics);\n            optics.acquired = true;\n            optics.pointerX = optics.width / 2;\n            optics.pointerY = optics.height / 2;\n            optics.centreX = optics.pointerX;\n            optics.centreY = optics.pointerY;\n          } else {\n            optics.pointerX = clamp(optics.pointerX + step[0], 0, optics.width);\n            optics.pointerY = clamp(optics.pointerY + step[1], 0, optics.height);\n          }\n          optics.engaged = 1;\n          parts.stage.classList.add(ACTIVE_CLASS);\n          if (reduced) settleNow();\n          return;\n        }\n        if (event.key === 'Escape' && optics.engaged) {\n          event.preventDefault();\n          disengage();\n        }\n      },\n      { signal },\n    );\n\n    parts.stage.addEventListener('blur', disengage, { signal });\n\n    const playback = loop(\n      (k, dt) => {\n        const step = Math.min(MAX_STEP, k);\n        optics.sinceClone += dt;\n        if (optics.dirty && optics.sinceClone > RECLONE_INTERVAL_MS) {\n          optics.dirty = false;\n          optics.sinceClone = 0;\n          rebuild();\n        }\n\n        const previousX = optics.centreX;\n        const previousY = optics.centreY;\n        optics.centreX = optics.pointerX;\n        optics.centreY = optics.pointerY;\n        const travelled = Math.hypot(optics.centreX - previousX, optics.centreY - previousY);\n        optics.speed += (travelled - optics.speed) * SPEED_SMOOTHING * step;\n        if (travelled > MOVE_THRESHOLD)\n          optics.angle = Math.atan2(optics.centreY - previousY, optics.centreX - previousX);\n\n        const target = optics.engaged ? currentMagnification() : 1;\n        optics.magnification += (target - optics.magnification) * MAGNIFICATION_EASE * step;\n        optics.opacity += ((optics.acquired && optics.engaged ? 1 : 0) - optics.opacity) * OPACITY_EASE * step;\n        optics.press += (optics.pressed - optics.press) * PRESS_EASE * step;\n        render();\n      },\n      { el: parts.stage, snap: render },\n    );\n\n    return () => {\n      playback.stop();\n      mutations.disconnect();\n      resizes.disconnect();\n      controller.abort();\n    };\n  }, []);\n\n  return (\n    <div ref={stageRef} className={cx('lens', className)} style={style} tabIndex={0} {...htmlProps}>\n      <div ref={contentRef} className=\"lens__content\">\n        {children}\n      </div>\n      <div ref={glassRef} className=\"lens__glass\" aria-hidden=\"true\">\n        <div ref={coreRef} className=\"lens__core\" />\n        <div ref={rimRef} className=\"lens__rim\" />\n        <div ref={fringeRef} className=\"lens__fringe\" />\n        <div className=\"lens__vignette\" />\n        <div ref={specularRef} className=\"lens__specular\" />\n        <div ref={ringRef} className=\"lens__ring\" />\n      </div>\n    </div>\n  );\n}\n"]}