@camstack/addon-admin-ui 1.2.521 → 1.2.523

package/dist/server/addon.js

@@ -5456,7 +5456,7 @@ var ZodIssueCode = {
 var ZodFirstPartyTypeKind;
 ZodFirstPartyTypeKind || (ZodFirstPartyTypeKind = {});
 //#endregion
-//#region ../types/dist/sleep-6eG9C8Xl.mjs
+//#region ../types/dist/sleep-63gM_1JR.mjs
 /**
 * The audio chunk plane's byte format, and the ONE expansion from a coded
 * window to float samples (D455).
@@ -8737,6 +8737,7 @@ var CAP_NAMES = Object.freeze([
 	"recording-signal",
 	"records",
 	"remote",
+	"remote-layout-components",
 	"running-state",
 	"scene-monitor",
 	"script-runner",
@@ -58169,6 +58170,30 @@ object({
 		at: number()
 	}).nullable()
 });
+var RemoteButtonShapeSchema = _enum([
+	"rect",
+	"rounded",
+	"round",
+	"pill"
+]);
+var RemoteButtonToneSchema = _enum([
+	"neutral",
+	"accent",
+	"danger",
+	"red",
+	"green",
+	"yellow",
+	"blue"
+]);
+var RemoteGroupFrameSchema = _enum([
+	"none",
+	"panel",
+	"divider",
+	"dpad",
+	"rocker-v",
+	"rocker-h",
+	"keypad"
+]);
 var RemoteLayoutButtonSchema = object({
 	id: string().min(1).max(40),
 	/** 0-based grid position. */
@@ -58178,12 +58203,94 @@ var RemoteLayoutButtonSchema = object({
 	colSpan: number().int().min(1).max(24),
 	icon: string().min(1).max(60).optional(),
 	label: string().min(1).max(40).optional(),
-	role: RemoteRoleSchema
+	role: RemoteRoleSchema,
+	/** Absent = the plain rendering every layout had before shapes existed. */
+	shape: RemoteButtonShapeSchema.optional(),
+	tone: RemoteButtonToneSchema.optional(),
+	/** The group this button belongs to; it must lie inside that group's rectangle. */
+	groupId: string().min(1).max(40).optional()
+});
+/**
+* A rectangle of the grid that moves as ONE thing and is drawn with a frame: a
+* titled panel, a section divider, a D-pad ring. `componentId` names the palette
+* entry it came from (informational: the layout is self-contained).
+*/
+var RemoteLayoutGroupSchema = object({
+	id: string().min(1).max(40),
+	componentId: string().min(1).max(80),
+	frame: RemoteGroupFrameSchema,
+	row: number().int().min(0).max(24),
+	col: number().int().min(0).max(24),
+	rowSpan: number().int().min(1).max(24),
+	colSpan: number().int().min(1).max(24),
+	title: string().min(1).max(40).optional()
 });
+function rectsOverlap(a, b) {
+	return a.row < b.row + b.rowSpan && b.row < a.row + a.rowSpan && a.col < b.col + b.colSpan && b.col < a.col + a.colSpan;
+}
+function rectContains(outer, inner) {
+	return inner.row >= outer.row && inner.col >= outer.col && inner.row + inner.rowSpan <= outer.row + outer.rowSpan && inner.col + inner.colSpan <= outer.col + outer.colSpan;
+}
+/**
+* The group rules of a layout: inside the grid, no two groups overlap, a
+* member lies inside its group, a divider holds nothing, and a button that is
+* not a member never sits inside someone else's rectangle (a group moves as
+* one thing, so a stray key under it would be left behind).
+*/
+function refineGroups(grid, ctx) {
+	const groups = grid.groups ?? [];
+	const byId = /* @__PURE__ */ new Map();
+	const fail = (message, path) => {
+		ctx.addIssue({
+			code: "custom",
+			message,
+			path
+		});
+	};
+	groups.forEach((group, index) => {
+		if (byId.has(group.id)) fail(`group id "${group.id}" is used twice`, [
+			"groups",
+			index,
+			"id"
+		]);
+		byId.set(group.id, group);
+		if (group.row + group.rowSpan > grid.rows || group.col + group.colSpan > grid.columns) fail(`group "${group.id}" leaves the grid`, ["groups", index]);
+		for (let other = 0; other < index; other += 1) {
+			const earlier = groups[other];
+			if (earlier !== void 0 && rectsOverlap(earlier, group)) {
+				fail(`groups "${earlier.id}" and "${group.id}" overlap`, ["groups", index]);
+				return;
+			}
+		}
+	});
+	grid.buttons.forEach((button, index) => {
+		if (button.groupId !== void 0) {
+			const group = byId.get(button.groupId);
+			if (group === void 0) {
+				fail(`button "${button.id}" names the unknown group "${button.groupId}"`, [
+					"buttons",
+					index,
+					"groupId"
+				]);
+				return;
+			}
+			if (group.frame === "divider") fail(`a divider group ("${group.id}") holds no buttons`, [
+				"buttons",
+				index,
+				"groupId"
+			]);
+			if (!rectContains(group, button)) fail(`button "${button.id}" lies outside its group "${group.id}"`, ["buttons", index]);
+			return;
+		}
+		const foreign = groups.find((group) => rectsOverlap(group, button));
+		if (foreign !== void 0) fail(`button "${button.id}" lies inside group "${foreign.id}" but is not a member`, ["buttons", index]);
+	});
+}
 object({
 	columns: number().int().min(1).max(24),
 	rows: number().int().min(1).max(24),
-	buttons: array(RemoteLayoutButtonSchema).max(200)
+	buttons: array(RemoteLayoutButtonSchema).max(200),
+	groups: array(RemoteLayoutGroupSchema).max(50).optional()
 }).superRefine((grid, ctx) => {
 	const ids = /* @__PURE__ */ new Set();
 	const taken = /* @__PURE__ */ new Map();
@@ -58220,6 +58327,7 @@ object({
 			taken.set(cell, button.id);
 		}
 	});
+	refineGroups(grid, ctx);
 });
 var RemoteBoundCommandSchema = object({
 	role: RemoteRoleSchema,
@@ -58351,6 +58459,91 @@ method(object({ kind: TemplateKindSchema.optional() }), array(TemplateRecordSche
 	kind: "mutation",
 	auth: "admin"
 });
+var RemoteComponentCategorySchema = _enum([
+	"power",
+	"navigation",
+	"volume",
+	"numbers",
+	"media",
+	"colour",
+	"apps",
+	"layout"
+]);
+/** `<namespace>:<name>`, both lowercase slugs — `core:dpad`, `<addonId>:<name>`. */
+var COMPONENT_ID_RE = /^[a-z0-9][a-z0-9_.-]*:[a-z0-9][a-z0-9_-]*$/;
+var RemoteComponentButtonSchema = object({
+	/** Joined to the instance id when the component is inserted. */
+	idSuffix: string().regex(/^[a-z0-9][a-z0-9_-]{0,19}$/, { message: "a short lowercase slug" }),
+	row: number().int().min(0).max(24),
+	col: number().int().min(0).max(24),
+	rowSpan: number().int().min(1).max(24),
+	colSpan: number().int().min(1).max(24),
+	role: RemoteRoleSchema,
+	icon: string().min(1).max(60).optional(),
+	label: string().min(1).max(40).optional(),
+	shape: RemoteButtonShapeSchema.optional(),
+	tone: RemoteButtonToneSchema.optional()
+});
+var RemoteLayoutComponentSchema = object({
+	id: string().max(80).regex(COMPONENT_ID_RE, { message: "<namespace>:<name>, lowercase" }),
+	name: string().min(1).max(60),
+	nameI18n: object({
+		en: string().min(1).max(60),
+		it: string().min(1).max(60)
+	}).optional(),
+	/** A display icon key, resolved by the UI like a button icon. */
+	icon: string().min(1).max(60),
+	category: RemoteComponentCategorySchema,
+	size: object({
+		rows: number().int().min(1).max(24),
+		cols: number().int().min(1).max(24)
+	}),
+	/** The frame drawn around the whole component, or null for loose buttons. */
+	group: object({
+		frame: RemoteGroupFrameSchema,
+		title: string().min(1).max(40).optional()
+	}).nullable(),
+	buttons: array(RemoteComponentButtonSchema).max(40)
+}).superRefine((component, ctx) => {
+	const suffixes = /* @__PURE__ */ new Set();
+	component.buttons.forEach((button, index) => {
+		if (suffixes.has(button.idSuffix)) ctx.addIssue({
+			code: "custom",
+			message: `button "${button.idSuffix}" is listed twice`,
+			path: [
+				"buttons",
+				index,
+				"idSuffix"
+			]
+		});
+		suffixes.add(button.idSuffix);
+		if (button.row + button.rowSpan > component.size.rows || button.col + button.colSpan > component.size.cols) {
+			ctx.addIssue({
+				code: "custom",
+				message: `button "${button.idSuffix}" leaves the component`,
+				path: ["buttons", index]
+			});
+			return;
+		}
+		for (let other = 0; other < index; other += 1) {
+			const earlier = component.buttons[other];
+			if (earlier !== void 0 && rectsOverlap(earlier, button)) {
+				ctx.addIssue({
+					code: "custom",
+					message: `buttons "${earlier.idSuffix}" and "${button.idSuffix}" overlap`,
+					path: ["buttons", index]
+				});
+				return;
+			}
+		}
+	});
+	if (component.group?.frame === "divider" && component.buttons.length > 0) ctx.addIssue({
+		code: "custom",
+		message: "a divider component holds no buttons",
+		path: ["buttons"]
+	});
+});
+method(object({}), array(RemoteLayoutComponentSchema), { auth: "protected" });
 DeviceType.Button, method(object({ deviceId: number().int().nonnegative() }), _void(), {
 	kind: "mutation",
 	auth: "protected"
@@ -67286,6 +67479,87 @@ method(object({}), array(TrainingBaseModelSchema).readonly(), { auth: "admin" })
 	kind: "mutation",
 	auth: "admin"
 });
+var btn = (idSuffix, row, col, init) => ({
+	idSuffix,
+	row,
+	col,
+	rowSpan: 1,
+	colSpan: 1,
+	...init
+});
+function rocker(id, name, it, frame, title, buttons, size) {
+	return {
+		id,
+		name,
+		nameI18n: {
+			en: name,
+			it
+		},
+		icon: frame === "rocker-v" ? "chevrons-up-down" : "chevrons-left-right",
+		category: id.includes("channel") || id.includes("volume") ? "volume" : "navigation",
+		size,
+		group: title === null ? { frame } : {
+			frame,
+			title
+		},
+		buttons
+	};
+}
+btn("power", 0, 0, {
+	role: "power",
+	shape: "round",
+	tone: "danger"
+}), btn("up", 0, 1, { role: "up" }), btn("left", 1, 0, { role: "left" }), btn("ok", 1, 1, {
+	role: "ok",
+	shape: "round",
+	tone: "accent"
+}), btn("right", 1, 2, { role: "right" }), btn("down", 2, 1, { role: "down" }), rocker("core:rocker-volume-v", "Volume rocker", "Bilanciere volume", "rocker-v", "VOL", [btn("up", 0, 0, {
+	role: "volume_up",
+	shape: "pill"
+}), btn("down", 1, 0, {
+	role: "volume_down",
+	shape: "pill"
+})], {
+	rows: 2,
+	cols: 1
+}), rocker("core:rocker-channel-v", "Channel rocker", "Bilanciere canali", "rocker-v", "CH", [btn("up", 0, 0, {
+	role: "channel_up",
+	shape: "pill"
+}), btn("down", 1, 0, {
+	role: "channel_down",
+	shape: "pill"
+})], {
+	rows: 2,
+	cols: 1
+}), rocker("core:rocker-h", "Minus / plus rocker", "Bilanciere meno / più", "rocker-h", null, [btn("minus", 0, 0, {
+	role: "custom:minus",
+	label: "−",
+	shape: "pill"
+}), btn("plus", 0, 1, {
+	role: "custom:plus",
+	label: "+",
+	shape: "pill"
+})], {
+	rows: 1,
+	cols: 2
+}), [...Array.from({ length: 9 }, (_, i) => btn(`d${i + 1}`, Math.floor(i / 3), i % 3, { role: `digit_${i + 1}` })), btn("d0", 3, 1, { role: "digit_0" })], btn("red", 0, 0, {
+	role: "custom:color_red",
+	tone: "red"
+}), btn("green", 0, 1, {
+	role: "custom:color_green",
+	tone: "green"
+}), btn("yellow", 0, 2, {
+	role: "custom:color_yellow",
+	tone: "yellow"
+}), btn("blue", 0, 3, {
+	role: "custom:color_blue",
+	tone: "blue"
+}), btn("rewind", 0, 0, { role: "rewind" }), btn("play", 0, 1, { role: "play" }), btn("pause", 0, 2, { role: "pause" }), btn("forward", 0, 3, { role: "fast_forward" }), btn("stop", 0, 4, { role: "stop" }), [
+	1,
+	2,
+	3,
+	4
+].map((n) => btn(`app${n}`, 0, n - 1, { role: `custom:app_slot_${n}` })), btn("back", 0, 0, { role: "back" }), btn("home", 0, 1, { role: "home" }), btn("menu", 0, 2, { role: "menu" });
 discriminatedUnion("kind", [object({
 	kind: literal("raw"),
 	timings: array(number().int()),
@@ -75150,6 +75424,13 @@ Object.freeze({
 		access: "create",
 		role: "admin"
 	},
+	"remoteLayoutComponents.listComponents": {
+		capName: "remote-layout-components",
+		capScope: "system",
+		addonId: null,
+		access: "view",
+		role: "admin"
+	},
 	"runningState.getStatus": {
 		capName: "running-state",
 		capScope: "device",
@@ -81326,6 +81607,7 @@ var SYSTEM_CAP_VOCABULARY = {
 	"recording-export": system("recording exports — requested from the timeline, not an automation step"),
 	records: system(INTERNAL),
 	remote: system("the per-device remote setup — authored in the Customize remote editor, sent through the remote UI"),
+	"remote-layout-components": system("the palette of the remote template editor — read-only data, never actuated"),
 	"server-management": system(CLUSTER),
 	"settings-store": system(INTERNAL),
 	"smtp-provider": system(INTERNAL),
@@ -85655,7 +85937,7 @@ var AdminUIAddon = class extends BaseAddon {
 			capability: adminUiCapability,
 			provider: {
 				getStaticDir: async () => ({ staticDir: resolveAdminUiDistDir() }),
-				getVersion: async () => ({ version: "1.2.521" })
+				getVersion: async () => ({ version: "1.2.523" })
 			}
 		}];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/addon-admin-ui",
-  "version": "1.2.521",
+  "version": "1.2.523",
   "private": false,
   "type": "module",
   "description": "Admin UI — Vite frontend build and server-side addon",
@@ -97,6 +97,7 @@
     "react-i18next": "^17.0.8",
     "react-konva": "^19.2.3",
     "react-router-dom": "^7.13.0",
+    "simple-icons": "16.36.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.2.0",
     "tsup": "^8.0.0",