{
  "id": "expert-lens-annotation",
  "name": "Annotation View",
  "theme": "expert-lens",
  "category": "App Shell",
  "description": "A document with a live annotation gutter, where selecting a passage is what creates the note rather than a separate button.",
  "layout": "A 40rem document column with a 300px gutter of notes to its right; each note connects to its passage with a hairline leader and highlights the passage on hover.",
  "modules": [
    {
      "key": "bar",
      "name": "Document bar",
      "html": "\n<header class=\"db\"><span class=\"db-f\">0412-revision-2.pdf</span><div class=\"db-t\"><button type=\"button\" class=\"on\">Annotate</button><button type=\"button\">Read</button><button type=\"button\">Compare</button></div><span class=\"db-c\">14 notes · 3 unresolved</span></header>"
    },
    {
      "key": "doc",
      "name": "Document",
      "html": "\n<article class=\"doc\">\n  <h2>4. Evaluation</h2>\n  <p>We evaluate on three public traces. <mark class=\"m1\">Two contain a documented regime change; the third is included as a control.</mark> All three are downsampled to a common interval before evaluation.</p>\n  <p>Table 2 reports the mean absolute calibration error for the fixed-window baseline and for the adaptive scheme. <mark class=\"m2\">The adaptive scheme improves on the baseline by 18% on average across the three traces.</mark></p>\n  <p>We note that improvement is concentrated in the two traces containing a regime change, and that <mark class=\"m3\">performance on the control trace is within noise of the baseline</mark>, which is the expected behaviour.</p>\n</article>"
    },
    {
      "key": "notes",
      "name": "Annotation gutter",
      "html": "\n<aside class=\"ann\">\n  <article class=\"an open\"><header><b>K. Adeyemi</b><time>11 May</time></header><p>If the control is within noise, averaging across all three understates the effect on the cases that matter. Report the two separately.</p><div class=\"an-a\"><button type=\"button\">Resolve</button><button type=\"button\">Reply</button></div></article>\n  <article class=\"an\"><header><b>R. Vasquez</b><time>12 May</time></header><p>Agreed. The 18% figure is doing the paper a disservice.</p></article>\n  <article class=\"an res\"><header><b>M. Feng</b><time>12 May</time><span class=\"tag\">Resolved</span></header><p>Downsampling interval should be stated. Authors added it in revision 2.</p></article>\n</aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "expert-lens-annotation",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:34:32+09:00",
    "updatedAt": "2026-08-29T18:34:32+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/expert-lens-annotation.json",
  "structure": "A 40rem document column with a 300px gutter of notes to its right; each note connects to its passage with a hairline leader and highlights the passage on hover.",
  "html": "<div class=\"dz dz-expert-lens-annotation\" data-design=\"expert-lens-annotation\" data-theme=\"expert-lens\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Document bar\">\n<header class=\"db\"><span class=\"db-f\">0412-revision-2.pdf</span><div class=\"db-t\"><button type=\"button\" class=\"on\">Annotate</button><button type=\"button\">Read</button><button type=\"button\">Compare</button></div><span class=\"db-c\">14 notes · 3 unresolved</span></header></section><div class=\"wrap\"><section class=\"dz-mod\" data-mod=\"doc\" aria-label=\"Document\">\n<article class=\"doc\">\n  <h2>4. Evaluation</h2>\n  <p>We evaluate on three public traces. <mark class=\"m1\">Two contain a documented regime change; the third is included as a control.</mark> All three are downsampled to a common interval before evaluation.</p>\n  <p>Table 2 reports the mean absolute calibration error for the fixed-window baseline and for the adaptive scheme. <mark class=\"m2\">The adaptive scheme improves on the baseline by 18% on average across the three traces.</mark></p>\n  <p>We note that improvement is concentrated in the two traces containing a regime change, and that <mark class=\"m3\">performance on the control trace is within noise of the baseline</mark>, which is the expected behaviour.</p>\n</article></section><section class=\"dz-mod\" data-mod=\"notes\" aria-label=\"Annotation gutter\">\n<aside class=\"ann\">\n  <article class=\"an open\"><header><b>K. Adeyemi</b><time>11 May</time></header><p>If the control is within noise, averaging across all three understates the effect on the cases that matter. Report the two separately.</p><div class=\"an-a\"><button type=\"button\">Resolve</button><button type=\"button\">Reply</button></div></article>\n  <article class=\"an\"><header><b>R. Vasquez</b><time>12 May</time></header><p>Agreed. The 18% figure is doing the paper a disservice.</p></article>\n  <article class=\"an res\"><header><b>M. Feng</b><time>12 May</time><span class=\"tag\">Resolved</span></header><p>Downsampling interval should be stated. Authors added it in revision 2.</p></article>\n</aside></section></div>\n</div>",
  "css": "\n.dz-expert-lens-annotation { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-expert-lens-annotation .db { display: flex; align-items: center; gap: 20px; padding: 12px 26px; background: var(--card); }\n.dz-expert-lens-annotation .db-f { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); }\n.dz-expert-lens-annotation .db-t { display: flex; gap: 4px; }\n.dz-expert-lens-annotation .db-t button { font: inherit; font-size: 12.5px; padding: 6px 14px; border: 0; border-radius: var(--pv-radius-sm); background: none; color: var(--muted-foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-expert-lens-annotation .db-t button.on { background: var(--muted); color: var(--primary); }\n.dz-expert-lens-annotation .db-c { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }\n.dz-expert-lens-annotation .wrap { display: grid; grid-template-columns: minmax(0, 40rem) 300px; gap: 30px; padding: 26px 26px 30px; }\n.dz-expert-lens-annotation .doc h2 { font-family: var(--pv-display); font-size: 19px; font-weight: 500; margin: 0 0 14px; }\n.dz-expert-lens-annotation .doc p { margin: 0 0 16px; font-size: 15px; line-height: 1.82; }\n.dz-expert-lens-annotation .doc mark { background: color-mix(in srgb, var(--primary) 18%, transparent); color: inherit; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 55%, transparent); padding: 1px 0; transition: background var(--dur) var(--ease); }\n.dz-expert-lens-annotation .doc mark:hover { background: color-mix(in srgb, var(--primary) 34%, transparent); }\n.dz-expert-lens-annotation .m3 { background: color-mix(in srgb, var(--muted-foreground) 18%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--muted-foreground) 45%, transparent); }\n.dz-expert-lens-annotation .an { background: var(--card); border-radius: var(--pv-radius); padding: 13px 15px; margin-bottom: 12px; position: relative; }\n.dz-expert-lens-annotation .an::before { content: \"\"; position: absolute; left: -18px; top: 18px; width: 12px; height: 1px; background: var(--border); }\n.dz-expert-lens-annotation .an.open { box-shadow: inset 2px 0 0 var(--primary); }\n.dz-expert-lens-annotation .an header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }\n.dz-expert-lens-annotation .an b { font-size: 12.5px; font-weight: 600; }\n.dz-expert-lens-annotation .an time { font-size: 11px; color: var(--muted-foreground); }\n.dz-expert-lens-annotation .tag { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chart-1); }\n.dz-expert-lens-annotation .an p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-expert-lens-annotation .an.res p { opacity: .6; }\n.dz-expert-lens-annotation .an-a { display: flex; gap: 6px; margin-top: 10px; }\n.dz-expert-lens-annotation .an-a button { font: inherit; font-size: 11.5px; padding: 5px 12px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-expert-lens-annotation *, .dz-expert-lens-annotation *::before, .dz-expert-lens-annotation *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/expert-lens.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}