@heyramzi/ui 2.11.0 → 2.11.2

package/dist/editor/slash-items.js

@@ -1,104 +1,92 @@
 import { TextB, TextHOne, TextHTwo, TextHThree, ListBullets, ListNumbers, Quotes, CodeBlock, Minus, ImageSquare, Paragraph, VideoCamera, ListChecks, Table } from "phosphor-svelte";
+/** Every slash command for a preset, filtered by the text typed after the `/`. */
 export function buildSlashItems(editor, query, options) {
-    const run = ()=>editor.chain().focus();
-    const full = options.preset === "full";
-    const allItems = [
-        {
-            label: "Heading 1",
-            description: "Page title",
-            icon: TextHOne,
-            command: ()=>run().toggleHeading({
-                    level: 1
-                }).run()
-        },
-        {
-            label: "Heading 2",
-            description: "Section heading",
-            icon: TextHTwo,
-            command: ()=>run().toggleHeading({
-                    level: 2
-                }).run()
-        },
-        {
-            label: "Heading 3",
-            description: "Subsection heading",
-            icon: TextHThree,
-            command: ()=>run().toggleHeading({
-                    level: 3
-                }).run()
-        },
-        {
-            label: "Bullet List",
-            description: "Unordered list",
-            icon: ListBullets,
-            command: ()=>run().toggleBulletList().run()
-        },
-        {
-            label: "Ordered List",
-            description: "Numbered list",
-            icon: ListNumbers,
-            command: ()=>run().toggleOrderedList().run()
-        },
-        ...full ? [
-            {
-                label: "Checklist",
-                description: "Tasks with checkboxes",
-                icon: ListChecks,
-                command: ()=>run().toggleTaskList().run()
-            },
-            {
-                label: "Table",
-                description: "Rows and columns",
-                icon: Table,
-                command: ()=>run().insertTable({
-                        rows: 3,
-                        cols: 3,
-                        withHeaderRow: true
-                    }).run()
-            }
-        ] : [],
-        {
-            label: "Quote",
-            description: "Blockquote",
-            icon: Quotes,
-            command: ()=>run().toggleBlockquote().run()
-        },
-        {
-            label: "Code Block",
-            description: "Code snippet",
-            icon: CodeBlock,
-            command: ()=>run().toggleCodeBlock().run()
-        },
-        {
-            label: "Divider",
-            description: "Horizontal rule",
-            icon: Minus,
-            command: ()=>run().setHorizontalRule().run()
-        },
-        ...full ? [
-            {
-                label: "Image",
-                description: "Insert from URL",
-                icon: ImageSquare,
-                command: options.insertImage
-            }
-        ] : [],
-        ...full ? [
-            {
-                label: "YouTube",
-                description: "Insert a video by URL",
-                icon: VideoCamera,
-                command: options.insertYoutube
-            }
-        ] : [],
-        {
-            label: "Paragraph",
-            description: "Plain text block",
-            icon: Paragraph,
-            command: ()=>run().setParagraph().run()
-        }
-    ];
-    if (!query) return allItems;
-    const q = query.toLowerCase();
-    return allItems.filter((item)=>item.label.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
+	const run = () => editor.chain().focus();
+	const full = options.preset === "full";
+	const allItems = [
+		{
+			label: "Heading 1",
+			description: "Page title",
+			icon: TextHOne,
+			command: () => run().toggleHeading({ level: 1 }).run()
+		},
+		{
+			label: "Heading 2",
+			description: "Section heading",
+			icon: TextHTwo,
+			command: () => run().toggleHeading({ level: 2 }).run()
+		},
+		{
+			label: "Heading 3",
+			description: "Subsection heading",
+			icon: TextHThree,
+			command: () => run().toggleHeading({ level: 3 }).run()
+		},
+		{
+			label: "Bullet List",
+			description: "Unordered list",
+			icon: ListBullets,
+			command: () => run().toggleBulletList().run()
+		},
+		{
+			label: "Ordered List",
+			description: "Numbered list",
+			icon: ListNumbers,
+			command: () => run().toggleOrderedList().run()
+		},
+		...full ? [{
+			label: "Checklist",
+			description: "Tasks with checkboxes",
+			icon: ListChecks,
+			command: () => run().toggleTaskList().run()
+		}, {
+			label: "Table",
+			description: "Rows and columns",
+			icon: Table,
+			command: () => run().insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true
+			}).run()
+		}] : [],
+		{
+			label: "Quote",
+			description: "Blockquote",
+			icon: Quotes,
+			command: () => run().toggleBlockquote().run()
+		},
+		{
+			label: "Code Block",
+			description: "Code snippet",
+			icon: CodeBlock,
+			command: () => run().toggleCodeBlock().run()
+		},
+		{
+			label: "Divider",
+			description: "Horizontal rule",
+			icon: Minus,
+			command: () => run().setHorizontalRule().run()
+		},
+		...full ? [{
+			label: "Image",
+			description: "Insert from URL",
+			icon: ImageSquare,
+			command: options.insertImage
+		}] : [],
+		...full ? [{
+			label: "YouTube",
+			description: "Insert a video by URL",
+			icon: VideoCamera,
+			command: options.insertYoutube
+		}] : [],
+		{
+			label: "Paragraph",
+			description: "Plain text block",
+			icon: Paragraph,
+			command: () => run().setParagraph().run()
+		}
+	];
+	if (!query) return allItems;
+	const q = query.toLowerCase();
+	return allItems.filter((item) => item.label.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
 }

package/dist/editor/youtube-url.js

@@ -1,27 +1,32 @@
+// No markdown-it here, so the editor can import it without the markdown engine.
 export const YOUTUBE_ID_RE = /^[A-Za-z0-9_-]{11}$/;
 function toUrl(url) {
-    try {
-        return new URL(url);
-    } catch  {
-        return null;
-    }
+	try {
+		return new URL(url);
+	} catch {
+		return null;
+	}
 }
 function videoIdOf(parsed) {
-    const host = parsed.hostname.replace(/^www\./, "");
-    if (host === "youtu.be") return parsed.pathname.slice(1);
-    if (host !== "youtube.com" && host !== "m.youtube.com") return null;
-    if (parsed.pathname === "/watch") return parsed.searchParams.get("v");
-    if (parsed.pathname.startsWith("/embed/")) return parsed.pathname.slice("/embed/".length);
-    return null;
+	const host = parsed.hostname.replace(/^www\./, "");
+	if (host === "youtu.be") return parsed.pathname.slice(1);
+	if (host !== "youtube.com" && host !== "m.youtube.com") return null;
+	if (parsed.pathname === "/watch") return parsed.searchParams.get("v");
+	if (parsed.pathname.startsWith("/embed/")) return parsed.pathname.slice("/embed/".length);
+	return null;
 }
+/**
+* Reads youtube.com/watch?v=ID, youtu.be/ID and youtube.com/embed/ID. A `t`
+* param in seconds becomes `start`.
+*/
 export function parseYoutubeUrl(url) {
-    const parsed = toUrl(url);
-    if (!parsed) return null;
-    const videoId = videoIdOf(parsed);
-    if (!videoId || !YOUTUBE_ID_RE.test(videoId)) return null;
-    const t = parseInt(parsed.searchParams.get("t") ?? "", 10);
-    return {
-        videoId,
-        start: Number.isFinite(t) && t > 0 ? t : 0
-    };
+	const parsed = toUrl(url);
+	if (!parsed) return null;
+	const videoId = videoIdOf(parsed);
+	if (!videoId || !YOUTUBE_ID_RE.test(videoId)) return null;
+	const t = parseInt(parsed.searchParams.get("t") ?? "", 10);
+	return {
+		videoId,
+		start: Number.isFinite(t) && t > 0 ? t : 0
+	};
 }

package/dist/effects/animated-beam/path-calculator.svelte.js

@@ -1,42 +1,47 @@
 function anchorX(rect, containerLeft, anchor, offset) {
-    const left = rect.left - containerLeft;
-    if (anchor === "left") return left + offset;
-    if (anchor === "right") return left + rect.width + offset;
-    return left + rect.width / 2 + offset;
+	const left = rect.left - containerLeft;
+	if (anchor === "left") return left + offset;
+	if (anchor === "right") return left + rect.width + offset;
+	return left + rect.width / 2 + offset;
 }
 export function usePathCalculator() {
-    let pathD = $state("");
-    let svgDimensions = $state({
-        width: 0,
-        height: 0
-    });
-    function calculatePath(containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, fromAnchor = "center", toAnchor = "center") {
-        if (!containerRef || !fromRef || !toRef) return;
-        const containerRect = containerRef.getBoundingClientRect();
-        const rectA = fromRef.getBoundingClientRect();
-        const rectB = toRef.getBoundingClientRect();
-        svgDimensions = {
-            width: containerRect.width,
-            height: containerRect.height
-        };
-        const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
-        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-        const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
-        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
-        const span = Math.abs(endX - startX);
-        const handle = Math.max(span * 0.5, 24);
-        const direction = endX >= startX ? 1 : -1;
-        const c1x = startX + handle * direction;
-        const c2x = endX - handle * direction;
-        pathD = `M ${startX},${startY} C ${c1x},${startY - curvature} ${c2x},${endY - curvature} ${endX},${endY}`;
-    }
-    return {
-        get pathD () {
-            return pathD;
-        },
-        get svgDimensions () {
-            return svgDimensions;
-        },
-        calculatePath
-    };
+	let pathD = $state("");
+	let svgDimensions = $state({
+		width: 0,
+		height: 0
+	});
+	function calculatePath(containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, fromAnchor = "center", toAnchor = "center") {
+		if (!containerRef || !fromRef || !toRef) return;
+		const containerRect = containerRef.getBoundingClientRect();
+		const rectA = fromRef.getBoundingClientRect();
+		const rectB = toRef.getBoundingClientRect();
+		svgDimensions = {
+			width: containerRect.width,
+			height: containerRect.height
+		};
+		const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
+		const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+		const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
+		const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+		// A cubic with horizontal handles, not a quadratic through a raised midpoint.
+		// The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
+		// the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.
+		// Handles along the axis of travel make each beam leave and arrive perpendicular to its anchor, so a fan converges at the anchor and nowhere else.
+		// `curvature` still bows the middle, and zero still draws a straight line between two anchors at the same height.
+		const span = Math.abs(endX - startX);
+		const handle = Math.max(span * .5, 24);
+		const direction = endX >= startX ? 1 : -1;
+		const c1x = startX + handle * direction;
+		const c2x = endX - handle * direction;
+		pathD = `M ${startX},${startY} C ${c1x},${startY - curvature} ${c2x},${endY - curvature} ${endX},${endY}`;
+	}
+	return {
+		get pathD() {
+			return pathD;
+		},
+		get svgDimensions() {
+			return svgDimensions;
+		},
+		calculatePath
+	};
 }

package/dist/effects/animated-beam/types.js

@@ -0,0 +1 @@
+export {};

package/dist/effects/border-beam/css.js

@@ -1,6 +1,9 @@
 import { lineBloomGradient, lineBorderGradient, lineInnerGradient, mdBorderGradient, mdInnerGradient, smBorderGradient, smInnerGradient } from "./presets.js";
+// WHY: shared rule blocks every variant emits so paused/reduced-motion/
+// isolation behavior stays consistent across sm/md/line. Inlined into each
+// variant's template literal at the end so all selectors reference its id.
 function commonHostRules(id) {
-    return `
+	return `
 [data-beam="${id}"][data-paused],
 [data-beam="${id}"][data-paused]::before,
 [data-beam="${id}"][data-paused]::after,
@@ -19,8 +22,11 @@ function commonHostRules(id) {
   [data-beam="${id}"][data-fading] { --beam-opacity-${id}: 0; }
 }`;
 }
+// WHY: sm and md share property registrations, host rules, and the spin/ fade keyframe set verbatim.
+// Pulling them into helpers removes ~30 lines of duplication per variant and keeps the two in lockstep.
+// Line variant has its own header (more @property entries, different keyframes) so it keeps its inline body.
 function spinHeader(id, borderRadius, duration) {
-    return `
+	return `
 @property --beam-angle-${id} { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
 @property --beam-opacity-${id} { syntax: "<number>"; initial-value: 0; inherits: true; }
 
@@ -30,31 +36,35 @@ function spinHeader(id, borderRadius, duration) {
 `;
 }
 function spinKeyframes(id) {
-    return `
+	return `
 @keyframes beam-spin-${id} { to { --beam-angle-${id}: 360deg; } }
 @keyframes beam-fade-in-${id} { to { --beam-opacity-${id}: 1; } }
 @keyframes beam-fade-out-${id} { from { --beam-opacity-${id}: 1; } to { --beam-opacity-${id}: 0; } }
 `;
 }
+// WHY static colours keep a filter: only the hue rotation drifts a fixed palette off-brand.
+// Dropping brightness and saturation with it left the ring duller than the bloom beside it, which keeps both.
 function hueShift(id, staticColors, hueRange, brightness, saturation) {
-    const grade = `brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)})`;
-    if (staticColors) return {
-        decl: `filter: ${grade};`,
-        keyframes: ""
-    };
-    const filter = (deg)=>`filter: hue-rotate(${deg >= 0 ? "" : "-"}${Math.abs(deg)}deg) ${grade};`;
-    return {
-        decl: `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`,
-        keyframes: `
+	const grade = `brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)})`;
+	if (staticColors) return {
+		decl: `filter: ${grade};`,
+		keyframes: ""
+	};
+	const filter = (deg) => `filter: hue-rotate(${deg >= 0 ? "" : "-"}${Math.abs(deg)}deg) ${grade};`;
+	return {
+		decl: `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`,
+		keyframes: `
 @keyframes beam-hue-shift-${id} {
   0% { ${filter(-hueRange)} }
   50% { ${filter(hueRange)} }
   100% { ${filter(-hueRange)} }
 }`
-    };
+	};
 }
+// WHY: sm and md emit the same bloom layer CSS (only the gradient differs).
+// Single helper so a future bloom tweak doesn't have to be applied twice.
 function bloomBlock(o) {
-    return `
+	return `
 [data-beam="${o.id}"] [data-beam-bloom] {
   display: none; position: absolute; inset: 0;
   border-radius: ${o.innerR}px; clip-path: inset(0 round ${o.borderRadius}px);
@@ -74,21 +84,24 @@ function bloomBlock(o) {
   opacity: calc(var(--beam-opacity-${o.id}) * ${o.bloomOpacity.toFixed(2)} * var(--beam-strength, 1));
 }`;
 }
+// WHY every variant writes its conic sweep out in full instead of holding it
+// in one custom property and reusing it: a var() inside the `mask` shorthand is invalid at computed-value time, so the mask resolves to none and the ring floods the element.
+// The duplication between the -webkit- and standard mask declarations is the same constraint.
 export function generateCss(opts) {
-    if (opts.size === "line") return generateLineCss(opts);
-    if (opts.size === "sm") return generateSmCss(opts);
-    return generateMdCss(opts);
+	if (opts.size === "line") return generateLineCss(opts);
+	if (opts.size === "sm") return generateSmCss(opts);
+	return generateMdCss(opts);
 }
 function generateSmCss(o) {
-    const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
-    const innerR = Math.max(0, borderRadius - borderWidth);
-    const scale = colorVariant === "mono" ? 0.5 : 1;
-    const sOp = strokeOpacity * scale;
-    const iOp = innerOpacity * scale;
-    const bOp = bloomOpacity * scale;
-    const hue = hueShift(id, staticColors, hueRange, brightness, saturation);
-    const dark = theme === "dark";
-    const strokeBeam = dark ? `conic-gradient(
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
+	const innerR = Math.max(0, borderRadius - borderWidth);
+	const scale = colorVariant === "mono" ? .5 : 1;
+	const sOp = strokeOpacity * scale;
+	const iOp = innerOpacity * scale;
+	const bOp = bloomOpacity * scale;
+	const hue = hueShift(id, staticColors, hueRange, brightness, saturation);
+	const dark = theme === "dark";
+	const strokeBeam = dark ? `conic-gradient(
         from var(--beam-angle-${id}),
         transparent 0%, transparent 54%,
         rgba(255, 255, 255, 0.1) 57%,
@@ -111,9 +124,9 @@ function generateSmCss(o) {
         rgba(0, 0, 0, 0.08) 75%,
         transparent 78%, transparent 100%
       )`;
-    const border = smBorderGradient(colorVariant, colors);
-    const inner = smInnerGradient(colorVariant, colors);
-    const bloomBeam = dark ? `conic-gradient(
+	const border = smBorderGradient(colorVariant, colors);
+	const inner = smInnerGradient(colorVariant, colors);
+	const bloomBeam = dark ? `conic-gradient(
         from var(--beam-angle-${id}),
         transparent 0%, transparent 58%,
         rgba(255, 255, 255, 0.03) 62%,
@@ -142,7 +155,7 @@ function generateSmCss(o) {
         rgba(0, 0, 0, 0.02) 78%,
         transparent 82%
       )`;
-    const maskConic = `conic-gradient(
+	const maskConic = `conic-gradient(
     from var(--beam-angle-${id}),
     transparent 0%, transparent 22%,
     rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
@@ -150,18 +163,18 @@ function generateSmCss(o) {
     rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
     transparent 97%, transparent 100%
   )`;
-    const ringMask = `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%)`;
-    const bloomCss = bloom ? bloomBlock({
-        id,
-        borderRadius,
-        innerR,
-        borderWidth,
-        bloomGradient: bloomBeam,
-        brightness,
-        saturation,
-        bloomOpacity: bOp
-    }) : "";
-    return `
+	const ringMask = `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%)`;
+	const bloomCss = bloom ? bloomBlock({
+		id,
+		borderRadius,
+		innerR,
+		borderWidth,
+		bloomGradient: bloomBeam,
+		brightness,
+		saturation,
+		bloomOpacity: bOp
+	}) : "";
+	return `
 ${spinHeader(id, borderRadius, duration)}
 [data-beam="${id}"][data-active]::after,
 [data-beam="${id}"][data-fading]::after {
@@ -200,30 +213,30 @@ ${commonHostRules(id)}
 `;
 }
 function generateMdCss(o) {
-    const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
-    const innerR = Math.max(0, borderRadius - borderWidth);
-    const scale = colorVariant === "mono" ? 0.5 : 1;
-    const sOp = strokeOpacity * scale;
-    const iOp = innerOpacity * scale;
-    const bOp = bloomOpacity * scale;
-    const hue = hueShift(id, staticColors, hueRange, brightness, saturation);
-    const dark = theme === "dark";
-    const strokeBeam = dark ? `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%)` : `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%)`;
-    const border = mdBorderGradient(colorVariant, colors);
-    const inner = mdInnerGradient(colorVariant, colors);
-    const bloomBeam = dark ? `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%)` : `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%)`;
-    const conicMask = `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%)`;
-    const bloomCss = bloom ? bloomBlock({
-        id,
-        borderRadius,
-        innerR,
-        borderWidth,
-        bloomGradient: bloomBeam,
-        brightness,
-        saturation,
-        bloomOpacity: bOp
-    }) : "";
-    return `
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
+	const innerR = Math.max(0, borderRadius - borderWidth);
+	const scale = colorVariant === "mono" ? .5 : 1;
+	const sOp = strokeOpacity * scale;
+	const iOp = innerOpacity * scale;
+	const bOp = bloomOpacity * scale;
+	const hue = hueShift(id, staticColors, hueRange, brightness, saturation);
+	const dark = theme === "dark";
+	const strokeBeam = dark ? `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%)` : `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%)`;
+	const border = mdBorderGradient(colorVariant, colors);
+	const inner = mdInnerGradient(colorVariant, colors);
+	const bloomBeam = dark ? `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%)` : `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%)`;
+	const conicMask = `conic-gradient(from var(--beam-angle-${id}), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%)`;
+	const bloomCss = bloom ? bloomBlock({
+		id,
+		borderRadius,
+		innerR,
+		borderWidth,
+		bloomGradient: bloomBeam,
+		brightness,
+		saturation,
+		bloomOpacity: bOp
+	}) : "";
+	return `
 ${spinHeader(id, borderRadius, duration)}
 [data-beam="${id}"][data-active]::after,
 [data-beam="${id}"][data-fading]::after {
@@ -262,13 +275,14 @@ ${commonHostRules(id)}
 `;
 }
 function generateLineCss(o) {
-    const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
-    const innerR = Math.max(0, borderRadius - borderWidth);
-    const dark = theme === "dark";
-    const grade = `brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)})`;
-    const hueAnim = staticColors ? `filter: ${grade};` : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
-    const bloomAnim = staticColors ? `filter: blur(8px) ${grade};` : `animation: beam-hue-shift-bloom-${id} 8s ease-in-out infinite;`;
-    const hueKeyframes = staticColors ? "" : `
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme, colors, bloom } = o;
+	const innerR = Math.max(0, borderRadius - borderWidth);
+	const dark = theme === "dark";
+	const grade = `brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)})`;
+	// The bloom's blur lives in its filter, so a static beam has to state it too.
+	const hueAnim = staticColors ? `filter: ${grade};` : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+	const bloomAnim = staticColors ? `filter: blur(8px) ${grade};` : `animation: beam-hue-shift-bloom-${id} 8s ease-in-out infinite;`;
+	const hueKeyframes = staticColors ? "" : `
 @keyframes beam-hue-shift-${id} {
   0% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
   50% { filter: hue-rotate(${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
@@ -280,11 +294,11 @@ function generateLineCss(o) {
   50% { filter: blur(8px) hue-rotate(${hueRange + 10}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
   100% { filter: blur(8px) hue-rotate(-${hueRange + 10}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
 }`;
-    const highlight = dark ? `radial-gradient(ellipse calc(24px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%)` : `radial-gradient(ellipse calc(35px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%)`;
-    const border = lineBorderGradient(colorVariant, dark, id, colors);
-    const inner = lineInnerGradient(colorVariant, id, colors);
-    const bloomGrad = lineBloomGradient(colorVariant, dark, id, colors);
-    return `
+	const highlight = dark ? `radial-gradient(ellipse calc(24px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%)` : `radial-gradient(ellipse calc(35px * var(--beam-w-${id})) calc(28px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%)`;
+	const border = lineBorderGradient(colorVariant, dark, id, colors);
+	const inner = lineInnerGradient(colorVariant, id, colors);
+	const bloomGrad = lineBloomGradient(colorVariant, dark, id, colors);
+	return `
 @property --beam-x-${id} { syntax: "<number>"; initial-value: 0; inherits: true; }
 @property --beam-w-${id} { syntax: "<number>"; initial-value: 1; inherits: true; }
 @property --beam-h-${id} { syntax: "<number>"; initial-value: 1; inherits: true; }