{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-ruler",
  "type": "registry:component",
  "title": "Context ruler",
  "description": "What fills a model's context window. Sample data: context of four requests on a 128K scale, split into system, history, tools, docs and output.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-context-ruler"
  ],
  "files": [
    {
      "path": "registry/chartory/components/context-ruler.tsx",
      "type": "registry:component",
      "target": "components/chartory/context-ruler.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Context ruler (Chartory chart 081): sizes xs | s | m | l, laid out again from the data at each\n// size; collection \"hearth\" (default) or \"signal\" (with @chartory/signal, Code and Complete). Data in the type's shape (default: the sample). Docs:\n// https://usechartory.com/docs/charts/context-ruler\nimport { ChartView, type ChartViewProps } from \"@/lib/chartory/charts/chart-view\"\nimport { registerChart } from \"@/lib/chartory/charts/defs\"\nimport { data as sample } from \"@/lib/chartory/charts/types/081-context-ruler/data\"\nimport { def } from \"@/lib/chartory/charts/types/081-context-ruler/layout\"\n\nregisterChart(def, sample)\n\nexport type ContextRulerData = typeof sample\nexport type ContextRulerProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: ContextRulerData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: ContextRulerData[]\n}\n\nexport function ContextRuler(props: ContextRulerProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/081-context-ruler/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/081-context-ruler/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 081 Context window use · sample data (Figma chart/081-context-ruler).\nimport type { ContextRulerData } from \"../../plots/context-ruler\";\n\nexport const data: ContextRulerData = {\n  max: 128,\n  limit: 100,\n  ticks: [0, 32, 64, 96, 128],\n  kinds: [{ label: \"System\", tok: \"data/cat-9\" }, { label: \"History\", tok: \"data/cat-2\" }, { label: \"Tools\", tok: \"data/cat-3\" }, { label: \"Docs\", tok: \"data/cat-5\" }, { label: \"Output\", tok: \"data/primary\" }],\n  rows: [{ label: \"REQ 4812\", segs: [3, 42, 12, 26, 8] }, { label: \"REQ 4809\", segs: [3, 18, 8, 14, 5] }, { label: \"REQ 4801\", segs: [3, 61, 14, 30, 9] }, { label: \"REQ 4795\", segs: [3, 8, 4, 40, 6] }],\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/081-context-ruler/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/081-context-ruler/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 081 Context ruler (Figma chart/081-context-ruler): C.contextRuler on four support-agent requests in a 128K window.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { contextRuler } from \"../../plots/context-ruler\";\nimport { data } from \"./data\";\n\nconst total = (segs: number[]) => segs.reduce((a, b) => a + b, 0);\nconst past = data.rows.filter((r) => total(r.segs) > data.limit);\n\nconst wob = (i: number, step: number) => Math.sin(i * 2.1 + step * 1.7 + 0.4);\n/** Later requests: history, tools, docs and output move (whole K, inside the window); the system prompt stays. */\nfunction update(d0: unknown, step: number): typeof data {\n  const d = d0 as typeof data;\n  let k = 0;\n  return {\n    ...d,\n    rows: d.rows.map((r) => {\n      const segs = r.segs.map((v, j) => (j === 0 ? v : Math.max(1, Math.round(v * (1 + 0.18 * wob(k++, step))))));\n      const over = total(segs) - (d.max - 2);\n      if (over > 0) segs[1] -= over;\n      return { ...r, segs };\n    }),\n  };\n}\n\n/** Hover: one request (its stacked kinds): tokens per kind, the request total in the window. */\nfunction tip(d0: unknown, g: number): TooltipSpec | null {\n  const d = d0 as typeof data, r = d.rows[g];\n  if (!r) return null;\n  const rows = r.segs.flatMap((v, j) => (v ? [{ label: d.kinds[j].label, value: v + \"K\", swatch: d.kinds[j].tok }] : []));\n  return { kind: \"series\", caps: `${r.label} · ${d.max}K WINDOW`, rows, total: { label: total(r.segs) > d.limit ? \"Total · past compaction\" : \"Total\", value: total(r.segs) + \"K\" } };\n}\n\nexport const def: ChartDef = {\n  no: 81,\n  slug: \"context-ruler\",\n  legend: data.kinds.map((k) => [k.tok, k.label]),\n  plot: (K, p, w, d) => contextRuler(K, p, w, (d as typeof data | undefined) ?? data),\n  tip,\n  update,\n  describe: {\n    title: \"Context window use\",\n    summary: `Tokens per request in a ${data.max}K window, compaction at ${data.limit}K: ${data.rows.map((r) => `${r.label} ${total(r.segs)}K`).join(\", \")}; ${past.length} request past the compaction line.`,\n    table: { head: [\"Request\", ...data.kinds.map((k) => k.label + \" (K)\"), \"Total (K)\"], rows: data.rows.map((r) => [r.label, ...r.segs, total(r.segs)]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "part-of-a-whole"
  ],
  "meta": {
    "access": "free",
    "no": 81,
    "family": "Part of a whole"
  }
}