@intentic/extension-ui 1.230.3 → 1.232.0

package/dist/index.js

@@ -27,6 +27,7 @@ export const CopyButton = m["CopyButton"];
 export const DagEditor = m["DagEditor"];
 export const DagGraph = m["DagGraph"];
 export const DiffStat = m["DiffStat"];
+export const DisclosureRow = m["DisclosureRow"];
 export const FilterBar = m["FilterBar"];
 export const Icon = m["Icon"];
 export const ImageView = m["ImageView"];
@@ -90,6 +91,7 @@ export const useAgentRunPick = m["useAgentRunPick"];
 export const useAsyncAction = m["useAsyncAction"];
 export const useCompact = m["useCompact"];
 export const useDevice = m["useDevice"];
+export const useKeyedDraft = m["useKeyedDraft"];
 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 AgentRunChoice, type AgentRunPicker, type ModelPicking, useAgentRunPick, 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, FilterBar, Icon, type IconName, ImageView, InfoDialog, InfoHint, InfoTable, isRenderableImage, Markdown, MarkdownFigure, Modal, type NavGroup, NavRail, NoteEditor, type NoteDraft, type NoteDraftOptions, useNoteDraft, type NoticeModel, type NoticeTone, type NoticeAction, Notice, NoticeStack, Page, PageAction, PageHeader, ScrollFrame, PersonaFace, type PersonaLike, Picker, 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, useTheme, } from "../../ui/src/index.js";
+export { AgentRunButton, type AgentRunChoice, type AgentRunPicker, type ModelPicking, useAgentRunPick, 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, 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, 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, useTheme, } from "../../ui/src/index.js";
 export { formatBytes, formatDate, formatDateTime, formatDayMonth, formatTime, formatTimestamp, formatTokens, formatWeekdayTime, freshness, timeAgo, } from "./format.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/DisclosureRow.vue.d.ts

@@ -0,0 +1,47 @@
+import type { IconName } from "../icons/iconSets.js";
+import { type RowDensity, type RowTone } from "./row.js";
+type __VLS_Props = {
+    open?: boolean;
+    density?: RowDensity;
+    hit?: `header` | `pair` | `row`;
+    body?: `rail` | `drawer`;
+    icon?: IconName;
+    title?: string;
+    description?: string;
+    wideControl?: boolean;
+    tone?: RowTone;
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_26: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {}, __VLS_46: {}, __VLS_48: {}, __VLS_50: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+} & {
+    lead?: (props: typeof __VLS_26) => any;
+} & {
+    title?: (props: typeof __VLS_29) => any;
+} & {
+    description?: (props: typeof __VLS_32) => any;
+} & {
+    meta?: (props: typeof __VLS_35) => any;
+} & {
+    control?: (props: typeof __VLS_38) => any;
+} & {
+    lead?: (props: typeof __VLS_46) => any;
+} & {
+    below?: (props: typeof __VLS_48) => any;
+} & {
+    below?: (props: typeof __VLS_50) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/src/components/PageHeader.vue.d.ts

@@ -2,13 +2,13 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    info?: (props: typeof __VLS_1) => any;
+    info?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_8) => any;
 } & {
-    description?: (props: typeof __VLS_5) => any;
+    description?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/ui/src/components/Row.vue.d.ts

@@ -1,4 +1,5 @@
 import { type IconName } from "../icons/iconSets.js";
+import { type RowDensity, type RowTone } from "./row.js";
 type __VLS_Props = {
     icon?: IconName;
     title?: string;
@@ -7,29 +8,37 @@ type __VLS_Props = {
     as?: `div` | `label` | `button`;
     interactive?: boolean;
     chevron?: boolean;
-    tone?: `default` | `danger` | `warning` | `success` | `info`;
-    density?: `comfortable` | `compact` | `dense`;
+    tone?: RowTone;
+    density?: RowDensity;
     selected?: boolean;
     heading?: 2 | 3;
     spin?: boolean;
     flush?: boolean;
     wideControl?: boolean;
+    headerButton?: boolean;
+    headerExpanded?: boolean;
+    headerControls?: string;
+    headlineGuard?: boolean;
 };
-declare var __VLS_8: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {}, __VLS_34: {};
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_31: {}, __VLS_33: {}, __VLS_35: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
-    lead?: (props: typeof __VLS_8) => any;
+    lead?: (props: typeof __VLS_16) => any;
 } & {
-    title?: (props: typeof __VLS_21) => any;
+    title?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_23) => any;
+    description?: (props: typeof __VLS_31) => any;
 } & {
-    meta?: (props: typeof __VLS_25) => any;
+    meta?: (props: typeof __VLS_33) => any;
 } & {
-    control?: (props: typeof __VLS_27) => any;
+    control?: (props: typeof __VLS_35) => any;
 } & {
-    below?: (props: typeof __VLS_34) => any;
+    below?: (props: typeof __VLS_42) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    headerClick: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onHeaderClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/ui/src/components/StatusTally.vue.d.ts

@@ -7,7 +7,8 @@ export interface TallyItem {
     readonly pulse?: boolean;
 }
 type __VLS_Props = {
-    items: readonly TallyItem[];
+    items?: readonly TallyItem[];
+    skeleton?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/types/ui/src/components/row.d.ts

@@ -0,0 +1,42 @@
+export type RowDensity = `comfortable` | `compact` | `dense`;
+export type RowTone = `default` | `danger` | `warning` | `success` | `info`;
+export declare const ROW_TIERS: {
+    readonly comfortable: {
+        readonly pad: "px-4.5 py-3.5";
+        readonly gap: "gap-3";
+        readonly icon: "text-lg";
+        readonly title: "font-semibold leading-tight";
+        readonly description: "text-xs";
+    };
+    readonly compact: {
+        readonly pad: "px-4 py-2.5";
+        readonly gap: "gap-3";
+        readonly icon: "text-sm";
+        readonly title: "text-sm font-medium leading-tight";
+        readonly description: "text-2xs";
+    };
+    readonly dense: {
+        readonly pad: "px-2.5 py-2";
+        readonly gap: "gap-2.5";
+        readonly icon: "text-xs";
+        readonly title: "text-xs font-medium leading-tight";
+        readonly description: "text-2xs";
+    };
+};
+export declare const ROW_TONES: {
+    readonly default: "text-subtle";
+    readonly danger: "text-danger";
+    readonly warning: "text-warning";
+    readonly success: "text-success";
+    readonly info: "text-link";
+};
+export declare const ROW_TOGGLE_GAPS: {
+    readonly comfortable: "gap-2.5";
+    readonly compact: "gap-2";
+    readonly dense: "gap-1.5";
+};
+export declare const ROW_TOGGLE_SIZES: {
+    readonly comfortable: "text-xs";
+    readonly compact: "text-2xs";
+    readonly dense: "text-2xs";
+};

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

@@ -0,0 +1,5 @@
+import { type Ref, type WritableComputedRef } from "vue";
+export declare const useKeyedDraft: (selected: Ref<string | undefined>) => {
+    draft: WritableComputedRef<string | undefined>;
+    hasDraft: (key: string) => boolean;
+};

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

@@ -23,6 +23,7 @@ export { default as CopyButton } from "./components/CopyButton.vue";
 export { type TallyItem, default as StatusTally } from "./components/StatusTally.vue";
 export { default as DagEditor } from "./components/DagEditor.vue";
 export { default as DagGraph } from "./components/DagGraph.vue";
+export { default as DisclosureRow } from "./components/DisclosureRow.vue";
 export { type DagEdge, type DagNode } from "./components/dagLayout.js";
 export { default as FilterBar } from "./components/FilterBar.vue";
 export { default as Icon } from "./components/Icon.vue";
@@ -38,6 +39,7 @@ export { default as NavRail } from "./components/NavRail.vue";
 export { type NavGroup } from "./components/navRail.js";
 export { default as NoteEditor } from "./components/NoteEditor.vue";
 export { type NoteDraft, type NoteDraftOptions, useNoteDraft } from "./composables/useNoteDraft.js";
+export { useKeyedDraft } from "./composables/useKeyedDraft.js";
 export { default as Notice } from "./components/Notice.vue";
 export { default as NoticeStack } from "./components/NoticeStack.vue";
 export { type NoticeAction, type NoticeModel, type NoticeTone } from "./components/notice.js";

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

@@ -1,9 +1,22 @@
-export type ProbeOutcome = "reachable" | "gaveUp" | "abandoned";
+export type PreviewState = "serving" | "starting" | "several" | "stopped" | "unforwarded";
+export interface PreviewServer {
+    readonly port: number;
+    readonly dir?: string;
+}
+export type PreviewProbe = {
+    readonly outcome: "reached";
+    readonly state: PreviewState;
+    readonly servers: readonly PreviewServer[];
+} | {
+    readonly outcome: "unreachable";
+} | {
+    readonly outcome: "abandoned";
+};
 export interface ProbeOptions {
     readonly onWaiting?: (elapsedMs: number, slow: boolean) => void;
     readonly stillWanted?: () => boolean;
 }
-export declare const probeUntilReachable: (url: string, options?: ProbeOptions) => Promise<ProbeOutcome>;
+export declare const probePreview: (url: string, options?: ProbeOptions) => Promise<PreviewProbe>;
 export interface ForwardedPortTab {
     readonly port: number;
     readonly path?: string;

package/names.mjs

@@ -24,6 +24,7 @@ export const extensionUiNames = [
     "DagEditor",
     "DagGraph",
     "DiffStat",
+    "DisclosureRow",
     "errorMessage",
     "FilterBar",
     "formatBytes",
@@ -83,6 +84,7 @@ export const extensionUiNames = [
     "useAsyncAction",
     "useCompact",
     "useDevice",
+    "useKeyedDraft",
     "useListNavigation",
     "useLoadingReveal",
     "useNarrow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentic/extension-ui",
-  "version": "1.230.3",
+  "version": "1.232.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/index.ts

@@ -88,6 +88,13 @@ export {
     type DagEdge,
     type DagNode,
     DiffStat,
+    /* <DisclosureRow> ships for the reason <Row> itself does, one turn of the screw further on: shipping the
+     * row WITHOUT the expandable row is what made SIX extensions build their own — activity, maintenance,
+     * acceptance (twice), automations, deployments, pipelines, preview — and no two of them drew the same
+     * chevron, indented the opened block to the same column, or painted an open row the same colour. The
+     * preview extension's ports list went furthest and used an `(i)` as the toggle, thirty pixels under a real
+     * <InfoHint> whose `(i)` is a hover card: one glyph, two behaviours, one screen. */
+    DisclosureRow,
     FilterBar,
     Icon,
     type IconName,
@@ -121,6 +128,10 @@ export {
     type NoteDraft,
     type NoteDraftOptions,
     useNoteDraft,
+    /* And the map those drafts live in, for the same pair of callers: the lifecycle deliberately does not own
+     * the ref (an unsaved edit has to outlive the pane that shows it), so both views had written the same
+     * keyed store above it, down to the `undefined` deletes rule the picker's "Unsaved" reads. */
+    useKeyedDraft,
     /* <NoticeStack> and its model ship beside <ConfirmDialog> for the same reason <InfoDialog> does: a view
      * with several async actions needs somewhere for their failures to land that isn't one action's own row,
      * and a hand-rolled error strip is the first thing to disagree with the app's about tone and dismissal.