/* TransDecode logo — round 3.
Eight fresh, distinct mark directions. The wordmark stays the same;
only the mark swaps. All marks are designed to read at 18px favicon size. */
/* Wordmark — confident lowercase, slight weight contrast on "de". */
function Wordmark({ size = 30, color = "var(--ink)", mono = false, accent = "var(--signal)" }) {
const fontSize = size * 0.62;
return (
trans
decode
);
}
/* ─────────────── Marks (round 3) ─────────────── */
// V1 — TD Ligature. T-stem doubles as D-spine; D-bowl extends right.
// Bold, monogram, serious.
function MarkLigature({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V2 — Pulse. A precise horizontal line with one engineered blip.
// Reads as monitoring, live data, decoded signal.
function MarkPulse({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V3 — Vector. A precise rightward arrow built from offset chevrons.
function MarkVector({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V4 — Diamond stack. Two rotated squares, outer outline + inner solid.
// Yields a refined yield-sign / engineered reference.
function MarkDiamond({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V5 — Double slash. Two bold parallel slashes — road markings, decoded data.
function MarkSlash({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V6 — Network node. Three connected dots forming a triangle, one accent.
function MarkNode({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V7 — Aperture. Circle bisected by a lane bar; signal dot at center.
function MarkAperture({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V8 — Decoded grid. A 3×3 pixel grid with one cell highlighted — decoding moment.
function MarkGrid({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
const cells = [
[0,0,1],
[1,2,0],
[0,1,1],
];
return (
);
}
// V9 — Compass quad. 4 directional arrows around a tight center.
function MarkCompass({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// V10 — Half-circle merge. Two opposing half-circles forming a yin-flow shape.
function MarkMerge({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
return (
);
}
// None — wordmark only.
function MarkNone() { return null; }
const MARKS = {
ligature: MarkLigature,
pulse: MarkPulse,
vector: MarkVector,
diamond: MarkDiamond,
slash: MarkSlash,
node: MarkNode,
aperture: MarkAperture,
grid: MarkGrid,
compass: MarkCompass,
merge: MarkMerge,
none: MarkNone,
};
/* ─────────────── Composite ─────────────── */
function Logo({ size = 30, mono = false, color, variant = "ligature" }) {
const ink = color || "var(--ink)";
const Mark = MARKS[variant] || MARKS.ligature;
return (
{variant !== "none" && (
)}
);
}
function LogoMark({ size = 32, color = "var(--ink)", accent = "var(--signal)", variant = "ligature" }) {
const Mark = MARKS[variant] || MARKS.ligature;
return ;
}
window.Logo = Logo;
window.LogoMark = LogoMark;
window.MARKS = MARKS;