OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 333 LINES
 
[ HISTORY ]  [ UP ]
 

---
import ArticleLayout from "../layouts/ArticleLayout/ArticleLayout.astro";
import TopHeader from "../components/TopHeader/TopHeader.astro";
import Frame from "../components/Frame/Frame.astro";
import Pre from "../components/Pre/Pre.astro";
import Button from "../components/Button/Button.astro";
import TextField from "../components/TextField/TextField.astro";
import Checkbox from "../components/Checkbox/Checkbox.astro";
import Radio from "../components/Radio/Radio.astro";
import Select from "../components/Select/Select.astro";
import FormFrame from "../components/FormFrame/FormFrame.astro";
import type { Field } from "../components/FormFrame/FormFrame";
import Tree from "../components/Tree/Tree.astro";
import type { TreeNode } from "../components/Tree/Tree";
import Progress from "../components/Progress/Progress.astro";
import Spinner from "../components/Spinner/Spinner.astro";
import Status from "../components/Status/Status.astro";
import TableOfContents from "../components/TableOfContents/TableOfContents.astro";
import Accordion from "../components/Accordion/Accordion.astro";
import Tabs from "../components/Tabs/Tabs.astro";
import Breadcrumbs from "../components/Breadcrumbs/Breadcrumbs.astro";
import Timeline from "../components/Timeline/Timeline.astro";
import type { TimelineEntry } from "../components/Timeline/Timeline";
import Kbd from "../components/Kbd/Kbd.astro";
import Gauge from "../components/Gauge/Gauge.astro";
import Sparkline from "../components/Sparkline/Sparkline.astro";
import BarChart from "../components/BarChart/BarChart.astro";
import BigNumber from "../components/BigNumber/BigNumber.astro";
import Panel from "../components/Panel/Panel.astro";
import KeyValue from "../components/KeyValue/KeyValue.astro";
import Banner from "../components/Banner/Banner.astro";
import Steps from "../components/Steps/Steps.astro";
import Calendar from "../components/Calendar/Calendar.astro";
import Pagination from "../components/Pagination/Pagination.astro";
import Switch from "../components/Switch/Switch.astro";
import NumberStepper from "../components/NumberStepper/NumberStepper.astro";
import Dialog from "../components/Dialog/Dialog.astro";
import Menu from "../components/Menu/Menu.astro";
import Tooltip from "../components/Tooltip/Tooltip.astro";
import Slider from "../components/Slider/Slider.astro";
import Diff from "../components/Diff/Diff.astro";
import { rule, ruleD, row2, pad } from "../lib/ascii";

const section = (title: string, right: string) => (w: number) =>
  [row2(title, right, w), ruleD(w)].join("\n");

const LABEL_W = 12;

const REPORT_FIELDS: Field[] = [
  { kind: "text", label: "CALLSIGN", name: "callsign", cells: 26 },
  { kind: "text", label: "FREQUENCY", name: "frequency", cells: 26 },
  { kind: "select", label: "CHANNEL", name: "channel", options: ["ALPHA", "BRAVO",
 "OOKNET-9"], cells: 20, value: "ALPHA" },
  { kind: "gap" },
  { kind: "radios", label: "PRIORITY", name: "priority", options: ["ROUTINE", "URG
ENT", "FLASH"], value: "ROUTINE" },
  { kind: "gap" },
  { kind: "checkbox", label: "ENCRYPT TRANSMISSION", name: "encrypt", checked: tru
e },
  { kind: "checkbox", label: "NOTIFY ON REPLY", name: "notify" },
  { kind: "gap" },
  { kind: "textarea", label: "MESSAGE", name: "message", rows: 4 },
  { kind: "gap" },
  { kind: "buttons", buttons: [{ label: "TRANSMIT", variant: "primary" }, { label:
 "CLEAR", type: "reset" }] },
];

const DEMO_HEADINGS = [
  { depth: 1, slug: "buttons", text: "Buttons" },
  { depth: 1, slug: "text-fields", text: "Text fields" },
  { depth: 1, slug: "toggles", text: "Toggles" },
  { depth: 2, slug: "checkboxes", text: "Checkboxes" },
  { depth: 2, slug: "radios", text: "Radios" },
  { depth: 1, slug: "form-frame", text: "Form frame" },
];

const HISTORY: TimelineEntry[] = [
  { date: "2026-07-16", title: "FILED /WEBSITE", desc: "style sheet - exercises ev
ery pipeline construct", href: "/docs/ooknet-org/style-sheet/" },
  { date: "2026-04-27", title: "FILED /AI", desc: "using ai to troubleshoot and re
solve issues", href: "/notes/ai/using-ai-to-troubleshoot/" },
  { date: "2026-04-25", title: "FILED /KB", href: "/kb/windows/collect-data-tss/" 
},
  { date: "2026-04-19", title: "FILED /GRAPHS", desc: "entropy bounds in sparse gr
aphs", href: "/notes/graphs/entropy-bounds/" },
];

const FILED_TREE: TreeNode[] = [
  {
    label: "/NOTES",
    children: [
      { label: "AI", children: [{ label: "USING AI TO TROUBLESHOOT", href: "/notes
/ai/using-ai-to-troubleshoot/" }] },
      { label: "GRAPHS", children: [{ label: "ENTROPY BOUNDS", href: "/notes/graph
s/entropy-bounds/" }] },
    ],
  },
  {
    label: "/KB",
    children: [{ label: "WINDOWS", children: [{ label: "COLLECT DATA (TSS)", href:
 "/kb/windows/collect-data-tss/" }] }],
  },
];
---
<ArticleLayout title="OOKNET KB - Components"
  description="The OOKNET ASCII component library - every frame, chart, and contro
l the design system ships, demonstrated live.">
  <TopHeader />
  <Frame build={(w) => [row2("COMPONENT INDEX", "DESIGN SYSTEM v0.1", w), ruleD(w)
].join("\n")} />
  <Pre>{" "}</Pre>

  <Frame build={section("BUTTONS", "Button.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Button label="SUBMIT" variant="primary" />{"  "}<Button label="CANCEL" />{
"  "}<Button label="DISABLED" disabled />{"  "}<Button label="INDEX" href="/" /></
Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TEXT FIELDS", "TextField.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("CALLSIGN", LABEL_W)}<TextField name="demo-callsign" cells={20} /></Pr
e>
  <Pre>{pad("PASSPHRASE", LABEL_W)}<TextField name="demo-passphrase" cells={20} ty
pe="password" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TOGGLES", "Checkbox.astro / Radio.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Checkbox label="ENCRYPT TRANSMISSION" name="demo-encrypt" checked /></Pre>
  <Pre><Checkbox label="NOTIFY ON REPLY" name="demo-notify" /></Pre>
  <Pre><Checkbox label="DISABLED OPTION" name="demo-disabled" disabled /></Pre>
  <Pre>{" "}</Pre>
  <Pre><Radio label="ROUTINE" name="demo-priority" value="routine" checked /></Pre
>
  <Pre><Radio label="URGENT" name="demo-priority" value="urgent" /></Pre>
  <Pre><Radio label="FLASH" name="demo-priority" value="flash" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SELECT", "Select.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("CHANNEL", LABEL_W)}<Select name="demo-channel" cells={20} options={["
ALPHA", "BRAVO", "OOKNET-9"]} value="ALPHA" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("FORM FRAME", "FormFrame.astro")} />
  <Pre>{" "}</Pre>
  <FormFrame title="FIELD REPORT" fields={REPORT_FIELDS} />
  <Pre>{" "}</Pre>
  <Pre><Status variant="ok" message="TRANSMISSION QUEUED" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TREE", "Tree.astro")} />
  <Pre>{" "}</Pre>
  <Tree nodes={FILED_TREE} />
  <Pre>{" "}</Pre>

  <Frame build={section("PROGRESS", "Progress.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("REINDEX", LABEL_W)}<Progress value={57} /></Pre>
  <Pre>{pad("UPLINK", LABEL_W)}<Progress value={100} /></Pre>
  <Pre>{pad("DECAY", LABEL_W)}<Progress value={8} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("STATUS", "Status.astro / Spinner.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Status variant="ok" message="TRANSMISSION QUEUED" /></Pre>
  <Pre><Status variant="error" message="FREQUENCY OUT OF BAND" /></Pre>
  <Pre><Status variant="pending" message="AWAITING PEER CHECK" /></Pre>
  <Pre><Spinner />{" SYNCING INDEX"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TABLE OF CONTENTS", "TableOfContents.astro")} />
  <TableOfContents headings={DEMO_HEADINGS} />
  <Pre>{" "}</Pre>

  <Frame build={section("ACCORDION", "Accordion.astro")} />
  <Pre>{" "}</Pre>
  <Accordion label="APPENDIX A - CELL MEASUREMENTS">
    <p>Cascadia Mono "0" advance at 13px: 7.617px. IBM Plex Mono drifts on box-dra
wing glyphs, which is why it never draws frames.</p>
  </Accordion>
  <Accordion label="APPENDIX B - DROPPED GLYPH SETS">
    <p>Heavy box-drawing (U+250F etc.) fell back to a wider face and bent every bo
rder it touched. Dropped from the grid.</p>
  </Accordion>
  <Pre>{" "}</Pre>

  <Frame build={section("TIMELINE", "Timeline.astro")} />
  <Pre>{" "}</Pre>
  <Timeline entries={HISTORY} />
  <Pre>{" "}</Pre>

  <Frame build={section("GAUGE", "Gauge.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("SIGNAL", LABEL_W)}<Gauge value={47} threshold={70} /></Pre>
  <Pre>{pad("BUFFER", LABEL_W)}<Gauge value={85} threshold={70} /></Pre>
  <Pre>{pad("DECAY", LABEL_W)}<Gauge value={8} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SPARKLINE", "Sparkline.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("UPLINK", LABEL_W)}<Sparkline values={[3, 5, 9, 4, 6, 12, 8, 7, 11, 14
, 9, 6]} />{"  14 PEAK"}</Pre>
  <Pre>{pad("NOISE", LABEL_W)}<Sparkline values={[2, 2, 3, 2, 2, 2, 4, 3, 2, 2, 3,
 2]} />{"   4 PEAK"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("BAR CHART", "BarChart.astro")} />
  <Pre>{" "}</Pre>
  <BarChart items={[
    { label: "NORTH", value: 42 },
    { label: "EAST", value: 17 },
    { label: "SOUTH", value: 29 },
    { label: "WEST", value: 8 },
  ]} />
  <Pre>{" "}</Pre>

  <Frame build={section("BIG NUMBER", "BigNumber.astro")} />
  <Pre>{" "}</Pre>
  <BigNumber value="14,230" label="KHZ - PRIMARY RELAY FREQUENCY" />
  <Pre>{" "}</Pre>

  <Frame build={section("PANEL", "Panel.astro")} />
  <Pre>{" "}</Pre>
  <Panel title="RELAY LOG">
    <Pre>{pad("LAST SWEEP", LABEL_W)}<Sparkline values={[3, 5, 9, 4, 6, 12, 8, 7]}
 /></Pre>
    <Pre>{pad("SIGNAL", LABEL_W)}<Gauge value={47} threshold={70} /></Pre>
  </Panel>
  <Pre>{" "}</Pre>

  <Frame build={section("KEY VALUE", "KeyValue.astro")} />
  <Pre>{" "}</Pre>
  <KeyValue entries={[
    ["STATION", "OOKNET-9"],
    ["FREQUENCY", "14.230 MHZ"],
    ["REMARKS", "relay via the northern repeater when the direct path fades below 
threshold"],
  ]} />
  <Pre>{" "}</Pre>

  <Frame build={section("BANNER", "Banner.astro")} />
  <Pre>{" "}</Pre>
  <Banner variant="notice" message="scheduled maintenance window sunday 02:00-04:0
0 UTC" />
  <Banner variant="warning" message="frequency drift detected on channel bravo - r
ecalibrate before transmitting" />
  <Banner variant="error" message="uplink lost" />
  <Pre>{" "}</Pre>

  <Frame build={section("STEPS", "Steps.astro")} />
  <Pre>{" "}</Pre>
  <Steps steps={["DRAFT", "PEER CHECK", "PUBLISH"]} current={1} />
  <Pre>{" "}</Pre>

  <Frame build={section("CALENDAR", "Calendar.astro")} />
  <Pre>{" "}</Pre>
  <Calendar year={2026} month={7} marks={[16, 17]} />
  <Pre>{" "}</Pre>

  <Frame build={section("PAGINATION", "Pagination.astro")} />
  <Pre>{" "}</Pre>
  <Pagination current={6} total={20} href={(n) => `/?page=${n}`} />
  <Pre>{" "}</Pre>

  <Frame build={section("KBD", "Kbd.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{"press "}<Kbd keys={["/"]} />{" to search, "}<Kbd keys={["CTRL", "K"]} />{
" for the palette"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TABS", "Tabs.astro")} />
  <Pre>{" "}</Pre>
  <Tabs labels={["NIX", "NPM", "MANUAL"]}>
    <Fragment slot="tab-0">
      <Pre>{"$ nix develop"}</Pre>
      <Pre>{"$ npm run dev"}</Pre>
    </Fragment>
    <Fragment slot="tab-1">
      <Pre>{"$ npm install"}</Pre>
      <Pre>{"$ npm run dev"}</Pre>
    </Fragment>
    <Fragment slot="tab-2">
      <Pre>{"clone the repo and bring your own node >= 22.12"}</Pre>
    </Fragment>
  </Tabs>
  <Pre>{" "}</Pre>

  <Frame build={section("BREADCRUMBS", "Breadcrumbs.astro")} />
  <Pre>{" "}</Pre>
  <Breadcrumbs filed="/INFO/GRAPH/ENTROPY/BOUND" />
  <Pre>{" "}</Pre>

  <Frame build={section("DIFF", "Diff.astro")} />
  <Diff code={`@@ -1,3 +1,4 @@\n export function pad(s: unknown, n: number): strin
g {\n-  return String(s).padEnd(n);\n+  const str = String(s ?? "");\n+  return st
r + " ".repeat(Math.max(0, n - len(str)));\n }`} />

  <Frame build={section("MENU", "Menu.astro")} />
  <Pre>{" "}</Pre>
  <Menu label="ACTIONS" items={[
    { label: "COPY LINK" },
    { label: "DOWNLOAD .MD" },
    { label: "VIEW SOURCE", href: "https://github.com/" },
    { label: "REPORT DRIFT" },
  ]} />
  <Pre>{" "}</Pre>
  <Pre>{" "}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TOOLTIP", "Tooltip.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{"frame font "}<Tooltip text="Cascadia Mono - every glyph measured against 
the 0 advance before joining the grid" />{"   threshold "}<Tooltip text="the gauge
 flips its status word here" label="i" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SLIDER", "Slider.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("SQUELCH", LABEL_W)}<Slider name="demo-squelch" value={35} cells={24} 
/></Pre>
  <Pre>{pad("GAIN", LABEL_W)}<Slider name="demo-gain" value={70} min={0} max={100}
 step={5} cells={24} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SWITCH", "Switch.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Switch label="AUTO-ACK INCOMING" name="demo-autoack" checked /></Pre>
  <Pre><Switch label="BEACON MODE" name="demo-beacon" /></Pre>
  <Pre><Switch label="DISABLED RELAY" name="demo-relay" disabled /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("NUMBER STEPPER", "NumberStepper.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("POWER (W)", LABEL_W)}<NumberStepper name="demo-power" value={25} min=
{0} max={100} step={5} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("DIALOG", "Dialog.astro")} />
  <Pre>{" "}</Pre>
  <Pre><span data-dialog-open="demo-dialog"><Button label="OPEN TRANSMISSION LOG" 
variant="primary" /></span></Pre>
  <Dialog id="demo-dialog" title="TRANSMISSION LOG">
    <Pre>{"2026-07-17 09:41  N0 ACK RECEIVED"}</Pre>
    <Pre>{"2026-07-17 09:38  BEACON SENT ON BRAVO"}</Pre>
    <Pre>{"2026-07-17 09:12  CHANNEL SCAN COMPLETE"}</Pre>
  </Dialog>
  <Pre>{" "}</Pre>

  <Frame build={section("TOAST", "Toast.astro")} />
  <Pre>{" "}</Pre>
  <Pre><span id="toast-ok"><Button label="QUEUE" variant="primary" /></span>{"  "}
<span id="toast-error"><Button label="JAM" /></span>{"  "}<span id="toast-pending"
><Button label="HOLD" /></span></Pre>
  <Pre>{" "}</Pre>

  <Frame build={(w) => rule(w)} />
</ArticleLayout>

<script>
  import type { StatusVariant } from "../components/Status/Status";

  const wire = (id: string, message: string, variant: StatusVariant) =>
    document.querySelector(`#${id} .btn`)?.addEventListener("click", () => window.
ooknetToast?.(message, variant));

  wire("toast-ok", "TRANSMISSION QUEUED", "ok");
  wire("toast-error", "FREQUENCY OUT OF BAND", "error");
  wire("toast-pending", "AWAITING PEER CHECK", "pending");
</script>


---
import ArticleLayout from "../layouts/Articl
eLayout/ArticleLayout.astro";
import TopHeader from "../components/TopHead
er/TopHeader.astro";
import Frame from "../components/Frame/Frame
.astro";
import Pre from "../components/Pre/Pre.astro
";
import Button from "../components/Button/But
ton.astro";
import TextField from "../components/TextFie
ld/TextField.astro";
import Checkbox from "../components/Checkbox
/Checkbox.astro";
import Radio from "../components/Radio/Radio
.astro";
import Select from "../components/Select/Sel
ect.astro";
import FormFrame from "../components/FormFra
me/FormFrame.astro";
import type { Field } from "../components/Fo
rmFrame/FormFrame";
import Tree from "../components/Tree/Tree.as
tro";
import type { TreeNode } from "../components
/Tree/Tree";
import Progress from "../components/Progress
/Progress.astro";
import Spinner from "../components/Spinner/S
pinner.astro";
import Status from "../components/Status/Sta
tus.astro";
import TableOfContents from "../components/T
ableOfContents/TableOfContents.astro";
import Accordion from "../components/Accordi
on/Accordion.astro";
import Tabs from "../components/Tabs/Tabs.as
tro";
import Breadcrumbs from "../components/Bread
crumbs/Breadcrumbs.astro";
import Timeline from "../components/Timeline
/Timeline.astro";
import type { TimelineEntry } from "../compo
nents/Timeline/Timeline";
import Kbd from "../components/Kbd/Kbd.astro
";
import Gauge from "../components/Gauge/Gauge
.astro";
import Sparkline from "../components/Sparkli
ne/Sparkline.astro";
import BarChart from "../components/BarChart
/BarChart.astro";
import BigNumber from "../components/BigNumb
er/BigNumber.astro";
import Panel from "../components/Panel/Panel
.astro";
import KeyValue from "../components/KeyValue
/KeyValue.astro";
import Banner from "../components/Banner/Ban
ner.astro";
import Steps from "../components/Steps/Steps
.astro";
import Calendar from "../components/Calendar
/Calendar.astro";
import Pagination from "../components/Pagina
tion/Pagination.astro";
import Switch from "../components/Switch/Swi
tch.astro";
import NumberStepper from "../components/Num
berStepper/NumberStepper.astro";
import Dialog from "../components/Dialog/Dia
log.astro";
import Menu from "../components/Menu/Menu.as
tro";
import Tooltip from "../components/Tooltip/T
ooltip.astro";
import Slider from "../components/Slider/Sli
der.astro";
import Diff from "../components/Diff/Diff.as
tro";
import { rule, ruleD, row2, pad } from "../l
ib/ascii";

const section = (title: string, right: strin
g) => (w: number) =>
  [row2(title, right, w), ruleD(w)].join("\n
");

const LABEL_W = 12;

const REPORT_FIELDS: Field[] = [
  { kind: "text", label: "CALLSIGN", name: "
callsign", cells: 26 },
  { kind: "text", label: "FREQUENCY", name: 
"frequency", cells: 26 },
  { kind: "select", label: "CHANNEL", name: 
"channel", options: ["ALPHA", "BRAVO", "OOKN
ET-9"], cells: 20, value: "ALPHA" },
  { kind: "gap" },
  { kind: "radios", label: "PRIORITY", name:
 "priority", options: ["ROUTINE", "URGENT", 
"FLASH"], value: "ROUTINE" },
  { kind: "gap" },
  { kind: "checkbox", label: "ENCRYPT TRANSM
ISSION", name: "encrypt", checked: true },
  { kind: "checkbox", label: "NOTIFY ON REPL
Y", name: "notify" },
  { kind: "gap" },
  { kind: "textarea", label: "MESSAGE", name
: "message", rows: 4 },
  { kind: "gap" },
  { kind: "buttons", buttons: [{ label: "TRA
NSMIT", variant: "primary" }, { label: "CLEA
R", type: "reset" }] },
];

const DEMO_HEADINGS = [
  { depth: 1, slug: "buttons", text: "Button
s" },
  { depth: 1, slug: "text-fields", text: "Te
xt fields" },
  { depth: 1, slug: "toggles", text: "Toggle
s" },
  { depth: 2, slug: "checkboxes", text: "Che
ckboxes" },
  { depth: 2, slug: "radios", text: "Radios"
 },
  { depth: 1, slug: "form-frame", text: "For
m frame" },
];

const HISTORY: TimelineEntry[] = [
  { date: "2026-07-16", title: "FILED /WEBSI
TE", desc: "style sheet - exercises every pi
peline construct", href: "/docs/ooknet-org/s
tyle-sheet/" },
  { date: "2026-04-27", title: "FILED /AI", 
desc: "using ai to troubleshoot and resolve 
issues", href: "/notes/ai/using-ai-to-troubl
eshoot/" },
  { date: "2026-04-25", title: "FILED /KB", 
href: "/kb/windows/collect-data-tss/" },
  { date: "2026-04-19", title: "FILED /GRAPH
S", desc: "entropy bounds in sparse graphs",
 href: "/notes/graphs/entropy-bounds/" },
];

const FILED_TREE: TreeNode[] = [
  {
    label: "/NOTES",
    children: [
      { label: "AI", children: [{ label: "US
ING AI TO TROUBLESHOOT", href: "/notes/ai/us
ing-ai-to-troubleshoot/" }] },
      { label: "GRAPHS", children: [{ label:
 "ENTROPY BOUNDS", href: "/notes/graphs/entr
opy-bounds/" }] },
    ],
  },
  {
    label: "/KB",
    children: [{ label: "WINDOWS", children:
 [{ label: "COLLECT DATA (TSS)", href: "/kb/
windows/collect-data-tss/" }] }],
  },
];
---
<ArticleLayout title="OOKNET KB - Components
"
  description="The OOKNET ASCII component li
brary - every frame, chart, and control the 
design system ships, demonstrated live.">
  <TopHeader />
  <Frame build={(w) => [row2("COMPONENT INDE
X", "DESIGN SYSTEM v0.1", w), ruleD(w)].join
("\n")} />
  <Pre>{" "}</Pre>

  <Frame build={section("BUTTONS", "Button.a
stro")} />
  <Pre>{" "}</Pre>
  <Pre><Button label="SUBMIT" variant="prima
ry" />{"  "}<Button label="CANCEL" />{"  "}<
Button label="DISABLED" disabled />{"  "}<Bu
tton label="INDEX" href="/" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TEXT FIELDS", "Text
Field.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("CALLSIGN", LABEL_W)}<TextField 
name="demo-callsign" cells={20} /></Pre>
  <Pre>{pad("PASSPHRASE", LABEL_W)}<TextFiel
d name="demo-passphrase" cells={20} type="pa
ssword" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TOGGLES", "Checkbox
.astro / Radio.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Checkbox label="ENCRYPT TRANSMISSION
" name="demo-encrypt" checked /></Pre>
  <Pre><Checkbox label="NOTIFY ON REPLY" nam
e="demo-notify" /></Pre>
  <Pre><Checkbox label="DISABLED OPTION" nam
e="demo-disabled" disabled /></Pre>
  <Pre>{" "}</Pre>
  <Pre><Radio label="ROUTINE" name="demo-pri
ority" value="routine" checked /></Pre>
  <Pre><Radio label="URGENT" name="demo-prio
rity" value="urgent" /></Pre>
  <Pre><Radio label="FLASH" name="demo-prior
ity" value="flash" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SELECT", "Select.as
tro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("CHANNEL", LABEL_W)}<Select name
="demo-channel" cells={20} options={["ALPHA"
, "BRAVO", "OOKNET-9"]} value="ALPHA" /></Pr
e>
  <Pre>{" "}</Pre>

  <Frame build={section("FORM FRAME", "FormF
rame.astro")} />
  <Pre>{" "}</Pre>
  <FormFrame title="FIELD REPORT" fields={RE
PORT_FIELDS} />
  <Pre>{" "}</Pre>
  <Pre><Status variant="ok" message="TRANSMI
SSION QUEUED" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TREE", "Tree.astro"
)} />
  <Pre>{" "}</Pre>
  <Tree nodes={FILED_TREE} />
  <Pre>{" "}</Pre>

  <Frame build={section("PROGRESS", "Progres
s.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("REINDEX", LABEL_W)}<Progress va
lue={57} /></Pre>
  <Pre>{pad("UPLINK", LABEL_W)}<Progress val
ue={100} /></Pre>
  <Pre>{pad("DECAY", LABEL_W)}<Progress valu
e={8} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("STATUS", "Status.as
tro / Spinner.astro")} />
  <Pre>{" "}</Pre>
  <Pre><Status variant="ok" message="TRANSMI
SSION QUEUED" /></Pre>
  <Pre><Status variant="error" message="FREQ
UENCY OUT OF BAND" /></Pre>
  <Pre><Status variant="pending" message="AW
AITING PEER CHECK" /></Pre>
  <Pre><Spinner />{" SYNCING INDEX"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TABLE OF CONTENTS",
 "TableOfContents.astro")} />
  <TableOfContents headings={DEMO_HEADINGS} 
/>
  <Pre>{" "}</Pre>

  <Frame build={section("ACCORDION", "Accord
ion.astro")} />
  <Pre>{" "}</Pre>
  <Accordion label="APPENDIX A - CELL MEASUR
EMENTS">
    <p>Cascadia Mono "0" advance at 13px: 7.
617px. IBM Plex Mono drifts on box-drawing g
lyphs, which is why it never draws frames.</
p>
  </Accordion>
  <Accordion label="APPENDIX B - DROPPED GLY
PH SETS">
    <p>Heavy box-drawing (U+250F etc.) fell 
back to a wider face and bent every border i
t touched. Dropped from the grid.</p>
  </Accordion>
  <Pre>{" "}</Pre>

  <Frame build={section("TIMELINE", "Timelin
e.astro")} />
  <Pre>{" "}</Pre>
  <Timeline entries={HISTORY} />
  <Pre>{" "}</Pre>

  <Frame build={section("GAUGE", "Gauge.astr
o")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("SIGNAL", LABEL_W)}<Gauge value=
{47} threshold={70} /></Pre>
  <Pre>{pad("BUFFER", LABEL_W)}<Gauge value=
{85} threshold={70} /></Pre>
  <Pre>{pad("DECAY", LABEL_W)}<Gauge value={
8} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SPARKLINE", "Sparkl
ine.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("UPLINK", LABEL_W)}<Sparkline va
lues={[3, 5, 9, 4, 6, 12, 8, 7, 11, 14, 9, 6
]} />{"  14 PEAK"}</Pre>
  <Pre>{pad("NOISE", LABEL_W)}<Sparkline val
ues={[2, 2, 3, 2, 2, 2, 4, 3, 2, 2, 3, 2]} /
>{"   4 PEAK"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("BAR CHART", "BarCha
rt.astro")} />
  <Pre>{" "}</Pre>
  <BarChart items={[
    { label: "NORTH", value: 42 },
    { label: "EAST", value: 17 },
    { label: "SOUTH", value: 29 },
    { label: "WEST", value: 8 },
  ]} />
  <Pre>{" "}</Pre>

  <Frame build={section("BIG NUMBER", "BigNu
mber.astro")} />
  <Pre>{" "}</Pre>
  <BigNumber value="14,230" label="KHZ - PRI
MARY RELAY FREQUENCY" />
  <Pre>{" "}</Pre>

  <Frame build={section("PANEL", "Panel.astr
o")} />
  <Pre>{" "}</Pre>
  <Panel title="RELAY LOG">
    <Pre>{pad("LAST SWEEP", LABEL_W)}<Sparkl
ine values={[3, 5, 9, 4, 6, 12, 8, 7]} /></P
re>
    <Pre>{pad("SIGNAL", LABEL_W)}<Gauge valu
e={47} threshold={70} /></Pre>
  </Panel>
  <Pre>{" "}</Pre>

  <Frame build={section("KEY VALUE", "KeyVal
ue.astro")} />
  <Pre>{" "}</Pre>
  <KeyValue entries={[
    ["STATION", "OOKNET-9"],
    ["FREQUENCY", "14.230 MHZ"],
    ["REMARKS", "relay via the northern repe
ater when the direct path fades below thresh
old"],
  ]} />
  <Pre>{" "}</Pre>

  <Frame build={section("BANNER", "Banner.as
tro")} />
  <Pre>{" "}</Pre>
  <Banner variant="notice" message="schedule
d maintenance window sunday 02:00-04:00 UTC"
 />
  <Banner variant="warning" message="frequen
cy drift detected on channel bravo - recalib
rate before transmitting" />
  <Banner variant="error" message="uplink lo
st" />
  <Pre>{" "}</Pre>

  <Frame build={section("STEPS", "Steps.astr
o")} />
  <Pre>{" "}</Pre>
  <Steps steps={["DRAFT", "PEER CHECK", "PUB
LISH"]} current={1} />
  <Pre>{" "}</Pre>

  <Frame build={section("CALENDAR", "Calenda
r.astro")} />
  <Pre>{" "}</Pre>
  <Calendar year={2026} month={7} marks={[16
, 17]} />
  <Pre>{" "}</Pre>

  <Frame build={section("PAGINATION", "Pagin
ation.astro")} />
  <Pre>{" "}</Pre>
  <Pagination current={6} total={20} href={(
n) => `/?page=${n}`} />
  <Pre>{" "}</Pre>

  <Frame build={section("KBD", "Kbd.astro")}
 />
  <Pre>{" "}</Pre>
  <Pre>{"press "}<Kbd keys={["/"]} />{" to s
earch, "}<Kbd keys={["CTRL", "K"]} />{" for 
the palette"}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TABS", "Tabs.astro"
)} />
  <Pre>{" "}</Pre>
  <Tabs labels={["NIX", "NPM", "MANUAL"]}>
    <Fragment slot="tab-0">
      <Pre>{"$ nix develop"}</Pre>
      <Pre>{"$ npm run dev"}</Pre>
    </Fragment>
    <Fragment slot="tab-1">
      <Pre>{"$ npm install"}</Pre>
      <Pre>{"$ npm run dev"}</Pre>
    </Fragment>
    <Fragment slot="tab-2">
      <Pre>{"clone the repo and bring your o
wn node >= 22.12"}</Pre>
    </Fragment>
  </Tabs>
  <Pre>{" "}</Pre>

  <Frame build={section("BREADCRUMBS", "Brea
dcrumbs.astro")} />
  <Pre>{" "}</Pre>
  <Breadcrumbs filed="/INFO/GRAPH/ENTROPY/BO
UND" />
  <Pre>{" "}</Pre>

  <Frame build={section("DIFF", "Diff.astro"
)} />
  <Diff code={`@@ -1,3 +1,4 @@\n export func
tion pad(s: unknown, n: number): string {\n-
  return String(s).padEnd(n);\n+  const str 
= String(s ?? "");\n+  return str + " ".repe
at(Math.max(0, n - len(str)));\n }`} />

  <Frame build={section("MENU", "Menu.astro"
)} />
  <Pre>{" "}</Pre>
  <Menu label="ACTIONS" items={[
    { label: "COPY LINK" },
    { label: "DOWNLOAD .MD" },
    { label: "VIEW SOURCE", href: "https://g
ithub.com/" },
    { label: "REPORT DRIFT" },
  ]} />
  <Pre>{" "}</Pre>
  <Pre>{" "}</Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("TOOLTIP", "Tooltip.
astro")} />
  <Pre>{" "}</Pre>
  <Pre>{"frame font "}<Tooltip text="Cascadi
a Mono - every glyph measured against the 0 
advance before joining the grid" />{"   thre
shold "}<Tooltip text="the gauge flips its s
tatus word here" label="i" /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SLIDER", "Slider.as
tro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("SQUELCH", LABEL_W)}<Slider name
="demo-squelch" value={35} cells={24} /></Pr
e>
  <Pre>{pad("GAIN", LABEL_W)}<Slider name="d
emo-gain" value={70} min={0} max={100} step=
{5} cells={24} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("SWITCH", "Switch.as
tro")} />
  <Pre>{" "}</Pre>
  <Pre><Switch label="AUTO-ACK INCOMING" nam
e="demo-autoack" checked /></Pre>
  <Pre><Switch label="BEACON MODE" name="dem
o-beacon" /></Pre>
  <Pre><Switch label="DISABLED RELAY" name="
demo-relay" disabled /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("NUMBER STEPPER", "N
umberStepper.astro")} />
  <Pre>{" "}</Pre>
  <Pre>{pad("POWER (W)", LABEL_W)}<NumberSte
pper name="demo-power" value={25} min={0} ma
x={100} step={5} /></Pre>
  <Pre>{" "}</Pre>

  <Frame build={section("DIALOG", "Dialog.as
tro")} />
  <Pre>{" "}</Pre>
  <Pre><span data-dialog-open="demo-dialog">
<Button label="OPEN TRANSMISSION LOG" varian
t="primary" /></span></Pre>
  <Dialog id="demo-dialog" title="TRANSMISSI
ON LOG">
    <Pre>{"2026-07-17 09:41  N0 ACK RECEIVED
"}</Pre>
    <Pre>{"2026-07-17 09:38  BEACON SENT ON 
BRAVO"}</Pre>
    <Pre>{"2026-07-17 09:12  CHANNEL SCAN CO
MPLETE"}</Pre>
  </Dialog>
  <Pre>{" "}</Pre>

  <Frame build={section("TOAST", "Toast.astr
o")} />
  <Pre>{" "}</Pre>
  <Pre><span id="toast-ok"><Button label="QU
EUE" variant="primary" /></span>{"  "}<span 
id="toast-error"><Button label="JAM" /></spa
n>{"  "}<span id="toast-pending"><Button lab
el="HOLD" /></span></Pre>
  <Pre>{" "}</Pre>

  <Frame build={(w) => rule(w)} />
</ArticleLayout>

<script>
  import type { StatusVariant } from "../com
ponents/Status/Status";

  const wire = (id: string, message: string,
 variant: StatusVariant) =>
    document.querySelector(`#${id} .btn`)?.a
ddEventListener("click", () => window.ooknet
Toast?.(message, variant));

  wire("toast-ok", "TRANSMISSION QUEUED", "o
k");
  wire("toast-error", "FREQUENCY OUT OF BAND
", "error");
  wire("toast-pending", "AWAITING PEER CHECK
", "pending");
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET