Mermaid

import type { ReactElement } from "react";
import { Mermaid, type MermaidLayout } from "@bosunkit/components/mermaid";
export const description: string =
  "The supplied architecture reference, expressed as editable Mermaid with authored geometry: neutral clients and stores, blue services, contrasting content paths and a dashed snapshot dependency.";

// Coordinates describe the reference's diagram geometry, not CSS sizes. The shared renderer scales
// the complete drawing to the reading column and uses foundation tokens for every visual role.
const layout: MermaidLayout = {
  width: 1200,
  height: 512,
  boxes: {
    clients: { x: 39, y: 39, width: 231, height: 307, labelInset: [20, 11.5] },
    antique: { x: 58, y: 110, width: 92, height: 48, labelInset: [12, 10] },
    developers: { x: 58, y: 193, width: 192, height: 48, labelInset: [12, 10] },
    jobs: { x: 58, y: 276, width: 176, height: 48, labelInset: [12, 10] },
    server: { x: 752, y: 39, width: 169, height: 63, labelInset: [20, 16.5] },
    daemon: { x: 296, y: 266, width: 185, height: 80, labelInset: [20, 12.5] },
    cache: { x: 573, y: 159, width: 169, height: 187, labelInset: [20, 10.5] },
    spanner: { x: 993, y: 39, width: 169, height: 100, labelInset: [20, 16] },
    storage: { x: 993, y: 159, width: 169, height: 80, labelInset: [20, 16] },
    snapshot: { x: 296, y: 411, width: 185, height: 62, labelInset: [20, 20] },
  },
  routes: {
    control: {
      points: [
        [270, 70],
        [733, 70],
      ],
      label: { x: 296, y: 44.5, width: 440 },
    },
    content1: {
      points: [
        [250, 217],
        [567, 217],
      ],
      label: { x: 296, y: 188.5, width: 260 },
    },
    content2: {
      points: [
        [234, 300],
        [290, 300],
      ],
    },
    content3: {
      points: [
        [481, 306],
        [567, 306],
      ],
      label: { x: 499, y: 273.1, width: 80 },
    },
    content4: {
      points: [
        [742, 261],
        [837, 261],
        [837, 109],
      ],
      label: { x: 760, y: 228.1, width: 80 },
    },
    metadata: {
      points: [
        [921, 70],
        [987, 70],
      ],
    },
    files: {
      points: [
        [921, 70],
        [954, 70],
        [954, 199],
        [987, 199],
      ],
    },
    seed: {
      points: [
        [388, 411],
        [388, 352],
      ],
      label: { x: 323, y: 371, width: 145, mask: true },
    },
  },
};

export default function ReportArchitecture(): ReactElement {
  return (
    <Mermaid
      label="Reference architecture. Clients use scion-server for branches, history and diffs. Developer machines retrieve content through scion-cache; cluster jobs use scion-daemon. Cache misses reach the server. A periodic snapshot seeds the daemon."
      caption="Architecture from the supplied visual reference. Control connections are neutral, content paths contrast, and snapshot seeding is dashed."
      layout={layout}
      chart={`flowchart LR
  subgraph clients[Clients]
    antique["<b>Antique</b>"]:::client
    developers["<b>Developer machines</b>"]:::client
    jobs["<b>CI and cluster jobs</b>"]:::client
  end
  server["<b>scion-server</b>"]:::service
  daemon["<b>scion-daemon</b><br/>Per node"]:::service
  cache["<b>scion-cache</b><br/>Regional"]:::service
  spanner["<b>Spanner</b><br/>Changesets,<br/>branches, trees"]:::storage
  storage["<b>Cloud Storage</b><br/>File contents"]:::storage
  snapshot["<b>Periodic snapshot</b>"]:::storage

  clients control@-->|"<b>Branches, history, diffs: upload, commit, land</b><br/><small>Control plane · every client</small>"| server
  developers content1@-->|"<b>Trees and file contents</b><br/><small>Object plane</small>"| cache
  jobs content2@--> daemon
  daemon content3@-->|"<b>Misses</b>"| cache
  cache content4@-->|"<b>Misses</b>"| server
  server metadata@--> spanner
  server files@--> storage
  snapshot seed@-.->|"<b>Seeds new nodes</b>"| daemon
  class content1,content2,content3,content4 dataflow`}
    />
  );
}

import type { ReactElement } from "react";
import { Mermaid, type MermaidDetail } from "@bosunkit/components/mermaid";

export const description: string =
  "A diagram whose parts open their details: point at or tab to bosund for a tooltip, press the Writes line or the " +
  "Replies line for a popover, and press SQLite for a dialog.";

const CHART: string =
  'flowchart LR\n  crew["Crew"] -->|"asks"| bosund["bosund"]\n  bosund -->|"replies"| crew\n  bosund --> db[(SQLite)]';

const DETAILS: Readonly<Record<string, MermaidDetail>> = {
  bosund: { open: "tooltip", title: "bosund", content: "The daemon on the vessel: voice, chat and every lookout." },
  "crew-->bosund": { open: "popover", title: "Asks", content: "By voice at the helm, or in the chat on a phone." },
  "bosund-->crew": { open: "popover", title: "Replies", content: "Spoken and written, usually within two seconds." },
  "bosund-->db": { open: "popover", title: "Writes", content: "Readings to history.db, the ship's log to bosun.db." },
  db: {
    open: "dialog",
    title: "SQLite",
    content:
      "Five files in the data directory: bosun.db for what the crew typed, history.db for what the instruments " +
      "measured, cep.db, state.db and cache.db for what can be rebuilt.",
  },
};

export default function Details(): ReactElement {
  return <Mermaid label="The crew ask bosund, which replies and writes to SQLite." chart={CHART} details={DETAILS} />;
}

import type { ReactElement } from "react";
import { Mermaid } from "@bosunkit/components/mermaid";
export const description: string = "An illustrative review flow, with source disclosure and expand/fit controls.";
export default function ReviewFlow(): ReactElement {
  return (
    <Mermaid
      label="Evidence is reviewed before publication; incomplete evidence returns for follow-up."
      chart={
        "flowchart LR\n  Source[Source evidence] --> Review{Reviewed?}\n  Review -->|Yes| Report[Report]\n  Review -->|No| Followup[Follow-up]"
      }
    />
  );
}

import type { ReactElement } from "react";
import { PresentationScope } from "@bosunkit/provider";
import { Mermaid } from "@bosunkit/components/mermaid";
import { ReportGrid } from "@bosunkit/components/report-blocks";
export const description: string = "Independent Day and Night scopes use their own palettes on the same page.";
export default function DiagramScopes(): ReactElement {
  return (
    <ReportGrid>
      <PresentationScope theme="day">
        <Mermaid caption="Day scope" label="Day review flow" chart={"flowchart LR\n  Collect --> Review"} />
      </PresentationScope>
      <PresentationScope theme="night">
        <Mermaid caption="Night scope" label="Night review flow" chart={"flowchart LR\n  Collect --> Review"} />
      </PresentationScope>
    </ReportGrid>
  );
}