Hosted StreamDiffusion is Daydream's managed version of the open-source StreamDiffusion real-time diffusion pipeline, wired directly into TouchDesigner through the Daydream API.

The short version: you run the StreamDiffusionTD plugin exactly the way you always have, but the actual generation work happens on our GPUs instead of yours. You need no local NVIDIA card, Python environment, CUDA install, and there's no Windows-only lockdown.

As of April 2026, it's the path most TouchDesigner creators on macOS are using to work with StreamDiffusion at all, and the one our team at Daydream has been pushing hardest since the API went live in August 2025.

StreamDiffusionTD, the operator that made StreamDiffusion usable in a TouchDesigner network in the first place, has been the fastest way to get real-time AI video running inside TouchDesigner since late 2023.

The catch was always the same one: you needed a serious Windows machine with an NVIDIA GPU to run it at performance quality, which ruled out every TouchDesigner user on a Mac and a good chunk of creators who just didn't want to carry an RTX 4090 or 5090 to every gig.

Hosted StreamDiffusion fixes that. The same StreamDiffusionTD plugin now runs against the Daydream API's remote GPU, so you get real-time video generation inside TouchDesigner without any of the local hardware or Python setup. If you've been watching StreamDiffusion tutorials from the sidelines because your laptop wouldn't run them, that's over now.

A quick history of StreamDiffusionTD

Credit where it's due. Lyell Hintz, known in the TouchDesigner community as dotsimulate, built StreamDiffusionTD a few hours after the original StreamDiffusion research pipeline hit GitHub in late December 2023. His first public demo was an audio-reactive setup posted to X, and the tool has been shipping through his Patreon ever since. It's now on version 0.3.1 with SDXL-Turbo, multi-ControlNet, IP Adapter with FaceID, and a long list of other creative workflows that the community has helped shape through fixes and feature requests.

The reason it caught on is that Lyell approached the project like someone who actually uses TouchDesigner to make things. In a conversation with the Daydream team he put it simply:

The operator exposes the parameters that matter for live work (prompt, seed, ControlNet weights) instead of hiding them behind a black box, so you can drive generation from audio, sensors, cameras, MIDI, OSC, or whatever else you already have wired up.

Running it locally has never been easy

The tradeoff Lyell couldn't fix from inside TouchDesigner was the hardware requirement. The local version of StreamDiffusionTD needs Windows 10 or 11, an NVIDIA GPU with CUDA support, at least 6 GB of VRAM (24 GB recommended for the full feature set), Python 3.10 or 3.11, and a matching CUDA toolchain.

Apple Silicon Macs are out entirely because the upstream StreamDiffusion pipeline has no MPS path, so Mac TouchDesigner users have been watching the tutorials and reading the forum threads without being able to run the thing on their own hardware.

Even when you do have the right machine, the performance curve is steep. The Interactive & Immersive HQ benchmarked StreamDiffusionTD at 55 to 60 frames per second on an RTX 4090, dropping to around 16 fps on a 3060 12 GB, and falling to roughly 4 fps above 1024×1024 (closer to a slideshow than live animation). A community pricing anchor on Derivative put the real number on what it actually takes to do pro work with the local setup:

For a touring VJ or an installation artist quoting a commission, that's a line item you can't always justify, and it's one you definitely can't drag into the green room at a festival.

What hosted StreamDiffusion actually changes

Hosted StreamDiffusion moves all of that inference to the Daydream API. The plugin stays where it's always been, inside TouchDesigner, on your canvas. The actual diffusion work just happens on Daydream's GPUs instead of yours. You drop your API key into the operator, hit Start Stream, and you're generating. The whole setup, as Lyell put it in that same conversation, takes less than a minute.

The list of things you stop needing is the interesting part. You don't need Windows. You don't need an NVIDIA GPU. You don't need a Python environment or a matching CUDA toolchain. You don't need to download model weights, and you don't need to keep them up to date. What you do need is a free API key from the Daydream Builder Dashboard and a machine that can run TouchDesigner and reach the internet. On top of that, the hosted path enables features that are hard or expensive to run locally (multi-ControlNet, IP Adapter with FaceID, TensorRT acceleration), and every parameter stays adjustable in real time while your stream is live.

The biggest shift is cultural more than it is technical. For the first time, the Mac TouchDesigner community isn't shut out of StreamDiffusion work. If you've been building generative systems on an M-series MacBook Pro, you can pipe them through hosted diffusion and back into your network the same way a Windows creator with a 4090 or 5090 in the tower would, without changing operating systems or buying new hardware.

We've felt that shift directly on our end: the questions we used to get started with "what GPU do I need to buy," and the shift to "what should I prompt."

What this looks like in practice

If you're a VJ cutting live visuals, you can drive the StreamDiffusion pipeline from whatever audio-reactive logic you already have in TouchDesigner (CHOPs, particle systems, camera feeds, MIDI from the DJ booth) and have the AI output appear at frame rates that actually sit inside a live set. No pre-rendering, no offline passes, just real-time generation sitting next to your other sources in the mix.

If you're an installation artist, the interesting bit is that the inference is no longer tied to a machine on site. A small Mac running TouchDesigner and calling the Daydream API is a very different shipping and power footprint than a workstation with a 4090 or 5090 in it, and a lot easier to keep stable across a multi-week exhibit.

If you're doing projection mapping or LED work, the hosted path frees up your local GPU for the things TouchDesigner is already good at (shaders, warping, geometry) while the diffusion happens somewhere else. You stop having to choose between "the mapping runs smoothly" and "the AI runs smoothly."

If you're on macOS, this is the first time StreamDiffusionTD has been available to you at all, and the setup isn't a workaround. It runs the same way it would on any other machine that can call the Daydream API, with the same features and the same control surface.

Where to start

The fastest way in, and the one we've been recommending to pretty much every TouchDesigner creator who asks, is Daydream SDXL Easy Quickstart File. It's a ready-to-use .tox that wires StreamDiffusionTD to your Daydream API key with a click-and-drag install, and it gives you real-time prompt editing, multiple ControlNets, IP-Adapter image prompting from folders, and input switching for webcam, video files, and TouchDesigner network sources out of the box. It needs TouchDesigner 2023 or newer on Mac, and 2025 or newer on Windows for the SDXL Turbo path.

Where this fits

Hosted StreamDiffusion for TouchDesigner is one of a handful of paths Daydream already offers creatives who want real-time AI video to live inside the tools they already work in.

The other main one is Scope, our local-first desktop app for building real-time video and world-model workflows. Scope is free and open source, with the full source on GitHub.

Where Scope earns its place is in how it talks to the rest of your rig. It ships with a node-based editor and native integrations for Spout and Syphon, NDI, OSC, MIDI, and DMX. Those are the same protocols that already run your show control, your lighting rig, and your audio network, which means Scope can sit inside a live production pipeline without a bunch of glue code.

Scope is what you reach for when you want a purpose-built environment that runs your show control alongside the generation. StreamDiffusionTD on the Daydream API is what you reach for when you want StreamDiffusion sitting inside the TouchDesigner network you've already wired up. Both share the same underlying idea: put real-time video generation in TouchDesigner, in Scope, or wherever else you work, within reach of working creatives without forcing them to change their toolchain or pour the cost of a touring rig into an RTX 4090 or 5090 workstation.

Between them, the audience for real-time diffusion in live visual work stops being "people with a top-end NVIDIA GPU" and starts being anyone with a laptop and a project to ship.

Common questions

Yes. The plugin is still the interface inside TouchDesigner. Hosted StreamDiffusion moves the diffusion inference to the Daydream API, but you still install dotsimulate's StreamDiffusionTD operator to drive prompts, parameters, inputs, and outputs from your network. The plugin and the hosted backend are complementary, not alternatives.

Yes, and this is the main new capability. Any Mac that can run TouchDesigner will run StreamDiffusionTD against the Daydream API. Local StreamDiffusion has never been possible on macOS because the upstream pipeline has no Apple Metal path. Hosted changes that entirely, since the inference runs on our GPUs in the cloud rather than your machine. If you're on Apple Silicon, this is the first time you've had a real way to run StreamDiffusion in TouchDesigner.

Andrew Sun's Daydream SDXL Easy Quickstart File works with TouchDesigner 2023 or newer on Mac and 2025 or newer on Windows. If you're running your own StreamDiffusionTD install without the quickstart file, check dotsimulate's documentation for the version matrix and release notes.

Scope is an open-source desktop app with a node-based editor and native integrations for Spout, Syphon, NDI, OSC, MIDI, and DMX, built for creators who want a dedicated real-time AI video environment that talks directly to their show control. Hosted StreamDiffusion in TouchDesigner is the TouchDesigner-native entry point into the same Daydream API infrastructure. You'd pick Scope if you want the purpose-built environment. You'd pick hosted StreamDiffusion if you already live inside TouchDesigner and want StreamDiffusion to sit there too.

If you're building something on either path, we'd love to see it. Tag @daydreamliveai and come hang out with the rest of the community in our Discord.

Some are writing custom nodes that bring new visual effects into their generation pipeline. Others are connecting Scope to TouchDesigner and Resolume for interactive installations, or scripting their lighting desks to drive AI video generation during live shows. A few have built full applications that stream Scope's real-time AI video into their own web experiences, Unity projects, or interactive kiosks using WebRTC.

A lot of this development happens with AI coding agents now, and that's where things get challenging. Coding agents can still sometimes hallucinate. They guess at endpoint names that look plausible but don't exist. They generate import paths that fail silently. When you're building against a codebase that moves as fast as Scope does, your agent's training data is almost always behind.

Today, we're launching the Scope Developer Skill, a purpose-built reference for Claude Code (and likely can be used with Codex and other agentic platforms supporting skills) that gives your coding agent deep knowledge of the Scope platform. It's one of our first steps toward making AI-assisted development around Scope a first-class experience, and it builds on our LLM-friendly docs we introduced a while ago. More on both in this post.

Reasons for building this

A lot of people use Scope through the graph editor and the visual controls, and that's great. But we're also seeing people who want to go further: writing their own nodes, building custom applications, integrating Scope into larger production setups for live shows and installations. Those people are, in most cases, working with the API, the node system, the WebRTC signaling layer, and their coding agents need to know how all of that works.

Several of our previous cohort participants have already been building custom nodes using our vibe coding tutorial.

The skill takes that further. Instead of spending time figuring out which import path works or what the WebRTC response format looks like, your agent already knows. You describe what you want to build, and the code it produces actually runs.

What the Scope Developer Skill is

In simplest terms, Claude Code skills are markdown files that give Claude domain-specific expertise. That's it.

When you install a skill, Claude automatically loads it whenever the conversation topic matches. You don't need to remember to paste documentation into context or point your agent at the right files. The skill loads on its own, and it's structured for code generation rather than human reading: working code examples, exact field names, verified import paths, and cross-cutting patterns like the full WebRTC flow that spans multiple endpoints and models. Copying a docs page gives your agent information about one topic. The skill gives it a connected understanding of how the pieces fit together.

We built this by cross-referencing against the actual Scope source code, testing import paths, verifying endpoint methods, and checking field names against the codebase.

Building with Scope and our dev skill

Scenarios are almost endless, but some of the use cases we already observed are listed here. We hope to see even more and beyond these!

Custom visual effects for your set. You want a chromatic aberration effect or a CRT scanline look for your VJ performance. Describe the effect, and Claude generates a working plugin you can install and tweak in real time. The skill handles the boilerplate: the build configuration, the plugin registration, the input/output contracts. You focus on the creative part.

New pipeline support. Maybe there's a new audio or video diffusion model or a specialized depth estimation architecture you want to bring into Scope that isn't supported out of the box. The skill knows the pipeline interface, the config schema, how model artifacts and downloads work, and how to register everything through the plugin system.

Your agent can scaffold the full pipeline node with the right structure, and you focus on the model-specific inference logic. This is the kind of task where coding agents typically fail without proper context, and it's where the skill helps the most.

Your own applications powered by Scope. Bring real-time AI video into your Unity project, your web experience, your installation kiosk, or your own custom interface. The skill covers the WebRTC signaling details that agents typically get wrong: the field name casing, the ICE candidate format, the data channel protocol. So, instead of reverse-engineering the connection flow from source code, you describe what you want and get working integration code.

Show control from your existing rig. Your TouchOSC surface talks to Scope over OSC. Your lighting console drives AI generation over DMX. Your MIDI controller maps to generation parameters. The skill knows these protocol formats and endpoint contracts, so the code your agent writes actually connects to Scope instead of targeting an API surface that doesn't exist.

Custom solutions on top of Scope's engine. Build your own automation: load pipelines, update prompts with smooth transitions, capture frames, read performance metrics. If you want to build tools that treat Scope as an inference backend rather than a standalone application, the session API is how you do it, and the skill covers it.

Installing the skill in Claude Code

Installation takes about 30 seconds. You have two options depending on whether you want the skill available across all your projects or just one.

If you want it to stay up to date automatically when we push updates, use a symlink instead:

Then whenever we update the skill, a git pull in that directory is all you need.

Once installed, Claude Code picks it up automatically. You can verify by asking something like "How do I load a pipeline via the Scope API?" and checking that Claude references specific endpoints with correct request formats rather than guessing.

Getting started and using MCP for an even better experience

If you want a guided walkthrough to see the skill in action, we have two tutorials that pair well with it:

We are aware that this is a V1 (if we are being generous about versioning), and we want it to get better with input from the people who actually use it.

If you build something with the skill, share it in the Discord. If something's wrong or missing, open an issue on GitHub.

Some useful links

This week, we've gone from local video sharing with Spout and Syphon, to network video with NDI, to software control with OSC, and all the way to physical control with MIDI.

Today, we close the week where the digital meets the physical. DMX connects Scope to the stage.

DMX is the protocol that controls stage lighting. Every venue, every concert, every theater production, every festival with programmable lights runs on DMX. Lighting consoles from MA, ETC, Avolites, and others all speak it. And now your lighting desk can control Scope's AI video generation in real time, alongside the fixtures it's already running.

What DMX brings to the picture

If you're a lighting designer or a technical director, you already think in DMX channels. Faders on your console map to channels, channels map to fixture parameters, and the whole thing runs at show speed. Scope now fits into that same mental model.

Scope receives DMX data over Art-Net, which is the standard protocol for sending DMX over Ethernet. Your lighting console sends Art-Net packets over the network, and Scope listens for them on the standard Art-Net port (UDP 6454). You map DMX channels to Scope parameters, and the console controls AI video generation the same way it controls your lights.

The mapping works like this: each DMX channel sends a value from 0 to 255. Scope scales that value to the parameter's actual range automatically. So channel 1 sending 0-255 might map to noise scale 0.0-1.0, while channel 2 sending 0-255 maps to transition steps 0-100. The scaling is handled for you.

Updates run at approximately 60 Hz, which matches typical console refresh rates. Scope throttles incoming DMX to prevent flooding, and skips duplicate values so only actual changes get processed.

What this means in practice

For a lighting designer running a show, your console becomes a unified control surface for both lighting and AI video. Program a cue that dims the stage lights and simultaneously shifts Scope's generation toward darker, more atmospheric visuals. Build a chase that pulses the lights and the AI output together. The same faders that control your fixtures now control the AI.

Live production teams working on concerts or events can integrate Scope into their existing show control workflow. The lighting console is already the central hub. Adding Scope as another "fixture" on the network means the LD can control AI visuals without learning new software or adding another control surface to the desk.

Immersive installations where lighting and video need to feel like one unified environment get a direct connection between the two. Map your room lighting channels and your Scope generation channels on the same console, program them together, and the space responds as a whole.

Venue operators and technical directors who need reliable, repeatable show control can program Scope parameters into their cue lists alongside traditional fixtures. DMX is the protocol they already trust for show-critical systems.

What you can control

Scope exposes its numeric parameters for DMX mapping. The parameters that are always available include:

Each loaded pipeline adds its own numeric parameters to the mappable set. You configure the mappings in Scope's settings panel, choosing which universe and channel controls which parameter.

Getting started

Scope will show "Listening on UDP port 6454" when it's ready. If port 6454 is taken by another application, Scope tries 6455, 6456, and 6457 as fallbacks.

You can toggle Log Messages to All to see every incoming DMX update in real time, which is useful for verifying your mappings are working correctly. The configuration persists between sessions, so you only need to set it up once per show.

You can also export and import your DMX configuration as JSON, making it easy to share setups between machines or back up your show configs.

A full week of integrations

Monday - Spout and Syphon moved your video between apps on the same machine at GPU speed. The foundation.

Tuesday - NDI took your video across the network to any machine, any platform. With audio and metadata along for the ride.

Wednesday - OSC gave you float-precision parameter control over the network, from tablets, TouchDesigner, or custom scripts.

Thursday - MIDI put physical controllers in your hands. Knobs, faders, pads, all learn-mapped to generation parameters.

Friday - And today, DMX connected Scope to the stage. Your lighting console now controls AI video alongside your fixtures.

Together, these five protocols make Scope a bridge between real-time AI video and the tools creative technologists, VJs, lighting designers, and installation artists already work in. Scope fits into your workflow rather than asking you to change it.

While these integrations are powerful and the team is building very rapidly, we understand that we are just getting started.

Links

On Monday we started with Spout and Syphon for local video sharing. Tuesday brought NDI for network video. Yesterday, OSC gave us precision parameter control over the network. Today, the control gets physical.

MIDI is the protocol that connects hardware controllers to software. If you have a MIDI controller sitting on your desk, a drum pad, a keyboard, or a rack of faders, you can now map any of them directly to Scope's generation parameters. Turn a knob to adjust the noise scale. Tap a pad to switch prompts. Push a fader to blend between styles. The mapping is yours to define.

MIDI still matters

Yesterday, we talked about OSC and how it gives you high-resolution, network-native control. MIDI works differently. Instead of being about float precision or network routing. MIDI is about putting your hands on something physical and making adjustments.

MIDI has been the standard for hardware control in music and performance for decades. The ecosystem is massive. There are thousands of controllers, from simple knob boxes to complex performance surfaces, and they all speak the same language. When you pick up a MIDI controller, you already know how it works.

The resolution is lower than OSC (128 steps per parameter instead of continuous floats), but for live performance, that's often exactly enough. In most situations, you're not trying to dial in a value to four decimal places. Instead, you're reaching for a fader during a set and pushing it until the visual feels right.

What you can map

Scope uses the Web MIDI API with a learn-based mapping system. You don't need to manually configure CC numbers or channels. You click a parameter in Scope, move a knob on your controller, and the mapping is made.

Beyond parameter control, you can also map MIDI to specific actions: switch between prompts, load presets, add or remove denoising steps, or toggle pause. These action triggers make MIDI especially useful during live performance when you need quick access to common operations without touching the screen.

Scope also supports MIDI clock for tempo sync. If your DAW or hardware is sending MIDI clock, Scope can derive BPM and beat phase from it, keeping visual transitions locked to the music. You can quantize parameter changes to beats or bars, and set lookahead for anticipating transitions.

What this looks like in practice

A VJ with a MIDI controller is the most straightforward setup. Map your faders to noise scale, denoising strength, and VACE context. Map your pads to prompt switching. You now have a physical instrument for performing with AI video. Scope's mapping UI shows visual feedback (a colored dot on each mapped control), so you always know what's connected to what.

DAW integration through Ableton or any MIDI-capable host opens up timeline-based control. Send MIDI CC automation from your DAW to Scope, and your visual transformations follow the music arrangement. Verse gets one look, chorus gets another, breakdown strips it back. The DAW becomes your visual sequencer.

Multi-app setups are where you'll need virtual routing. MIDI typically locks a device to a single application, so if you want the same controller to talk to Scope and Resolume, you route it through a virtual MIDI bus. On macOS, the built-in IAC Driver handles this (enable it in Audio MIDI Setup). On Windows, loopMIDI by Tobias Erichsen does the same job. Set up your virtual ports, point your apps at them, and your controller fans out to everything.

Gallery installations can use MIDI to give visitors physical interaction with AI video. A simple panel with a few knobs or buttons, mapped to Scope parameters, turns the generation into something people can touch. No screen interface needed.

Saving and switching mappings

Once you've built a mapping that works for a show or project, Scope saves it as a profile. You can switch between profiles for different sets or venues without remapping everything from scratch. The mappings persist in your browser's local storage, so they survive restarts.

You can view all active mappings through the mappings modal (the list icon next to the MIDI toggle), which shows each controller input, its target parameter, mapping type, and range. Delete individual mappings or clear everything and start fresh.

Getting started

If your controller isn't showing up, make sure no other application has exclusive access to it. On macOS, check that the IAC Driver is enabled if you need multi-app routing.

Full setup details, including virtual routing guides for macOS and Windows, in the MIDI docs.

What's next

If you've ever wanted your real-time AI visuals and your venue's lighting to move as one, Friday is for you.

Links

; if (!visible) return placeholder; return

{children}

; }; export const ScrollBox = ({children, maxHeight = 300, showHint = true, ariaLabel = "Scrollable content", style = {}, className = "", ...rest}) => { const contentRef = useRef(null); const [isOverflowing, setIsOverflowing] = useState(false); useEffect(() => { const checkOverflow = () => { if (contentRef.current) { const maxHeightPx = typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight, 10) || 300; setIsOverflowing(contentRef.current.scrollHeight > maxHeightPx); } }; checkOverflow(); window.addEventListener("resize", checkOverflow); return () => window.removeEventListener("resize", checkOverflow); }, [maxHeight, children]); return

{ const el = e.target; const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10; const hint = el.parentNode.querySelector("[data-scroll-hint]"); if (hint) hint.style.opacity = atBottom ? "0" : "1"; }}> {children}

{showHint && isOverflowing &&

Scroll for more ↓

}

; }; export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => { const spacingPresets = { default: { margin: "24px 0" }, overlap: { margin: "-1rem 0 -1rem 0" }, tight: { margin: "0 0 -1rem 0" }, section: { margin: "0 0 -2rem 0" }, sectionOverlap: { margin: "-1rem 0 -2rem 0" }, deepOverlap: { margin: "-1rem 0 -1.5rem 0" } }; const spacingStyle = spacingPresets[spacing] || spacingPresets.default; return

{middleText && <> {middleText} }

; }; export const MarkdownEmbed = ({url, className = '', style = {}, ...rest}) => { const [html, setHtml] = useState(''); useEffect(() => { fetch(url).then(res => res.text()).then(md => { const converted = md.replace(/```(\w*)\n([\s\S]*?)```/g, '

$2

').replace(/`([^`]+)`/g, '$1').replace(/!\[([^\]]*)\]$([^)]+)$/g, '

').replace(/\[([^\]]+)\]$([^)]+)$/g, '$1').replace(/^######\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^#####\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^####\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^###\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^##\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/^#\s+(.+?)(?:\s+#+)?$/gm, '

$1

').replace(/\*\*\*(.+?)\*\*\*/g, '$1').replace(/\*\*(.+?)\*\*/g, '$1').replace(/\*(.+?)\*/g, '$1').replace(/^---$/gm, '

').replace(/^[-*]\s+(.+)$/gm, '

').replace(/\n\n/g, '

').replace(/\n/g, '
'); setHtml('

' + converted + '

'); }); }, [url]); if (!html) return

; return

; }; export const DiscordAnnouncements = ({serverName = 'Livepeer', items = [], limit, ScrollBox, scrollMaxHeight = 300, className = '', style = {}, ...rest}) => { const sanitiseHTML = html => { if (!html || typeof html !== 'string') return ''; return html.replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(/\bon\w+\s*=\s*(['"])[^'"]*\1/gi, '').replace(/\bon\w+\s*=\s*[^\s>]*/gi, '').replace(/javascript\s*:/gi, ''); }; const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No announcements at this time.

; } const parseContent = content => { const withLinks = content.replace(/\[([^\]]+)\]$([^)]+)$/g, '$1 ↗'); return withLinks; }; return

{displayItems.map((announcement, index) =>

{serverName} {} • {new Date(announcement.timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} View in Discord{' '}

{index < displayItems.length - 1 &&

}

)}

; }; export const RssBlogCardLayout = ({items = [], cols = 2, limit, className = '', style = {}, ...rest}) => { const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No blog posts at this time.

; } return {displayItems.map((props, idx) => )} ; }; export const RssBlogCard = ({title, content, href, author = '', excerpt = '', datePosted = null, readingTime = null, img = null, icon = 'book-open', cta = 'Read More', className = '', style = {}, ...rest}) => { const sanitiseHTML = html => { if (!html || typeof html !== 'string') return ''; return html.replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(//gi, '').replace(/\bon\w+\s*=\s*(['"])[^'"]*\1/gi, '').replace(/\bon\w+\s*=\s*[^\s>]*/gi, '').replace(/javascript\s*:/gi, ''); }; const displayContent = content || excerpt; const showScrollHint = displayContent && displayContent.length > 500; return {title} } href={href} cta={cta} img={img || undefined} arrow {...rest}>

{datePosted &&

{datePosted}

} {readingTime &&

Read Time: {readingTime} minutes

}

{ const el = e.target; const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 10; const hint = el.nextSibling; if (hint) hint.style.display = atBottom ? 'none' : 'block'; }} dangerouslySetInnerHTML={{ __html: sanitiseHTML(displayContent) }} /> {showScrollHint &&

Scroll for more ↓

} ; }; export const YouTubeVideoData = ({items = [], limit, cols = 2, className = "", style = {}, ...rest}) => { const displayItems = limit ? items.slice(0, limit) : items; if (!displayItems || displayItems.length === 0) { return

No videos at this time.

; } const getEmbedUrl = href => { if (!href) return ""; const videoId = href.split("v=")[1]?.split("&")[0]; return videoId ? `https://www.youtube.com/embed/${videoId}` : href; }; return {displayItems.map((item, idx) => { if (!item || !item.href) return null; const needsSpacer = idx > 0 && idx % cols === 0; return <> {needsSpacer &&

} {needsSpacer &&

} ; })} ; }; export const YouTubeVideo = ({embedUrl, url, title = "", author = "", hint = "", caption, className = "", style = {}, ...rest}) => { const toEmbedUrl = value => { if (!value || typeof value !== "string") return ""; const source = value.trim(); if (!source) return ""; try { const parsed = new URL(source); const host = parsed.hostname.replace(/^www\./, ""); if (host === "youtube.com" || host === "youtube-nocookie.com") { if (parsed.pathname.startsWith("/embed/")) return source; const videoId = parsed.pathname.startsWith("/shorts/") ? parsed.pathname.split("/").filter(Boolean)[1] : parsed.searchParams.get("v"); if (!videoId) return ""; const params = new URLSearchParams(parsed.search); params.delete("v"); const query = params.toString(); return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`; } if (host === "youtu.be") { const videoId = parsed.pathname.split("/").filter(Boolean)[0]; if (!videoId) return ""; const query = parsed.searchParams.toString(); return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`; } } catch (_err) { return ""; } return ""; }; const resolvedEmbedUrl = toEmbedUrl(embedUrl || url); if (!resolvedEmbedUrl) { return null; } const isValidYouTubeUrl = resolvedEmbedUrl.includes("youtube.com/embed/"); if (!isValidYouTubeUrl) { console.warn("Invalid YouTube embed URL:", embedUrl || url); return null; } const buildCaption = () => { if (caption) return caption; if (!author && !title) return null; return {author && <> {author} } {author && title ? `${" "} • ${title}` : title} ; }; const captionContent = buildCaption(); return