@rizom/ui 0.2.0-alpha.42 → 0.2.0-alpha.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/index.ts +0 -4
  3. package/src/types.ts +0 -12
  4. package/src/ProductCard.tsx +0 -170
  5. package/src/ProductIllustration.tsx +0 -689
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rizom/ui",
3
- "version": "0.2.0-alpha.42",
3
+ "version": "0.2.0-alpha.44",
4
4
  "description": "Shared Rizom UI primitives for app-owned Rizom site variants.",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/index.ts CHANGED
@@ -11,8 +11,6 @@ export { Footer } from "./Footer";
11
11
 
12
12
  export { Header } from "./Header";
13
13
 
14
- export { ProductCard } from "./ProductCard";
15
-
16
14
  export { RizomFrame } from "./frame";
17
15
  export type { RizomFrameProps } from "./frame";
18
16
 
@@ -30,8 +28,6 @@ export { Ecosystem } from "./Ecosystem";
30
28
  export type { EcosystemCard, EcosystemContent } from "./Ecosystem";
31
29
 
32
30
  export type {
33
- ProductCardContent,
34
- ProductVariant,
35
31
  RizomBrandSuffix,
36
32
  RizomFooterTagline,
37
33
  RizomLink,
package/src/types.ts CHANGED
@@ -15,15 +15,3 @@ export interface RizomFooterTagline {
15
15
  link: RizomLink;
16
16
  suffix?: string;
17
17
  }
18
-
19
- export type ProductVariant = "rover" | "relay" | "ranger";
20
-
21
- export interface ProductCardContent {
22
- variant: ProductVariant;
23
- label: string;
24
- badge: string;
25
- headline: string;
26
- description: string;
27
- tagline?: string[];
28
- tags: string[];
29
- }
package/src/ProductCard.tsx DELETED
@@ -1,170 +0,0 @@
1
- import type { ComponentChildren, JSX } from "preact";
2
- import { ProductIllustration } from "./ProductIllustration";
3
- import { Section } from "./Section";
4
- import type { ProductCardContent, ProductVariant } from "./types";
5
-
6
- const INNER_BASE =
7
- "group relative overflow-hidden grid gap-8 md:gap-14 rounded-[20px] border px-6 py-8 md:px-12 md:py-11 transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-1 [background-image:var(--rizom-product-card-bg)] [border-color:var(--rizom-product-card-border)] hover:[border-color:var(--rizom-product-card-hover-border)] hover:[box-shadow:var(--rizom-product-card-hover-shadow)] before:content-[''] before:absolute before:left-0 before:right-0 before:top-0 before:h-[2px] before:opacity-70 hover:before:opacity-100 before:[background-image:var(--rizom-product-card-bar)] after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:bg-[radial-gradient(circle_at_1px_1px,var(--color-card-grid-dot)_1px,transparent_0)] after:bg-[length:22px_22px] after:bg-[position:14px_14px] after:[mask-image:linear-gradient(180deg,#000_0%,#000_55%,transparent_100%)]";
8
- const INNER_LAYOUT_CLASS: Record<ProductVariant, string> = {
9
- rover: "md:[grid-template-columns:minmax(0,1fr)_minmax(0,1.05fr)]",
10
- relay: "md:[grid-template-columns:minmax(0,1.05fr)_minmax(0,1fr)]",
11
- ranger: "md:[grid-template-columns:minmax(0,1fr)_minmax(0,1.05fr)]",
12
- };
13
- const INNER_THEME_CLASS: Record<ProductVariant, string> = {
14
- rover:
15
- "[--rizom-product-card-bg:var(--color-card-rover-bg)] [--rizom-product-card-border:var(--color-card-rover-border)] [--rizom-product-card-hover-border:var(--color-card-rover-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-rover)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--color-accent)_30%,var(--color-accent)_70%,transparent)]",
16
- relay:
17
- "[--rizom-product-card-bg:var(--color-card-relay-bg)] [--rizom-product-card-border:var(--color-card-relay-border)] [--rizom-product-card-hover-border:var(--color-card-relay-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-relay)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--color-secondary)_30%,var(--color-secondary)_70%,transparent)]",
18
- ranger:
19
- "[--rizom-product-card-bg:var(--color-card-ranger-bg)] [--rizom-product-card-border:var(--color-card-ranger-border)] [--rizom-product-card-hover-border:var(--color-card-ranger-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-ranger)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--palette-amber-light)_18%,var(--color-secondary)_82%,transparent)]",
20
- };
21
- const ILLUSTRATION_BASE =
22
- "relative z-[1] order-first h-[220px] w-full overflow-hidden rounded-xl border md:h-[320px] [border-color:var(--color-card-illust-border)] [background-image:linear-gradient(var(--color-card-illust-grid)_1px,transparent_1px),linear-gradient(90deg,var(--color-card-illust-grid)_1px,transparent_1px),var(--color-card-illust-overlay)] [background-size:28px_28px,28px_28px,auto]";
23
-
24
- const CORNER_BASE =
25
- "pointer-events-none absolute h-[14px] w-[14px] opacity-85 before:content-[''] before:absolute before:left-0 before:top-0 before:h-[1.5px] before:w-full before:bg-current after:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-[1.5px] after:bg-current";
26
- const ILLUSTRATION_CORNER_BASE = `${CORNER_BASE} z-[2]`;
27
-
28
- const CORNER_CLASS: Record<ProductVariant, string> = {
29
- rover: "text-accent",
30
- relay: "text-secondary",
31
- ranger: "text-secondary",
32
- };
33
-
34
- const TAGLINE_ARROW_CLASS: Record<ProductVariant, string> = {
35
- rover: "text-accent",
36
- relay: "text-secondary",
37
- ranger: "text-secondary",
38
- };
39
-
40
- const DEFAULT_TAGLINES: Record<ProductVariant, string[]> = {
41
- rover: ["Ingest", "Synthesize", "Publish"],
42
- relay: ["Map", "Track", "Retain"],
43
- ranger: ["Scan", "Score", "Assemble"],
44
- };
45
-
46
- export const ProductCard = ({
47
- variant,
48
- label,
49
- badge,
50
- headline,
51
- description,
52
- tagline,
53
- tags,
54
- backgroundWatermark,
55
- }: ProductCardContent & {
56
- backgroundWatermark?: ComponentChildren;
57
- }): JSX.Element => {
58
- const amber = variant === "rover";
59
- const isRelay = variant === "relay";
60
- const accentText = amber ? "text-accent" : "text-secondary";
61
- const badgeClasses = amber
62
- ? "border border-accent/45 text-accent bg-accent/10"
63
- : "border border-secondary/45 text-secondary bg-secondary/10";
64
- const tagClasses = amber ? "text-accent/90" : "text-secondary/90";
65
- const taglineParts =
66
- tagline && tagline.length > 0 ? tagline : DEFAULT_TAGLINES[variant];
67
-
68
- return (
69
- <Section className="reveal py-9">
70
- <div
71
- className={`${INNER_BASE} ${INNER_LAYOUT_CLASS[variant]} ${INNER_THEME_CLASS[variant]}`}
72
- >
73
- <span
74
- className={`${CORNER_BASE} ${CORNER_CLASS[variant]} left-3 top-3`}
75
- />
76
- <span
77
- className={`${CORNER_BASE} ${CORNER_CLASS[variant]} right-3 top-3 scale-x-[-1]`}
78
- />
79
- <span
80
- className={`${CORNER_BASE} ${CORNER_CLASS[variant]} bottom-3 left-3 scale-y-[-1]`}
81
- />
82
- <span
83
- className={`${CORNER_BASE} ${CORNER_CLASS[variant]} bottom-3 right-3 scale-[-1]`}
84
- />
85
-
86
- <div
87
- className={`relative z-[1] min-w-0 pt-1 ${isRelay ? "md:order-2" : ""}`}
88
- >
89
- {backgroundWatermark ? (
90
- <div className="pointer-events-none absolute left-1/2 top-1/2 z-0 w-[320px] -translate-x-1/2 -translate-y-1/2 md:w-[400px] lg:w-[460px] opacity-[0.18]">
91
- {backgroundWatermark}
92
- </div>
93
- ) : null}
94
-
95
- <div className="relative z-[1] flex flex-col gap-[18px]">
96
- <div className="flex flex-wrap items-baseline gap-3.5 border-b border-dashed border-[var(--color-card-divider)] pb-3.5">
97
- <span
98
- className={`font-display text-[38px] font-bold leading-none tracking-[-1.2px] md:text-[52px] ${accentText}`}
99
- >
100
- {label}
101
- </span>
102
- <span
103
- className={`ml-auto inline-flex items-center gap-1.5 rounded-[2px] px-2.5 py-[5px] font-mono text-[10px] font-semibold uppercase tracking-[0.2em] ${badgeClasses}`}
104
- >
105
- <span className="text-[9px] leading-none">▸</span>
106
- {badge}
107
- </span>
108
- </div>
109
-
110
- <div className="flex flex-wrap items-center gap-2.5 font-mono text-[11.5px] uppercase tracking-[0.22em] text-theme-muted">
111
- {taglineParts.map((part, index) => (
112
- <span key={`${variant}-${part}`} className="contents">
113
- {index > 0 ? (
114
- <span
115
- className={`opacity-55 ${TAGLINE_ARROW_CLASS[variant]}`}
116
- >
117
- →
118
- </span>
119
- ) : null}
120
- <span>{part}</span>
121
- </span>
122
- ))}
123
- </div>
124
-
125
- <h3 className="font-display text-[26px] font-bold leading-[1.18] tracking-[-0.6px] md:text-[36px]">
126
- {headline}
127
- </h3>
128
- <p className="max-w-[54ch] text-body-md leading-[1.7] text-theme-muted">
129
- {description}
130
- </p>
131
-
132
- <div className="mt-auto flex flex-wrap items-center gap-x-0 gap-y-1.5 border-t border-dashed border-[var(--color-card-divider)] pt-[18px]">
133
- {tags.map((tag, index) => (
134
- <span
135
- key={tag}
136
- className={`font-mono text-[10px] font-medium uppercase tracking-[0.16em] ${tagClasses}`}
137
- >
138
- {index > 0 ? (
139
- <span className="pr-2.5 text-[var(--color-card-tag-separator)]">
140
- /
141
- </span>
142
- ) : null}
143
- <span className="pr-2.5">{tag}</span>
144
- </span>
145
- ))}
146
- </div>
147
- </div>
148
- </div>
149
-
150
- <div
151
- className={`${ILLUSTRATION_BASE} ${isRelay ? "md:order-1" : "md:order-none"}`}
152
- >
153
- <span
154
- className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} left-[10px] top-[10px]`}
155
- />
156
- <span
157
- className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} right-[10px] top-[10px] scale-x-[-1]`}
158
- />
159
- <span
160
- className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} bottom-[10px] left-[10px] scale-y-[-1]`}
161
- />
162
- <span
163
- className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} bottom-[10px] right-[10px] scale-[-1]`}
164
- />
165
- <ProductIllustration variant={variant} />
166
- </div>
167
- </div>
168
- </Section>
169
- );
170
- };
package/src/ProductIllustration.tsx DELETED
@@ -1,689 +0,0 @@
1
- import type { JSX } from "preact";
2
- import type { ProductVariant } from "./types";
3
-
4
- const PRODUCT_SVGS: Record<ProductVariant, string> = {
5
- rover: `<svg class="product-diagram" viewBox="0 0 511 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" aria-label="An abstract amber cloud of captured thoughts flows into a central voiceprint signature, which is stamped on three identical output carriers. Same voice, carried through every output.">
6
- <defs>
7
- <filter id="rover-glow" x="-50%" y="-50%" width="200%" height="200%">
8
- <feGaussianBlur stdDeviation="5" result="b"/>
9
- <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
10
- </filter>
11
- <radialGradient id="rover-cloud-glow" cx="50%" cy="50%" r="50%">
12
- <stop offset="0%" stop-color="var(--palette-amber)" stop-opacity="0.18"/>
13
- <stop offset="55%" stop-color="var(--palette-amber)" stop-opacity="0.05"/>
14
- <stop offset="100%" stop-color="var(--palette-amber)" stop-opacity="0"/>
15
- </radialGradient>
16
- <radialGradient id="rover-voice-aura" cx="50%" cy="50%" r="50%">
17
- <stop offset="0%" stop-color="var(--palette-amber-glow)" stop-opacity="0.28"/>
18
- <stop offset="45%" stop-color="var(--palette-amber)" stop-opacity="0.1"/>
19
- <stop offset="100%" stop-color="var(--palette-amber)" stop-opacity="0"/>
20
- </radialGradient>
21
- </defs>
22
-
23
- <!-- A. RAW CAPTURES — abstract amber particle cloud. No figurative
24
- note/link/card shapes. Just a dense organic scatter of thought
25
- particles, varying size and opacity, threaded through with
26
- organic wisp curves. -->
27
- <ellipse cx="92" cy="165" rx="105" ry="130" fill="url(#rover-cloud-glow)"/>
28
-
29
- <g fill="var(--palette-amber)">
30
- <!-- bright anchors -->
31
- <circle cx="30" cy="55" r="1.8" opacity="0.85"/>
32
- <circle cx="110" cy="72" r="2.2" opacity="0.92"/>
33
- <circle cx="48" cy="115" r="1.8" opacity="0.8"/>
34
- <circle cx="96" cy="140" r="2.1" opacity="0.9"/>
35
- <circle cx="140" cy="125" r="1.9" opacity="0.85"/>
36
- <circle cx="68" cy="175" r="2.0" opacity="0.9"/>
37
- <circle cx="116" cy="192" r="1.9" opacity="0.85"/>
38
- <circle cx="58" cy="228" r="1.8" opacity="0.82"/>
39
- <circle cx="128" cy="240" r="2.1" opacity="0.9"/>
40
- <circle cx="82" cy="270" r="1.8" opacity="0.8"/>
41
-
42
- <!-- mediums -->
43
- <circle cx="52" cy="78" r="1.4" opacity="0.6"/>
44
- <circle cx="72" cy="62" r="1.3" opacity="0.55"/>
45
- <circle cx="140" cy="88" r="1.5" opacity="0.6"/>
46
- <circle cx="162" cy="110" r="1.3" opacity="0.55"/>
47
- <circle cx="24" cy="138" r="1.4" opacity="0.5"/>
48
- <circle cx="78" cy="108" r="1.5" opacity="0.6"/>
49
- <circle cx="118" cy="108" r="1.2" opacity="0.5"/>
50
- <circle cx="38" cy="172" r="1.5" opacity="0.62"/>
51
- <circle cx="148" cy="168" r="1.3" opacity="0.55"/>
52
- <circle cx="155" cy="208" r="1.4" opacity="0.6"/>
53
- <circle cx="36" cy="248" r="1.4" opacity="0.55"/>
54
- <circle cx="96" cy="222" r="1.3" opacity="0.55"/>
55
- <circle cx="112" cy="262" r="1.5" opacity="0.6"/>
56
- <circle cx="148" cy="258" r="1.3" opacity="0.5"/>
57
- <circle cx="50" cy="200" r="1.2" opacity="0.5"/>
58
-
59
- <!-- faint specks -->
60
- <circle cx="15" cy="80" r="0.7" opacity="0.25"/>
61
- <circle cx="88" cy="38" r="0.8" opacity="0.3"/>
62
- <circle cx="132" cy="50" r="0.65" opacity="0.22"/>
63
- <circle cx="160" cy="70" r="0.7" opacity="0.28"/>
64
- <circle cx="10" cy="110" r="0.75" opacity="0.25"/>
65
- <circle cx="60" cy="132" r="0.9" opacity="0.35"/>
66
- <circle cx="90" cy="92" r="0.7" opacity="0.3"/>
67
- <circle cx="164" cy="145" r="0.8" opacity="0.28"/>
68
- <circle cx="20" cy="178" r="0.7" opacity="0.26"/>
69
- <circle cx="76" cy="150" r="0.8" opacity="0.3"/>
70
- <circle cx="128" cy="156" r="0.7" opacity="0.28"/>
71
- <circle cx="168" cy="188" r="0.65" opacity="0.22"/>
72
- <circle cx="10" cy="222" r="0.7" opacity="0.25"/>
73
- <circle cx="68" cy="255" r="0.9" opacity="0.35"/>
74
- <circle cx="102" cy="245" r="0.7" opacity="0.3"/>
75
- <circle cx="20" cy="290" r="0.75" opacity="0.28"/>
76
- <circle cx="168" cy="230" r="0.7" opacity="0.26"/>
77
- <circle cx="138" cy="282" r="0.8" opacity="0.3"/>
78
- </g>
79
-
80
- <!-- Sparks -->
81
- <g fill="var(--palette-amber-light)">
82
- <circle cx="124" cy="108" r="1.2" opacity="0.85"/>
83
- <circle cx="62" cy="196" r="1.1" opacity="0.8"/>
84
- <circle cx="146" cy="218" r="1.0" opacity="0.78"/>
85
- <circle cx="90" cy="248" r="1.1" opacity="0.82"/>
86
- </g>
87
-
88
- <!-- Organic wisp curves threading through the cloud — warmth. -->
89
- <g fill="none" stroke="var(--palette-amber)" stroke-linecap="round">
90
- <path d="M 22,92 Q 54,86 82,100 T 138,112" stroke-width="0.5" opacity="0.28"/>
91
- <path d="M 34,210 Q 70,222 102,212 T 162,228" stroke-width="0.5" opacity="0.25"/>
92
- <path d="M 68,60 Q 88,80 102,72" stroke-width="0.4" opacity="0.2"/>
93
- <path d="M 50,268 Q 86,254 130,272" stroke-width="0.4" opacity="0.2"/>
94
- </g>
95
-
96
- <!-- B. VOICEPRINT — the distilled signature. Warm radial aura
97
- instead of geometric rings. A few peak bars are hot
98
- (amber-light / amber-cream) — the waveform has loud moments. -->
99
- <g transform="translate(214,160)">
100
- <circle cx="56" cy="0" r="72" fill="url(#rover-voice-aura)"/>
101
- <line x1="-4" y1="0" x2="116" y2="0" stroke="var(--palette-amber)" stroke-width="0.6" opacity="0.3"/>
102
- <g fill="var(--palette-amber)" filter="url(#rover-glow)">
103
- <rect x="0" y="-3" width="2" height="6" rx="1"/>
104
- <rect x="4" y="-5" width="2" height="10" rx="1"/>
105
- <rect x="8" y="-8" width="2" height="16" rx="1"/>
106
- <rect x="12" y="-11" width="2" height="22" rx="1"/>
107
- <rect x="16" y="-14" width="2" height="28" rx="1"/>
108
- <rect x="20" y="-16" width="2" height="32" rx="1" fill="var(--palette-amber-light)"/>
109
- <rect x="24" y="-13" width="2" height="26" rx="1"/>
110
- <rect x="28" y="-9" width="2" height="18" rx="1"/>
111
- <rect x="32" y="-6" width="2" height="12" rx="1"/>
112
- <rect x="36" y="-4" width="2" height="8" rx="1"/>
113
- <rect x="40" y="-7" width="2" height="14" rx="1"/>
114
- <rect x="44" y="-11" width="2" height="22" rx="1"/>
115
- <rect x="48" y="-15" width="2" height="30" rx="1" fill="var(--palette-amber-light)"/>
116
- <rect x="52" y="-17.5" width="2" height="35" rx="1" fill="var(--palette-amber-glow)"/>
117
- <rect x="56" y="-16" width="2" height="32" rx="1" fill="var(--palette-amber-light)"/>
118
- <rect x="60" y="-12" width="2" height="24" rx="1"/>
119
- <rect x="64" y="-8" width="2" height="16" rx="1"/>
120
- <rect x="68" y="-6" width="2" height="12" rx="1"/>
121
- <rect x="72" y="-9" width="2" height="18" rx="1"/>
122
- <rect x="76" y="-13" width="2" height="26" rx="1"/>
123
- <rect x="80" y="-14" width="2" height="28" rx="1" fill="var(--palette-amber-light)"/>
124
- <rect x="84" y="-11" width="2" height="22" rx="1"/>
125
- <rect x="88" y="-8" width="2" height="16" rx="1"/>
126
- <rect x="92" y="-5" width="2" height="10" rx="1"/>
127
- <rect x="96" y="-4" width="2" height="8" rx="1"/>
128
- <rect x="100" y="-3" width="2" height="6" rx="1"/>
129
- <rect x="104" y="-2" width="2" height="4" rx="1"/>
130
- <rect x="108" y="-1.5" width="2" height="3" rx="1"/>
131
- </g>
132
- </g>
133
-
134
- <!-- C. CARRIERS — three identical signature carriers. No title
135
- lines, no slide thumbnail, no avatar. Each card holds only
136
- the voiceprint centered, with matching hot peak bars — the
137
- signature's hot points echo identically on every output. -->
138
-
139
- <!-- Carrier 1 (y=30-90) -->
140
- <g>
141
- <rect class="tile" x="362" y="30" width="128" height="60" rx="4"
142
- stroke="rgba(232,119,34,0.5)" stroke-width="1" fill="rgba(232,119,34,0.04)"/>
143
- <g transform="translate(376,60)" fill="var(--palette-amber)" opacity="0.9">
144
- <rect x="0" y="-1.5" width="1.4" height="3" rx="0.7"/>
145
- <rect x="4.3" y="-2.5" width="1.4" height="5" rx="0.7"/>
146
- <rect x="8.6" y="-4" width="1.4" height="8" rx="0.7"/>
147
- <rect x="12.9" y="-5.5" width="1.4" height="11" rx="0.7"/>
148
- <rect x="17.2" y="-7" width="1.4" height="14" rx="0.7"/>
149
- <rect x="21.5" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
150
- <rect x="25.8" y="-6.5" width="1.4" height="13" rx="0.7"/>
151
- <rect x="30.1" y="-4.5" width="1.4" height="9" rx="0.7"/>
152
- <rect x="34.4" y="-3" width="1.4" height="6" rx="0.7"/>
153
- <rect x="38.7" y="-2" width="1.4" height="4" rx="0.7"/>
154
- <rect x="43" y="-3.5" width="1.4" height="7" rx="0.7"/>
155
- <rect x="47.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
156
- <rect x="51.6" y="-7.5" width="1.4" height="15" rx="0.7" fill="var(--palette-amber-light)"/>
157
- <rect x="55.9" y="-8.5" width="1.4" height="17" rx="0.7" fill="var(--palette-amber-glow)"/>
158
- <rect x="60.2" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
159
- <rect x="64.5" y="-6" width="1.4" height="12" rx="0.7"/>
160
- <rect x="68.8" y="-4" width="1.4" height="8" rx="0.7"/>
161
- <rect x="73.1" y="-3" width="1.4" height="6" rx="0.7"/>
162
- <rect x="77.4" y="-4.5" width="1.4" height="9" rx="0.7"/>
163
- <rect x="81.7" y="-6.5" width="1.4" height="13" rx="0.7"/>
164
- <rect x="86" y="-7" width="1.4" height="14" rx="0.7" fill="var(--palette-amber-light)"/>
165
- <rect x="90.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
166
- <rect x="94.6" y="-4" width="1.4" height="8" rx="0.7"/>
167
- <rect x="98.9" y="-2.5" width="1.4" height="5" rx="0.7"/>
168
- <rect x="103.2" y="-1.5" width="1.4" height="3" rx="0.7"/>
169
- </g>
170
- </g>
171
-
172
- <!-- Carrier 2 (y=130-190) -->
173
- <g>
174
- <rect class="tile" x="362" y="130" width="128" height="60" rx="4"
175
- stroke="rgba(232,119,34,0.5)" stroke-width="1" fill="rgba(232,119,34,0.04)"/>
176
- <g transform="translate(376,160)" fill="var(--palette-amber)" opacity="0.9">
177
- <rect x="0" y="-1.5" width="1.4" height="3" rx="0.7"/>
178
- <rect x="4.3" y="-2.5" width="1.4" height="5" rx="0.7"/>
179
- <rect x="8.6" y="-4" width="1.4" height="8" rx="0.7"/>
180
- <rect x="12.9" y="-5.5" width="1.4" height="11" rx="0.7"/>
181
- <rect x="17.2" y="-7" width="1.4" height="14" rx="0.7"/>
182
- <rect x="21.5" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
183
- <rect x="25.8" y="-6.5" width="1.4" height="13" rx="0.7"/>
184
- <rect x="30.1" y="-4.5" width="1.4" height="9" rx="0.7"/>
185
- <rect x="34.4" y="-3" width="1.4" height="6" rx="0.7"/>
186
- <rect x="38.7" y="-2" width="1.4" height="4" rx="0.7"/>
187
- <rect x="43" y="-3.5" width="1.4" height="7" rx="0.7"/>
188
- <rect x="47.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
189
- <rect x="51.6" y="-7.5" width="1.4" height="15" rx="0.7" fill="var(--palette-amber-light)"/>
190
- <rect x="55.9" y="-8.5" width="1.4" height="17" rx="0.7" fill="var(--palette-amber-glow)"/>
191
- <rect x="60.2" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
192
- <rect x="64.5" y="-6" width="1.4" height="12" rx="0.7"/>
193
- <rect x="68.8" y="-4" width="1.4" height="8" rx="0.7"/>
194
- <rect x="73.1" y="-3" width="1.4" height="6" rx="0.7"/>
195
- <rect x="77.4" y="-4.5" width="1.4" height="9" rx="0.7"/>
196
- <rect x="81.7" y="-6.5" width="1.4" height="13" rx="0.7"/>
197
- <rect x="86" y="-7" width="1.4" height="14" rx="0.7" fill="var(--palette-amber-light)"/>
198
- <rect x="90.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
199
- <rect x="94.6" y="-4" width="1.4" height="8" rx="0.7"/>
200
- <rect x="98.9" y="-2.5" width="1.4" height="5" rx="0.7"/>
201
- <rect x="103.2" y="-1.5" width="1.4" height="3" rx="0.7"/>
202
- </g>
203
- </g>
204
-
205
- <!-- Carrier 3 (y=230-290) -->
206
- <g>
207
- <rect class="tile" x="362" y="230" width="128" height="60" rx="4"
208
- stroke="rgba(232,119,34,0.5)" stroke-width="1" fill="rgba(232,119,34,0.04)"/>
209
- <g transform="translate(376,260)" fill="var(--palette-amber)" opacity="0.9">
210
- <rect x="0" y="-1.5" width="1.4" height="3" rx="0.7"/>
211
- <rect x="4.3" y="-2.5" width="1.4" height="5" rx="0.7"/>
212
- <rect x="8.6" y="-4" width="1.4" height="8" rx="0.7"/>
213
- <rect x="12.9" y="-5.5" width="1.4" height="11" rx="0.7"/>
214
- <rect x="17.2" y="-7" width="1.4" height="14" rx="0.7"/>
215
- <rect x="21.5" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
216
- <rect x="25.8" y="-6.5" width="1.4" height="13" rx="0.7"/>
217
- <rect x="30.1" y="-4.5" width="1.4" height="9" rx="0.7"/>
218
- <rect x="34.4" y="-3" width="1.4" height="6" rx="0.7"/>
219
- <rect x="38.7" y="-2" width="1.4" height="4" rx="0.7"/>
220
- <rect x="43" y="-3.5" width="1.4" height="7" rx="0.7"/>
221
- <rect x="47.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
222
- <rect x="51.6" y="-7.5" width="1.4" height="15" rx="0.7" fill="var(--palette-amber-light)"/>
223
- <rect x="55.9" y="-8.5" width="1.4" height="17" rx="0.7" fill="var(--palette-amber-glow)"/>
224
- <rect x="60.2" y="-8" width="1.4" height="16" rx="0.7" fill="var(--palette-amber-light)"/>
225
- <rect x="64.5" y="-6" width="1.4" height="12" rx="0.7"/>
226
- <rect x="68.8" y="-4" width="1.4" height="8" rx="0.7"/>
227
- <rect x="73.1" y="-3" width="1.4" height="6" rx="0.7"/>
228
- <rect x="77.4" y="-4.5" width="1.4" height="9" rx="0.7"/>
229
- <rect x="81.7" y="-6.5" width="1.4" height="13" rx="0.7"/>
230
- <rect x="86" y="-7" width="1.4" height="14" rx="0.7" fill="var(--palette-amber-light)"/>
231
- <rect x="90.3" y="-5.5" width="1.4" height="11" rx="0.7"/>
232
- <rect x="94.6" y="-4" width="1.4" height="8" rx="0.7"/>
233
- <rect x="98.9" y="-2.5" width="1.4" height="5" rx="0.7"/>
234
- <rect x="103.2" y="-1.5" width="1.4" height="3" rx="0.7"/>
235
- </g>
236
- </g>
237
- </svg>`,
238
- relay: `<svg class="product-diagram" viewBox="0 0 511 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" aria-label="Five teammates as TMS-dimension pentagon radars spread across the canvas; each radar carries a voiceprint signature. Alex's radar is a ghost — his signature persists in the team record. The team has rewired its live connections around him (Iris↔Kai direct).">
239
- <defs>
240
- <filter id="relay-glow" x="-50%" y="-50%" width="200%" height="200%">
241
- <feGaussianBlur stdDeviation="3.5" result="b"/>
242
- <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
243
- </filter>
244
- <radialGradient id="relay-remnant-glow" cx="50%" cy="50%" r="50%">
245
- <stop offset="0%" stop-color="var(--palette-purple-light)" stop-opacity="0.4"/>
246
- <stop offset="60%" stop-color="var(--palette-purple-light)" stop-opacity="0.1"/>
247
- <stop offset="100%" stop-color="var(--palette-purple-light)" stop-opacity="0"/>
248
- </radialGradient>
249
- <radialGradient id="relay-maya-halo" cx="50%" cy="50%" r="50%">
250
- <stop offset="0%" stop-color="var(--palette-amber-light)" stop-opacity="0.26"/>
251
- <stop offset="55%" stop-color="var(--palette-amber)" stop-opacity="0.08"/>
252
- <stop offset="100%" stop-color="var(--palette-amber)" stop-opacity="0"/>
253
- </radialGradient>
254
- </defs>
255
-
256
- <!-- TMS PENTAGON RADARS — five teammates as 5-dimensional
257
- radars (Specialization · Credibility · cOordination · Memory
258
- · Transfer). Each radar's data polygon is that teammate's
259
- specific TMS profile, plus a voiceprint signature below.
260
- Alex's radar is a ghost (dashed outline, outline-only data
261
- polygon); his TMS signature persists in the team record
262
- even though the team has rewired its live connections
263
- around him (Iris↔Kai direct). -->
264
-
265
- <!-- Subtle coordinate curves -->
266
- <g stroke="var(--palette-purple-light)" stroke-width="0.4" fill="none" opacity="0.08" stroke-dasharray="1 4">
267
- <path d="M 0,85 Q 255,105 510,75"/>
268
- <path d="M 0,240 Q 255,260 510,230"/>
269
- <path d="M 100,0 Q 120,160 90,320"/>
270
- <path d="M 430,0 Q 415,160 430,320"/>
271
- </g>
272
-
273
- <!-- Background starfield -->
274
- <g fill="var(--palette-purple-light)">
275
- <circle cx="40" cy="48" r="0.9" opacity="0.3"/>
276
- <circle cx="148" cy="32" r="0.9" opacity="0.3"/>
277
- <circle cx="310" cy="30" r="0.85" opacity="0.28"/>
278
- <circle cx="372" cy="22" r="0.9" opacity="0.3"/>
279
- <circle cx="486" cy="56" r="0.85" opacity="0.25"/>
280
- <circle cx="24" cy="176" r="0.9" opacity="0.28"/>
281
- <circle cx="58" cy="280" r="0.9" opacity="0.26"/>
282
- <circle cx="262" cy="298" r="0.85" opacity="0.24"/>
283
- <circle cx="342" cy="300" r="0.85" opacity="0.26"/>
284
- <circle cx="498" cy="180" r="0.9" opacity="0.28"/>
285
- <circle cx="78" cy="22" r="0.55" opacity="0.2"/>
286
- <circle cx="198" cy="20" r="0.5" opacity="0.2"/>
287
- <circle cx="312" cy="168" r="0.55" opacity="0.22"/>
288
- <circle cx="98" cy="240" r="0.5" opacity="0.2"/>
289
- <circle cx="268" cy="200" r="0.55" opacity="0.2"/>
290
- <circle cx="362" cy="205" r="0.5" opacity="0.2"/>
291
- <circle cx="254" cy="140" r="0.55" opacity="0.22"/>
292
- <circle cx="28" cy="118" r="0.5" opacity="0.2"/>
293
- <circle cx="502" cy="302" r="0.55" opacity="0.22"/>
294
- <circle cx="388" cy="160" r="0.5" opacity="0.18"/>
295
- <circle cx="100" cy="298" r="0.55" opacity="0.2"/>
296
- <circle cx="460" cy="20" r="0.55" opacity="0.22"/>
297
- </g>
298
-
299
- <!-- Remnant nebula around departed Alex (425, 255) -->
300
- <circle cx="425" cy="255" r="72" fill="url(#relay-remnant-glow)"/>
301
- <circle cx="425" cy="255" r="58" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.5" opacity="0.22" stroke-dasharray="1 3"/>
302
- <circle cx="425" cy="255" r="44" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.28" stroke-dasharray="1 2"/>
303
- <g fill="var(--palette-purple-light)">
304
- <circle cx="492" cy="204" r="0.7" opacity="0.35"/>
305
- <circle cx="502" cy="182" r="0.55" opacity="0.25"/>
306
- <circle cx="460" cy="310" r="0.7" opacity="0.35"/>
307
- <circle cx="490" cy="298" r="0.55" opacity="0.25"/>
308
- <circle cx="368" cy="306" r="0.55" opacity="0.25"/>
309
- </g>
310
-
311
- <!-- Constellation edges — 5 live among Maya/Sam/Kai/Iris.
312
- Alex disconnected (team rewired around him). -->
313
- <g fill="none" stroke="var(--palette-purple-light)" stroke-width="0.95" opacity="0.55" stroke-linecap="round">
314
- <line x1="100" y1="130" x2="255" y2="65"/>
315
- <line x1="255" y1="65" x2="440" y2="100"/>
316
- <line x1="100" y1="130" x2="165" y2="245"/>
317
- <line x1="255" y1="65" x2="165" y2="245"/>
318
- <line x1="165" y1="245" x2="440" y2="100"/>
319
- </g>
320
- <g fill="var(--palette-purple-light)" opacity="0.75">
321
- <circle cx="177.5" cy="97.5" r="1"/>
322
- <circle cx="347.5" cy="82.5" r="1"/>
323
- <circle cx="132.5" cy="187.5" r="1"/>
324
- <circle cx="210" cy="155" r="1"/>
325
- <circle cx="302.5" cy="172.5" r="1"/>
326
- </g>
327
-
328
- <!-- MAYA · (100, 130) r=42 · lead · S=0.95 C=0.90 O=0.82 M=0.88 T=0.85 -->
329
- <g transform="translate(100 130)">
330
- <circle r="54" fill="url(#relay-maya-halo)"/>
331
- <circle r="48" fill="none" stroke="var(--palette-amber)" stroke-width="0.4" opacity="0.18"/>
332
- <path d="M 0,-42 L 39.94,-12.98 L 24.70,33.98 L -24.70,33.98 L -39.94,-12.98 Z"
333
- fill="none" stroke="var(--palette-amber-light)" stroke-width="0.8" opacity="0.5"/>
334
- <path d="M 0,-28 L 26.63,-8.65 L 16.46,22.65 L -16.46,22.65 L -26.63,-8.65 Z"
335
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.28" stroke-dasharray="2 3"/>
336
- <path d="M 0,-14 L 13.31,-4.33 L 8.23,11.33 L -8.23,11.33 L -13.31,-4.33 Z"
337
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.22" stroke-dasharray="1 2"/>
338
- <g stroke="var(--palette-purple-light)" stroke-width="0.6" opacity="0.45">
339
- <line x1="0" y1="0" x2="0" y2="-42"/>
340
- <line x1="0" y1="0" x2="39.94" y2="-12.98"/>
341
- <line x1="0" y1="0" x2="24.70" y2="33.98"/>
342
- <line x1="0" y1="0" x2="-24.70" y2="33.98"/>
343
- <line x1="0" y1="0" x2="-39.94" y2="-12.98"/>
344
- </g>
345
- <path d="M 0,-39.9 L 35.95,-11.68 L 20.25,27.86 L -21.73,29.9 L -33.95,-11.03 Z"
346
- fill="rgba(255,163,102,0.2)" stroke="var(--palette-amber-light)" stroke-width="1.2" opacity="0.98"/>
347
- <g>
348
- <circle cx="0" cy="-39.9" r="1.8" fill="var(--palette-amber-light)"/>
349
- <circle cx="35.95" cy="-11.68" r="1.8" fill="var(--palette-amber-light)"/>
350
- <circle cx="20.25" cy="27.86" r="1.8" fill="var(--palette-amber-light)"/>
351
- <circle cx="-21.73" cy="29.9" r="1.8" fill="var(--palette-amber-light)"/>
352
- <circle cx="-33.95" cy="-11.03" r="1.8" fill="var(--palette-amber-light)"/>
353
- </g>
354
- <circle r="4.5" fill="var(--palette-amber)" filter="url(#relay-glow)"/>
355
- <g stroke="var(--palette-amber)" stroke-width="0.7" opacity="0.7">
356
- <line x1="-8" y1="-8" x2="-12" y2="-12"/>
357
- <line x1="8" y1="-8" x2="12" y2="-12"/>
358
- <line x1="8" y1="8" x2="12" y2="12"/>
359
- <line x1="-8" y1="8" x2="-12" y2="12"/>
360
- </g>
361
- <g fill="var(--palette-amber-light)" opacity="0.95">
362
- <rect x="-8.9" y="42.2" width="1.8" height="7.6" rx="0.6"/>
363
- <rect x="-4.9" y="42.4" width="1.8" height="7.2" rx="0.6"/>
364
- <rect x="-0.9" y="42.72" width="1.8" height="6.56" rx="0.6"/>
365
- <rect x="3.1" y="42.48" width="1.8" height="7.04" rx="0.6"/>
366
- <rect x="7.1" y="42.6" width="1.8" height="6.8" rx="0.6"/>
367
- </g>
368
- </g>
369
-
370
- <!-- SAM · (255, 65) r=38 · coordinator · S=0.60 C=0.72 O=0.95 M=0.50 T=0.75 -->
371
- <g transform="translate(255 65)">
372
- <path d="M 0,-38 L 36.14,-11.74 L 22.34,30.74 L -22.34,30.74 L -36.14,-11.74 Z"
373
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.8" opacity="0.45"/>
374
- <path d="M 0,-25 L 23.78,-7.73 L 14.70,20.23 L -14.70,20.23 L -23.78,-7.73 Z"
375
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.25" stroke-dasharray="2 3"/>
376
- <path d="M 0,-13 L 12.36,-4.02 L 7.64,10.52 L -7.64,10.52 L -12.36,-4.02 Z"
377
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.22" stroke-dasharray="1 2"/>
378
- <g stroke="var(--palette-purple-light)" stroke-width="0.55" opacity="0.35">
379
- <line x1="0" y1="0" x2="0" y2="-38"/>
380
- <line x1="0" y1="0" x2="36.14" y2="-11.74"/>
381
- <line x1="0" y1="0" x2="22.34" y2="30.74"/>
382
- <line x1="0" y1="0" x2="-22.34" y2="30.74"/>
383
- <line x1="0" y1="0" x2="-36.14" y2="-11.74"/>
384
- </g>
385
- <path d="M 0,-22.8 L 26.02,-8.45 L 21.23,29.21 L -11.17,15.37 L -27.10,-8.81 Z"
386
- fill="rgba(140,130,200,0.22)" stroke="var(--palette-purple-light)" stroke-width="1" opacity="0.92"/>
387
- <g>
388
- <circle cx="0" cy="-22.8" r="1.6" fill="var(--palette-purple-light)"/>
389
- <circle cx="26.02" cy="-8.45" r="1.6" fill="var(--palette-purple-light)"/>
390
- <circle cx="21.23" cy="29.21" r="1.6" fill="var(--palette-purple-light)"/>
391
- <circle cx="-11.17" cy="15.37" r="1.6" fill="var(--palette-purple-light)"/>
392
- <circle cx="-27.10" cy="-8.81" r="1.6" fill="var(--palette-purple-light)"/>
393
- </g>
394
- <circle r="3.2" fill="var(--palette-purple-light)" filter="url(#relay-glow)"/>
395
- <g fill="var(--palette-purple-light)" opacity="0.9">
396
- <rect x="-8.9" y="38.6" width="1.8" height="4.8" rx="0.6"/>
397
- <rect x="-4.9" y="38.12" width="1.8" height="5.76" rx="0.6"/>
398
- <rect x="-0.9" y="37.2" width="1.8" height="7.6" rx="0.6"/>
399
- <rect x="3.1" y="39" width="1.8" height="4.0" rx="0.6"/>
400
- <rect x="7.1" y="38" width="1.8" height="6.0" rx="0.6"/>
401
- </g>
402
- </g>
403
-
404
- <!-- KAI · (440, 100) r=38 · specialist · S=0.92 C=0.70 O=0.55 M=0.65 T=0.45 -->
405
- <g transform="translate(440 100)">
406
- <path d="M 0,-38 L 36.14,-11.74 L 22.34,30.74 L -22.34,30.74 L -36.14,-11.74 Z"
407
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.8" opacity="0.45"/>
408
- <path d="M 0,-25 L 23.78,-7.73 L 14.70,20.23 L -14.70,20.23 L -23.78,-7.73 Z"
409
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.25" stroke-dasharray="2 3"/>
410
- <path d="M 0,-13 L 12.36,-4.02 L 7.64,10.52 L -7.64,10.52 L -12.36,-4.02 Z"
411
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.22" stroke-dasharray="1 2"/>
412
- <g stroke="var(--palette-purple-light)" stroke-width="0.55" opacity="0.35">
413
- <line x1="0" y1="0" x2="0" y2="-38"/>
414
- <line x1="0" y1="0" x2="36.14" y2="-11.74"/>
415
- <line x1="0" y1="0" x2="22.34" y2="30.74"/>
416
- <line x1="0" y1="0" x2="-22.34" y2="30.74"/>
417
- <line x1="0" y1="0" x2="-36.14" y2="-11.74"/>
418
- </g>
419
- <path d="M 0,-34.96 L 25.3,-8.22 L 12.29,16.91 L -14.52,19.98 L -16.26,-5.28 Z"
420
- fill="rgba(140,130,200,0.22)" stroke="var(--palette-purple-light)" stroke-width="1" opacity="0.92"/>
421
- <g>
422
- <circle cx="0" cy="-34.96" r="1.6" fill="var(--palette-purple-light)"/>
423
- <circle cx="25.3" cy="-8.22" r="1.6" fill="var(--palette-purple-light)"/>
424
- <circle cx="12.29" cy="16.91" r="1.6" fill="var(--palette-purple-light)"/>
425
- <circle cx="-14.52" cy="19.98" r="1.6" fill="var(--palette-purple-light)"/>
426
- <circle cx="-16.26" cy="-5.28" r="1.6" fill="var(--palette-purple-light)"/>
427
- </g>
428
- <circle r="3.2" fill="var(--palette-purple-light)" filter="url(#relay-glow)"/>
429
- <g fill="var(--palette-purple-light)" opacity="0.9">
430
- <rect x="-8.9" y="37.32" width="1.8" height="7.36" rx="0.6"/>
431
- <rect x="-4.9" y="38.2" width="1.8" height="5.6" rx="0.6"/>
432
- <rect x="-0.9" y="38.8" width="1.8" height="4.4" rx="0.6"/>
433
- <rect x="3.1" y="38.4" width="1.8" height="5.2" rx="0.6"/>
434
- <rect x="7.1" y="39.2" width="1.8" height="3.6" rx="0.6"/>
435
- </g>
436
- </g>
437
-
438
- <!-- IRIS · (165, 245) r=40 · specialist · S=0.90 C=0.85 O=0.65 M=0.92 T=0.70 -->
439
- <g transform="translate(165 245)">
440
- <path d="M 0,-40 L 38.04,-12.36 L 23.52,32.36 L -23.52,32.36 L -38.04,-12.36 Z"
441
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.8" opacity="0.45"/>
442
- <path d="M 0,-27 L 25.68,-8.34 L 15.88,21.84 L -15.88,21.84 L -25.68,-8.34 Z"
443
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.25" stroke-dasharray="2 3"/>
444
- <path d="M 0,-13 L 12.36,-4.02 L 7.64,10.52 L -7.64,10.52 L -12.36,-4.02 Z"
445
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.4" opacity="0.22" stroke-dasharray="1 2"/>
446
- <g stroke="var(--palette-purple-light)" stroke-width="0.55" opacity="0.35">
447
- <line x1="0" y1="0" x2="0" y2="-40"/>
448
- <line x1="0" y1="0" x2="38.04" y2="-12.36"/>
449
- <line x1="0" y1="0" x2="23.52" y2="32.36"/>
450
- <line x1="0" y1="0" x2="-23.52" y2="32.36"/>
451
- <line x1="0" y1="0" x2="-38.04" y2="-12.36"/>
452
- </g>
453
- <path d="M 0,-36 L 32.33,-10.51 L 15.29,21.03 L -21.64,29.77 L -26.63,-8.65 Z"
454
- fill="rgba(140,130,200,0.22)" stroke="var(--palette-purple-light)" stroke-width="1" opacity="0.92"/>
455
- <g>
456
- <circle cx="0" cy="-36" r="1.7" fill="var(--palette-purple-light)"/>
457
- <circle cx="32.33" cy="-10.51" r="1.7" fill="var(--palette-purple-light)"/>
458
- <circle cx="15.29" cy="21.03" r="1.7" fill="var(--palette-purple-light)"/>
459
- <circle cx="-21.64" cy="29.77" r="1.7" fill="var(--palette-purple-light)"/>
460
- <circle cx="-26.63" cy="-8.65" r="1.7" fill="var(--palette-purple-light)"/>
461
- </g>
462
- <circle r="3.4" fill="var(--palette-purple-light)" filter="url(#relay-glow)"/>
463
- <g fill="var(--palette-purple-light)" opacity="0.9">
464
- <rect x="-8.9" y="40.4" width="1.8" height="7.2" rx="0.6"/>
465
- <rect x="-4.9" y="40.6" width="1.8" height="6.8" rx="0.6"/>
466
- <rect x="-0.9" y="41.4" width="1.8" height="5.2" rx="0.6"/>
467
- <rect x="3.1" y="40.32" width="1.8" height="7.36" rx="0.6"/>
468
- <rect x="7.1" y="41.2" width="1.8" height="5.6" rx="0.6"/>
469
- </g>
470
- </g>
471
-
472
- <!-- ALEX · (425, 255) r=36 · departed, ghost · S=0.80 C=0.78 O=0.68 M=0.95 T=0.90 -->
473
- <g transform="translate(425 255)" opacity="0.7">
474
- <path d="M 0,-36 L 34.24,-11.12 L 21.17,29.12 L -21.17,29.12 L -34.24,-11.12 Z"
475
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.35" stroke-dasharray="2 3"/>
476
- <path d="M 0,-24 L 22.82,-7.42 L 14.11,19.42 L -14.11,19.42 L -22.82,-7.42 Z"
477
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.35" opacity="0.22" stroke-dasharray="1 2"/>
478
- <path d="M 0,-12 L 11.41,-3.71 L 7.06,9.71 L -7.06,9.71 L -11.41,-3.71 Z"
479
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.35" opacity="0.2" stroke-dasharray="1 2"/>
480
- <g stroke="var(--palette-purple-light)" stroke-width="0.5" opacity="0.3" stroke-dasharray="1 2">
481
- <line x1="0" y1="0" x2="0" y2="-36"/>
482
- <line x1="0" y1="0" x2="34.24" y2="-11.12"/>
483
- <line x1="0" y1="0" x2="21.17" y2="29.12"/>
484
- <line x1="0" y1="0" x2="-21.17" y2="29.12"/>
485
- <line x1="0" y1="0" x2="-34.24" y2="-11.12"/>
486
- </g>
487
- <path d="M 0,-28.8 L 26.70,-8.68 L 14.39,19.81 L -20.11,27.67 L -30.81,-10.01 Z"
488
- fill="none" stroke="var(--palette-purple-light)" stroke-width="0.9" opacity="0.75" stroke-dasharray="2.5 2"/>
489
- <g>
490
- <circle cx="0" cy="-28.8" r="1.8" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.75"/>
491
- <circle cx="26.70" cy="-8.68" r="1.8" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.75"/>
492
- <circle cx="14.39" cy="19.81" r="1.8" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.75"/>
493
- <circle cx="-20.11" cy="27.67" r="1.8" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.75"/>
494
- <circle cx="-30.81" cy="-10.01" r="1.8" fill="none" stroke="var(--palette-purple-light)" stroke-width="0.7" opacity="0.75"/>
495
- </g>
496
- <line x1="-2.8" y1="-2.8" x2="2.8" y2="2.8" stroke="var(--palette-purple-light)" stroke-width="0.9" opacity="0.75"/>
497
- <line x1="-2.8" y1="2.8" x2="2.8" y2="-2.8" stroke="var(--palette-purple-light)" stroke-width="0.9" opacity="0.75"/>
498
- <g stroke="var(--palette-purple-light)" stroke-width="0.6" stroke-dasharray="1 1" opacity="0.75" fill="none">
499
- <rect x="-8.9" y="36.8" width="1.8" height="6.4" rx="0.6"/>
500
- <rect x="-4.9" y="36.88" width="1.8" height="6.24" rx="0.6"/>
501
- <rect x="-0.9" y="37.28" width="1.8" height="5.44" rx="0.6"/>
502
- <rect x="3.1" y="36.2" width="1.8" height="7.6" rx="0.6"/>
503
- <rect x="7.1" y="36.4" width="1.8" height="7.2" rx="0.6"/>
504
- </g>
505
- </g>
506
- </svg>`,
507
- ranger: `<svg class="product-diagram" viewBox="0 0 511 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" aria-label="A dense fingerprint whorl with a wedge cut out of the upper right; the matching piece floats above, carrying the ridge segments that complete the pattern.">
508
- <defs>
509
- <radialGradient id="ranger-whorl-glow" cx="50%" cy="50%" r="50%">
510
- <stop offset="0%" stop-color="var(--palette-amber)" stop-opacity="0.18"/>
511
- <stop offset="60%" stop-color="var(--palette-amber)" stop-opacity="0.05"/>
512
- <stop offset="100%" stop-color="var(--palette-amber)" stop-opacity="0"/>
513
- </radialGradient>
514
- </defs>
515
-
516
- <!-- FINGERPRINT WHORL — "match by substance."
517
- A 12-ridge whorl whose upper-right wedge is absent. The
518
- piece floats above and carries the 12 matching ridge
519
- segments, each continuing its brief-side ridge at identical
520
- curvature. Specificity is carried by minutiae: three
521
- bifurcations, one termination, four island-fragments, and
522
- fifteen pore-dots. Only a piece carrying THIS substance
523
- could complete the pattern. -->
524
-
525
- <!-- Atmospheric glow behind the whorl -->
526
- <circle cx="175" cy="165" r="140" fill="url(#ranger-whorl-glow)"/>
527
-
528
- <!-- 12 concentric ridges, wedge absent 300°→360°.
529
- Ridge centres offset 1-3px in a zigzag for organic whorl.
530
- Opacity ramps from faint outer (0.22) to brightest core. -->
531
-
532
- <!-- Ridge 12 — outermost -->
533
- <path d="M 303,165 A 128 128 0 1 1 239,54.15"
534
- fill="none" stroke="var(--palette-amber)" stroke-width="0.9" opacity="0.22" stroke-linecap="round"/>
535
- <!-- Ridge 11 -->
536
- <path d="M 294,164 A 118 118 0 1 1 235,61.81"
537
- fill="none" stroke="var(--palette-amber)" stroke-width="0.9" opacity="0.3" stroke-linecap="round"/>
538
- <!-- Ridge 10 · BIFURCATION at ~130° -->
539
- <path d="M 285,163 A 108 108 0 1 1 231,69.47"
540
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.38" stroke-linecap="round"/>
541
- <path d="M 107.58,245.75 Q 103,249 99.71,251.5"
542
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.38" stroke-linecap="round"/>
543
- <!-- Ridge 9 · dashed rhythm -->
544
- <path d="M 275,166 A 98 98 0 1 1 226,81.13"
545
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.48"
546
- stroke-dasharray="3 2.5" stroke-linecap="round"/>
547
- <!-- Ridge 8 · BIFURCATION at ~165° -->
548
- <path d="M 264,167 A 88 88 0 1 1 220,90.79"
549
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.55" stroke-linecap="round"/>
550
- <path d="M 90.99,189.78 Q 84,190 78,188"
551
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.55" stroke-linecap="round"/>
552
- <!-- Ridge 7 -->
553
- <path d="M 252,167 A 78 78 0 1 1 213,99.45"
554
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.62" stroke-linecap="round"/>
555
- <!-- Ridge 6 · BIFURCATION at ~260° -->
556
- <path d="M 241,166 A 68 68 0 1 1 207,107.11"
557
- fill="none" stroke="var(--palette-amber)" stroke-width="1.05" opacity="0.7" stroke-linecap="round"/>
558
- <path d="M 161.19,99.03 Q 160,90 158.55,84.27"
559
- fill="none" stroke="var(--palette-amber)" stroke-width="1.05" opacity="0.7" stroke-linecap="round"/>
560
- <!-- Ridge 5 · dashed rhythm -->
561
- <path d="M 231,164 A 58 58 0 1 1 202,113.77"
562
- fill="none" stroke="var(--palette-amber)" stroke-width="1.05" opacity="0.78"
563
- stroke-dasharray="3 2.5" stroke-linecap="round"/>
564
- <!-- Ridge 4 · TERMINATION at ~220° — two segments with a tiny gap -->
565
- <path d="M 222,163 A 48 48 0 1 1 134.69,135.45"
566
- fill="none" stroke="var(--palette-amber)" stroke-width="1.1" opacity="0.82" stroke-linecap="round"/>
567
- <path d="M 140.06,129.06 A 48 48 0 0 1 198,121.43"
568
- fill="none" stroke="var(--palette-amber)" stroke-width="1.1" opacity="0.82" stroke-linecap="round"/>
569
- <circle cx="134.69" cy="135.45" r="0.85" fill="var(--palette-amber)" opacity="0.7"/>
570
- <circle cx="140.06" cy="129.06" r="0.85" fill="var(--palette-amber)" opacity="0.7"/>
571
- <!-- Ridge 3 -->
572
- <path d="M 213,164 A 38 38 0 1 1 194,131.09"
573
- fill="none" stroke="var(--palette-amber)" stroke-width="1.15" opacity="0.88" stroke-linecap="round"/>
574
- <!-- Ridge 2 -->
575
- <path d="M 204,166 A 28 28 0 1 1 190,141.75"
576
- fill="none" stroke="var(--palette-amber)" stroke-width="1.2" opacity="0.94" stroke-linecap="round"/>
577
- <!-- Ridge 1 · core — brightest -->
578
- <path d="M 193,165 A 18 18 0 1 1 184,149.41"
579
- fill="none" stroke="var(--palette-amber-light)" stroke-width="1.35" opacity="1" stroke-linecap="round"/>
580
-
581
- <!-- ISLAND RIDGES — 4 floating arc fragments -->
582
- <path d="M 72.73,141.37 A 105 105 0 0 1 78.29,123.94"
583
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.55" stroke-linecap="round"/>
584
- <path d="M 121.57,198.39 A 63 63 0 0 1 117.46,190.62"
585
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.6" stroke-linecap="round"/>
586
- <path d="M 193.71,253.03 A 90 90 0 0 1 182.84,254.66"
587
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.55" stroke-linecap="round"/>
588
- <path d="M 155.46,118.99 A 50 50 0 0 1 160.37,117.19"
589
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.6" stroke-linecap="round"/>
590
-
591
- <!-- PORE DOTS — 15 amber flecks distributed through the ridges -->
592
- <g fill="var(--palette-amber)">
593
- <circle cx="143.5" cy="219.56" r="0.95" opacity="0.58"/>
594
- <circle cx="180.73" cy="197.5" r="0.95" opacity="0.58"/>
595
- <circle cx="103.76" cy="105.22" r="0.95" opacity="0.5"/>
596
- <circle cx="152.35" cy="161.01" r="0.95" opacity="0.65"/>
597
- <circle cx="247.65" cy="251.56" r="0.95" opacity="0.48"/>
598
- <circle cx="175" cy="200" r="0.9" opacity="0.62"/>
599
- <circle cx="142.86" cy="203.3" r="0.9" opacity="0.55"/>
600
- <circle cx="212.5" cy="229.95" r="0.9" opacity="0.55"/>
601
- <circle cx="247.77" cy="226.06" r="0.9" opacity="0.48"/>
602
- <circle cx="125.85" cy="130.59" r="0.9" opacity="0.58"/>
603
- <circle cx="96.22" cy="151.11" r="0.9" opacity="0.5"/>
604
- <circle cx="117.5" cy="65.41" r="0.85" opacity="0.42"/>
605
- <circle cx="166.45" cy="188.49" r="0.9" opacity="0.7"/>
606
- <circle cx="110.05" cy="127.5" r="0.9" opacity="0.55"/>
607
- <circle cx="132.71" cy="180.39" r="0.9" opacity="0.62"/>
608
- </g>
609
-
610
- <!-- Central pearl — origin of the whorl -->
611
- <circle cx="175" cy="165" r="3.8" fill="var(--palette-amber)"/>
612
- <circle cx="173.5" cy="163.5" r="1.3" fill="var(--palette-amber-light)"/>
613
-
614
- <!-- Cut-edge markers — outer + innermost -->
615
- <circle cx="303" cy="165" r="2.2" fill="var(--palette-amber)"/>
616
- <circle cx="239" cy="54.15" r="2.2" fill="var(--palette-amber)"/>
617
- <circle cx="193" cy="165" r="1.3" fill="var(--palette-amber)" opacity="0.8"/>
618
- <circle cx="184" cy="149.41" r="1.3" fill="var(--palette-amber)" opacity="0.8"/>
619
-
620
- <!-- PIECE — the missing wedge's 12 matching ridge segments,
621
- floating upper-right. Translated (130,-40) drifting toward
622
- the gap. Ghost centre + matching cut-edge markers. -->
623
- <g transform="translate(130 -40)">
624
- <circle cx="175" cy="165" r="140" fill="url(#ranger-whorl-glow)" opacity="0.5"/>
625
- <circle cx="175" cy="165" r="3.4" fill="none" stroke="var(--palette-amber)" stroke-width="0.9"
626
- stroke-dasharray="1.5 1.8" opacity="0.55"/>
627
-
628
- <!-- 12 matching ridge segments -->
629
- <path d="M 239,54.15 A 128 128 0 0 1 303,165"
630
- fill="none" stroke="var(--palette-amber)" stroke-width="0.9" opacity="0.28" stroke-linecap="round"/>
631
- <path d="M 235,61.81 A 118 118 0 0 1 294,164"
632
- fill="none" stroke="var(--palette-amber)" stroke-width="0.9" opacity="0.36" stroke-linecap="round"/>
633
- <path d="M 231,69.47 A 108 108 0 0 1 285,163"
634
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.44" stroke-linecap="round"/>
635
- <path d="M 226,81.13 A 98 98 0 0 1 275,166"
636
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.54"
637
- stroke-dasharray="3 2.5" stroke-linecap="round"/>
638
- <path d="M 220,90.79 A 88 88 0 0 1 264,167"
639
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.62" stroke-linecap="round"/>
640
- <path d="M 213,99.45 A 78 78 0 0 1 252,167"
641
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.68" stroke-linecap="round"/>
642
- <path d="M 207,107.11 A 68 68 0 0 1 241,166"
643
- fill="none" stroke="var(--palette-amber)" stroke-width="1.05" opacity="0.76" stroke-linecap="round"/>
644
- <path d="M 202,113.77 A 58 58 0 0 1 231,164"
645
- fill="none" stroke="var(--palette-amber)" stroke-width="1.05" opacity="0.82"
646
- stroke-dasharray="3 2.5" stroke-linecap="round"/>
647
- <path d="M 198,121.43 A 48 48 0 0 1 222,163"
648
- fill="none" stroke="var(--palette-amber)" stroke-width="1.1" opacity="0.88" stroke-linecap="round"/>
649
- <path d="M 194,131.09 A 38 38 0 0 1 213,164"
650
- fill="none" stroke="var(--palette-amber)" stroke-width="1.15" opacity="0.92" stroke-linecap="round"/>
651
- <path d="M 190,141.75 A 28 28 0 0 1 204,166"
652
- fill="none" stroke="var(--palette-amber)" stroke-width="1.2" opacity="0.96" stroke-linecap="round"/>
653
- <path d="M 184,149.41 A 18 18 0 0 1 193,165"
654
- fill="none" stroke="var(--palette-amber-light)" stroke-width="1.35" opacity="1" stroke-linecap="round"/>
655
-
656
- <!-- Piece's own minutiae: bifurcation + two islands + 5 pore dots -->
657
- <path d="M 232.57,99.59 Q 236,95 237.56,88.2"
658
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.62" stroke-linecap="round"/>
659
- <path d="M 244.63,116.23 A 85 85 0 0 1 251.35,127.76"
660
- fill="none" stroke="var(--palette-amber)" stroke-width="1" opacity="0.65" stroke-linecap="round"/>
661
- <path d="M 245.71,94.29 A 100 100 0 0 1 251.6,100.72"
662
- fill="none" stroke="var(--palette-amber)" stroke-width="0.95" opacity="0.55" stroke-linecap="round"/>
663
- <g fill="var(--palette-amber)">
664
- <circle cx="238.22" cy="128.5" r="0.95" opacity="0.58"/>
665
- <circle cx="260" cy="141" r="0.95" opacity="0.52"/>
666
- <circle cx="210.36" cy="129.64" r="0.9" opacity="0.62"/>
667
- <circle cx="259.57" cy="134.22" r="0.9" opacity="0.48"/>
668
- <circle cx="197.98" cy="145.72" r="0.9" opacity="0.68"/>
669
- </g>
670
-
671
- <!-- Matching cut-edge markers -->
672
- <circle cx="239" cy="54.15" r="2.2" fill="var(--palette-amber)"/>
673
- <circle cx="303" cy="165" r="2.2" fill="var(--palette-amber)"/>
674
- <circle cx="184" cy="149.41" r="1.3" fill="var(--palette-amber)" opacity="0.8"/>
675
- <circle cx="193" cy="165" r="1.3" fill="var(--palette-amber)" opacity="0.8"/>
676
- </g>
677
- </svg>`,
678
- };
679
-
680
- export const ProductIllustration = ({
681
- variant,
682
- }: {
683
- variant: ProductVariant;
684
- }): JSX.Element => (
685
- <div
686
- className="h-full w-full [&>svg]:block [&>svg]:h-full [&>svg]:w-full"
687
- dangerouslySetInnerHTML={{ __html: PRODUCT_SVGS[variant] }}
688
- />
689
- );