@intentic/extension-ui 1.327.0 → 1.328.0

package/dist/index.js

@@ -76,6 +76,7 @@ export const appLink = m["appLink"];
 export const browserOwnsClick = m["browserOwnsClick"];
 export const clipboardOf = m["clipboardOf"];
 export const createWorkerCall = m["createWorkerCall"];
+export const diffMark = m["diffMark"];
 export const diffSequence = m["diffSequence"];
 export const errorMessage = m["errorMessage"];
 export const extensionI18n = m["extensionI18n"];
@@ -113,6 +114,14 @@ export const sinceOf = m["sinceOf"];
 export const timeAgo = m["timeAgo"];
 export const timeWindowWords = m["timeWindowWords"];
 export const timeWindows = m["timeWindows"];
+export const toneDot = m["toneDot"];
+export const toneFill = m["toneFill"];
+export const toneHover = m["toneHover"];
+export const toneInk = m["toneInk"];
+export const tonePlate = m["tonePlate"];
+export const toneRim = m["toneRim"];
+export const toneTint = m["toneTint"];
+export const toneWash = m["toneWash"];
 export const ui = m["ui"];
 export const useAgentRunPick = m["useAgentRunPick"];
 export const useAsyncAction = m["useAsyncAction"];

package/dist/tone.js

@@ -0,0 +1,16 @@
+// Generated by scripts/build.mjs: do not edit.
+// The kit's tone 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 diffMark = m["diffMark"];
+export const toneDot = m["toneDot"];
+export const toneFill = m["toneFill"];
+export const toneHover = m["toneHover"];
+export const toneInk = m["toneInk"];
+export const tonePlate = m["tonePlate"];
+export const toneRim = m["toneRim"];
+export const toneTint = m["toneTint"];
+export const toneWash = m["toneWash"];

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, OverflowActions, ActionSheet, type ActionItem, CopyButton, AddressField, 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, SkeletonSnapshot, vSkeletonSource, SplitView, StatStrip, StatusBadge, type StatusVariant, StepSection, timeWindows, type TimeWindow, timeWindowWords, useCompact, useDevice, useListNavigation, useNow, useLatest, messageOr, messageOr as 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, type IconButtonVariants, type TextButtonVariants, type InputVariants, type ChipVariants, type SectionLabelVariants, type ButtonTier, type ButtonTone, Code, CodeField, ConfirmDialog, ContextMenu, OverflowActions, ActionSheet, type ActionItem, CopyButton, AddressField, 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, SkeletonSnapshot, vSkeletonSource, SplitView, StatStrip, StatusBadge, type StatusVariant, StepSection, timeWindows, type TimeWindow, timeWindowWords, useCompact, useDevice, useListNavigation, useNow, useLatest, messageOr, messageOr as errorMessage, noticeFrom, noticeOf, useAsyncAction, useNarrow, useRailMemory, useScrollReset, type StickyTop, useStickyTop, useTheme, } from "../../ui/src/index.js";
 export { formatBytes, formatClock, formatCompact, formatCount, formatDate, formatDateLong, formatDateTime, formatDayMonth, formatDayMonthTime, formatDuration, formatElapsed, formatMoney, formatPercent, formatTime, formatTimestamp, formatTokens, formatWeekdayTime, formatWhen, freshness, timeAgo, } from "./format.js";
+export { type DiffMark, diffMark, type Signal, type TintWeight, type Tone, toneDot, toneFill, toneHover, toneInk, tonePlate, toneRim, toneTint, toneWash, } from "./tone.js";
 export { diffSequence, pairEdits, similarity, wordDiff } from "./diff.js";
 export { createWorkerCall, serveWorkerCall, WorkerCallError } from "./worker.js";
 export { activeLocale, extensionI18n, extensionT } from "./i18n.js";

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

@@ -0,0 +1 @@
+export { type DiffMark, diffMark, type Signal, type TintWeight, type Tone, toneDot, toneFill, toneHover, toneInk, tonePlate, toneRim, toneTint, toneWash, } from "../../ui/src/lib/tone.js";

package/dist/types/ui/src/components/feedback/Notice.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     tone?: NoticeTone;
     icon?: IconName;
     size?: NoticeSize;
+    strip?: boolean;
     dismissLabel?: string;
 };
 type __VLS_Slots = {

package/dist/types/ui/src/components/feedback/notice.d.ts

@@ -11,11 +11,12 @@ export interface NoticeModel {
     readonly action?: NoticeAction;
     readonly key?: string;
 }
-export declare const NOTICE_TONE: Record<NoticeTone, string>;
 export type NoticeSize = "xs" | "sm" | "md" | "lg";
-export declare const NOTICE_SIZE: Record<NoticeSize, string>;
-export declare const NOTICE_ICON_SIZE: Record<NoticeSize, string>;
-export declare const noticeBox: (tone: NoticeTone, size: NoticeSize, actions: boolean) => string;
+export declare const noticeLook: (tone: NoticeTone, size: NoticeSize, actions: boolean, strip?: boolean) => {
+    readonly box: (own?: string) => string;
+    readonly icon: string;
+};
+export declare const noticeBox: (tone: NoticeTone, size: NoticeSize, actions: boolean, strip?: boolean) => string;
 export declare const NOTICE_ICON: Record<NoticeTone, IconName>;
 export declare const noticeKey: (notice: NoticeModel) => string;
 export declare const rankNotices: (notices: readonly NoticeModel[]) => readonly NoticeModel[];

package/dist/types/ui/src/components/feedback/statusBadge.d.ts

@@ -1 +1,2 @@
-export type StatusVariant = `success` | `danger` | `warning` | `info` | `neutral` | `primary`;
+import type { Tone } from "../../lib/tone.js";
+export type StatusVariant = Tone;

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

@@ -9,7 +9,7 @@ type __VLS_Props = {
     verb?: string;
     paged?: boolean;
 };
-declare var __VLS_8: {}, __VLS_11: {}, __VLS_19: {}, __VLS_22: {}, __VLS_46: {}, __VLS_64: {}, __VLS_66: {}, __VLS_87: {};
+declare var __VLS_8: {}, __VLS_11: {}, __VLS_19: {}, __VLS_22: {}, __VLS_46: {}, __VLS_64: {}, __VLS_66: {}, __VLS_93: {};
 type __VLS_Slots = {} & {
     lead?: (props: typeof __VLS_8) => any;
 } & {
@@ -25,7 +25,7 @@ type __VLS_Slots = {} & {
 } & {
     confirm?: (props: typeof __VLS_66) => any;
 } & {
-    default?: (props: typeof __VLS_87) => any;
+    default?: (props: typeof __VLS_93) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

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

@@ -1,3 +1,10 @@
+import { type ButtonTier, type ButtonTone } from "./button.js";
+type __VLS_Props = {
+    tier?: ButtonTier;
+    tone?: ButtonTone;
+    gilded?: boolean;
+    thumb?: boolean;
+};
 declare var __VLS_12: string, __VLS_13: any, __VLS_22: {
     class: string;
 }, __VLS_25: {}, __VLS_32: {};
@@ -10,7 +17,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_32) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,14 @@
+export type ButtonTier = `loud` | `accent` | `boring` | `quiet`;
+export type ButtonTone = `accent` | `danger` | `warning` | `success`;
+export interface ButtonLook {
+    readonly tier?: ButtonTier | undefined;
+    readonly tone?: ButtonTone | undefined;
+    readonly gilded?: boolean | undefined;
+    readonly thumb?: boolean | undefined;
+}
+export interface PrimeLook {
+    readonly severity: string | undefined;
+    readonly text: boolean;
+    readonly class: string;
+}
+export declare const primeLook: ({ tier, tone, gilded, thumb }: ButtonLook) => PrimeLook;

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

@@ -33,13 +33,7 @@ export declare const ROW_TIERS: {
         readonly mark: 18;
     };
 };
-export declare const ROW_TONES: {
-    readonly default: "text-muted";
-    readonly danger: "text-danger";
-    readonly warning: "text-warning";
-    readonly success: "text-success";
-    readonly info: "text-link";
-};
+export declare const ROW_TONES: Record<RowTone, string>;
 export declare const ROW_TOGGLE_GAPS: {
     readonly comfortable: "gap-2.5";
     readonly compact: "gap-2";

package/dist/types/ui/src/components/sandbox/AgentRunButton.vue.d.ts

@@ -1,9 +1,12 @@
+import type { ButtonTier, ButtonTone } from "../primitives/button.js";
 import type { AgentRunPicker } from "../../composables/useAgentRunPick.js";
 import type { IconName } from "../../icons/iconSets.js";
 import type { TooltipValue } from "../../lib/tooltip.js";
 type __VLS_Props = {
     label: string;
     picker: AgentRunPicker;
+    tier?: ButtonTier | undefined;
+    tone?: ButtonTone | undefined;
     severity?: string | undefined;
     size?: string;
     text?: boolean;

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

@@ -1,7 +1,7 @@
 export { clipboardOf } from "./lib/clipboard.js";
 export { appLink, browserOwnsClick } from "./lib/link.js";
 export { openForwardedPort } from "./lib/portPreview.js";
-export { ui } from "./lib/ui.js";
+export { type ChipVariants, type IconButtonVariants, type InputVariants, type SectionLabelVariants, type TextButtonVariants, ui } from "./lib/ui.js";
 export { default as AgentRunButton } from "./components/sandbox/AgentRunButton.vue";
 export { type AgentRunAttempt, type AgentRunChoice, type AgentRunPicker, type ModelPicking, useAgentRunPick } from "./composables/useAgentRunPick.js";
 export { type FixStanceLook, fixStanceLook } from "./composables/fixStanceLook.js";
@@ -11,6 +11,7 @@ export { default as BarChart } from "./components/charts/BarChart.vue";
 export { default as BottomSheet } from "./components/layout/BottomSheet.vue";
 export { default as BrandMark } from "./components/brand/BrandMark.vue";
 export { default as Button } from "./components/primitives/Button.vue";
+export { type ButtonTier, type ButtonTone } from "./components/primitives/button.js";
 export { vAction } from "./lib/pressAction.js";
 export { default as Card } from "./components/layout/Card.vue";
 export { default as ChangeStatusMark } from "./components/feedback/ChangeStatusMark.vue";

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

@@ -0,0 +1,15 @@
+export type Tone = `success` | `warning` | `danger` | `info` | `neutral` | `primary`;
+export type Signal = Exclude<Tone, `neutral` | `primary`>;
+export type TintWeight = `strong` | `soft`;
+type ClassArg = string | false | null | undefined;
+export declare const toneInk: (tone: Tone, ...classes: ClassArg[]) => string;
+export declare const toneDot: (tone: Tone, ...classes: ClassArg[]) => string;
+export declare const toneWash: (tone: Tone, ...classes: ClassArg[]) => string;
+export declare const toneTint: (tone: Tone, weight?: TintWeight, ...classes: ClassArg[]) => string;
+export declare const toneRim: (tone: Tone, weight?: TintWeight, ...classes: ClassArg[]) => string;
+export declare const toneFill: (tone: Tone, weight?: TintWeight, ...classes: ClassArg[]) => string;
+export declare const tonePlate: (tone: Tone, ...classes: ClassArg[]) => string;
+export declare const toneHover: (tone: Tone, ...classes: ClassArg[]) => string;
+export type DiffMark = `added` | `removed` | `changed`;
+export declare const diffMark: (mark: DiffMark, as?: `inline` | `rule`, ...classes: ClassArg[]) => string;
+export {};

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

@@ -1,7 +1,8 @@
 import type { Directive } from "vue";
 import { type Side } from "./anchorPlacement.js";
+import type { Signal } from "./tone.js";
 type Modifier = Side | "overflow" | "lines";
-export type TipTone = "info" | "ok" | "warn" | "danger";
+export type TipTone = Signal;
 export interface TipRow {
     readonly label: string;
     readonly value: string | number;

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

@@ -1,14 +1,42 @@
+export type ClassArg = string | false | null | undefined;
+export type Recipe<V> = (variants?: V | ClassArg, ...classes: ClassArg[]) => string;
+export interface IconButtonVariants {
+    size?: `xs` | `sm` | `md` | `lg` | `xl`;
+    tone?: `muted` | `subtle` | `danger`;
+    round?: boolean;
+    on?: boolean;
+}
+export interface TextButtonVariants {
+    tone?: `link` | `quiet` | `subtle` | `danger`;
+    size?: `xs` | `sm`;
+    flush?: boolean;
+}
+export interface InputVariants {
+    size?: `md` | `sm` | `inline`;
+}
+export interface ChipVariants {
+    on?: boolean;
+}
+export interface SectionLabelVariants {
+    size?: `sm` | `xs`;
+    tone?: `neutral` | `danger` | `warning` | `success`;
+}
+export interface TabVariants {
+    active?: boolean;
+}
 export declare const ui: {
-    iconButton: (...twClasses: string[]) => string;
-    linkButton: (...twClasses: string[]) => string;
-    textAction: (...twClasses: string[]) => string;
-    input: (...twClasses: string[]) => string;
-    inputSm: (...twClasses: string[]) => string;
-    inputInline: (...twClasses: string[]) => string;
-    emptyState: (...twClasses: string[]) => string;
-    addTile: (...twClasses: string[]) => string;
-    overlayChip: (...twClasses: string[]) => string;
-    sectionLabel: (...twClasses: string[]) => string;
-    sectionLabelSm: (...twClasses: string[]) => string;
-    tab: (active: boolean, ...twClasses: string[]) => string;
+    iconButton: Recipe<IconButtonVariants>;
+    textButton: Recipe<TextButtonVariants>;
+    linkButton: (...classes: ClassArg[]) => string;
+    textAction: (...classes: ClassArg[]) => string;
+    input: Recipe<InputVariants>;
+    inputSm: (...classes: ClassArg[]) => string;
+    inputInline: (...classes: ClassArg[]) => string;
+    emptyState: Recipe<object>;
+    addTile: Recipe<object>;
+    chip: Recipe<ChipVariants>;
+    overlayChip: Recipe<object>;
+    sectionLabel: Recipe<SectionLabelVariants>;
+    sectionLabelSm: (...classes: ClassArg[]) => string;
+    tab: (active: boolean | TabVariants, ...classes: ClassArg[]) => string;
 };

package/names.mjs

@@ -16,6 +16,15 @@ export const extensionUiNames = [
     "browserOwnsClick",
     "appLink",
     "ui",
+    "toneInk",
+    "toneDot",
+    "toneWash",
+    "toneTint",
+    "toneRim",
+    "toneFill",
+    "tonePlate",
+    "toneHover",
+    "diffMark",
     "Code",
     "CodeField",
     "ConfirmDialog",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentic/extension-ui",
-  "version": "1.327.0",
+  "version": "1.328.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",
@@ -36,6 +36,11 @@
       "types": "./dist/types/extension-ui/src/format.d.ts",
       "default": "./dist/format.js"
     },
+    "./tone": {
+      "@intentic/src": "./src/tone.ts",
+      "types": "./dist/types/extension-ui/src/tone.d.ts",
+      "default": "./dist/tone.js"
+    },
     "./worker": {
       "@intentic/src": "./src/worker.ts",
       "types": "./dist/types/extension-ui/src/worker.d.ts",

package/src/index.ts

@@ -41,7 +41,16 @@ export {
     // `ChangeStatusMark` is fixed-width, so a column of paths stays aligned whatever status letter lands in it.
     ChangeStatusMark,
     type ChangeStatus,
+    // The kit's recipes: a variant is chosen by name (`ui.iconButton({ size: "lg", tone: "danger" })`), never by
+    // overriding the recipe's own classes.
     ui,
+    type IconButtonVariants,
+    type TextButtonVariants,
+    type InputVariants,
+    type ChipVariants,
+    type SectionLabelVariants,
+    type ButtonTier,
+    type ButtonTone,
     Code,
     // The editable counterpart to `Code`: syntax-coloured text with a caret in it.
     CodeField,
@@ -197,6 +206,23 @@ export {
     freshness,
     timeAgo,
 } from "./format.js";
+// Also reachable as `@intentic/extension-ui/tone`: the one tone vocabulary (ink, dot, wash, tint, plate, hover, and a
+// diff's three marks), so an extension's "danger" is the shell's.
+export {
+    type DiffMark,
+    diffMark,
+    type Signal,
+    type TintWeight,
+    type Tone,
+    toneDot,
+    toneFill,
+    toneHover,
+    toneInk,
+    tonePlate,
+    toneRim,
+    toneTint,
+    toneWash,
+} from "./tone.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";
 // Also reachable as `@intentic/extension-ui/worker`: work moved off the page, with the page as its fallback.

package/src/tone.ts

@@ -0,0 +1,19 @@
+// The kit's tone vocabulary, reachable without the component barrel: `index.ts` pulls in every .vue component, which
+// breaks an extension's node-environment tests, and a status table in a plain module (a pipeline's stage colours) is
+// exactly what such a test reads. A source-level door for in-repo extensions and their tests; a git-installed bundle
+// resolves through the import map instead, which carries the same names.
+export {
+    type DiffMark,
+    diffMark,
+    type Signal,
+    type TintWeight,
+    type Tone,
+    toneDot,
+    toneFill,
+    toneHover,
+    toneInk,
+    tonePlate,
+    toneRim,
+    toneTint,
+    toneWash,
+} from "@intentic/ui/tone";