import type { CSSProperties } from "react";
/**
* WebSensor brand mark: a dark rounded tile with a W-shaped pulse — grey until the detected change,
* signal green after it, ending in the sensor reading. The same geometry is used for the favicon
* (app/icon.svg), the nav wordmark, the OpenGraph images and the PWA icons (public/icons/*).
*/
export const BRAND = {
bg: "#0a0e15",
fg: "#c9d1e0",
signal: "#22d3a5",
line: "#2d394e",
muted: "#a3adc2",
subtle: "#6b7591",
} as const;
export function Mark({ size = 20, className = "", style, title = "WebSensor" }: { size?: number; className?: string; style?: CSSProperties; title?: string }) {
return (
);
}
/** Large decorative pulse used as the OpenGraph backdrop (no tile, stroke only). */
export function PulseBackdrop({ width, height, opacity = 0.16 }: { width: number; height: number; opacity?: number }) {
const y0 = height * 0.72;
const d = `M-20 ${y0} H${width * 0.28} L${width * 0.36} ${y0 - height * 0.42} L${width * 0.47} ${y0 + height * 0.06} L${width * 0.56} ${y0 - height * 0.18} L${width * 0.63} ${y0} H${width * 0.74} L${width * 0.8} ${y0 - height * 0.62} L${width * 0.86} ${y0} H${width + 20}`;
return (
);
}