v0.6.0

Minor changes

• 325afea: The viewer's layout can be arranged, and its parts placed one by one. Every region of <kgdiff-viewer> (the change list, the detail panel, the search, the filters, the view dock, the replay transport, the legend, the zoom buttons, the minimap, the title, the actions) is open, collapsed or hidden through one attribute, panels="detail:collapsed minimap:hidden", or the property viewer.panels = { detail: 'collapsed' } (reading it gives the page's declaration back; the new read-only viewer.layout has every region's state and the sizes); sidebar="closed", header="compact" and chrome="none" keep working as presets of it. The detail panel can now be collapsed to a bar of its own, the sidebar's width and the split between the change list and the details can be dragged (or moved with the arrow keys), and kgdiff-layout reports every change. The viewer remembers what the reader changes (panels, sizes, theme, palette, language) in localStorage for the next visit, unless the page sets them or persist="none"; persist-key gives an app on a shared origin a store of its own. shortcuts="scoped|global|none" says where keyboard shortcuts apply (global-shortcuts still works) and keymap="x:none r:review" rebinds single keys (a letter in both cases, so Shift+J / K now step through the changes too); the kgdiff-* events are typed on every element, the document and the window (KgdiffEventMap; KgdiffViewerEventMap stays as a deprecated alias); refreshTheme() redraws the canvas after the page changed --kgdiff-* tokens, which are now documented, public CSS custom properties. Four of them are renamed to whole words before they become public: --kgdiff-bg → --kgdiff-background, --kgdiff-mono → --kgdiff-font-mono, --kgdiff-text-2 → --kgdiff-text-secondary and --kgdiff-text-3 → --kgdiff-text-muted; a page that set the old names sets the new ones instead. New, experimental elements compose a layout of your own: <kgdiff-root> holds the session, and <kgdiff-stage> (with five slots for your content over the canvas, which the graph is framed clear of, and panels for its own chrome: dock, transport, legend, zoom, minimap), <kgdiff-change-list>, <kgdiff-change-detail>, <kgdiff-search> and <kgdiff-filters> show its parts, inside it or anywhere on the page with for="<root id>". @kgdiff/viewer/elements/<name> defines a single element, and @kgdiff/viewer/panels is the panels syntax (no DOM). The CLI's --panels sets a report's initial panel states; reports now carry their theme and language in the payload only, so a reader's earlier choice wins over them.

  @kgdiff/cli · @kgdiff/viewer

• 8b0538c: Several views of one diff, and the canvas chrome as elements (experimental). A <kgdiff-root> now draws every <kgdiff-stage> bound to it, each with its own canvas, camera, zoom buttons and minimap, all sharing the selection, the hover, the filters, the search and the replay; version="before" or version="after" pins a stage to one version, for before and after side by side. The view dock, the replay transport, the legend, the zoom buttons, the minimap, the title and the actions are elements of their own (each says which root it shows with rootElement): <kgdiff-view-dock>, <kgdiff-transport>, <kgdiff-legend> (variant="full|mini", open), <kgdiff-zoom> and <kgdiff-minimap> (bound to the nearest stage or to the one stage="<id>" names: stage, stageElement, rootElement; the minimap is in the custom state :state(overview) while the whole graph is in view), <kgdiff-title> and <kgdiff-actions>, each with a subpath @kgdiff/viewer/elements/<name>. Slotted into a stage or a <kgdiff-viewer>, one of them replaces the built-in region of its kind (in the viewer the title and the actions too) while panels keeps applying to the rest; placed anywhere else it is no obstacle to fits and flights unless registered with registerObstacle. <kgdiff-viewer> gets the stage's five slots: your content in slot="top-end" (and top-start, bottom-start, bottom-center, bottom-end) goes over the canvas and the graph is framed clear of it. The shortcuts dialog lists the keys bound after keymap, and ? in a composed root opens the dialog of its <kgdiff-actions>. Accessibility: the zoom toolbar, the appearance menu and the search's results have names, a <kgdiff-stage> is a named region rather than a main landmark, the end of a replay is announced once, and the page's content in the top corners comes first in the tab order. @kgdiff/viewer/elements/root no longer carries the renderer (64 kB instead of 88 kB, min + gzip): each stage brings its own.

  @kgdiff/viewer

• 69a0975: The viewer describes its elements for tools. The package ships a Custom Elements Manifest (custom-elements.json, named by the new customElements field), generated from the sources: every element's attributes and the properties they reflect, its methods, the roots' events with their detail types, the slots, the --kgdiff-* CSS custom properties and <kgdiff-minimap>'s :state(overview), with each experimental part marked. Generated from it: vscode.html-custom-data.json, which VS Code reads through html.customData to complete and describe the tags and their attributes; and @kgdiff/viewer/react (experimental), React 19's JSX types for the elements, their properties and their onkgdiff-* events, enabled with import type {} from '@kgdiff/viewer/react' (@types/react is an optional peer dependency). The elements stay experimental in 0.6 and become stable in 0.7. The docs gain a reference of every element generated from the manifest, and tested recipes for React 19, Vue 3 and Svelte 5.

  @kgdiff/viewer

---

Every package is at 0.6.0: @kgdiff/cli · @kgdiff/core · @kgdiff/formats · @kgdiff/layout · @kgdiff/scene · @kgdiff/renderer · @kgdiff/viewer · @kgdiff/g6.

GitHub Action: uses: iiwish/kgdiff@v0.6.0.