canvas.html

<div class="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
  <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/50 p-2.5">
    <div class="canvas-toggles flex flex-wrap gap-1.5">
      <label class="has-[:checked]:bg-pink-500/20 has-[:checked]:text-pink-300 has-[:checked]:ring-1 has-[:checked]:ring-pink-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-blocks" class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-pink-400"></span>Blocks
      </label>
      <label class="has-[:checked]:bg-cyan-500/20 has-[:checked]:text-cyan-300 has-[:checked]:ring-1 has-[:checked]:ring-cyan-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-paragraphs" checked class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-cyan-400"></span>Paragraphs
      </label>
      <label class="has-[:checked]:bg-violet-500/20 has-[:checked]:text-violet-300 has-[:checked]:ring-1 has-[:checked]:ring-violet-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-lines" checked class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-violet-400"></span>Lines
      </label>
      <label class="has-[:checked]:bg-emerald-500/20 has-[:checked]:text-emerald-300 has-[:checked]:ring-1 has-[:checked]:ring-emerald-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-words" checked class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-emerald-400"></span>Words
      </label>
      <label class="has-[:checked]:bg-amber-500/20 has-[:checked]:text-amber-300 has-[:checked]:ring-1 has-[:checked]:ring-amber-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-symbols" class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-amber-400"></span>Symbols
      </label>
      <label class="has-[:checked]:bg-red-500/20 has-[:checked]:text-red-300 has-[:checked]:ring-1 has-[:checked]:ring-red-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
        <input type="checkbox" id="cb-whitespace" class="sr-only">
        <span class="inline-block h-2 w-2 rounded-full bg-red-400"></span>Whitespace
      </label>
    </div>
    <div class="flex items-center gap-2">
      <div class="flex items-center gap-1 rounded-lg border border-border bg-background px-2 py-1">
        <button id="btn-zoom-out" class="flex h-6 w-6 items-center justify-center rounded text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" title="Zoom Out">−</button>
        <span id="zoom-level-text" class="min-w-[3ch] text-center text-xs font-semibold text-foreground">100%</span>
        <button id="btn-zoom-in" class="flex h-6 w-6 items-center justify-center rounded text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" title="Zoom In">+</button>
      </div>
      <button id="btn-zoom-reset" class="rounded-md border border-border bg-background px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">Reset</button>
    </div>
  </div>

  <div class="grid grid-cols-1 gap-3 lg:grid-cols-[3fr_2fr]">
    <div id="canvas-viewport" class="canvas-viewport-container relative flex min-h-[400px] max-h-[600px] cursor-grab select-none items-center justify-center overflow-hidden rounded-lg border border-border bg-background">
      <div class="viewport-wrapper relative inline-block max-w-full" style="transform-origin:center center">
        <img id="ocr-svg-image" class="block max-w-full select-none" style="-webkit-user-drag:none">
        <svg id="ocr-svg-overlay" class="pointer-events-auto absolute inset-0 h-full w-full"></svg>
      </div>
      <div id="canvas-placeholder-msg" class="absolute text-sm font-medium text-muted-foreground select-none pointer-events-none">No image loaded</div>
    </div>

    <div class="flex max-h-[600px] flex-col gap-3 overflow-y-auto rounded-lg border border-border bg-card p-4">
      <div class="border-b border-border pb-2">
        <span class="text-sm font-semibold text-foreground">Properties</span>
      </div>
      <div id="details-content-area" class="flex-1">
        <div class="flex h-full min-h-[200px] items-center justify-center px-2">
          <p class="text-center text-xs text-muted-foreground">Click any element inside the canvas to inspect its properties</p>
        </div>
      </div>
    </div>
  </div>
</div>