@getdom/studio 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,98 @@
 # Changelog
 
+## 0.2.3 - 2026-09-27
+
+Searchable Google Fonts previews, shared paginated option lists, and more reliable
+selection controls.
+
+### Added
+
+- `DomFontPicker` with searchable family previews, incremental browsing and a
+  lightweight snapshot of 1,946 Google Fonts families. Font files are not bundled;
+  the mounted picker requests only selected and visible preview families, with
+  text subsetting and component-owned stylesheet cleanup.
+- Multiple selection in `DomSelect`, with an array model, checked options and a
+  clear-all action. Selected labels are retained when searches replace remote pages.
+- Shared incremental loading for Select, Combobox, Autocomplete and Tag combobox,
+  using `hasMore` and `load-more` for scroll, keyboard and explicit-button paging.
+  Documentation includes real HTTP examples with retry and stale-request handling.
+- Query and selected-state slot data for custom option rendering, plus a matched-text
+  highlighting example that keeps HTML-like labels as plain text.
+
+### Improved
+
+- Opening a picker shows the loaded choices without treating its committed value
+  as a permanent search filter. Selected checkmarks remain distinct from keyboard
+  navigation, and loaded single selections open in context.
+- Select and Tag combobox documentation explains compact multi-selection versus
+  removable tokens, optional custom entries and paste support, alongside their
+  shared option, field-state and paging foundations.
+- Public TypeScript declarations cover the font picker, multiple selection,
+  retained selected records and paginated option lists.
+
+### Fixed
+
+- Dropdowns reopen reliably while an earlier close animation finishes, and late
+  option updates no longer reopen a dismissed combobox or autocomplete.
+- Selected options remain visible and checked in combobox and tag suggestions.
+  Disabled and read-only controls do not commit selections through their action buttons.
+- Select keeps its arrow at the right edge and centers the clear button to its
+  left. Long selections truncate within narrow containers, and clearing returns
+  keyboard focus to the trigger.
+
+### Upgrade notes
+
+- Single-select models remain scalar values. Use an array model when enabling
+  `multiple`; Tag combobox continues to use an array of selected values.
+- For server-filtered lists, set `filterOptions` to false and handle `query` and
+  `load-more` in the application. Supply `selectedOptions` for initial selected
+  records outside the loaded page. Seeking directly to a later remote page remains
+  application-owned; controls do not fetch or paginate an endpoint themselves.
+- Google Fonts previews need no API key. Applications own loading the selected
+  font for content outside the picker. A live Developer API catalogue should be
+  fetched and cached server-side or at build time, with its key kept out of client code.
+
+## 0.2.2 - 2026-09-26
+
+More flexible calendar highlights, refined agent chat, and updated website
+licensing flows.
+
+### Added
+
+- `DomMonthCalendar` now accepts `todayIndicator="both"` to show the cell outline
+  and date circle together. `todayDateClass` customises the circle in either
+  `circle` or `both` mode, with matching TypeScript declarations and an interactive
+  example.
+- Website support for account-optional licence checkout, downloadable purchase
+  confirmations, and email-verified licence claiming. Checkout requires configured
+  transactional email delivery.
+
+### Improved
+
+- Agent chat uses a shared centred width for messages and the composer, compact
+  conversation rows with avatars and unread counts, expandable tool details,
+  and clearer loading, empty, streaming, and agent-context displays.
+- Default control backgrounds use the canvas colour. The command palette has
+  updated translucency and theme-aware shadows.
+- The homepage includes interactive workspace, agent-chat, analytics, and designer
+  demos. Website pricing and checkout use consistent USD licence offers.
+
+### Fixed
+
+- Calendar date numbers keep consistent spacing across all today-indicator modes,
+  and week numbers align with dates in the desktop grid.
+- Website checkout validates the configured price and licence before redirecting
+  to payment. Delayed payment handling and repeat webhook processing preserve
+  the recorded licence and its fulfilment state.
+
+### Upgrade notes
+
+- Existing calendar indicator values remain supported; `cell` is still the default.
+- `DomAgentConversation.maxMessageWidth` now controls the centred message column
+  and composer together. Review custom conversation layouts after upgrading.
+- Applications that supply their own theme can set `--skin-control-bg` to retain
+  a different control background.
+
 ## 0.2.1 - 2026-09-21
 
 Vue Router 5 support and a public home for DOM Studio release notes.

package/LICENSE.md

@@ -28,11 +28,14 @@ the order confirmation.
 An Individual licence permits one named individual to:
 
 - use and modify the Software in unlimited personal or commercial products owned by that individual;
+- incorporate the Software into bespoke products created for that individual's clients;
 - deploy and distribute those products to end users; and
 - maintain those products for their end users.
 
-The Individual licence does not permit sharing the Software or paid source
-access with colleagues, employees, contractors, or clients.
+The Individual licence covers one named developer. It does not permit sharing
+the component library or paid source access with colleagues, employees, or
+contractors. A client may receive the Software as part of a bespoke end product
+under the client-delivery terms below.
 
 ### Team
 
@@ -44,9 +47,14 @@ A Team licence permits the purchasing legal entity to:
 - incorporate the Software into bespoke products created for its clients.
 
 Contractors may use the Software only while working on behalf of the purchasing
-entity and must not retain or reuse it for unrelated work. A client may receive
-the Software only as part of a bespoke end product and may not extract or reuse
-it as a standalone component library unless the client obtains its own licence.
+entity and must not retain or reuse it for unrelated work.
+
+### Client delivery
+
+Under either commercial licence, a client may receive the Software only as part
+of a bespoke end product. The client may operate and maintain that end product,
+but may not extract or reuse the Software as a standalone component library or
+in another product unless the client obtains its own licence.
 
 ## Permitted modifications and distribution
 
@@ -69,10 +77,16 @@ You must not:
 
 ## Updates
 
-A purchase described as "lifetime v1 access" includes releases published under
-major version 1 while DOM Studio makes them available. It does not include a
-right to future major versions, hosted services, consulting, or support unless
-the order confirmation says otherwise.
+A commercial licence permits perpetual use of the versions obtained under it,
+subject to the terms of this licence. Included updates cover releases published
+under major version 1 while DOM Studio makes them available. Future major
+upgrades are optional and may be sold separately; declining an upgrade does not
+end the right to use the versions already obtained.
+
+Hosted services, architecture reviews, consulting, and support are not included
+unless the order confirmation says otherwise. Existing purchases, including
+introductory £1 purchases and purchases described as "lifetime v1 access", retain
+their purchased access and any additional rights or services promised at purchase.
 
 ## Ownership
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@getdom/studio",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"description": "A Vue 3 and Web Component interface system for application UI.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE.md",

package/src/pages/_layout/componentCatalog.generated.js

@@ -1778,7 +1778,7 @@ export const componentCatalog = [
 			},
 			"name": "Agent conversation list",
 			"tag": "<DomAgentConversationList>",
-			"description": "A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.",
+			"description": "A reusable AI conversation navigation list with search, agent labels, unread counts, status indicators, and active-thread selection.",
 			"icon": "M5 6h14M5 12h14M5 18h8",
 			"events": [
 				{
@@ -3090,8 +3090,8 @@ export const componentCatalog = [
 			"slots": [
 				{
 					"name": "item",
-					"payload": "{ item, index }",
-					"description": "Replaces the rendering of each suggestion."
+					"payload": "{ item, index, selected, query }",
+					"description": "Replaces each suggestion body without replacing the selection checkmark."
 				}
 			],
 			"events": [
@@ -3109,6 +3109,19 @@ export const componentCatalog = [
 					"name": "commit",
 					"payload": "({ value, label, custom })",
 					"description": "Fired when the current text is committed with Enter."
+				},
+				{
+					"name": "load-more",
+					"payload": "{ query }",
+					"description": "Request the next page when hasMore is true."
+				},
+				{
+					"name": "open",
+					"description": "Fired when suggestions open."
+				},
+				{
+					"name": "close",
+					"description": "Fired when suggestions close."
 				}
 			]
 		},
@@ -3308,8 +3321,8 @@ export const componentCatalog = [
 			"slots": [
 				{
 					"name": "item",
-					"payload": "{ item, index }",
-					"description": "Replaces the rendering of each option."
+					"payload": "{ item, index, selected, query }",
+					"description": "Replaces each option body. The control keeps the selected checkmark."
 				}
 			],
 			"events": [
@@ -3322,6 +3335,24 @@ export const componentCatalog = [
 					"name": "select",
 					"payload": "({ item, value, label })",
 					"description": "Fired when an option is selected. item is the original option object."
+				},
+				{
+					"name": "list-scroll",
+					"payload": "(event: Event)",
+					"description": "Fired when the floating option list scrolls."
+				},
+				{
+					"name": "load-more",
+					"payload": "{ query }",
+					"description": "Request the next page when hasMore is true. The parent owns fetching and appending options."
+				},
+				{
+					"name": "open",
+					"description": "Fired when the options open with an empty transient query."
+				},
+				{
+					"name": "close",
+					"description": "Fired when the options close."
 				}
 			]
 		},
@@ -3637,6 +3668,49 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "forms/font-picker",
+		"path": "../forms/font-picker/DomFontPicker.vue",
+		"section": "forms",
+		"slug": "font-picker",
+		"exportName": "DomFontPicker",
+		"route": "/forms/font-picker",
+		"doc": {
+			"name": "Font picker",
+			"tag": "<DomFontPicker>",
+			"description": "Searchable Google Fonts picker that previews only visible families and keeps font network loading inside the mounted control.",
+			"icon": "M5 5h14M12 5v14M8 19h8",
+			"playground": {
+				"initial": {
+					"label": "Font family",
+					"modelValue": "Lato",
+					"placeholder": "Search Google Fonts",
+					"category": "",
+					"pageSize": 24,
+					"previewText": "",
+					"loadFonts": true
+				}
+			},
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired with the selected font value."
+				},
+				{
+					"name": "select",
+					"payload": "{ item, value, label }",
+					"description": "Fired when a font family is selected."
+				},
+				{
+					"name": "query",
+					"payload": "string",
+					"description": "Fired as the user searches the catalog."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "forms/form",
 		"path": "../forms/form/DomForm.vue",
@@ -4053,13 +4127,13 @@ export const componentCatalog = [
 			"slots": [
 				{
 					"name": "value",
-					"payload": "{ option, value, label, placeholder }",
-					"description": "Custom selected-value markup inside the trigger."
+					"payload": "{ option, options, value, label, placeholder }",
+					"description": "Custom selected-value markup inside the trigger. options contains all selected records in multiple mode."
 				},
 				{
 					"name": "option",
-					"payload": "{ option, index, selected, optionId }",
-					"description": "Custom option markup inside the floating list. optionId identifies the focusable option button for external floating UI."
+					"payload": "{ option, index, selected, query, optionId }",
+					"description": "Custom option markup with the transient query for safe text highlighting. optionId identifies the focusable row."
 				},
 				{
 					"name": "group",
@@ -4070,13 +4144,36 @@ export const componentCatalog = [
 			"events": [
 				{
 					"name": "update:modelValue",
-					"payload": "(value: string)",
-					"description": "Emitted when the selected option changes."
+					"payload": "string | number | Array<string | number>",
+					"description": "Emitted with one committed value or an array in multiple mode."
 				},
 				{
 					"name": "select",
 					"payload": "({ option, value, label })",
 					"description": "Emitted with the selected option record."
+				},
+				{
+					"name": "query",
+					"payload": "string",
+					"description": "Emitted on open with an empty query and as the user types in the separate search input."
+				},
+				{
+					"name": "load-more",
+					"payload": "{ query }",
+					"description": "Request another page when hasMore is true. The application owns cursors, requests, errors and appending options."
+				},
+				{
+					"name": "list-scroll",
+					"payload": "Event",
+					"description": "Scroll event for optional visibility-based previews."
+				},
+				{
+					"name": "open",
+					"description": "Emitted when the panel opens."
+				},
+				{
+					"name": "close",
+					"description": "Emitted when the panel closes."
 				}
 			],
 			"keyboard": [
@@ -4129,8 +4226,8 @@ export const componentCatalog = [
 			"slots": [
 				{
 					"name": "item",
-					"payload": "{ item, index, active, custom }",
-					"description": "Replaces each suggestion row."
+					"payload": "{ item, index, active, selected, query, custom }",
+					"description": "Replaces each suggestion row while retaining the selected checkmark."
 				},
 				{
 					"name": "tag",
@@ -4163,6 +4260,11 @@ export const componentCatalog = [
 					"name": "change",
 					"payload": "Array",
 					"description": "Fired after the selected values array changes."
+				},
+				{
+					"name": "load-more",
+					"payload": "{ query }",
+					"description": "Request the next server page when hasMore is true."
 				}
 			]
 		},

package/src/pages/components/command-palette/DomCommandPalette.vue

@@ -439,12 +439,17 @@ function matchesShortcut(event, shortcut) {
 .command-panel-blur {
 	--skin-overlay-bg: var(
 		--dom-command-palette-background,
-		color-mix(in oklch, var(--canvas) 82%, transparent)
+		color-mix(in oklch, var(--canvas) 68%, transparent)
 	);
 	--skin-overlay-backdrop: var(
 		--dom-command-palette-backdrop,
 		blur(20px) saturate(1.12)
 	);
+	--skin-overlay-shadow: var(
+		--dom-command-palette-shadow,
+		0 40px 100px -24px rgb(15 23 42 / 0.3),
+		0 16px 40px -20px rgb(15 23 42 / 0.2)
+	);
 }
 
 .command-panel-entering {

package/src/pages/data/agent-chat/DomAgentChatShell.vue

@@ -103,6 +103,8 @@ export const agentChatShellProps = {
 import { computed, useId } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
 import DomSplitterPanel from '../../components/splitter-panel/DomSplitterPanel.vue';
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomBadge from '../../visual/badge/DomBadge.vue';
 import DomStatusPill from '../../visual/status-pill/DomStatusPill.vue';
 import DomAgentConversation from './DomAgentConversation.vue';
 import DomAgentConversationList from './DomAgentConversationList.vue';
@@ -364,7 +366,7 @@ function conversationStatusTone() {
 <template>
 	<section
 		:id="shellId"
-		class="h-full min-h-0 w-full min-w-0 overflow-hidden rounded-lg border border-border bg-canvas text-canvas-fg shadow-sm"
+		class="h-full min-h-0 w-full min-w-0 overflow-hidden rounded-xl border border-border bg-canvas text-canvas-fg shadow-sm"
 		:aria-label="title"
 	>
 		<div class="hidden h-full min-h-0 md:block">
@@ -376,7 +378,7 @@ function conversationStatusTone() {
 				:min-main="minConversation"
 				:min-end="asideMinimum"
 				:handle-size="8"
-				handle-class="transition hover:bg-border/70 data-[dragging=true]:bg-ring/30"
+				handle-class="relative before:pointer-events-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border/70 before:transition hover:before:bg-ring/60 data-[dragging=true]:before:bg-ring"
 				@update:start-size="updateSidebarSize"
 				@update:end-size="updateAsideSize"
 			>
@@ -440,70 +442,67 @@ function conversationStatusTone() {
 				<template v-if="asideOpen" #end>
 					<slot name="aside" :conversation="conversation" :active-agent="activeAgent" :tool-parts="toolParts">
 						<aside class="flex h-full min-h-0 flex-col bg-canvas">
-							<header class="shrink-0 border-b border-border bg-secondary/25 p-4">
-								<div class="flex items-start justify-between gap-3">
+							<header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-border/70 px-4">
+								<div class="flex min-w-0 items-center gap-2.5">
+									<DomAvatar size="sm" shape="rounded" :src="activeAgent?.avatarUrl || ''" :name="activeAgentLabel()" />
 									<div class="min-w-0">
-										<p class="text-xs font-semibold uppercase text-muted-fg">Agent context</p>
-										<h2 class="mt-1 truncate text-sm font-semibold text-canvas-fg">{{ activeAgentLabel() }}</h2>
+										<h2 class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ activeAgentLabel() }}</h2>
+										<p class="truncate font-mono text-[11px] text-muted-fg">{{ activeModelLabel() }}</p>
 									</div>
-									<DomIconButton label="Close context panel" size="sm" variant="ghost" icon="M6 6l12 12M18 6 6 18" @click="setAsideOpen(false)" />
 								</div>
+								<DomIconButton label="Close context panel" size="sm" variant="ghost" icon="M6 6l12 12M18 6 6 18" @click="setAsideOpen(false)" />
 							</header>
-							<div class="min-h-0 flex-1 overflow-y-auto p-4">
-								<div class="rounded-lg border border-border bg-secondary/25 p-4">
-									<p class="text-xs font-semibold text-muted-fg">Runtime</p>
-									<p class="mt-1 text-sm font-semibold text-canvas-fg">{{ activeModelLabel() }}</p>
-									<p class="mt-2 text-sm leading-6 text-muted-fg">{{ activeAgent?.role || 'Connect an agent to show instructions, tools, and memory context here.' }}</p>
-								</div>
-
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<div class="flex items-center justify-between gap-3">
-										<p class="text-xs font-semibold uppercase text-muted-fg">Conversation</p>
-										<DomStatusPill size="sm" :tone="conversationStatusTone()">{{ streaming ? 'streaming' : (conversation?.status || 'idle') }}</DomStatusPill>
-									</div>
-									<dl class="mt-3 grid grid-cols-2 gap-3 text-sm">
-										<div>
-											<dt class="text-xs text-muted-fg">Messages</dt>
-											<dd class="font-semibold text-canvas-fg">{{ messages.length }}</dd>
+							<div class="min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto">
+								<section class="p-4">
+									<p class="text-sm leading-6 text-muted-fg">{{ activeAgent?.role || 'Connect an agent to show instructions, tools, and memory context here.' }}</p>
+									<dl class="mt-4 grid grid-cols-3 gap-2">
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Status</dt>
+											<dd class="mt-1">
+												<DomStatusPill class="capitalize" size="sm" :tone="conversationStatusTone()" :pulse="streaming">{{ streaming ? 'streaming' : (conversation?.status || 'idle') }}</DomStatusPill>
+											</dd>
 										</div>
-										<div>
-											<dt class="text-xs text-muted-fg">Tools</dt>
-											<dd class="font-semibold text-canvas-fg">{{ toolParts.length }}</dd>
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Messages</dt>
+											<dd class="mt-0.5 text-base font-semibold tabular-nums text-canvas-fg">{{ messages.length }}</dd>
+										</div>
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Tools</dt>
+											<dd class="mt-0.5 text-base font-semibold tabular-nums text-canvas-fg">{{ toolParts.length }}</dd>
 										</div>
 									</dl>
-								</div>
+								</section>
 
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<p class="text-xs font-semibold uppercase text-muted-fg">Tool calls</p>
-									<div v-if="toolParts.length" class="mt-3 space-y-2">
-										<div
+								<section class="p-4">
+									<h3 class="text-xs font-medium uppercase tracking-wide text-muted-fg">Tool calls</h3>
+									<ul v-if="toolParts.length" class="mt-2 -mx-2">
+										<li
 											v-for="tool in toolParts"
 											:key="`${tool.messageId}-${tool.id || tool.name}`"
-											class="rounded-md border border-border bg-secondary/25 p-3"
+											class="flex items-center gap-3 rounded-lg px-2 py-2 transition hover:bg-secondary/50"
 										>
-											<div class="flex items-start justify-between gap-2">
-												<p class="min-w-0 truncate text-sm font-semibold text-canvas-fg">{{ tool.label || tool.name }}</p>
-												<span class="shrink-0 text-xs text-muted-fg">{{ tool.status || 'ready' }}</span>
-											</div>
-											<p class="mt-1 truncate text-xs text-muted-fg">{{ tool.name }}</p>
-										</div>
-									</div>
-									<p v-else class="mt-3 text-sm leading-6 text-muted-fg">Tool activity appears here as the agent works.</p>
-								</div>
+											<span class="grid size-7 shrink-0 place-items-center rounded-lg bg-secondary text-muted-fg">
+												<svg viewBox="0 0 24 24" class="size-3.5" fill="none" aria-hidden="true">
+													<path d="M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8V20h3.2l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.5 2.5-2.3-.7-.7-2.3 2.5-2.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
+												</svg>
+											</span>
+											<span class="min-w-0 flex-1">
+												<span class="block truncate text-sm font-medium text-canvas-fg">{{ tool.label || tool.name }}</span>
+												<span class="block truncate font-mono text-[11px] text-muted-fg">{{ tool.name }}</span>
+											</span>
+											<span class="shrink-0 text-xs capitalize text-muted-fg">{{ tool.status || 'ready' }}</span>
+										</li>
+									</ul>
+									<p v-else class="mt-2 text-sm leading-6 text-muted-fg">Tool activity appears here as the agent works.</p>
+								</section>
 
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<p class="text-xs font-semibold uppercase text-muted-fg">Available tools</p>
-									<div v-if="activeAgent?.tools?.length" class="mt-3 flex flex-wrap gap-2">
-										<span
-											v-for="tool in activeAgent.tools"
-											:key="tool"
-											class="rounded-full border border-border bg-secondary px-2.5 py-1 text-xs font-medium text-muted-fg"
-										>
-											{{ tool }}
-										</span>
+								<section class="p-4">
+									<h3 class="text-xs font-medium uppercase tracking-wide text-muted-fg">Available tools</h3>
+									<div v-if="activeAgent?.tools?.length" class="mt-3 flex flex-wrap gap-1.5">
+										<DomBadge v-for="tool in activeAgent.tools" :key="tool" class="font-mono" size="sm">{{ tool }}</DomBadge>
 									</div>
-									<p v-else class="mt-3 text-sm leading-6 text-muted-fg">No tool manifest supplied.</p>
-								</div>
+									<p v-else class="mt-2 text-sm leading-6 text-muted-fg">No tool manifest supplied.</p>
+								</section>
 							</div>
 						</aside>
 					</slot>