@getdom/studio 0.1.1 → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# Changelog
+
+## 0.2.1 - 2026-09-21
+
+Vue Router 5 support and a public home for DOM Studio release notes.
+
+### Added
+
+- A release history at `/releases`, with publication dates, version links and
+  upgrade notes. Published GitHub Releases supply the notes through the server.
+- A release preparation command and tag-triggered publishing workflow that checks
+  the package, verifies npm publication, then creates matching GitHub Release notes.
+
+### Improved
+
+- Added Vue Router 5 support while retaining compatibility with Vue Router 4.
+- Updated the development and package-smoke toolchains to validate the current
+  Vue, Pinia, Vite, and Vue Router release line.
+
+### Upgrade notes
+
+- Vue must be version 3.5.34 or newer within Vue 3. Vue Router 4 remains supported.
+- When using Vue Router 5.3 with Pinia, use Pinia 3.0.4 or newer within Pinia 3.
+  Vue Router 5.3 also requires Vite 7.3 or 8 when Vite is installed.
+
+## 0.2.0 - 2026-09-20
+
+This release expands DOM Studio from its initial public package with new
+application UI, reporting, media, mobile, and visual-design surfaces.
+
+### Added
+
+- `DomNotificationInbox` for durable, application-owned in-app notifications,
+  plus `notificationTone()` and `notificationToast()` presentation helpers.
+- A reporting chart family with line, area, bar, donut, sparkline, metric-card,
+  date-range, legend, tooltip, and container components powered by Unovis.
+- `DomGantt` for project schedules and resource planning, including keyboard and
+  pointer movement, resizing, row changes, zoom levels, and working-time views.
+- Audio and camera input components, audio visualisation, and a vertical video
+  feed with captions and controlled playback.
+- Mobile application primitives for bottom sheets, swipe actions, profile
+  headers, nested stacks, keyboard-aware shells, and contained action sheets.
+- `DomMenuStack` for bounded nested navigation inside popovers and other app
+  surfaces.
+- Responsive dialog companion panels for assistant and reference workflows.
+- Beta visual designer components for frames, stages, layers, backgrounds,
+  borders, shadows, snapping, spacing, and layout controls.
+
+### Improved
+
+- Expanded generated TypeScript declarations and public Vue exports for the new
+  components, props, events, helpers, and data contracts.
+- Refined touch gestures, mobile safe-area and keyboard behaviour, popovers,
+  drawers, dialogs, form controls, themes, documentation, and agent guidance.

package/README.md

@@ -2,6 +2,15 @@
 
 DOM Studio is a Vue 3 and Web Component interface system for application UI.
 
+It is designed for the complete controls that product applications need—not
+only UI primitives:
+
+- **DataGrid** with typed filters, sorting, selection, virtual rows, custom cells, and remote query state.
+- **Kanban** with controlled resources, keyboard movement, drag ordering, custom cards, and persistence-ready events.
+- **Media browser** with folders, uploads, file inspection, selection, and application-owned storage boundaries.
+- **Month calendar and week planner** for scheduling, custom records, drag-to-reschedule, and server-loaded date windows.
+- Forms, overlays, navigation, feedback, mobile shells, headless elements, and complete application blocks.
+
 ## Install
 
 ```sh
@@ -48,6 +57,20 @@ Register the framework-neutral custom elements when required:
 import '@getdom/studio/headless';
 ```
 
+## Examples and walkthroughs
+
+Every component page includes live examples, copyable Vue source, its public
+props and events, and implementation notes:
+
+- [Install and theme setup](https://getdom.studio/install)
+- [DataGrid examples](https://getdom.studio/data/data-grid)
+- [Kanban, DataGrid, and calendar sharing one resource list](https://getdom.studio/data/kanban)
+- [Media browser and file-picker walkthrough](https://getdom.studio/data/media-browser)
+- [Month calendar planning examples](https://getdom.studio/data/month-calendar)
+- [Week planner and drag-to-create scheduling](https://getdom.studio/data/week-planner)
+- [Application blocks](https://getdom.studio/blocks)
+- [Theming guide](https://getdom.studio/theming)
+
 ## Peer dependencies
 
 - Vue 3.5 or later.
@@ -63,3 +86,11 @@ client use. See `LICENSE.md` in this package for the complete terms.
 
 Documentation, examples, licences, and source access are available from
 [getdom.studio](https://getdom.studio).
+
+## Charts and reporting
+
+Data Visualisation lives at `/charts`. Use `DomLineChart`, `DomAreaChart`, `DomBarChart`, `DomDonutChart`, and `DomSparkline` for application-owned records, `DomMetricCard` for summary measurements, and `DomDateRangePicker` for inclusive reporting dates and comparison periods. The chart family uses Unovis 1.7 and loads the drawing engine after browser mount. Headings and data tables render on the server.
+
+Cartesian charts accept `rows`, `xKey`, and `series` definitions with stable keys, labels, and optional colours. Use `xType="time"` for proportional date spacing and `xType="number"` for numeric coordinates. Default category axes preserve record order. Missing measurements remain distinct from zero. Percentage stacks require non-negative values; `format="percent"` expects fractional values. Applications own aggregation, queries, and comparison calculations.
+
+Chart colours use `--chart-1` through `--chart-5` from the default theme. Consumers supplying their own theme should define these tokens; charts fall back to the primary colour. `DomChartContainer`, `DomChartLegend`, and `DomChartTooltip` are available for custom Unovis compositions. Unovis dependencies are included with the package; source-copy consumers must also install matching `@unovis/vue` and `@unovis/ts` versions (`1.7.0`).

package/SKILL.md

@@ -41,6 +41,7 @@ The package root exports the same Vue surface as `@getdom/studio/vue`. Use headl
 - Use `DomDialog`, `DomDrawer`, `DomPopover`, `DomDropdown`, `DomMenu`, `DomContextMenu`, and `DomCommandPalette` instead of recreating overlays, focus handling, or keyboard navigation.
 - Use `DomTabs`, `DomAccordion`, `DomTreeView`, and `DomScrollMenu` for structured navigation, disclosure, and scroll-linked page contents. Use `DomBreadcrumbs` for an application-owned route or resource path and `DomStepper` for controlled multi-step progress.
 - Use `DomToastStack`, `DomToastItem`, and `useToasts` for notifications.
+- Use `DomNotificationInbox` for a durable in-app inbox trigger and panel. Pass application-owned recipient items, persist its `transition` events through the backend, and keep HTTP, auth, realtime invalidation, pagination cursors, and retries outside the component. Pair `notificationToast()` with `DomToastStack` only for a newly observed live arrival; do not replay stored history as fresh toasts.
 - Use `DomNativeSelect` for small native option lists, `DomListbox` for custom single-choice lists, `DomCombobox` for search plus committed selection, and `DomAutocomplete` for free text with suggestions.
 - Use `DomCalendar` for month-grid date picking and `DomDatePicker` for typed date entry with a popover calendar.
 - Use `DomTextareaInput` for fixed or autosizing multiline fields. Use `DomTextareaComposer` when attachment previews, leading controls, trailing actions, and submit behavior belong inside one autosizing input frame; keep upload state and attachment records in the application.
@@ -48,10 +49,15 @@ The package root exports the same Vue surface as `@getdom/studio/vue`. Use headl
 - Use `DomFilterBar` when search and logical filter values should form one controlled query shared by resource lists, grids, timelines, routes, or Pinia stores. Translate its `FilterBarQuery` at the application API boundary.
 - Use `DomActivityTimeline` to project ordered application-owned rows into an activity trail through logical field keys. Keep querying, chronology, pagination, permissions, and persistence in the application layer.
 - Use `DomMonthCalendar` for date-led month planning and `DomWeekPlanner` when fixed-width day swim lanes need precise timed placement, configurable drag-to-create ranges, a live current-time marker, or virtualized horizontal ranges such as a full year.
+- Use `DomGantt` for horizontal resource planning, project schedules, and roadmaps. Supply application-owned `rows` and `items`, map `itemRowKey` to each row, and provide a start plus an exclusive end or positive duration. Handle `row-create`, `time-range-select`, and `item-click` in the application; hiding non-working time compresses the display without changing stored dates. Enable `draggableItems` and `resizableItems` independently, and handle `item-move` / `item-resize` in the application. Enable `allowRowChange` for resource bookings; leave it off for feature-based Gantt rows.
 - Use `DomCodeInput` for prompts, snippets, templates, and structured text; use `DomJsonInput` for parsed JSON values; use `DomJsonListInput` for schema-aware arrays such as options, commands, menu rows, and inspector data.
 - Use `DomCodeBlock` for highlighted read-only code and `DomJsonViewer` for inspecting JSON payloads, diagnostics, and implementation data.
 - Use `DomTextDiff` for reviewable before-and-after copy, AI rewrite suggestions, SEO field replacements, and unified or split code edits.
-- Use `DomAppShell`, `DomAppTopBar`, `DomAppBottomNav`, `DomAppListItem`, `DomSafeArea`, and `DomActionSheet` for Capacitor-style app screens.
+- Use `DomAppShell`, `DomAppTopBar`, `DomAppBottomNav`, `DomAppListItem`, `DomAppProfile`, `DomSafeArea`, and `DomActionSheet` for Capacitor-style app screens. `DomAppProfile` combines an image, account name, email, and action above settings rows; stack screen slots can contain any Vue components, forms, or toggles.
+- `DomAppShell` and `DomAppStack` default to `height="100dvh"`; use `height="100%"` only in a sized parent. Nest a stack in `<DomAppShell :content-scroll="false">` with stack `height="100%"` so each screen owns scrolling. Both reserve safe areas without another wrapper. Mobile stack headers show Back and the current title; the `breadcrumb` slot is desktop-only and the `header` slot customizes mobile. Visited screens retain local state and scroll while the stack stays mounted.
+- `DomActionSheet` works independently as a viewport overlay on mobile or desktop. In a shell, put it in `#overlay` for app-contained positioning. Use `DomAppListItem as="div"` for rows with switches or inputs. Use `DomToggle` with `label` and `chrome="none"` when the row supplies the visible label.
+- Use `DomSwipeActions` for leading/trailing row commands with gesture and button access. Full-swipe execution requires `fullSwipe` on the component and on the first action for that side. Applications own mutations, pending state, and undo. Use `DomBottomSheet` for arbitrary content at configurable snap heights, with native body scrolling and a pinned footer. Put it in the shell's `overlay` slot for containment. The combined example is `/mobile/inbox`.
+- `DomAppShell` detects keyboard-sized visual viewport changes while editing. Set `hideBottomOnKeyboard` for navigation, leave it false for a composer, or use `keyboardBehavior="none"` when the native host owns layout. `keyboardInset` accepts a native keyboard height in CSS pixels. Device keyboard verification needs the full-screen `/mobile/inbox?preview=1` page, because iframe previews do not expose the top-level visual viewport.
 
 ## Studio Specs
 
@@ -81,3 +87,17 @@ Return a Studio spec when generated UI should be editable later. A spec is a UI
 ```
 
 Use component export names such as `DomTextInput` or ordinary HTML tags such as `section`, `h2`, and `p`. Avoid anonymous layers and large unstructured HTML blobs when a spec would preserve intent.
+
+## Realtime media input
+
+Use `/ai` as the entry point for AI components and examples. `/ai/ui` covers interaction patterns; `/ai/builders` covers generating interfaces with DOM Studio. Set `__doc.nav.section: 'ai'` on component metadata to include it in the AI sidebar, search category, and overview while preserving its source location and public URL.
+
+Use `DomAudioControls` for click-to-talk capture with a waveform, stop, mute, and microphone picker. Use `DomAudioInput` for a standalone microphone setup and `DomCameraInput` for independent webcam selection and local preview. Each owns its capture stream and emits `@stream` with replacements or `null` on stop. Use one capture component per input session; pass its stream to `DomAudioVisualizer` for additional displays. The visualizer never owns or stops media tracks. Consumers own AI processing, recording, network transport, and remote connection state. Capture requires HTTPS/localhost and explicit user interaction; embeds need a microphone/camera permissions policy. See `/components/audio-controls` for examples and lifecycle details.
+
+## Charts and reporting
+
+Data Visualisation lives at `/charts`. Use `DomLineChart`, `DomAreaChart`, `DomBarChart`, `DomDonutChart`, and `DomSparkline` for application-owned records, `DomMetricCard` for summary measurements, and `DomDateRangePicker` for inclusive reporting dates and comparison periods. The chart family uses Unovis 1.7 and loads the drawing engine after browser mount. Headings and data tables render on the server.
+
+Cartesian charts accept `rows`, `xKey`, and `series` definitions with stable keys, labels, and optional colours. Use `xType="time"` for proportional date spacing and `xType="number"` for numeric coordinates. Default category axes preserve record order. Missing measurements remain distinct from zero. Percentage stacks require non-negative values; `format="percent"` expects fractional values. Applications own aggregation, queries, and comparison calculations.
+
+Chart colours use `--chart-1` through `--chart-5` from the default theme. Consumers supplying their own theme should define these tokens; charts fall back to the primary colour. `DomChartContainer`, `DomChartLegend`, and `DomChartTooltip` are available for custom Unovis compositions. Unovis dependencies are included with the package; source-copy consumers must also install matching `@unovis/vue` and `@unovis/ts` versions (`1.7.0`).

package/package.json

@@ -1,11 +1,15 @@
 {
 	"name": "@getdom/studio",
-	"version": "0.1.1",
+	"version": "0.2.1",
 	"description": "A Vue 3 and Web Component interface system for application UI.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"author": "Steve O'Brien",
 	"homepage": "https://getdom.studio",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/steve-obrien/dom.studio.git"
+	},
 	"keywords": [
 		"vue",
 		"web-components",
@@ -50,8 +54,8 @@
 	"peerDependencies": {
 		"pinia": "^2.3.0 || ^3.0.0",
 		"tailwindcss": "^4.2.0",
-		"vue": "^3.5.0",
-		"vue-router": "^4.6.0"
+		"vue": "^3.5.34",
+		"vue-router": "^4.6.0 || ^5.0.0"
 	},
 	"dependencies": {
 		"@tiptap/extension-code-block": "3.27.3",
@@ -64,7 +68,9 @@
 		"@tiptap/extension-underline": "^3.27.3",
 		"@tiptap/pm": "^3.27.3",
 		"@tiptap/starter-kit": "^3.27.3",
-		"@tiptap/vue-3": "^3.27.3"
+		"@tiptap/vue-3": "^3.27.3",
+		"@unovis/vue": "1.7.0",
+		"@unovis/ts": "1.7.0"
 	},
 	"publishConfig": {
 		"access": "public"

package/public/llms.txt

@@ -11,9 +11,11 @@ The package root and `@getdom/studio/vue` export the same Vue surface. Import `@
 ## Core Documentation
 
 - [Overview](https://getdom.studio/): Product positioning, package usage, and the main DOM Studio surfaces.
-- [AI builders](https://getdom.studio/ai): Rules for reliable LLM-generated interfaces and when to return Studio specs.
+- [AI components and UI](https://getdom.studio/ai): Agent conversations, voice and camera controls, shared composers, review components, and examples.
+- [AI UI guide](https://getdom.studio/ai/ui): Practical patterns for prompts, context, streaming, tool actions, review, voice, accessibility, and recovery.
+- [AI builders](https://getdom.studio/ai/builders): Rules for reliable LLM-generated interfaces and when to return Studio specs.
 - [Theming](https://getdom.studio/theming): Semantic colour tokens, light and dark themes, material skins, radii, and shadows.
-- [Component and docs contract](https://getdom.studio/component-spec): Auto-discovery, `defineOptions({ __doc })`, prop metadata, generated docs, and Studio registration.
+- [Component metadata](https://getdom.studio/component-spec): Vue props, `defineOptions({ __doc })`, and `_edit` hints for generated documentation and editing controls, with a working component example.
 - [Studio](https://getdom.studio/components/studio): Visual editing and saved UI trees made from components, props, children, stable ids, and human labels.
 
 ## UI Library
@@ -23,6 +25,7 @@ The package root and `@getdom/studio/vue` export the same Vue surface. Import `@
 - [Data components](https://getdom.studio/data): Controlled filter queries, data grids, timelines, Kanban boards, calendars, media workflows, document editing, and agent conversations.
 - [Filter bar](https://getdom.studio/data/filter-bar): Transport-free search and logical filter definitions that emit one controlled resource query.
 - [Activity timeline](https://getdom.studio/data/activity-timeline): Ordered resource activity with logical field mappings, semantic status, controlled loading, and customizable slots.
+- [Gantt](https://getdom.studio/data/gantt): Horizontal resource planning, project schedules, and roadmaps from application-owned rows and dated items, with time zoom, working-hour visibility, and drag-to-plan intent.
 - [Developer components](https://getdom.studio/dev): Code, JSON, payload, and implementation-data inspection utilities.
 - [Visual components](https://getdom.studio/visual/card): Cards, badges, status, alerts, empty states, progress, skeletons, avatars, and diffs.
 - [Mobile components](https://getdom.studio/mobile): App shells, top and bottom navigation, screen stacks, safe areas, list rows, and action sheets.
@@ -55,3 +58,11 @@ The package root and `@getdom/studio/vue` export the same Vue surface. Import `@
 - [JSON viewer](https://getdom.studio/dev/json-viewer): Structured payload and diagnostic-data inspection.
 - [Text diff](https://getdom.studio/visual/text-diff): Reviewable before-and-after text and code changes.
 - [Scroll menu](https://getdom.studio/components/scroll-menu): Scrollspy page contents built from real fragment links and current-location semantics.
+
+## Charts and reporting
+
+Data Visualisation lives at `/charts`. Use `DomLineChart`, `DomAreaChart`, `DomBarChart`, `DomDonutChart`, and `DomSparkline` for application-owned records, `DomMetricCard` for summary measurements, and `DomDateRangePicker` for inclusive reporting dates and comparison periods. The chart family uses Unovis 1.7 and loads the drawing engine after browser mount. Headings and data tables render on the server.
+
+Cartesian charts accept `rows`, `xKey`, and `series` definitions with stable keys, labels, and optional colours. Use `xType="time"` for proportional date spacing and `xType="number"` for numeric coordinates. Default category axes preserve record order. Missing measurements remain distinct from zero. Percentage stacks require non-negative values; `format="percent"` expects fractional values. Applications own aggregation, queries, and comparison calculations.
+
+Chart colours use `--chart-1` through `--chart-5` from the default theme. Consumers supplying their own theme should define these tokens; charts fall back to the primary colour. `DomChartContainer`, `DomChartLegend`, and `DomChartTooltip` are available for custom Unovis compositions. Unovis dependencies are included with the package; source-copy consumers must also install matching `@unovis/vue` and `@unovis/ts` versions (`1.7.0`).