@intentic/extension-ui 1.288.0 → 1.291.0

package/README.md

@@ -29,6 +29,9 @@ authors is a marketplace-phase task.
 
 - [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. `extensionT(id)` is its translator, bound to its own slice of
+  the host's one message tree; `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
 

package/dist/diff.js

@@ -0,0 +1,11 @@
+// Generated by scripts/build.mjs: do not edit.
+// The kit's diff entry point, off the same host bridge as ./index.js.
+const host = globalThis.__intenticHost;
+if (host === undefined) {
+    throw new Error("@intentic/extension-ui was loaded outside an intentic host: its helpers come from the app, not from this package.");
+}
+const m = host.modules["@intentic/extension-ui"];
+export const diffSequence = m["diffSequence"];
+export const pairEdits = m["pairEdits"];
+export const similarity = m["similarity"];
+export const wordDiff = m["wordDiff"];

package/dist/index.js

@@ -65,12 +65,12 @@ export const StatStrip = m["StatStrip"];
 export const StatusBadge = m["StatusBadge"];
 export const StatusTally = m["StatusTally"];
 export const StepSection = m["StepSection"];
-export const TIME_WINDOWS = m["TIME_WINDOWS"];
 export const ToggleSwitch = m["ToggleSwitch"];
 export const activeLocale = m["activeLocale"];
 export const appLink = m["appLink"];
 export const browserOwnsClick = m["browserOwnsClick"];
 export const clipboardOf = m["clipboardOf"];
+export const diffSequence = m["diffSequence"];
 export const errorMessage = m["errorMessage"];
 export const extensionT = m["extensionT"];
 export const fixStanceLook = m["fixStanceLook"];
@@ -88,10 +88,13 @@ export const isRenderableImage = m["isRenderableImage"];
 export const noticeFrom = m["noticeFrom"];
 export const noticeOf = m["noticeOf"];
 export const openForwardedPort = m["openForwardedPort"];
+export const pairEdits = m["pairEdits"];
 export const seriesColor = m["seriesColor"];
+export const similarity = m["similarity"];
 export const sinceOf = m["sinceOf"];
 export const timeAgo = m["timeAgo"];
 export const timeWindowWords = m["timeWindowWords"];
+export const timeWindows = m["timeWindows"];
 export const ui = m["ui"];
 export const useAgentRunPick = m["useAgentRunPick"];
 export const useAsyncAction = m["useAsyncAction"];
@@ -108,3 +111,4 @@ export const useScrollReset = m["useScrollReset"];
 export const useStickyTop = m["useStickyTop"];
 export const useTheme = m["useTheme"];
 export const vAction = m["vAction"];
+export const wordDiff = m["wordDiff"];

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

@@ -0,0 +1 @@
+export { diffSequence, pairEdits, similarity, wordDiff, type Edit, type Op, type Segment, type SegmentKind } from "../../ui/src/lib/textDiff.js";

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

@@ -1,6 +1,12 @@
-import { type Locale } from "../../ui/src/i18n/index.js";
+import { type Locale, type MessageTree } from "../../ui/src/i18n/index.js";
 import type { Ref } from "vue";
-export type ExtensionT = (key: string, values?: Record<string, unknown>) => string;
+export type ExtensionT = (key: string, values?: Record<string, unknown>, plural?: number) => string;
 export declare const extensionT: (extensionId: string) => ExtensionT;
+export declare const registerExtensionMessages: (extensionId: string, messages: {
+    readonly base: MessageTree;
+    readonly load: (locale: string) => Promise<{
+        readonly default: MessageTree;
+    }>;
+}) => Promise<void>;
 export declare const activeLocale: Readonly<Ref<Locale>>;
 export type { Locale };

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

@@ -1,5 +1,6 @@
-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, TIME_WINDOWS, 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, 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 { formatBytes, formatDate, formatDateTime, formatDayMonth, formatDuration, formatTime, formatTimestamp, formatTokens, formatWeekdayTime, freshness, timeAgo, } from "./format.js";
+export { diffSequence, pairEdits, similarity, wordDiff } from "./diff.js";
 export { activeLocale, extensionT } from "./i18n.js";
 export type { BarsFigure, BarsFigureItem, DagFigure, DagFigureEdge, DagFigureNode, Figure, FigureAccent, MermaidFigure, StatsFigure, StatsFigureItem, } from "../../ui/src/markdown/index.js";
 export { default as Checkbox } from "primevue/checkbox";

package/dist/types/ui/src/components/charts/DagEditor.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         modelValue?: string | undefined;
     }) & {
         onAdd?: ((from: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
         onConnect?: ((from: string, to: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
         onSelectEdge?: ((from: string, to: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/types/ui/src/components/charts/DagGraph.vue.d.ts

@@ -18,6 +18,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             readonly x: number;
             readonly y: number;
         };
+        touchPan?: boolean;
     } & {
         modelValue?: string | undefined;
     }) & {

package/dist/types/ui/src/components/forms/NoteEditor.vue.d.ts

@@ -29,16 +29,16 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;
-    save: () => any;
-    remove: () => any;
     edit: () => any;
+    remove: () => any;
+    save: () => any;
     "update:source": (value: string) => any;
     "update:confirming": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
-    onRemove?: (() => any) | undefined;
     onEdit?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
     "onUpdate:source"?: ((value: string) => any) | undefined;
     "onUpdate:confirming"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/ui/src/components/overlays/ConfirmDialog.vue.d.ts

@@ -3,6 +3,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         open: boolean;
         header: string;
+        headerIcon?: IconName;
         confirmLabel: string;
         confirmIcon?: IconName;
         items?: readonly T[];

package/dist/types/ui/src/components/overlays/Modal.vue.d.ts

@@ -5,9 +5,12 @@ type __VLS_Props = {
     scroll?: boolean;
     dismissable?: boolean;
     position?: `center` | `top`;
+    labelledBy?: string;
     appendTo?: HTMLElement | string;
 };
-declare var __VLS_12: {}, __VLS_14: {}, __VLS_17: {};
+declare var __VLS_12: {
+    titleClass: string;
+}, __VLS_14: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_12) => any;
 } & {

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

@@ -17,7 +17,7 @@ export declare const setLocale: (locale: Locale) => Promise<void>;
 export declare const startI18n: () => Promise<void>;
 export declare const installI18n: (app: App) => void;
 export type TypedT = typeof i18n.global.t;
-export type LooseT = (key: string, values?: Record<string, unknown>) => string;
+export type LooseT = (key: string, values?: Record<string, unknown>, plural?: number) => string;
 export declare function useT(): TypedT;
 export declare function useT(namespace: string): LooseT;
 export declare const t: TypedT;

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

@@ -71,7 +71,7 @@ export { useCompact } from "./components/layout/splitView.js";
 export { default as StatStrip } from "./components/charts/StatStrip.vue";
 export { default as StatusBadge, type StatusVariant } from "./components/feedback/StatusBadge.vue";
 export { default as StepSection } from "./components/layout/StepSection.vue";
-export { sinceOf, TIME_WINDOWS, type TimeWindow, timeWindowWords } from "./lib/timeWindow.js";
+export { sinceOf, timeWindows, type TimeWindow, timeWindowWords } from "./lib/timeWindow.js";
 export { type IconName } from "./icons/iconSets.js";
 export { useDevice } from "./composables/useDevice.js";
 export { useNarrow } from "./composables/useNarrow.js";

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

@@ -16,6 +16,7 @@ export interface ProbeOptions {
     readonly onWaiting?: (elapsedMs: number, slow: boolean) => void;
     readonly stillWanted?: () => boolean;
 }
+export declare const probePreviewOnce: (url: string) => Promise<PreviewProbe>;
 export declare const probePreview: (url: string, options?: ProbeOptions) => Promise<PreviewProbe>;
 export interface ForwardedPortTab {
     readonly port: number;

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

@@ -0,0 +1,32 @@
+export type SegmentKind = "same" | "added" | "removed";
+export interface Segment {
+    readonly kind: SegmentKind;
+    readonly text: string;
+}
+export type Op<T> = {
+    readonly kind: "same";
+    readonly before: T;
+    readonly after: T;
+} | {
+    readonly kind: "added" | "removed";
+    readonly item: T;
+};
+export declare const diffSequence: <T>(before: readonly T[], after: readonly T[], equal: (left: T, right: T) => boolean) => Op<T>[] | undefined;
+export declare const wordDiff: (before: string, after: string) => Segment[];
+export declare const similarity: (before: string, after: string) => number;
+export type Edit<T> = {
+    readonly kind: "same";
+    readonly before: T;
+    readonly after: T;
+} | {
+    readonly kind: "pair";
+    readonly before: T;
+    readonly after: T;
+} | {
+    readonly kind: "removed";
+    readonly item: T;
+} | {
+    readonly kind: "added";
+    readonly item: T;
+};
+export declare const pairEdits: <T>(ops: readonly Op<T>[], alike?: (before: T, after: T) => boolean) => Edit<T>[];

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

@@ -1,5 +1,5 @@
 export type TimeWindow = `1h` | `24h` | `7d` | `all`;
-export declare const TIME_WINDOWS: readonly {
+export declare const timeWindows: () => readonly {
     label: string;
     value: TimeWindow;
 }[];

package/names.mjs

@@ -24,6 +24,7 @@ export const extensionUiNames = [
     "DagEditor",
     "DagGraph",
     "DiffStat",
+    "diffSequence",
     "DisclosureRow",
     "errorMessage",
     "FilterBar",
@@ -75,6 +76,7 @@ export const extensionUiNames = [
     "SearchBar",
     "SegmentedControl",
     "seriesColor",
+    "similarity",
     "sinceOf",
     "SkeletonRows",
     "SplitView",
@@ -82,7 +84,7 @@ export const extensionUiNames = [
     "StatusBadge",
     "StatusTally",
     "StepSection",
-    "TIME_WINDOWS",
+    "timeWindows",
     "timeAgo",
     "timeWindowWords",
     "ToggleSwitch",
@@ -96,9 +98,11 @@ export const extensionUiNames = [
     "useNarrow",
     "useNoteDraft",
     "useNow",
+    "pairEdits",
     "useRailMemory",
     "useScrollReset",
     "useStickyTop",
     "useTheme",
     "vAction",
+    "wordDiff",
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentic/extension-ui",
-  "version": "1.288.0",
+  "version": "1.291.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",
@@ -26,6 +26,11 @@
       "types": "./dist/types/extension-ui/src/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./diff": {
+      "@intentic/src": "./src/diff.ts",
+      "types": "./dist/types/extension-ui/src/diff.d.ts",
+      "default": "./dist/diff.js"
+    },
     "./format": {
       "@intentic/src": "./src/format.ts",
       "types": "./dist/types/extension-ui/src/format.d.ts",

package/src/diff.ts

@@ -0,0 +1,4 @@
+// The kit's diff machinery, reachable without the component barrel (see format.ts for why): edit scripts over any
+// items, word-level segments between two texts, and the pairing of removals with additions. What a viewer that draws
+// two versions of a file as one computes its marks with, so its redline agrees with the app's own prose diff.
+export { diffSequence, pairEdits, similarity, wordDiff, type Edit, type Op, type Segment, type SegmentKind } from "@intentic/ui/diff";

package/src/i18n.ts

@@ -1,4 +1,4 @@
-import { activeLocale as active, type Locale, useT } from "@intentic/ui/i18n";
+import { activeLocale as active, type Locale, type MessageTree, registerCatalog, useT } from "@intentic/ui/i18n";
 import type { Ref } from "vue";
 
 // The kit's translator, reachable without the component barrel: `index.ts` pulls in every .vue component, which breaks
@@ -13,8 +13,11 @@ import type { Ref } from "vue";
 /**
  * Translating an extension's own keys. A plain string rather than a checked union: an extension's catalog belongs to
  * its own package, and no schema on this side has ever seen it.
+ *
+ * `plural` picks between the forms a message separates with `|` — `t("rounds", { count }, count)` — and is the count
+ * the message interpolates, so English's two forms and Polish's three come out of the same call.
  */
-export type ExtensionT = (key: string, values?: Record<string, unknown>) => string;
+export type ExtensionT = (key: string, values?: Record<string, unknown>, plural?: number) => string;
 
 /**
  * One extension's translator, bound to the slice of the message tree the host mounted its catalog under. Keys are its
@@ -33,6 +36,21 @@ export type ExtensionT = (key: string, values?: Record<string, unknown>) => stri
  */
 export const extensionT = (extensionId: string): ExtensionT => useT(`ext.${extensionId}`);
 
+/**
+ * Mounts an extension's own messages under its slice of the tree — what the HOST does before it calls `activate`, and
+ * what a test that calls `activate` itself has to do instead, or every label it asserts on reads as a dotted key.
+ *
+ * ```ts
+ * await registerExtensionMessages(extensionIdOf(manifest), messages);
+ * ```
+ *
+ * `base` (English) is live the moment this returns; the promise resolves once the reader's actual language is in hand.
+ */
+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) });
+
 /** 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

@@ -130,7 +130,7 @@ export {
     StatusBadge,
     type StatusVariant,
     StepSection,
-    TIME_WINDOWS,
+    timeWindows,
     type TimeWindow,
     timeWindowWords,
     // Whether the enclosing `<SplitView>` has folded to compact; outside a split it falls back to device width.
@@ -169,6 +169,8 @@ export {
     freshness,
     timeAgo,
 } from "./format.js";
+// Also reachable as `@intentic/extension-ui/diff`: the edit scripts a viewer marks two versions of a file with.
+export { diffSequence, pairEdits, similarity, wordDiff } from "./diff.js";
 // The extension's own words. `extensionT(id)` is the translator for the catalog the host mounted from the module's
 // `messages` export; `activeLocale` is the language on screen, for a contribution that formats something itself.
 // The `Locale` type comes off `@intentic/extension-ui/i18n`, not from here: this file's re-exports become runtime