@linktr.ee/messaging-react 2.0.0 → 2.0.1-rc-1778694826

package/dist/Card-zGbhRBwv.js

@@ -0,0 +1,48 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { C as b, A as m, a as u, b as v, i as A } from "./CardThumbnail-DTBuRQHF.js";
+const k = ({
+  title: a,
+  placeholderTitle: i,
+  description: t,
+  url: o,
+  mimeType: r,
+  thumbnailUrl: e,
+  sourceUrl: d,
+  layout: n = "featured",
+  appIcon: C,
+  cta: l
+}) => /* @__PURE__ */ f(
+  b,
+  {
+    variant: "dark",
+    bgClassName: A(r, d) ? m : void 0,
+    children: [
+      n === "featured" && /* @__PURE__ */ s(
+        u,
+        {
+          variant: "dark",
+          thumbnailUrl: e,
+          sourceUrl: d,
+          title: a,
+          mimeType: r
+        }
+      ),
+      /* @__PURE__ */ s(
+        v,
+        {
+          variant: "dark",
+          title: a,
+          placeholderTitle: i,
+          description: t,
+          url: o,
+          appIcon: C,
+          cta: l
+        }
+      )
+    ]
+  }
+);
+export {
+  k as default
+};
+//# sourceMappingURL=Card-zGbhRBwv.js.map

package/dist/Card-zGbhRBwv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-zGbhRBwv.js","sources":["../src/components/LinkAttachment/components/Sent/Card.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { LinkAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardShell from '../_shared/CardShell'\nimport CardThumbnail, {\n  AUDIO_BG_CLASS,\n  isPlayableAudio,\n} from '../_shared/CardThumbnail'\n\nexport interface SentCardProps extends LinkAttachmentBaseProps {}\n\n/**\n * The card the sender sees in chat after a link attachment has been posted.\n * Matches the Sent column of the messaging design system in Figma — same\n * dark chrome as the Composer card minus the dismiss / edit affordances.\n */\nconst SentCard: React.FC<SentCardProps> = ({\n  title,\n  placeholderTitle,\n  description,\n  url,\n  mimeType,\n  thumbnailUrl,\n  sourceUrl,\n  layout = 'featured',\n  appIcon,\n  cta,\n}) => (\n  <CardShell\n    variant=\"dark\"\n    bgClassName={\n      isPlayableAudio(mimeType, sourceUrl) ? AUDIO_BG_CLASS : undefined\n    }\n  >\n    {layout === 'featured' && (\n      <CardThumbnail\n        variant=\"dark\"\n        thumbnailUrl={thumbnailUrl}\n        sourceUrl={sourceUrl}\n        title={title}\n        mimeType={mimeType}\n      />\n    )}\n    <CardBody\n      variant=\"dark\"\n      title={title}\n      placeholderTitle={placeholderTitle}\n      description={description}\n      url={url}\n      appIcon={appIcon}\n      cta={cta}\n    />\n  </CardShell>\n)\n\nexport default SentCard\n"],"names":["SentCard","title","placeholderTitle","description","url","mimeType","thumbnailUrl","sourceUrl","layout","appIcon","cta","jsxs","CardShell","isPlayableAudio","AUDIO_BG_CLASS","jsx","CardThumbnail","CardBody"],"mappings":";;AAiBA,MAAMA,IAAoC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,KAAAC;AACF,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAQ;AAAA,IACR,aACEC,EAAgBR,GAAUE,CAAS,IAAIO,IAAiB;AAAA,IAGzD,UAAA;AAAA,MAAAN,MAAW,cACV,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,cAAAV;AAAA,UACA,WAAAC;AAAA,UACA,OAAAN;AAAA,UACA,UAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,gBAAAU;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAAhB;AAAA,UACA,kBAAAC;AAAA,UACA,aAAAC;AAAA,UACA,KAAAC;AAAA,UACA,SAAAK;AAAA,UACA,KAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AACF;"}

package/dist/CardThumbnail-DTBuRQHF.js

@@ -0,0 +1,239 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import d from "classnames";
+import { g as p, r as v } from "./index-DfcRe-Hj.js";
+import "react";
+import "@phosphor-icons/react";
+const w = /^([a-z][a-z0-9+.-]*):/i, k = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel", "sms"]);
+function C(t) {
+  if (typeof t != "string") return;
+  const e = t.trim();
+  if (e === "") return;
+  const s = w.exec(e);
+  if (s) {
+    const n = s[1].toLowerCase();
+    return k.has(n) ? e : void 0;
+  }
+  return e.startsWith("//") || e.startsWith("/") ? e : `https://${e}`;
+}
+const S = {
+  dark: "bg-white text-[#121110] hover:bg-white/90",
+  light: "bg-[#121110] text-white hover:bg-[#2a2928]"
+}, A = ({ variant: t, cta: e }) => {
+  const s = d(
+    "mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors",
+    S[t]
+  ), n = C(e.href);
+  return n ? /* @__PURE__ */ l(
+    "a",
+    {
+      href: n,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (a) => {
+        var r;
+        a.stopPropagation(), (r = e.onClick) == null || r.call(e);
+      },
+      className: `${s} no-underline`,
+      children: e.label
+    }
+  ) : /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      onClick: (a) => {
+        var r;
+        a.stopPropagation(), (r = e.onClick) == null || r.call(e);
+      },
+      className: s,
+      children: e.label
+    }
+  );
+}, E = {
+  dark: "text-white",
+  light: "text-black/90"
+}, L = "text-white/30", y = {
+  dark: "text-white/55",
+  light: "text-black/55"
+}, F = ({
+  variant: t,
+  title: e,
+  placeholderTitle: s,
+  description: n,
+  url: a,
+  appIcon: r,
+  cta: i,
+  trailingAction: u
+}) => {
+  const o = t === "dark", f = e ?? (o ? s : void 0) ?? "", h = f.trim() !== "", m = n != null && n.trim() !== "", b = typeof a == "string" ? a.trim() : "", g = b !== "", x = i != null;
+  if (!h && !m && !g && !x) return null;
+  const _ = d(
+    "truncate text-base font-medium leading-6",
+    o && !e ? L : E[t]
+  ), N = d(
+    "truncate text-xs leading-4",
+    y[t]
+  );
+  return /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          h && /* @__PURE__ */ c("div", { className: "flex min-w-0 items-center gap-2", children: [
+            r ? /* @__PURE__ */ l("span", { className: "shrink-0", children: r }) : null,
+            /* @__PURE__ */ l("p", { className: d("min-w-0", _), children: f })
+          ] }),
+          m && /* @__PURE__ */ l("p", { className: N, children: n })
+        ] }),
+        !x && g && /* @__PURE__ */ l("p", { className: N, children: b })
+      ] }),
+      u && /* @__PURE__ */ l("div", { className: "shrink-0", children: u })
+    ] }),
+    i && /* @__PURE__ */ l(A, { variant: t, cta: i })
+  ] });
+}, T = d(
+  "relative block w-[280px] select-none overflow-hidden rounded-md",
+  "shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+), V = ({
+  variant: t,
+  children: e,
+  href: s,
+  onClick: n,
+  ariaLabel: a,
+  rootRef: r,
+  topRight: i,
+  bgClassName: u,
+  "data-testid": o
+}) => {
+  const f = s != null || n != null, h = d(
+    T,
+    u ?? (t === "dark" ? "bg-[#121110]" : "bg-white"),
+    // `focus-ring` is a design-system utility from the component-library
+    // tailwind preset — outline-none + a black 2px focus-visible ring
+    // with offset, so keyboard users can see the focused card.
+    f ? "cursor-pointer no-underline focus-ring" : null
+  ), m = i ? /* @__PURE__ */ l("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: i }) : null;
+  return s ? /* @__PURE__ */ c(
+    "a",
+    {
+      ref: r,
+      href: s,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: n,
+      "data-testid": o,
+      className: h,
+      children: [
+        e,
+        m
+      ]
+    }
+  ) : n ? /* @__PURE__ */ c(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      onClick: n,
+      "aria-label": a,
+      "data-testid": o,
+      className: d(h, "text-left"),
+      children: [
+        e,
+        m
+      ]
+    }
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      ref: r,
+      "data-testid": o,
+      className: h,
+      children: [
+        e,
+        m
+      ]
+    }
+  );
+}, D = {
+  dark: "bg-white/10",
+  light: "bg-black/5"
+}, z = {
+  dark: "size-16 text-white/25",
+  light: "size-16 text-black/25"
+}, I = (t, e) => !!e && !!t && p(t) === "audio", Y = (t, e) => {
+  if (!e || !t) return !1;
+  const s = p(t);
+  return s === "video" || s === "audio";
+}, R = "bg-[#F2F3F4]", G = ({
+  variant: t,
+  thumbnailUrl: e,
+  sourceUrl: s,
+  title: n,
+  mimeType: a = "image/*",
+  topLeft: r,
+  topRight: i
+}) => {
+  const u = p(a), o = !!s && u === "video";
+  return I(a, s) ? /* @__PURE__ */ l("div", { className: "p-3", children: /* @__PURE__ */ l(
+    "audio",
+    {
+      src: s,
+      controls: !0,
+      preload: "metadata",
+      className: "block w-full",
+      children: /* @__PURE__ */ l("track", { kind: "captions" })
+    }
+  ) }) : /* @__PURE__ */ c(
+    "div",
+    {
+      className: d(
+        "relative h-[180px] w-full overflow-hidden",
+        o && "bg-black"
+      ),
+      children: [
+        o ? /* @__PURE__ */ l(
+          "video",
+          {
+            src: s,
+            poster: e,
+            controls: !0,
+            playsInline: !0,
+            preload: "metadata",
+            className: "absolute inset-0 h-full w-full object-contain",
+            children: /* @__PURE__ */ l("track", { kind: "captions" })
+          }
+        ) : e ? /* @__PURE__ */ l(
+          "img",
+          {
+            src: e,
+            alt: n ?? "",
+            draggable: !1,
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              "flex h-full w-full items-center justify-center",
+              D[t]
+            ),
+            children: v(a, {
+              className: z[t],
+              weight: "regular"
+            })
+          }
+        ),
+        r ? /* @__PURE__ */ l("div", { className: "pointer-events-auto absolute left-3 top-3 z-10", children: r }) : null,
+        i ? /* @__PURE__ */ l("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: i }) : null
+      ]
+    }
+  );
+};
+export {
+  R as A,
+  V as C,
+  G as a,
+  F as b,
+  Y as c,
+  I as i,
+  C as n
+};
+//# sourceMappingURL=CardThumbnail-DTBuRQHF.js.map

package/dist/CardThumbnail-DTBuRQHF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardThumbnail-DTBuRQHF.js","sources":["../src/components/LinkAttachment/components/_shared/normalizeExternalHref.ts","../src/components/LinkAttachment/components/_shared/CardCta.tsx","../src/components/LinkAttachment/components/_shared/CardBody.tsx","../src/components/LinkAttachment/components/_shared/CardShell.tsx","../src/components/LinkAttachment/components/_shared/CardThumbnail.tsx"],"sourcesContent":["/**\n * Scheme detector: `protocol:` per RFC 3986 — a letter followed by any\n * combination of letters, digits, `+`, `.`, or `-` then `:`.\n */\nconst SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):/i\n\n/**\n * Allowlist of schemes that are safe to forward into `<a href>` for\n * external navigation. `javascript:` / `data:` / `vbscript:` etc. are\n * intentionally **not** on this list — link-attachment data is\n * effectively user-controlled, so passing them through would let a\n * recipient click execute attacker-supplied code or markup.\n */\nconst SAFE_SCHEMES = new Set(['http', 'https', 'mailto', 'tel', 'sms'])\n\n/**\n * Normalize a user-supplied URL into something safe to assign to\n * `<a href>` for external navigation.\n *\n * Link attachments / link apps always point at external destinations\n * (Spotify, TikTok, FAQ links, bare-hostname Linktree URLs like\n * `tr.ee/briemix`, etc.). Without normalization, a bare hostname is\n * treated as a relative path by the browser and clicks navigate within\n * the host site (e.g. `https://linktr.ee/admin/tr.ee/briemix`) instead\n * of opening the intended destination.\n *\n * Rules:\n *   - Empty / whitespace-only → returns `undefined` (no href).\n *   - Explicit scheme in the safe allowlist (`http`, `https`, `mailto`,\n *     `tel`, `sms`) → returned trimmed.\n *   - Explicit scheme **not** on the allowlist (`javascript:`, `data:`,\n *     `vbscript:`, custom protocols, …) → returns `undefined` so the\n *     shell falls back to a non-navigational chrome instead of letting\n *     an attacker-controlled URL execute on click.\n *   - Protocol-relative (`//example.com/…`) → returned as-is; browsers\n *     resolve these against the current page's scheme.\n *   - Site-relative path (`/admin/…`) → returned as-is so consumers can\n *     still opt into in-app navigation if they really want to.\n *   - Bare hostname or anything else → `https://` is prepended so the\n *     browser treats it as an external URL.\n */\nexport function normalizeExternalHref(value?: string): string | undefined {\n  if (typeof value !== 'string') return undefined\n  const trimmed = value.trim()\n  if (trimmed === '') return undefined\n\n  const schemeMatch = SCHEME_PATTERN.exec(trimmed)\n  if (schemeMatch) {\n    const scheme = schemeMatch[1].toLowerCase()\n    return SAFE_SCHEMES.has(scheme) ? trimmed : undefined\n  }\n\n  if (trimmed.startsWith('//')) return trimmed\n  if (trimmed.startsWith('/')) return trimmed\n  return `https://${trimmed}`\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport type { LinkAttachmentCta } from '../../types'\n\nimport type { LinkAttachmentVariant } from './CardShell'\nimport { normalizeExternalHref } from './normalizeExternalHref'\n\nexport interface CardCtaProps {\n  variant: LinkAttachmentVariant\n  cta: LinkAttachmentCta\n}\n\nconst BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {\n  dark: 'bg-white text-[#121110] hover:bg-white/90',\n  light: 'bg-[#121110] text-white hover:bg-[#2a2928]',\n}\n\n/**\n * Pill-shaped CTA rendered below the description on Link App cards that\n * surface an action instead of a URL (e.g. FAQ \"View FAQs\", Form \"Complete form\").\n * Renders as `<a target=\"_blank\">` when `cta.href` is set, otherwise as a\n * plain `<button>`.\n */\nconst CardCta: React.FC<CardCtaProps> = ({ variant, cta }) => {\n  const className = classNames(\n    'mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors',\n    BUTTON_CLASS_BY_VARIANT[variant]\n  )\n\n  // Mirror the URL normalization used by the shell anchor so bare\n  // hostnames (e.g. `tr.ee/foo`) open as external links rather than\n  // resolving against the current host.\n  const normalizedHref = normalizeExternalHref(cta.href)\n\n  if (normalizedHref) {\n    return (\n      <a\n        href={normalizedHref}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={(e) => {\n          // Stop the click from bubbling up to the card's anchor wrapper\n          // (Received variant) so we don't navigate twice.\n          e.stopPropagation()\n          cta.onClick?.()\n        }}\n        className={`${className} no-underline`}\n      >\n        {cta.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation()\n        cta.onClick?.()\n      }}\n      className={className}\n    >\n      {cta.label}\n    </button>\n  )\n}\n\nexport default CardCta\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport type { LinkAttachmentCta } from '../../types'\n\nimport CardCta from './CardCta'\nimport type { LinkAttachmentVariant } from './CardShell'\n\nexport interface CardBodyProps {\n  variant: LinkAttachmentVariant\n  title?: string\n  /** Placeholder shown in the title slot when no title is set (dark variants only). */\n  placeholderTitle?: string\n  description?: string\n  /** Footer URL shown below the description. Ignored when `cta` is set. */\n  url?: string\n  /**\n   * Optional 16x16 brand badge rendered before the title (used by Link Apps:\n   * Spotify, TikTok, FAQ, Form, etc.).\n   */\n  appIcon?: React.ReactNode\n  /** Optional CTA rendered in place of the URL footer. */\n  cta?: LinkAttachmentCta\n  /** Trailing action rendered on the right of the title/description block. */\n  trailingAction?: React.ReactNode\n}\n\nconst TITLE_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {\n  dark: 'text-white',\n  light: 'text-black/90',\n}\n\nconst TITLE_DIMMED_CLASS = 'text-white/30'\n\nconst SECONDARY_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {\n  dark: 'text-white/55',\n  light: 'text-black/55',\n}\n\n/**\n * Body of a `LinkAttachment.*` card. Matches the Figma `Container > Labels`\n * group: 16px horizontal padding, 12px vertical padding, 8px gap between\n * the title/description group and the URL/CTA footer, 4px gap within the\n * title group.\n *\n * Returns `null` when there's nothing to render so plain image / file\n * attachments collapse to a thumbnail-only card.\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n  variant,\n  title,\n  placeholderTitle,\n  description,\n  url,\n  appIcon,\n  cta,\n  trailingAction,\n}) => {\n  const isDark = variant === 'dark'\n  const displayTitle = title ?? (isDark ? placeholderTitle : undefined) ?? ''\n  const hasTitle = displayTitle.trim() !== ''\n  const hasDescription =\n    description != null && description.trim() !== ''\n  // Mirror the trimming applied by `ReceivedCard` so a whitespace-only\n  // `url` collapses the body footer (and the whole body, for media-only\n  // cards) instead of rendering an empty line.\n  const trimmedUrl = typeof url === 'string' ? url.trim() : ''\n  const hasUrl = trimmedUrl !== ''\n  const hasCta = cta != null\n\n  if (!hasTitle && !hasDescription && !hasUrl && !hasCta) return null\n\n  const titleDimmed = isDark && !title\n\n  const titleClass = classNames(\n    'truncate text-base font-medium leading-6',\n    titleDimmed ? TITLE_DIMMED_CLASS : TITLE_CLASS_BY_VARIANT[variant]\n  )\n\n  const secondaryClass = classNames(\n    'truncate text-xs leading-4',\n    SECONDARY_CLASS_BY_VARIANT[variant]\n  )\n\n  return (\n    <div className=\"px-4 py-3\">\n      <div className=\"flex items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <div className=\"flex min-w-0 flex-col gap-1\">\n            {hasTitle && (\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {appIcon ? <span className=\"shrink-0\">{appIcon}</span> : null}\n                <p className={classNames('min-w-0', titleClass)}>\n                  {displayTitle}\n                </p>\n              </div>\n            )}\n\n            {hasDescription && (\n              <p className={secondaryClass}>{description}</p>\n            )}\n          </div>\n\n          {!hasCta && hasUrl && (\n            <p className={secondaryClass}>{trimmedUrl}</p>\n          )}\n        </div>\n\n        {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n      </div>\n\n      {cta && <CardCta variant={variant} cta={cta} />}\n    </div>\n  )\n}\n\nexport default CardBody\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LinkAttachmentVariant = 'dark' | 'light'\n\nexport interface CardShellProps {\n  variant: LinkAttachmentVariant\n  children: React.ReactNode\n  /**\n   * When provided, the entire card chrome is rendered as an anchor (used by\n   * the Received card to open the link target on click). Falls back to a\n   * `<div>` when omitted so Composer / Sent cards stay non-navigational.\n   */\n  href?: string\n  /**\n   * Click handler for the card chrome. When `href` is set the shell is an\n   * anchor and `onClick` is invoked in addition to navigation. When `href`\n   * is omitted but `onClick` is set, the shell renders as a clickable\n   * button (used by media-only Received cards to open an image preview).\n   */\n  onClick?: () => void\n  /** Accessible label for the clickable variant (when `onClick` is set without `href`). */\n  ariaLabel?: string\n  rootRef?: React.Ref<HTMLElement>\n  /**\n   * Absolutely-positioned slot rendered in the top-right corner of the\n   * shell. Used by the Composer card to surface its dismiss affordance\n   * when there's no hero thumbnail to anchor it to.\n   */\n  topRight?: React.ReactNode\n  /**\n   * Overrides the variant-derived background colour (e.g. audio cards\n   * use `bg-[#F2F3F4]` regardless of the dark/light variant).\n   */\n  bgClassName?: string\n  'data-testid'?: string\n}\n\nconst SHELL_CLASS = classNames(\n  'relative block w-[280px] select-none overflow-hidden rounded-md',\n  'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]'\n)\n\n/**\n * Outer chrome for every `LinkAttachment.*` card. Matches the 280px width,\n * 16px corner radius, and shadow-400 treatment from the Figma design system.\n */\nconst CardShell: React.FC<CardShellProps> = ({\n  variant,\n  children,\n  href,\n  onClick,\n  ariaLabel,\n  rootRef,\n  topRight,\n  bgClassName,\n  'data-testid': dataTestId,\n}) => {\n  const isInteractive = href != null || onClick != null\n  const className = classNames(\n    SHELL_CLASS,\n    bgClassName ?? (variant === 'dark' ? 'bg-[#121110]' : 'bg-white'),\n    // `focus-ring` is a design-system utility from the component-library\n    // tailwind preset — outline-none + a black 2px focus-visible ring\n    // with offset, so keyboard users can see the focused card.\n    isInteractive ? 'cursor-pointer no-underline focus-ring' : null\n  )\n\n  const corner = topRight ? (\n    <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n      {topRight}\n    </div>\n  ) : null\n\n  if (href) {\n    return (\n      <a\n        ref={rootRef as React.Ref<HTMLAnchorElement>}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onClick}\n        data-testid={dataTestId}\n        className={className}\n      >\n        {children}\n        {corner}\n      </a>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button\n        ref={rootRef as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={classNames(className, 'text-left')}\n      >\n        {children}\n        {corner}\n      </button>\n    )\n  }\n\n  return (\n    <div\n      ref={rootRef as React.Ref<HTMLDivElement>}\n      data-testid={dataTestId}\n      className={className}\n    >\n      {children}\n      {corner}\n    </div>\n  )\n}\n\nexport default CardShell\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\nimport { getSourceType } from '../../../AttachmentCard/utils/mimeType'\n\nimport type { LinkAttachmentVariant } from './CardShell'\n\nexport interface CardThumbnailProps {\n  variant: LinkAttachmentVariant\n  /** Source URL of the hero image (or poster for video). */\n  thumbnailUrl?: string\n  /**\n   * Playable media URL. When provided alongside a video / audio `mimeType`,\n   * the hero region renders a native HTML5 player with controls instead of\n   * the static thumbnail / placeholder.\n   */\n  sourceUrl?: string\n  /** Alt text — typically the card's title. */\n  title?: string\n  /**\n   * Drives the placeholder type icon when no `thumbnailUrl` is provided,\n   * and selects between image / video / audio rendering when `sourceUrl`\n   * is set. Defaults to a generic image icon when unset.\n   */\n  mimeType?: string\n  /** Optional decorations layered into the top corners of the thumbnail. */\n  topLeft?: React.ReactNode\n  topRight?: React.ReactNode\n}\n\nconst PLACEHOLDER_BG: Record<LinkAttachmentVariant, string> = {\n  dark: 'bg-white/10',\n  light: 'bg-black/5',\n}\n\nconst PLACEHOLDER_ICON: Record<LinkAttachmentVariant, string> = {\n  dark: 'size-16 text-white/25',\n  light: 'size-16 text-black/25',\n}\n\n/**\n * 180px hero region shown above the card body. Renders, in priority order:\n *   1. A native `<video controls>` when `sourceUrl` is set and the mime is\n *      video — `thumbnailUrl` acts as the poster.\n *   2. A native `<audio controls>` when `sourceUrl` is set and the mime is\n *      audio — laid over the audio type-icon backdrop.\n *   3. The supplied `thumbnailUrl` image.\n *   4. A placeholder type-icon derived from `mimeType`.\n */\n/** Mime + sourceUrl gives us a playable audio attachment. */\nexport const isPlayableAudio = (mimeType?: string, sourceUrl?: string) =>\n  !!sourceUrl && !!mimeType && getSourceType(mimeType) === 'audio'\n\n/**\n * Mime + sourceUrl gives us a playable video or audio attachment. Used by\n * Received to skip wrapping the shell in an interactive `<button>` so the\n * native media controls remain operable.\n */\nexport const isPlayableMedia = (mimeType?: string, sourceUrl?: string) => {\n  if (!sourceUrl || !mimeType) return false\n  const source = getSourceType(mimeType)\n  return source === 'video' || source === 'audio'\n}\n\n/**\n * Background colour the LinkAttachment cards switch to when the source is\n * audio — flat neutral around the native `<audio>` chrome regardless of\n * the dark / light variant.\n */\nexport const AUDIO_BG_CLASS = 'bg-[#F2F3F4]'\n\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n  variant,\n  thumbnailUrl,\n  sourceUrl,\n  title,\n  mimeType = 'image/*',\n  topLeft,\n  topRight,\n}) => {\n  const sourceType = getSourceType(mimeType)\n  const isPlayableVideo = !!sourceUrl && sourceType === 'video'\n\n  if (isPlayableAudio(mimeType, sourceUrl)) {\n    // Audio collapses the hero entirely — the native player sits inside\n    // the card chrome with a bit of padding so the card background\n    // (typically `bg-[#F2F3F4]`) is visible around it.\n    return (\n      <div className=\"p-3\">\n        <audio\n          src={sourceUrl}\n          controls\n          preload=\"metadata\"\n          className=\"block w-full\"\n        >\n          <track kind=\"captions\" />\n        </audio>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={classNames(\n        'relative h-[180px] w-full overflow-hidden',\n        isPlayableVideo && 'bg-black'\n      )}\n    >\n      {isPlayableVideo ? (\n        <video\n          src={sourceUrl}\n          poster={thumbnailUrl}\n          controls\n          playsInline\n          preload=\"metadata\"\n          className=\"absolute inset-0 h-full w-full object-contain\"\n        >\n          <track kind=\"captions\" />\n        </video>\n      ) : thumbnailUrl ? (\n        <img\n          src={thumbnailUrl}\n          alt={title ?? ''}\n          draggable={false}\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      ) : (\n        <div\n          className={classNames(\n            'flex h-full w-full items-center justify-center',\n            PLACEHOLDER_BG[variant]\n          )}\n        >\n          {renderTypeIcon(mimeType, {\n            className: PLACEHOLDER_ICON[variant],\n            weight: 'regular',\n          })}\n        </div>\n      )}\n\n      {topLeft ? (\n        <div className=\"pointer-events-auto absolute left-3 top-3 z-10\">\n          {topLeft}\n        </div>\n      ) : null}\n      {topRight ? (\n        <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n          {topRight}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport default CardThumbnail\n"],"names":["SCHEME_PATTERN","SAFE_SCHEMES","normalizeExternalHref","value","trimmed","schemeMatch","scheme","BUTTON_CLASS_BY_VARIANT","CardCta","variant","cta","className","classNames","normalizedHref","jsx","e","_a","TITLE_CLASS_BY_VARIANT","TITLE_DIMMED_CLASS","SECONDARY_CLASS_BY_VARIANT","CardBody","title","placeholderTitle","description","url","appIcon","trailingAction","isDark","displayTitle","hasTitle","hasDescription","trimmedUrl","hasUrl","hasCta","titleClass","secondaryClass","jsxs","SHELL_CLASS","CardShell","children","href","onClick","ariaLabel","rootRef","topRight","bgClassName","dataTestId","isInteractive","corner","PLACEHOLDER_BG","PLACEHOLDER_ICON","isPlayableAudio","mimeType","sourceUrl","getSourceType","isPlayableMedia","source","AUDIO_BG_CLASS","CardThumbnail","thumbnailUrl","topLeft","sourceType","isPlayableVideo"],"mappings":"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"}

package/dist/LockedThumbnail-DpJx169C.js

@@ -0,0 +1,220 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import m from "classnames";
+import { r as N, A as y, g as w } from "./index-DfcRe-Hj.js";
+import U, { useState as _ } from "react";
+import { CaretLeftIcon as T, CaretRightIcon as C, PlayIcon as k, LockOpenIcon as z, LockSimpleIcon as I } from "@phosphor-icons/react";
+const F = ({
+  variant: l,
+  title: t,
+  placeholderTitle: n = "Attachment title",
+  mimeType: c,
+  detail: s,
+  statusBadge: d,
+  action: b,
+  icon: u,
+  trailingAction: r
+}) => {
+  const a = l === "dark", i = a ? t ?? n : t ?? "", h = a && !t, f = u ?? N(c, {
+    className: m(
+      "size-5 shrink-0",
+      a ? "text-white/55" : "text-black/55"
+    ),
+    weight: "regular"
+  });
+  return /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        i.trim() !== "" && /* @__PURE__ */ e(
+          "p",
+          {
+            className: m("truncate text-base font-medium leading-6", {
+              "text-black/90": !a,
+              "text-white/30": a && h,
+              "text-white": a && !h
+            }),
+            children: i
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center gap-1", children: [
+          f,
+          s != null && s !== "" && /* @__PURE__ */ e(
+            "span",
+            {
+              className: m(
+                "text-xs font-medium",
+                a ? "text-white/55" : "text-black/55"
+              ),
+              children: s
+            }
+          ),
+          d
+        ] })
+      ] }),
+      r && /* @__PURE__ */ e("div", { className: "shrink-0", children: r })
+    ] }),
+    b
+  ] });
+};
+function S(l) {
+  const t = w(l.mimeType);
+  return t === "video" || t === "audio";
+}
+const O = ({
+  variant: l,
+  gallery: t,
+  title: n,
+  showLocked: c,
+  paymentStatus: s,
+  topRight: d
+}) => {
+  const [b, u] = _(0), r = t.length, a = Math.min(b, r - 1), i = t[a], h = S(i), f = h ? /* @__PURE__ */ e(k, { className: "size-6", weight: "fill" }) : c ? s === "paid" ? /* @__PURE__ */ e(z, { className: "size-6", weight: "fill" }) : /* @__PURE__ */ e(I, { className: "size-6", weight: "fill" }) : null, j = (p) => {
+    p.stopPropagation(), u((x) => Math.max(0, x - 1));
+  }, P = (p) => {
+    p.stopPropagation(), u((x) => Math.min(r - 1, x + 1));
+  }, g = a === 0, v = a === r - 1;
+  return /* @__PURE__ */ o("div", { className: "relative aspect-[337/386] overflow-hidden rounded-t-2xl", children: [
+    c ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: m(
+          "absolute inset-0",
+          l === "dark" ? "bg-white/10" : "bg-black/5"
+        ),
+        children: i.thumbnailUrl && /* @__PURE__ */ e(
+          "img",
+          {
+            src: i.thumbnailUrl,
+            alt: "",
+            "aria-hidden": !0,
+            draggable: !1,
+            className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(
+      y,
+      {
+        mimeType: i.mimeType,
+        sourceUrl: i.sourceUrl,
+        thumbnailUrl: i.thumbnailUrl,
+        title: n,
+        variant: l
+      }
+    ),
+    f && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-black/25 text-white", children: f }) }),
+    r > 1 && /* @__PURE__ */ o(U.Fragment, { children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: j,
+          disabled: g,
+          "aria-label": "Previous item",
+          className: m(
+            "absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+            g ? "opacity-40" : "hover:bg-black/40"
+          ),
+          children: /* @__PURE__ */ e(T, { className: "size-5", weight: "bold" })
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: P,
+          disabled: v,
+          "aria-label": "Next item",
+          className: m(
+            "absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+            v ? "opacity-40" : "hover:bg-black/40"
+          ),
+          children: /* @__PURE__ */ e(C, { className: "size-5", weight: "bold" })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1", children: /* @__PURE__ */ o("span", { className: "text-xs font-medium leading-4 text-white", children: [
+        a + 1,
+        "/",
+        r
+      ] }) })
+    ] }),
+    d && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: d })
+  ] });
+}, V = ({
+  variant: l,
+  children: t,
+  rootRef: n,
+  "data-testid": c
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: n,
+    "data-testid": c,
+    className: m(
+      "relative w-[280px] select-none overflow-hidden rounded-md",
+      "shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]",
+      l === "dark" ? "bg-[#121110]" : "bg-white"
+    ),
+    children: t
+  }
+), D = ({ paymentStatus: l, mimeType: t }) => {
+  const n = t ? w(t) : void 0;
+  return /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-black/25 text-white", children: /* @__PURE__ */ e(n === "video" || n === "audio" ? k : l === "paid" ? z : I, { className: "size-6", weight: "fill" }) }) });
+}, q = ({
+  variant: l,
+  mimeType: t,
+  thumbnailUrl: n,
+  title: c,
+  source: s,
+  showLocked: d,
+  paymentStatus: b,
+  topRight: u,
+  containedImage: r = !1
+}) => {
+  const a = d || s == null ? void 0 : s.sourceUrl, i = d ? n : (s == null ? void 0 : s.thumbnailUrl) ?? n, h = l === "dark";
+  return /* @__PURE__ */ o("div", { className: "relative overflow-hidden rounded-t-2xl", children: [
+    d ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: m(
+          "relative aspect-video overflow-hidden",
+          h ? "bg-white/10" : "bg-black/5"
+        ),
+        children: [
+          i ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: i,
+              alt: "",
+              "aria-hidden": !0,
+              draggable: !1,
+              className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            }
+          ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: N(t, {
+            className: h ? "size-12 text-white/20" : "size-12 text-black/20",
+            weight: "regular"
+          }) }),
+          /* @__PURE__ */ e(D, { paymentStatus: b, mimeType: t })
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      y,
+      {
+        mimeType: t,
+        sourceUrl: a,
+        thumbnailUrl: i,
+        title: c,
+        variant: l,
+        containedImage: r,
+        mediaPlayerProps: a ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
+      }
+    ),
+    u && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: u })
+  ] });
+};
+export {
+  F as C,
+  O as G,
+  V as L,
+  q as a
+};
+//# sourceMappingURL=LockedThumbnail-DpJx169C.js.map

package/dist/LockedThumbnail-DpJx169C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockedThumbnail-DpJx169C.js","sources":["../src/components/LockedAttachment/components/_shared/CardBody.tsx","../src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/LockedAttachment/components/_shared/LockedCardShell.tsx","../src/components/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../AttachmentCard'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface CardBodyProps {\n  variant: LockedCardVariant\n  title?: string\n  placeholderTitle?: string\n  mimeType: string\n  detail?: string\n  statusBadge?: React.ReactNode\n  action?: React.ReactNode\n  /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n  icon?: React.ReactNode\n  /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n  trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer / Sent / Received cards.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC<CardBodyProps> = ({\n  variant,\n  title,\n  placeholderTitle = 'Attachment title',\n  mimeType,\n  detail,\n  statusBadge,\n  action,\n  icon,\n  trailingAction,\n}) => {\n  const isDark = variant === 'dark'\n  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')\n  const titleDimmed = isDark && !title\n\n  const typeIcon =\n    icon ??\n    renderTypeIcon(mimeType, {\n      className: classNames(\n        'size-5 shrink-0',\n        isDark ? 'text-white/55' : 'text-black/55'\n      ),\n      weight: 'regular',\n    })\n\n  return (\n    <div className=\"px-4 py-3\">\n      <div className=\"flex items-end gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {displayTitle.trim() !== '' && (\n            <p\n              className={classNames('truncate text-base font-medium leading-6', {\n                'text-black/90': !isDark,\n                'text-white/30': isDark && titleDimmed,\n                'text-white': isDark && !titleDimmed,\n              })}\n            >\n              {displayTitle}\n            </p>\n          )}\n\n          <div className=\"flex flex-wrap items-center gap-1\">\n            {typeIcon}\n\n            {detail != null && detail !== '' && (\n              <span\n                className={classNames(\n                  'text-xs font-medium',\n                  isDark ? 'text-white/55' : 'text-black/55'\n                )}\n              >\n                {detail}\n              </span>\n            )}\n\n            {statusBadge}\n          </div>\n        </div>\n\n        {trailingAction && <div className=\"shrink-0\">{trailingAction}</div>}\n      </div>\n\n      {action}\n    </div>\n  )\n}\n\nexport default CardBody\n","import {\n  CaretLeftIcon,\n  CaretRightIcon,\n  LockOpenIcon,\n  LockSimpleIcon,\n  PlayIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'\nimport type {\n  LockedAttachmentGalleryItem,\n  PaymentStatus,\n} from '../../types'\n\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface GalleryThumbnailProps {\n  variant: LockedCardVariant\n  gallery: LockedAttachmentGalleryItem[]\n  title?: string\n  /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n  showLocked: boolean\n  paymentStatus?: PaymentStatus\n  /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n  topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n  const sourceType = getSourceType(item.mimeType)\n  return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({\n  variant,\n  gallery,\n  title,\n  showLocked,\n  paymentStatus,\n  topRight,\n}) => {\n  const [index, setIndex] = useState(0)\n  const total = gallery.length\n  const safeIndex = Math.min(index, total - 1)\n  const current = gallery[safeIndex]\n  const isVideoItem = isPlayableItem(current)\n\n  // Center badge: PLAY for video items, LOCK for non-video locked items.\n  // Unlocked image items show no center badge — the image is the content.\n  const centerBadge = (() => {\n    if (isVideoItem) {\n      return <PlayIcon className=\"size-6\" weight=\"fill\" />\n    }\n    if (showLocked) {\n      return paymentStatus === 'paid' ? (\n        <LockOpenIcon className=\"size-6\" weight=\"fill\" />\n      ) : (\n        <LockSimpleIcon className=\"size-6\" weight=\"fill\" />\n      )\n    }\n    return null\n  })()\n\n  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n  // wrapper on ComposerCard / SentCard.\n  const goPrev = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIndex((i) => Math.max(0, i - 1))\n  }\n  const goNext = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIndex((i) => Math.min(total - 1, i + 1))\n  }\n  const atStart = safeIndex === 0\n  const atEnd = safeIndex === total - 1\n\n  const isDark = variant === 'dark'\n\n  // Locked + unlocked render entirely separate trees so the locked state\n  // doesn't end up stacking a blurred `<img>` on top of an underlying\n  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n  // shows through as a visible horizontal seam at the 16:9 boundary\n  // inside the taller 337/386 gallery aspect).\n  //\n  // The locked branch uses `filter: blur` on a single full-size `<img>`\n  // — not `backdrop-filter` — so the rounded corners are clipped\n  // normally without any clip-path workarounds (see LockedThumbnail).\n  return (\n    <div className=\"relative aspect-[337/386] overflow-hidden rounded-t-2xl\">\n      {showLocked ? (\n        <div\n          className={classNames(\n            'absolute inset-0',\n            isDark ? 'bg-white/10' : 'bg-black/5'\n          )}\n        >\n          {current.thumbnailUrl && (\n            <img\n              src={current.thumbnailUrl}\n              alt=\"\"\n              aria-hidden\n              draggable={false}\n              // `scale-110` hides the fuzzy edge that `filter: blur` leaves\n              // around the image bounds.\n              className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n            />\n          )}\n        </div>\n      ) : (\n        <AttachmentThumbnail\n          mimeType={current.mimeType}\n          sourceUrl={current.sourceUrl}\n          thumbnailUrl={current.thumbnailUrl}\n          title={title}\n          variant={variant}\n        />\n      )}\n\n      {centerBadge && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n            {centerBadge}\n          </div>\n        </div>\n      )}\n\n      {total > 1 && (\n        <React.Fragment>\n          <button\n            type=\"button\"\n            onClick={goPrev}\n            disabled={atStart}\n            aria-label=\"Previous item\"\n            className={classNames(\n              'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n              atStart ? 'opacity-40' : 'hover:bg-black/40'\n            )}\n          >\n            <CaretLeftIcon className=\"size-5\" weight=\"bold\" />\n          </button>\n          <button\n            type=\"button\"\n            onClick={goNext}\n            disabled={atEnd}\n            aria-label=\"Next item\"\n            className={classNames(\n              'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',\n              atEnd ? 'opacity-40' : 'hover:bg-black/40'\n            )}\n          >\n            <CaretRightIcon className=\"size-5\" weight=\"bold\" />\n          </button>\n\n          <div className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1\">\n            <span className=\"text-xs font-medium leading-4 text-white\">\n              {safeIndex + 1}/{total}\n            </span>\n          </div>\n        </React.Fragment>\n      )}\n\n      {topRight && (\n        <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n          {topRight}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type LockedCardVariant = 'dark' | 'light'\n\nexport interface LockedCardShellProps {\n  variant: LockedCardVariant\n  children: React.ReactNode\n  rootRef?: React.Ref<HTMLDivElement>\n  'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.\n */\nconst LockedCardShell: React.FC<LockedCardShellProps> = ({\n  variant,\n  children,\n  rootRef,\n  'data-testid': dataTestId,\n}) => (\n  <div\n    ref={rootRef}\n    data-testid={dataTestId}\n    className={classNames(\n      'relative w-[280px] select-none overflow-hidden rounded-md',\n      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',\n      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'\n    )}\n  >\n    {children}\n  </div>\n)\n\nexport default LockedCardShell\n","import {\n  LockOpenIcon,\n  LockSimpleIcon,\n  PlayIcon,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/25` from the design system's `alpha-black-25` token.\n *\n * For playable media (video/audio), the badge shows a play icon instead of a\n * lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC<{\n  paymentStatus?: PaymentStatus\n  mimeType?: string\n}> = ({ paymentStatus, mimeType }) => {\n  const sourceType = mimeType ? getSourceType(mimeType) : undefined\n  const isPlayable = sourceType === 'video' || sourceType === 'audio'\n\n  const Icon = isPlayable\n    ? PlayIcon\n    : paymentStatus === 'paid'\n      ? LockOpenIcon\n      : LockSimpleIcon\n  return (\n    <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div className=\"flex size-12 items-center justify-center rounded-full bg-black/25 text-white\">\n        <Icon className=\"size-6\" weight=\"fill\" />\n      </div>\n    </div>\n  )\n}\n\nexport default LockBadge\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {\n  AttachmentThumbnail,\n  renderTypeIcon,\n} from '../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { LockedCardVariant } from './LockedCardShell'\n\nexport interface LockedThumbnailProps {\n  variant: LockedCardVariant\n  mimeType: string\n  thumbnailUrl?: string\n  title?: string\n  /**\n   * When provided, the underlying source is shown unblurred (preview / unlocked state).\n   * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n   */\n  source?: LockedAttachmentSource\n  /**\n   * Forces the locked appearance even when a source is provided. Used for the\n   * Composer card where the locked treatment is the default and the user toggles\n   * a preview in place.\n   */\n  showLocked: boolean\n  paymentStatus?: PaymentStatus\n  /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n  topRight?: React.ReactNode\n  /** When true, renders the unlocked image with aspect-video + object-contain. */\n  containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n *   - locked:       blurred thumbnail + centered 48px lock badge\n *   - preview/paid: clear thumbnail (the underlying source)\n *   - empty:        type-icon placeholder\n */\nconst LockedThumbnail: React.FC<LockedThumbnailProps> = ({\n  variant,\n  mimeType,\n  thumbnailUrl,\n  title,\n  source,\n  showLocked,\n  paymentStatus,\n  topRight,\n  containedImage = false,\n}) => {\n  const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n  const effectiveThumbnailUrl = showLocked\n    ? thumbnailUrl\n    : (source?.thumbnailUrl ?? thumbnailUrl)\n\n  const isDark = variant === 'dark'\n\n  // Locked + unlocked render entirely separate trees so the locked state\n  // doesn't end up stacking a blurred `<img>` on top of an underlying\n  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n  // shows through as a visible horizontal seam at the 16:9 boundary).\n  //\n  // The locked branch uses `filter: blur` on a single full-size `<img>`\n  // — not `backdrop-filter` — because `backdrop-filter` paints in its\n  // own compositing layer that escapes ancestor `overflow: hidden` on\n  // Chrome/Safari and flattens the card's top corners. `filter` is\n  // clipped normally, so the rounded corners stay round without any\n  // clip-path workarounds.\n  return (\n    <div className=\"relative overflow-hidden rounded-t-2xl\">\n      {showLocked ? (\n        <div\n          className={classNames(\n            'relative aspect-video overflow-hidden',\n            isDark ? 'bg-white/10' : 'bg-black/5'\n          )}\n        >\n          {effectiveThumbnailUrl ? (\n            <img\n              src={effectiveThumbnailUrl}\n              alt=\"\"\n              aria-hidden\n              draggable={false}\n              // `scale-110` hides the fuzzy semi-transparent edge that\n              // `filter: blur` leaves around the image bounds.\n              className=\"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]\"\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              {renderTypeIcon(mimeType, {\n                className: isDark\n                  ? 'size-12 text-white/20'\n                  : 'size-12 text-black/20',\n                weight: 'regular',\n              })}\n            </div>\n          )}\n          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />\n        </div>\n      ) : (\n        <AttachmentThumbnail\n          mimeType={mimeType}\n          sourceUrl={effectiveSourceUrl}\n          thumbnailUrl={effectiveThumbnailUrl}\n          title={title}\n          variant={variant}\n          containedImage={containedImage}\n          mediaPlayerProps={\n            effectiveSourceUrl\n              ? { autoPlay: true, loop: true, controls: true, muted: false }\n              : undefined\n          }\n        />\n      )}\n\n      {topRight && (\n        <div className=\"pointer-events-auto absolute right-3 top-3 z-10\">\n          {topRight}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default LockedThumbnail\n"],"names":["CardBody","variant","title","placeholderTitle","mimeType","detail","statusBadge","action","icon","trailingAction","isDark","displayTitle","titleDimmed","typeIcon","renderTypeIcon","classNames","jsxs","jsx","isPlayableItem","item","sourceType","getSourceType","GalleryThumbnail","gallery","showLocked","paymentStatus","topRight","index","setIndex","useState","total","safeIndex","current","isVideoItem","centerBadge","PlayIcon","LockOpenIcon","LockSimpleIcon","goPrev","e","i","goNext","atStart","atEnd","AttachmentThumbnail","React","CaretLeftIcon","CaretRightIcon","LockedCardShell","children","rootRef","dataTestId","LockBadge","LockedThumbnail","thumbnailUrl","source","containedImage","effectiveSourceUrl","effectiveThumbnailUrl"],"mappings":"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"}