React hooks and UI

Hooks

import { useProgramClock } from "@denpa/sdk/react";

function OnAir() {
  const { data, loading, error, refresh, onAir, now, paused } = useProgramClock({ providers: ["polymarket"], paused: false });
  return <div>{onAir?.title ?? "NO SIGNAL"}</div>;
}

useProgramClock polls the hub clock and returns { data, loading, error, refresh, onAir, now, paused } — onAir is the segment on air, now the clock time, paused echoes the option you pass in (a paused surface holds its pick; the clock never stops). onAirSegment(program, now) is a plain helper exported from @denpa/sdk for non-React code.

UI (@denpa/ui)

Export	What
<SignalBoard>	the canonical Denpa chrome: monochrome, IBM Plex Mono, hard edges
<BroadcastClock>	the smart-TV rundown (ON AIR + UP NEXT) themed from denpa.config.ts
createForkPage(config)	a fork’s home board
createForkBroadcastPage(config, { categories?, preset? })	a fork’s /broadcast page
ResolutionOverlay	the resolution countdown badge + clock (z above everything)

Build order in the monorepo is strict: @denpa/types → @denpa/db → apps; build @denpa/sdk before typechecking @denpa/ui.

NoSignal, standalone

If you are not in the monorepo, copy this (pure CSS, no assets):

export function NoSignal({ caption = "TUNING…" }: { caption?: string }) {
  const css = "@keyframes ns-flicker{0%,100%{opacity:.5}9%{opacity:.35}53%{opacity:.4}}@keyframes ns-roll{to{background-position:0 6px}}";
  const noise = "repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0,rgba(0,0,0,.1) 1px,rgba(255,255,255,.04) 2px,rgba(0,0,0,.08) 3px)";
  return (
    <div style={{ position:"relative", height:280, background:"#0a0a0a", overflow:"hidden", display:"grid", placeItems:"center" }}>
      <style>{css}</style>
      <div style={{ position:"absolute", inset:"-10%", backgroundImage:noise, backgroundSize:"100% 4px", opacity:.5, mixBlendMode:"screen", animation:"ns-flicker 2.4s steps(2) infinite" }} />
      <div style={{ position:"absolute", inset:0, backgroundImage:"linear-gradient(#3333 50%,transparent 50%)", backgroundSize:"100% 6px", opacity:.4, animation:"ns-roll 8s linear infinite" }} />
      <div style={{ position:"relative", textAlign:"center", fontFamily:"monospace" }}>
        <div style={{ color:"#fff", fontWeight:900, letterSpacing:".3em" }}>NO SIGNAL</div>
        <div style={{ marginTop:".5rem", color:"#a0a0a0", fontSize:".7rem", letterSpacing:".14em" }}>{caption}</div>
      </div>
    </div>
  );
}