@intentic/extension-ui 1.309.0 → 1.311.0

package/README.md

@@ -1,58 +1,36 @@
-# @intentic/extension-ui
+# extension-ui
 
-The UI kit an extension renders with, so its views look like the app rather than like a website.
+The UI kit extensions render with: a curated slice of the editor's design system that the host supplies at runtime, so extension views use the shell's own component instances.
 
-A curated slice of the app design system ([`@intentic/ui`](../../_editor/ui)) plus the PrimeVue primitives extension views
-actually use. One of the two packages an extension may depend on (with
-[`@intentic/extension-api`](../../_shared/extension-api)).
-
-## Host-provided at runtime
-
-This package's [`src/index.ts`](src/index.ts) is its one public surface (the repo's re-export exception). The
-kit is **host-provided**: the web app maps this module into its import map
-([extension-host/hostModules.ts](../../_editor/web/src/extension-host/hostModules.ts)), so a third-party bundle
-that marks it external resolves to the **shell's own** component instances and theming: one Vue, one
-PrimeVue, one theme across the host and every extension. In-repo builtin extensions bundle this same module
-and land on the same instances.
-
-The scope reads oddly (an `@intentic/*` package depending on the app-side `@intentic/ui`) but it is
-deliberate: the dependency is build-time-only (for in-repo builtins); at runtime the import map supplies the
-shell's instances, so no second copy is shipped.
-
-## Drift assertion
+```mermaid
+flowchart LR
+    ui["_editor/ui<br/>design system"] -- "re-exported by src/" --> kit(["extension-ui"])
+    kit -- "compiled into" --> host["Editor<br/>hostModules.ts"]
+    bundle["Extension bundle"] -- "import map" --> shim["/ext-shims/extension-ui.js"]
+    shim -- "globalThis.__intenticHost" --> host
+```
 
-Export names are mirrored in [`names.mjs`](names.mjs), which drives shim generation and a drift assertion:
-keep the two in sync when adding or removing an export. Publishing a typed npm artifact for out-of-repo
-authors is a marketplace-phase task.
+- `src/index.ts` re-exports chosen components and helpers from `@intentic/ui` (`_editor/ui`) plus the PrimeVue
+  primitives extension views use. Nothing is reimplemented, so an extension view looks and behaves like the shell
+  around it. This dependency on `_editor/ui` is a recorded exception to the [`_shared/` boundary](../README.md).
+- At runtime the host supplies the kit: `hostModules.ts` publishes the editor's own module instances on
+  `globalThis.__intenticHost`, and the import map in the editor's `index.html` resolves `@intentic/extension-ui` to a
+  shim that reads them. A second copy would render unthemed, outside the app's reactivity and its query cache.
+- `scripts/build.mjs` compiles the published package from `_editor/ui`'s sources: declarations pruned to what the kit
+  re-exports, and a `dist/index.js` bridge that throws when loaded outside an intentic host.
+- `names.mjs` lists the runtime export names by hand, because the `.vue` graph cannot load in Node. The editor's shim
+  generator reads it, and a dev-time assertion in `hostModules.ts` catches drift.
+- `./diff`, `./format` and `./i18n` skip the component barrel, for extension tests that run without a Vue compiler.
 
 ## Key files
 
-- [src/index.ts](src/index.ts), the whole surface: which components and helpers an extension may render with.
-- [src/format.ts](src/format.ts): the shared formatters, so two extensions render a duration the same way.
-- [src/i18n.ts](src/i18n.ts): the extension's words. `extensionI18n(id, base, load)` is the one call every in-repo
-  extension's `src/i18n.ts` now makes, returning the catalog the host mounts and the translator its components read;
-  `extensionT(id)` is that translator alone, bound to its own slice of the host's one message tree, and
-  `registerExtensionMessages` mounts a catalog, which is what the host does before `activate` and what a test
-  calling `activate` itself has to do instead.
-
-## The one control worth calling out
-
-`AgentRunButton` and `useAgentRunPick` are re-exported because five extensions start an agent for the user:
-pipelines, deployments, maintenance, documentation, acceptance: and each had reached its own answer about how
-you choose what that costs. Press the primary half and the run opens on the sandbox's standing model for the job
-the caller named; use the caret and a panel opens on that run, ending in a bar that carries the button's own
-label. Both halves emit the same `run`, because both are the same act: the press that finishes configuring the
-run is the press that starts it.
-
-The choice covers more than the model — the account, the harness, the tier, extended thinking and speed
-(`AgentRunChoice`) — and every one of them is a different price. Send them on the turn you start beside `model`:
-the sandbox fills a pinned entry's knobs in only for a run that named no model, so dropping them runs the model
-you chose on the provider's defaults for everything else. `runPickOf(choice)` (from `@intentic/sandbox-contract`)
-translates the whole thing into the turn's own field names in one call.
+- [src/index.ts](src/index.ts) — the kit: every name an extension may import, with usage notes.
+- [scripts/build.mjs](scripts/build.mjs) — builds the published types and the host bridge from `_editor/ui`.
+- [names.mjs](names.mjs) — the runtime export names the shims and the host check read.
+- [../../_editor/web/src/extension-host/hostModules.ts](../../_editor/web/src/extension-host/hostModules.ts) — where the shell publishes its instances to extension bundles.
 
-`useAgentRunPick` takes `api.models` as an argument rather than importing it, which is what lets the control
-live in a kit that knows nothing about the extension API. Pass the extension's own host handle:
+## Commands
 
-```ts
-const runModel = useAgentRunPick(() => host().models);
+```sh
+pnpm --filter @intentic/extension-ui build
 ```

package/dist/index.js

@@ -80,13 +80,13 @@ export const formatDateTime = m["formatDateTime"];
 export const formatDayMonth = m["formatDayMonth"];
 export const formatDayMonthTime = m["formatDayMonthTime"];
 export const formatDuration = m["formatDuration"];
+export const formatOf = m["formatOf"];
 export const formatTime = m["formatTime"];
 export const formatTimestamp = m["formatTimestamp"];
 export const formatTokens = m["formatTokens"];
 export const formatWeekdayTime = m["formatWeekdayTime"];
 export const formatWhen = m["formatWhen"];
 export const freshness = m["freshness"];
-export const isRenderableImage = m["isRenderableImage"];
 export const noticeFrom = m["noticeFrom"];
 export const noticeOf = m["noticeOf"];
 export const openForwardedPort = m["openForwardedPort"];
@@ -103,6 +103,7 @@ export const useAsyncAction = m["useAsyncAction"];
 export const useCompact = m["useCompact"];
 export const useDevice = m["useDevice"];
 export const useKeyedDraft = m["useKeyedDraft"];
+export const useLatest = m["useLatest"];
 export const useListNavigation = m["useListNavigation"];
 export const useLoadingReveal = m["useLoadingReveal"];
 export const useNarrow = m["useNarrow"];

package/dist/types/extension-ui/src/index.d.ts

@@ -1,4 +1,4 @@
-export { AgentRunButton, type AgentRunAttempt, type AgentRunChoice, type AgentRunPicker, type ModelPicking, useAgentRunPick, type FixStanceLook, fixStanceLook, AnchoredOverlay, Avatar, Button, vAction, BarChart, BottomSheet, BrandMark, Card, clipboardOf, browserOwnsClick, appLink, openForwardedPort, ChangeStatusMark, type ChangeStatus, ui, Code, CodeField, ConfirmDialog, ContextMenu, CopyButton, StatusTally, type TallyItem, DagEditor, DagGraph, type DagEdge, type DagNode, DiffStat, DisclosureRow, FilterBar, Icon, type IconName, ImageView, InfoDialog, InfoHint, InfoTable, isRenderableImage, Markdown, MarkdownDocument, MarkdownFigure, Modal, type NavGroup, NavRail, NoteEditor, type NoteDraft, type NoteDraftOptions, useNoteDraft, useKeyedDraft, type NoticeModel, type NoticeTone, type NoticeAction, Notice, NoticeStack, Page, PageAction, PageHeader, ScrollFrame, PersonaFace, type PersonaLike, Picker, ProjectChip, type PickerGroup, type PickerOption, type PickerOptions, ProgressRing, RepoRail, type RepoRailAll, type RepoRailGroup, type RepoRailRow, ProseField, ResizeSeam, ResponsiveOverlay, Row, RowGroup, SearchBar, SegmentedControl, seriesColor, sinceOf, useLoadingReveal, SkeletonRows, SplitView, StatStrip, StatusBadge, type StatusVariant, StepSection, timeWindows, type TimeWindow, timeWindowWords, useCompact, useDevice, useListNavigation, useNow, errorMessage, noticeFrom, noticeOf, useAsyncAction, useNarrow, useRailMemory, useScrollReset, type StickyTop, useStickyTop, useTheme, } from "../../ui/src/index.js";
+export { AgentRunButton, type AgentRunAttempt, type AgentRunChoice, type AgentRunPicker, type ModelPicking, useAgentRunPick, type FixStanceLook, fixStanceLook, AnchoredOverlay, Avatar, Button, vAction, BarChart, BottomSheet, BrandMark, Card, clipboardOf, browserOwnsClick, appLink, openForwardedPort, ChangeStatusMark, type ChangeStatus, ui, Code, CodeField, ConfirmDialog, ContextMenu, CopyButton, StatusTally, type TallyItem, DagEditor, DagGraph, type DagEdge, type DagNode, DiffStat, DisclosureRow, FilterBar, Icon, type IconName, ImageView, InfoDialog, InfoHint, InfoTable, type FileFormat, formatOf, Markdown, MarkdownDocument, MarkdownFigure, Modal, type NavGroup, NavRail, NoteEditor, type NoteDraft, type NoteDraftOptions, useNoteDraft, useKeyedDraft, type NoticeModel, type NoticeTone, type NoticeAction, Notice, NoticeStack, Page, PageAction, PageHeader, ScrollFrame, PersonaFace, type PersonaLike, Picker, ProjectChip, type PickerGroup, type PickerOption, type PickerOptions, ProgressRing, RepoRail, type RepoRailAll, type RepoRailGroup, type RepoRailRow, ProseField, ResizeSeam, ResponsiveOverlay, Row, RowGroup, SearchBar, SegmentedControl, seriesColor, sinceOf, useLoadingReveal, SkeletonRows, SplitView, StatStrip, StatusBadge, type StatusVariant, StepSection, timeWindows, type TimeWindow, timeWindowWords, useCompact, useDevice, useListNavigation, useNow, useLatest, errorMessage, noticeFrom, noticeOf, useAsyncAction, useNarrow, useRailMemory, useScrollReset, type StickyTop, useStickyTop, useTheme, } from "../../ui/src/index.js";
 export { formatBytes, formatDate, formatDateTime, formatDayMonth, formatDayMonthTime, formatDuration, formatTime, formatTimestamp, formatTokens, formatWeekdayTime, formatWhen, freshness, timeAgo, } from "./format.js";
 export { diffSequence, pairEdits, similarity, wordDiff } from "./diff.js";
 export { activeLocale, extensionT } from "./i18n.js";

package/dist/types/ui/src/components/primitives/Code.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     clampLines?: number;
     scrollLines?: number;
     scrollBottom?: boolean;
+    tail?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     copied: () => any;

package/dist/types/ui/src/components/primitives/imageView.d.ts

@@ -1,4 +1,3 @@
-export declare const isRenderableImage: (path: string) => boolean;
 export type ImageViewState = {
     readonly fit: true;
 } | {

package/dist/types/ui/src/composables/useLatest.d.ts

@@ -0,0 +1 @@
+export declare const useLatest: () => (() => () => boolean);

package/dist/types/ui/src/index.d.ts

@@ -29,7 +29,6 @@ export { type DagEdge, type DagNode } from "./components/charts/dagLayout.js";
 export { default as FilterBar } from "./components/forms/FilterBar.vue";
 export { default as Icon } from "./components/primitives/Icon.vue";
 export { default as ImageView } from "./components/primitives/ImageView.vue";
-export { isRenderableImage } from "./components/primitives/imageView.js";
 export { default as InfoDialog } from "./components/overlays/InfoDialog.vue";
 export { default as InfoHint } from "./components/feedback/InfoHint.vue";
 export { default as InfoTable } from "./components/feedback/InfoTable.vue";
@@ -73,6 +72,7 @@ export { default as StatusBadge, type StatusVariant } from "./components/feedbac
 export { default as StepSection } from "./components/layout/StepSection.vue";
 export { sinceOf, timeWindows, type TimeWindow, timeWindowWords } from "./lib/timeWindow.js";
 export { type IconName } from "./icons/iconSets.js";
+export { type FileFormat, formatOf } from "./lib/fileFormat.js";
 export { useDevice } from "./composables/useDevice.js";
 export { useNarrow } from "./composables/useNarrow.js";
 export { useListNavigation } from "./composables/useListNavigation.js";
@@ -80,6 +80,7 @@ export { useScrollReset } from "./composables/useScrollReset.js";
 export { type StickyTop, useStickyTop } from "./composables/useStickyTop.js";
 export { useRailMemory } from "./composables/useRailMemory.js";
 export { useNow } from "./composables/useNow.js";
+export { useLatest } from "./composables/useLatest.js";
 export { useLoadingReveal } from "./composables/loadingReveal.js";
 export { errorMessage, noticeFrom, noticeOf, useAsyncAction } from "./composables/useAsyncAction.js";
 export { useTheme } from "./composables/useTheme.js";

package/dist/types/ui/src/lib/fileFormat.d.ts

@@ -0,0 +1,11 @@
+export type FileCategory = "code" | "style" | "config" | "data" | "image" | "audio" | "video" | "doc" | "shell" | "archive" | "lock" | "binary" | "generic";
+export interface FileFormat {
+    readonly category: FileCategory;
+    readonly label?: string;
+    readonly binary?: true;
+    readonly reads?: "markdown" | "plain" | "table" | "document";
+    readonly sheet?: true;
+    readonly pages?: true;
+}
+export declare const extensionOf: (path: string) => string;
+export declare const formatOf: (path: string) => FileFormat;

package/dist/types/ui/src/markdown/index.d.ts

@@ -5,4 +5,4 @@ export { createMarkdownHistory, type DocumentState, type EditKind, type Markdown
 export { blockBody, buildBlockElement, caretAtOffset, offsetOfCaret } from "./sourceDom.js";
 export { type BarsFigure, type BarsFigureItem, type DagFigure, type DagFigureEdge, type DagFigureNode, type Figure, FIGURE_ACCENTS, type FigureAccent, FIGURE_LANGS, JSON_FIGURE_LANGS, type MarkdownSegment, MERMAID_LANG, type MermaidFigure, parseFigure, splitFigureSegments, type StatsFigure, type StatsFigureItem, } from "./figures.js";
 export { type Frontmatter, type FrontmatterField, frontmatterHtml, splitFrontmatter } from "./frontmatter.js";
-export { createStreamingMarkdown, lexBlocks, lexInline, type MarkdownDecorator, type MarkdownPart, markdownParseCount, type MarkdownToken, renderMarkdown, renderMarkdownParts, type RenderedMarkdown, settledEnd, type StreamingMarkdown, } from "./render.js";
+export { createStreamingMarkdown, lexBlocks, lexInline, type MarkdownDecorator, type MarkdownPart, markdownParseCount, type MarkdownToken, parseMarkdownParts, type ParsedMarkdown, renderMarkdown, renderMarkdownParts, renderParsedMarkdown, type RenderedMarkdown, settledEnd, type StreamingMarkdown, } from "./render.js";

package/dist/types/ui/src/markdown/render.d.ts

@@ -1,3 +1,4 @@
+import { type CodeBlock } from "./code.js";
 import { type Figure } from "./figures.js";
 export interface MarkdownToken {
     readonly type: string;
@@ -7,6 +8,10 @@ export interface MarkdownToken {
 export declare const lexBlocks: (source: string) => readonly MarkdownToken[] | undefined;
 export declare const lexInline: (source: string) => readonly MarkdownToken[] | undefined;
 export type MarkdownDecorator = (fragment: DocumentFragment) => void;
+interface MarkdownParts {
+    readonly html: string;
+    readonly blocks: readonly CodeBlock[];
+}
 export declare const markdownParseCount: () => number;
 export declare const renderMarkdown: (source: string, decorate?: MarkdownDecorator) => string;
 export type MarkdownPart = {
@@ -17,9 +22,20 @@ export type MarkdownPart = {
     readonly figure: Figure;
 };
 export type RenderedMarkdown = readonly MarkdownPart[];
+type ParsedPart = {
+    readonly kind: "prose";
+    readonly parts: MarkdownParts;
+} | {
+    readonly kind: "figure";
+    readonly figure: Figure;
+};
+export type ParsedMarkdown = readonly ParsedPart[];
+export declare const parseMarkdownParts: (source: string, decorate?: MarkdownDecorator) => ParsedMarkdown;
+export declare const renderParsedMarkdown: (parsed: ParsedMarkdown) => RenderedMarkdown;
 export declare const renderMarkdownParts: (source: string, decorate?: MarkdownDecorator) => RenderedMarkdown;
 export declare const settledEnd: (text: string, from: number) => number;
 export interface StreamingMarkdown {
     readonly render: (source: string) => RenderedMarkdown;
 }
 export declare const createStreamingMarkdown: (decorate?: MarkdownDecorator) => StreamingMarkdown;
+export {};

package/dist/types/ui/src/markdown/sourceDom.d.ts

@@ -1,4 +1,5 @@
 export declare const blockBody: (element: Element) => string;
+export declare const FIGURE_HOLDER = "md-code-figure";
 export declare const buildBlockElement: (source: string) => HTMLElement;
 export declare const offsetOfCaret: (element: HTMLElement, node: Node, offset: number) => number;
 export declare const caretAtOffset: (element: HTMLElement, offset: number) => {

package/names.mjs

@@ -30,6 +30,7 @@ export const extensionUiNames = [
     "FilterBar",
     "fixStanceLook",
     "formatBytes",
+    "formatOf",
     "formatDate",
     "formatDateTime",
     "formatDayMonth",
@@ -48,7 +49,6 @@ export const extensionUiNames = [
     "InfoDialog",
     "InfoHint",
     "InfoTable",
-    "isRenderableImage",
     "Markdown",
     "MarkdownDocument",
     "MarkdownFigure",
@@ -100,6 +100,7 @@ export const extensionUiNames = [
     "useNarrow",
     "useNoteDraft",
     "useNow",
+    "useLatest",
     "pairEdits",
     "useRailMemory",
     "useScrollReset",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentic/extension-ui",
-  "version": "1.309.0",
+  "version": "1.311.0",
   "description": "The UI kit intentic extensions render with, host-provided at runtime (the app's own components via the import map), so extension UI is always native to the shell",
   "license": "MIT",
   "type": "module",

package/src/i18n.ts

@@ -19,6 +19,8 @@ import type { Ref } from "vue";
  */
 export type ExtensionT = (key: string, values?: Record<string, unknown>, plural?: number) => string;
 
+const namespaceOf = (extensionId: string): string => `ext.${extensionId}`;
+
 /**
  * One extension's translator, bound to the slice of the message tree the host mounted its catalog under. Keys are its
  * own — `t("panel.title")` for what lives at `ext.<id>.panel.title` — so nothing it writes can collide with the app's
@@ -34,7 +36,7 @@ export type ExtensionT = (key: string, values?: Record<string, unknown>, plural?
  * The messages themselves are declared on the extension's module (`export const messages`), which the host loads for
  * the reader's language before it calls `activate`.
  */
-export const extensionT = (extensionId: string): ExtensionT => useT(`ext.${extensionId}`);
+export const extensionT = (extensionId: string): ExtensionT => useT(namespaceOf(extensionId));
 
 /**
  * One extension's words in one call: the catalog the host mounts (`messages`) and the translator its components
@@ -70,7 +72,7 @@ export const extensionI18n = (
 export const registerExtensionMessages = (
     extensionId: string,
     messages: { readonly base: MessageTree; readonly load: (locale: string) => Promise<{ readonly default: MessageTree }> },
-): Promise<void> => registerCatalog({ namespace: `ext.${extensionId}`, base: messages.base, load: (locale: string) => messages.load(locale) });
+): Promise<void> => registerCatalog({ namespace: namespaceOf(extensionId), ...messages });
 
 /** The language on screen, for the rare contribution that formats something itself. Read-only: change it with nothing. */
 export const activeLocale: Readonly<Ref<Locale>> = active;

package/src/index.ts

@@ -65,7 +65,9 @@ export {
     InfoDialog,
     InfoHint,
     InfoTable,
-    isRenderableImage,
+    // What a file is by its name (category, label, whether it is ever text), the table the shell's own surfaces read.
+    type FileFormat,
+    formatOf,
     Markdown,
     // An editable markdown document (author-facing), unlike `Markdown`'s read-only render.
     MarkdownDocument,
@@ -140,6 +142,8 @@ export {
     useListNavigation,
     // A ticking clock (`useNow`) and a busy/error flag for one mutation at a time (`useAsyncAction`).
     useNow,
+    // Drops an answer a newer request has superseded: `const current = begin(); …; if (!current()) return;`.
+    useLatest,
     errorMessage,
     noticeFrom,
     noticeOf,