@hachej/boring-ui-kit 0.4.9 → 0.4.10

package/dist/shared-chat/index.d.ts

@@ -2,7 +2,7 @@ import type { ChatAttempt, ChatDraft, ChatSendInput, NativeChatSnapshot } from '
 export { ChannelRequestError } from './error.js';
 import type { Card, ChannelMessage, ChannelSource, Member, SharedChatState } from './source.js';
 export type * from './source.js';
-export { channelAvatarStates } from './source.js';
+export { channelAvatarStates, cardActions } from './source.js';
 export type SharedChatSnapshot = Omit<NativeChatSnapshot, 'conversationId' | 'send' | 'shared'> & {
     readonly conversationId: string;
     readonly shared: SharedChatState;
@@ -37,7 +37,8 @@ export declare function createSharedChat(source: ChannelSource, options: {
     retrySameRequest: () => Promise<void>;
     stop: () => Promise<never>;
     dispose: () => Promise<undefined>;
-    action: (card: Card) => Promise<void>;
+    /** Runs one of the card's own actions (the first when `actionId` is omitted). An id the card does not offer is refused. */
+    action: (card: Card, actionId?: string) => Promise<void>;
     remove: ((message: ChannelMessage) => Promise<void>) | undefined;
     canRemove: (message: ChannelMessage) => boolean;
 };

package/dist/shared-chat/index.js

@@ -2,7 +2,8 @@ import { randomUUID } from '@hachej/boring-files/platform';
 import { createChatOutbox } from '../chat-outbox.js';
 import { ChannelRequestError } from './error.js';
 export { ChannelRequestError } from './error.js';
-export { channelAvatarStates } from './source.js';
+import { cardActions } from './source.js';
+export { channelAvatarStates, cardActions } from './source.js';
 /** Host-owned multi-party log, not a Pi conversation or an agent runtime. One adapter per selected conversation. */
 export function createSharedChat(source, options) {
     const id = options.conversationId, limit = options.limit ?? 60;
@@ -237,7 +238,14 @@ export function createSharedChat(source, options) {
             listeners.clear();
             return undefined;
         },
-        action: (card) => card.action ? source.action({ conversationId: id, requestId: card.requestId, actionId: card.action.id }) : Promise.resolve(),
+        /** Runs one of the card's own actions (the first when `actionId` is omitted). An id the card does not offer is refused. */
+        action: (card, actionId) => {
+            const actions = cardActions(card);
+            const chosen = actionId === undefined ? actions[0] : actions.find(action => action.id === actionId);
+            if (!chosen)
+                return actionId === undefined ? Promise.resolve() : Promise.reject(new Error(`The card offers no action ${actionId}`));
+            return source.action({ conversationId: id, requestId: card.requestId, actionId: chosen.id });
+        },
         remove: source.remove && source.canRemove ? (message) => source.canRemove?.(message) === true ? source.remove(message.id) : Promise.reject(new Error('Removal refused')) : undefined,
         canRemove: (message) => Boolean(source.remove && source.canRemove?.(message)),
     };

package/dist/shared-chat/socket.js

@@ -1,11 +1,12 @@
 import { z } from 'zod';
 import { randomUUID } from '@hachej/boring-files/platform';
 import { ChannelRequestError } from './error.js';
-const member = z.object({ id: z.string(), name: z.string(), kind: z.enum(['person', 'agent', 'admin']), role: z.union([z.enum(['owner', 'validator', 'member', 'admin']), z.templateLiteral(['agent:', z.string()])]).optional(), avatarUrl: z.string().optional(), presence: z.enum(['here', 'away']).optional() });
+const member = z.object({ id: z.string(), name: z.string(), kind: z.enum(['person', 'agent', 'admin']), role: z.union([z.enum(['owner', 'validator', 'member', 'admin']), z.templateLiteral(['agent:', z.string()])]).optional(), roleLabel: z.string().optional(), avatarUrl: z.string().optional(), presence: z.enum(['here', 'away']).optional() });
 const conversation = z.object({ id: z.string(), title: z.string(), kind: z.string(), members: z.array(z.string()) });
 const step = z.object({ label: z.string(), detail: z.string().optional(), status: z.enum(['running', 'done', 'failed']) });
+const cardAction = z.object({ id: z.string(), label: z.string(), variant: z.enum(['primary', 'secondary']).optional() });
 const message = z.object({ id: z.string(), conversationId: z.string(), author: z.string(), at: z.string(), via: z.string().optional(), text: z.string().optional(),
-    card: z.object({ requestId: z.string(), title: z.string(), line: z.string(), since: z.string().optional(), state: z.string().optional(), action: z.object({ id: z.string(), label: z.string() }).optional() }).optional(),
+    card: z.object({ requestId: z.string(), title: z.string(), line: z.string(), since: z.string().optional(), state: z.string().optional(), action: cardAction.optional(), actions: z.array(cardAction).optional() }).optional(),
     mentions: z.array(z.string()).optional(), replyTo: z.string().optional(), attachments: z.array(z.object({ path: z.string(), title: z.string().optional() })).optional(), steps: z.array(step).optional(), streaming: z.boolean().optional(),
     removed: z.object({ by: z.string(), at: z.string() }).optional(), clientId: z.string().optional() });
 const event = z.discriminatedUnion('type', [z.object({ type: z.literal('message'), message }),

package/dist/shared-chat/source.d.ts

@@ -1,8 +1,10 @@
+/** `roleLabel` is the host's own line beside the author (« the coach »); without it the view derives one from `kind` and `role`. */
 export type Member = {
     id: string;
     name: string;
     kind: 'person' | 'agent' | 'admin';
     role?: 'owner' | 'validator' | 'member' | 'admin' | `agent:${string}`;
+    roleLabel?: string;
     avatarUrl?: string;
     presence?: 'here' | 'away';
 };
@@ -12,17 +14,24 @@ export type Conversation = {
     kind: 'main' | 'admin' | 'direct' | string;
     members: string[];
 };
+/** `primary` is the card's main choice; `secondary` a quieter one (« Not now »). Without a variant the first action is primary. */
+export type CardAction = {
+    id: string;
+    label: string;
+    variant?: 'primary' | 'secondary';
+};
+/** `actions` offers several choices; the older single `action` still works and is used only when `actions` is absent. */
 export type Card = {
     requestId: string;
     title: string;
     line: string;
     since?: string;
     state?: string;
-    action?: {
-        id: string;
-        label: string;
-    };
+    action?: CardAction;
+    actions?: CardAction[];
 };
+/** The card's choices in order: `actions`, else the single `action`, else none. */
+export declare function cardActions(card: Pick<Card, 'action' | 'actions'>): readonly CardAction[];
 export type Step = {
     label: string;
     detail?: string;

package/dist/shared-chat/source.js

@@ -1,3 +1,7 @@
+/** The card's choices in order: `actions`, else the single `action`, else none. */
+export function cardActions(card) {
+    return card.actions ?? (card.action ? [card.action] : []);
+}
 /** Host lifecycle ids affect presentation only. Missing and unknown ids have no indicator. */
 export const channelAvatarStates = Object.freeze({
     building: 'working', executing: 'working', checks: 'working', asked: 'thinking',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -134,7 +134,7 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.4.9",
+    "@hachej/boring-files": "^0.4.10",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/r/agent-target.json

@@ -4,15 +4,15 @@
   "title": "Point and dictate on app data",
   "description": "Tap explicitly marked JSON app context, dictate once and show the same app agent’s native reply without opening chat. Host-controlled presentation; no feedback report or second controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-feedback@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-feedback@^0.4.10",
     "@earendil-works/pi-durable@~1.2.0",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-chat.json",
     "button",
     "card",
     "message",

package/r/app-shell.json

@@ -4,19 +4,19 @@
   "title": "App shell: layouts, list/detail and agent layer",
   "description": "AppShell with three layouts. B \"workspace\" puts a ListDetail on a screen (phone: the list, then the detail as a stack step with Back; wide: a 20rem list and the detail side by side, sidebar as an icon rail). C \"chat\" wraps the app's own AgentWorkspace (untouched, passed as the nav item's render; install the pi-app item yourself) in the same sidebar, account menu and header; it takes no shell agent. A \"screen\": one screen at a time, every screen kept mounted. On a phone bottom tabs (at most four; more give three plus a « Plus » sheet) and an avatar button that opens the account sheet; on a wide screen the shadcn sidebar (icon rail, NavUser). One header per screen through useScreenHeader (title, subtitle, back, up to two actions, the rest behind « … »). The account menu holds « Améliorer l'app » (the improve agent), the app's own entries and sign out. AppSheet is the one bottom sheet (one open at a time, Back closes it). It mounts the AgentLayer: one agent's PiChat above the app (phone: a drawer with peek, half and full snap points; wide: a right panel), the improve agent in the same layer, optional push-to-talk and point mode. Also useAgentContext and readAgentContext (the screen on show travels as `context` with each submit) and useBackLayer, the one Back manager. Built on explicitly pinned Base UI drawer and dropdown-menu recipes, plus the sidebar and avatar of the host's own shadcn style.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.9",
-    "@hachej/boring-ui-kit@^0.4.9",
+    "@hachej/boring-feedback@^0.4.10",
+    "@hachej/boring-ui-kit@^0.4.10",
     "@base-ui/react@^1.9.0",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/dock.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/feedback.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/feedback.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/button.json",
     "drawer",
     "sidebar",
     "avatar",

package/r/board-viewer.json

@@ -4,16 +4,16 @@
   "title": "Board viewer",
   "description": "A board@1 artifact kind for *.board.json. Lazy native tldraw projection of maquette screens, sandboxed HTML mock-ups, goto arrows and notes. Conditional board-file autosave; phone viewing without accidental frame edits. Hosts supply their resource client, asset URLs and license key.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "lucide-react@1.51.0",
     "tldraw@5.5.2"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/maquette-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/mockup-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/maquette-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-chat.json",
     "button",
     "alert",
     "card",

package/r/button.json

@@ -9,7 +9,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json",
     "dropdown-menu",
     "button",
     "toggle",

package/r/diagram-viewer.json

@@ -8,7 +8,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/theme.json",
     "alert",
     "badge"
   ],

package/r/dock.json

@@ -7,7 +7,7 @@
     "react@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json"
   ],
   "files": [
     {

package/r/documents.json

@@ -4,20 +4,20 @@
   "title": "Documents: the Library, a file and its revisions",
   "description": "The workspace's Library as the list, the chosen file in its viewer and its retained revisions beside it (an older one opens read-only). DocumentSheet opens one document over the app for a host's « Voir la fiche », with an optional « Toutes les fiches ». Every read goes through one revisionProvider binding.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/button.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/file-tree.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/viewers.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/file-tree.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/viewers.json",
     "drawer",
     "button",
     "scroll-area",

package/r/feedback-preview.json

@@ -4,7 +4,7 @@
   "title": "Feedback preview",
   "description": "PreviewBanner: a live, reversible preview of a change in the page (Approve / Discard) over `@hachej/boring-feedback/preview`, whose subagent calls models through a host gateway. Separate from `feedback` so annotation-only apps do not install the model SDK; install `feedback` first (its styles cover the banner).",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.9",
+    "@hachej/boring-feedback@^0.4.10",
     "@earendil-works/pi-ai@~1.2.0",
     "react@^19.0.0"
   ],

package/r/feedback.json

@@ -4,16 +4,16 @@
   "title": "Feedback",
   "description": "Feedback from the chat composer: one Feedback button starts feedback mode on the application page (hover, click to pin a numbered note, hold ⌥ to use the app, optional voice), and one chip carries the notes to the next message. FeedbackBar, NoteBubble, FeedbackChip with its review, useComposerFeedback for the pi-chat composer, and PickerOverlay styles. Optional, not mounted by default: PointButton, AnnotateSheet, FeedbackList and FeedbackReport. Picking, masking, anchoring and placement stay in @hachej/boring-feedback/page and /ui, so restyling cannot weaken them.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.9",
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-feedback@^0.4.10",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json",
     "button",
     "toggle",
     "badge",

package/r/file-tree.json

@@ -4,15 +4,15 @@
   "title": "File tree",
   "description": "Browse, search, upload and inspect retained versions through one revisionProvider binding. Uses the consumer's shadcn Button and dropdown-menu with shared version-history rows; Base UI style only.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/version-history.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/version-history.json",
     "button",
     "dropdown-menu",
     "collapsible",

package/r/highlights.json

@@ -4,13 +4,13 @@
   "title": "Anchored highlights",
   "description": "Exact Markdown highlights and comments in a conditional workspace sidecar.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/markdown-editor.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/markdown-editor.json",
     "button",
     "textarea",
     "label",

package/r/html-viewer.json

@@ -4,13 +4,13 @@
   "title": "HTML source and passive preview",
   "description": "Exact HTML source editing with a reconstructed passive preview and borrowed controller. Browser security qualification remains separate.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/button.json"
   ],
   "files": [
     {

package/r/maquette-viewer.json

@@ -8,8 +8,8 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/diagram-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/diagram-viewer.json",
     "alert",
     "badge",
     "bubble",

package/r/markdown-editor.json

@@ -4,8 +4,8 @@
   "title": "Markdown editor",
   "description": "A host-owned styled wrapper over the concrete borrowed Markdown controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.9",
-    "@hachej/boring-files@^0.4.9",
+    "@hachej/boring-ui-kit@^0.4.10",
+    "@hachej/boring-files@^0.4.10",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -24,7 +24,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/button.json",
     "button",
     "toggle",
     "dropdown-menu"

package/r/mockup-viewer.json

@@ -10,7 +10,7 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.9/r/viewers.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.10/r/viewers.json",
     "badge",
     "toggle",
     "tooltip"
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/mockup-viewer/mockup-viewer.tsx",
-      "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { ComponentType, ReactNode, RefObject } from 'react';\nimport { CodeXmlIcon, MessageSquarePlusIcon } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { InteractiveFrame } from '../viewers/interactive-html';\nimport { mockupContent, readMockupPick } from './mockup-frame';\nimport type { MockupPick } from './mockup-frame';\n\nexport const isMockupPath = (path: string): boolean => /\\.mockup\\.html$/i.test(path);\nexport const mockupTarget = (path: string, selector: string): string => `mockup:${path}#element=${selector}`;\n\n/** Structurally the feedback item's usePointComments. Picks are host-owned proxy elements, never frame DOM. */\nexport interface MockupComments {\n  readonly active: boolean;\n  readonly picking?: boolean | undefined;\n  readonly point: () => void;\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n  readonly pick?: ((element: Element) => void) | undefined;\n  readonly reposition?: (() => void) | undefined;\n}\n\nexport interface MockupViewerProps {\n  readonly text: string;\n  readonly path?: string | undefined;\n  readonly comments?: MockupComments | undefined;\n  readonly locale?: 'en' | 'fr' | undefined;\n  readonly onReady?: (() => void) | undefined;\n}\n\nfunction useTheme(root: RefObject<HTMLDivElement | null>) {\n  const [theme, setTheme] = useState({ variables: '', dark: false });\n  useEffect(() => {\n    const element = root.current;\n    if (!element) return undefined;\n    const view = element.ownerDocument.defaultView;\n    if (!view) return undefined;\n    const media = view.matchMedia('(prefers-color-scheme: dark)');\n    const read = () => {\n      const computed = view.getComputedStyle(element);\n      const variables = Array.from(computed).filter(name => name.startsWith('--')).map(name => `${name}:${computed.getPropertyValue(name)}`).join(';');\n      const dark = !!element.closest('.dark') || (!element.closest('.light') && media.matches);\n      setTheme(current => current.variables === variables && current.dark === dark ? current : { variables, dark });\n    };\n    read();\n    const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(read);\n    for (let node: Element | null = element; node; node = node.parentElement) observer?.observe(node, { attributes: true, attributeFilter: ['class', 'style'] });\n    media.addEventListener('change', read);\n    return () => { observer?.disconnect(); media.removeEventListener('change', read); };\n  }, [root]);\n  return theme;\n}\n\nexport function MockupViewer({ text, path = '', comments, locale, onReady }: MockupViewerProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const frame = useRef<HTMLIFrameElement>(null);\n  const proxies = useRef(new Map<string, HTMLSpanElement>());\n  const pending = useRef<string | undefined>(undefined);\n  const theme = useTheme(root);\n  const [compiled, setCompiled] = useState<{ text: string; css: string } | { text: string; error: true }>();\n  const [picks, setPicks] = useState<readonly MockupPick[]>([]);\n  const label = locale === 'fr' ? 'Commenter un élément' : 'Comment on an element';\n  useEffect(() => {\n    let off = false;\n    setPicks([]);\n    void import('./mockup-compile').then(({ compileMockup }) => compileMockup(text)).then(css => { if (!off) setCompiled({ text, css }); }, () => { if (!off) setCompiled({ text, error: true }); });\n    return () => { off = true; };\n  }, [text, path]);\n  const ready = compiled?.text === text && 'css' in compiled;\n  const content = ready ? mockupContent(text, compiled.css) : undefined;\n  const picking = comments?.picking ?? comments?.active ?? false;\n  const mode = () => frame.current?.contentWindow?.postMessage({ type: 'mockup:pick-mode', on: picking, theme }, '*');\n  useEffect(mode, [picking, content, theme]);\n  useLayoutEffect(() => { pending.current = undefined; setPicks([]); }, [content]);\n  useEffect(() => {\n    const view = root.current?.ownerDocument.defaultView;\n    const onMessage = (event: MessageEvent<unknown>) => {\n      if (!frame.current?.contentWindow || event.source !== frame.current.contentWindow || event.origin !== 'null' || !comments?.pick) return;\n      const pick = readMockupPick(event.data);\n      if (!pick || (pick.type === 'mockup:pick' && !picking)) return;\n      if (pick.type === 'mockup:pick') pending.current = pick.selector;\n      setPicks(current => {\n        const exists = current.some(item => item.selector === pick.selector);\n        if (!exists && (pick.type !== 'mockup:pick' || current.length >= 50)) { pending.current = undefined; return current; }\n        return exists ? current.map(item => item.selector === pick.selector ? pick : item) : [...current, pick];\n      });\n    };\n    view?.addEventListener('message', onMessage);\n    return () => view?.removeEventListener('message', onMessage);\n  }, [comments, picking]);\n  useLayoutEffect(() => {\n    const selector = pending.current;\n    pending.current = undefined;\n    const proxy = selector === undefined ? undefined : proxies.current.get(selector);\n    if (proxy) comments?.pick?.(proxy);\n    else comments?.reposition?.();\n  }, [picks, comments?.pick, comments?.reposition]);\n  return <div ref={root} data-boring=\"mockup-viewer\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n    {comments?.pick && <nav data-feedback-ignore=\"\" className=\"flex shrink-0 justify-end px-2 py-1\">\n      <Tooltip><TooltipTrigger render={<Toggle aria-label={label} pressed={comments.active} onPressedChange={comments.point} data-testid=\"mockup-comment\" className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\" />}><MessageSquarePlusIcon aria-hidden=\"true\" /></TooltipTrigger><TooltipContent>{label}</TooltipContent></Tooltip>\n    </nav>}\n    <div className=\"relative flex min-h-0 min-w-0 flex-1 overflow-hidden\">\n      {content === undefined ? <p role=\"status\" className=\"p-3 text-muted-foreground\">{compiled && 'error' in compiled ? 'HTML mock-up unavailable.' : 'Loading HTML mock-up…'}</p>\n        : <InteractiveFrame key={content} text={content} sources={[]} title=\"HTML mock-up\" testId=\"mockup\" frameRef={frame} onLoad={() => { mode(); onReady?.(); }} />}\n      {picks.map(pick => <span key={pick.selector} ref={element => { if (element) proxies.current.set(pick.selector, element); else proxies.current.delete(pick.selector); }}\n        data-testid=\"mockup-element\" data-feedback-id={mockupTarget(path, pick.selector)} role=\"img\" aria-label=\"HTML mock-up element\"\n        className=\"pointer-events-none absolute overflow-hidden\" style={{ left: pick.rect.x, top: pick.rect.y, width: pick.rect.w, height: pick.rect.h }}>\n        {!comments?.active && comments?.pins.filter(pin => pin.target === mockupTarget(path, pick.selector)).map(pin => <Badge key={pin.number}>{pin.number}</Badge>)}\n      </span>)}\n    </div>\n  </div>;\n}\n\nexport interface MockupKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: { readonly text: string; readonly onReady?: (() => void) | undefined; readonly artifact?: { readonly target: { readonly resource: { readonly path: string } } } | undefined }) => ReactNode;\n}\n\nexport function createMockupKind({ comments, locale }: { readonly comments?: MockupComments | undefined; readonly locale?: 'en' | 'fr' | undefined } = {}): MockupKind {\n  return { match: target => isMockupPath(target.resource.path), label: locale === 'fr' ? 'Maquette HTML' : 'HTML mock-up', icon: CodeXmlIcon,\n    renderer: ({ text, artifact, onReady }) => <MockupViewer key={artifact?.target.resource.path} text={text} path={artifact?.target.resource.path} comments={comments} locale={locale} onReady={onReady} /> };\n}\nexport const mockupKind: MockupKind = createMockupKind();\n",
+      "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { ComponentType, ReactNode, RefObject } from 'react';\nimport { CodeXmlIcon, MessageSquarePlusIcon } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Toggle } from '@/components/ui/toggle';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { InteractiveFrame } from '../viewers/interactive-html';\nimport { mockupContent, readMockupPick } from './mockup-frame';\nimport type { MockupPick } from './mockup-frame';\n\nexport const isMockupPath = (path: string): boolean => /\\.mockup\\.html$/i.test(path);\nexport const mockupTarget = (path: string, selector: string): string => `mockup:${path}#element=${selector}`;\n\n/** Structurally the feedback item's usePointComments. Picks are host-owned proxy elements, never frame DOM. */\nexport interface MockupComments {\n  readonly active: boolean;\n  readonly picking?: boolean | undefined;\n  readonly point: () => void;\n  readonly pins: readonly { readonly number: number; readonly target: string }[];\n  readonly pick?: ((element: Element) => void) | undefined;\n  readonly reposition?: (() => void) | undefined;\n}\n\nexport interface MockupViewerProps {\n  readonly text: string;\n  readonly path?: string | undefined;\n  readonly comments?: MockupComments | undefined;\n  readonly locale?: 'en' | 'fr' | undefined;\n  readonly onReady?: (() => void) | undefined;\n}\n\nfunction useTheme(root: RefObject<HTMLDivElement | null>) {\n  const [theme, setTheme] = useState({ variables: '', dark: false });\n  useEffect(() => {\n    const element = root.current;\n    if (!element) return undefined;\n    const view = element.ownerDocument.defaultView;\n    if (!view) return undefined;\n    const media = view.matchMedia('(prefers-color-scheme: dark)');\n    const read = () => {\n      const computed = view.getComputedStyle(element);\n      const variables = Array.from(computed).filter(name => name.startsWith('--')).map(name => `${name}:${computed.getPropertyValue(name)}`).join(';');\n      const dark = !!element.closest('.dark') || (!element.closest('.light') && media.matches);\n      setTheme(current => current.variables === variables && current.dark === dark ? current : { variables, dark });\n    };\n    read();\n    const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(read);\n    for (let node: Element | null = element; node; node = node.parentElement) observer?.observe(node, { attributes: true, attributeFilter: ['class', 'style'] });\n    media.addEventListener('change', read);\n    return () => { observer?.disconnect(); media.removeEventListener('change', read); };\n  }, [root]);\n  return theme;\n}\n\nexport function MockupViewer({ text, path = '', comments, locale, onReady }: MockupViewerProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const frame = useRef<HTMLIFrameElement>(null);\n  const proxies = useRef(new Map<string, HTMLSpanElement>());\n  const pending = useRef<string | undefined>(undefined);\n  const theme = useTheme(root);\n  const [compiled, setCompiled] = useState<{ text: string; css: string } | { text: string; error: true }>();\n  const [picks, setPicks] = useState<readonly MockupPick[]>([]);\n  const label = locale === 'fr' ? 'Commenter un élément' : 'Comment on an element';\n  useEffect(() => {\n    let off = false;\n    setPicks([]);\n    void import('./mockup-compile').then(({ compileMockup }) => compileMockup(text)).then(css => { if (!off) setCompiled({ text, css }); }, () => { if (!off) setCompiled({ text, error: true }); });\n    return () => { off = true; };\n  }, [text, path]);\n  const ready = compiled?.text === text && 'css' in compiled;\n  const content = ready ? mockupContent(text, compiled.css) : undefined;\n  const picking = comments?.picking ?? comments?.active ?? false;\n  const mode = () => frame.current?.contentWindow?.postMessage({ type: 'mockup:pick-mode', on: picking, theme }, '*');\n  useEffect(mode, [picking, content, theme]);\n  useLayoutEffect(() => { pending.current = undefined; setPicks([]); }, [content]);\n  useEffect(() => {\n    const view = root.current?.ownerDocument.defaultView;\n    const onMessage = (event: MessageEvent<unknown>) => {\n      if (!frame.current?.contentWindow || event.source !== frame.current.contentWindow || event.origin !== 'null' || !comments?.pick) return;\n      const pick = readMockupPick(event.data);\n      if (!pick || (pick.type === 'mockup:pick' && !picking)) return;\n      if (pick.type === 'mockup:pick') pending.current = pick.selector;\n      setPicks(current => {\n        const exists = current.some(item => item.selector === pick.selector);\n        if (!exists && (pick.type !== 'mockup:pick' || current.length >= 50)) { pending.current = undefined; return current; }\n        return exists ? current.map(item => item.selector === pick.selector ? pick : item) : [...current, pick];\n      });\n    };\n    view?.addEventListener('message', onMessage);\n    return () => view?.removeEventListener('message', onMessage);\n  }, [comments, picking]);\n  useLayoutEffect(() => {\n    const selector = pending.current;\n    pending.current = undefined;\n    const proxy = selector === undefined ? undefined : proxies.current.get(selector);\n    if (proxy) comments?.pick?.(proxy);\n    else comments?.reposition?.();\n  }, [picks, comments?.pick, comments?.reposition]);\n  return <div ref={root} data-boring=\"mockup-viewer\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n    {comments?.pick && <nav data-feedback-ignore=\"\" className=\"flex shrink-0 justify-end px-2 py-1\">\n      <Tooltip><TooltipTrigger render={<Toggle aria-label={label} pressed={comments.active} onPressedChange={comments.point} data-testid=\"mockup-comment\" className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\" />}><MessageSquarePlusIcon aria-hidden=\"true\" /></TooltipTrigger><TooltipContent>{label}</TooltipContent></Tooltip>\n    </nav>}\n    <div className=\"relative flex min-h-0 min-w-0 flex-1 overflow-hidden\">\n      {content === undefined ? <p role=\"status\" className=\"p-3 text-muted-foreground\">{compiled && 'error' in compiled ? 'HTML mock-up unavailable.' : 'Loading HTML mock-up…'}</p>\n        : <InteractiveFrame key={content} text={content} sources={[]} title=\"HTML mock-up\" testId=\"mockup\" frameRef={frame} onLoad={() => { mode(); onReady?.(); }} />}\n      {picks.map(pick => <span key={pick.selector} ref={element => { if (element) proxies.current.set(pick.selector, element); else proxies.current.delete(pick.selector); }}\n        data-testid=\"mockup-element\" data-feedback-id={mockupTarget(path, pick.selector)} role=\"img\" aria-label=\"HTML mock-up element\"\n        className=\"pointer-events-none absolute overflow-hidden\" style={{ left: pick.rect.x, top: pick.rect.y, width: pick.rect.w, height: pick.rect.h }}>\n        {!comments?.active && comments?.pins.filter(pin => pin.target === mockupTarget(path, pick.selector)).map(pin => <Badge key={pin.number}>{pin.number}</Badge>)}\n      </span>)}\n    </div>\n  </div>;\n}\n\nexport interface MockupKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: { readonly text: string; readonly onReady?: (() => void) | undefined; readonly artifact?: { readonly target: { readonly resource: { readonly path: string } } } | undefined }) => ReactNode;\n  /** The sandboxed frame loads asynchronously: a `present` of a mock-up is confirmed only once it has loaded. */\n  readonly waitsForReady: true;\n}\n\nexport function createMockupKind({ comments, locale }: { readonly comments?: MockupComments | undefined; readonly locale?: 'en' | 'fr' | undefined } = {}): MockupKind {\n  return { match: target => isMockupPath(target.resource.path), label: locale === 'fr' ? 'Maquette HTML' : 'HTML mock-up', icon: CodeXmlIcon, waitsForReady: true,\n    renderer: ({ text, artifact, onReady }) => <MockupViewer key={artifact?.target.resource.path} text={text} path={artifact?.target.resource.path} comments={comments} locale={locale} onReady={onReady} /> };\n}\nexport const mockupKind: MockupKind = createMockupKind();\n",
       "type": "registry:component",
       "target": "components/mockup-viewer/mockup-viewer.tsx"
     },