@septkit/ui 0.0.48 → 0.0.49

package/dist/index.d.ts

@@ -98,11 +98,14 @@ declare type __VLS_Props_10 = {
 
 declare type __VLS_Props_11 = {
     detail: ElementDetailVM | undefined;
+    /** Consumer-supplied fixed prefix/suffix per attribute; the user edits only the core. */
+    affixMask?: AffixMaskResolver;
 };
 
 declare type __VLS_Props_12 = MergeSessionParams & {
     source?: FileMeta;
     target?: FileMeta;
+    affixMask?: AffixMaskResolver;
 };
 
 declare type __VLS_Props_13 = {
@@ -364,6 +367,12 @@ export declare type ActiveFeedback = {
     variant: FeedbackVariant;
 } & FeedbackPayload;
 
+/** Resolves the affix (if any) for a given element tag + attribute name. Consumer-supplied. */
+export declare type AffixMaskResolver = (params: {
+    tag: string;
+    attr: string;
+}) => AttributeAffix | undefined;
+
 /**
  * Consumer hook run INSIDE the merge transaction, right after `tx.lifecycle.apply`.
  * Receives the `ApplyResult` (the instance roots the write produced) so a caller can
@@ -380,6 +389,17 @@ declare type AfterApplyContext = {
     result: ApplyResult;
 };
 
+/**
+ * A fixed prefix/suffix wrapped around an editable attribute value. The user edits only
+ * the "core" between them; the affix is rendered as inert adornment and re-applied on
+ * commit. Lets a consumer keep a convention marker (e.g. SET's `_App`) out of the user's
+ * reach without the generic component knowing what the marker means.
+ */
+export declare type AttributeAffix = {
+    prefix?: string;
+    suffix?: string;
+};
+
 export declare const Button: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 export declare const CATEGORY_ELEMENTS: Record<string, string[]>;

package/dist/merge/affix.js

@@ -0,0 +1,14 @@
+//#region lib/merge/affix.ts
+function e(e, t) {
+	let n = t?.prefix ?? "", r = t?.suffix ?? "", i = e;
+	return n && i.startsWith(n) && (i = i.slice(n.length)), r && i.endsWith(r) && (i = i.slice(0, i.length - r.length)), {
+		prefix: n,
+		core: i,
+		suffix: r
+	};
+}
+function t(e, t) {
+	return `${t?.prefix ?? ""}${e}${t?.suffix ?? ""}`;
+}
+//#endregion
+export { t as composeAffix, e as splitAffix };

package/dist/merge/element-detail.vue_vue_type_script_setup_true_lang.js

@@ -1,52 +1,76 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l } from "vue";
+import { composeAffix as e, splitAffix as t } from "./affix.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderList as u, toDisplayString as d } from "vue";
 //#region lib/merge/element-detail.vue?vue&type=script&setup=true&lang.ts
-var u = {
+var f = {
 	key: 0,
 	class: "flex h-full flex-col gap-3 overflow-auto p-3 text-sm"
-}, d = { class: "flex items-center gap-2" }, f = { class: "font-medium" }, p = { class: "badge badge-sm opacity-70" }, m = {
+}, p = { class: "flex items-center gap-2" }, m = { class: "font-medium" }, h = { class: "badge badge-sm opacity-70" }, g = {
 	key: 0,
 	class: "flex flex-col gap-2 font-mono text-xs"
-}, h = { class: "whitespace-nowrap shrink-0 opacity-70" }, g = ["value", "onInput"], _ = {
+}, _ = { class: "whitespace-nowrap shrink-0 opacity-70" }, v = { class: "flex w-full items-center" }, y = {
+	key: 0,
+	class: "shrink-0 select-none opacity-60"
+}, b = ["value", "onInput"], x = {
+	key: 1,
+	class: "shrink-0 select-none opacity-60"
+}, S = {
 	key: 0,
 	class: "badge badge-warning badge-xs shrink-0",
 	title: "Auto-resolved to avoid a naming collision — edit to override"
-}, v = {
+}, C = {
 	key: 1,
 	class: "text-xs opacity-60"
-}, y = {
+}, w = {
 	key: 1,
 	class: "grid h-full place-items-center p-4 text-sm opacity-60"
-}, b = /*@__PURE__*/ a({
+}, T = /*@__PURE__*/ s({
 	__name: "element-detail",
-	props: { detail: {} },
+	props: {
+		detail: {},
+		affixMask: { type: Function }
+	},
 	emits: ["edit"],
-	setup(a, { emit: b }) {
-		let x = a, S = b, C = t(() => ({
+	setup(s, { emit: T }) {
+		let E = s, D = T, O = r(() => ({
 			added: "badge-success",
 			removed: "badge-error",
 			modified: "badge-warning",
 			unchanged: "badge-ghost"
-		})[x.detail?.change ?? "unchanged"]), w = t(() => x.detail?.attributes.filter((e) => e.editable));
-		function T(e, t) {
-			S("edit", e.name, t.target.value);
+		})[E.detail?.change ?? "unchanged"]), k = r(() => E.detail?.attributes.filter((e) => e.editable));
+		function A(e) {
+			if (!(!E.detail || !E.affixMask)) return E.affixMask({
+				tag: E.detail.tag,
+				attr: e.name
+			});
+		}
+		function j(e) {
+			return t(e.after ?? "", A(e));
+		}
+		function M(t, n) {
+			let r = n.target.value;
+			D("edit", t.name, e(r, A(t)));
 		}
-		return (t, b) => a.detail ? (s(), r("div", u, [i("header", d, [
-			i("span", f, l(a.detail.title), 1),
-			i("span", p, l(a.detail.tag), 1),
-			i("span", { class: o(["badge badge-sm", C.value]) }, l(a.detail.change), 3)
-		]), w.value?.length ? (s(), r("div", m, [(s(!0), r(e, null, c(w.value, (e) => (s(), r("label", {
+		return (e, t) => s.detail ? (l(), a("div", f, [o("header", p, [
+			o("span", m, d(s.detail.title), 1),
+			o("span", h, d(s.detail.tag), 1),
+			o("span", { class: c(["badge badge-sm", O.value]) }, d(s.detail.change), 3)
+		]), k.value?.length ? (l(), a("div", g, [(l(!0), a(n, null, u(k.value, (e) => (l(), a("label", {
 			key: e.name,
 			class: "flex items-center gap-2"
 		}, [
-			i("span", h, l(e.name) + ":", 1),
-			i("input", {
-				class: o(["input input-xs input-bordered w-full font-mono", { "input-warning": e.conflict }]),
-				value: e.after ?? "",
-				onInput: (t) => T(e, t)
-			}, null, 42, g),
-			e.conflict ? (s(), r("span", _, " conflict ")) : n("", !0)
-		]))), 128))])) : (s(), r("div", v, "No editable fields. See the diff below."))])) : (s(), r("div", y, " Select an element to see its changes. "));
+			o("span", _, d(e.name) + ":", 1),
+			o("span", v, [
+				j(e).prefix ? (l(), a("span", y, d(j(e).prefix), 1)) : i("", !0),
+				o("input", {
+					class: c(["input input-xs input-bordered w-full font-mono", { "input-warning": e.conflict }]),
+					value: j(e).core,
+					onInput: (t) => M(e, t)
+				}, null, 42, b),
+				j(e).suffix ? (l(), a("span", x, d(j(e).suffix), 1)) : i("", !0)
+			]),
+			e.conflict ? (l(), a("span", S, " conflict ")) : i("", !0)
+		]))), 128))])) : (l(), a("div", C, "No editable fields. See the diff below."))])) : (l(), a("div", w, " Select an element to see its changes. "));
 	}
 });
 //#endregion
-export { b as default };
+export { T as default };

package/dist/merge/merge-review.vue_vue_type_script_setup_true_lang.js

@@ -58,7 +58,8 @@ var w = { class: "flex h-full flex-col" }, T = { class: "flex flex-wrap items-ce
 		anchor: {},
 		afterApply: { type: Function },
 		source: {},
-		target: {}
+		target: {},
+		affixMask: { type: Function }
 	},
 	emits: ["applied", "close"],
 	setup(g, { emit: F }) {
@@ -270,8 +271,9 @@ var w = { class: "flex h-full flex-col" }, T = { class: "flex flex-wrap items-ce
 									}, {
 										default: S(() => [h(se, {
 											detail: q.value,
+											"affix-mask": g.affixMask,
 											onEdit: We
-										}, null, 8, ["detail"])]),
+										}, null, 8, ["detail", "affix-mask"])]),
 										_: 1
 									}),
 									h(x(r), { class: "h-px bg-base-300" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@septkit/ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "type": "module",
   "source": "lib/index.ts",
   "files": [