# Loami HTML 0.1.3

A dependency-free, compact document toolkit. Geist typography, charcoal/white themes, blue actions, hairline structure, and dense components.

Import once in a complete HTML document:
<script defer src="https://loami.dev/v0.1.3/loami.js"></script>

Use main, headings, paragraphs, details, figures, tables, blockquotes and code normally. Include meta charset and viewport, a document title and html lang.

## Document density and composition
Default to compact, viewport-oriented documents. Use body class="loam-document", a main with header class="loam-document-heading", then loam-tabs class="loam-pages". Keep one clear topic per tab. Put the explanation and its chart or figure beside each other in a div class="loam-grid". Use a short p class="loam-lead" after the title. Use the report starter as the structural reference. Desktop documents fit the viewport; panels can scroll for genuinely long material and phones flow naturally. Do not hide or truncate content to force a fit. Body type defaults to 14px/1.5, heading to about 32px, and main width to 1100px. Keep prose blocks about 65–75 characters wide. Use compact paragraphs, 6px table-cell padding, paginated tables and optional details. Avoid large hero headings, tall padded cards, repeated introductions, a full-width chart followed by the same full-width table, or a long vertical stack of sections. Keep sources, raw data, and methods in separate tabs. Ordinary HTML without the loam-document shell still receives compact styling.

## Components
[
  {
    "tag": "loam-chart",
    "purpose": "Accessible SVG bar, line, area and donut charts with a data table fallback.",
    "attributes": {
      "data-source": "JSON script id",
      "type": "bar | line | area | donut",
      "x": "label field",
      "y": "numeric field",
      "title": "chart title",
      "multiplier": "optional state key set by a range"
    }
  },
  {
    "tag": "loam-table",
    "purpose": "Text-safe data table with sorting, optional filtering, pagination and CSV export.",
    "attributes": {
      "data-source": "JSON script id",
      "searchable": "boolean attribute",
      "page-size": "rows per page; default 10",
      "title": "accessible table name"
    }
  },
  {
    "tag": "loam-range",
    "purpose": "A labelled slider that publishes numeric state and updates bound text and charts.",
    "attributes": {
      "name": "state key",
      "label": "visible label",
      "min": "minimum",
      "max": "maximum",
      "step": "increment",
      "value": "initial number"
    }
  },
  {
    "tag": "loam-tabs",
    "purpose": "Keyboard accessible tabs; put label attributes on immediate child sections.",
    "attributes": {
      "label": "accessible group name"
    }
  },
  {
    "tag": "loam-figure",
    "purpose": "A theme token bridge around your own SVG, canvas, HTML or Anatomy output. It does not generate, sandbox or bundle arbitrary third-party code.",
    "attributes": {}
  },
  {
    "tag": "loam-anatomy",
    "purpose": "A real interactive Anatomy figure, bundled on demand and embedded by offline export. Credited to Ryan, MIT licensed.",
    "attributes": {
      "figure": "watch | message-queue | lru-cache"
    }
  }
]

## Data
Use <script type="application/json" id="sales">[{"month":"Jan","value":24}]</script> and data-source="sales". Keep source scripts outside components. Numeric charts require finite numbers. Donuts require non-negative values and a positive total. Updating JSON? Call Loami.refresh(). For large datasets aggregate before charting. Tables paginate. All source data is included in shared exports.

## Themes
Dark is the default in generated documents; light remains available.
Set data-theme="light|dark|sepia|forest|auto" on html. Explicit file theme wins over local preference. A select with data-loam-theme switches and remembers the selection on that origin. Tokens: --loam-bg, --loam-surface, --loam-text, --loam-muted, --loam-line, --loam-accent, --loam-on-accent, --loam-chart-2, --loam-chart-3, --loam-font, --loam-ui, --loam-width, --loam-size, --loam-leading, --loam-radius. Override tokens in a style after the import; selectors like :root[data-theme=light] can scope a custom palette. Set accent and on-accent as a pair and verify contrast.

## Code blocks
Use pre > code with an optional language-html, language-css, language-javascript, language-json, or language-bash class. Loami enhances code with bundled syntax highlighting, a language label and a copy button. Plain text is supported, too. Call Loami.enhanceCodeBlocks() after inserting or changing code. These controls also work in offline exports. Existing Loam.* APIs remain supported as aliases.

## Interaction
Loami.set(name,value); Loami.state[name]; loam-bind="name" mirrors state into text. loam-range name="factor" label="Multiplier" min="0.5" max="2" step="0.1" value="1" publishes values. A chart multiplier="factor" multiplies y values. loam:input event detail is {name,value}. Loami.setTheme(theme) selects a theme. Loami.refresh() rereads chart/table data. loam:ready is fired once after initialization.

## Sharing
<button data-loam-action="export">Save offline HTML</button> calls Loami.exportHTML(). Programmatic: await Loami.exportHTML({download:false}) returns HTML. The export embeds Loami and data, and retains the selected theme and range values. Table sort/filter and active tab are reset. Arbitrary event listeners are not serialized: custom code must initialize itself on DOMContentLoaded or loam:ready. It does not inline external images, fonts, modules, stylesheets, fetch responses, iframes or third-party dependencies. Keep those inline for a fully offline custom document. Export runs trusted document JavaScript; HTML is executable content. No backend, accounts, analytics or remote persistence are supplied by the runtime. Browser print to PDF is supported.

## Anatomy integration
Use <loam-anatomy figure="watch"></loam-anatomy> for a real published figure. Supported figures: watch, message-queue, lru-cache. These optional official anatomy-figures 0.1.0 bundles load when used, follow Loami themes, and are embedded by offline export. Switching themes and opening exports resets figure model state. Attribution and MIT license are included. For new generated figures, the following guidance applies.
Anatomy is a separate MIT skill by Ryan: https://skills.wheresryan.sh/anatomy . Install it separately with npx skills add wheresryan22/anatomy if the user requests it. Ask it for framework-free SVG/HTML with inline browser-ready JavaScript. Place output inside loam-figure and preserve the figure's model and keyboard behavior. Loami maps shared --anatomy-* surface, text, line and accent tokens; use custom tokens for richer material shading. The generic loam-figure wrapper does not import Anatomy or render React/TypeScript; use loam-anatomy for the three packaged figures. Compile TypeScript before embedding; bundle external modules for offline sharing. Test both themes and reduced motion. Demo: https://loami.dev/examples/figure.html .

## Agent setup
For project-local installation and a durable document preference, follow https://loami.dev/install.txt. This merges scoped guidance into CLAUDE.md or AGENTS.md; explicit format requests still take precedence.
Remote Streamable HTTP MCP: https://loami.dev/mcp . Tools: get_documentation, list_components, get_example, create_document. Skill: https://loami.dev/skill/loam-html/SKILL.md . Downloads: https://loami.dev/downloads/loam-skill.zip . Claude Code: claude mcp add --transport http loami https://loami.dev/mcp . Other clients use an HTTP server with that URL; client support varies.

## Versioning
0.1.3 introduces compact Geist typography, Jev-style palette and density, and viewport-based document layouts. Previous versions keep their pinned appearance. Use the exact /v0.1.3/loami.js URL for reproducible documents. /loam.js is a moving convenience alias. No promise of compatibility for future preview APIs.