@linktr.ee/messaging-react 3.31.0 → 3.31.1-rc-1785922698

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.0",
+  "version": "3.31.1-rc-1785922698",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1785922698",
     "@linktr.ee/messaging-taxonomy": "^0.5.0",
     "@phosphor-icons/react": "^2.1.10",
     "culori": "^4.0.2"

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -7,6 +7,10 @@ import {
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
+import { accentSurface } from './components/_shared/accentSurface'
+import type { LinkAttachmentVariant } from './components/_shared/CardShell'
+import { BUBBLE_BG_BY_VARIANT, inkFor } from './components/_shared/chinContrast'
+
 import LinkAttachment from '.'
 
 const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
@@ -451,3 +455,102 @@ export const AccentWithoutVisibleHero: StoryFn = () => (
 )
 
 AccentWithoutVisibleHero.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ──────────────────────────────────────────────────────────────────
+   Accent derivation swatches
+   ────────────────────────────────────────────────────────────────── */
+
+/**
+ * Max-chroma sRGB colour for a hue — three phase-shifted cosines, so stepping
+ * the hue walks the wheel at the most saturated triple each hue has. Mirrors
+ * the generator `accentSurface.test.ts` sweeps.
+ */
+const vividHex = (hue: number): string =>
+  `#${[0, 120, 240]
+    .map((offset) =>
+      Math.round(127 + 127 * Math.cos(((hue + offset) * Math.PI) / 180))
+        .toString(16)
+        .padStart(2, '0')
+    )
+    .join('')}`
+
+const HUE_SWEEP = Array.from({ length: 24 }, (_, i) => ({
+  label: `${i * 15}°`,
+  accentColor: vividHex(i * 15),
+}))
+
+// Neutrals and near-limits where the AA gate and the ink flip actually decide
+// something, plus the two inputs that must never derive a surface.
+const EDGE_SAMPLES: Array<{ label: string; accentColor?: string }> = [
+  { label: 'mock #738883', accentColor: '#738883' },
+  { label: 'pale #FFF099', accentColor: '#FFF099' },
+  { label: 'near-white #FCF5E3', accentColor: '#FCF5E3' },
+  { label: 'near-black #1e2330', accentColor: '#1e2330' },
+  { label: 'neutral #767676', accentColor: '#767676' },
+  { label: 'vivid #7008E7', accentColor: '#7008E7' },
+  { label: 'none', accentColor: undefined },
+  { label: 'malformed', accentColor: 'rebeccapurple' },
+]
+
+/**
+ * One derivation cell: the surface the card would paint for this accent and
+ * variant, drawn in the ink `inkFor` picks against it. `accentSurface` and
+ * `inkFor` are the only outputs `culori` feeds into the card, so this paints
+ * exactly what a colour-library swap could move — with the resolved hex printed
+ * so a shift also reads as a text diff. A refused accent shows the variant's
+ * fallback fill, tagged.
+ */
+const DerivedSwatch = ({
+  accentColor,
+  variant,
+}: {
+  accentColor?: string
+  variant: LinkAttachmentVariant
+}) => {
+  const surface = accentSurface(accentColor, variant)
+  const painted = surface ?? BUBBLE_BG_BY_VARIANT[variant]
+  return (
+    <div
+      className="flex h-12 flex-col justify-between rounded-md px-2 py-1.5 text-[11px] font-medium"
+      style={{ backgroundColor: painted, color: inkFor(painted) }}
+    >
+      <span>Yoga on Ice</span>
+      <span className="font-mono opacity-80">
+        {surface ?? `fallback ${painted}`}
+      </span>
+    </div>
+  )
+}
+
+const GridHead = ({ children }: { children: React.ReactNode }) => (
+  <div className="text-xs font-medium text-black/40">{children}</div>
+)
+
+/**
+ * Isolates the colour maths behind the accent chin: for every hue at maximum
+ * chroma and every neutral/edge input, the `dark` (Sent) and `light` (Received)
+ * surfaces `accentSurface` derives, each in the ink `inkFor` returns for it.
+ * One snapshot, no hero pixels — a dense visual companion to the
+ * `accentSurface` hue-sweep unit test, so any drift in the derivation shows up
+ * as both a colour change and a hex text diff across adjacent rows.
+ */
+export const AccentDerivation: StoryFn = () => (
+  <div className="min-h-screen w-full bg-[#F9F7F4] p-8">
+    <div className="grid grid-cols-[6rem_1fr_1fr] items-center gap-x-4 gap-y-1.5">
+      <div />
+      <GridHead>Sent (dark stop)</GridHead>
+      <GridHead>Received (light stop)</GridHead>
+      {[...HUE_SWEEP, ...EDGE_SAMPLES].map(({ label, accentColor }) => (
+        <React.Fragment key={label}>
+          <div className="text-right text-xs font-medium text-black/40">
+            {label}
+          </div>
+          <DerivedSwatch accentColor={accentColor} variant="dark" />
+          <DerivedSwatch accentColor={accentColor} variant="light" />
+        </React.Fragment>
+      ))}
+    </div>
+  </div>
+)
+
+AccentDerivation.parameters = { chromatic: { disableSnapshot: false } }